/* 依頼フォーム・ヒアリングシート共通。方針は index.html と同じ（囲まない・影なし・細い字を使わない）。 */
:root{
  --paper:#f5f2ea; --ink:#23201b; --sub:#4d483f; --rule:#c4bca9; --accent:#8c3b2a; --white:#fffdf8; --ok:#2c6e49;
  --serif:"Shippori Mincho","Yu Mincho","Hiragino Mincho ProN",serif;
  --sans:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic Medium","Yu Gothic",sans-serif;
  --mono:"DM Mono",ui-monospace,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;font-weight:500;line-height:1.9;letter-spacing:.03em}
a{color:inherit}
h1,h2,h3,p,ol,ul,fieldset,legend{margin:0;padding:0}
fieldset{border:none;min-width:0}
ul,ol{list-style:none}
.wrap{max-width:860px;margin:0 auto;padding:0 24px}
.hd{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:24px 0 20px;border-bottom:1px solid var(--rule)}
.mark{font-family:var(--serif);font-weight:700;font-size:20px;text-decoration:none;letter-spacing:.08em;white-space:nowrap}
.hd span{font-size:14.5px;color:var(--sub)}
.intro{padding:52px 0 8px}
.intro h1{font-family:var(--serif);font-weight:700;font-size:clamp(26px,4vw,36px);line-height:1.55;letter-spacing:.05em}
.intro p{margin-top:16px}
.rules{margin-top:22px;border-top:1px solid var(--ink);border-bottom:1px solid var(--rule)}
.rules li{padding:13px 0 13px 1.6em;border-top:1px solid var(--rule);position:relative;font-size:16px}
.rules li:first-child{border-top:none}
.rules li::before{content:"";position:absolute;left:.2em;top:1.45em;width:.6em;height:2px;background:var(--accent)}

/* 準備中の知らせ */
.prep{margin:0 0 26px;padding:14px 0;border-top:2px solid var(--accent);border-bottom:1px solid var(--rule);font-size:16px;font-weight:700}
.prep b{display:inline-block;background:var(--accent);color:#fff;font-size:14px;letter-spacing:.14em;padding:1px 12px;margin-right:12px}
.send .prep{margin:0 0 20px}

/* 質問のかたまり */
.q{padding:40px 0 0}
.q-no{font-family:var(--mono);font-size:14px;letter-spacing:.12em;color:var(--accent)}
.q h2{font-family:var(--serif);font-weight:700;font-size:23px;letter-spacing:.05em;line-height:1.6;margin:4px 0 6px}
.q .hint{font-size:15.5px;color:var(--sub);margin-bottom:14px}
.q .must{font-family:var(--sans);font-size:13px;font-weight:700;color:var(--accent);margin-left:10px;letter-spacing:.08em}
label.f{display:block;font-size:15.5px;font-weight:700;margin:16px 0 6px}
label.f small{font-weight:500;color:var(--sub);margin-left:8px;font-size:14.5px}
input[type=text],input[type=email],input[type=url],input[type=tel],input[type=date],select,textarea{
  width:100%;font:inherit;font-size:17px;font-weight:500;color:var(--ink);background:var(--white);
  border:1.5px solid #8d8676;border-radius:0;padding:11px 12px;outline:none}
select{appearance:auto}
textarea{resize:vertical;min-height:92px;line-height:1.8}
input:focus,select:focus,textarea:focus{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px}
.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 16px}

/* 選択肢：文字の札。選んだものは墨で反転 */
.opts{display:flex;flex-wrap:wrap;gap:10px}
.opts label{position:relative;cursor:pointer}
.opts input{position:absolute;opacity:0;inset:0;cursor:pointer}
.opts span{display:block;padding:9px 16px;border:1.5px solid #8d8676;background:var(--white);font-size:16px;line-height:1.6}
.opts input:checked + span{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.opts input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px}

/* 雰囲気：架空のサイトの画面で選ぶ。--pick（選んだ色）があれば見本の差し色に使う
   ⚠️ 見本の中の角丸・暗い地は「お客さんのサイトの作風」を見せるためのもの。このフォーム自体の作りとは別 */
.looks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 16px}
.looks label{position:relative;cursor:pointer;display:block}
.looks input{position:absolute;opacity:0;inset:0;cursor:pointer}
.look{padding-bottom:4px}
.look em{display:block;font-style:normal;font-size:16.5px;font-weight:700;padding:10px 2px 0;line-height:1.5}
.look small{display:block;font-size:14px;color:var(--sub);padding:2px 2px 0;line-height:1.65}
.mk{border:1.5px solid #8d8676;overflow:hidden;line-height:1.6;letter-spacing:.04em}
.looks input:checked + .look .mk{border-color:var(--ink);box-shadow:0 0 0 3px var(--ink)}
.looks label[data-n="1"] em::after{content:"　← 1つ目（主）";color:var(--accent);font-size:14px}
.looks label[data-n="2"] em::after{content:"　← 2つ目";color:var(--accent);font-size:14px}
.looks input:focus-visible + .look .mk{outline:2px solid var(--accent);outline-offset:3px}
.mk-bar{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:9px 11px;white-space:nowrap;overflow:hidden}
.mk-bar b{font-size:12px}
.mk-bar i{font-style:normal;font-size:8.5px;opacity:.8;overflow:hidden}
.mk-pic{position:relative}
.mk-pic img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.mk-body{padding:12px 12px 14px}
.mk-body strong{display:block;font-size:15px;line-height:1.5}
.mk-body p{font-size:10px;line-height:1.75;margin:4px 0 9px}
.mk-body span{display:inline-block;font-size:10px}

/* 落ち着いた・上品 */
.mk-calm{background:#f7f3ea;color:#2a2622}
.mk-calm .mk-bar b{font-weight:500;letter-spacing:.3em;font-size:10px}
.mk-calm .mk-body strong{font-family:var(--serif);font-weight:700;letter-spacing:.14em}
.mk-calm .mk-body span{color:var(--pick,#8c3b2a);border-bottom:1px solid currentColor;padding-bottom:1px;letter-spacing:.14em}
/* 力強く誠実 */
.mk-strong{background:#fff;color:#1a1f26}
.mk-strong .mk-bar{background:var(--pick,#1d2b45);color:var(--pickfg,#fff)}
.mk-strong .mk-bar b{font-weight:700;font-size:13px;letter-spacing:.1em}
.mk-strong .mk-pic strong{position:absolute;left:11px;bottom:9px;color:#fff;font-weight:700;font-size:18px;letter-spacing:.06em;text-shadow:0 0 10px rgba(0,0,0,.7)}
.mk-strong .mk-body p{font-weight:700;font-size:10.5px}
.mk-strong .mk-body span{background:var(--pick,#1d2b45);color:var(--pickfg,#fff);font-weight:700;padding:6px 12px}
/* 明るく親しみやすい */
.mk-bright{background:#fff7e3;color:#4a3320;font-family:"Zen Maru Gothic",var(--sans)}
.mk-bright .mk-bar b{display:flex;align-items:center;gap:6px;font-weight:700}
.mk-bright .mk-bar u{width:13px;height:13px;border-radius:50%;background:var(--pick,#f08a24);flex:none}
.mk-bright .mk-pic{padding:0 10px}
.mk-bright .mk-pic img{border-radius:12px}
.mk-bright .mk-body strong{font-weight:700;color:var(--pick,#e0701a)}
.mk-bright .mk-body span{background:var(--pick,#f08a24);color:var(--pickfg,#fff);font-weight:700;padding:6px 14px;border-radius:999px}
/* すっきり現代的 */
.mk-modern{background:#fff;color:#111}
.mk-modern .mk-bar{border-bottom:1px solid #ddd}
.mk-modern .mk-bar b{font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:.18em}
.mk-modern .mk-bar i{font-family:var(--mono)}
.mk-modern .mk-pic{padding:12px 12px 0}
.mk-modern .mk-body strong{font-weight:500;font-size:14px;letter-spacing:.16em}
.mk-modern .mk-body p{color:#666}
.mk-modern .mk-body span{font-family:var(--mono);border-top:2px solid var(--pick,#111);padding-top:5px;letter-spacing:.1em}
/* 和の趣 */
.mk-wa{background:#f1ece0;color:#2b2620;font-family:var(--serif)}
.mk-wa .mk-bar b{font-weight:700;font-size:14px;letter-spacing:.24em}
.mk-wa .mk-pic strong{position:absolute;top:10px;right:11px;writing-mode:vertical-rl;color:#fff;font-weight:700;font-size:15px;letter-spacing:.3em;line-height:1.9;text-shadow:0 0 10px rgba(0,0,0,.6)}
.mk-wa .mk-body p{font-size:10.5px}
.mk-wa .mk-body span{display:inline-flex;align-items:center;gap:6px;font-weight:700}
.mk-wa .mk-body u{width:9px;height:9px;background:var(--pick,#a3301f)}
/* 高級感・重厚 */
.mk-luxe{--gold:color-mix(in srgb,var(--pick,#b89b5e) 42%,#f1e6c4);background:#14120f;color:#e9e2d0;font-family:var(--serif);text-align:center}
.mk-luxe .mk-bar b{font-weight:700;font-size:13px;letter-spacing:.4em;color:var(--gold)}
.mk-luxe .mk-body strong{font-weight:700;letter-spacing:.32em;font-size:15px}
.mk-luxe .mk-body strong::before,.mk-luxe .mk-body strong::after{content:"";display:block;width:26px;height:1px;background:var(--gold);margin:7px auto}
.mk-luxe .mk-body p{color:#b9b09f}
.mk-luxe .mk-body span{border:1px solid var(--gold);color:var(--gold);padding:5px 22px;letter-spacing:.3em}

/* ポップ・元気：はっきりした色、太い字、傾けた札、ずらした色面 */
.mk-pop{background:#ffd92e;color:#1a1a1a;font-family:"Zen Maru Gothic",var(--sans)}
.mk-pop .mk-bar b{font-family:"Dela Gothic One","Zen Maru Gothic",var(--sans);font-weight:400;font-size:12.5px;letter-spacing:.02em}
.mk-pop .mk-bar i{font-weight:700;opacity:1}
.mk-pop .mk-pic{margin:0 14px 6px 10px}
.mk-pop .mk-pic img{border:2.5px solid #1a1a1a;box-shadow:5px 5px 0 var(--pick,#ff5c8a)}
.mk-pop .mk-pic u{position:absolute;top:-7px;right:-9px;text-decoration:none;background:var(--pick,#ff5c8a);color:var(--pickfg,#fff);
  border:2.5px solid #1a1a1a;border-radius:50%;width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  font-family:"Dela Gothic One",var(--sans);font-size:9px;transform:rotate(12deg)}
.mk-pop .mk-body strong{font-family:"Dela Gothic One","Zen Maru Gothic",var(--sans);font-weight:400;font-size:16px;letter-spacing:.02em}
.mk-pop .mk-body p{font-weight:700}
.mk-pop .mk-body span{background:#fff;border:2.5px solid #1a1a1a;box-shadow:3px 3px 0 #1a1a1a;font-weight:700;padding:5px 13px;border-radius:999px}
/* さわやか・清潔感：白と水色、軽い字 */
.mk-clean{background:#fff;color:#22384d}
.mk-clean .mk-bar{border-bottom:3px solid var(--pick,#3ea0d6)}
.mk-clean .mk-bar b{font-weight:700;color:var(--pick,#2386c0)}
.mk-clean .mk-body{background:#eef7fc}
.mk-clean .mk-body strong{font-weight:700;font-size:14px;letter-spacing:.04em}
.mk-clean .mk-body p{color:#4a6076}
.mk-clean .mk-body span{background:var(--pick,#3ea0d6);color:var(--pickfg,#fff);font-weight:700;padding:6px 14px;border-radius:4px}
/* かっこいい・クール：黒い地、太い欧文、強いコントラスト */
.mk-cool{--neon:color-mix(in srgb,var(--pick,#d7ff3a) 62%,#ffffff);background:#0d0d0f;color:#f2f2f2}
.mk-cool .mk-bar b{font-family:"Oswald",var(--sans);font-weight:600;font-size:13px;letter-spacing:.14em}
.mk-cool .mk-bar i{font-family:"Oswald",var(--sans);letter-spacing:.16em;font-size:9px}
.mk-cool .mk-pic img{filter:contrast(1.08)}
.mk-cool .mk-pic strong{position:absolute;left:11px;bottom:9px;font-weight:700;font-size:19px;line-height:1.35;letter-spacing:.04em;text-shadow:0 0 12px rgba(0,0,0,.8)}
.mk-cool .mk-pic::after{content:"";position:absolute;left:0;bottom:0;width:38%;height:4px;background:var(--neon)}
.mk-cool .mk-body p{color:#b5b5b8}
.mk-cool .mk-body span{font-family:"Oswald",var(--sans);font-weight:600;letter-spacing:.2em;color:#0d0d0f;background:var(--neon);padding:5px 14px}

/* 色見本 */
.swatches{display:flex;flex-wrap:wrap;gap:12px 10px}
.swatches label{position:relative;cursor:pointer;text-align:center;font-size:14px;line-height:1.5;width:72px}
.swatches input{position:absolute;opacity:0;inset:0;cursor:pointer}
.swatches i{display:block;width:72px;height:44px;border:1.5px solid #8d8676;margin-bottom:4px}
.swatches input:checked + i{box-shadow:0 0 0 2.5px var(--paper),0 0 0 5px var(--ink)}
.swatches input:focus-visible + i{outline:2px solid var(--accent);outline-offset:6px}

/* 行を足していく入力（メニュー・事例など） */
.rows{border-top:1px solid var(--rule);margin-top:8px}
.rowline{display:grid;gap:8px 12px;padding:12px 0;border-bottom:1px solid var(--rule);align-items:start}
.rowline button{align-self:center}
.add,.del{font:inherit;font-size:15px;font-weight:700;background:none;border:none;border-bottom:1.5px solid var(--ink);padding:2px 0;cursor:pointer;color:var(--ink)}
.add{margin-top:12px}
.del{font-size:14px;font-weight:500;color:var(--sub);border-bottom-color:var(--sub);white-space:nowrap}

/* ページの選択（ヒアリングシート） */
.pages{border-top:1px solid var(--ink)}
.page{border-bottom:1px solid var(--rule)}
.page > label{display:flex;gap:14px;align-items:flex-start;padding:16px 0;cursor:pointer}
.page > label input{width:24px;height:24px;margin-top:5px;flex:none;accent-color:var(--ink)}
.page > label b{font-size:18px}
.page > label small{display:block;font-size:14.5px;color:var(--sub);font-weight:500;line-height:1.6}
.page .body{display:none;padding:0 0 26px 38px}
.page.on .body{display:block}
.count{font-size:16px;margin:12px 0 0}
.count b{font-family:var(--serif);font-size:24px;margin:0 4px}
.count.over{color:var(--accent);font-weight:700}

/* 送信 */
.send{margin:56px 0 0;padding:34px 0 0;border-top:1px solid var(--ink)}
.btn{display:inline-block;background:var(--ink);color:var(--paper);font:inherit;font-weight:700;font-size:17px;letter-spacing:.1em;
  padding:17px 36px;border:1px solid var(--ink);cursor:pointer;text-decoration:none}
.btn:hover{background:var(--accent);border-color:var(--accent)}
.btn.ghost{background:transparent;color:var(--ink);margin-left:14px}
.err{color:var(--accent);font-weight:700;margin-top:14px;font-size:16px}
.bad{border-color:var(--accent) !important;box-shadow:inset 0 0 0 1px var(--accent) !important}
#result{display:none;margin-top:36px}
#result h2{font-family:var(--serif);font-size:23px;margin-bottom:8px}
#result pre{white-space:pre-wrap;word-break:break-word;background:var(--white);border:1.5px solid #8d8676;padding:18px;font-family:var(--sans);font-size:16px;line-height:1.85;margin:12px 0}
.saved{font-size:14.5px;color:var(--sub);margin-left:14px}
footer{margin-top:80px;padding:26px 0 40px;border-top:1px solid var(--rule);font-size:14px;color:var(--sub)}

@media(max-width:700px){
  body{font-size:16.5px}
  .wrap{padding:0 18px}
  .hd span{display:none}
  .two,.three{grid-template-columns:minmax(0,1fr)}
  .looks{grid-template-columns:repeat(2,minmax(0,1fr))}
  .swatches label{width:64px}
  .swatches i{width:64px}
  .page .body{padding-left:0}
  .btn.ghost{margin:14px 0 0}
}
@media(max-width:520px){
  .looks{grid-template-columns:minmax(0,1fr)}
  .mk-bar b{font-size:14px}
  .mk-bar i{font-size:10px}
  .mk-body strong{font-size:18px}
  .mk-body p,.mk-body span{font-size:12.5px}
}
.mark{display:inline-flex;align-items:center;gap:8px}
.mark img{width:26px;height:26px;flex:none}

/* 送信：確認コードの手順。.hp は人には見えない入力欄（機械だけが埋める＝迷惑メール対策） */
.hp{position:absolute !important;left:-9999px;width:1px;height:1px;opacity:0}
.otp,.done{margin-top:26px;padding:22px 22px 24px;border:2px solid var(--ink);background:var(--white)}
.otp h3,.done h3{margin:0 0 10px;font-size:19px}
.otp p{margin:0 0 16px}
.otp #otp-step2{margin-top:22px;padding-top:20px;border-top:1px solid var(--rule)}
.otp #otp-code{max-width:11em;font-size:24px;letter-spacing:.3em;font-family:var(--mono,monospace);margin-bottom:16px;display:block}
.otp .small,.send .small{font-size:15px;color:var(--sub);margin-top:14px}
.done{border-color:var(--accent)}
.done p{margin:0}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--ink);margin-top:18px}

/* ---- 全ページ共通の上の帯（scripts/apply_header.py が入れる。直すときはそちらを直して流し直す） ---- */
.gh{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0;border-bottom:1px solid var(--rule)}
.gh-logo{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-family:var(--sans);font-weight:700;font-size:20px;letter-spacing:.1em;white-space:nowrap}
.gh-logo img{width:30px;height:30px;flex:none}
.gh-logo small{font-size:12.5px;letter-spacing:.08em;color:var(--sub);font-weight:700}
.gh-nav{display:flex;align-items:center;gap:22px}
.gh-nav a{font-size:15px;font-weight:700;text-decoration:none;white-space:nowrap}
.gh-nav a:hover{color:var(--accent)}
.gh a.gh-cta{background:var(--accent);color:#fff;border-radius:999px;padding:9px 18px;font-size:14px}
.gh a.gh-cta:hover{color:#fff;opacity:.88}
.gh-menu{display:none}
.gh-menu summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:9px;font-size:14.5px;font-weight:700;padding:9px 15px;border:1.5px solid var(--ink);border-radius:999px;white-space:nowrap;user-select:none}
.gh-menu summary::-webkit-details-marker{display:none}
.gh-menu summary i{display:block;position:relative;width:16px;height:12px;border-top:2px solid currentColor;border-bottom:2px solid currentColor}
.gh-menu summary i::after{content:"";position:absolute;left:0;right:0;top:3px;border-top:2px solid currentColor}
.gh-menu[open] summary{background:var(--ink);color:var(--paper)}
.gh-menu > div{position:absolute;left:0;right:0;top:100%;z-index:60;display:grid;background:var(--white);border:1.5px solid var(--ink);border-top:none;padding:4px 18px 18px;box-shadow:0 16px 30px rgba(0,0,0,.14)}
.gh-menu > div a{padding:15px 2px;border-bottom:1px solid var(--rule);text-decoration:none;font-weight:700;font-size:16.5px}
.gh-menu > div a.gh-cta{margin-top:16px;border-bottom:none;text-align:center;padding:14px;font-size:16px}
@media (max-width:820px){.gh-nav{display:none}.gh-menu{display:block}}
@media (max-width:360px){.gh-logo{font-size:17px;letter-spacing:.04em}.gh-logo small{display:none}}