/* 観光モデルコース提案システム（/model-course/ の #dgc-root）。2026-10-08 に記事本文のカスタムHTMLから移動。
   functions.php「29.」で、本文に id="dgc-root" がある記事だけで読み込む */
/* =========================================================
   ダナンガイド商店 観光モデルコース提案システム
   すべてのCSSは .dgc.dgc の中だけに効きます（テーマに影響しません）
   ========================================================= */
.dgc{
  --sea-900:#00505E; --sea-700:#00788C; --sea-500:#00B7CE; --sea-300:#7FDCE8;
  --bar:#00788C; --foam:#E2F6F9; --gold:#E3AA00; --accent-700:#8A6A00;
  --ink:#0E262B; --ink-2:#3F585D; --ink-3:#768E93;
  --line:#D8E7EA; --line-soft:#E8F2F4;
  --surface:#FFFFFF; --surface-2:#F7FCFD; --on-accent:#06333B;
  --fd:"Hiragino Mincho ProN","Yu Mincho",YuMincho,"MS PMincho",serif;
  --fb:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",YuGothic,Meiryo,sans-serif;
  --fl:"Helvetica Neue",Arial,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-family:var(--fb); color:var(--ink); font-size:15px; line-height:1.75;
  display:block; container-type:inline-size; container-name:dgc;
}

/* --- テーマ装飾の打ち消し（SANGOの .entry-content 対策） --- */
.dgc.dgc *, .dgc.dgc *::before, .dgc.dgc *::after{box-sizing:border-box}
.dgc.dgc h2, .dgc.dgc h3, .dgc.dgc h4, .dgc.dgc p,
.dgc.dgc ul, .dgc.dgc ol, .dgc.dgc li, .dgc.dgc dl{
  margin:0; padding:0; border:0; background:none; font:inherit; color:inherit;
  line-height:inherit; letter-spacing:inherit; counter-reset:none;
}
.dgc.dgc h2::before, .dgc.dgc h2::after,
.dgc.dgc h3::before, .dgc.dgc h3::after,
.dgc.dgc h4::before, .dgc.dgc h4::after,
.dgc.dgc li::before, .dgc.dgc li::after{content:none; display:none}
.dgc.dgc ul, .dgc.dgc ol{list-style:none}
/* テーマが見出しの1文字目に色・サイズを付けるのを打ち消す */
.dgc.dgc h1::first-letter, .dgc.dgc h2::first-letter, .dgc.dgc h3::first-letter,
.dgc.dgc h4::first-letter, .dgc.dgc h5::first-letter, .dgc.dgc p::first-letter{
  font-size:inherit; font-weight:inherit; color:inherit; line-height:inherit;
  float:none; margin:0; padding:0; background:none;
}
.dgc.dgc button{
  margin:0; font:inherit; color:inherit; line-height:inherit; cursor:pointer;
  -webkit-appearance:none; appearance:none; text-shadow:none; text-transform:none;
}
/* テーマのリンク装飾を打ち消す。ただし自作のボタン（.cta / .mini / .backtop）は除く */
.dgc.dgc a:where(:not(.cta, .mini, .backtop)){text-decoration:none; color:inherit; background:none; border-bottom:0; box-shadow:none}
.dgc.dgc a.cta, .dgc.dgc a.mini, .dgc.dgc a.backtop{text-decoration:none; box-shadow:none}
.dgc.dgc a::before, .dgc.dgc a::after{content:none}
.dgc.dgc img{max-width:100%; height:auto; margin:0; box-shadow:none; border:0; vertical-align:middle}
.dgc.dgc table{margin:0}

.dgc.dgc :focus-visible{outline:2px solid var(--sea-500); outline-offset:3px; border-radius:6px}
@media (prefers-reduced-motion: reduce){.dgc.dgc *{animation:none !important; transition-duration:.01ms !important}}

/* --- 進行バー --- */
.dgc.dgc .flow-top{display:flex; align-items:center; gap:11px; margin-bottom:18px}
.dgc.dgc .rail{display:flex; gap:4px; flex:1}
.dgc.dgc .rail i{flex:1; height:3px; border-radius:2px; background:var(--line-soft); display:block; transition:background .3s}
.dgc.dgc .rail i.done{background:var(--sea-300)}
.dgc.dgc .rail i.now{background:var(--sea-700)}
.dgc.dgc .icon-btn{
  flex:none; width:32px; height:32px; border-radius:50%; border:1px solid var(--line);
  background:transparent; color:var(--ink-2); display:grid; place-items:center; font-size:15px;
}
.dgc.dgc .icon-btn:hover{background:var(--surface-2); border-color:var(--sea-300)}
.dgc.dgc .icon-btn[hidden]{display:none}

/* --- ステップ --- */
.dgc.dgc .step{display:none; flex-direction:column; gap:16px; animation:dgcIn .26s ease both}
.dgc.dgc .step.on{display:flex}
@keyframes dgcIn{from{opacity:0; transform:translateX(9px)} to{opacity:1; transform:none}}
.dgc.dgc .q{margin:0; font-size:19px; font-weight:800; line-height:1.5; letter-spacing:.01em}
.dgc.dgc .sub{margin:-9px 0 0; font-size:12px; color:var(--ink-3)}

/* --- 2択ボタン --- */
.dgc.dgc .axis-row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.dgc.dgc .axis{
  --ac:var(--sea-500); position:relative; overflow:hidden; text-align:left;
  border:2px solid var(--line); background:var(--surface); border-radius:22px;
  padding:22px 20px 18px; display:flex; flex-direction:column; gap:5px;
  transition:transform .22s cubic-bezier(.2,.8,.3,1), border-color .22s, box-shadow .22s;
}
.dgc.dgc .axis[data-axis="place"]{--ac:var(--sea-500)}
.dgc.dgc .axis[data-axis="time"]{--ac:var(--gold)}
.dgc.dgc .axis:hover{transform:translateY(-4px); border-color:var(--ac); box-shadow:0 12px 28px -10px color-mix(in srgb, var(--ac) 70%, transparent)}
.dgc.dgc .axis .t{font-size:clamp(26px,3.4vw,32px); font-weight:900; letter-spacing:.04em; line-height:1.25; position:relative}
.dgc.dgc .axis .d{font-size:12px; color:var(--ink-3); line-height:1.65; position:relative}
.dgc.dgc .axis .promise{
  position:relative; margin-top:14px; display:inline-flex; align-items:center; align-self:flex-start;
  border-radius:999px; padding:7px 15px; font-size:12.5px; font-weight:700; line-height:1.5;
  background:color-mix(in srgb, var(--ac) 18%, var(--surface));
  color:color-mix(in srgb, var(--ac) 55%, var(--ink));
}
.dgc.dgc .axis[aria-pressed="true"]{border-color:var(--ac); color:#fff; transform:translateY(-3px)}
.dgc.dgc .axis[data-axis="place"][aria-pressed="true"]{background:linear-gradient(135deg,#00B7CE,#007F91)}
.dgc.dgc .axis[data-axis="time"][aria-pressed="true"]{background:linear-gradient(135deg,#E3AA00,#A67C00)}
.dgc.dgc .axis[aria-pressed="true"] .t{color:#fff}
.dgc.dgc .axis[aria-pressed="true"] .d{color:#fff; opacity:.92; font-weight:500}
.dgc.dgc .axis[aria-pressed="true"] .promise{background:rgba(255,255,255,.24); color:#fff}

/* 波 */
.dgc.dgc .wave{position:absolute; left:0; right:0; bottom:0; height:96px; overflow:hidden; pointer-events:none; z-index:0; transition:height .55s cubic-bezier(.2,.85,.3,1), opacity .35s}
.dgc.dgc .wave i{position:absolute; left:50%; bottom:0; width:260%; aspect-ratio:1/1; border-radius:44%; background:var(--ac); display:block; opacity:.14; animation:dgcWaveA 12s linear infinite}
.dgc.dgc .wave i:last-child{border-radius:47.5%; opacity:.27; animation:dgcWaveB 7.5s linear infinite}
@keyframes dgcWaveA{from{transform:translate(-50%,87%) rotate(0)} to{transform:translate(-50%,87%) rotate(360deg)}}
@keyframes dgcWaveB{from{transform:translate(-50%,89%) rotate(360deg)} to{transform:translate(-50%,89%) rotate(0)}}
.dgc.dgc .axis:hover .wave{height:230px}
.dgc.dgc .axis[aria-pressed="true"] .wave{opacity:0}

/* --- 主ボタン --- */
.dgc.dgc .cta{
  width:100%; margin-top:16px; border:0; border-radius:999px; padding:19px 26px;
  font-size:18px; font-weight:900; letter-spacing:.06em; color:#fff;
  background:linear-gradient(118deg,#00758A,#005869);
  box-shadow:0 12px 26px -10px rgba(0,90,107,.75);
  display:flex; align-items:center; justify-content:center; gap:12px; text-decoration:none;
  transition:transform .2s cubic-bezier(.2,.8,.3,1), box-shadow .2s;
}
.dgc.dgc .cta .arw{font-family:var(--fl); font-weight:400; font-size:20px; transition:transform .22s}
.dgc.dgc .cta:hover:not(:disabled){transform:translateY(-2px); box-shadow:0 18px 36px -12px rgba(0,90,107,.8)}
.dgc.dgc .cta:hover:not(:disabled) .arw{transform:translateX(5px)}
.dgc.dgc .cta:disabled{cursor:not-allowed; background:var(--surface); color:var(--ink); border:2px solid var(--ink); box-shadow:none}
.dgc.dgc .cta:disabled .arw{opacity:.45}
/* 未選択のまま「確定」に触れたときの案内。場所は常に確保し、表示は透明度で切り替える */
.dgc.dgc .cta-hint{
  margin:12px 0 0; min-height:1.7em; text-align:center; line-height:1.7;
  font-size:18px; font-weight:800; color:#D93025;
  opacity:0; transition:opacity .16s;
}
.dgc.dgc .cta:disabled:hover + .cta-hint,
.dgc.dgc .cta:disabled:focus-visible + .cta-hint,
.dgc.dgc .cta-hint.show{opacity:1}
.dgc.dgc .cta[data-axis="place"]{background:var(--sea-500); border:2px solid var(--sea-500); color:#fff; box-shadow:0 12px 26px -10px color-mix(in srgb, var(--sea-500) 80%, transparent)}
.dgc.dgc .cta[data-axis="time"]{background:var(--gold); border:2px solid var(--gold); color:#fff; box-shadow:0 12px 26px -10px color-mix(in srgb, var(--gold) 80%, transparent)}
.dgc.dgc .cta.line-cta{background:#06C755; color:#fff; box-shadow:0 12px 26px -10px rgba(6,199,85,.75)}

/* --- 問い合わせ --- */
.dgc.dgc .ask{margin-top:26px; padding:20px 0 0; border-top:1px solid var(--line); background:transparent; display:flex; flex-direction:column; gap:10px}
.dgc.dgc .ask h3{margin:0; font-size:12.5px; font-weight:700; color:var(--ink-2); line-height:1.7}
.dgc.dgc .ask p{margin:0; font-size:12px; color:var(--ink-3); line-height:1.7}
.dgc.dgc .ask .undercta{margin:-3px 2px 4px; text-align:left}
.dgc.dgc .ask-row{display:flex; flex-wrap:wrap; gap:8px}
.dgc.dgc .mini{border:1px solid var(--line); background:transparent; color:var(--ink-2); border-radius:999px; padding:9px 17px; font-size:12.5px; font-weight:600; transition:border-color .18s, color .18s, background .18s}
.dgc.dgc .mini:hover{border-color:var(--sea-500); color:var(--sea-700); background:var(--surface-2)}
.dgc.dgc .mini:disabled{opacity:.4; cursor:not-allowed}
.dgc.dgc .mini.line{background:#06C755; border-color:#06C755; color:#fff; font-weight:700}
.dgc.dgc .mini.line:hover{background:#05B24C; border-color:#05B24C; color:#fff}
.dgc.dgc a.mini{display:inline-flex; align-items:center; justify-content:center}
.dgc.dgc .note{margin:0; font-size:11.5px; color:var(--ink-3); line-height:1.7}
.dgc.dgc .note b{color:var(--ink-2); font-weight:700}
.dgc.dgc .textlink{align-self:flex-start; border:0; background:transparent; padding:2px 0; font-size:12.5px; font-weight:700; color:var(--sea-700); text-decoration:underline; text-underline-offset:3px}
.dgc.dgc .textlink:disabled{color:var(--ink-3); cursor:not-allowed}

/* --- 選択肢 --- */
.dgc.dgc .grid-2{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.dgc.dgc .grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.dgc.dgc .grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:8px}
.dgc.dgc .opt{border:1px solid var(--line); background:transparent; border-radius:14px; padding:12px 13px; text-align:left; display:flex; flex-direction:column; gap:2px; transition:border-color .16s, background .16s}
.dgc.dgc .opt:hover{border-color:var(--sea-300); background:var(--surface-2)}
.dgc.dgc .opt .t{font-size:13.5px; font-weight:600}
.dgc.dgc .opt[aria-pressed="true"]{border-color:var(--sea-700); box-shadow:inset 0 0 0 1px var(--sea-700); background:color-mix(in srgb, var(--sea-300) 16%, transparent)}
.dgc.dgc .opt.time{align-items:center; justify-content:center; text-align:center; padding:18px 6px; min-height:66px}
.dgc.dgc .opt.time .t{font-size:clamp(17px,2.6vw,20px); font-weight:800; white-space:nowrap}
.dgc.dgc .num{aspect-ratio:1/1; display:grid; place-items:center; border:1px solid var(--line); background:transparent; border-radius:14px; font-family:var(--fl); font-size:18px; transition:border-color .16s, background .16s}
.dgc.dgc .num:hover{border-color:var(--sea-300); background:var(--surface-2)}
.dgc.dgc .num[aria-pressed="true"]{border-color:var(--bar); background:var(--bar); color:#fff}
.dgc.dgc .num.wide{aspect-ratio:auto; grid-column:span 4; padding:12px; font-size:13.5px; font-family:var(--fb); font-weight:600}

/* --- 結果 --- */
.dgc.dgc .result{border:1px solid var(--line); border-radius:22px; overflow:hidden; background:var(--surface-2)}
.dgc.dgc .result-top{padding:8px 16px; background:var(--bar); color:#fff; font-size:11px; font-weight:700; letter-spacing:.1em}
.dgc.dgc .result-body{padding:18px 18px 16px; display:flex; flex-direction:column; gap:14px}
.dgc.dgc .big{display:flex; align-items:baseline; justify-content:center; gap:2px; color:var(--sea-700); font-family:var(--fl)}
.dgc.dgc .big b{font-size:52px; font-weight:600; line-height:1; font-variant-numeric:tabular-nums}
.dgc.dgc .big span{font-size:16px; font-weight:500; font-family:var(--fb); margin:0 6px 0 3px}
.dgc.dgc .breakdown{display:flex; justify-content:center; gap:18px; font-size:12px; color:var(--ink-3)}
.dgc.dgc .breakdown b{color:var(--ink-2); font-weight:700}
.dgc.dgc .verdict{align-self:center; border-radius:999px; padding:7px 18px; font-size:13px; font-weight:800; background:color-mix(in srgb, var(--sea-300) 26%, transparent); color:var(--sea-900)}
.dgc.dgc .verdict.warn{background:color-mix(in srgb, var(--gold) 22%, transparent); color:var(--accent-700)}
.dgc.dgc .pickhint{margin:2px 0 -6px; font-size:11px; color:var(--ink-3); letter-spacing:.02em}
.dgc.dgc .pickred{margin:-4px 0 0; font-size:13.5px; font-weight:700; line-height:1.6; color:#D93025}
.dgc.dgc .tlist{display:flex; flex-direction:column; gap:6px}
.dgc.dgc .trow{display:flex; align-items:center; gap:11px; width:100%; text-align:left; border:1px solid var(--line); background:transparent; border-radius:14px; padding:10px 13px; transition:border-color .16s, background .16s, opacity .16s}
.dgc.dgc .trow .chk{flex:none; width:19px; height:19px; border-radius:6px; border:1.5px solid var(--line); display:grid; place-items:center; font-size:11px; color:transparent}
.dgc.dgc .trow .nm{flex:1; font-size:14px; font-weight:700; line-height:1.5}
.dgc.dgc .trow .hr{flex:none; font-size:11.5px; color:var(--ink-3)}
.dgc.dgc .trow[aria-pressed="true"]{border-color:var(--sea-500); background:color-mix(in srgb, var(--sea-300) 15%, transparent)}
.dgc.dgc .trow[aria-pressed="true"] .chk{background:var(--bar); border-color:var(--bar); color:#fff}
.dgc.dgc .trow[aria-pressed="false"]{opacity:.5}
.dgc.dgc .trow[aria-pressed="false"] .nm{font-weight:500; text-decoration:line-through}
.dgc.dgc .disclaimer{margin:2px 0 0; padding-top:12px; border-top:1px dashed var(--line); font-size:11.5px; line-height:1.75; color:var(--ink-3)}
.dgc.dgc .disclaimer b{color:var(--ink-2); font-weight:700}
.dgc.dgc .alert{border:1px solid color-mix(in srgb, var(--gold) 45%, var(--line)); background:color-mix(in srgb, var(--gold) 10%, transparent); border-radius:16px; padding:12px 14px; font-size:12.5px; line-height:1.75; color:var(--ink-2)}
.dgc.dgc .alert b{color:var(--accent-700)}
.dgc.dgc .courses{display:flex; flex-direction:column; gap:9px}
.dgc.dgc .cgroup{display:none; flex-direction:column; gap:9px}
.dgc.dgc .cgroup.on{display:flex}
.dgc.dgc .course{border:1px solid var(--line); background:transparent; border-radius:18px; padding:15px 16px; text-align:left; display:flex; flex-direction:column; gap:7px; width:100%; transition:border-color .18s, background .18s, transform .18s}
.dgc.dgc .course:hover{border-color:var(--sea-300); transform:translateY(-2px); background:var(--surface-2)}
.dgc.dgc .course[aria-pressed="true"]{border-color:var(--sea-700); box-shadow:inset 0 0 0 1px var(--sea-700); background:color-mix(in srgb, var(--sea-300) 14%, transparent)}
.dgc.dgc .clist{display:flex; flex-direction:column; gap:3px}
.dgc.dgc .clist span{position:relative; padding-left:15px; font-size:14.5px; font-weight:700; line-height:1.5}
.dgc.dgc .clist span::before{content:""; position:absolute; left:2px; top:.62em; width:6px; height:6px; border-radius:50%; background:var(--sea-500); display:block}

/* --- 入力・確認・送信 --- */
/* 入力欄はひと目で「書く場所」とわかるようにする。
   自由入力欄も、メールフォームの各項目も同じ見た目にそろえています。 */
.dgc.dgc textarea,
.dgc.dgc .dgcf input[type="text"],
.dgc.dgc .dgcf input[type="email"],
.dgc.dgc .dgcf textarea{
  width:100%; display:block; margin:0; font-family:var(--fb); font-size:15px; font-weight:500;
  line-height:1.8; color:var(--ink); background:var(--surface);
  border:2px solid color-mix(in srgb, var(--sea-500) 34%, var(--line));
  border-radius:16px; padding:14px 16px;
  box-shadow:inset 0 2px 5px color-mix(in srgb, var(--sea-900) 5%, transparent);
  -webkit-appearance:none; appearance:none;
  transition:border-color .16s, box-shadow .16s, background .16s;
}
.dgc.dgc textarea{min-height:132px; resize:vertical}
.dgc.dgc textarea:hover,
.dgc.dgc .dgcf input[type="text"]:hover,
.dgc.dgc .dgcf input[type="email"]:hover,
.dgc.dgc .dgcf textarea:hover{border-color:var(--sea-300); background:var(--surface)}
.dgc.dgc textarea:focus,
.dgc.dgc .dgcf input[type="text"]:focus,
.dgc.dgc .dgcf input[type="email"]:focus,
.dgc.dgc .dgcf textarea:focus{
  outline:none; border-color:var(--sea-500);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--sea-300) 38%, transparent);
  background:var(--surface);
}
.dgc.dgc textarea::placeholder,
.dgc.dgc .dgcf input::placeholder,
.dgc.dgc .dgcf textarea::placeholder{color:var(--ink-3); opacity:1}
.dgc.dgc .chips{display:flex; flex-wrap:wrap; gap:6px}
.dgc.dgc .chip{border:1px dashed color-mix(in srgb, var(--sea-500) 40%, var(--line)); background:var(--surface); color:var(--ink-2); font-weight:600; border-radius:999px; padding:7px 13px; font-size:11.5px; transition:border-color .16s, color .16s, background .16s}
.dgc.dgc .chip:hover{border-style:solid; border-color:var(--sea-500); color:var(--sea-900); background:var(--foam)}
.dgc.dgc .summary{border:1px solid var(--line); border-radius:18px; overflow:hidden}
.dgc.dgc .srow{display:flex; align-items:flex-start; gap:12px; padding:11px 14px; border-bottom:1px solid var(--line-soft)}
.dgc.dgc .srow:last-child{border-bottom:0}
.dgc.dgc .srow.hi{background:color-mix(in srgb, var(--sea-300) 12%, transparent)}
.dgc.dgc .srow .lb{flex:none; width:82px; font-size:11px; color:var(--ink-3); padding-top:3px}
.dgc.dgc .srow .vl{flex:1; font-size:13.5px; font-weight:600; line-height:1.65; word-break:break-word; white-space:pre-wrap}
.dgc.dgc .srow .ed{flex:none; font-size:11px; color:var(--sea-700); background:transparent; border:0; text-decoration:underline}
.dgc.dgc .preview{border:1px solid var(--line); border-radius:16px; padding:13px 14px; font-size:12.5px; line-height:1.85; color:var(--ink-2); white-space:pre-wrap; max-height:170px; overflow-y:auto}
.dgc.dgc .preview.is-empty{color:var(--ink-3); border-style:dashed}
.dgc.dgc .toast{margin:0; font-size:12px; color:var(--sea-700); background:color-mix(in srgb, var(--sea-300) 20%, transparent); border-radius:10px; padding:9px 11px; line-height:1.6}
.dgc.dgc .toast[hidden]{display:none}
.dgc.dgc .btn-row{display:flex; gap:8px}
.dgc.dgc .btn-row .mini{flex:1; text-align:center}
.dgc.dgc #dgc-sendActions{display:flex; flex-direction:column; gap:11px}
.dgc.dgc .addr{display:flex; align-items:center; gap:9px; flex-wrap:wrap; background:var(--surface-2); border:1px solid var(--line); border-radius:10px; padding:9px 12px}
.dgc.dgc .addr code{font-family:var(--fl); font-size:13.5px; font-weight:600; word-break:break-all; color:var(--ink); background:none; padding:0}
.dgc.dgc .addr.big{flex-direction:column; align-items:flex-start; gap:7px; background:var(--foam); border-color:color-mix(in srgb, var(--sea-500) 35%, var(--line)); border-radius:18px; padding:14px 16px}
.dgc.dgc .addr.big .lb{font-size:11px; font-weight:700; color:var(--sea-700); letter-spacing:.06em}
.dgc.dgc .addr.big code{font-size:19px; line-height:1.35}
.dgc.dgc .fallback{border:1px dashed var(--line); border-radius:18px; padding:13px 14px; display:flex; flex-direction:column; gap:10px}
.dgc.dgc .fbh{margin:0; font-size:12px; font-weight:800; color:var(--ink-2)}
.dgc.dgc .fbtxt{margin:0; font-size:12px; line-height:1.75; color:var(--ink-3)}
.dgc.dgc .fbrow{display:flex; flex-wrap:wrap; gap:7px}
.dgc.dgc .qrimg{display:block; width:150px; height:150px; background:#fff; border-radius:6px}
/* --- PCでLINEを選んだときの「送信チケット」カード --- */
.dgc.dgc .qrpass{
  position:relative; background:var(--surface-2); border:1px solid var(--line);
  border-radius:22px; overflow:hidden; box-shadow:0 10px 26px color-mix(in srgb, var(--sea-900) 8%, transparent);
}
.dgc.dgc .qrpass-band{height:5px; background:linear-gradient(90deg, #06C755, var(--sea-500) 58%, var(--gold))}
.dgc.dgc .qrpass-head{padding:16px 18px 15px; display:flex; flex-direction:column; gap:10px}
.dgc.dgc .qrpass-brand{display:flex; align-items:center; gap:8px; margin:0; font-size:15px; font-weight:800; color:var(--ink); line-height:1.5}
.dgc.dgc .qrpass-brand .dot{flex:none; width:9px; height:9px; border-radius:50%; background:#06C755; font-style:normal}
.dgc.dgc .qrpass-chips{display:flex; flex-wrap:wrap; gap:6px}
.dgc.dgc .qrpass-chips span{
  font-size:14px; font-weight:700; line-height:1.55; padding:5px 12px; border-radius:999px;
  background:color-mix(in srgb, var(--sea-300) 26%, transparent); color:var(--sea-900);
}
.dgc.dgc .qrpass-price{display:flex; align-items:baseline; gap:8px; margin:2px 0 0; font-size:14px; font-weight:700; color:var(--ink-2); line-height:1.4}
.dgc.dgc .qrpass-price b{font-family:var(--fl); font-size:24px; font-weight:600; letter-spacing:.01em; color:var(--sea-700)}
.dgc.dgc .qrpass-cut{position:relative; height:0; border-top:2px dashed color-mix(in srgb, var(--sea-500) 26%, var(--line))}
.dgc.dgc .qrpass-cut::before, .dgc.dgc .qrpass-cut::after{
  content:""; position:absolute; top:-11px; width:20px; height:20px; border-radius:50%;
  background:var(--surface); border:1px solid var(--line);
}
.dgc.dgc .qrpass-cut::before{left:-11px}
.dgc.dgc .qrpass-cut::after{right:-11px}
.dgc.dgc .qrpass-qr{background:var(--surface); padding:20px 18px 18px; display:flex; flex-direction:column; align-items:center; gap:12px}
.dgc.dgc .qrpass-qr img{display:block; width:auto; height:auto; max-width:100%; image-rendering:pixelated; border-radius:4px}
.dgc.dgc .qrpass-cap{margin:0; font-size:14px; font-weight:700; color:var(--ink-2); text-align:center; line-height:1.6}
.dgc.dgc .qrsteps{display:flex; flex-direction:column; gap:10px; margin:4px 0 0; padding:0; list-style:none}
.dgc.dgc .qrsteps li{display:flex; align-items:flex-start; gap:11px; font-size:14px; line-height:1.7; color:var(--ink-2)}
.dgc.dgc .qrsteps .no{
  flex:none; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; margin-top:1px;
  font-family:var(--fl); font-size:14px; font-weight:600; font-style:normal; color:#fff; background:var(--sea-700);
}
.dgc.dgc .qrsteps b{color:var(--ink); font-weight:800}
.dgc.dgc .qrsteps .qrwarn{font-style:normal; font-size:14px; color:var(--ink-3)}
.dgc.dgc .qrnote{margin:2px 0 0; font-size:14px; line-height:1.75; color:var(--ink-3)}

/* --- メールフォーム（Contact Form 7 を送信画面の中で使う） ---
   ページ下部にある置き場（.dgc-cf7-host）は常に非表示。
   メールを選んだときだけ、フォーム本体をこの中へ移動させます。 */
.dgc-cf7-host{display:none !important}
.dgc.dgc .preview[hidden]{display:none}
.dgc.dgc .cf7slot{display:block}
.dgc.dgc .cf7slot .wpcf7, .dgc.dgc .cf7slot form{margin:0; padding:0; border:0; background:none}
.dgc.dgc .cf7slot .screen-reader-response{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.dgc.dgc .dgcf{display:flex; flex-direction:column; gap:15px}
.dgc.dgc .dgcf p{margin:0}
.dgc.dgc .dgcf-row{display:flex; flex-direction:column; gap:7px}
.dgc.dgc .dgcf-lb{display:flex; align-items:center; gap:8px; font-size:15px; font-weight:800; color:var(--ink-2)}
.dgc.dgc .dgcf-req{flex:none; font-size:14px; font-weight:800; line-height:1.45; color:#fff; background:var(--sea-700); border-radius:5px; padding:1px 8px}
.dgc.dgc .dgcf textarea{min-height:200px; resize:vertical; white-space:pre-wrap}
.dgc.dgc .dgcf-note{font-size:14px; line-height:1.85; color:var(--ink-2)}
.dgc.dgc .dgcf-note a{color:var(--sea-700); font-weight:700; text-decoration:underline; text-underline-offset:2px}
.dgc.dgc .dgcf-note a:hover{color:var(--sea-900)}
.dgc.dgc .dgcf input[type="submit"]{
  display:block; width:100%; font-family:var(--fb); font-size:18px; font-weight:800; letter-spacing:.02em;
  line-height:1.4; color:#fff; background:var(--bar); border:0; border-radius:999px; padding:15px 20px;
  margin:0; cursor:pointer; -webkit-appearance:none; appearance:none;
  box-shadow:0 6px 18px color-mix(in srgb, var(--sea-700) 26%, transparent); transition:background .18s, transform .18s;
}
.dgc.dgc .dgcf input[type="submit"]:hover{background:var(--sea-900); transform:translateY(-1px)}
.dgc.dgc .dgcf input[type="submit"]:disabled{opacity:.55; cursor:default; transform:none}
.dgc.dgc .cf7slot .wpcf7-form-control-wrap{display:block}
.dgc.dgc .cf7slot .wpcf7-not-valid-tip{font-size:14px; font-weight:700; line-height:1.6; color:#D93025; margin-top:5px}
.dgc.dgc .cf7slot form.init .wpcf7-response-output,
.dgc.dgc .cf7slot .wpcf7-response-output:empty{display:none}
.dgc.dgc .cf7slot .wpcf7-response-output{
  margin:15px 0 0; padding:12px 15px; border:1px solid var(--line); border-radius:13px;
  font-size:15px; font-weight:700; line-height:1.75; color:var(--ink); background:var(--surface-2);
}
.dgc.dgc .cf7slot form.sent .wpcf7-response-output{border-color:#1E8E3E; background:#F1F8F3; color:#146C2E}
.dgc.dgc .cf7slot form.invalid .wpcf7-response-output,
.dgc.dgc .cf7slot form.failed .wpcf7-response-output,
.dgc.dgc .cf7slot form.aborted .wpcf7-response-output{border-color:#D93025; background:#FDF3F2; color:#B3261E}
.dgc.dgc .cf7slot .wpcf7-spinner{margin:0 0 0 10px; vertical-align:middle}

/* --- 一覧（SEO用・常時表示） --- */
.dgc.dgc .ref{margin-top:44px; padding-top:26px; border-top:1px solid var(--line)}
.dgc.dgc .ref h2{font-family:var(--fd); font-size:21px; font-weight:700; line-height:1.5; margin:0 0 6px}
.dgc.dgc .ref p.lead{margin:0 0 18px; font-size:13px; color:var(--ink-3); line-height:1.9}
.dgc.dgc .ref h3{font-size:14px; font-weight:800; margin:26px 0 10px}
.dgc.dgc .tablewrap{overflow-x:auto; border:1px solid var(--line); border-radius:16px}
.dgc.dgc table.ref-t{border-collapse:collapse; width:100%; font-size:13px; min-width:420px}
.dgc.dgc table.ref-t th, .dgc.dgc table.ref-t td{padding:10px 13px; text-align:left; border-bottom:1px solid var(--line-soft)}
.dgc.dgc table.ref-t thead th{background:var(--surface-2); font-size:11px; font-weight:800; color:var(--ink-2); white-space:nowrap}
.dgc.dgc table.ref-t tbody tr:last-child td{border-bottom:0}
.dgc.dgc table.ref-t td.n{font-family:var(--fl); font-variant-numeric:tabular-nums; white-space:nowrap}
.dgc.dgc .ref-list{display:grid; grid-template-columns:repeat(2,1fr); gap:10px}
.dgc.dgc .ref-card{border:1px solid var(--line); border-radius:14px; padding:12px 14px}
.dgc.dgc .ref-card b{display:block; font-size:12.5px; font-weight:800; color:var(--sea-700); margin-bottom:5px}
.dgc.dgc .ref-card ul li{font-size:13px; line-height:1.85; color:var(--ink-2); padding-left:13px; position:relative}
.dgc.dgc .ref-card ul li::marker{content:none}
.dgc.dgc .ref-card ul li span.dot{position:absolute; left:0; top:.68em; width:5px; height:5px; border-radius:50%; background:var(--sea-300); display:block}

/* --- 幅に応じた折り返し（テーマの本文幅に自動対応） --- */
@container dgc (max-width:700px){
  .dgc.dgc .axis-row{grid-template-columns:1fr}
  .dgc.dgc .grid-2{grid-template-columns:1fr}
  .dgc.dgc .grid-3{grid-template-columns:repeat(2,1fr)}
  .dgc.dgc .ref-list{grid-template-columns:1fr}
}
@container dgc (max-width:470px){
  .dgc.dgc .grid-4{grid-template-columns:repeat(3,1fr)}
  .dgc.dgc .num.wide{grid-column:span 3}
}

/* --- ページが暗い配色のときに使う値 --- */
.dgc.dgc-dark{
  --sea-500:#00C4DC; --sea-300:#7FDCE8; --sea-700:#4FD0E2; --sea-900:#9BE7F2;
  --gold:#E3AA00; --accent-700:#E9B723;
  --ink:#E4F3F5; --ink-2:#B2CACD; --ink-3:#7E9AA0;
  --line:#1F3D43; --line-soft:#183036;
  --surface:#0D262A; --surface-2:#112E33; --foam:#0A2A30;
}

/* --- 結果文（時間ルート） --- */
.dgc.dgc .result-lead{margin:-8px 0 0; font-size:16px; font-weight:800; line-height:1.6; color:var(--sea-700)}
.dgc.dgc .result-lead em{font-style:normal; font-size:22px; color:var(--sea-900); font-family:var(--fl); font-weight:600; margin:0 2px}

/* --- コース選択後の料金問い合わせシート --- */
.dgc.dgc .csheet{position:fixed; inset:0; z-index:9999; background:rgba(0,40,48,.45); backdrop-filter:blur(2px); display:grid; place-items:end center; animation:dgcFade .2s ease both}
.dgc.dgc .csheet[hidden]{display:none}
@keyframes dgcFade{from{opacity:0} to{opacity:1}}
.dgc.dgc .cs{
  position:relative; width:100%; max-width:560px; background:var(--surface); color:var(--ink);
  border-radius:24px 24px 0 0; box-shadow:0 -20px 60px rgba(8,42,45,.3); overflow:hidden;
  max-height:calc(100vh - 24px); display:flex; flex-direction:column;
  animation:dgcCsUp .32s cubic-bezier(.2,.9,.3,1) both;
}
@keyframes dgcCsUp{from{transform:translateY(28px); opacity:0} to{transform:none; opacity:1}}
@media (min-width:769px){
  .dgc.dgc .csheet{place-items:center; padding:22px}
  .dgc.dgc .cs{border-radius:24px; box-shadow:0 26px 74px rgba(8,42,45,.3)}
}
.dgc.dgc .cs-band{height:6px; background:linear-gradient(90deg, var(--sea-500), var(--gold))}
.dgc.dgc .cs-close{
  position:absolute; top:10px; right:10px; z-index:3;
  width:46px; height:46px; border-radius:50%; border:1px solid var(--line);
  background:var(--surface); color:var(--ink-2); font-size:26px; line-height:1;
  display:grid; place-items:center; padding:0; cursor:pointer;
  box-shadow:0 2px 10px rgba(8,42,45,.14);
  transition:background .16s, border-color .16s, color .16s, transform .16s;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
}
/* 見た目より広い範囲で反応させる（指やマウスが少しずれても押せるように） */
.dgc.dgc .cs-close::after{content:""; position:absolute; top:-8px; right:-8px; bottom:-8px; left:-8px; border-radius:50%}
.dgc.dgc .cs-close:hover{background:var(--foam); border-color:var(--sea-500); color:var(--sea-900)}
.dgc.dgc .cs-close:active{transform:scale(.92)}
.dgc.dgc .cs-close:focus-visible{outline:2px solid var(--sea-500); outline-offset:2px}
.dgc.dgc .cs-body{padding:20px 20px 22px; display:flex; flex-direction:column; gap:12px; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain}
.dgc.dgc .cs-picked{display:flex; flex-wrap:wrap; gap:6px; padding-right:36px}
.dgc.dgc .cs-picked span{border-radius:999px; padding:5px 11px; font-size:12px; font-weight:700; background:color-mix(in srgb, var(--sea-300) 22%, transparent); color:var(--sea-900)}
.dgc.dgc .cs-title{margin:2px 0 0; font-size:19px; font-weight:800; line-height:1.45}
.dgc.dgc .cs-text{margin:0; font-size:13px; color:var(--ink-2); line-height:1.75}
.dgc.dgc .cs .cs-cta{margin-top:4px}
.dgc.dgc .cs .cs-mail{width:100%; padding:13px 17px; font-size:14px; text-align:center}
.dgc.dgc .cs .textlink{align-self:center}


/* --- コース選択後の「お見積りへ進みますか？」カード --- */
.dgc.dgc .qa-picked{display:flex; flex-wrap:wrap; gap:6px; padding-right:54px; margin:0}
.dgc.dgc .qa-picked span{border-radius:999px; padding:6px 12px; font-size:14px; font-weight:700; background:color-mix(in srgb, var(--sea-300) 22%, transparent); color:var(--sea-900)}
.dgc.dgc .qa-title{margin:4px 0 0; padding:0; border:0; font-size:19px; font-weight:800; line-height:1.55; text-wrap:balance; color:var(--ink)}
.dgc.dgc .qa-title em{font-style:normal; color:var(--sea-700)}
.dgc.dgc .qa-row{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; margin-top:6px}
.dgc.dgc .qa-row .qa-back{
  border:2px solid var(--line); background:var(--surface); color:var(--ink-2); border-radius:999px;
  padding:14px 12px; font-size:14px; font-weight:700; line-height:1.4; text-align:center; margin:0;
  transition:border-color .18s, color .18s, background .18s;
}
.dgc.dgc .qa-row .qa-back:hover{border-color:var(--sea-500); color:var(--sea-900); background:var(--foam)}
.dgc.dgc .qa-row .qa-go{width:auto; margin:0; padding:14px 12px; font-size:16px; letter-spacing:.04em; line-height:1.4}

/* --- 確認画面の枠線ボタン --- */
.dgc.dgc .cta.outline-line{background:var(--surface); color:#05873D; border:2px solid #06C755; box-shadow:none}
.dgc.dgc .cta.outline-line:hover{background:#06C755; color:#fff; border-color:#06C755}
.dgc.dgc .cta.outline-main{background:var(--surface); color:var(--sea-700); border:2px solid var(--sea-500); box-shadow:none}
.dgc.dgc .cta.outline-main:hover{background:var(--sea-500); color:#fff; border-color:var(--sea-500)}
.dgc.dgc .cta.outline-line .arw, .dgc.dgc .cta.outline-main .arw{opacity:1}
.dgc.dgc .cta.outline-line + .cta, .dgc.dgc .cta.outline-main + .cta{margin-top:10px}
.dgc.dgc #dgc-sendHost .step.on{display:flex}
.dgc.dgc #dgc-sendHost .step .q{padding-right:54px}

/* --- 問い合わせボタンの対（LINE＝緑枠、メール＝メイン枠。ホバーで塗り） --- */
.dgc.dgc .ask-row .mini{flex:1 1 0; min-width:0; text-align:center; padding:12px 14px; font-size:13.5px; font-weight:700; border-width:2px}
.dgc.dgc .mini.line{background:var(--surface); border-color:#06C755; color:#05873D}
.dgc.dgc .mini.line:hover{background:#06C755; border-color:#06C755; color:#fff}
.dgc.dgc .mini.mail{background:var(--surface); border-color:var(--sea-500); color:var(--sea-700)}
.dgc.dgc .mini.mail:hover{background:var(--sea-500); border-color:var(--sea-500); color:#fff}

/* --- 見積もりフェーズ（人数・希望・確認）の見出しと戻るボタン --- */
.dgc.dgc .quote-head{display:flex; flex-direction:column; gap:10px; margin:0 0 22px}
.dgc.dgc .quote-head[hidden], .dgc.dgc .quote-foot[hidden], .dgc.dgc .quote-head p[hidden]{display:none}
.dgc.dgc .quote-head h2{font-family:var(--fd); font-weight:700; font-size:clamp(20px,3.1vw,27px); line-height:1.5; margin:10px 0 0}
.dgc.dgc .quote-head p{margin:0; font-size:14px; color:var(--ink-2); line-height:1.8}
.dgc.dgc .quote-head .qnote{font-size:12.5px; color:var(--ink-3)}
.dgc.dgc .quote-foot{display:flex; justify-content:center; margin-top:22px}
.dgc.dgc .backtop{
  align-self:flex-start; display:inline-flex; align-items:center; gap:9px;
  border:1.5px solid var(--line); background:var(--surface); color:var(--ink-2);
  border-radius:999px; padding:11px 22px 11px 18px; font-size:14px; font-weight:700;
  transition:border-color .18s, color .18s, background .18s, transform .18s;
}
.dgc.dgc .backtop::before{content:"‹"; font-family:var(--fl); font-size:18px; font-weight:400; color:var(--sea-700); line-height:1}
.dgc.dgc .backtop:hover{border-color:var(--sea-500); color:var(--sea-900); background:var(--foam); transform:translateX(-2px)}

/* ---------- パスポートのスタンプ ----------
   進むごとに小さなスタンプが押され、確認画面でベトナムの入国スタンプ風の大きなスタンプが右上に押されます */
.dgc.dgc .stamps{display:flex; gap:5px; flex:none; align-items:center; margin:0}
.dgc.dgc .pstamp{
  --ink:var(--sea-500); --tilt:-10deg;
  width:27px; height:27px; border-radius:50%; border:2px solid var(--ink); color:var(--ink);
  display:grid; place-items:center; position:relative; box-sizing:border-box; margin:0; padding:0;
  font-family:var(--fl); font-size:10.5px; font-weight:700; line-height:1; font-style:normal;
  opacity:.82; transform:rotate(var(--tilt)); mix-blend-mode:multiply; filter:url(#dgcInk);
}
.dgc.dgc .pstamp::after{content:""; position:absolute; inset:2px; border-radius:50%; border:1px solid var(--ink); opacity:.65}
.dgc.dgc .pstamp.empty{border-style:dashed; border-width:1.5px; opacity:.22; filter:none; mix-blend-mode:normal}
.dgc.dgc .pstamp.empty::after{display:none}
.dgc.dgc .pstamp.hit{animation:dgcStampIn .5s cubic-bezier(.2,.9,.3,1) both}
@keyframes dgcStampIn{
  0%  {opacity:0;   transform:rotate(calc(var(--tilt) - 10deg)) scale(2.2)}
  55% {opacity:.82; transform:rotate(var(--tilt)) scale(.9)}
  78% {transform:rotate(var(--tilt)) scale(1.07)}
  100%{opacity:.82; transform:rotate(var(--tilt)) scale(1)}
}
.dgc.dgc .visa{
  --ink:var(--gold);
  position:absolute; right:4px; top:4px; width:178px; box-sizing:border-box; margin:0;
  color:var(--ink); border:2.5px solid var(--ink); border-radius:9px; padding:7px 10px 6px;
  text-align:center; transform:rotate(-7deg); opacity:.92; mix-blend-mode:multiply; filter:url(#dgcInk);
  font-family:var(--fb); font-weight:900; letter-spacing:.06em; line-height:1.25;
}
.dgc.dgc .visa::before{content:""; position:absolute; inset:3px; border:1px solid var(--ink); border-radius:6px; opacity:.6}
.dgc.dgc .visa span{display:block; position:relative; margin:0}
.dgc.dgc .visa .v1{font-size:9.5px; font-weight:900; letter-spacing:.14em}
.dgc.dgc .visa .v2{font-size:20px; font-weight:900; letter-spacing:.2em; text-indent:.2em; margin:3px 0 2px}
.dgc.dgc .visa .v3{font-size:13.5px; font-weight:900; letter-spacing:.1em; font-variant-numeric:tabular-nums}
.dgc.dgc .visa .v4{font-size:9.5px; font-weight:900; letter-spacing:.3em; text-indent:.3em; margin-top:3px}
.dgc.dgc .visa.hit{animation:dgcVisaIn .6s cubic-bezier(.2,.9,.3,1) .32s both}
@keyframes dgcVisaIn{
  0%  {opacity:0;   transform:rotate(-18deg) scale(2.4)}
  55% {opacity:.92; transform:rotate(-7deg) scale(.93)}
  76% {transform:rotate(-7deg) scale(1.05)}
  100%{opacity:.92; transform:rotate(-7deg) scale(1)}
}
/* 暗い背景では「乗算」だと消えるので、通常の重ね方にしてインクを明るめに */
.dgc.dgc-dark .pstamp, .dgc.dgc-dark .visa{mix-blend-mode:normal; opacity:.95}
@media (max-width:420px){ .dgc.dgc .stamps{gap:4px} .dgc.dgc .pstamp{width:24px; height:24px; font-size:9.5px} .dgc.dgc .visa{width:162px} .dgc.dgc .visa-slot{height:92px} }
@media (prefers-reduced-motion: reduce){ .dgc.dgc .pstamp.hit, .dgc.dgc .visa.hit{animation:none} }

/* ---------- 文字サイズの最低ライン ----------
   補足・注記・ラベル・本文：14px以上 ／ 選んだ値・選択肢：15px以上 ／ ボタン：18px（据え置き）
   ※パスポートのスタンプ（飾り）は対象外。ここより上で決めた小さいサイズを、この段でまとめて引き上げています */
.dgc.dgc .note, .dgc.dgc .chip, .dgc.dgc .opt .d, .dgc.dgc .breakdown, .dgc.dgc .disclaimer, .dgc.dgc .pickhint, .dgc.dgc .foot-note, .dgc.dgc .sheet-head small,
.dgc.dgc .toast, .dgc.dgc .live, .dgc.dgc .trow .hr, .dgc.dgc .srow .lb, .dgc.dgc .srow .ed, .dgc.dgc .steps small, .dgc.dgc .picker-lead span,
.dgc.dgc .cs-picked span, .dgc.dgc .addr.big .lb, .dgc.dgc .result-top{font-size:14px}
.dgc.dgc .srow .lb{width:106px; padding-top:3px}
.dgc.dgc .sub, .dgc.dgc .axis .d, .dgc.dgc .ask p, .dgc.dgc .fbtxt, .dgc.dgc .preview, .dgc.dgc .alert, .dgc.dgc .cs-text, .dgc.dgc .course-note, .dgc.dgc .course-lead,
.dgc.dgc .fbh, .dgc.dgc .steps b, .dgc.dgc .axis .promise, .dgc.dgc #axisRowModal .axis .promise,
.dgc.dgc .mini, .dgc.dgc .ask-row .mini, .dgc.dgc .textlink, .dgc.dgc .verdict, .dgc.dgc .quote-head .qnote{font-size:14px}
.dgc.dgc .ask h4, .dgc.dgc .ask h3, .dgc.dgc .sheet-head .ttl b{font-size:15px}
.dgc.dgc .srow .vl, .dgc.dgc .opt .t, .dgc.dgc .num.wide, .dgc.dgc .trow .nm, .dgc.dgc .clist span, .dgc.dgc .pickred, .dgc.dgc .addr code{font-size:15px}
/* 狭い画面では、確認表のラベルを値の上に置いて値の幅を確保する */
@container dgc (max-width:520px){
  .dgc.dgc .srow{flex-wrap:wrap; gap:2px 12px}
  .dgc.dgc .srow .lb{width:100%; padding-top:0}
  .dgc.dgc .srow .vl{flex:1 1 0; min-width:0}
}
.dgc.dgc .ref p.lead, .dgc.dgc table.ref-t, .dgc.dgc .ref-card b, .dgc.dgc .ref-card ul li{font-size:14px}
.dgc.dgc table.ref-t thead th{font-size:14px}

/* ---------- ボタンの文字を大きく（ボタンの大きさは据え置き：行間と余白で吸収） ---------- */
.dgc.dgc .cta{font-size:21px; line-height:1.5}
.dgc.dgc .cta .arw{font-size:23px}
.dgc.dgc .backtop{font-size:16px; line-height:1.5}
.dgc.dgc .backtop.bottom{font-size:17px; line-height:1.5}
.dgc.dgc .backtop::before{font-size:21px}
.dgc.dgc .mini, .dgc.dgc .ask-row .mini{font-size:16px; line-height:1.5}
.dgc.dgc .textlink{font-size:16px}
.dgc.dgc .qa-row .qa-back{font-size:16px; line-height:1.25}
.dgc.dgc .qa-row .qa-go{font-size:18px; line-height:1.25}
.dgc.dgc .icon-btn{font-size:17px}
.dgc.dgc .srow .ed{font-size:15px}
.dgc.dgc .chip{font-size:15px; padding:6px 13px}
.dgc.dgc .pickhint.strong{margin:0; font-size:16px; font-weight:800; color:var(--ink); letter-spacing:.02em; line-height:1.6}

/* ---------- 画面幅が狭いときは、ボタンの文字を一段小さく（はみ出し・2行化を防ぐ） ---------- */
@container dgc (max-width:470px){
  .dgc.dgc .cta{font-size:18px}
  .dgc.dgc .cta .arw{font-size:20px}
  .dgc.dgc .backtop{font-size:15px}
  .dgc.dgc .backtop.bottom{font-size:16px}
  .dgc.dgc .mini, .dgc.dgc .ask-row .mini{font-size:15px}
  .dgc.dgc .qa-row .qa-back{font-size:14px; padding:14px 8px}
  .dgc.dgc .qa-row .qa-go{font-size:16px; padding:14px 8px; gap:6px}
  .dgc.dgc .qa-row .qa-go .arw{font-size:17px}
}
@container dgc (max-width:380px){
  .dgc.dgc .cta{font-size:16px}
  .dgc.dgc .cta .arw{font-size:18px}
  .dgc.dgc .qa-row .qa-back{font-size:13px}
  .dgc.dgc .qa-row .qa-go{font-size:15px}
}

/* --- 行きたい場所の結果ページ：ページ内カード（コース選択後のカードと同じ見た目） --- */
.dgc.dgc .qa-card{position:relative; border:1px solid var(--line); border-radius:20px; background:var(--surface); box-shadow:var(--shadow-s); overflow:hidden; padding:20px 18px 18px; display:flex; flex-direction:column; gap:12px; margin:0}
.dgc.dgc .qa-card::before{content:""; position:absolute; left:0; right:0; top:0; height:6px; background:linear-gradient(90deg, var(--sea-500), var(--gold))}
.dgc.dgc .qa-card .qa-picked{padding-right:0}
.dgc.dgc .alert.short{margin:-4px 0 0; padding:8px 12px; font-size:14px; line-height:1.6; text-align:center; align-self:stretch}
/* ページ内カードは入れ子が深く幅が足りないので、狭い画面では「人数の選択へ進む」を上、「場所を選び直す」を下に縦並びにする */
@container dgc (max-width:520px){
  .dgc.dgc .qa-card{padding:18px 14px 16px}
  .dgc.dgc .qa-card .qa-row{grid-template-columns:minmax(0,1fr)}
  .dgc.dgc .qa-card .qa-row .qa-go{order:-1; font-size:18px; padding:15px 12px}
  .dgc.dgc .qa-card .qa-row .qa-back{font-size:15px; padding:12px}
}
.dgc.dgc #dgc-quoteH2[hidden]{display:none}

/* ---------- 確認画面：概算料金の目安（スタンプの左） ---------- */
.dgc.dgc .visa-slot{position:relative; height:auto; min-height:98px; margin:-6px 0 -2px; padding:4px 196px 6px 2px; display:flex; flex-direction:column; justify-content:center}
.dgc.dgc .est{display:flex; flex-direction:column; gap:1px; margin:0}
.dgc.dgc .est-lb{font-size:14px; font-weight:700; color:var(--ink-3); letter-spacing:.02em}
.dgc.dgc .est-v{font-family:var(--fl); color:var(--sea-700); line-height:1.15; letter-spacing:-.01em; margin:0}
.dgc.dgc .est-v b{font-size:38px; font-weight:600; font-variant-numeric:tabular-nums}
.dgc.dgc .est-v span{font-family:var(--fb); font-size:18px; font-weight:800; margin-left:2px}
.dgc.dgc .est-v.ask{font-family:var(--fb); font-size:22px; font-weight:800}
.dgc.dgc .est-note{font-size:14px; color:var(--ink-3); line-height:1.6; margin:2px 0 0}
.dgc.dgc .est-note b{color:var(--sea-900); font-weight:800}
@container dgc (max-width:520px){ .dgc.dgc .visa-slot{padding:100px 0 4px} .dgc.dgc .est-v b{font-size:34px} }

.dgc.dgc .est-v .ppl{font-family:var(--fb); font-size:18px; font-weight:800; color:var(--ink); margin-right:8px}
.dgc.dgc .est-sub{margin:0; font-size:15px; color:var(--ink-2); line-height:1.6}
.dgc.dgc .est-sub b{color:var(--sea-900); font-weight:800}
.dgc.dgc .est-guide{margin:6px 0 0; font-size:15px; color:var(--ink-2); line-height:1.6}
.dgc.dgc .est-guide b{color:var(--sea-900); font-weight:800}
.dgc.dgc .est-split{margin-top:8px; padding-top:8px; border-top:1px dashed var(--line); display:flex; flex-direction:column; gap:3px}
.dgc.dgc .est-split p{margin:0; font-size:15px; color:var(--ink-2); line-height:1.6}
.dgc.dgc .est-split p b{color:var(--sea-900); font-weight:800; margin-left:6px}
.dgc.dgc .est-split .day{display:inline-block; font-size:13px; font-weight:800; color:var(--sea-700); background:color-mix(in srgb, var(--sea-300) 22%, transparent); border-radius:6px; padding:1px 7px; margin-right:7px}

/* --- 確認画面の見出し（目立たせる） --- */
.dgc.dgc .ask .ask-hero{margin:0 0 4px; font-size:21px; font-weight:900; line-height:1.5; color:var(--sea-700); letter-spacing:.01em}
.dgc.dgc .ask .ask-hero em{font-style:normal; color:var(--sea-900); background:linear-gradient(transparent 58%, color-mix(in srgb, var(--gold) 45%, transparent) 58%); padding:0 2px}
@container dgc (max-width:470px){ .dgc.dgc .ask .ask-hero{font-size:19px} }
/* 人数画面：「9名以上」は数字と同じ大きさ、下に大型バスの案内 */
.dgc.dgc .num.wide{font-size:18px; font-weight:700; padding:14px 12px; letter-spacing:.04em}
.dgc.dgc .bus-note{margin:-6px 0 0; font-size:15px; font-weight:700; color:var(--ink-2); line-height:1.6}
.dgc.dgc .qa-picked:empty{display:none}

/* --- 1画面目をトップページの入口ブロックと同じ見た目にする（2026-09-22） ---
   幅はこの提案システムに合わせ、画面の縦の間隔はブロック側の余白に任せる */
.dgc.dgc .step.ds-course{max-width:none; margin:0; gap:0}
.dgc.dgc .step.ds-course .lead{text-align:center}
.dgc.dgc .step.ds-course .ask{margin-top:30px}

/* 2026-10-08 人数の選択：PC で正方形が大きすぎたので、高さを抑えて数字を大きく（2行のまま）。
   「前へもどる」の上に余白 */
.dgc.dgc .num{aspect-ratio:auto; min-height:84px; font-size:34px; font-weight:800; line-height:1; color:var(--ink)}
.dgc.dgc .num[aria-pressed="true"]{color:#fff}
.dgc.dgc .num.wide{min-height:0; font-size:18px}
.dgc.dgc .quote-head{padding-top:28px}
/* 人数・ご希望の画面で「前へもどる」の下に出ていた説明文（2行）は出さない（案2。2026-10-08） */
.dgc.dgc #dgc-quoteLead, .dgc.dgc #dgc-quoteNote{display:none}
.dgc.dgc #dgc-peopleGrid{grid-template-columns:repeat(4,minmax(0,1fr))}
.dgc.dgc #dgc-peopleGrid .num.wide{grid-column:1 / -1}
@media (max-width:640px){
  .dgc.dgc .num{min-height:64px; font-size:28px}
  .dgc.dgc .quote-head{padding-top:18px}
}

/* 2026-10-08 診断のいちばん下の問い合わせの部分（.ask）の文字を、本文（PC 17px・スマホ 16px）に近い大きさに */
#dgc-root.dgc .ask h3{font-size:17px; line-height:1.7}
#dgc-root.dgc .ask > p{font-size:16px; line-height:1.75}
#dgc-root.dgc .ask .ask-row .mini{font-size:17px}
#dgc-root.dgc .ask .note{font-size:15px; line-height:1.75}
@media (max-width:640px){
  #dgc-root.dgc .ask h3{font-size:16px}
  #dgc-root.dgc .ask > p{font-size:15px}
  #dgc-root.dgc .ask .ask-row .mini{font-size:16px}
  #dgc-root.dgc .ask .note{font-size:14px}
}

/* 2026-10-09 ホバーしていないときの波の上端（ライン）を、タイトルと説明文の真ん中に（案B。トップページの course-launcher.css と同じ）。
   説明文を少し下げ、波の位置はタイトルの文字サイズから計算する */
.dgc.dgc .axis .d{margin-top:12px}
.dgc.dgc .wave{top:calc(24px + clamp(26px,3.4vw,32px) * 1.25 + 6px); height:auto; transition:top .55s cubic-bezier(.2,.85,.3,1), opacity .35s}
.dgc.dgc .axis:hover .wave{top:max(0px, calc(100% - 230px)); height:auto}

/* 2026-10-12 行きたい場所の「その他（ベトナム中部以外など）」：横いっぱいの選択肢、入力欄、問い合わせのボタン（finder.js） */
.dgc.dgc .opt.other{grid-column:1 / -1; border-style:dashed}
.dgc.dgc .opt.other .d{font-size:12.5px; color:var(--ink-2); font-weight:500}
.dgc.dgc .opt.other[aria-pressed="true"]{border-style:solid}
.dgc.dgc .dgc-other{margin-top:12px; display:flex; flex-direction:column; gap:8px}
.dgc.dgc .dgc-other[hidden], .dgc.dgc .oth-ask[hidden], .dgc.dgc .cta[hidden]{display:none!important}
.dgc.dgc .oth-lb{font-weight:800; font-size:14.5px; color:var(--ink)}
.dgc.dgc #dgc-otherTxt{min-height:84px}
.dgc.dgc .oth-ask{margin-top:6px; display:flex; flex-direction:column}
.dgc.dgc .oth-h{margin:0 0 10px; font-weight:800; font-size:14px; color:var(--sea-900)}

/* 2026-10-12 送信シートの見出しが入らないとき（スマホの「このままメールでお送りいただけます」）は、2行の長さをそろえて折り返す（finder.js の fitButtons） */
.dgc.dgc #dgc-sendTitle{text-wrap:balance}