/* =====================================================================
   MIRAI no IRO no WA — 2026 の共通デザイン（トップ以外の 11 ページ）
   ・色は MIRAI ブランドカラーガイドの 6 色（＋文字の紺 #233650・線の金 #F6D89C）だけ。
   ・ヘッダー／ボタン／見出し／カード／最初の画面／最後の帯／フッター。
   ・各ページの <style> のあとに読む。ページごとの形は /p2026/<ページ>.css。
   ・style.css は変えていない。
   ===================================================================== */
:root{
  --b-gold:#F6D89C; --b-pink:#F4AFC7; --b-peach:#F8BB9A;
  --b-sky:#8BC5F4;  --b-lav:#CDB5E8;  --b-aqua:#77B9C8;
  --gold-d:#F6D89C; --gold-t:#56627a;
  --navy:#233650; --navy-2:#2e4566;
  --ink:#233650; --ink-soft:#56627a; --line:rgba(35,54,80,.12);
  --paper:#fffdfb; --paper2:#fbf8f4;
  --c1:var(--b-peach); --c2:var(--b-gold); --c3:var(--b-aqua);
  --c4:var(--b-sky);   --c5:var(--b-lav);  --c6:var(--b-pink);
  --go:#233650; --go-2:#2e4566;
  --hand:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;
  --serif:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;
  --display:"Cormorant Garamond","Noto Serif JP",serif;
  --shadow-card:0 12px 34px -16px rgba(35,54,80,.26),0 2px 8px rgba(35,54,80,.04);
}
body{color:var(--ink);background:var(--paper)}

/* ---------- 帯（ヘッダー）：看板＋ふりがな／4 項目／JP | EN ---------- */
.topbar{background:rgba(255,253,251,.94);border-bottom:1px solid rgba(246,216,156,0.96);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.tb-in{max-width:1240px;padding:12px clamp(16px,3vw,40px);gap:24px}
.brand img{display:none}
.brand .b-txt{display:flex;flex-direction:column;align-items:center;line-height:1}
.brand .b-name{font-family:var(--display);font-weight:600;font-size:1.42rem;letter-spacing:.04em;color:var(--navy);white-space:nowrap}
.brand .b-kana{font-family:var(--serif);font-size:.58rem;letter-spacing:.34em;color:var(--ink-soft);margin-top:5px;margin-right:-.34em}
nav.main{margin-left:auto;font-family:var(--serif);gap:clamp(22px,3vw,44px);font-size:.86rem;letter-spacing:.1em}
nav.main a.nl{color:var(--navy);font-weight:500}
nav.main a.nl:hover{color:var(--navy)}
nav.main a.nl:hover::after,nav.main a.nl.on::after{content:"";position:absolute;left:0;right:0;height:1px;bottom:-5px;background:var(--gold-d);opacity:1;border-radius:0}
html[lang="en"] nav.main{font-family:var(--display);font-weight:600;font-size:.95rem;letter-spacing:.08em}
.lang2{display:flex;align-items:center;gap:.5rem;padding-left:clamp(14px,1.8vw,24px);border-left:1px solid var(--gold-d);
  font-family:var(--display);font-size:.9rem;letter-spacing:.14em;color:#8a93a8;white-space:nowrap}
.lang2 b{color:var(--navy);font-weight:700}
.lang2 a:hover{color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.menu-btn span{background:var(--navy)}
.btn-join{background:var(--navy);color:#fff;font-family:var(--serif);font-weight:500;letter-spacing:.1em}
.btn-join:hover{background:var(--navy-2)}
@media(min-width:1021px){nav.main a.nl-more,nav.main .btn-join{display:none}}
@media(max-width:1020px){
  .tb-in{padding-top:9px;padding-bottom:9px}
  .brand{order:0}.lang2{order:1;margin-left:auto;margin-right:12px;border-left:0;padding-left:0}.menu-btn{order:2}
  nav.main{background:#fffdfb;border-bottom:1px solid rgba(246,216,156,0.88)}
  nav.main a.nl{border-bottom:1px solid var(--line)}
}
@media(max-width:640px){
  .brand .b-name{font-size:1.16rem;letter-spacing:.02em}
  .brand .b-kana{font-size:.52rem}
  .lang2{font-size:.82rem;gap:.4rem}
}

/* ---------- 見出し・文字 ---------- */
h1,h2,h3{color:var(--navy)}
h2{font-family:var(--serif);font-weight:500;letter-spacing:.1em;line-height:1.6}
html[lang="en"] h2{font-family:var(--display);font-weight:600;letter-spacing:.04em}
.eyebrow,.eyebrow.rainbow{font-family:var(--display);font-weight:600;font-size:.8rem;letter-spacing:.42em;
  background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--gold-t)}
.crayon::after{background:linear-gradient(90deg,var(--b-gold),var(--b-pink));opacity:.45}
.b-num{font-family:var(--display);font-weight:600;color:var(--gold-t);line-height:1}
.b-rule{display:block;width:56px;height:1px;margin:16px auto 0;background:linear-gradient(90deg,transparent,var(--gold-d),transparent)}

/* ---------- ボタン ---------- */
.b-btn,.b-band .btn-join{display:inline-flex;align-items:center;justify-content:center;gap:12px;
  background:var(--navy);color:#fff;border-radius:999px;font-family:var(--serif);font-weight:500;letter-spacing:.1em;
  padding:14px 34px 14px 38px;font-size:.95rem;box-shadow:0 10px 24px -12px rgba(35,54,80,.6);transition:transform .25s,background .25s}
.b-btn::after,.b-band .btn-join::after,.b-ghost::after,.b-link::after{content:"\2192";font-family:var(--sans)}
.b-btn:hover,.b-band .btn-join:hover{background:var(--navy-2);transform:translateY(-2px)}
.b-ghost{display:inline-flex;align-items:center;gap:12px;padding:12px 34px;border:1px solid var(--navy);border-radius:999px;
  background:rgba(255,255,255,.85);color:var(--navy);font-family:var(--serif);font-weight:500;letter-spacing:.1em;font-size:.92rem}
.b-ghost:hover{background:#fff}
.b-link{display:inline-flex;gap:10px;padding-bottom:4px;border-bottom:1px solid var(--navy);color:var(--navy);
  font-family:var(--serif);font-weight:500;letter-spacing:.08em;font-size:.92rem}
html[lang="en"] .b-btn,html[lang="en"] .b-ghost,html[lang="en"] .btn-join{letter-spacing:.03em}

/* ---------- カード ---------- */
.b-card{background:#fff;border-radius:14px;box-shadow:var(--shadow-card)}

/* ---------- 最初の画面（ページごとに地の画像を --hero-bg で替える） ---------- */
.b-hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);align-items:center;
  gap:clamp(16px,3vw,48px);min-height:min(70svh,560px);
  padding:calc(64px + clamp(28px,4vw,56px)) max(24px,calc((100vw - 1140px)/2)) clamp(40px,5vw,64px);
  background:var(--hero-bg,url(/img2026/wc_hero.webp)) center/100% 100% no-repeat,#fffdfb}
.b-hero-txt{max-width:560px}
.b-hero .eyebrow{text-align:left;margin:0 0 14px}
.b-hero h1{font-family:var(--serif);font-weight:500;font-size:clamp(2.2rem,4.4vw,3.7rem);line-height:1.3;letter-spacing:.04em;color:var(--navy);margin:0}
html[lang="en"] .b-hero h1{font-family:var(--display);font-weight:600;font-size:clamp(2.5rem,4.8vw,4.1rem);line-height:1.1;letter-spacing:0}
.b-hero .sub,.b-hero .b-lead{font-family:var(--serif);font-size:clamp(.95rem,1.3vw,1.08rem);line-height:2;color:var(--navy);margin-top:18px;letter-spacing:.06em;text-align:left}
.b-hero .b-btn{margin-top:26px}
.b-hero-art{position:relative;justify-self:center;width:100%;max-width:440px;aspect-ratio:1/1}
.b-hero-art img{position:absolute;inset:6%;width:88%;height:88%;object-fit:cover;border-radius:50%;background:#fff;z-index:1;
  box-shadow:0 0 0 6px rgba(255,255,255,.85),0 0 22px 8px rgba(248,187,154,.45),0 24px 40px -20px rgba(35,54,80,.35)}
.b-hero-art svg{position:absolute;inset:-10%;width:120%;height:120%;z-index:0;overflow:visible}
.b-hero-art svg path{vector-effect:non-scaling-stroke}
@media(max-width:767px){
  .b-hero{grid-template-columns:1fr;min-height:0;padding:calc(56px + 34px) 20px 40px;text-align:center;gap:24px}
  .b-hero-txt{justify-self:center}
  .b-hero .eyebrow,.b-hero .sub,.b-hero .b-lead{text-align:center}
  .b-hero h1{font-size:clamp(1.9rem,8.6vw,2.5rem)}
  html[lang="en"] .b-hero h1{font-size:clamp(2.2rem,10vw,2.8rem)}
  .b-hero-art{max-width:260px}
}

/* ---------- 区画の地（水彩） ---------- */
.b-wash{background:var(--wash,url(/img2026/wc_colors.webp)) center/100% 100% no-repeat,#fffdfb}
.b-sec{padding:clamp(48px,7vw,80px) 0}
.b-sec-h{text-align:center;margin-bottom:34px}
.b-sec-h h2{margin:0}

/* ---------- 最後の帯：青い水彩と両端の色鉛筆 ---------- */
.b-band{position:relative;overflow:hidden;text-align:center;padding:52px 20px 58px;
  background:url(/img2026/wc_final.webp) center/100% 100% no-repeat,#eef4fb}
.b-band>*{position:relative;z-index:2}
.b-band .b-pen{position:absolute;bottom:0;z-index:1;width:clamp(110px,14vw,210px);pointer-events:none}
.b-band .b-pen-l{left:0;-webkit-mask-image:linear-gradient(90deg,#000 60%,transparent);mask-image:linear-gradient(90deg,#000 60%,transparent)}
.b-band .b-pen-r{right:0;-webkit-mask-image:linear-gradient(270deg,#000 60%,transparent);mask-image:linear-gradient(270deg,#000 60%,transparent)}
.b-band-h{font-family:var(--serif);font-weight:500;color:var(--navy);font-size:clamp(1.3rem,3vw,1.9rem);letter-spacing:.08em;line-height:1.6;margin-bottom:10px}
html[lang="en"] .b-band-h{font-family:var(--display);font-weight:600;font-size:clamp(1.6rem,3.6vw,2.3rem)}
.b-band-sub{font-family:var(--serif);color:var(--ink-soft);font-size:.9rem;line-height:1.9;margin-bottom:22px}
@media(max-width:640px){.b-band .b-pen{width:84px}.b-band{padding:44px 16px 80px}}

/* ---------- フッター（紺。中身はそのまま） ---------- */
footer p[style]{font-family:var(--display) !important;font-size:1.15rem !important;letter-spacing:.14em !important;color:#eef1f7 !important}
footer .dots i{width:7px;height:7px}
footer .f-nav{font-family:var(--serif)}
footer .f-pol{margin-top:4px}

/* ---------- 見本に無い飾り（仕組みの script はそのまま） ---------- */
.doodle{display:none !important}
/* ページの <style> がフッターを白にしている所があるので、紺に戻す */
footer{background:radial-gradient(ellipse 70% 60% at 50% 0%,#2e4566 0%,#233650 60%,#1d2d44 100%) !important;color:#c9d3e3}
/* 見出しは「、」「。」のところで折り返す（語の途中で切らない） */
.b-hero h1{word-break:keep-all;line-break:strict;font-size:clamp(2rem,3.5vw,3.1rem)}
html[lang="en"] .b-hero h1{word-break:normal}
.b-hero{overflow:hidden}