/* ============================================================
   Duplicate-3D — 文化財スモールDX 導入診断
   renewal.css のトークン(--bg / --accent 等)を継承して使用
   ============================================================ */

.shindan-page{min-height:100vh}
.shindan-page section{padding:0}          /* renewalのsection大余白を打ち消す */

#shindan-app{
  min-height:100svh;
  display:flex;align-items:center;justify-content:center;
  padding:calc(72px + 4vh) var(--pad) clamp(48px,8vh,96px);
}

/* 画面の出し分け: activeだけ表示 */
.sh-screen{display:none;width:100%}
.sh-screen.is-active{display:block;animation:sh-in .5s cubic-bezier(.22,.61,.36,1)}
@keyframes sh-in{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

.sh-inner{max-width:820px;margin:0 auto}

/* ===== INTRO(ワイド編集レイアウト) ===== */
.sh-intro .sh-inner{max-width:none}          /* イントロは狭い列を使わない */
.sh-intro-wrap{max-width:1200px;width:100%;margin:0 auto}
.sh-intro-stamp{display:flex;justify-content:space-between;gap:16px;margin-bottom:clamp(28px,6vh,64px);flex-wrap:wrap}

/* 左=テキスト / 右=CTAパネル。空いていた右側を使い、視線導線を強くする */
.sh-intro-grid{
  display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,.92fr);
  gap:clamp(32px,4.5vw,64px);align-items:center;
}

.sh-eyebrow{color:var(--accent);letter-spacing:.24em;margin-bottom:24px}

/* 日本語の大見出し(明朝)。数字も同じ書体で揃うため「3分」が浮かない */
.sh-hero-jp-big{
  font-family:'Shippori Mincho B1','Hiragino Mincho ProN',serif;font-weight:600;
  /* 上限は左カラム実幅(約704px)に合わせる。9.9emのnowrap行が溢れてCTAに被るのを防ぐ */
  font-size:clamp(40px,5.4vw,68px);line-height:1.26;letter-spacing:.03em;color:var(--cream);
  margin-bottom:clamp(22px,3.5vh,36px);
}
.sh-hero-jp-big .accent{color:var(--accent)}

.sh-hero-jp{
  font-family:var(--font-jp);font-weight:500;
  font-size:clamp(16px,1.7vw,22px);line-height:1.8;letter-spacing:.02em;color:var(--cream);
  margin-bottom:18px;max-width:680px;
}
.sh-hero-jp b{color:var(--accent);font-weight:700}
.sh-hero-sub{font-size:15px;line-height:2.2;color:var(--cream-dim);margin-bottom:clamp(30px,5vh,44px)}

/* CTA パネル(右カラム)。空いた右側を使い、ボタンを大きく見せる */
.sh-cta-col{display:flex;justify-content:center}
.sh-cta-panel{
  width:100%;display:flex;flex-direction:column;gap:20px;align-items:stretch;
  padding:clamp(26px,2.6vw,38px);
  border:1px solid var(--rule-strong);border-radius:20px;
  background:color-mix(in srgb,var(--bg-panel) 55%,transparent);
}
.sh-cta-kicker{color:var(--accent);letter-spacing:.16em;text-align:center;margin:0}
/* 発光する大型ボタンで一目でわかるように(視認性の指摘対応) */
.sh-start{
  position:relative;overflow:hidden;
  display:flex;width:100%;align-items:center;justify-content:center;gap:16px;
  background:var(--accent);color:var(--accent-ink);
  font-family:var(--font-jp);font-weight:700;font-size:clamp(17px,1.7vw,21px);letter-spacing:.06em;
  padding:20px 46px;border:none;cursor:pointer;
  clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%);
  animation:sh-pulse 2.6s ease-in-out infinite;
  transition:transform .25s,filter .25s,box-shadow .25s;
}
.sh-start:hover{transform:translateY(-2px);filter:brightness(1.08);animation:none;
  box-shadow:0 16px 54px color-mix(in srgb,var(--accent) 58%,transparent)}
/* テキストと矢印を光沢の上に置く */
.sh-start > *{position:relative;z-index:1}
.sh-start-arw{font-size:1.1em;transition:transform .25s}
.sh-start:hover .sh-start-arw{transform:translateX(7px)}
/* 左から右へ流れる斜めの光沢(スラッシュ・シャイン) */
.sh-start::after{
  content:'';position:absolute;top:-20%;bottom:-20%;left:0;width:55%;z-index:0;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.85) 50%,transparent 70%);
  transform:skewX(-20deg) translateX(-220%);
  animation:sh-shine 3.4s cubic-bezier(.4,0,.2,1) infinite;
  pointer-events:none;
}
@keyframes sh-shine{
  0%{transform:skewX(-20deg) translateX(-220%)}
  35%,100%{transform:skewX(-20deg) translateX(430%)}
}
@keyframes sh-pulse{
  0%,100%{box-shadow:0 10px 38px color-mix(in srgb,var(--accent) 30%,transparent)}
  50%{box-shadow:0 12px 56px color-mix(in srgb,var(--accent) 60%,transparent)}
}
@media (prefers-reduced-motion:reduce){.sh-start{animation:none}.sh-start::after{animation:none;opacity:0}}
.sh-meta-row{display:flex;gap:12px 24px;flex-wrap:wrap;justify-content:center;margin-top:0}

@media (max-width:900px){
  /* 縦積み: テキスト → CTAパネル */
  /* minmax(0,1fr)にして、nowrapの.nbでカラムがmin-content幅まで膨張するのを止める(横はみ出し防止) */
  .sh-intro-grid{grid-template-columns:minmax(0,1fr);gap:clamp(28px,5vh,44px)}
  .sh-cta-col{justify-content:center}
  .sh-cta-panel{max-width:520px;margin-inline:auto}
  /* 9.9em行が (100vw - 40px) に収まる係数。320px端末でも見切れない */
  .sh-hero-jp-big{font-size:clamp(26px,8.4vw,64px)}
}
/* 小画面では長いリード行(.nb)を自然折り返しに */
@media (max-width:480px){
  .sh-hero-jp .nb{white-space:normal}
}

/* ===== PROGRESS ===== */
.sh-progress{display:flex;align-items:center;gap:16px;margin-bottom:clamp(32px,6vh,56px)}
.sh-progress-label{white-space:nowrap;color:var(--accent)}
.sh-progress-bar{flex:1;height:3px;background:var(--rule);border-radius:2px;overflow:hidden}
.sh-progress-fill{display:block;height:100%;width:0;background:var(--accent);border-radius:2px;transition:width .5s cubic-bezier(.22,.61,.36,1)}

/* ===== QUESTION ===== */
.sh-qhead{color:var(--accent);letter-spacing:.2em;margin-bottom:14px}
.sh-qtitle{
  font-family:var(--font-jp);font-weight:700;
  font-size:clamp(24px,3.6vw,42px);line-height:1.5;letter-spacing:.02em;
  color:var(--cream);margin-bottom:clamp(28px,5vh,44px);
}

.sh-options{display:grid;gap:14px}
.sh-opt{
  display:flex;align-items:center;gap:18px;text-align:left;width:100%;
  background:color-mix(in srgb,var(--bg-panel) 60%,transparent);
  border:1px solid var(--rule);border-radius:14px;
  padding:clamp(18px,2.6vh,26px) clamp(18px,2.4vw,28px);
  color:var(--cream);cursor:pointer;position:relative;overflow:hidden;
  font-family:var(--font-jp);
  transition:border-color .3s,transform .2s;
}
.sh-opt::before{
  content:'';position:absolute;inset:0;background:var(--accent);
  transform:scaleX(0);transform-origin:left;
  transition:transform .4s cubic-bezier(.65,0,.35,1);z-index:0;
}
.sh-opt>*{position:relative;z-index:1;transition:color .3s}
@media (hover:hover){
  .sh-opt:hover{border-color:var(--accent);transform:translateX(4px)}
  .sh-opt:hover::before{transform:scaleX(1)}
  .sh-opt:hover .sh-opt-key,
  .sh-opt:hover .sh-opt-label,
  .sh-opt:hover .sh-opt-arw{color:var(--accent-ink)}
}
.sh-opt.is-selected{border-color:var(--accent)}
.sh-opt.is-selected::before{transform:scaleX(1)}
.sh-opt.is-selected .sh-opt-key,
.sh-opt.is-selected .sh-opt-label,
.sh-opt.is-selected .sh-opt-arw{color:var(--accent-ink)}
.sh-opt-key{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;color:var(--accent);
  flex-shrink:0;width:22px;
}
.sh-opt-label{flex:1;font-size:clamp(15px,1.5vw,18px);font-weight:500;line-height:1.6}
.sh-opt-label small{display:block;font-weight:400;font-size:13px;color:var(--cream-dim);margin-top:4px;letter-spacing:.02em}
.sh-opt:hover .sh-opt-label small,
.sh-opt.is-selected .sh-opt-label small{color:color-mix(in srgb,var(--accent-ink) 72%,transparent)}
.sh-opt-arw{font-size:18px;color:var(--cream-dim);flex-shrink:0}

.sh-qnav{display:flex;justify-content:space-between;gap:16px;margin-top:clamp(28px,5vh,44px);flex-wrap:wrap}
.sh-back,.sh-skip{
  background:none;border:none;cursor:pointer;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;
  color:var(--cream-dim);padding:8px 4px;transition:color .25s;
}
.sh-back:hover,.sh-skip:hover{color:var(--accent)}
.sh-back[hidden],.sh-skip[hidden]{display:none}

/* ===== RESULT ===== */
.sh-result-inner{max-width:900px}
.sh-r-stamp{display:flex;justify-content:space-between;gap:16px;margin-bottom:clamp(24px,4vh,40px)}
.sh-r-eyebrow{color:var(--accent);letter-spacing:.2em;margin-bottom:16px;font-family:var(--font-mono);font-size:11px}
.sh-r-planname{
  font-family:var(--font-jp);font-weight:700;
  font-size:clamp(30px,5vw,60px);line-height:1.25;letter-spacing:.02em;
  color:var(--cream);margin-bottom:12px;
}
.sh-r-planname .accent{color:var(--accent)}
/* 読み位置移動のためのプログラム的フォーカス。青いフォーカスリングは出さない */
.sh-qtitle:focus,.sh-r-planname:focus{outline:none}
.sh-r-catch{
  font-family:'Shippori Mincho B1','Hiragino Mincho ProN',serif;
  font-size:clamp(17px,2vw,24px);line-height:1.8;color:var(--cream);margin-bottom:clamp(30px,5vh,48px);
}

/* 情報ブロック(紙カード) */
.sh-card{
  background:var(--paper);color:var(--paper-ink);
  border:1px solid rgba(20,20,18,.22);border-radius:16px;
  padding:clamp(24px,3.4vw,40px);margin-bottom:16px;
}
.sh-card .p-label{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;
  color:var(--accent-deep);display:block;margin-bottom:14px;
}
.sh-card h3{font-size:clamp(18px,2vw,24px);font-weight:700;line-height:1.6;color:var(--paper-ink);margin-bottom:12px}
.sh-card p{font-size:15px;line-height:2.1;color:var(--paper-sub)}
.sh-card .sh-cost{
  font-family:var(--font-jp);font-weight:700;
  font-size:clamp(22px,3vw,34px);color:var(--paper-ink);line-height:1.4;margin-bottom:6px;
}
.sh-card .sh-cost-note{font-size:12px;color:var(--paper-sub);line-height:1.8;margin-top:8px}

.sh-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:720px){.sh-grid-2{grid-template-columns:1fr}}

/* 未来図(タイムライン) — 折り畳みパネル(補助情報) */
.sh-future{
  border:1px solid var(--rule);border-radius:14px;padding:18px 22px;margin:0 0 16px;
  background:color-mix(in srgb,var(--bg-panel) 40%,transparent);
}
.sh-future-sum{cursor:pointer;list-style:none;display:flex;align-items:center;gap:12px}
.sh-future-sum::-webkit-details-marker{display:none}
.sh-future .p-label{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;color:var(--accent);display:block;margin-bottom:0}
/* 開閉が一目でわかるチップ */
.sh-future-toggle{
  margin-left:auto;flex-shrink:0;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;color:var(--accent);
  border:1px solid var(--rule-strong);border-radius:999px;padding:6px 14px;transition:background .25s,color .25s,border-color .25s;
}
.sh-future-toggle::after{content:'ひらく ＋'}
.sh-future[open] .sh-future-toggle::after{content:'とじる －'}
.sh-future-sum:hover .sh-future-toggle{border-color:var(--accent);background:var(--accent);color:var(--accent-ink)}
.sh-future-body{margin-top:22px}
.sh-timeline{
  display:flex;flex-wrap:wrap;gap:10px;align-items:stretch;
}
.sh-stage{
  flex:1 1 auto;min-width:0;
  display:flex;flex-direction:column;gap:6px;
  border:1px solid var(--rule);border-radius:10px;
  padding:14px 12px;background:color-mix(in srgb,var(--bg-panel) 55%,transparent);
  position:relative;transition:border-color .3s;
}
.sh-stage .sh-stage-no{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;color:var(--cream-dim)}
.sh-stage .sh-stage-name{font-size:13px;font-weight:500;color:var(--cream-dim);line-height:1.5}
.sh-stage.is-here{
  border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 16%,var(--bg-panel));
}
.sh-stage.is-here .sh-stage-no{color:var(--accent)}
.sh-stage.is-here .sh-stage-name{color:var(--cream);font-weight:700}
.sh-stage.is-here::after{
  content:'▲ ここから';position:absolute;left:12px;bottom:-22px;
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.08em;color:var(--accent);white-space:nowrap;
}
.sh-timeline-cap{margin-top:34px;font-size:13.5px;line-height:2;color:var(--cream-dim)}
@media (max-width:720px){
  .sh-timeline{flex-direction:column}
  .sh-stage{flex-direction:row;align-items:center;gap:12px}
  .sh-stage.is-here::after{position:static;margin-left:auto}
}

/* 近い実績 */
.sh-case{
  display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  border:1px solid var(--rule);border-radius:14px;padding:22px 26px;margin-bottom:16px;
  background:color-mix(in srgb,var(--bg-panel) 55%,transparent);
}
.sh-case .sh-case-txt .p-label{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;color:var(--accent);display:block;margin-bottom:10px}
.sh-case .sh-case-txt strong{display:block;font-size:16px;font-weight:700;color:var(--cream);line-height:1.7}
.sh-case a,.sh-case .sh-case-open{
  flex-shrink:0;font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--cream);background:none;border:1px solid var(--rule-strong);border-radius:999px;padding:11px 22px;cursor:pointer;
  transition:background .3s,color .3s,border-color .3s;
}
.sh-case a:hover,.sh-case .sh-case-open:hover{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}

/* ===== 実績モーダル ===== */
.sh-modal{position:fixed;inset:0;z-index:1000;display:none}
.sh-modal.is-open{display:block}
.sh-modal-backdrop{position:absolute;inset:0;background:rgba(12,12,11,.82);backdrop-filter:blur(3px)}
.sh-modal-card{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(560px,92vw);max-height:88vh;overflow:auto;
  background:var(--paper);color:var(--paper-ink);
  border:1px solid rgba(20,20,18,.25);border-radius:18px;
  padding:clamp(22px,3.4vw,36px);
  animation:sh-modal-in .32s cubic-bezier(.22,.61,.36,1);
}
@keyframes sh-modal-in{from{opacity:0;transform:translate(-50%,-46%)}to{opacity:1;transform:translate(-50%,-50%)}}
.sh-modal-close{
  position:absolute;top:14px;right:16px;width:34px;height:34px;border-radius:50%;
  background:rgba(20,20,18,.08);border:none;color:var(--paper-ink);font-size:22px;line-height:1;cursor:pointer;
  transition:background .25s;
}
.sh-modal-close:hover{background:rgba(20,20,18,.18)}
.sh-modal-kicker{color:var(--accent-deep);letter-spacing:.14em;display:block;margin-bottom:16px}
.sh-modal-imgwrap{border-radius:12px;overflow:hidden;background:var(--imgbase);margin-bottom:20px;aspect-ratio:16/10}
.sh-modal-img{width:100%;height:100%;object-fit:cover;display:block}
.sh-modal-title{font-size:clamp(18px,2vw,23px);font-weight:700;line-height:1.6;color:var(--paper-ink);margin-bottom:14px}
.sh-modal-desc{font-size:14.5px;line-height:2;color:var(--paper-sub);margin-bottom:22px}
.sh-modal-link{
  display:inline-block;font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;
  color:var(--accent-deep);border-bottom:1px solid var(--accent-deep);padding-bottom:3px;
}
.sh-modal-link:hover{opacity:.75}
@media (prefers-reduced-motion:reduce){.sh-modal-card{animation:none}}

/* リード取得フォーム */
.sh-lead-form{
  background:var(--paper);color:var(--paper-ink);
  border:1px solid rgba(20,20,18,.22);border-radius:16px;
  padding:clamp(26px,3.6vw,44px);margin-top:24px;
}
.sh-lead-form .p-label{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;color:var(--accent-deep);display:block;margin-bottom:14px}
.sh-lead-form h3{font-size:clamp(19px,2.1vw,26px);font-weight:700;color:var(--paper-ink);line-height:1.6;margin-bottom:10px}
.sh-lead-form .sh-lead-desc{font-size:14px;line-height:2;color:var(--paper-sub);margin-bottom:24px}
.sh-field{display:block;margin-bottom:18px}
.sh-field label{display:block;font-size:14px;font-weight:700;color:var(--paper-ink);margin-bottom:8px}
.sh-field label .req{color:var(--accent-deep);font-size:11px;margin-left:6px}
.sh-field input{
  width:100%;background:#fffdf6;border:1px solid rgba(20,20,18,.32);border-radius:8px;
  padding:13px 15px;font-family:var(--font-jp);font-size:15px;color:var(--paper-ink);
}
.sh-field input:focus{outline:2px solid var(--accent-deep);outline-offset:-1px}
.sh-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}   /* honeypot */
.sh-lead-form .btn-cta{margin-top:8px;border:none;width:auto}
.sh-consent{display:flex;gap:10px;align-items:flex-start;margin:4px 0 20px;font-size:13px;color:var(--paper-sub);line-height:1.7;cursor:pointer}
.sh-consent input{width:16px;height:16px;margin-top:3px;accent-color:var(--accent-deep);flex-shrink:0}
.sh-consent a{color:var(--accent-deep);text-decoration:underline}
.sh-form-note{font-size:11.5px;color:var(--paper-sub);margin-top:16px;line-height:1.8}
.sh-form-msg{margin-top:16px;font-size:14px;font-weight:700;line-height:1.7;display:none}
.sh-form-msg.is-error{display:block;color:#b23b2e}
.sh-form-msg.is-ok{display:block;color:#2f7d4f}

/* ===== 最初の一歩(ラベルなし本文) / フォームへのアンカー ===== */
.sh-r-catch{margin-bottom:16px !important}
.sh-r-step{font-size:15px;line-height:2;color:var(--cream);margin:0 0 22px}
.sh-jump{
  display:inline-block;margin:0 0 clamp(30px,5vh,46px);
  font-family:var(--font-jp);font-weight:700;font-size:14.5px;letter-spacing:.03em;
  color:var(--accent);border-bottom:1px solid var(--accent);padding-bottom:4px;transition:opacity .25s;
}
.sh-jump:hover{opacity:.72}

/* ===== リード領域 ===== */
.sh-lead{scroll-margin-top:96px}
.sh-lead-form{scroll-margin-top:96px}
/* 相談リンク(送信ボタンの下・独立行=待つ人/急ぐ人で役割分離。ボタンと間隔を空ける) */
.sh-consult-link{display:block;margin-top:24px;font-size:13.5px;color:var(--accent-deep);text-decoration:underline;text-underline-offset:3px;transition:opacity .25s}
.sh-consult-link:hover{opacity:.72}
/* メールなしPDFのみ(逃げ道=淡色・小) */
.sh-pdf-only{display:inline-block;margin-top:16px;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.03em;color:var(--cream-dim);text-decoration:underline;text-underline-offset:3px;transition:color .25s}
.sh-pdf-only:hover{color:var(--accent)}

/* ===== 送信成功画面(主役=PDF DL + 相談) ===== */
.sh-lead-done{
  background:var(--paper);color:var(--paper-ink);
  border:1px solid rgba(20,20,18,.22);border-radius:16px;
  padding:clamp(26px,3.6vw,44px);
}
.sh-done-label{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;color:var(--accent-deep);display:block;margin-bottom:14px}
.sh-lead-done h3{font-size:clamp(19px,2.1vw,25px);font-weight:700;color:var(--paper-ink);line-height:1.6;margin-bottom:12px}
.sh-lead-done p{font-size:14.5px;line-height:2;color:var(--paper-sub);margin-bottom:24px}
.sh-done-dl{display:inline-flex;align-items:center;gap:10px;border:none;text-decoration:none}
.sh-done-consult{display:block;margin-top:18px;font-size:13.5px;color:var(--accent-deep);text-decoration:underline;text-underline-offset:3px;transition:opacity .25s}
.sh-done-consult:hover{opacity:.72}

/* 結果フッター(ユーティリティ=控えめだが押せるとわかる枠線ピル) */
.sh-result-foot{margin-top:28px}
.sh-restart{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  background:none;border:1px solid var(--rule-strong);border-radius:999px;padding:10px 22px;
  font-family:var(--font-jp);font-size:13px;letter-spacing:.03em;color:var(--cream-dim);
  transition:background .25s,color .25s,border-color .25s;
}
.sh-restart .sh-restart-ico{line-height:1;transition:transform .4s}
.sh-restart:hover{border-color:var(--accent);color:var(--accent)}
.sh-restart:hover .sh-restart-ico{transform:rotate(-180deg)}

.sh-disclaimer{
  margin-top:30px;padding-top:20px;border-top:1px solid var(--rule);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;color:var(--cream-dim);line-height:1.9;
}

@media (max-width:768px){
  #shindan-app{padding-top:calc(64px + 3vh)}
  .sh-intro-stamp{flex-direction:column;gap:6px}
  .sh-meta-row{gap:8px 18px}
  .sh-start{width:100%;justify-content:center;font-size:17px}
  .sh-lead-form .btn-cta{width:100%;text-align:center}
  .sh-done-dl{width:100%;justify-content:center}
}