/* ==========================================================
   日本人協會 AIA ― 互道
   基調：生成り（アイボリー）／朝靄のグレー／金箔のアクセント
   ========================================================== */

:root{
  --kinari:      #FAF6EC;   /* 生成り（ページ基調） */
  --zouge:       #F4EFE2;   /* 象牙（帯・カード） */
  --moya-1:      #EDEBE4;   /* 靄・明 */
  --moya-2:      #D9D8D2;   /* 靄・暗 */
  --sumi:        #3B3833;   /* 墨（本文） */
  --usuzumi:     #6E695F;   /* 薄墨（補助文） */
  --gold:        #C3A24B;   /* 本金 */
  --gold-light:  #E9D48E;   /* 金・光 */
  --gold-deep:   #9A7B2E;   /* 金・陰 */
  --grad-gold:   linear-gradient(160deg,#F2E3AC 0%,#E9D48E 22%,#C3A24B 48%,#9A7B2E 72%,#B9B6AD 100%);
  --font-min:    "Shippori Mincho","Yu Mincho","Hiragino Mincho ProN",serif;
  --font-brush:  "Yuji Syuku","Yuji Boku",var(--font-min);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:hidden}
body{
  font-family:var(--font-min);
  color:var(--sumi);
  background:repeating-linear-gradient(180deg,
    #F1F3E7 0px, #DFE4D0 620px, #F1F3E7 1240px);
  letter-spacing:.08em;
  line-height:2;
  font-feature-settings:"palt";
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
a:focus-visible,.btn:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:2px}

/* ---------- 透かし（漉き込み）：ページ全体で一枚につながる固定層 ---------- */
body{position:relative}
/* 丸に左三階松（実物から抽出）：紙の上・内容の下にうっすらと */
.kamon-veil{
  position:absolute;top:100svh;left:0;right:0;bottom:0;z-index:1;pointer-events:none;
  background-image:url("images/kamon-tile.png"),url("images/kamon-tile.png");
  background-size:380px 380px,380px 380px;
  background-position:0 0,190px 190px;
  background-repeat:repeat,repeat;
  opacity:.20;
}
/* 紋様の上に文字・画像が乗るよう、内容側を一段上げる */
.sec > .wrap{position:relative;z-index:1}
.footer{position:relative}
.footer__inner{position:relative;z-index:1}
.page-hero > *{position:relative;z-index:1}
.hero__inner,.hero__scroll{z-index:2}

/* ---------- 共通レイアウト ---------- */
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
.wrap--narrow{max-width:760px}
.center{text-align:center}
.center-text{text-align:center}
.sec{padding:clamp(76px,9vw,120px) 0;position:relative;overflow:visible}
.eyebrow{
  font-size:1.2rem;letter-spacing:.42em;color:var(--gold-deep);
  margin-bottom:1.8em;
}
.eyebrow__en{
  display:block;margin-top:.7em;
  font-size:1.05rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--usuzumi);opacity:.75;
}
.eyebrow__en a{color:inherit;text-decoration:underline;text-underline-offset:.25em;transition:color .25s}
.eyebrow__en a:hover{color:var(--gold-deep)}
/* 巨大な透かし筆文字（墨の迫力を静かに） */
.wm{
  position:absolute;top:50%;left:-2%;
  transform:translateY(-52%);
  font-size:clamp(18rem,42vw,34rem);line-height:1;
  writing-mode:vertical-rl;
  background:none;-webkit-text-fill-color:rgba(196,181,146,.07);color:rgba(196,181,146,.07);
  opacity:1;pointer-events:none;user-select:none;
  filter:none;z-index:0;
}
.wm--right{left:auto;right:-2%}
/* 実物の筆文字画像による透かし（Site 3の大きさ・落ち着いた金） */
.wm-img{
  position:absolute;top:auto;bottom:0;left:-1%;transform:translateY(52%);
  height:clamp(30rem,80vh,54rem);width:auto;object-fit:contain;
  opacity:.22;pointer-events:none;user-select:none;z-index:1;
}
/* 縦書き2文字：一字が上と同じ大きさ＝全体は約2倍の丈 */
.wm-img--x2{height:clamp(58rem,156vh,105rem)}
.wm-img--right{left:auto;right:-1%}
/* さらに大きく（説明文にかかってよい） */
.wm-img--xl{height:clamp(38rem,102vh,68rem)}
/* もう少し上へ（動画等にかかってよい） */
.wm-img--up{top:44%;bottom:auto;transform:translateY(-50%)}
/* 英語スクリプト（Miss Pentagon） */
.wm-script{
  position:absolute;left:50%;right:auto;bottom:-1%;
  transform:translateX(-50%) translateY(42%) rotate(-4deg);
  font-family:"Snell Roundhand","Great Vibes","Savoye LET",cursive;
  font-weight:800;font-size:clamp(3.8rem,8.5vw,7rem);letter-spacing:.02em;
  background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;white-space:nowrap;
  -webkit-text-stroke:1.8px rgba(154,123,46,.28);opacity:.55;
  pointer-events:none;user-select:none;z-index:1;
}
/* --- 個別調整（最終） --- */
.wm-ki{height:clamp(46rem,118vh,78rem);top:34%;bottom:auto;transform:translateY(-50%);opacity:.28}
.wm-aiki{opacity:.28;top:52%;bottom:auto;transform:translateY(-50%);right:-2%}  /* 右寄せ・少し下 */
.wm-shokuyo{top:70%;bottom:auto;transform:translateY(-50%);left:-2%}             /* 左寄せ */
.wm-makoto{left:50%;transform:translateX(-50%) translateY(52%);height:clamp(52rem,132vh,88rem)}  /* 中央・特大 */
.wm-asa{top:56%;bottom:auto;transform:translateY(-50%);height:clamp(52rem,132vh,88rem)}          /* 特大 */
@media(max-width:640px){
  .wm-img{height:24rem;opacity:.18}
  .wm-img--x2{height:46rem}
  .wm-img--xl{height:30rem}
  .wm-ki{height:34rem}
  .wm-script{font-size:3rem}
}

.wm--tate{letter-spacing:.06em}
@media(max-width:640px){.wm{font-size:13rem}}
.center .eyebrow,.center-text.eyebrow{letter-spacing:.5em;text-indent:.5em}
.sec__title{
  font-weight:600;font-size:clamp(1.65rem,3.8vw,2.5rem);
  line-height:1.8;margin-bottom:1.2em;letter-spacing:.06em;
}
.body{color:var(--usuzumi);font-size:.98rem;margin-bottom:1.4em}
.pc{display:inline}
@media(max-width:640px){.pc{display:none}}

/* ---------- 金グラデーション文字（筆文字含む） ---------- */
.gold-grad,.brush{
  background:var(--grad-gold);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.brush{
  font-family:var(--font-brush);
  font-weight:400;
  text-shadow:0 0 26px rgba(195,162,75,.35); /* 金墨のにじみ */
}
@supports (-webkit-background-clip:text){
  .brush{text-shadow:none;filter:drop-shadow(0 0 14px rgba(195,162,75,.35))}
}
/* 金の中を光がゆっくり渡る（ヒーローの「互道」用） */
.brush--shimmer{
  background:linear-gradient(115deg,
    #A38442 0%, #C3A24B 18%, #F4E7B4 34%, #E9D48E 42%,
    #C3A24B 55%, #9A7B2E 72%, #AFACA2 88%, #C7C4BA 100%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;
  animation:shimmer 9s ease-in-out infinite alternate;
}
@keyframes shimmer{from{background-position:0% 0}to{background-position:100% 0}}

/* ---------- ナビゲーション ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 28px;
  background:rgba(250,246,236,.82);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(195,162,75,.18);
  transition:box-shadow .4s;
}
.nav.is-scrolled{box-shadow:0 4px 24px rgba(59,56,51,.06)}
.nav__brand{display:flex;align-items:center;gap:12px}
.logo{width:42px;height:42px}
.logo__aia{
  font-family:var(--font-min);font-size:17px;letter-spacing:1px;
  fill:#9A7B2E;font-weight:600;
}
.nav__name{font-size:.95rem;letter-spacing:.14em}
.nav__name em{font-style:normal;color:var(--gold-deep);margin-left:.3em;font-size:.85em}
.nav__menu{display:flex;gap:clamp(9px,1.5vw,26px);align-items:center;font-size:.85rem}
.nav__menu a{position:relative;padding:4px 0;transition:color .3s;white-space:nowrap}
.nav__menu a:hover{color:var(--gold-deep)}
.nav__menu a::after{
  content:"";position:absolute;left:0;bottom:0;width:0;height:1px;
  background:var(--gold);transition:width .35s;
}
.nav__menu a:hover::after{width:100%}
.nav__cta{
  border:1px solid var(--gold);border-radius:999px;
  padding:7px 20px !important;color:var(--gold-deep);
}
.nav__cta:hover{background:var(--gold);color:#fff}
.nav__cta::after{display:none}
@media(max-width:820px){
  .nav{padding:12px 16px}
  .nav__name{display:none}
  .nav__menu{gap:16px;font-size:.78rem;flex-wrap:wrap;justify-content:flex-end}
  .nav__cta{padding:5px 14px !important}
}

/* ---------- 1. ヒーロー ---------- */
.hero{
  position:relative;min-height:min(56vh,520px);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;text-align:center;
}
/* ★写真差し替え箇所：
   .hero__photo{ background-image:url("images/hero-umi.jpg"); }
   を追記するだけで、海の写真が靄の下に敷かれます。 */
/* 海の写真＋靄のグラデーション（写真は images/hero-umi.png） */
.hero__photo{
  /* 写真は使わず、生成りの単色地。下端だけ透明にフェードし、
     次セクションから始まる家紋の透かし（.kamon-veilはhero高さ＝100svhの位置から開始）へ
     自然につながるようにする */
  position:absolute;inset:0;
  background:var(--kinari);
  -webkit-mask-image:linear-gradient(180deg,#000 80%,rgba(0,0,0,.45) 93%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 80%,rgba(0,0,0,.45) 93%,transparent 100%);
}

.hero__inner{position:relative;z-index:2;padding:clamp(88px,12vh,128px) 20px 40px}
/* 筆文字の背後に、うすい靄の帯（文字を沈ませないための和紙のひと重ね） */
.hero__inner::before{
  content:"";position:absolute;z-index:-1;
  inset:-12% -16%;
  background:radial-gradient(58% 62% at 50% 46%,
    rgba(250,246,236,.88) 0%,
    rgba(250,246,236,.55) 48%,
    rgba(250,246,236,0) 74%);
  filter:blur(10px);
  pointer-events:none;
}
.hero__eyebrow{
  font-size:.85rem;letter-spacing:.6em;text-indent:.6em;
  color:var(--usuzumi);margin-bottom:2.2em;
}
.hero__title{line-height:0;margin:0}
.hero__logo{
  width:min(56vw,504px);height:auto;margin:0 auto; /* 元の70%サイズ */
  /* クリーム地でも沈まないよう、深い金のにじみと薄墨の輪郭を足す */
  filter:
    drop-shadow(0 0 1px rgba(122,95,36,.55))
    drop-shadow(0 0 22px rgba(195,162,75,.45))
    drop-shadow(0 10px 34px rgba(154,123,46,.30));
}
/* 朝の光の帯（斜めに一筋） */
.hero::after{
  content:"";position:absolute;z-index:1;pointer-events:none;
  top:-20%;left:22%;width:30%;height:150%;
  transform:rotate(16deg);
  background:linear-gradient(90deg,transparent,rgba(244,231,180,.30) 45%,rgba(255,253,244,.42) 52%,rgba(244,231,180,.28) 58%,transparent);
  filter:blur(14px);
}
.hero__sub{
  margin-top:.7em;
  font-size:clamp(1.25rem,7.03vw,3.95rem);font-weight:700;
  letter-spacing:.1em;text-indent:.1em;line-height:1.25;
  white-space:nowrap;
  background:linear-gradient(180deg,#EED9A4 0%,#FBF1CC 22%,#EFD79A 46%,#E0BC6C 74%,#CB9A4C 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  -webkit-text-stroke:.5px rgba(160,126,58,.35);
  filter:drop-shadow(0 1px 1px rgba(139,106,42,.40)) drop-shadow(0 0 10px rgba(240,212,132,.50)) drop-shadow(0 0 26px rgba(214,180,98,.28));
}
.hero__scroll{
  position:absolute;bottom:28px;left:50%;transform:translateX(-50%);z-index:2;
}
.hero__scroll span{
  display:block;width:1px;height:64px;
  background:linear-gradient(180deg,var(--gold) 0%,transparent 100%);
  animation:drop 2.6s ease-in-out infinite;
}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- 2. 理念 ---------- */
.sec--rinen{background:rgba(250,246,236,.40)}
.sec--rinen .eyebrow{margin-bottom:1em}
.rinen__logo{margin:0 0 34px}
.rinen__logo img{
  width:min(88%,560px);height:auto;
  filter:
    drop-shadow(0 0 1px rgba(122,95,36,.5))
    drop-shadow(0 0 18px rgba(195,162,75,.4))
    drop-shadow(0 8px 26px rgba(154,123,46,.25));
}
.rinen__lead{
  font-size:clamp(1.4rem,3.4vw,2rem);font-weight:500;
  line-height:2.1;margin-bottom:1.4em;
}

/* ---------- 3. 演武 ---------- */
.sec--enbu{
  background:linear-gradient(180deg,rgba(250,246,236,.40) 0%,rgba(244,239,226,.40) 50%,rgba(250,246,236,.40) 100%);
}
.enbu{max-width:880px;margin:0 auto}
.enbu > img{
  border-radius:6px;
  box-shadow:0 24px 60px rgba(59,56,51,.16);
}
.aiki-title{box-shadow:none !important;border-radius:0 !important;background:none !important}
.enbu__cap{
  display:flex;align-items:center;gap:28px;
  margin-top:40px;justify-content:center;flex-wrap:wrap;text-align:left;
}
.brush--small{font-size:3rem;line-height:1}
.aiki-title{height:7.5rem;width:auto;filter:drop-shadow(0 0 12px rgba(195,162,75,.3))}
.sec--enbu{padding-top:36px;padding-bottom:clamp(36px,4vw,56px)}
.sec--rinen{padding-bottom:34px}
.sec--keizoku{padding-top:clamp(44px,5vw,64px)}
.enbu__cap p{color:var(--usuzumi);font-size:.95rem}
@media(max-width:640px){.enbu__cap{flex-direction:column;text-align:center}}

/* ---------- 4. 継続 ---------- */
.sec--keizoku{
  background:
    radial-gradient(60% 46% at 50% 52%, rgba(233,212,142,.14), transparent 70%),
    rgba(250,246,236,.40);
}
.keizoku__num{font-size:clamp(6rem,18vw,11.5rem);line-height:1;font-weight:600}
.keizoku__num .gold-grad{font-family:Georgia,"Times New Roman",serif;letter-spacing:.02em}
.keizoku__unit{font-size:.28em;color:var(--usuzumi);-webkit-text-fill-color:var(--usuzumi);margin-left:.15em}
.keizoku__lead{
  margin:1.4em 0 1.2em;font-size:clamp(1.1rem,2.6vw,1.4rem);
  letter-spacing:.24em;text-indent:.24em;
}
.keizoku__video{max-width:560px;margin:64px auto 0}
.keizoku__player{position:relative}
.keizoku__player video{
  width:100%;display:block;border-radius:4px;
  box-shadow:0 24px 60px rgba(59,56,51,.18);
  border:1px solid rgba(158,127,58,.6);
  outline:1px solid rgba(158,127,58,.4);outline-offset:5px;
}
.orn{position:absolute;pointer-events:none;z-index:2;background:no-repeat center/contain}
.orn--tl{background-image:url("images/frame-tl.png");width:104px;height:82px;top:-13px;left:-13px}
.orn--tr{background-image:url("images/frame-tr.png");width:102px;height:86px;top:-13px;right:-13px}
.orn--bl{background-image:url("images/frame-bl.png");width:92px;height:88px;bottom:-5px;left:-13px}
.orn--br{background-image:url("images/frame-br.png");width:104px;height:88px;bottom:-5px;right:-13px}
.orn-crest{position:absolute;left:50%;transform:translateX(-50%);pointer-events:none;z-index:2;background:no-repeat center/contain}
.orn-crest--t{background-image:url("images/frame-ct.png");width:168px;height:38px;top:-17px}
.orn-crest--b{background-image:url("images/frame-cb.png");width:168px;height:72px;bottom:-9px}
@media(max-width:640px){
  .orn--tl,.orn--tr{width:84px;height:70px;top:-18px}
  .orn--bl,.orn--br{width:80px;height:74px;bottom:-18px}
  .orn--tl,.orn--bl{left:-16px}.orn--tr,.orn--br{right:-16px}
  .orn-crest--t{width:140px;height:32px;top:-16px}
  .orn-crest--b{width:140px;height:60px;bottom:-28px}
}
.sound-btn{
  position:absolute;right:14px;bottom:14px;
  font-family:var(--font-min);font-size:.78rem;letter-spacing:.12em;
  padding:8px 18px;border-radius:999px;cursor:pointer;
  color:#F4EFE2;background:rgba(59,56,51,.45);
  border:1px solid rgba(233,212,142,.6);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:background .3s,color .3s;
}
.sound-btn:hover{background:rgba(154,123,46,.7)}
.sound-btn.is-on{background:rgba(195,162,75,.85);color:#fff}
.replay-btn{right:auto;left:14px}

/* ---------- 下層ページ共通 ---------- */
.page-hero{
  position:relative;padding:170px 0 90px;text-align:center;overflow:hidden;
  background:
    linear-gradient(180deg, rgba(250,246,236,.72) 0%, rgba(250,246,236,.5) 60%, var(--kinari) 100%),
    url("images/hero-umi.png") center 40%/cover no-repeat;
}
.page-hero__title{
  font-size:clamp(1.9rem,5vw,2.9rem);font-weight:600;letter-spacing:.14em;
  margin-bottom:.6em;
}
.page-hero__en{font-size:.75rem;letter-spacing:.5em;color:var(--gold-deep);text-transform:uppercase}
.breadcrumb{font-size:.75rem;color:var(--usuzumi);margin-top:2.4em;letter-spacing:.1em}
.breadcrumb a{color:var(--gold-deep)}
.poem{
  font-size:clamp(1rem,2.4vw,1.15rem);line-height:2.6;letter-spacing:.14em;
  color:var(--sumi);
}
.prose h3{
  font-size:1.2rem;font-weight:600;margin:2.2em 0 .9em;letter-spacing:.1em;
  padding-left:.9em;border-left:3px solid var(--gold);
}
.prose p{color:var(--usuzumi);font-size:.98rem;margin-bottom:1.4em}
.spec{
  background:#FFFDF7;border:1px solid rgba(195,162,75,.22);border-radius:8px;
  padding:26px 30px;margin:1.6em 0;font-size:.9rem;color:var(--usuzumi);line-height:2.1;
}
.spec strong{color:var(--sumi);font-weight:600}
.link-ext{color:var(--gold-deep);text-decoration:underline;text-underline-offset:4px}
.product-detail{display:grid;grid-template-columns:0.9fr 1.1fr;gap:50px;align-items:start;margin:70px 0}
.product-detail:nth-of-type(even){direction:rtl}
.product-detail>*{direction:ltr}
.product-detail img{border-radius:8px;box-shadow:0 18px 44px rgba(59,56,51,.14);border:1px solid rgba(195,162,75,.2)}
.product-detail h3{font-size:1.35rem;font-weight:600;margin-bottom:.8em;letter-spacing:.1em}
@media(max-width:760px){.product-detail{grid-template-columns:1fr;gap:28px}}
.news-item{
  border-bottom:1px solid rgba(195,162,75,.25);padding:26px 4px;
  display:flex;gap:26px;align-items:baseline;flex-wrap:wrap;
}
.news-item time{font-size:.82rem;color:var(--gold-deep);letter-spacing:.08em;white-space:nowrap}
.news-item p{margin:0;color:var(--sumi);font-size:.95rem}
.keizoku__video figcaption{
  margin-top:40px;font-size:.85rem;color:var(--usuzumi);
  letter-spacing:.14em;
}

/* ---------- 5. カタカムナ製品 ---------- */
.sec--products{
  background:linear-gradient(180deg,rgba(244,239,226,.40) 0%,rgba(250,246,236,.40) 24%,rgba(250,246,236,.40) 100%);
}
.cards{
  display:grid;grid-template-columns:repeat(4,1fr);gap:26px;
  margin:70px 0 80px;
}
@media(max-width:900px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.cards{grid-template-columns:1fr;max-width:340px;margin-inline:auto}}
.card{
  background:#FFFDF7;border:1px solid rgba(195,162,75,.22);
  border-radius:8px;overflow:hidden;text-align:center;
  transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s;
}
.card:hover{transform:translateY(-6px);box-shadow:0 18px 44px rgba(154,123,46,.16)}
.card__img{aspect-ratio:4/5;overflow:hidden;background:var(--moya-1)}
.card__img img{width:100%;height:100%;object-fit:cover}
.card__img--ph{
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#F2EFE4 0%,#E4E2DA 60%,#DBD9D1 100%);
}
.ph-motif{display:block;border:2px solid var(--gold);opacity:.75}
.ph-motif--ring{width:76px;height:76px;border-radius:50%;box-shadow:inset 0 0 0 6px rgba(233,212,142,.35)}
.ph-motif--bangle{width:86px;height:56px;border-radius:50%/40%}
.ph-motif--orb{width:64px;height:64px;border-radius:50%;background:radial-gradient(circle at 34% 30%, rgba(233,212,142,.7), rgba(195,162,75,.15) 68%)}
.card__name{font-size:1.02rem;font-weight:600;margin:20px 14px 4px;letter-spacing:.1em}
.card__desc{font-size:.82rem;color:var(--usuzumi);margin:0 14px 22px}
.products__feature{max-width:480px;margin:0 auto 40px;text-align:center}
.products__feature img{border-radius:8px;box-shadow:0 18px 48px rgba(59,56,51,.14)}
.products__feature figcaption{margin-top:18px;font-size:.85rem;color:var(--usuzumi)}
.products__note{font-size:.9rem;color:var(--usuzumi)}

/* ---------- 6. さえぐさ誠（伯楽） ---------- */
.sec--hakuraku{
  background:linear-gradient(165deg,rgba(250,246,236,.48) 0%,rgba(237,235,228,.48) 55%,rgba(217,216,210,.48) 130%);
}
.hakuraku{display:grid;grid-template-columns:0.85fr 1.15fr;gap:70px;align-items:center}
@media(max-width:820px){.hakuraku{grid-template-columns:1fr;gap:44px}}
/* ★写真差し替え：この枠に <img> を入れると object-fit:cover で収まります */
.hakuraku__photo{
  aspect-ratio:3/4;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(90% 60% at 50% 100%, rgba(180,188,193,.5), transparent 70%),
    linear-gradient(180deg,#F6F2E7 0%,#E7E6DE 60%,#D9DAD4 100%);
  box-shadow:0 20px 50px rgba(59,56,51,.12);
  overflow:hidden;
}
.hakuraku__photo img{width:100%;height:100%;object-fit:cover}
.brush--tate{writing-mode:vertical-rl;font-size:clamp(4rem,9vw,6rem);letter-spacing:.2em}
.hakuraku__go{
  display:block;font-size:.55em;color:var(--usuzumi);
  margin-top:.9em;letter-spacing:.2em;font-weight:400;
}

/* ---------- 7. 早朝ライブ ---------- */
.sec--live{
  background:
    radial-gradient(70% 55% at 50% -10%, rgba(233,212,142,.2), transparent 60%),
    rgba(250,246,236,.40);
}
.live__time{font-size:clamp(3.4rem,10vw,6rem);font-weight:600;line-height:1.2;margin-bottom:.4em}
.prose p.live__time{font-size:clamp(1.9rem,2.6vw,2.3rem);margin-bottom:.2em}
.live__time .gold-grad{font-family:Georgia,"Times New Roman",serif}

/* ---------- ボタン ---------- */
.btn{
  display:inline-block;margin-top:1.4em;
  padding:14px 46px;border:1px solid #A9883C;border-radius:999px;
  font-size:.92rem;letter-spacing:.2em;text-indent:.2em;color:#7C6222;
  transition:background .4s,color .4s,box-shadow .4s;
}
.btn:hover{background:#A9883C;color:#fff;box-shadow:0 10px 28px rgba(124,98,34,.35)}
.btn--gold{
  background:linear-gradient(160deg,#C9AD5F 0%,#A9883C 48%,#7C6222 100%);
  color:#FFF9E8;border:none;
  box-shadow:0 10px 28px rgba(124,98,34,.3);
}
.btn--gold:hover{filter:brightness(1.08);box-shadow:0 14px 34px rgba(124,98,34,.42)}

/* ---------- 8. Contact・フッター ---------- */
.sec--contact{background:linear-gradient(180deg,rgba(250,246,236,.40) 0%,rgba(244,239,226,.48) 100%)}
.footer{
  background:rgba(244,239,226,.62);
  border-top:1px solid rgba(195,162,75,.25);
  padding:56px 0 40px;
}
.footer__inner{display:flex;flex-direction:column;align-items:center;gap:26px}
.logo--footer{width:74px;height:74px;filter:drop-shadow(0 0 5px rgba(214,178,80,.55))}
.footer__top{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  text-decoration:none;transition:filter .25s,transform .25s;
}
.footer__top:hover{filter:brightness(1.12);transform:translateY(-2px)}
.footer__toplabel{font-size:.74rem;letter-spacing:.24em;color:#A9883C}
.logo__aia--footer{fill:#C9A227}
.footer__menu{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:12px 30px;font-size:.85rem;color:var(--usuzumi);
}
.footer__menu a:hover{color:var(--gold-deep)}
.footer__copy{font-size:.75rem;letter-spacing:.18em;color:var(--usuzumi)}

/* ---------- スクロール出現（ひかえめ） ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity 1.1s ease,transform 1.1s cubic-bezier(.2,.7,.2,1)}
.reveal.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .hero__mist::before,.hero__mist::after,.hero__scroll span,.brush--shimmer{animation:none}
  html{scroll-behavior:auto}
}

/* ---------- お問い合わせフォーム ---------- */
.form{max-width:640px;margin:40px auto 0}
.form__label{display:block;font-size:.95rem;margin:26px 0 10px;letter-spacing:.12em}
.form__req{
  display:inline-block;margin-left:10px;padding:2px 10px;border-radius:3px;
  font-size:.68rem;letter-spacing:.15em;color:#fff;
  background:linear-gradient(160deg,#C9AD5F,#A9883C);vertical-align:middle;
}
.form__input{
  width:100%;padding:14px 16px;font:inherit;font-size:.95rem;color:var(--sumi);
  background:#FFFDF7;border:1px solid rgba(169,136,60,.35);border-radius:6px;
  transition:border-color .3s, box-shadow .3s;
}
.form__input::placeholder{color:#B9B3A4}
.form__input:focus{outline:none;border-color:#A9883C;box-shadow:0 0 0 3px rgba(201,173,95,.18)}
.form__textarea{min-height:170px;resize:vertical;line-height:1.9}
.form__policy{
  max-height:190px;overflow-y:auto;padding:18px 20px;
  background:#FFFDF7;border:1px solid rgba(169,136,60,.35);border-radius:6px;
  font-size:.82rem;color:var(--usuzumi);line-height:2;
}
.form__check{display:flex;align-items:center;gap:10px;margin-top:14px;font-size:.92rem}
.form__check input{width:18px;height:18px;accent-color:#A9883C}
.form--confirm{background:#FFFDF7;border:1px solid rgba(169,136,60,.3);border-radius:8px;padding:30px 34px}
.form__ctitle{font-size:1.1rem;font-weight:600;letter-spacing:.14em;margin-bottom:16px;text-align:center}
.form__preview{
  font-family:var(--font-min);font-size:.92rem;line-height:2.1;color:var(--sumi);
  white-space:pre-wrap;background:rgba(244,239,226,.6);border-radius:6px;padding:18px 20px;
}

/* 継続日数リンク（0次元の道場へ） */
a.keizoku-link{color:#A9883C;text-decoration:none;border-bottom:1px solid rgba(169,136,60,.45);padding-bottom:1px;transition:border-color .25s}
a.keizoku-link:hover{border-bottom-color:#A9883C}
a.keizoku-link--num{border-bottom:none;color:inherit}
a.keizoku-link--num:hover .gold-grad{filter:drop-shadow(0 0 14px rgba(214,180,98,.55))}

/* スマホで一行に収める調整 */
@media(max-width:640px){
  .keizoku__lead{font-size:clamp(.82rem,4vw,1rem);letter-spacing:.1em;text-indent:.1em;white-space:nowrap}
  .products__note{font-size:clamp(.72rem,3.6vw,.9rem);letter-spacing:.02em;white-space:nowrap}
}

/* 「道」等の透かし文字を家紋と同じ淡い色合いに（.brushの金グラデを打ち消す） */
.wm.brush{background:none;-webkit-text-fill-color:rgba(196,181,146,.10);color:rgba(196,181,146,.10);text-shadow:none}

/* ---------- 全画面メニュー（薄絹方式） ---------- */
.nav__all{
  cursor:pointer;font-family:inherit;
  font-size:.9rem;letter-spacing:.14em;font-weight:600;
  color:#2b2418;
  background:linear-gradient(180deg,#EBD49E 0%,#CBA96C 55%,#AE8A50 100%);
  border:1px solid rgba(140,110,60,.55);
  border-radius:999px;padding:.48em 1em .42em;
  box-shadow:0 2px 8px rgba(120,95,45,.28), inset 0 1px 0 rgba(255,246,222,.65);
  transition:filter .25s, box-shadow .25s;
  white-space:nowrap;flex:none;
}
.nav__all:hover{filter:brightness(1.07)}
.fullmenu{
  position:fixed;inset:0;z-index:999;
  background:
    linear-gradient(rgba(250,246,236,.94),rgba(250,246,236,.94)),
    url("images/kamon-tile.png");
  background-size:auto,360px;
  opacity:0;visibility:hidden;transition:opacity .4s ease,visibility .4s;
}
body.menu-open .fullmenu{opacity:1;visibility:visible}
body.menu-open{overflow:hidden}
.fullmenu__inner{
  height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:26px;padding:20px;
}
.fullmenu__frame{
  position:relative;overflow:hidden;
  width:min(92vw,880px);height:min(72vh,560px);
  border-radius:16px;
  box-shadow:0 24px 70px rgba(59,56,51,.14);
  background:#FAF6EC;
}
.fullmenu__video{
  position:absolute;inset:30px;width:calc(100% - 60px);height:calc(100% - 60px);
  object-fit:contain;
}
.fullmenu__veil{ /* 薄絹：夜空の映像に生成りの絹を一枚 */
  position:absolute;inset:0;
  background:linear-gradient(rgba(250,246,236,.82),rgba(250,246,236,.86));
}
.fullmenu__ornament{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.fullmenu__nav{
  position:relative;z-index:2;height:100%;
  display:flex;flex-direction:row-reverse;justify-content:center;align-items:flex-start;
  gap:clamp(.9rem,3vw,2.4rem);padding:62px 70px 52px;
}
/* 縦書き：1文字ずつ折り返す方式（全ブラウザで崩れない） */
.fullmenu__nav a{
  display:block;width:1.35em;word-break:break-all;text-align:center;
  font-size:clamp(.92rem,1.6vw,1.12rem);line-height:1.42;letter-spacing:0;
  color:#4a463f;text-decoration:none;transition:color .25s;
}
.fullmenu__nav a:hover{color:#A9883C}
/* 文頭の飾り：輝くゴールドの小さな七宝風マーク */
.fullmenu__nav a::before{
  content:"❖";display:block;
  font-size:.66em;line-height:1;
  color:#C9A227;
  text-shadow:0 0 7px rgba(219,183,88,.95),0 0 14px rgba(219,183,88,.5);
  margin:0 auto .65em;
  transition:color .25s;
}
.fullmenu__nav a:hover::before{color:#A9883C}
/* 額の下・右寄せの操作ボタン（↻ もう一度／♪ 音） */
.fullmenu__controls{
  width:min(92vw,880px);
  display:flex;justify-content:flex-end;gap:20px;
  margin-top:-4px;padding-bottom:14px;
}
.fullmenu__ctl{
  position:relative;
  width:56px;height:56px;border-radius:50%;cursor:pointer;
  background:rgba(250,246,236,.9);
  border:1px solid rgba(169,136,60,.55);
  color:#A9883C;font-size:1.55rem;line-height:1;
  transition:color .25s,border-color .25s,background .25s;
}
.fullmenu__ctl:hover,.fullmenu__ctl.is-on{
  color:#8a6d2f;border-color:#A9883C;background:rgba(243,232,205,.95);
}
.fullmenu__ctl::after{
  content:attr(data-label);
  position:absolute;top:100%;left:50%;transform:translateX(-50%);
  margin-top:6px;font-size:.72rem;letter-spacing:.12em;
  color:#8a6d2f;white-space:nowrap;
}
.fullmenu__sns{display:flex;gap:30px}
.fullmenu__sns a{color:#A9883C;opacity:.85;transition:opacity .25s}
.fullmenu__sns svg{width:34px;height:34px}
.fullmenu__sns a:hover{opacity:1}
.fullmenu__close{
  position:absolute;top:20px;right:24px;z-index:4;
  background:none;border:none;cursor:pointer;
  font-size:2.2rem;line-height:1;color:var(--sumi,#3B3833);
}
.fullmenu__close:hover{color:#A9883C}
@media(max-width:640px){
  .fullmenu__frame{height:min(76vh,640px)}
  .fullmenu__video{inset:14px;width:calc(100% - 28px);height:calc(100% - 28px)} /* スマホでも五芒星の映像を表示（軽量344KB） */
  .fullmenu__nav{flex-direction:column;align-items:center;justify-content:center;gap:.95rem;padding:56px 30px;overflow:auto}
  .fullmenu__nav a{width:auto;word-break:normal;letter-spacing:.18em;font-size:1.02rem;line-height:1.4}
  .fullmenu__nav a::before{display:inline-block;margin:0 .55em 0 0;vertical-align:.08em}
  .fullmenu__controls{width:100%;justify-content:center;gap:26px;padding:0 0 18px}
  .fullmenu__ctl{width:50px;height:50px;font-size:1.4rem}
}
/* 製品カード：カード全体をリンクに（外部の製品ページへ） */
.card__link{display:block;color:inherit;text-decoration:none}
.card__name{transition:color .3s}
.card__link:hover .card__name{color:#A9883C}
.card__link:hover img{transform:scale(1.03)}
.card__img img{transition:transform .4s ease}

/* 製品ページ：画像と商品名のリンク（ホバーで画像ふわっと・名前が金に） */
.pd-imglink{display:block}
.pd-imglink img{transition:transform .4s ease}
.pd-imglink:hover img{transform:scale(1.03)}
.pd-link{color:inherit;text-decoration:none;transition:color .3s}
.pd-link:hover{color:#A9883C}

/* ---------- トップ：最新のお知らせ ---------- */
.sec--news{padding:72px 0 56px}
.news-list{
  list-style:none;margin:0 auto 34px;padding:0;
  max-width:720px;
}
.news-list li{border-bottom:1px solid rgba(169,136,60,.22)}
.news-list li:first-child{border-top:1px solid rgba(169,136,60,.22)}
.news-list a{
  display:flex;gap:24px;align-items:baseline;
  padding:20px 10px;color:#4a463f;text-decoration:none;
  transition:color .25s,background .25s;
}
.news-list a:hover{color:#A9883C;background:rgba(201,162,39,.05)}
.news-list time{
  flex:none;font-size:.95rem;letter-spacing:.12em;color:#A9883C;
  min-width:6.4em;
}
.news-list span{font-size:1.12rem;letter-spacing:.06em;line-height:1.8}
@media(max-width:640px){
  .news-list a{flex-direction:column;gap:4px;padding:14px 6px}
}

/* 製品ページ見出しのリンク（色は継承・ホバーで金） */
.page-hero__title a{color:inherit;text-decoration:none;transition:color .25s}
.page-hero__title a:hover{color:#A9883C}

/* ---------- 金文字の可読性向上（案A：墨の影＋白い光の縁。PC/スマホ共通） ---------- */
.hero__logo,
.rinen__logo img,
.aiki-title,
.hero__sub{
  filter:
    saturate(1.3) contrast(1.07)
    drop-shadow(0 0 1px rgba(255,250,235,.6))
    drop-shadow(0 1px 1px rgba(122,92,36,.6))
    drop-shadow(0 3px 6px rgba(64,48,18,.55));
}

/* ---------- 言語切替（🇯🇵 日本語｜🇺🇸 English） ---------- */
.lang-switch{
  display:flex;align-items:center;gap:6px;margin-left:12px;
  font-size:.76rem;letter-spacing:.06em;white-space:nowrap;
}
.lang-switch a{
  color:#2b2418;text-decoration:none;font-weight:600;
  background:linear-gradient(180deg,#EBD49E 0%,#CBA96C 55%,#AE8A50 100%);
  border:1px solid rgba(140,110,60,.55);
  border-radius:999px;padding:.4em .85em .36em;
  box-shadow:0 2px 8px rgba(120,95,45,.28), inset 0 1px 0 rgba(255,246,222,.65);
  transition:filter .25s;
  white-space:nowrap;flex:none;
}
.lang-switch a:hover{filter:brightness(1.07)}
.lang-switch a.is-active{
  background:linear-gradient(180deg,#F2DFAE 0%,#D8B87A 55%,#B99655 100%);
  box-shadow:0 2px 10px rgba(120,95,45,.36), inset 0 0 0 1px rgba(255,250,232,.8);
}
.lang-switch > span{display:none} /* ボタン化に伴い仕切り｜は非表示 */
@media(max-width:640px){
  .lang-switch{margin-left:0;font-size:.72rem}
}

/* ---------- 英語版：ヒーローの英字（Parisienne太字・金グラデ・画面内に収まる） ---------- */
html[lang="en"] .hero__sub{
  font-family:"Snell Roundhand","Great Vibes","Savoye LET",cursive;
  font-weight:700;
  font-size:clamp(2.1rem,6vw,5.8rem);
  letter-spacing:.04em;text-indent:.04em;
  white-space:nowrap;max-width:96vw;
  filter:
    saturate(1.3) contrast(1.07)
    drop-shadow(0 0 1px rgba(255,250,235,.6))
    drop-shadow(0 1px 1px rgba(122,92,36,.6))
    drop-shadow(0 3px 6px rgba(64,48,18,.55));
}
@media(max-width:640px){
  html[lang="en"] .hero__sub{font-size:clamp(1.55rem,7.6vw,2.4rem)}
}

/* ---------- 英語版：全画面メニューは横書きに（縦1文字組は日本語専用） ---------- */
html[lang="en"] .fullmenu__nav{
  flex-direction:column;align-items:center;justify-content:center;
  gap:1.05rem;padding:56px 40px;overflow:auto;
}
html[lang="en"] .fullmenu__nav a{
  width:auto;word-break:normal;letter-spacing:.14em;
  font-size:1.05rem;line-height:1.5;
}
html[lang="en"] .fullmenu__nav a::before{
  display:inline-block;margin:0 .55em 0 0;vertical-align:.08em;
}

/* ---------- 特定商取引法：和風の表 ---------- */
.law-table{
  width:100%;border-collapse:collapse;
  background:
    linear-gradient(rgba(255,253,247,.88),rgba(255,253,247,.88)),
    url("images/kamon-tile.png");
  background-size:auto,340px;
  border:1px solid rgba(195,162,75,.4);
  box-shadow:0 14px 40px rgba(59,56,51,.08);
}
.law-table th,.law-table td{
  padding:20px 26px;vertical-align:top;text-align:left;
  border-bottom:1px solid rgba(195,162,75,.28);
  font-weight:400;line-height:1.9;
}
.law-table tr:last-child th,.law-table tr:last-child td{border-bottom:none}
.law-table th{
  width:30%;
  color:#8a6d2f;letter-spacing:.12em;
  border-right:1px solid rgba(195,162,75,.28);
  background:rgba(233,212,142,.14);
}
.law-table td{color:var(--usuzumi,#5a564e);letter-spacing:.04em}
.law-table td small{color:#8b867c;font-size:.82em}
.law-table td a{color:#A9883C;text-decoration:none;border-bottom:1px solid rgba(169,136,60,.45)}
.law-table td a:hover{border-bottom-color:#A9883C}
@media(max-width:640px){
  .law-table th,.law-table td{display:block;width:100%;border-right:none;padding:14px 18px}
  .law-table th{border-bottom:none;padding-bottom:4px;background:none}
  .law-table td{border-bottom:1px solid rgba(195,162,75,.28);padding-top:2px}
}

/* ---------- 「上へ」ボタン（全ページ共通・スクロールで出現） ---------- */
.to-top{
  position:fixed;right:22px;bottom:24px;z-index:90;
  width:54px;height:54px;border-radius:50%;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  background:rgba(250,246,236,.94);
  border:1px solid rgba(169,136,60,.6);
  color:#A9883C;box-shadow:0 6px 18px rgba(59,56,51,.14);
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .3s,visibility .3s,transform .3s,color .25s,border-color .25s;
}
.to-top.is-show{opacity:1;visibility:visible;transform:none}
.to-top:hover{color:#8a6d2f;border-color:#A9883C}
.to-top__arrow{font-size:.7rem;line-height:1}
.to-top__label{font-size:.66rem;letter-spacing:.12em;line-height:1.2}
body.menu-open .to-top{opacity:0;visibility:hidden} /* 全画面メニュー表示中は隠す */
@media(max-width:640px){.to-top{right:14px;bottom:16px;width:48px;height:48px}}

/* 理念セクション：画像の代わりの金文字テキスト「知れば、すぐ出来る」（互道と同じ配色・時空と同じフォント） */
.rinen__logo--text{
  font-family:var(--font-min);font-weight:700;
  font-size:clamp(1.7rem,5.6vw,3.4rem);
  letter-spacing:.14em;text-indent:.14em;line-height:1.3;
  background:linear-gradient(180deg,#EED9A4 0%,#FBF1CC 22%,#EFD79A 46%,#E0BC6C 74%,#CB9A4C 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  -webkit-text-stroke:.5px rgba(160,126,58,.35);
  filter:
    saturate(1.3) contrast(1.07)
    drop-shadow(0 0 1px rgba(255,250,235,.6))
    drop-shadow(0 1px 1px rgba(122,92,36,.6))
    drop-shadow(0 3px 6px rgba(64,48,18,.55));
}

/* 継続セクション：番号の下にYouTubeへの案内を常時表示（クリック先が分かるように） */
.keizoku__yt{margin-top:.6em}
.keizoku__yt a{
  font-size:.85rem;letter-spacing:.12em;color:#A9883C;
  text-decoration:none;border-bottom:1px solid rgba(169,136,60,.5);
  padding-bottom:2px;transition:color .25s,border-color .25s;
}
.keizoku__yt a:hover{color:#8a6d2f;border-color:#8a6d2f}

/* 金のピルボタン（ヘッダーの「日本語」ボタンと同じ配色） */
.btn--pill-gold{
  color:#2b2418;font-weight:600;border-color:rgba(140,110,60,.55);
  background:linear-gradient(180deg,#EBD49E 0%,#CBA96C 55%,#AE8A50 100%);
  box-shadow:0 2px 8px rgba(120,95,45,.28), inset 0 1px 0 rgba(255,246,222,.65);
}
.btn--pill-gold:hover{filter:brightness(1.07);background:linear-gradient(180deg,#EBD49E 0%,#CBA96C 55%,#AE8A50 100%);color:#2b2418;box-shadow:0 4px 14px rgba(120,95,45,.38), inset 0 1px 0 rgba(255,246,222,.65)}

/* 製品カード：クリック不可（リンク解除）状態でもカーソルは通常に */
.card__link--static{cursor:default}
.card__link--static:hover .card__name{color:inherit}
.card__link--static:hover img{transform:none}

/* ---------- 訪問者カウンター（フッター） ---------- */
.visitor-count{
  display:inline-flex;align-items:center;gap:.6em;
  margin-bottom:.4em;padding:.55em 1.4em;
  border:1px solid rgba(169,136,60,.4);border-radius:999px;
  background:linear-gradient(180deg,rgba(255,252,240,.6),rgba(250,246,236,.3));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 2px 10px rgba(120,95,45,.08);
}
.visitor-count__mark{
  font-size:.7rem;color:#C9A227;
  filter:drop-shadow(0 0 4px rgba(219,183,88,.6));
}
.visitor-count__label{
  font-size:.78rem;letter-spacing:.22em;color:var(--usuzumi);
}
.visitor-count__num{
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.15rem;font-weight:700;letter-spacing:.05em;
  font-variant-numeric:tabular-nums;
  filter:drop-shadow(0 1px 1px rgba(139,106,42,.4)) drop-shadow(0 0 10px rgba(214,180,98,.45));
}
