/* やまぐちチョコっちゃ‼フェスタ 2027 公式サイト
   デザイン方針：白狐ロゴ・茶・赤・クリーム・丸いカードを基本に保つ。
   紙の重なり、割りチョコ、細いリボン、包装のストライプ、小さなピンクは「周縁の装飾」にだけ使い、
   日時・会場・料金・連絡先などの情報は水平な単色面に置いて、演出がなくても読めるようにする。 */
:root{
  --paper:#fffdf9; --cream:#fff4e6; --cream2:#ffe4c7; --white:#fff;
  --ink:#4a1c0f; --ink2:#5e301d; --muted:#70584e; --line:#efd6bd;
  --red:#e3171a; --red-dark:#bd1619; --red-soft:#ffe1df;
  --choco:#5a2a17; --choco2:#6b3420; --choco3:#8a4a2c;
  --orange:#f39a1e; --orange-soft:#ffecd0;
  --pink:#f4a7b9; --pink-soft:#fde9ee;
  --green:#22814e;
  --f-display:"Dela Gothic One","Hiragino Sans","Noto Sans JP",sans-serif;
  --f-body:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Hiragino Sans","Noto Sans JP","Yu Gothic",sans-serif;
  --r:18px; --shadow:0 4px 0 var(--choco);
  --header:68px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header) + 16px);scroll-padding-bottom:96px;-webkit-text-size-adjust:100%}
body{font-family:var(--f-body);color:var(--ink);background:var(--paper);line-height:1.8;font-weight:500;overflow-x:hidden;font-size:16px}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
ul,ol{list-style:none}
.in{max-width:1120px;margin:0 auto;padding:0 20px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--choco);color:#fff;padding:10px 16px;border-radius:10px;font-weight:900;text-decoration:none}
.skip:focus{top:12px}

/* ---------- 共通パーツ ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--f-body);font-weight:900;font-size:16px;min-height:48px;
  text-decoration:none;padding:12px 26px;border-radius:999px;background:var(--red-dark);color:#fff;border:2.5px solid var(--choco);
  box-shadow:var(--shadow);transition:transform .15s,box-shadow .15s;cursor:pointer;line-height:1.3;text-align:center}
.btn:hover{transform:translateY(2px);box-shadow:0 2px 0 var(--choco)}
.btn:focus-visible,a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.btn.ghost{background:#fff;color:var(--choco)}
.btn.sm{font-size:14.5px;padding:10px 18px;min-height:44px}
.btn .arr{font-size:.9em}
.txtlink{font-weight:900;color:var(--red-dark);text-underline-offset:3px}

/* 状態ラベル：色だけでなく文字で状態を伝える */
.badge{display:inline-block;font-size:12px;font-weight:900;padding:2px 10px;border-radius:999px;vertical-align:middle;line-height:1.7;white-space:nowrap;letter-spacing:.04em;border:1.5px solid transparent}
.badge.ok{background:var(--green);color:#fff}
.badge.plan{background:#fff;color:var(--choco);border-color:var(--choco)}
.badge.prep{background:var(--cream2);color:var(--choco);border-color:var(--choco3);border-style:dashed}
.badge.tbd{background:var(--orange);color:var(--choco)}
.badge.soon{background:var(--pink-soft);color:var(--red-dark);border-color:var(--red-dark)}
.badge.new{background:var(--red-dark);color:#fff}
.badge.no{background:#fff;color:var(--muted);border-color:var(--muted)}

.sec{padding:88px 0;position:relative}
.sec.tight{padding:64px 0}
.sec.cream{background:var(--cream)}
.sec-head{text-align:center;margin-bottom:44px}
.sec-head .en{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-display);font-size:14px;letter-spacing:.24em;color:var(--red)}
.sec-head .en::before,.sec-head .en::after{content:"";width:26px;height:2px;border-radius:2px;background:currentColor;opacity:.55}
.sec-head h1,.sec-head h2{font-family:var(--f-display);font-weight:400;font-size:clamp(26px,4.4vw,40px);line-height:1.35;color:var(--choco);margin-top:8px}
.sec-head p{color:var(--muted);margin:12px auto 0;font-size:15.5px;max-width:720px}
.sub-head{font-weight:900;font-size:21px;color:var(--choco);margin:0 0 18px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sub-head::before{content:"";width:6px;height:22px;border-radius:3px;background:var(--red);flex-shrink:0}
h3{font-weight:900;font-size:19px;line-height:1.5;color:var(--choco)}
.small{font-size:13.5px;color:var(--muted)}
.lead-p{font-size:16.5px;color:var(--ink2);max-width:760px}
.lead-p + .lead-p{margin-top:12px}
.center{text-align:center;margin-left:auto;margin-right:auto}

.card{background:#fff;border:2.5px solid var(--choco);border-radius:var(--r);padding:26px 24px;box-shadow:var(--shadow)}
.note-box{background:var(--cream);border:2px dashed var(--choco3);border-radius:14px;padding:14px 18px;font-size:14.5px;color:var(--ink2);line-height:1.75}
.note-box b{color:var(--choco)}
.bullets{display:grid;gap:8px}
.bullets li{position:relative;padding-left:22px;color:var(--ink2);font-size:15px;line-height:1.75}
.bullets li::before{content:"";position:absolute;left:2px;top:.62em;width:10px;height:8px;border-radius:2px;background:var(--choco3)}

/* スクロールで出てくる演出。
   JavaScriptが動いたときだけ隠し、処理に失敗しても本文が消えたままにならないようにする。
   重要情報（日時・会場・料金・連絡先）にはこの演出を付けない。 */
.js-rv .rv:not(.on){opacity:0;transform:translateY(16px)}
.js-rv .rv{transition:opacity .5s ease,transform .5s ease}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js-rv .rv:not(.on){opacity:1;transform:none}
  .js-rv .rv{transition:none}
  .ribbon .track,.logowrap .logo{animation:none!important}
  *{transition-duration:.01ms!important}
}

/* ---------- ヘッダー ---------- */
.site-head{position:fixed;inset:0 0 auto 0;z-index:50;height:var(--header);background:rgba(255,250,243,.95);
  backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:2px solid var(--line)}
.site-head .in{height:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:1240px}
.site-head .brand img{height:44px;width:auto}
.gnav{display:flex;align-items:center;gap:2px}
.gnav a{text-decoration:none;font-weight:700;font-size:14px;padding:8px 11px;border-radius:999px;color:var(--ink2);transition:background .15s;white-space:nowrap}
.gnav a:hover{background:var(--cream)}
.gnav a.on:not(.cta){background:var(--cream2);color:var(--choco)}
.gnav a.cta{background:var(--red-dark);color:#fff;margin-left:6px;padding:9px 18px;border:2px solid var(--choco);box-shadow:0 3px 0 var(--choco)}
.menu-btn{display:none;width:48px;height:48px;border-radius:14px;border:2.5px solid var(--choco);background:#fff;box-shadow:0 3px 0 var(--choco);cursor:pointer;position:relative;flex-shrink:0}
.menu-btn span{position:absolute;left:12px;right:12px;height:3px;border-radius:2px;background:var(--choco);transition:transform .2s,opacity .2s}
.menu-btn span:nth-child(1){top:14px}.menu-btn span:nth-child(2){top:20.5px}.menu-btn span:nth-child(3){top:27px}
.menu-open .menu-btn span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.menu-open .menu-btn span:nth-child(2){opacity:0}
.menu-open .menu-btn span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ---------- 開催状態の帯（全ページ共通） ---------- */
.status{margin-top:var(--header);background:var(--choco);color:#fff;font-size:13.5px;position:relative;z-index:3}
.status .in{display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap;padding-top:9px;padding-bottom:9px;max-width:1240px}
.status .st{display:inline-flex;align-items:center;gap:8px;font-weight:900}
.status .st .badge{background:var(--orange);color:var(--choco);border-color:var(--orange)}
.status .tx{color:#f6dfcd;font-weight:700}
.status .upd{margin-left:auto;color:#f6dfcd;font-weight:700;white-space:nowrap}
.status a{color:#fff;text-underline-offset:3px}

/* ---------- 装飾（紙・割りチョコ・リボン・包装ストライプ） ---------- */
.deco{position:absolute;pointer-events:none;z-index:0}
.stripe{height:12px;background:repeating-linear-gradient(135deg,var(--red) 0 10px,var(--cream) 10px 20px,var(--pink) 20px 26px,var(--cream) 26px 36px);
  border-block:2px solid var(--choco)}
.stripe.choco{background:repeating-linear-gradient(135deg,var(--choco2) 0 10px,var(--cream) 10px 20px)}

/* ---------- ヒーロー ---------- */
.hero{position:relative;padding:48px 0 104px;overflow:hidden;background:
  radial-gradient(circle at 8% 14%,var(--orange-soft) 0 130px,transparent 131px),
  radial-gradient(circle at 94% 10%,var(--pink-soft) 0 110px,transparent 111px),
  radial-gradient(circle at 90% 94%,var(--cream2) 0 170px,transparent 171px),
  linear-gradient(180deg,var(--paper),var(--cream))}
.hero .in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:52px;align-items:center}
.logowrap{position:relative;max-width:460px;width:100%;justify-self:center}
.logowrap .logo{position:relative;z-index:1;width:100%;animation:float 5s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-10px) rotate(1deg)}}
.ribbon-line{position:absolute;z-index:0;pointer-events:none;width:100%;height:64px;left:0;bottom:14px;opacity:.9}

.hero .eyebrow{display:inline-flex;align-items:center;gap:10px;font-weight:900;font-size:15px;color:var(--choco);letter-spacing:.02em}
.hero .eyebrow::before{content:"";width:30px;height:3px;border-radius:2px;background:var(--red)}
.hero h1{font-family:var(--f-display);font-weight:400;font-size:clamp(32px,4.6vw,52px);line-height:1.35;color:var(--choco);margin:12px 0 12px;letter-spacing:.01em}
.hero h1 em{font-style:normal;color:var(--red)}
.hero .sub{font-weight:700;color:var(--ink2);font-size:clamp(15.5px,1.7vw,18px);line-height:1.85}
.hero .tag{display:inline-block;margin-top:14px;font-weight:900;font-size:15px;color:#fff;background:var(--choco);border-radius:999px;padding:5px 18px;
  box-shadow:3px 3px 0 var(--pink)}

/* 日付カード：入場券のような紙のカード。切り取り線と、包装リボンを角に添える */
.ticket-wrap{margin:26px 0 0;filter:drop-shadow(2.5px 0 0 var(--choco)) drop-shadow(-2.5px 0 0 var(--choco)) drop-shadow(0 2.5px 0 var(--choco)) drop-shadow(0 -2.5px 0 var(--choco)) drop-shadow(0 6px 0 var(--red))}
.ticket{--stub:118px;--notch:11px;display:grid;grid-template-columns:var(--stub) 1fr;border-radius:18px;overflow:hidden;background:#fff;color:var(--choco);
  -webkit-mask:radial-gradient(circle var(--notch) at var(--stub) 0,#0000 97%,#000) top/100% 51% no-repeat,radial-gradient(circle var(--notch) at var(--stub) 100%,#0000 97%,#000) bottom/100% 51% no-repeat;
  mask:radial-gradient(circle var(--notch) at var(--stub) 0,#0000 97%,#000) top/100% 51% no-repeat,radial-gradient(circle var(--notch) at var(--stub) 100%,#0000 97%,#000) bottom/100% 51% no-repeat}
.ticket .stub{background:var(--red-dark);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:18px 10px;text-align:center}
.ticket .stub .lbl{font-weight:900;font-size:16px;letter-spacing:.12em;writing-mode:vertical-rl;line-height:1}
.ticket .stub .free{font-weight:900;font-size:13px;border:2px solid #fff;border-radius:999px;padding:4px 10px;white-space:nowrap;background:rgba(255,255,255,.12)}
.ticket .tbody{position:relative;overflow:hidden;padding:20px 26px 20px;border-left:2.5px dashed var(--choco3);
  background:radial-gradient(circle at 100% 100%,var(--pink-soft) 0 64px,transparent 65px),linear-gradient(180deg,#fff,var(--paper))}
.ticket .tbody::after{content:"";position:absolute;top:20px;right:-38px;width:150px;height:22px;transform:rotate(38deg);
  background:linear-gradient(180deg,var(--pink) 0 3px,var(--red) 3px calc(100% - 3px),var(--pink) calc(100% - 3px));box-shadow:0 2px 0 rgba(90,42,23,.22)}
.ticket .date{display:flex;align-items:flex-end;gap:14px}
.ticket .big{font-family:var(--f-display);font-size:clamp(52px,7vw,76px);line-height:1;color:var(--choco);text-shadow:3px 3px 0 var(--pink)}
.ticket .dow{font-family:var(--f-display);font-size:22px;color:var(--red-dark);line-height:1.15;padding-bottom:4px}
.ticket .dow small{display:block;font-family:var(--f-body);font-weight:900;font-size:13px;color:var(--muted)}
.ticket .meta{margin-top:12px;padding-top:12px;border-top:2px dotted var(--line);font-weight:700;font-size:15.5px;line-height:1.75;color:var(--ink2)}
.ticket .meta b{color:var(--red-dark)}
.count{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:20px;font-weight:900;color:var(--ink2);font-size:15px}
.count .num{display:inline-flex;align-items:baseline;gap:4px;background:#fff;border:2.5px solid var(--choco);border-radius:12px;padding:0 14px;box-shadow:0 3px 0 var(--choco)}
.count .num b{font-family:var(--f-display);font-weight:400;font-size:28px;color:var(--red);line-height:1.35}
.btns{display:flex;gap:14px;flex-wrap:wrap;margin-top:24px}
.hero .note{margin-top:18px;font-size:13.5px;color:var(--muted);line-height:1.75}

/* ---------- 流れる帯 ---------- */
.ribbon{background:var(--red);color:#fff;border-block:3px solid var(--choco);overflow:hidden;padding:11px 0;transform:rotate(-1.2deg);margin:-16px -10px 0;position:relative;z-index:2}
.ribbon .track{display:flex;width:max-content;animation:marquee 40s linear infinite}
.ribbon span{font-weight:900;font-size:15.5px;white-space:nowrap;padding:0 22px;display:inline-flex;align-items:center;gap:22px}
.ribbon span::after{content:"";width:7px;height:7px;border-radius:1.5px;background:#fff;transform:rotate(45deg);opacity:.85}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- 目的別の入口 ---------- */
.purpose{padding:72px 0 24px}
.purpose .sec-head{margin-bottom:32px}
.goals{display:grid;grid-template-columns:1.25fr 1fr 1fr 1fr;gap:18px}
.goal{position:relative;display:flex;flex-direction:column;gap:6px;text-decoration:none;background:#fff;border:2.5px solid var(--choco);border-radius:var(--r);
  padding:22px 20px 20px;box-shadow:var(--shadow);transition:transform .15s,box-shadow .15s;min-height:100%}
.goal:hover{transform:translateY(-3px);box-shadow:0 7px 0 var(--choco)}
.goal .ico{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:var(--cream);border:2px solid var(--choco);margin-bottom:6px}
.goal .ico svg{width:30px;height:30px}
.goal b{font-weight:900;font-size:18px;color:var(--choco);line-height:1.45}
.goal .k{font-size:13px;font-weight:900;color:var(--red-dark);letter-spacing:.04em}
.goal p{font-size:14px;color:var(--ink2);line-height:1.7;flex:1}
.goal .go{font-weight:900;font-size:14px;color:var(--red-dark)}
.goal.main{background:var(--red-dark);color:#fff}
.goal.main b,.goal.main .go,.goal.main .k{color:#fff}
.goal.main p{color:#ffe7e4}
.goal.main .ico{background:#fff}

/* ---------- 開催概要 ---------- */
.facts{padding:40px 0 0}
.facts ul{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.facts li{background:#fff;border:2.5px solid var(--choco);border-radius:var(--r);padding:18px 20px;box-shadow:var(--shadow)}
.facts .k{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:900;color:var(--red-dark);letter-spacing:.12em}
.facts .v{display:block;font-weight:900;font-size:16.5px;line-height:1.55;color:var(--choco);margin-top:4px}
.facts .v small{display:block;font-size:13.5px;font-weight:700;color:var(--muted);margin-top:2px}
.facts .fnote{margin-top:16px;font-size:14px;color:var(--muted);text-align:center}

/* ---------- コンセプト ---------- */
.about .concept{position:relative;max-width:860px;margin:0 auto 44px;padding:36px 40px;background:#fff;border-radius:26px;border:2.5px solid var(--choco);box-shadow:var(--shadow)}
.about .concept::before{content:"";position:absolute;inset:10px -10px -10px 10px;border-radius:26px;background:var(--pink-soft);border:2px solid var(--pink);z-index:-1;transform:rotate(1.2deg)}
.about .concept .catch{font-family:var(--f-display);font-size:clamp(22px,3vw,30px);color:var(--choco);line-height:1.45;margin-bottom:14px}
.about .concept .catch em{font-style:normal;color:var(--red)}
.about .concept p{font-size:16.5px;color:var(--ink2);line-height:1.95}
.about .concept p + p{margin-top:10px}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.trio .ic{width:60px;height:60px;border-radius:16px;background:var(--red);color:#fff;font-family:var(--f-display);font-size:28px;
  display:grid;place-items:center;border:2.5px solid var(--choco);box-shadow:0 3px 0 var(--choco);margin-bottom:14px;transform:rotate(-4deg)}
.trio .card:nth-child(2) .ic{background:var(--orange);color:var(--choco);transform:rotate(3deg)}
.trio .card:nth-child(3) .ic{background:var(--choco2)}
.trio h3{margin-bottom:8px}
.trio p{font-size:15px;color:var(--ink2)}
.trio .src{display:block;margin-top:10px;font-size:13px;color:var(--muted)}

/* ---------- 楽しみ方（大1・小3の編集リズム） ---------- */
.ways{display:grid;grid-template-columns:1.25fr 1fr;grid-template-rows:auto auto auto;gap:18px}
.way{position:relative;background:#fff;border:2.5px solid var(--choco);border-radius:var(--r);padding:22px 22px;box-shadow:var(--shadow);overflow:hidden}
.way h3{font-size:17.5px;display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap}
.way p{font-size:14.5px;color:var(--ink2);margin-top:8px}
.way .num{font-family:var(--f-display);font-size:13px;color:var(--red);letter-spacing:.14em;display:block;margin-bottom:6px}
.way.big{grid-row:1 / span 3;color:#fff;padding:32px 30px;display:flex;flex-direction:column;justify-content:flex-end;min-height:360px;
  background:radial-gradient(120% 80% at 90% 0%,#73391f 0,rgba(115,57,31,0) 62%),linear-gradient(165deg,#5a2a17,#3f1b0c);
  box-shadow:var(--shadow)}
.way.big .big-no{position:absolute;left:26px;top:6px;font-family:var(--f-display);font-size:150px;line-height:1;color:transparent;-webkit-text-stroke:1.5px rgba(246,223,205,.3);letter-spacing:.02em;pointer-events:none}
.way.big .wrap-ribbon{position:absolute;top:46px;right:-70px;width:300px;height:36px;transform:rotate(38deg);pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.22) 50%,rgba(255,255,255,0) 70%),linear-gradient(180deg,var(--pink) 0 4px,var(--red) 4px calc(100% - 4px),var(--pink) calc(100% - 4px));
  box-shadow:0 6px 14px rgba(0,0,0,.28)}
.way.big h3{color:#fff;font-family:var(--f-display);font-weight:400;font-size:clamp(22px,2.6vw,28px);line-height:1.45}
.way.big p{color:#f6dfcd;font-size:15px}
.way.big .num{color:var(--orange)}
.way.big .badge.prep{background:#fff;border-color:#fff}
.ways-note{margin-top:20px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:15px;color:var(--ink2);font-weight:700}

/* ---------- 2カラム／カード群 ---------- */
.two{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.two .card h3,.three .card h3{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.two .card p,.three .card p{font-size:15px;color:var(--ink2)}
.two .card p + p,.three .card p + p{margin-top:8px}
.card .acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}

/* 一覧（左に状態ラベル） */
.list li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;padding:12px 0;border-bottom:1px solid var(--line)}
.list li:last-child{border-bottom:0}
.list .badge{margin-top:3px;min-width:64px;text-align:center}
.list b{display:block;font-weight:900;color:var(--choco)}
.list span.d{display:block;font-size:14px;color:var(--muted);line-height:1.75}

/* ---------- 料金（PCは格子、スマホは区分ごとの縦並び） ---------- */
.fees{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:14px}
.fee{background:#fff;border:2.5px solid var(--choco);border-radius:16px;padding:16px 18px;box-shadow:0 3px 0 var(--choco);display:flex;flex-direction:column;gap:4px}
.fee .nm{font-weight:900;color:var(--choco);font-size:15.5px;line-height:1.5}
.fee .yen{font-family:var(--f-display);font-size:26px;color:var(--red-dark);line-height:1.3}
.fee .yen small{font-family:var(--f-body);font-weight:900;font-size:14px;margin-left:2px}
.fee .yen.undecided{font-family:var(--f-body);font-weight:900;font-size:20px;color:var(--muted)}
.fee .d{font-size:13.5px;color:var(--muted);line-height:1.65}
.fee-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px;font-size:14.5px;font-weight:700;color:var(--ink2)}
.fee-notes{margin-top:16px}
.fee-notes li{font-size:14.5px}

/* ---------- 募集する参加形態（割りチョコのかけら） ---------- */
.pieces{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.piece{position:relative;background:linear-gradient(165deg,#5a2a17,#43200f);color:#fff;border-radius:16px;padding:22px 18px 20px;
  box-shadow:0 4px 0 #2e1309;display:flex;flex-direction:column;gap:6px}
.piece .n{font-family:var(--f-display);font-size:12px;color:var(--orange);letter-spacing:.14em}
.piece .t{font-weight:900;font-size:16.5px;line-height:1.45}
.piece p{font-size:13.5px;color:#f9e7da;line-height:1.7}

/* ---------- 手順 ---------- */
.flow{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;counter-reset:s}
.flow li{position:relative;background:#fff;border:2.5px solid var(--choco);border-radius:16px;padding:44px 12px 14px;text-align:center;font-weight:900;color:var(--choco);font-size:14.5px;line-height:1.55;box-shadow:0 3px 0 var(--choco)}
.flow li::before{counter-increment:s;content:counter(s);position:absolute;top:-16px;left:50%;transform:translateX(-50%);width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;background:var(--red-dark);color:#fff;border:3px solid var(--choco);font-family:var(--f-display);font-size:17px}
.flow li:last-child{background:var(--cream2)}
.flow-wrap{padding-top:16px}

/* ---------- 窓口（相談・申込み・アンケート） ---------- */
.desks{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.desk{background:#fff;border:2.5px solid var(--choco);border-radius:var(--r);padding:22px 22px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:8px}
.desk h3{font-size:18px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.desk p{font-size:14.5px;color:var(--ink2);flex:1}
.desk .btn{align-self:flex-start;margin-top:6px}
.desk .off{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;margin-top:6px;font-weight:900;font-size:14.5px;color:var(--muted);
  border:2.5px dashed var(--muted);border-radius:999px;padding:9px 18px}

/* ---------- 申込み案内の大枠 ---------- */
.apply{margin-top:48px;background:var(--choco);color:#fff;border:3px solid var(--choco);border-radius:24px;padding:30px 32px;display:flex;align-items:center;justify-content:space-between;gap:24px;
  box-shadow:0 6px 0 var(--red);position:relative;overflow:hidden}
.apply::after{content:"";position:absolute;right:-40px;top:-40px;width:160px;height:160px;border-radius:50%;background:rgba(244,167,185,.18)}
.apply h3{margin:0 0 8px;color:#fff;font-size:21px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.apply p{font-size:15px;line-height:1.8;color:#f6dfcd}
.apply .btn{flex-shrink:0;position:relative;z-index:1}

/* ---------- お知らせ ---------- */
.news{max-width:860px;margin:0 auto}
.news li{display:grid;grid-template-columns:112px auto 1fr;gap:6px 14px;align-items:baseline;padding:16px 4px;border-bottom:2px dashed var(--line)}
.news li:first-child{border-top:2px dashed var(--line)}
.news time{font-family:var(--f-display);font-size:15px;color:var(--choco)}
.news p{font-size:15px;color:var(--ink2)}

/* ---------- アクセス ---------- */
.access .box{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:24px;align-items:stretch}
.mapframe{border:2.5px solid var(--choco);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);min-height:360px;background:var(--cream)}
.mapframe iframe{width:100%;height:100%;min-height:360px;border:0;display:block}
.info{display:grid;gap:20px;align-content:start}
.info .card{padding:22px 24px}
.info .nm{font-weight:900;font-size:18px;color:var(--choco);display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
dl{display:grid;grid-template-columns:5.5em 1fr;gap:8px 12px;font-size:15px}
dt{font-weight:900;color:var(--red-dark)}
dd{color:var(--ink2)}
.info .btn{margin-top:14px}
.mini-access{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center}

/* ---------- FAQ ---------- */
.faq .in{max-width:860px}
details{background:#fff;border:2.5px solid var(--choco);border-radius:var(--r);margin-bottom:14px;box-shadow:0 3px 0 var(--choco);overflow:hidden}
summary{list-style:none;cursor:pointer;padding:18px 56px 18px 22px;font-weight:900;font-size:16px;color:var(--choco);position:relative;display:flex;gap:12px;align-items:baseline;min-height:48px}
summary::-webkit-details-marker{display:none}
summary::before{content:"Q";font-family:var(--f-display);color:var(--red);font-size:18px;flex-shrink:0}
summary::after{content:"";position:absolute;right:22px;top:50%;width:12px;height:12px;border-right:3px solid var(--choco);border-bottom:3px solid var(--choco);transform:translateY(-70%) rotate(45deg);transition:transform .2s}
details[open] summary::after{transform:translateY(-25%) rotate(-135deg)}
details .a{padding:0 22px 20px 52px;color:var(--ink2);font-size:15px;position:relative}
details .a::before{content:"A";position:absolute;left:22px;top:0;font-family:var(--f-display);color:var(--orange);font-size:18px;line-height:1.5}
details .a p + p{margin-top:8px}

/* ---------- お問い合わせ ---------- */
.contact-top{background:var(--paper)}
.cts{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;max-width:900px;margin:0 auto}
.ct{background:#fff;color:var(--ink);border:2.5px solid var(--choco);border-radius:var(--r);padding:20px 22px;box-shadow:var(--shadow)}
.ct .k{display:block;font-size:12.5px;font-weight:900;color:var(--red-dark);letter-spacing:.12em}
.ct .v{display:block;font-weight:900;font-size:17px;color:var(--choco);margin-top:4px;line-height:1.55;word-break:break-word}
.ct .v a{color:var(--red-dark);text-underline-offset:3px}
.ct .d{display:block;font-size:13.5px;color:var(--muted);margin-top:4px}
.ct.wide{grid-column:1 / -1}
.cts-note{max-width:900px;margin:20px auto 0;text-align:center;font-weight:700;color:var(--muted)}
.support-ways{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:24px 0}
.support-ways li{background:#fff;border:2.5px solid var(--choco);border-radius:16px;padding:16px 14px;text-align:center;font-weight:900;color:var(--choco);box-shadow:0 3px 0 var(--choco);font-size:15px;line-height:1.5}
.support-ways li span{display:block;font-size:26px;line-height:1.2;margin-bottom:4px}

/* ---------- 次の行動 ---------- */
.nextstep{padding:64px 0 88px;background:var(--cream)}
.nextstep .sub-head{justify-content:center}
.nextstep .sub-head::before{display:none}
.nextstep .go-list{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.nextstep a{display:flex;flex-direction:column;gap:2px;text-decoration:none;background:#fff;border:2.5px solid var(--choco);border-radius:var(--r);padding:16px 20px;
  box-shadow:var(--shadow);transition:transform .15s,box-shadow .15s}
.nextstep a:hover{transform:translateY(2px);box-shadow:0 2px 0 var(--choco)}
.nextstep a small{font-size:12.5px;color:var(--muted);font-weight:700}
.nextstep a b{font-weight:900;color:var(--choco);font-size:16.5px;line-height:1.5}
.nextstep a b::after{content:" →";color:var(--red-dark)}

/* ---------- フッター ---------- */
footer{background:var(--choco);color:#f3d9c6;padding:48px 0 calc(48px + env(safe-area-inset-bottom))}
footer .in{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
footer .logo{background:#fff;border-radius:16px;padding:10px 16px}
footer .logo img{height:52px;width:auto}
footer nav{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14px;font-weight:700}
footer nav a{text-decoration:none;padding:4px 0}
footer nav a:hover{text-decoration:underline}
footer .cp{width:100%;font-size:13px;color:#e9cdb8;border-top:1px solid rgba(255,255,255,.15);padding-top:20px;margin-top:4px;display:flex;gap:8px 20px;flex-wrap:wrap;justify-content:space-between}
footer .cp a{color:#fff;text-underline-offset:3px}

/* スマホ下部の固定ボタン */
.dock{display:none}

/* ---------- レスポンシブ ---------- */
@media (max-width:1100px){
  .gnav a:not(.cta){padding:8px 7px;font-size:13px}
  .gnav a.cta{padding:8px 14px;font-size:13px}
}
@media (max-width:1024px){
  .goals{grid-template-columns:repeat(2,1fr)}
  .pieces{grid-template-columns:repeat(3,1fr)}
  .facts ul{grid-template-columns:repeat(2,1fr)}
  .flow{grid-template-columns:repeat(3,1fr);row-gap:28px}
  .support-ways{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  :root{--header:64px}
  .menu-btn{display:block}
  .gnav{position:fixed;top:var(--header);left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--paper);
    border-bottom:3px solid var(--choco);padding:8px 20px 20px;transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity .2s,transform .2s,visibility .2s;
    max-height:calc(100dvh - var(--header));overflow-y:auto}
  .menu-open .gnav{opacity:1;transform:none;visibility:visible}
  .gnav a,.gnav a:not(.cta){font-size:16px;padding:14px 6px;border-radius:0;border-bottom:1px solid var(--line)}
  .gnav a.on:not(.cta){background:transparent;color:var(--red-dark)}
  .gnav a.cta{margin:14px 0 0;text-align:center;border-radius:999px;border-bottom:2px solid var(--choco);font-size:16px;padding:12px}
  .site-head .brand img{height:40px}
  .status{font-size:13px}
  .status .upd{margin-left:0}

  .sec{padding:64px 0}
  .hero{padding:24px 0 60px}
  .hero .in{grid-template-columns:1fr;gap:6px}
  .logowrap{max-width:230px}
  .ribbon-line{display:none}
  .trio,.two,.three,.cts,.desks{grid-template-columns:1fr}
  .ways{grid-template-columns:1fr;grid-template-rows:none}
  .way.big{grid-row:auto;min-height:0;padding:26px 22px}
  .access .box{grid-template-columns:1fr}
  .mini-access{grid-template-columns:1fr}
  .apply{flex-direction:column;align-items:flex-start;padding:24px}
  .about .concept{padding:28px 22px}
  .nextstep .go-list{grid-template-columns:1fr}

  .dock{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:rgba(255,250,243,.96);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-top:2px solid var(--line);
    transform:translateY(110%);transition:transform .25s,visibility .25s;visibility:hidden}
  .dock.show{transform:none;visibility:visible}
  .dock .btn{flex:1;padding:10px 10px;font-size:15px}
  footer{padding-bottom:calc(110px + env(safe-area-inset-bottom))}
}
@media (max-width:640px){
  .in{padding:0 16px}
  .goals{grid-template-columns:1fr;gap:12px}
  .goal{display:grid;grid-template-columns:52px 1fr;column-gap:14px;row-gap:2px;padding:16px 16px;align-items:center}
  .goal .ico{grid-row:1 / span 3;margin:0;align-self:start}
  .goal p{font-size:13.5px}
  .goal .go{display:none}
  .pieces{grid-template-columns:1fr 1fr;gap:10px}
  .piece{padding:16px 13px}
  .piece .t{font-size:15px}
  .piece p{font-size:13px}
  .flow{grid-template-columns:1fr 1fr;column-gap:10px}
  .flow li{font-size:14px;padding:40px 10px 12px}
  .sec-head{margin-bottom:32px}
  .sec-head h1,.sec-head h2{font-size:clamp(24px,7vw,32px)}
  .facts ul{grid-template-columns:1fr;gap:12px}
  .facts li{padding:14px 16px}
  .btns .btn{width:100%}
  .fees{grid-template-columns:1fr}
  .news li{grid-template-columns:auto 1fr;padding:14px 2px}
  .news li p{grid-column:1 / -1}
  dl{grid-template-columns:4.8em 1fr}
  .support-ways{grid-template-columns:1fr 1fr;gap:10px}
  .support-ways li{font-size:14px;padding:14px 10px}
  .status .tx{display:block;width:100%}
}
@media (max-width:360px){
  .pieces{grid-template-columns:1fr}
  .flow{grid-template-columns:1fr}
  .support-ways{grid-template-columns:1fr}
}
@media print{
  .site-head,.dock,.ribbon,.deco,.ribbon-line{display:none!important}
  .status{margin-top:0}
}
.ribbon-clip{overflow:hidden;padding:14px 0;margin:-30px 0 -14px;position:relative;z-index:2}
.ribbon-clip .ribbon{margin:0 -10px}
/* スマホの最初の画面で、状態・日程・主ボタンまで読めるようにする */
.btns .count{margin-top:0}
@media (max-width:640px){
  .status .pc{display:none}
  .status .tx{display:inline;width:auto}
  .status .in{gap:4px 10px;padding-top:7px;padding-bottom:7px}
  .status .upd{font-size:12px}
  .hero{padding-top:14px}
  .logowrap{max-width:180px}
  .hero h1{margin:8px 0 8px;font-size:30px}
  .hero .sub{font-size:15px;line-height:1.75}
  .hero .tag{margin-top:10px;font-size:14px;padding:4px 14px}
  .btns{margin-top:20px;gap:12px}
  .count{font-size:14px}
}
.two>*,.three>*{min-width:0}
dd{min-width:0;overflow-wrap:anywhere}
/* スマホでは切り取り線を横向きにし、半券を上に置く */
@media (max-width:640px){
  .ticket-wrap{margin-top:18px}
  .ticket{--stub:46px;grid-template-columns:1fr;grid-template-rows:var(--stub) auto;
    -webkit-mask:radial-gradient(circle var(--notch) at 0 var(--stub),#0000 97%,#000) left/51% 100% no-repeat,radial-gradient(circle var(--notch) at 100% var(--stub),#0000 97%,#000) right/51% 100% no-repeat;
    mask:radial-gradient(circle var(--notch) at 0 var(--stub),#0000 97%,#000) left/51% 100% no-repeat,radial-gradient(circle var(--notch) at 100% var(--stub),#0000 97%,#000) right/51% 100% no-repeat}
  .ticket .stub{flex-direction:row;justify-content:space-between;padding:0 18px}
  .ticket .stub .lbl{writing-mode:horizontal-tb;font-size:15px}
  .ticket .tbody{border-left:0;border-top:2.5px dashed var(--choco3);padding:16px 18px 16px}
  .ticket .big{font-size:54px}
  .ticket .dow small{display:none}
  .ticket .meta{font-size:14.5px;margin-top:10px;padding-top:10px}
}
@media (max-width:360px){.ticket .big{font-size:46px}}
@media (max-width:640px){
  .logowrap{max-width:164px}
  .ticket{--stub:42px}
  .ticket .tbody{padding:12px 18px 14px}
  .ticket .big{font-size:50px}
  .ticket .meta{margin-top:8px;padding-top:8px}
}
.support-ways .sw-ic{display:block;width:34px;height:34px;margin:0 auto 8px}
.about .concept .bow{position:absolute;right:-22px;top:-30px;width:92px;height:auto;transform:rotate(12deg)}
@media (max-width:860px){
  .way.big{min-height:0;padding:26px 22px}
  .way.big{padding-top:96px}
  .way.big .big-no{font-size:96px;left:18px;top:8px}
  .way.big .wrap-ribbon{top:30px;right:-80px;width:240px;height:28px}
  .about .concept .bow{right:-8px;top:-26px;width:70px}
}
/* 箱のふたの縁のような、内側の細い線 */
.way.big::before,.piece::before{content:"";position:absolute;inset:9px;border:1.5px solid rgba(246,223,205,.3);border-radius:10px;pointer-events:none}
.piece::before{inset:7px;border-radius:10px}
.piece>*{position:relative}
.way.big .num{display:none}
/* 後から内容を置く場所の目印 */
.ph{display:flex;gap:12px;align-items:flex-start;margin-top:18px;padding:16px 18px;border:2px dashed var(--choco3);border-radius:14px;
  background:repeating-linear-gradient(135deg,#fff 0 12px,var(--cream) 12px 24px)}
.ph .badge{flex-shrink:0;margin-top:3px}
.ph b{display:block;font-weight:900;color:var(--choco);line-height:1.5}
.ph p{font-size:14px;color:var(--muted);margin-top:2px;line-height:1.7}
.desk .ph{margin-top:6px;width:100%}