/* ============================================================
   v10（2026-10-29）本人「sunbousai.jp を参考に」＋「注文・問い合わせまでの導線も考えて」
   型：線画の立体イラストの街に地図のピン／太い丸ゴシック 900／赤い四角のボタン／ミントの地面と波の区切り
   導線：主は「無料診断（1分）」、従は「質問・見積の相談」を同じ欄で切り替え。電話・LINE は出さない
   トップ（main.v10 のあるページ）だけに効かせる。下の固定ボタン（.float-cta）だけは全ページ共通
   ============================================================ */
:root{
  --v10-ink:#1F1F1F; --v10-sub:#484848; --v10-mute:#7A7A7A;
  --v10-paper:#FFFAF0; --v10-mint:#D6EBD8; --v10-mint2:#BFE3CC; --v10-green:#5FA548;
  --v10-red:#E8461C; --v10-red-d:#C8360E; --v10-orange:#FFAA45; --v10-blue:#62AFCB; --v10-leaf:#8BCB63;
  --v10-jp:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Hiragino Sans","Zen Kaku Gothic New",sans-serif;
  --v10-en:"Instrument Sans","Jost",sans-serif;
  --v10-mark:"BBH Bartle","Archivo Black",sans-serif;
  --v10-pad:clamp(20px,5vw,80px);
}
body:has(main.v10){background:#fff;color:var(--v10-ink);font-family:var(--v10-jp)}
.v10{font-family:var(--v10-jp);color:var(--v10-ink);font-weight:400;letter-spacing:.06em;overflow-x:clip}
.v10 *{box-sizing:border-box}
.v10 figure{margin:0}
.v10 img{display:block;max-width:100%;height:auto}
.v10-wrap{max-width:1360px;margin:0 auto;padding-inline:var(--v10-pad)}
.v10 .pc{display:inline}
.v10 a:focus-visible,.v10 button:focus-visible,.v10 input:focus-visible,.v10 select:focus-visible,.v10 textarea:focus-visible{outline:3px solid var(--v10-blue);outline-offset:3px}

/* ---- ヘッダー（白い丸の帯にナビ、右に赤いボタン） ---- */
body:is(:has(main.v10),:has(main.sub)) .hd{position:fixed;background:transparent;border:0;backdrop-filter:none;-webkit-backdrop-filter:none}
body:is(:has(main.v10),:has(main.sub)) .hd.scrolled{background:transparent;border:0}
body:is(:has(main.v10),:has(main.sub)) .hd .wrap{max-width:none;height:84px;padding-inline:clamp(16px,2vw,28px);gap:20px}
body:is(:has(main.v10),:has(main.sub)) .hd .brand{background:#fff;border-radius:999px;padding:8px 18px 8px 12px;font-family:var(--v10-jp)}
body:is(:has(main.v10),:has(main.sub)) .hd .brand b{font-weight:900;letter-spacing:.06em;color:var(--v10-ink)}
body:is(:has(main.v10),:has(main.sub)) .hd .brand small{display:none}
body:is(:has(main.v10),:has(main.sub)) .hd .nav{margin-left:auto;background:#fff;border-radius:999px;padding:0 26px;height:52px;display:flex;align-items:center;gap:26px}
body:is(:has(main.v10),:has(main.sub)) .hd .nav a{font-family:var(--v10-jp);font-weight:700;font-size:13.5px;letter-spacing:.08em;color:var(--v10-ink);text-decoration:none}
body:is(:has(main.v10),:has(main.sub)) .hd .nav a:hover{color:var(--v10-red)}
body:is(:has(main.v10),:has(main.sub)) .hd .btn-cta{background:var(--v10-red);color:#fff;border:0;border-radius:8px;box-shadow:none;font-family:var(--v10-jp);font-weight:700;letter-spacing:.1em;font-size:14px;min-height:54px;padding:0 26px}
body:is(:has(main.v10),:has(main.sub)) .hd .btn-cta:hover{background:var(--v10-red-d)}
body:is(:has(main.v10),:has(main.sub)) .hd .btn-cta .arr{display:none}

/* ---- 下に固定の申し込みボタン（全ページ） ---- */
.float-cta{border-radius:10px!important;background:var(--v10-red)!important;font-family:var(--v10-jp)!important;font-weight:900!important;letter-spacing:.08em;box-shadow:0 0 0 1.6px var(--v10-ink),0 6px 0 0 var(--v10-ink)!important;flex-direction:column;gap:0!important;line-height:1.3;min-height:60px!important}
.float-cta small{font-size:11px;font-weight:400;letter-spacing:.1em;opacity:.92}
.float-cta:hover{background:var(--v10-red-d)!important}

/* ---- ボタンと文字リンク ---- */
.v10-btn{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;min-height:64px;padding:10px 40px;background:var(--v10-red);color:#fff;border:0;border-radius:8px;font-family:var(--v10-jp);font-weight:900;font-size:16px;letter-spacing:.1em;line-height:1.35;text-decoration:none;cursor:pointer;position:relative;transition:background .2s,transform .2s;box-shadow:0 0 0 1.6px var(--v10-ink),0 5px 0 0 var(--v10-ink)}
.v10-btn small{font-size:11.5px;font-weight:400;letter-spacing:.1em;opacity:.95}
.v10-btn:hover{background:var(--v10-red-d);transform:translateY(2px);box-shadow:0 0 0 1.6px var(--v10-ink),0 3px 0 0 var(--v10-ink)}
.v10-btn::after{content:"";position:absolute;right:14px;bottom:12px;width:14px;height:14px;border-right:2px solid #fff;border-bottom:2px solid #fff;border-radius:0 0 8px 0;opacity:.9}
.v10-btn-sm{min-height:52px;padding:8px 28px;font-size:14.5px;width:100%}
.v10-btn-white{background:#fff;color:var(--v10-ink)}
.v10-btn-white::after{border-color:var(--v10-ink)}
.v10-btn-white:hover{background:var(--v10-paper)}
.v10-tlink{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:15px;letter-spacing:.08em;color:var(--v10-ink);text-decoration:none;border-bottom:2px solid var(--v10-ink);padding-bottom:4px}
.v10-tlink::after{content:"→";font-family:var(--v10-en);transition:transform .2s}
.v10-tlink:hover::after{transform:translateX(4px)}

/* ---- 見出し（日本語は太く、英字は小さく添える） ---- */
.v10-h2{margin:0;display:flex;flex-direction:column;gap:10px}
.v10-h2 span{font-weight:900;font-size:clamp(30px,3.6vw,52px);letter-spacing:.06em;line-height:1.3}
.v10-h2 small{font-family:var(--v10-en);font-weight:700;font-size:13px;letter-spacing:.24em;color:var(--v10-green)}
.v10-head-lead{margin:22px 0 0;font-size:16px;line-height:2.1;color:var(--v10-sub)}
.v10-body{margin:20px 0 0;font-size:15.5px;line-height:2.2;color:var(--v10-sub)}

/* ---- 1. 街の絵 ---- */
.v10-hero{position:relative;min-height:max(640px,min(100svh,920px));background:#fff;overflow:hidden}
.v10-hero-art{position:absolute;inset:0}
.v10-hero-art .t-svg{display:block;width:100%;height:100%}
.v10-hero-in{position:absolute;left:0;bottom:0;padding:0 var(--v10-pad) clamp(40px,7vh,72px);max-width:880px}
.v10-mark span{display:block;white-space:nowrap}
.v10-mark{margin:0;font-family:var(--v10-mark);font-size:clamp(56px,8.2vw,124px);line-height:.86;letter-spacing:.005em;color:var(--v10-ink)}
.v10-h1{margin:26px 0 0;font-weight:900;font-size:clamp(22px,2.2vw,30px);letter-spacing:.12em;line-height:1.5}
.v10-hero-lead{margin:12px 0 0;font-size:15px;line-height:2;letter-spacing:.08em;color:var(--v10-sub)}
.v10-hero-acts{display:flex;flex-wrap:wrap;align-items:center;gap:22px 36px;margin-top:28px}

/* ---- 2. はじめに ---- */
.v10-intro{position:relative;padding:clamp(80px,10vw,140px) 0 clamp(150px,16vw,240px);background:#fff}
.v10-intro-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:56px;align-items:center;position:relative;z-index:1}
.v10-h2xl{margin:0;font-weight:900;font-size:clamp(30px,4vw,56px);line-height:1.55;letter-spacing:.06em}
.v10-lines{margin-top:40px}
.v10-lines p{margin:0;font-size:16px;line-height:2.7;color:var(--v10-sub)}
.v10-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;align-self:end}
.v10-tile{position:relative;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;background:var(--v10-red);color:#fff;border-radius:6px;text-decoration:none;font-weight:900;font-size:clamp(17px,1.6vw,22px);letter-spacing:.12em;box-shadow:0 0 0 1.6px var(--v10-ink),0 6px 0 0 var(--v10-ink);transition:transform .2s,box-shadow .2s,background .2s}
.v10-tile:hover{background:var(--v10-red-d);transform:translateY(3px);box-shadow:0 0 0 1.6px var(--v10-ink),0 3px 0 0 var(--v10-ink)}
.v10-tile i{position:absolute;right:16px;bottom:12px;font-style:normal;font-family:var(--v10-en);font-size:22px}
.v10-hill{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:clamp(90px,12vw,200px);display:block}

/* ---- 3. 毎月やること ---- */
.v10-service{background:var(--v10-mint);padding:20px 0 clamp(90px,10vw,140px)}
.v10-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 40px;align-items:end}
.v10-head .v10-h2{grid-column:1}
.v10-head .v10-head-lead{grid-column:1}
.v10-seals{grid-column:2;grid-row:1/span 2;display:flex;gap:12px;margin:0;padding:0;list-style:none}
.v10-seals li{width:116px;height:116px;position:relative;display:flex;align-items:center;justify-content:center;text-align:center;font-weight:900;font-size:16px;line-height:1.35;letter-spacing:.06em;color:var(--v10-ink);isolation:isolate}
.v10-seals li::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--seal);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M101.5,50.0L100.0,52.6L96.3,54.9L92.2,56.7L89.7,58.4L89.8,60.7L92.1,63.7L95.0,67.3L96.6,70.8L95.6,73.3L92.2,74.4L87.6,74.4L83.6,74.4L81.5,75.5L81.4,78.3L82.5,82.5L83.2,86.9L82.4,90.0L79.7,90.8L75.7,89.5L71.6,87.5L68.5,86.3L66.7,87.4L65.7,90.9L64.7,95.4L63.1,99.0L60.7,100.3L57.7,98.6L54.7,95.2L52.2,91.9L50.0,90.5L47.8,91.9L45.3,95.2L42.3,98.6L39.3,100.3L36.9,99.0L35.3,95.4L34.3,90.9L33.3,87.4L31.5,86.3L28.4,87.5L24.3,89.5L20.3,90.8L17.6,90.0L16.8,86.9L17.5,82.5L18.6,78.3L18.5,75.5L16.4,74.4L12.4,74.4L7.8,74.4L4.4,73.3L3.4,70.8L5.0,67.3L7.9,63.7L10.2,60.7L10.3,58.4L7.8,56.7L3.7,54.9L-0.0,52.6L-1.5,50.0L-0.0,47.4L3.7,45.1L7.8,43.3L10.3,41.6L10.2,39.3L7.9,36.3L5.0,32.7L3.4,29.2L4.4,26.7L7.8,25.6L12.4,25.6L16.4,25.6L18.5,24.5L18.6,21.7L17.5,17.5L16.8,13.1L17.6,10.0L20.3,9.2L24.3,10.5L28.4,12.5L31.5,13.7L33.3,12.6L34.3,9.1L35.3,4.6L36.9,1.0L39.3,-0.3L42.3,1.4L45.3,4.8L47.8,8.1L50.0,9.5L52.2,8.1L54.7,4.8L57.7,1.4L60.7,-0.3L63.1,1.0L64.7,4.6L65.7,9.1L66.7,12.6L68.5,13.7L71.6,12.5L75.7,10.5L79.7,9.2L82.4,10.0L83.2,13.1L82.5,17.5L81.4,21.7L81.5,24.5L83.6,25.6L87.6,25.6L92.2,25.6L95.6,26.7L96.6,29.2L95.0,32.7L92.1,36.3L89.8,39.3L89.7,41.6L92.2,43.3L96.3,45.1L100.0,47.4L101.5,50.0Z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M101.5,50.0L100.0,52.6L96.3,54.9L92.2,56.7L89.7,58.4L89.8,60.7L92.1,63.7L95.0,67.3L96.6,70.8L95.6,73.3L92.2,74.4L87.6,74.4L83.6,74.4L81.5,75.5L81.4,78.3L82.5,82.5L83.2,86.9L82.4,90.0L79.7,90.8L75.7,89.5L71.6,87.5L68.5,86.3L66.7,87.4L65.7,90.9L64.7,95.4L63.1,99.0L60.7,100.3L57.7,98.6L54.7,95.2L52.2,91.9L50.0,90.5L47.8,91.9L45.3,95.2L42.3,98.6L39.3,100.3L36.9,99.0L35.3,95.4L34.3,90.9L33.3,87.4L31.5,86.3L28.4,87.5L24.3,89.5L20.3,90.8L17.6,90.0L16.8,86.9L17.5,82.5L18.6,78.3L18.5,75.5L16.4,74.4L12.4,74.4L7.8,74.4L4.4,73.3L3.4,70.8L5.0,67.3L7.9,63.7L10.2,60.7L10.3,58.4L7.8,56.7L3.7,54.9L-0.0,52.6L-1.5,50.0L-0.0,47.4L3.7,45.1L7.8,43.3L10.3,41.6L10.2,39.3L7.9,36.3L5.0,32.7L3.4,29.2L4.4,26.7L7.8,25.6L12.4,25.6L16.4,25.6L18.5,24.5L18.6,21.7L17.5,17.5L16.8,13.1L17.6,10.0L20.3,9.2L24.3,10.5L28.4,12.5L31.5,13.7L33.3,12.6L34.3,9.1L35.3,4.6L36.9,1.0L39.3,-0.3L42.3,1.4L45.3,4.8L47.8,8.1L50.0,9.5L52.2,8.1L54.7,4.8L57.7,1.4L60.7,-0.3L63.1,1.0L64.7,4.6L65.7,9.1L66.7,12.6L68.5,13.7L71.6,12.5L75.7,10.5L79.7,9.2L82.4,10.0L83.2,13.1L82.5,17.5L81.4,21.7L81.5,24.5L83.6,25.6L87.6,25.6L92.2,25.6L95.6,26.7L96.6,29.2L95.0,32.7L92.1,36.3L89.8,39.3L89.7,41.6L92.2,43.3L96.3,45.1L100.0,47.4L101.5,50.0Z'/%3E%3C/svg%3E") center/contain no-repeat;animation:v11-rot 14s linear infinite}
.v10-seals li:nth-child(2){transform:translateY(-14px)}
.v10-seals li:nth-child(2)::before{animation-direction:reverse}
.v10-seals .is-orange{--seal:var(--v10-orange)}
.v10-seals .is-blue{--seal:var(--v10-blue)}
.v10-seals .is-green{--seal:var(--v10-leaf)}
.v10-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:56px}
.v10-card{display:flex;flex-direction:column;background:var(--v10-paper);border:1.6px solid var(--v10-ink);border-radius:220px 220px 14px 14px;padding:40px 30px 30px}
.v10-card figure{margin:0 -6px;aspect-ratio:586/440;display:flex;align-items:center;justify-content:center}
.v10-card figure img{max-height:100%;width:auto}
.v10-card h3{margin:18px 0 0;font-weight:900;font-size:21px;letter-spacing:.08em}
.v10-card p{margin:12px 0 24px;font-size:14.5px;line-height:2;color:var(--v10-sub);flex:1}

/* ---- 4. 取り組み ---- */
.v10-case{position:relative;background:linear-gradient(180deg,#FFF1DE 0%,#FFD0A3 55%,#FFA66B 100%);padding:clamp(130px,13vw,190px) 0 clamp(90px,10vw,130px);overflow:hidden}
.v10-case::before{content:"";position:absolute;right:-8%;top:18%;width:min(60vw,780px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 60%)}
.v10-wave{position:absolute;left:0;top:-1px;width:100%;height:clamp(60px,8vw,120px);overflow:hidden}
.v10-wave svg{display:block;width:200%;height:100%;animation:v11-wave 16s linear infinite}
.v10-case-in{position:relative}
.v10-case-art{position:absolute;right:max(0px,calc(50vw - 720px));bottom:clamp(60px,7vw,110px);width:min(44vw,660px);z-index:0}
.v10-case-art img{width:100%}
.v10-case .v10-h2 small{color:var(--v10-red-d)}
.v10-case-title{margin:22px 0 0;font-weight:900;font-size:clamp(20px,2vw,28px);letter-spacing:.1em}
.v10-figs{display:flex;flex-wrap:wrap;gap:28px clamp(40px,6vw,96px);margin:44px 0 0}
.v10-figs p{margin:0;background:#fff;border:1.6px solid var(--v10-ink);border-radius:16px;padding:22px 30px 26px;box-shadow:0 6px 0 0 var(--v10-ink)}
.v10-figs span{display:block;font-weight:700;font-size:13.5px;letter-spacing:.12em;color:var(--v10-sub)}
.v10-figs b{display:flex;align-items:baseline;gap:6px;margin-top:8px;font-family:var(--v10-en);font-weight:700;font-size:clamp(46px,5.4vw,76px);letter-spacing:0;line-height:1;font-variant-numeric:tabular-nums}
.v10-figs b small{font-family:var(--v10-jp);font-size:18px;font-weight:900;margin-right:6px}
.v10-figs b i{font-style:normal;font-size:.5em;color:var(--v10-red);margin:0 8px}
.v10-case-note{margin:28px 0 30px;font-size:13.5px;line-height:1.9;color:var(--v10-sub)}

/* ---- 5. ご依頼の流れ ---- */
.v10-flow{background:var(--v10-paper);padding:clamp(90px,10vw,140px) 0;border-top:1.6px solid var(--v10-ink)}
.v10-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;margin:48px 0 0;padding:0;list-style:none;counter-reset:s}
.v10-steps li{position:relative;display:flex;flex-direction:column;background:#fff;border:1.6px solid var(--v10-ink);border-radius:16px;padding:26px 24px 24px}
.v10-steps li:not(:last-child)::after{content:"";position:absolute;right:-22px;top:50%;width:16px;height:16px;border-top:2.4px solid var(--v10-ink);border-right:2.4px solid var(--v10-ink);transform:translateY(-50%) rotate(45deg)}
.v10-steps em{font-style:normal;font-family:var(--v10-en);font-weight:700;font-size:44px;line-height:1;letter-spacing:0;color:var(--v10-red)}
.v10-steps b{display:block;margin-top:16px;font-weight:900;font-size:18px;letter-spacing:.08em;line-height:1.5}
.v10-steps p{margin:10px 0 18px;font-size:14px;line-height:1.95;color:var(--v10-sub);flex:1}
.v10-tag{align-self:flex-start;background:var(--v10-mint);border-radius:999px;padding:5px 14px;font-size:12.5px;font-weight:700;letter-spacing:.1em}
.v10-tag.is-red{background:var(--v10-red);color:#fff}
.v10-flow-cta{display:flex;flex-wrap:wrap;align-items:center;gap:22px 36px;margin-top:48px}

/* ---- 6. 料金 ---- */
.v10-price{padding:clamp(90px,10vw,140px) 0;background:#fff}
.v10-plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;margin-top:48px}
.v10-plan{position:relative;border:1.6px solid var(--v10-ink);border-radius:18px;padding:34px 34px 30px;background:#fff}
.v10-plan.is-main{background:var(--v10-paper);box-shadow:0 8px 0 0 var(--v10-ink)}
.v10-plan-tag{position:absolute;top:-15px;left:28px;margin:0;background:var(--v10-red);color:#fff;border:1.6px solid var(--v10-ink);border-radius:999px;padding:4px 16px;font-size:13px;font-weight:900;letter-spacing:.12em}
.v10-plan-tag.is-gray{background:#fff;color:var(--v10-ink)}
.v10-plan h3{margin:6px 0 0;font-weight:900;font-size:21px;letter-spacing:.08em}
.v10-plan-price{margin:12px 0 0;font-family:var(--v10-en);font-weight:700;font-size:56px;line-height:1.1;font-variant-numeric:tabular-nums;letter-spacing:0}
.v10-plan-price small{font-family:var(--v10-jp);font-size:15px;font-weight:700;margin-left:6px;letter-spacing:.06em}
.v10-plan ul{margin:22px 0 0;padding:20px 0 0;list-style:none;border-top:1.6px dashed #CFCFCF}
.v10-plan li{position:relative;padding-left:26px;font-size:15px;line-height:2.1}
.v10-plan li::before{content:"";position:absolute;left:4px;top:.72em;width:11px;height:11px;border-radius:50%;background:var(--v10-leaf);box-shadow:0 0 0 1.4px var(--v10-ink)}
.v10-plan-note{margin:16px 0 0;font-size:13.5px;color:var(--v10-mute)}
.v10-once{margin:44px 0 0;border-top:1.6px solid var(--v10-ink)}
.v10-once div{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:20px 4px;border-bottom:1.6px dashed #CFCFCF}
.v10-once dt{font-weight:700;font-size:16px;letter-spacing:.06em;min-width:0}
.v10-once dt small{display:block;margin-top:4px;font-weight:400;font-size:12.5px;color:var(--v10-mute)}
.v10-once dd{margin:0;font-family:var(--v10-en);font-weight:700;font-size:28px;white-space:nowrap;font-variant-numeric:tabular-nums;letter-spacing:0}
.v10-once dd small{font-family:var(--v10-jp);font-size:13px;margin-left:4px}
.v10-price-more{margin:30px 0 0}

/* ---- 7. 代表 ---- */
.v10-about{padding:clamp(80px,9vw,120px) 0;background:#fff;border-top:1.6px dashed #CFCFCF}
.v10-about-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);gap:32px 64px;align-items:start}
.v10-about-lead{margin:0;font-weight:900;font-size:clamp(20px,2vw,27px);line-height:1.8;letter-spacing:.06em}
.v10-sign{margin:24px 0 26px;font-weight:700;letter-spacing:.14em}

/* ---- 8. 申し込み ---- */
.v10-contact{background:var(--v10-mint);padding:clamp(90px,10vw,140px) 0;border-top:1.6px solid var(--v10-ink)}
.v10-contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:48px clamp(40px,6vw,96px);align-items:start}
.v10-checks{margin:28px 0 0;padding:0;list-style:none}
.v10-checks li{position:relative;padding:14px 0 14px 38px;font-weight:700;font-size:16px;letter-spacing:.06em;border-bottom:1.6px dashed rgba(31,31,31,.25)}
.v10-checks li::before{content:"";position:absolute;left:0;top:50%;width:24px;height:24px;margin-top:-12px;border-radius:50%;background:var(--v10-red);box-shadow:0 0 0 1.4px var(--v10-ink)}
.v10-checks li::after{content:"";position:absolute;left:8px;top:50%;width:6px;height:11px;margin-top:-8px;border-right:2.4px solid #fff;border-bottom:2.4px solid #fff;transform:rotate(45deg)}
.v10-promise{margin:22px 0 0;font-size:14.5px;color:var(--v10-sub)}
.v10-panel{background:#fff;border:1.6px solid var(--v10-ink);border-radius:20px;padding:clamp(22px,3vw,38px);box-shadow:0 8px 0 0 var(--v10-ink)}
.v10-switch{display:grid;grid-template-columns:1fr 1fr;background:var(--v10-paper);border:1.6px solid var(--v10-ink);border-radius:999px;padding:4px;margin-bottom:26px}
.v10-switch button{appearance:none;border:0;background:transparent;border-radius:999px;min-height:46px;font-family:var(--v10-jp);font-weight:700;font-size:14.5px;letter-spacing:.06em;color:var(--v10-sub);cursor:pointer}
.v10-switch button[aria-selected=true]{background:var(--v10-ink);color:#fff}
.v10-form{display:flex;flex-direction:column;gap:18px}
.v10-form label{display:flex;flex-direction:column;gap:8px;font-weight:700;font-size:14px;letter-spacing:.06em}
.v10-form label small{font-weight:400;color:var(--v10-mute)}
.v10-form input,.v10-form select,.v10-form textarea{width:100%;min-height:54px;border:1.6px solid var(--v10-ink);border-radius:8px;background:#fff;padding:12px 14px;font:inherit;font-size:16px;font-weight:400;letter-spacing:.03em;color:var(--v10-ink)}
.v10-form textarea{min-height:140px;line-height:1.8;resize:vertical}
.v10-form input:focus,.v10-form select:focus,.v10-form textarea:focus{outline:none;box-shadow:0 0 0 3px rgba(98,175,203,.55)}
.v10-form .bad input,.v10-form .bad textarea{border-color:#B3261E;background:#FFF6F5}
.v10-form .qf-err,.v10-form .cf-err{font-style:normal;font-size:12.5px;font-weight:400;color:#B3261E}
.v10-form .cf-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.v10-form .v10-btn{width:100%;margin-top:6px}
.v10-form .qd-msg,.v10-form .cf-msg{margin:0;font-weight:700;font-size:14.5px;line-height:1.8}
.v10-form .ok{color:#1F6B45}.v10-form .ng{color:#B3261E}
.v10-ways{margin:20px 0 0;font-size:13px;line-height:2;color:var(--v10-mute)}
.v10-ways a{color:var(--v10-ink);font-weight:700}

/* ---- フッター（トップだけ） ---- */
body:is(:has(main.v10),:has(main.sub)) .ft{font-family:var(--v10-jp);background:var(--v10-paper);border-top:1.6px solid var(--v10-ink);color:var(--v10-sub)}
body:is(:has(main.v10),:has(main.sub)) .ft a{color:var(--v10-ink)}
body:is(:has(main.v10),:has(main.sub)) .ft-nav a{border-color:var(--v10-ink)}

/* ---- タブレット ---- */
@media (max-width:1100px){
  .v10-case-art{width:46vw;opacity:.9}
  body:is(:has(main.v10),:has(main.sub)) .hd .nav{gap:18px;padding:0 18px}
  .v10-cards{grid-template-columns:minmax(0,1fr)}
  .v10-card{flex-direction:row;flex-wrap:wrap;border-radius:24px;padding:28px}
  .v10-card figure{width:42%;margin:0 4% 0 0}
  .v10-card > :not(figure){width:54%}
  .v10-card h3{margin-top:0}
  .v10-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .v10-steps li:nth-child(2)::after{display:none}
}
/* ---- スマホ ---- */
@media (max-width:899px){
  .v10 .pc{display:none}
  body:is(:has(main.v10),:has(main.sub)) .hd .nav{display:none}
  body:is(:has(main.v10),:has(main.sub)) .hd .wrap{height:64px}
  body:is(:has(main.v10),:has(main.sub)) .hd .brand{padding:6px 14px 6px 10px}
  body:is(:has(main.v10),:has(main.sub)) .hd .btn-cta{min-height:42px;padding:0 14px;font-size:12.5px;letter-spacing:.04em;white-space:nowrap}
  .v10-hero{min-height:0;display:flex;flex-direction:column}
  .v10-hero-art{position:relative;height:112vw;overflow:hidden}
  .v10-hero-art .t-svg{width:200vw;max-width:none;height:112.5vw;margin-left:-78vw}

  .v10-hero-in{position:relative;padding:8px var(--v10-pad) 48px;max-width:none}
  .v10-mark{font-size:clamp(36px,12.6vw,96px)}
  .v10-h1{margin-top:20px;font-size:22px;letter-spacing:.08em}
  .v10-hero-lead{font-size:14.5px}
  .v10-hero-acts{flex-direction:column;align-items:stretch;gap:22px}
  .v10-hero-acts .v10-tlink{align-self:flex-start}
  .v10-intro-grid,.v10-head,.v10-about-grid,.v10-contact-grid{grid-template-columns:minmax(0,1fr)}
  .v10-lines p{font-size:15px;line-height:2.2;margin-bottom:6px}
  .v10-tiles{gap:14px}
  .v10-tile{aspect-ratio:1.45/1}
  .v10-seals{grid-column:1;grid-row:auto;gap:8px}
  .v10-seals li{width:88px;height:88px;font-size:13.5px}
  .v10-seals li:nth-child(2){transform:translateY(-8px)}
  .v10-card{flex-direction:column;border-radius:160px 160px 14px 14px;padding:30px 22px 24px}
  .v10-card figure,.v10-card > :not(figure){width:auto}
  .v10-card figure{margin:0 auto;aspect-ratio:auto;max-width:340px}
  .v10-card figure img{width:100%;max-height:none}
  .v10-card h3{margin-top:14px;font-size:19px}
  .v10-case{padding-top:clamp(56px,14vw,90px)}
  .v10-case-art{position:relative;right:auto;bottom:auto;width:auto;margin:0 0 8px;padding-inline:var(--v10-pad);opacity:1}
  .v10-figs{gap:16px}
  .v10-figs p{width:100%;padding:18px 22px 22px}
  .v10-steps{grid-template-columns:minmax(0,1fr);gap:22px}
  .v10-steps li:not(:last-child)::after{display:block;right:auto;left:50%;top:auto;bottom:-17px;transform:translateX(-50%) rotate(135deg)}
  .v10-steps li:nth-child(2)::after{display:block}
  .v10-flow-cta{flex-direction:column;align-items:stretch}
  .v10-flow-cta .v10-tlink{align-self:flex-start}
  .v10-plans{grid-template-columns:minmax(0,1fr);gap:36px}
  .v10-plan{padding:30px 22px 24px}
  .v10-plan-price{font-size:46px}
  .v10-once div{flex-wrap:wrap}
  .v10-once dd{margin-left:auto;font-size:24px}
  .v10-switch button{font-size:13px;letter-spacing:.02em}
}
@media (max-width:400px){
  .v10-btn-sm{padding:8px 34px 8px 18px;font-size:13.5px;letter-spacing:.04em;white-space:nowrap}
  .v10-tile{font-size:15px;letter-spacing:.06em;align-items:flex-start;justify-content:flex-start;padding:18px 16px}
  .v10-tile i{font-size:18px;right:12px;bottom:8px}
  body:is(:has(main.v10),:has(main.sub)) .hd .btn-cta{font-size:11.5px;padding:0 10px}
}
@media (prefers-reduced-motion:reduce){.v10-btn,.v10-tile,.v10-tlink::after{transition:none}}

/* ============================================================
   v11（2026-10-29）動き：本人「絵が貼ってあるだけ」「カーソルで動かせる」「ワクワク感」「アシログ感を足す」
   街は SVG をページに直接埋め込み、main.js で車・人・ピン・数字を動かす。足あと＝客足、波紋＝ロゴ（葦と水面）
   ============================================================ */
@keyframes v11-rot{to{transform:rotate(360deg)}}
@keyframes v11-wave{to{transform:translateX(-25%)}}
@keyframes v11-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes v11-ring{0%{transform:scale(.3);opacity:.9}100%{transform:scale(1.6);opacity:0}}
@keyframes v11-ripple{0%{transform:scale(.15);opacity:.9}100%{transform:scale(1.25);opacity:0}}
@keyframes v11-sway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(4deg)}}
@keyframes v11-drift{0%,100%{transform:translateX(0)}50%{transform:translateX(26px)}}
@keyframes v11-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes v11-pop{0%{opacity:0;transform:translateY(6px)}15%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-34px)}}
@keyframes v11-fp{0%{opacity:.55}100%{opacity:0}}
@keyframes v11-step{0%{opacity:.5}100%{opacity:0}}
@keyframes v11-up{0%{color:var(--v10-red);transform:translateY(-3px)}100%{color:inherit;transform:none}}
@keyframes v11-legs{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(14deg)}}
@keyframes v11-blink{0%,100%{opacity:1}50%{opacity:.35}}

/* 街 */
.v10-hero-art{cursor:default}
.t-svg .t-world,.t-svg .t-sky{will-change:transform}
.t-svg .t-bob,.t-svg .pin{animation:v11-bob 3.2s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
.t-svg .t-pin{cursor:pointer}
.t-svg .t-pin .t-ring{opacity:0;transform-box:fill-box;transform-origin:50% 50%}
.t-svg .t-pin.is-on .t-ring{animation:v11-ring 1.2s ease-out 2}
.t-svg .t-pin.is-hover .t-bob,.t-svg .t-pin.is-on .t-bob{animation:none;transform:translateY(-14px);transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.t-svg .t-shop{cursor:pointer;transition:transform .35s cubic-bezier(.3,1.5,.5,1)}
.t-svg .t-shop.is-hover{transform:translateY(-6px)}
.t-svg .t-ripple{transform-box:fill-box;transform-origin:50% 50%;animation:v11-ripple 3.9s ease-out infinite}
.t-svg .t-reed{transform-box:fill-box;transform-origin:50% 100%;animation:v11-sway 3.4s ease-in-out infinite}
.t-svg .t-cloud.c1{animation:v11-drift 14s ease-in-out infinite}
.t-svg .t-cloud.c2{animation:v11-drift 18s ease-in-out infinite reverse}
.t-svg .t-cloud.c3{animation:v11-drift 11s ease-in-out infinite}
.t-svg .t-balloon{animation:v11-float 5s ease-in-out infinite}
.t-svg .t-walker .t-l1,.t-svg .t-walker .t-l2{transform-box:fill-box;transform-origin:50% 0;animation:v11-legs .5s ease-in-out infinite}
.t-svg .t-walker .t-l2{animation-delay:-.25s}
.t-svg .t-fp{fill:#2B2B2B;opacity:.55;animation:v11-fp 2.6s linear forwards}
.t-svg .t-pop{font-family:var(--v10-jp);font-weight:900;font-size:15px;letter-spacing:.06em;fill:var(--v10-red);stroke:#fff;stroke-width:4px;paint-order:stroke;text-anchor:middle;animation:v11-pop 1.7s ease-out forwards}
.t-fx{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.t-step{position:absolute;left:0;top:0;width:14px;height:22px;opacity:.5;animation:v11-step 1.4s linear forwards}
.t-step svg{width:100%;height:100%;fill:var(--v10-ink)}
.t-wave{position:absolute;width:0;height:0}
.t-wave i{position:absolute;left:-60px;top:-30px;width:120px;height:60px;border:2px solid var(--v10-blue);border-radius:50%;animation:v11-ripple 1.3s ease-out forwards}
.t-wave i:nth-child(2){animation-delay:.18s}.t-wave i:nth-child(3){animation-delay:.36s}
.t-tip{position:absolute;left:0;top:0;z-index:3;width:250px;display:flex;flex-direction:column;gap:3px;background:#fff;border:1.6px solid var(--v10-ink);border-radius:12px;padding:14px 16px 12px;box-shadow:0 5px 0 0 var(--v10-ink);font-size:12.5px;letter-spacing:.02em;line-height:1.6;pointer-events:none;transition:transform .12s ease-out}
.t-tip b{font-weight:900;font-size:15px;letter-spacing:.04em}
.t-tip[hidden]{display:none}
.t-tip-k{color:var(--v10-mute)}
.t-tip-st em{font-style:normal;font-weight:700;margin-right:4px}.t-tip-st i{font-style:normal;color:#F2A100;letter-spacing:0}
.t-tip-m em{font-style:normal;font-weight:900}.t-tip-m i{font-style:normal;font-weight:700;color:#1F8A4C}
.t-tip-a{display:flex;gap:6px;margin-top:6px}
.t-tip-a u{text-decoration:none;border:1.4px solid var(--v10-ink);border-radius:999px;padding:1px 10px;font-weight:700;font-size:11.5px}
.t-tip-a u:first-child{background:var(--v10-blue);color:#fff;border-color:var(--v10-ink)}

/* この街の記録（右下の小さな帳面） */
.t-hud{position:absolute;right:clamp(16px,2vw,28px);bottom:clamp(20px,4vh,40px);z-index:2;width:236px;background:#fff;border:1.6px solid var(--v10-ink);border-radius:14px;padding:12px 16px 10px;box-shadow:0 5px 0 0 var(--v10-ink)}
.t-hud-h{display:flex;align-items:center;gap:8px;margin:0 0 6px;font-weight:900;font-size:13.5px;letter-spacing:.08em}
.t-hud-h svg{width:20px;height:22px;color:var(--v10-ink)}
.t-hud-h i{margin-left:auto;font-style:normal;font-family:var(--v10-en);font-weight:700;font-size:10.5px;letter-spacing:.14em;color:#fff;background:var(--v10-red);border-radius:4px;padding:1px 6px;animation:v11-blink 1.6s ease-in-out infinite}
.t-hud dl{margin:0}
.t-hud dl div{display:flex;justify-content:space-between;align-items:baseline;padding:5px 0;border-top:1.4px dashed #D6D6D6}
.t-hud dt{font-size:12px;font-weight:700;color:var(--v10-sub)}
.t-hud dd{margin:0;font-family:var(--v10-en);font-weight:700;font-size:20px;letter-spacing:0;font-variant-numeric:tabular-nums}
.t-hud dd.is-up{animation:v11-up .7s ease-out}
.t-hud-note{margin:4px 0 0;font-size:10.5px;line-height:1.6;color:var(--v10-mute)}
.t-hint-sp{display:none}
@media (hover:none){.t-hint-pc{display:none}.t-hint-sp{display:inline}}

/* はじめに：雲とタイルの人 */
.v10-intro-grid > div:first-child{position:relative}
.v10-cloud{position:absolute;width:110px;height:auto;pointer-events:none}
.v10-cloud.is-1{right:4%;top:-60px;animation:v11-drift 12s ease-in-out infinite}
.v10-cloud.is-2{right:30%;top:-96px;width:74px;animation:v11-drift 16s ease-in-out infinite reverse}
.v10-tile{overflow:visible}
.v10-tile-pp{position:absolute;bottom:-22px;width:58px;height:auto;pointer-events:none;transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.v10-tile-pp.is-a{left:-26px}
.v10-tile-pp.is-b{right:-24px}
.v10-tile:hover .v10-tile-pp{transform:translateY(-10px) rotate(-4deg)}
.v10-tile i{transition:transform .3s}
.v10-tile:hover i{transform:translate(3px,3px)}

/* カードの動き */
.v10-card{transition:transform .35s cubic-bezier(.3,1.4,.5,1),box-shadow .35s}
.v10-card:hover{transform:translateY(-8px);box-shadow:0 10px 0 0 var(--v10-ink)}
.v10-card figure img{transition:transform .5s cubic-bezier(.3,1.4,.5,1)}
.v10-card:hover figure img{transform:scale(1.05) rotate(-1deg)}
.v10-plan,.v10-steps li{transition:transform .3s}
.v10-plan:hover,.v10-steps li:hover{transform:translateY(-4px)}

/* 屋号の由来 */
.v10-brand{display:flex;gap:18px;align-items:flex-start;margin-top:36px;padding:20px 0 0;border-top:1.6px dashed #CFCFCF}
.v10-brand-mark{width:64px;height:66px;flex:none;color:var(--v10-ink);overflow:visible}
.v10-brand-mark .bm-r{fill:none;stroke:var(--v10-blue);stroke-width:1.6;transform-box:fill-box;transform-origin:50% 50%;animation:v11-ripple 3s ease-out infinite}
.v10-brand p{margin:0;display:flex;flex-direction:column;gap:2px;font-size:13.5px;line-height:1.9;color:var(--v10-sub)}
.v10-brand b{font-weight:900;color:var(--v10-ink);letter-spacing:.08em;margin-bottom:2px}
.v10-brand em{font-style:normal;font-weight:900;color:var(--v10-red);font-size:1.15em;margin-right:2px}

/* スクロールで出す（JS が html に v11-rv を付けたときだけ隠す） */
.v11-rv .rv{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0s)}
.v11-rv .rv.in{opacity:1;transform:none}
.v11-rv .v10-card.rv,.v11-rv .v10-tile.rv,.v11-rv .v10-plan.rv{transform:translateY(40px) scale(.97)}
.v11-rv .v10-card.rv.in,.v11-rv .v10-tile.rv.in,.v11-rv .v10-plan.rv.in{transform:none}
.v11-rv .v10-seals li.rv{transform:scale(.4) rotate(-30deg)}
.v11-rv .v10-seals li.rv.in{transform:none;transition-timing-function:ease,cubic-bezier(.3,1.6,.5,1)}
.v11-rv .v10-seals li:nth-child(2).rv.in{transform:translateY(-14px)}
.v11-rv .v10-case-art.rv{transform:translateY(40px)}
.v11-rv .v10-case-art.rv.in{transform:none}
.v11-rv .is-split .ch{display:inline-block;opacity:0;transform:translateY(.6em) rotate(6deg);transition:opacity .5s ease,transform .6s cubic-bezier(.3,1.5,.5,1);transition-delay:calc(var(--i) * 32ms)}
.v11-rv .is-split.in .ch{opacity:1;transform:none}
.v11-rv .v10-mark .ch{transition-delay:calc(var(--i) * 45ms)}
.v11-rv .v10-brand-mark path{stroke-dasharray:60;stroke-dashoffset:60;transition:stroke-dashoffset 1.2s ease}
.v11-rv .v10-brand.in .v10-brand-mark path{stroke-dashoffset:0}
.v11-rv .v10-brand.in .bm-2{transition-delay:.5s}.v11-rv .v10-brand.in .bm-3{transition-delay:.8s}.v11-rv .v10-brand.in .bm-4{transition-delay:1s}

@media (max-width:899px){
  .t-hud{position:relative;right:auto;bottom:auto;width:auto;margin:-26px var(--v10-pad) 0;display:grid;grid-template-columns:auto 1fr;gap:4px 14px;align-items:center;padding:10px 14px}
  .t-hud-h{margin:0;grid-row:1/span 2}
  .t-hud-h span{display:none}
  .t-hud dl{display:flex;gap:12px}
  .t-hud dl div{flex-direction:column;border:0;padding:0}
  .t-hud dt{font-size:10.5px}
  .t-hud dd{font-size:17px}
  .t-hud-note{grid-column:2;font-size:10px}
  .t-hud-note .t-hint-sp{display:block}
  .t-tip{width:220px;font-size:12px}
  .v10-cloud.is-1{top:-52px;width:80px}.v10-cloud.is-2{display:none}
  .v10-tile-pp{width:44px;bottom:-16px}
  .v10-tile-pp.is-a{left:-10px}.v10-tile-pp.is-b{right:-8px}
  .v10-brand-mark{width:52px;height:54px}
}
@media (prefers-reduced-motion:reduce){
  .t-svg *,.v10-seals li::before,.v10-wave svg,.v10-cloud,.t-hud-h i,.v10-brand-mark .bm-r{animation:none!important}
}
@media (max-width:360px){.t-hud dl{gap:8px}.t-hud dt{font-size:9.5px;white-space:nowrap;letter-spacing:0}.t-hud dd{font-size:15px}.t-hud .t-hud-h i{font-size:9.5px}}

/* ---- v11.1 街のピン＝実際の見本サイト／このサイトの現状（実数） ---- */
.v10-hero-hint{display:block;margin-top:6px;font-weight:700;color:var(--v10-ink)}
.v10-hero-hint::before{content:"";display:inline-block;width:9px;height:9px;margin-right:8px;border-radius:50% 50% 50% 0;background:var(--v10-pin,#EE4B1F);transform:rotate(-45deg);vertical-align:1px}
.t-tip{width:268px}
.t-tip-row{display:flex;gap:12px;align-items:flex-start}
.t-tip-row img{width:58px;height:auto;border:1.4px solid var(--v10-ink);border-radius:8px;flex:none;background:#eee}
.t-tip-row > span{display:flex;flex-direction:column;gap:2px;min-width:0}
.t-tip-v{font-weight:700;color:var(--v10-sub)}
.t-tip-go{margin-top:4px;font-weight:900;color:var(--v10-red)}
.t-hud-h i{animation:none;background:var(--v10-green)}
.t-hud dd small{font-family:var(--v10-jp);font-size:11px;margin-left:2px}
.t-hud-note a{color:var(--v10-ink);font-weight:700}
.t-svg .is-hq{cursor:pointer}
.t-svg .t-flag-cloth{transform-box:fill-box;transform-origin:0 50%;animation:v11-flag 2.4s ease-in-out infinite}
@keyframes v11-flag{0%,100%{transform:skewY(0) scaleX(1)}50%{transform:skewY(-5deg) scaleX(.92)}}

/* 見本サイトをスマホの枠で見る */
.t-lock,.t-lock body{overflow:hidden}
.t-view{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(214,235,216,.92);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);font-family:var(--v10-jp);color:var(--v10-ink);animation:v11-fade .25s ease}
.t-view[hidden]{display:none}
@keyframes v11-fade{from{opacity:0}to{opacity:1}}
@keyframes v11-rise{from{opacity:0;transform:translateY(30px) scale(.96)}to{opacity:1;transform:none}}
.t-view-in{position:relative;display:flex;gap:44px;align-items:center;max-width:860px;width:100%;animation:v11-rise .45s cubic-bezier(.3,1.4,.5,1)}
.t-view-close{position:absolute;right:-6px;top:-6px;z-index:2;width:48px;height:48px;border-radius:50%;border:1.6px solid var(--v10-ink);background:#fff;font-size:24px;line-height:1;cursor:pointer;box-shadow:0 4px 0 0 var(--v10-ink)}
.t-phone{position:relative;flex:none;width:min(320px,42vh);height:min(690px,calc(100vh - 80px));aspect-ratio:auto;border:10px solid var(--v10-ink);border-radius:42px;background:#fff;overflow:hidden;box-shadow:0 10px 0 0 rgba(31,31,31,.25)}
.t-phone iframe{position:absolute;left:0;top:0;width:390px;border:0;transform-origin:0 0;background:#fff}
.t-view-side{min-width:0}
.t-view-kind{margin:0;font-weight:700;font-size:13px;letter-spacing:.12em;color:var(--v10-green)}
.t-view-name{margin:8px 0 0;font-weight:900;font-size:clamp(24px,3vw,34px);letter-spacing:.06em}
.t-view-lead{margin:14px 0 0;font-size:15px;line-height:2;color:var(--v10-sub)}
.t-view-pts{margin:16px 0 0;padding:0;list-style:none}
.t-view-pts li{position:relative;padding:8px 0 8px 22px;border-top:1.4px dashed rgba(31,31,31,.25);font-weight:700;font-size:14px;line-height:1.7}
.t-view-pts li::before{content:"";position:absolute;left:2px;top:15px;width:10px;height:10px;border-radius:50%;background:var(--v10-red);box-shadow:0 0 0 1.4px var(--v10-ink)}
.t-view-acts{display:flex;flex-wrap:wrap;align-items:center;gap:16px 26px;margin-top:24px}
.t-view-acts .v10-btn-sm{width:auto}
.t-view-note{margin:16px 0 0;font-size:12px;color:var(--v10-mute)}
@media (max-width:760px){
  .t-view{padding:12px;align-items:flex-start;overflow:auto}
  .t-view-in{flex-direction:column;gap:18px;padding-top:8px}
  .t-phone{width:min(86vw,340px);height:min(64vh,620px);border-width:8px;border-radius:32px;margin:0 auto}
  .t-view-close{right:0;top:0}
  .t-view-lead,.t-view-pts{display:none}
  .t-view-side{text-align:center}
  .t-view-name{font-size:22px;margin-top:4px}
  .t-view-acts{justify-content:center}
  .t-view-acts .v10-btn-sm{width:100%}
}
@media (max-width:899px){.t-hud dd small{font-size:10px}}

/* ---- 街のドラッグと、見本サイトの一覧 ---- */
.v10-hero-art{touch-action:pan-y;cursor:grab}
.v10-hero-art.is-drag{cursor:grabbing}
.v10-hero-art.is-drag .t-svg{pointer-events:none}
.t-samples{background:var(--v10-ink);color:#fff;border-top:1.6px solid var(--v10-ink)}
.t-samples-in{display:flex;align-items:center;gap:28px;max-width:none;padding:18px 0 18px var(--v10-pad)}
.t-samples-h{flex:none;margin:0;display:flex;flex-direction:column;gap:4px;max-width:250px}
.t-samples-h b{font-weight:900;font-size:16px;letter-spacing:.1em}
.t-samples-h span{font-size:11.5px;line-height:1.7;color:rgba(255,255,255,.72)}
.t-samples ul{display:flex;gap:12px;margin:0;padding:6px var(--v10-pad) 10px 2px;list-style:none;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.35) transparent}
.t-samples li{flex:none;scroll-snap-align:start}
.t-samples a{display:flex;align-items:center;gap:10px;height:56px;padding:0 16px 0 8px;background:#fff;color:var(--v10-ink);border-radius:10px;text-decoration:none;box-shadow:0 4px 0 0 rgba(255,255,255,.25);transition:transform .25s cubic-bezier(.3,1.6,.5,1),background .2s}
.t-samples a:hover,.t-samples a:focus-visible{transform:translateY(-4px);background:var(--v10-paper)}
.t-samples img{width:56px;height:40px;object-fit:cover;object-position:top;border-radius:6px;border:1.2px solid var(--v10-ink)}
.t-samples a > span{display:flex;flex-direction:column;line-height:1.35}
.t-samples b{font-weight:900;font-size:13.5px;letter-spacing:.04em;white-space:nowrap}
.t-samples small{font-size:11px;color:var(--v10-mute);white-space:nowrap}
.t-samples .is-hq{background:var(--v10-red);color:#fff}
.t-samples .is-hq small{color:rgba(255,255,255,.85)}
.t-samples .is-hq:hover{background:var(--v10-red-d)}
.t-hq-mark{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:8px;background:rgba(0,0,0,.18)}
.t-hq-mark svg{width:22px;height:24px}
@media (max-width:899px){
  .t-samples-in{flex-direction:column;align-items:stretch;gap:10px;padding:16px 0 12px}
  .t-samples-h{max-width:none;padding:0 var(--v10-pad)}
  .t-samples ul{padding-left:var(--v10-pad)}
}
/* 街を動かしても、左下の文字が読めるように白くぼかす（パソコンだけ） */
@media (min-width:900px){
  .v10-hero-art::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#fff 0,rgba(255,255,255,.94) 30%,rgba(255,255,255,0) 52%);-webkit-mask:linear-gradient(180deg,transparent 22%,#000 46%);mask:linear-gradient(180deg,transparent 22%,#000 46%)}
}
@media (min-width:900px){.v10-hero{min-height:max(600px,min(calc(100svh - 124px),860px))}}

/* ============================================================
   v12（2026-10-29）下層ページをトップ（地図の街）にそろえる。本人「揃えて」
   下層は make-pages.mjs が作る <main class="sub">。色の変数を入れ替え、部品（帯・ボタン・カード・質問）をトップの形に
   ============================================================ */
body:has(main.sub){--ink:#1F1F1F;--navy:#1F1F1F;--sub:#484848;--mute:#7A7A7A;--line:#DEDEDE;--acc:#2F7F3A;--acc-bg:#D6EBD8;--cta:#E8461C;--cta-h:#C8360E;--tint:#FFFAF0;--card:#fff;--dark:#1F1F1F;--dark2:#2A2A2A;--green:#5FA548;--green2:#2F7F3A;--green-bg:#D6EBD8;--r:16px;background:#fff;color:var(--v10-ink);font-family:var(--v10-jp)}
main.sub{font-family:var(--v10-jp);letter-spacing:.04em;overflow-x:clip}
main.sub :is(h1,h2,h3,h4,p,li,dt,dd,a,span,b,strong,small,td,th,button,label,summary,input,select,textarea,em,i,figcaption){font-family:var(--v10-jp)}
main.sub :is(h1,h2,h3,h4,.sub-h,.lp-h,.v7-h2){font-weight:900;letter-spacing:.06em}
main.sub :is(.v7-label,.tier-name,.en,.label,.sec-top .en){font-family:var(--v10-en)!important;font-weight:700;letter-spacing:.22em;color:var(--v10-green)}
main.sub :is(.yen,.big-price,.mid-price,.n,.day-n,.kmeta b){font-family:var(--v10-en)!important;font-weight:700;letter-spacing:0}

/* ページ上部：ミントの地面と波、右に街の絵 */
main.sub .sub-hd{position:relative;max-width:none;margin:0;padding:calc(84px + clamp(28px,4vw,56px)) var(--v10-pad) clamp(56px,7vw,96px);background:var(--v10-mint) url(/img/iso-map.svg) no-repeat right max(2%,calc(50vw - 640px)) bottom 14px/auto 84%;border-bottom:0}
main.sub .sub-hd::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:44px;background:#fff;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 44' preserveAspectRatio='none'%3E%3Cpath d='M0 44V24C240 2 480 0 720 18S1200 40 1440 16V44Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 44' preserveAspectRatio='none'%3E%3Cpath d='M0 44V24C240 2 480 0 720 18S1200 40 1440 16V44Z'/%3E%3C/svg%3E") center/100% 100% no-repeat}
main.sub .sub-hd > *{max-width:1360px;margin-left:auto;margin-right:auto;position:relative;z-index:1}
main.sub .crumb{font-size:12.5px;color:var(--v10-sub);padding:0}
main.sub .crumb a{color:var(--v10-ink)}
main.sub .sub-h1{margin-top:14px;font-size:clamp(28px,4vw,52px);line-height:1.35;max-width:min(760px,62%);margin-left:0}
main.sub .sub-hd > .sub-h1{margin-left:auto;margin-right:auto;max-width:1360px;padding-right:min(40%,520px)}

/* ボタン */
main.sub :is(.btn-dark,.btn.btn-dark){background:var(--v10-red)!important;color:#fff!important;border:0!important;border-radius:8px!important;box-shadow:0 0 0 1.6px var(--v10-ink),0 5px 0 0 var(--v10-ink)!important;font-family:var(--v10-jp);font-weight:900;letter-spacing:.1em}
main.sub :is(.btn-dark,.btn.btn-dark):hover{background:var(--v10-red-d)!important;transform:translateY(2px);box-shadow:0 0 0 1.6px var(--v10-ink),0 3px 0 0 var(--v10-ink)!important}
main.sub :is(.btn-line,.btn.btn-line){background:#fff!important;color:var(--v10-ink)!important;border:0!important;border-radius:8px!important;box-shadow:0 0 0 1.6px var(--v10-ink),0 5px 0 0 var(--v10-ink)!important;font-weight:900}
main.sub .more{border:0!important;border-radius:8px!important;background:#fff!important;color:var(--v10-ink)!important;box-shadow:0 0 0 1.6px var(--v10-ink),0 5px 0 0 var(--v10-ink);font-family:var(--v10-jp)!important;font-weight:900}
main.sub .more:hover{transform:translateY(2px);box-shadow:0 0 0 1.6px var(--v10-ink),0 3px 0 0 var(--v10-ink)}
main.sub .btn,main.sub .more{transition:transform .2s,box-shadow .2s,background .2s}

/* カード：線は黒・角は丸く・下に影 */
main.sub :is(.pcard,.tier,.plan,.app-card,.ba-card,.rep,.kcard,.case-chart,.case-tbl,.portrait){border:1.6px solid var(--v10-ink)!important;border-radius:16px!important;box-shadow:0 5px 0 0 var(--v10-ink)!important}
main.sub :is(.tile-vis,.kshot,.ind-shot,.scr-img){border:1.6px solid var(--v10-ink);border-radius:14px;overflow:hidden}
main.sub :is(.tag,.tags span,.ind-kws span,.rec-badge){background:var(--v10-mint)!important;color:var(--v10-ink)!important;border:1.4px solid var(--v10-ink);border-radius:999px;font-weight:700}
main.sub .tint{background:var(--v10-paper)}
main.sub :is(.faq,.lp-faq){border-top:1.6px solid var(--v10-ink)!important}
main.sub details{border-color:#CFCFCF}
main.sub summary{font-weight:700}
main.sub table{border-color:var(--v10-ink)}

/* 下のボタンの帯 */
main.sub .sub-cta{background:var(--v10-mint);border-top:1.6px solid var(--v10-ink)!important;padding:clamp(56px,7vw,96px) 0}
main.sub .sub-cta .wrap{display:flex;flex-wrap:wrap;gap:18px 26px;align-items:center}
main.sub .sub-cta .wrap::before{content:"まずは、無料診断から。";display:block;width:100%;font-weight:900;font-size:clamp(22px,2.6vw,34px);letter-spacing:.06em;margin-bottom:10px}
main.sub .sub-cta .btn{min-height:60px;padding:0 34px;font-size:15px}

@media (max-width:899px){
  main.sub .sub-hd{padding-top:calc(64px + 26px);background-size:auto 46%;background-position:right -20px bottom 20px;padding-bottom:clamp(110px,34vw,160px)}
  main.sub .sub-hd > .sub-h1{padding-right:0}
  main.sub .sub-h1{max-width:none;font-size:clamp(26px,7.4vw,36px)}
  main.sub .sub-cta .btn{width:100%;justify-content:center}
}
main.sub .who{border:0!important;box-shadow:none!important}
main.sub .flow .n{color:var(--v10-orange)}
main.sub .flow li,main.sub .flow > div{border-radius:16px}
main.sub .case-tbl.ba{display:block}
main.sub .kcard{overflow:hidden;background:#fff}
main.sub .kcard .kshot{border:0;border-bottom:1.6px solid var(--v10-ink);border-radius:0}
main.sub .kcard .kmeta{padding:10px 12px 12px}

/* 1文字だけの行を出さない（2026-10-29）：見出しは行をそろえ、本文は最後の行を短くしない。残りは nobr.js が直す */
h1,h2,h3,h4,.v10-h1,.sub-h1{text-wrap:balance}
p,li,dd,dt,td,th,figcaption,summary,blockquote{text-wrap:pretty}
.ch-tail{display:inline-block;white-space:nowrap}

/* スマホは下に固定ボタンが常にあるので、float-cta が本文の最後を隠さないよう余白を足す */
@media (max-width:899px){body:has(.float-cta){padding-bottom:calc(84px + env(safe-area-inset-bottom))}}
/* v7 はスマホで固定ボタンを消していた（style.css 760px）。v11 ではスマホこそ出す：画面の下いっぱいの帯 */
@media (max-width:899px){
  .float-cta.float-cta{display:flex;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));justify-content:center;min-height:58px;padding:0 18px;font-size:15px}
}

/* 事例の判定表（5列・4列）。スマホでは行ごとのカードにして、各数字に見出しを付ける */
main.sub .case-tbl3{margin-top:18px}
main.sub .case-tbl3 table{width:100%;border-collapse:collapse;font-size:14.5px}
main.sub .case-tbl3 th{font-size:12.5px;color:var(--v10-sub);text-align:left;padding:10px 8px;border-bottom:1.6px solid var(--v10-ink)}
main.sub .case-tbl3 td{padding:14px 8px;border-bottom:1.4px dashed #CFCFCF;vertical-align:top}
main.sub .case-tbl3 td b{font-family:var(--v10-en);font-size:20px;color:var(--v10-red)}
@media (max-width:760px){
  main.sub .case-tbl3 thead{display:none}
  main.sub .case-tbl3 tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 10px;padding:14px 0;border-bottom:1.4px dashed #CFCFCF}
  main.sub .case-tbl3 td{border:0;padding:0}
  main.sub .case-tbl3 td:first-child,main.sub .case-tbl3 td:last-child{grid-column:1/-1}
  main.sub .case-tbl3 td:first-child{font-weight:700}
  main.sub .case-tbl3 td:last-child{color:var(--v10-sub);font-size:13.5px;margin-top:4px}
  main.sub .case-tbl3 td[data-l]:not([data-l=""])::before{content:attr(data-l);display:block;font-size:11px;color:var(--v10-mute)}
}