@charset "UTF-8";
/* =========================================================
   株式会社 彩　完成見学会 予約ページ（HP静的シンプル版）
   色・書体・角丸・余白はすべて下の :root で一元管理しています。
   案件ごとに変えるのは基本的にこのブロックだけです。
   ========================================================= */
:root{
  /* --- 色：彩（いろどり）のロゴ4色を、役割を分けて使う ---
     ロゴ実測値： 朱 #e72c25 ／ 金 #bc922e ／ 藍 #2a4198 ／ 深緑 #2a6348
     4色を気分で散らすと「どこを押すのか」が分からなくなるため、
     色ごとに仕事を決めています。
       朱   … 操作の色。ボタン、選択中、必須バッジ、社名
       藍   … 案内・情報の色。見出しの下線、項目名、アイコン
       深緑 … 空きあり ◎ と 予約完了
       金   … 残りわずか △ と 注意書き
     4色を並べた細いラインを、ヘッダー下とフッター上に1本ずつ置いています。 */

  /* 朱：そのままだと彩度が高すぎて「警告色」に見えるので、面積の大きい操作色は沈めた値を使う */
  --brand:#9c2a21;         /* ボタン・選択状態（紙色地で約7.2:1） */
  --brand-deep:#75201a;    /* ホバー時 */
  --brand-mid:#c2837c;     /* 線とアイコンだけ。文字には使わない */
  --brand-pale:#f6ece9;    /* ごく薄い下地 */
  --brand-raw:#e72c25;     /* ロゴの朱。4色ラインだけに使う */

  /* 藍：線と小さい文字にしか使わないので、ロゴの値のまま（紙色地で約8.6:1） */
  --indigo:#2a4198;
  --indigo-deep:#20326f;
  --indigo-pale:#eaedf7;

  /* 深緑：ロゴの値のまま（紙色地で約6.7:1） */
  --green:#2a6348;

  /* 金：ロゴの値のままだと文字に使えない（約2.7:1）ので、文字用は沈めた値を使う */
  --gold:#8a6410;          /* 文字・記号用（紙色地で約5.1:1） */
  --gold-raw:#bc922e;      /* ロゴの金。線だけに使う */

  /* --- 下地：純白を使わない。ほんのり温かい紙色 --- */
  --paper:#faf8f5;
  --paper-2:#f0ebe4;       /* 帯セクションの下地 */
  --field:#fffdfb;         /* 入力欄・カード面 */
  --ink:#1e1b19;           /* 本文（純黒ではない） */
  --ink-soft:#5e564f;      /* 補助文（紙色地で約6.8:1） */
  --line:#ded6cb;

  /* --- 空き状況の記号 --- */
  --state-ok:var(--green);   /* ◎ 空きあり */
  --state-few:var(--gold);   /* △ 残りわずか */
  --state-full:#918a83;      /* × 満席 */

  /* --- かたち：角丸は4pxに固定。カードもボタンも入力欄も同じ --- */
  --radius:4px;
  --shadow:0 10px 30px rgba(60,30,25,.07);

  --maxw:1080px;
  --maxw-narrow:720px;
  --gutter:22px;
  --header-h:64px;

  --font:"Noto Sans JP",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);

  /* --- z-index の段（この3段以外は使わない） --- */
  --z-header:100;
  --z-bar:200;
  --z-skip:1000;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 8px)}
body{
  font-family:var(--font);
  font-weight:500;
  font-size:16px;
  line-height:1.85;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
svg{display:block}
h1,h2,h3{font-weight:800;line-height:1.45;letter-spacing:.01em}

/* hidden属性を確実に効かせる（gridやflexを持つ要素があるため） */
[hidden]{display:none !important}

a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:2px;
}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:var(--z-skip);
  background:var(--brand);color:#fff;padding:10px 16px;border-radius:var(--radius);
  text-decoration:none;font-weight:700;
}
.skip-link:focus{left:12px;top:12px}

.container{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.container-narrow{max-width:var(--maxw-narrow)}

/* =========================================================
   セクションの土台
   ========================================================= */
.section{padding:clamp(48px,6vw,80px) 0}
.section-tint{background:var(--paper-2)}
.section-title{
  font-size:clamp(20px,2.6vw,27px);
  letter-spacing:.02em;
  padding-bottom:12px;
  border-bottom:2px solid var(--indigo);
  display:inline-block;
  margin-bottom:clamp(24px,3vw,34px);
}

/* =========================================================
   ボタン（角丸は全体と同じ4px。楕円ピルは使わない）
   ========================================================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 28px;
  border:1.5px solid transparent;border-radius:var(--radius);
  font-weight:700;font-size:15px;line-height:1.4;white-space:nowrap;
  cursor:pointer;text-decoration:none;
  transition:background-color .18s var(--ease), color .18s var(--ease),
             border-color .18s var(--ease), transform .18s var(--ease);
}
.btn-primary{background:var(--brand);color:#fff;border-color:var(--brand)}
.btn-primary:hover{background:var(--brand-deep);border-color:var(--brand-deep);transform:translateY(-1px)}
.btn-primary:active{transform:translateY(1px)}
.btn-outline{background:transparent;color:var(--brand);border-color:var(--brand)}
.btn-outline:hover{background:var(--brand);color:#fff;transform:translateY(-1px)}
.btn-outline:active{transform:translateY(1px)}
.btn-sm{padding:10px 16px;font-size:13.5px}
.btn-block{width:100%}
.btn:disabled{opacity:.6;cursor:progress;transform:none}

/* =========================================================
   ヘッダー（デスクトップは1行・高さ64px）
   ========================================================= */
/* 彩（いろどり）の4色を並べた線。ヘッダー下とフッター上に1本ずつ置く */
.brandline{
  height:3px;
  background:linear-gradient(to right,
    var(--brand-raw) 0 25%, var(--gold-raw) 25% 50%,
    var(--indigo) 50% 75%, var(--green) 75% 100%);
}
.site-header{
  position:sticky;top:0;z-index:var(--z-header);
  height:var(--header-h);
  background:rgba(250,248,245,.94);
  transition:box-shadow .25s var(--ease);
}
/* ヘッダーは固定なので、4色ラインもいっしょに貼り付いて見えるようにする */
.site-header::after{
  content:"";position:absolute;left:0;right:0;bottom:-3px;height:3px;
  background:linear-gradient(to right,
    var(--brand-raw) 0 25%, var(--gold-raw) 25% 50%,
    var(--indigo) 50% 75%, var(--green) 75% 100%);
}
.site-header.is-scrolled{box-shadow:0 2px 14px rgba(60,30,25,.10)}
.header-inner{
  max-width:var(--maxw);height:100%;margin-inline:auto;padding-inline:var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.brand{display:flex;align-items:baseline;gap:9px;text-decoration:none;min-width:0}
.brand strong{font-size:17px;font-weight:800;letter-spacing:.06em;color:var(--brand);white-space:nowrap}
.brand span{font-size:10.5px;letter-spacing:.18em;color:var(--ink-soft)}
.head-tel{display:flex;align-items:center;gap:7px;color:var(--brand);text-decoration:none}
.head-tel svg{width:17px;height:17px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.head-tel-label{font-size:11px;font-weight:800;letter-spacing:.06em;color:var(--ink-soft)}
.head-tel-num{font-size:16px;font-weight:800;letter-spacing:.02em}
@media(max-width:640px){
  .brand span{display:none}
  .head-tel-label{display:none}
  .head-tel-num{font-size:15px}
}

/* =========================================================
   告知（非対称の2分割。左に日時、右に写真）
   ========================================================= */
.notice{padding:clamp(28px,4vw,56px) 0 clamp(36px,5vw,64px)}
.notice-inner{display:grid;gap:clamp(24px,3vw,40px)}
@media(min-width:900px){
  .notice-inner{grid-template-columns:1fr .82fr;align-items:center}
}
.notice-title{
  font-size:clamp(27px,4vw,40px);letter-spacing:.03em;line-height:1.35;
}
.notice-lead{margin-top:16px;max-width:32em;font-size:15px;color:var(--ink-soft)}

/* 日付は「告知」なので、表組みではなく大きく見せる */
.notice-when{
  margin-top:clamp(24px,3vw,32px);
  padding:20px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
/* 2日で終わりの時刻が違うので、日ごとに1かたまりにして並べる */
.notice-days{display:grid;gap:14px}
@media(min-width:560px){.notice-days{grid-template-columns:1fr 1fr;gap:12px 22px}}
.notice-day{padding-left:14px;border-left:3px solid var(--indigo)}
.notice-date{font-size:clamp(21px,2.8vw,27px);font-weight:800;letter-spacing:.02em;line-height:1.3}
.notice-date small{font-size:.55em;font-weight:800;margin:0 2px}
.notice-date b{font-size:.5em;font-weight:800;margin-left:5px}
/* 土曜は藍、日曜は朱。日本のカレンダーの慣習にそろえている */
.wd-sat{color:var(--indigo)}
.wd-sun{color:var(--brand)}
.notice-hours{margin-top:2px;font-size:15px;font-weight:700}
.notice-hours span{display:block;margin-top:1px;font-weight:500;color:var(--ink-soft);font-size:12.5px}
.notice-place{margin-top:14px;font-size:15px;font-weight:700}
.notice-place span{display:block;font-weight:500;font-size:13px;color:var(--ink-soft);margin-top:2px}
.notice-actions{margin-top:clamp(22px,3vw,28px)}
@media(max-width:559px){.notice-actions .btn{width:100%}}

.notice-photo{margin:0}
/* 会場写真は横長（1200x687）なので、4:3で切ると左右の田んぼと木が落ちる。
   いただいた構図のまま見せるため、PCもスマホと同じ16:9にそろえてある。 */
.notice-photo img{
  width:100%;aspect-ratio:16/9;object-fit:cover;
  border:1px solid var(--line);border-radius:var(--radius);
}
@media(max-width:899px){
  .notice-inner{grid-template-columns:1fr}
  .notice-photo{order:2}
  .notice-photo img{aspect-ratio:16/9}
}

/* =========================================================
   予約ウィザード
   ※このスキルは「複数ステップの入力ウィザード」を対象外としているため、
     ここでは色・角丸・書体・ボタン・入力欄の規律だけを当てています。
   ========================================================= */
.booking{padding:clamp(40px,5vw,68px) 0}

.demo-note{
  margin:0 auto clamp(18px,2vw,24px);max-width:var(--maxw-narrow);
  background:var(--paper-2);border:1px solid var(--line);border-left:3px solid var(--gold-raw);
  border-radius:var(--radius);padding:12px 16px;
  font-size:13px;font-weight:700;line-height:1.8;color:var(--ink-soft);
}

/* 進み方の表示。丸番号は使わず、下線だけで現在地を示す */
.wiz-steps{max-width:var(--maxw-narrow);margin:0 auto clamp(18px,2vw,26px)}
.wiz-steps ol{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.wiz-steps li{
  font-size:13px;font-weight:700;color:var(--ink-soft);
  padding-bottom:9px;border-bottom:2px solid var(--line);
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.wiz-steps li.is-done{color:var(--ink)}
.wiz-steps li.is-done,
.wiz-steps li.is-current{border-bottom-color:var(--brand)}
.wiz-steps li.is-current{color:var(--brand)}
@media(max-width:420px){.wiz-steps li{font-size:12px}}

.wiz{
  max-width:var(--maxw-narrow);margin-inline:auto;
  background:var(--field);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(22px,3.5vw,38px);
}
.panel{display:none}
.panel.is-active{display:block;animation:fade .22s var(--ease) both}
@keyframes fade{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.panel-title{font-size:17px;margin-bottom:20px}

.panel-foot{margin-top:28px;display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}
.panel-foot .btn{flex:1 1 100%}
@media(min-width:560px){
  .panel-foot .btn{flex:0 0 auto;min-width:170px}
  .panel-foot .btn-outline{min-width:110px}
}

/* --- 日付の切り替え（2つだけなので分割ボタン） --- */
.daytabs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px}
.daytab{
  background:var(--paper);border:1.5px solid var(--line);
  border-radius:var(--radius);padding:13px 8px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:1px;
  color:var(--ink-soft);
  transition:border-color .18s var(--ease), background-color .18s var(--ease), color .18s var(--ease);
}
.daytab-md{font-size:21px;font-weight:800;line-height:1.25;letter-spacing:.01em}
.daytab-md small{font-size:12px;font-weight:800;margin:0 1px}
.daytab-wd{font-size:12px;font-weight:700;letter-spacing:.04em}
/* 2日で受付の終わりが違うので、選ぶ前に分かるようにしておく */
.daytab-hours{margin-top:3px;font-size:11.5px;font-weight:500;color:var(--ink-soft)}
.daytab:hover{border-color:var(--brand-mid)}
.daytab.is-active{border-color:var(--brand);background:var(--brand-pale);color:var(--brand)}
.daytab.is-active .daytab-hours{color:var(--brand-deep)}

/* --- 空き状況の凡例 --- */
.legend{
  display:flex;flex-wrap:wrap;gap:4px 18px;margin-bottom:12px;
  font-size:12.5px;color:var(--ink-soft);list-style:none;
}
.legend li{display:flex;align-items:center;gap:5px}
.mk{font-weight:800;font-size:15px;line-height:1}
.mk-o{color:var(--state-ok)}
.mk-t{color:var(--state-few)}
.mk-x{color:var(--state-full)}

/* --- 時間枠 --- */
.slots{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
@media(min-width:560px){.slots{grid-template-columns:repeat(4,1fr)}}
.slot{
  background:var(--paper);border:1.5px solid var(--line);border-radius:var(--radius);
  padding:12px 6px 10px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  transition:border-color .18s var(--ease), background-color .18s var(--ease), transform .18s var(--ease);
}
.slot-time{font-size:17px;font-weight:800;letter-spacing:.01em;line-height:1.2}
.slot-mk{font-size:18px;font-weight:800;line-height:1}
.slot:hover:not(:disabled){border-color:var(--brand-mid);transform:translateY(-1px)}
.slot:active:not(:disabled){transform:translateY(1px)}
.slot.is-selected{border-color:var(--brand);background:var(--brand-pale)}
.slot.is-selected .slot-time{color:var(--brand)}
.slot:disabled{cursor:not-allowed;background:var(--paper-2);color:var(--state-full)}
.slot:disabled .slot-time{color:var(--state-full)}

/* 12:00の枠が抜けている理由を、その場で伝える */
.slots-note{margin-top:12px;font-size:12.5px;line-height:1.7;color:var(--ink-soft)}

/* --- 選択中の日時 --- */
.chosen{
  margin-bottom:22px;padding:12px 15px;
  background:var(--brand-pale);border-left:3px solid var(--brand);border-radius:var(--radius);
  font-size:15px;font-weight:700;color:var(--brand);
}

/* --- 入力欄（ラベルは必ず上。プレースホルダーは使わず、例は補助文に置く） --- */
.row{display:grid;gap:20px;margin-bottom:20px}
@media(min-width:640px){.row{grid-template-columns:repeat(2,1fr)}}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:20px}
.row .field{margin-bottom:0}
.field label,.field .as-label{font-size:14px;font-weight:800;display:flex;align-items:center;gap:8px}
.field-help{font-size:12.5px;line-height:1.7;color:var(--ink-soft)}
.req,.opt{
  font-size:10.5px;font-weight:800;letter-spacing:.04em;
  padding:2px 6px;border-radius:var(--radius);line-height:1.6;
}
.req{background:var(--brand);color:#fff}
.opt{background:var(--paper-2);color:var(--ink-soft);border:1px solid var(--line)}

.field input,.field select,.field textarea{
  width:100%;padding:13px 14px;
  font:inherit;font-size:15px;font-weight:500;color:var(--ink);
  background:#fff;border:1.5px solid var(--line);border-radius:var(--radius);
  transition:border-color .18s var(--ease);
}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--brand-mid)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--brand)}
.field textarea{resize:vertical;line-height:1.8}
.field select{
  appearance:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235e564f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:16px;
  padding-right:38px;
}

/* エラーは色だけに頼らず、帯と左の線と文言で示す */
.field.is-error input,.field.is-error select,.field.is-error textarea{border-color:var(--brand)}
.err{
  display:flex;align-items:flex-start;gap:7px;
  background:var(--brand-pale);border-left:3px solid var(--brand);border-radius:var(--radius);
  padding:8px 12px;font-size:13px;font-weight:700;line-height:1.7;color:var(--brand-deep);
}
.err::before{
  content:"";flex:none;width:15px;height:15px;margin-top:4px;
  background:var(--brand);
  -webkit-mask:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5'/%3E%3Cpath d='M12 16.5h.01'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5'/%3E%3Cpath d='M12 16.5h.01'/%3E%3C/svg%3E") center/contain no-repeat;
}

.radios{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.radio{
  display:flex;align-items:center;justify-content:center;gap:8px;
  border:1.5px solid var(--line);border-radius:var(--radius);
  padding:12px 8px;cursor:pointer;font-size:14.5px;font-weight:500;background:#fff;
  transition:border-color .18s var(--ease), background-color .18s var(--ease);
}
.radio input{accent-color:var(--brand);width:17px;height:17px;margin:0}
.radio:hover{border-color:var(--brand-mid)}
.radio:has(input:checked){border-color:var(--brand);background:var(--brand-pale);font-weight:700}

/* 迷惑投稿よけの隠し欄。画面にも読み上げにも出さない */
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.agree{
  display:flex;align-items:flex-start;gap:11px;cursor:pointer;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:15px;font-size:14px;font-weight:500;line-height:1.75;
}
.agree input{accent-color:var(--brand);width:20px;height:20px;margin-top:3px;flex:none}
.agree .req{margin-left:6px}
.agree-link{margin-top:8px;font-size:13px}
.agree-link a{color:var(--indigo);text-decoration:underline;text-underline-offset:3px}

/* --- 確認・完了の内訳 --- */
.summary{border-top:1px solid var(--line)}
.summary>div{
  display:grid;gap:2px 24px;padding:14px 0;border-bottom:1px solid var(--line);
}
@media(min-width:560px){.summary>div{grid-template-columns:160px 1fr;align-items:baseline}}
.summary dt{font-size:13px;font-weight:800;color:var(--indigo);letter-spacing:.02em}
.summary dd{font-size:15px;white-space:pre-wrap;word-break:break-word}
.summary .is-key dd{font-weight:800}
.confirm-note{margin-top:18px;font-size:13px;line-height:1.9;color:var(--ink-soft)}
.confirm-note.is-error{color:var(--brand-deep);font-weight:700}

.done-head{text-align:center;margin-bottom:24px}
.done-icon{
  width:40px;height:40px;margin:0 auto 12px;
  fill:none;stroke:var(--state-ok);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;
}
.done-title{font-size:20px;margin-bottom:8px}
.done-lead{font-size:14.5px;color:var(--ink-soft)}
/* 予約が済んだ人にだけ出す、会場と駐車場の案内。案内なので藍でまとめる */
.done-place{
  margin-bottom:24px;padding:18px 20px;
  background:var(--indigo-pale);border-left:3px solid var(--indigo);border-radius:var(--radius);
}
.done-place-title{font-size:15px;color:var(--indigo-deep);margin-bottom:12px}
.done-place-list{display:grid;gap:12px}
.done-place-list>div{display:grid;gap:2px}
@media(min-width:480px){.done-place-list>div{grid-template-columns:7em 1fr;gap:4px 14px;align-items:baseline}}
.done-place-list dt{font-size:12.5px;font-weight:800;color:var(--indigo-deep)}
.done-place-list dd{font-size:16px;font-weight:800;line-height:1.6}
.done-place-list dd b{color:var(--brand)}
.done-place-list dd span{
  display:block;margin-top:2px;font-size:13px;font-weight:500;color:var(--ink-soft);line-height:1.7;
}
.done-place-actions{margin-top:14px}
.done-place-note{margin-top:12px;font-size:12.5px;line-height:1.8;color:var(--ink-soft)}

.done-tel{margin-top:20px;font-size:13.5px;line-height:1.9;color:var(--ink-soft)}
.done-tel a{color:var(--brand);font-weight:800;text-decoration:underline;text-underline-offset:3px}

/* =========================================================
   ご来場にあたって（カードを使わず、罫線と余白で組む）
   ========================================================= */
.guide-list{list-style:none;border-top:1px solid var(--line);max-width:52em}
.guide-list li{
  display:grid;grid-template-columns:26px 1fr;gap:4px 16px;
  padding:20px 0;border-bottom:1px solid var(--line);
}
.guide-list svg{
  grid-row:span 2;width:24px;height:24px;margin-top:3px;
  fill:none;stroke:var(--indigo);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
}
.guide-list b{font-size:16px;font-weight:800;line-height:1.6}
.guide-list p{font-size:14px;color:var(--ink-soft);line-height:1.85}
@media(max-width:559px){
  .guide-list li{grid-template-columns:22px 1fr;gap:4px 13px}
  .guide-list svg{width:20px;height:20px}
  .guide-list b{font-size:15px}
}

/* =========================================================
   よくあるご質問
   ========================================================= */
.faq{padding:clamp(48px,6vw,80px) 0}
.faq-list{max-width:52em;border-top:1px solid var(--line)}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list summary{
  list-style:none;cursor:pointer;position:relative;
  padding:18px 40px 18px 0;font-size:15.5px;font-weight:800;line-height:1.6;
}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{
  content:"";position:absolute;right:8px;top:50%;width:9px;height:9px;
  border-right:2px solid var(--brand);border-bottom:2px solid var(--brand);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s var(--ease);
}
.faq-list details[open] summary::after{transform:translateY(-25%) rotate(225deg)}
.faq-list p{padding:0 0 20px;font-size:14.5px;color:var(--ink-soft);max-width:44em}

/* 情報の取り扱いの項目だけ、見出しと中身に分けて読ませる */
.faq-list dl{padding:0 0 20px;font-size:14.5px;color:var(--ink-soft);max-width:44em;display:grid;gap:12px}
.faq-list dt{font-weight:800;color:var(--ink)}
.faq-list dd{margin:3px 0 0}

/* =========================================================
   フッター
   ========================================================= */
.site-footer{background:var(--ink);color:#e9e3dc;padding:32px 0;position:relative}
.site-footer::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(to right,
    var(--brand-raw) 0 25%, var(--gold-raw) 25% 50%,
    var(--indigo) 50% 75%, var(--green) 75% 100%);
}
.footer-inner{display:grid;gap:14px}
@media(min-width:768px){
  .footer-inner{grid-template-columns:1fr auto;align-items:center}
}
.footer-name{font-size:16px;font-weight:800;letter-spacing:.06em}
.footer-addr{font-size:12.5px;line-height:1.9;color:#b0a79e}
.footer-links{display:flex;flex-wrap:wrap;gap:8px 20px}
.footer-links a{
  font-size:13px;color:#e9e3dc;text-decoration:none;
  border-bottom:1px solid #625950;padding-bottom:2px;
  transition:border-color .18s var(--ease);
}
.footer-links a:hover{border-color:var(--brand-mid)}

/* =========================================================
   スマホ用の固定バー（時間を選んだときだけ出る）
   ========================================================= */
.stickybar{
  position:fixed;left:0;right:0;bottom:0;z-index:var(--z-bar);
  display:flex;align-items:center;gap:12px;
  background:var(--field);border-top:1px solid var(--line);
  padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  box-shadow:0 -4px 18px rgba(60,30,25,.10);
}
.stickybar-text{flex:1 1 auto;min-width:0;font-size:12.5px;font-weight:800;line-height:1.4}
.stickybar-text small{display:block;font-size:10.5px;font-weight:500;color:var(--ink-soft)}
.stickybar .btn{flex:none}
body.has-stickybar{padding-bottom:76px}
@media(min-width:768px){
  .stickybar{display:none}
  body.has-stickybar{padding-bottom:0}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}