@charset "UTF-8";
/* common.css | 2025.11.03 改修 */

:root {
	/* Breakpoints */
	--bp-s: 500px;
	--bp-m: 767px;
	--bp-t: 1100px;
	--bp-d: 1380px;

	/* Fluid coefficient */
	--fluid: calc((100vw - var(--bp-s)) / (var(--bp-t) - var(--bp-s)));
	--fluid-wide: calc((100vw - var(--bp-s)) / (var(--bp-d) - var(--bp-s)));
	--fluid-td: calc((100vw - var(--bp-t)) / (var(--bp-d) - var(--bp-t)));

	/* Colors */
	--c-base: #2d2323;
	--c-white: #fff;
	--c-mustard: #cab15d;
	--c-brown: #756661;
	--c-red: #f90307;
	--c-mustard-l: #fbf8f1;

	/* Typography */
	--fs-max: 18px;
	--fs-min: 15px;
	--fs: clamp(var(--fs-min), calc(var(--fs-min) + (var(--fs-max) - var(--fs-min)) * var(--fluid)), var(--fs-max));
	--fs-xxs-max: 14px;
	--fs-xxs-min: 11px;
	--fs-xxs: clamp(var(--fs-xxs-min), calc(var(--fs-xxs-min) + (var(--fs-xxs-max) - var(--fs-xxs-min)) * var(--fluid)), var(--fs-xxs-max));
	--fs-xs-max: 16px;
	--fs-xs-min: 13px;
	--fs-xs: clamp(var(--fs-xs-min), calc(var(--fs-xs-min) + (var(--fs-xs-max) - var(--fs-xs-min)) * var(--fluid)), var(--fs-xs-max));
	--fs-lg-max: 20px;
	--fs-lg-min: 15px;
	--fs-lg: clamp(var(--fs-lg-min), calc(var(--fs-lg-min) + (var(--fs-lg-max) - var(--fs-lg-min)) * var(--fluid-wide)), var(--fs-lg-max));
	--fs-xl-max: 24px;
	--fs-xl-min: 17px;
	--fs-xl: clamp(var(--fs-xl-min), calc(var(--fs-xl-min) + (var(--fs-xl-max) - var(--fs-xl-min)) * var(--fluid-wide)), var(--fs-xl-max));
	--lh: 2.0;
	--lh-xs: 1.65;
	--ls: 0.08em;
	--ls-xs: 0.05em;
	--ls-xss: 0.02em;
	--title-1: clamp(18px, calc(18px + (28px - 18px) * var(--fluid)), 28px);

	/* Font Families */
	--ff-base: 'Zen Kaku Gothic New','Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
	--ff-yakuhan: YakuHanJP, 'Zen Kaku Gothic New','Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
	--ff-serif: "ヒラギノ明朝 Pro W3","Hiragino Mincho Pro","ＭＳ Ｐ明朝","MS PMincho",serif;
	--ff-noto: "Noto Sans JP", sans-serif;
	--ff-amsterdam: "New Amsterdam", sans-serif;

	/* Animation */
	--anim-spd: .6s;
	--anim-dur: .6s;
}

/*///////////////////////////////////
Frame / Block
///////////////////////////////////*/

body {
	font-family: var(--ff-base);
	font-size: clamp(var(--fs-min), calc(var(--fs-min) + (var(--fs-max) - var(--fs-min)) * var(--fluid)), var(--fs-max));
	color: var(--c-base);
	line-height: var(--lh);
	letter-spacing: var(--ls);
	text-align: justify;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	animation: fadeIn 1.5s ease 0s 1 normal;
}

@keyframes fadeIn {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

.section { padding: clamp(100px, calc(100px + (160px - 100px) * var(--fluid)), 160px) 0; }
.section.min { padding: clamp(60px, calc(60px + (120px - 60px) * var(--fluid)), 120px) 0; }
.section.fin { }
.section.mustard-l { background: var(--c-mustard-l); }
.section:last-child { margin-bottom: 0; }

.incnt { max-width: 960px; width: 88%; margin-inline: auto; position: relative; }
.incnt.min { max-width: 880px; }
.incnt.wide { max-width: 1180px; }
.incnt.wider { max-width: 1340px; }
.incnt.max { max-width: none; width: 100%; }

.block.s1 { margin-bottom: clamp(60px, calc(60px + (80 - 60) * var(--fluid)), 80px); }
.block.s2 { margin-bottom: clamp(80px, calc(80px + (120 - 80) * var(--fluid)), 120px); }
.block.s3 { margin-bottom: clamp(100px, calc(80px + (160 - 100) * var(--fluid)), 160px); }

.iframe { clear: both; text-align: center; position: relative; width: 100%; padding-top: 56.25%; }
.iframe iframe { position: absolute; top: 0; right: 0; width: 100% !important; height: 100% !important; }

img.fit-cover { width: 100%; height: 100%; object-fit: cover; }
img.fit-contain { width: 100%; height: 100%; object-fit: contain; }

.youtube { position: relative; width: 100%; padding-top: 56.25%; }
.youtube iframe { position: absolute; top: 0; right: 0; width: 100%; height: 100%; }

/*///////////////////////////////////
Text (Typography)
///////////////////////////////////*/

/* フォント族 */
.mincho { font-family: var(--ff-serif); }
.gothic { font-family: var(--ff-base); font-weight: 500; font-style: normal;}
.yakuhan { font-family: var(--ff-yakuhan); font-weight: 500; font-style: normal;}
.amsterdam { font-family: var(--ff-amsterdam); font-optical-sizing: auto; font-weight: 400; font-style: normal; letter-spacing: 0.15em; line-height: 1.2;margin-right: -0.1em; }

/* 縦書き */
.tategaki { writing-mode: vertical-rl; display: inline-block; text-align: left; }

/* 約物半角 */
.palt { font-feature-settings: "palt"; letter-spacing: .18em; }

/* Text Size Utilities (.txt.*) */
.txt.xxs { font-size: var(--fs-xxs); }
.txt.xs { font-size: var(--fs-xs); }
.txt.s {  }
.txt.m { font-size: clamp(var(--fs-min), calc(var(--fs-min) + (var(--fs-max) - var(--fs-min)) * var(--fluid)), var(--fs-max)); }
.txt.lg { font-size: clamp(16px, calc(16px + (20 - 16) * var(--fluid)), 20px); }
.txt.xl { font-size: clamp(18px, calc(18px + (24 - 18) * var(--fluid)), 24px); }
.txt.xxl { font-size: clamp(20px, calc(20px + (32 - 20) * var(--fluid)), 32px); }

/* Color utilities (minimal) */
.txt.black { color: #000; }
.txt.gray { color: #777; }
.txt.white { color: #fff; }
.txt.base { color: var(--c-base); }
.bg.gray { background: #f6f6f6; }

.txt.green { color: var(--c-mustard); }
.bg.green { background: var(--c-mustard); }
.border.green { border: 1px solid var(--c-mustard); }
.marker.green { background: linear-gradient(transparent 60%, var(--c-mustard) 0%); }

.txt-underline>span { position: relative; background-image: linear-gradient(var(--c-base), var(--c-base)); background-size: 100% 1px;  background-repeat: no-repeat; background-position: center bottom; padding-bottom: 2px;}
a.txt-underline:hover { color: var(--c-mustard);}
a:hover .txt-underline>span,
a.txt-underline:hover>span { background-image: linear-gradient(var(--c-mustard), var(--c-mustard)); animation: anime-underline 0.6s 1 0s;} 
@keyframes anime-underline {
	0% {  background-size: 0 1px; }
	100% {  background-size: 100% 1px; }
}
/* Notations / helpers */
p.indent,
ul.indent>li,
ol.indent>li { padding-left: 1em; text-indent: -1em; }

p.caution,
ul.caution>li { padding-left: 1em; text-indent: -1em; }
p.caution:before,
ul.caution>li:before { content: "※"; }

ul.none>li,
ul.none>li:before { content: ""; }

ul.dotlist>li { padding-left: 1em; text-indent: -1em; }
ul.dotlist>li:before { content: "●"; color: var(--c-mustard); font-size: .7em; margin-right: .3em; }


/*///////////////////////////////////
Title / Copy
///////////////////////////////////*/

.title-page { text-align: center; padding: 0 6%; }
.title-page .en { line-height: 1.1; font-size: clamp(46px, calc(46px + (80px - 46px) * var(--fluid)), 80px); color: var(--c-mustard); }
.title-page .main { line-height: 1.6; text-align: center; font-size: clamp(20px, calc(20px + (28px - 20px) * var(--fluid)), 28px); margin-top: 0.2em; }

.title-section { text-align: center; margin-bottom: clamp(20px, calc(20px + (50px - 20px) * var(--fluid)), 50px); }
.title-section .en { line-height: 1.1; font-size: clamp(34px, calc(34px + (68px - 34px) * var(--fluid)), 68px); color: var(--c-mustard); }
.title-section .main { line-height: 1.1; font-size: var(--fs-xl); line-height: var(--lh-xs); margin-top: clamp(6px, calc(6px + (30px - 6px) * var(--fluid-wide)), 30px); }

.title-block { }

.copy {  }


/*///////////////////////////////////
Btn /Link
///////////////////////////////////*/

/*///////////////////////////////////
Btn / Link（maskなし・ネストなし・従来メディアクエリ）
///////////////////////////////////*/

/* init */
a { color: var(--c-base); text-decoration: none; transition: .3s; }
a:hover { opacity: 1; color: var(--c-base); }

/* button */
.btn { display: inline-block; }
.btn.base { display: inline-block; font-size: var(--fs-xl); line-height: 1.5; letter-spacing: 0.05em;}
.btn.base span { position: relative; background-image: linear-gradient(var(--c-base), var(--c-base)); background-size: 100% 1px;  background-repeat: no-repeat; background-position: center bottom; padding-bottom: 2px;} 
.btn.base span::before { content: ""; width: 100%; }
.btn.base span::after { content: ""; display: inline-block; margin-left: 5px; width: 12px; height: 7px; background-image: url(../img/common/icon1.svg); background-repeat: no-repeat; background-position: center; background-size: contain; transition: transform .4s; transform: translateX(0); vertical-align: 5px; }
.btn.base:hover { color: var(--c-mustard); }
.btn.base:hover span { animation: anime-underline 0.6s 1 0s; background-image: linear-gradient(var(--c-mustard), var(--c-mustard)); }
.btn.base:hover span::after { background-image: url(../img/common/icon1_gold.svg); transform: translateX(3px); }
/* en */
.btn.en { font-size: clamp(34px, calc(34px + (68px - 34px) * var(--fluid)), 68px); color: var(--c-mustard); letter-spacing: 0.15em; line-height: 1.2; margin-right: -0.1em;}
.btn.en span { background-image:none!important; padding-bottom: 0px;}
.btn.en span::after { background-image: url(../img/common/icon1_gold.svg); width: 16px; height: 9px; vertical-align: clamp(5px, calc(5px + (15px - 5px) * var(--fluid)), 15px); }
.btn.en:hover span { background-image: linear-gradient(var(--c-mustard), var(--c-mustard))!important; }
/* white */
.btn.white { color: var(--c-white); }
.btn.white span { position: relative; background-image: linear-gradient(var(--c-white), var(--c-white)); }
.btn.white span::after { background-image: url(../img/common/icon1_w.svg); }
.btn.white:hover { color: var(--c-brown); }
.btn.white:hover span { background-image: linear-gradient(var(--c-brown), var(--c-brown)); }
.btn.white:hover span::after { background-image: url(../img/common/icon1_brown.svg); }
.btn.en.white:hover span { background-image: linear-gradient(var(--c-brown), var(--c-brown))!important; }
@media screen and (max-width: 500px) {
	.btn.base span::after { margin-left: 5px; width: 10px; height: 5px; vertical-align: px; }
	.btn.en span::after { vertical-align: 8px; }
}

.btn.base.min { }
.btn.base.wide { }
.btn.base.submit { }
@media screen and (max-width: 500px) {
}

.btnbox { text-align: center; width: 100%; margin-top: 1.3em; }
.btnbox.wide { margin-top: 70px; }
ul.btnbox { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 0.5em 1em; }
ul.btnbox>li { list-style: none; }
@media screen and (max-width: 767px) {
}

a.link.base { display: inline-block; line-height: 1.3; font-size: clamp(16px, calc(16px + (18 - 16) * var(--fluid)), 18px); font-weight: 700; position: relative; letter-spacing: .05em; padding-right: 25px; }
a.link.base::after { content: ""; position: absolute; right: 0; top: 4px; width: 20px; height: 16px; background-image: url(../img/common/arr1.svg); background-repeat: no-repeat; background-position: center; background-size: contain; transition: transform .4s; transform: translateX(0); line-height: 1; }
a.link.base:hover::after { transform: translateX(3px); }
@media screen and (max-width: 767px) {
	a { transition: none; }
	a.link.base { font-size: 15px; padding-right: 22px; }
}

a.linktxt { }
a.linktxt:visited { color: inherit; }
a.linktxt:hover { color: #666; }


/* ベース */
.reveal {
  position: relative;
  overflow: hidden;
  --panel: #f2f2f2;                   /* グレー色 */
  --panel-dur: 1.2s;                   /* パネルが広がる時間 */
  --img-dur: 2s;                     /* 画像フェード時間 */
  --ease: cubic-bezier(0, 0.55, 0.45, 1);
  --ease-2: cubic-bezier(.47, 0, .745, .715);
}

/* 画像は後からフェードイン */
.reveal img {
  display: block;
  width: 100%;
  opacity: 0;
  transform: scale(1.02);
  transition:
    opacity var(--img-dur) var(--ease) var(--panel-dur),   /* パネル完了後に開始 */
    transform var(--img-dur) var(--ease-2) var(--panel-dur);
  will-change: opacity, transform;
}

/* グレーパネル：左端から幅0%→100%に「現れる」 */
.reveal::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--panel);
  transform-origin: left center;
  transform: scaleX(0);                                  /* 幅0%で待機 */
  opacity: 1;
  transition:
    transform var(--panel-dur) var(--ease),              /* まず 0→1 へ拡大 */
    opacity   var(--img-dur)   var(--ease-2) var(--panel-dur); /* その後に薄くなる */
  will-change: transform, opacity;
}

/* 可視化トリガー後（順番：パネル出現 → パネル薄く → 画像フェード） */
.reveal.is-visible::before { transform: scaleX(1); opacity: 0; }
.reveal.is-visible img     { opacity: 1; transform: none; }

/* 任意：開始を少し遅らせたい個体に（パネル開始を遅延） */
.reveal.delay-1::before { transition-delay: .1s, calc(.1s + var(--panel-dur)); }
.reveal.delay-2::before { transition-delay: .2s, calc(.2s + var(--panel-dur)); }

/* 動き弱めオプション（好みで） */
@media (prefers-reduced-motion: reduce) {
  .reveal::before, .reveal img {
    transition: none; transform: none; opacity: 1;
  }
}



/*///////////////////////////////////
Table
///////////////////////////////////*/

/* reset */
table { border-collapse: collapse; border-spacing: 0; width: 100%; text-align: left; font-style: normal; font-weight: normal; }
table th, table td { text-align: left; vertical-align: middle; overflow-wrap: anywhere; }
table th { font-weight: 700; }
table.base th,
table.base td { padding: clamp(16px, calc(16px + (30 - 16) * var(--fluid)), 30px) 2%; line-height: 1.6; border: 1px solid var(--c-base); }
@media (width <= 767px) {
	table.base th, table.base td { padding-inline: 4%; }
}

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll>table { min-width: 640px; }


/*///////////////////////////////////
Site Common
///////////////////////////////////*/

/* pager */
.c-pager { width: 100%; position: relative; margin-top: clamp(60px, calc(60px + (100px - 60px) * var(--fluid)), 100px); color: var(--c-base); display: flex; justify-content: center; align-items: center; font-size: var(--fs-lg); gap: 2em; flex-wrap:wrap;}
.c-pager .link { font-size: clamp(16px, calc(16px + (18 - 16) * var(--fluid)), 18px); line-height: 1.3; text-decoration: none; color: inherit; padding: 1px 0; position: relative; }
.c-pager .prev { order:1; }
.c-pager .index { order:3; }
.c-pager .next { order:4; }
.c-pager .link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; margin: 0 auto; width: 0; height: 1px; background-color: var(--c-base); transition: width .3s; }
.c-pager .link:hover { color: var(--c-mustard); }
.c-pager .link:hover::after { width: 100%; background-color: var(--c-mustard);}

/* ページ番号 */
.c-pager .page-numbers { margin: 0; padding: 0; text-align: center; list-style: none; order:2; }
.c-pager .page-numbers li { display: inline-block; }
.c-pager .page-numbers li a,
.c-pager .page-numbers li span { display: block; position: relative; box-sizing: border-box; text-decoration: none; color: inherit; letter-spacing: 0; font-size: var(--fs-lg); margin: 0 3px; padding: 6px 3px; line-height: 1.2; }
.c-pager .page-numbers li a::after,
.c-pager .page-numbers li span::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; margin: 0 auto; width: 0; height: 1px; background-color: var(--c-base); transition: width .3s; }
.c-pager .page-numbers li a:hover { color: var(--c-mustard); }
.c-pager .page-numbers li a:hover::after,
.c-pager .page-numbers li span.current::after { width: 100%; background-color: var(--c-mustard);}
.c-pager .page-numbers li span.dots { padding: 6px 5px; cursor: default; }

/* .c-list-news */
ul.c-list-blog { display: flex; column-gap: 4%; row-gap: 2.5em; flex-wrap: wrap; }
ul.c-list-blog>li { width:calc((100% - 8%) / 3); }
ul.c-list-blog>li .txtbox .catbox { display: flex; justify-content: space-between; align-items: center; margin: 1em 0 0.7em;}
ul.c-list-blog>li .txtbox .catbox>.cat { font-size: clamp(9px, calc(9px + (11px - 9px) * var(--fluid-wide)), 11px); background-color: var(--c-white); border-radius: 11px; border: 1px solid var(--c-base); line-height:1; padding: 0.3em 0.8em; letter-spacing: var(--ls-xss); transition: background-color .3s;}
ul.c-list-blog>li .txtbox .catbox>.tag { font-size: var(--fs-xs); line-height: var(--lh-xs); transition: color .3s;}
ul.c-list-blog>li .txtbox .catbox>.tag>span { padding-bottom: 0;} 
ul.c-list-blog>li .txtbox .title { font-size: var(--fs-lg); line-height: var(--lh-xs); transition: color .3s;}
ul.c-list-blog>li a:hover .txtbox .catbox>.cat { background-color: var(--c-mustard); }
ul.c-list-blog>li a:hover .txtbox .catbox>.tag,
ul.c-list-blog>li a:hover .txtbox .title { color: var(--c-mustard); }
ul.c-list-blog>li .txtbox .title>span {padding-bottom: 1px;} 
ul.c-list-blog>li .txtbox .date { font-size: var(--fs-xxs); line-height: var(--lh-xs); color: #9f938e; margin-top: 1.5em;} 
ul.c-list-blog>li .imgbox { width: 100%; aspect-ratio: 0.8; }
ul.c-list-blog>li .imgbox::after { content: ""; width: 100%; height: 100%; position: absolute; inset: 0; background: var(--c-base); opacity: 0; transition: opacity .5s; }
ul.c-list-blog>li a:hover .imgbox::after { content: ""; width: 100%; height: 100%; position: absolute; inset: 0; background: var(--c-base); opacity: 0.3; transition: opacity .5s; }
@media screen and (max-width: 1100px) {
	ul.c-list-blog>li .txtbox .catbox>.tag { display: none; }
}
@media screen and (max-width: 767px) {
	ul.c-list-blog { }
	ul.c-list-blog>li { width: calc((100% - 4%) / 2); }
}

/* 下余白 */
.vgap-s { margin-bottom: clamp(20px, calc(20px + (40 - 20) * var(--fluid)), 40px) !important; }
.vgap-m { margin-bottom: clamp(40px, calc(40px + (60 - 40) * var(--fluid)), 60px) !important; }
.vgap-lg { margin-bottom: clamp(60px, calc(60px + (80 - 60) * var(--fluid)), 80px) !important; }
.vgap-xl { margin-bottom: clamp(80px, calc(80px + (120 - 80) * var(--fluid)), 120px) !important; }



/*///////////////////////////////////
#Form
///////////////////////////////////*/




/*///////////////////////////////////
WP
///////////////////////////////////*/

/*.editbody */
.editbody {}
.editbody>p:not(:first-child),
.editbody ul,
.editbody ol,
.editbody table { margin-top: 1.5em; }
.editbody>img:not(:first-child) { margin-top: 1.5em; }
.editbody h2 { font-size: var(--fs-xl); margin-top: 3em; text-decoration: underline; text-underline-offset: 0.4em; text-decoration-thickness: 1px;}
.editbody h3 { font-size: var(--fs-lg); margin-top: 2em;}
.editbody ul.list-1 { padding: 1.5em; background-color:#f5f0e0; margin-top: 1.8em;}
.editbody ul.list-1>li { padding-left: 1em; text-indent: -1em; margin: 0.3em; line-height: 1.8; }
.editbody ul.list-1>li::before { content: "・"; color: var(--c-mustard); }
.editbody p>img { max-width: 100%; margin: 15px 0; }
.editbody>h3 + p:not(:first-child) { margin-top: 1.2em;}
.editbody>ul.list-1 + p:not(:first-child) { margin-top: 1.8em;}
.editbody span.brown { color: var(--c-brown); }
.editbody span.mustard { color: var(--c-mustard); }
.editbody span.bg.mustard { background-color:#eae0c0; color: var(--c-base);}

.editbody>p>a { text-decoration: underline; text-underline-offset: 0.4em; text-decoration-thickness: 1px;}
.editbody>p>a:hover { color: var(--c-mustard);}
#tinymce.editbody { width: 92%; margin:2em auto; max-width: 640px; }
@media screen and (max-width: 767px) { 
}