/* ============================================================
   COTOLX Starter
   本体LPのトーン（記録用紙の白・墨・朱・明朝見出し）を継承し、
   1セクション1メッセージで軽く読める入口専用LP。
   ============================================================ */
:root{
  --paper:#FAF7F2;
  --paper-field:#F5EFE6;
  --sumi:#1C1A17;
  --sumi-mid:#45403B;
  --sumi-soft:#787268;
  --rule:#DDD5C7;
  --rule-soft:#EDE6DA;
  --shu:#BA3329;
  --shu-deep:#981914;
  --shu-pale:#FFDBD6;

  --display:"Shippori Mincho","Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;
  --body:"DM Sans","Plus Jakarta Sans","Zen Kaku Gothic New","Hiragino Sans","Yu Gothic",sans-serif;

  --pad:22px;
  --maxw:740px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{transition:none!important;animation:none!important} }
body{
  margin:0; background:var(--paper); color:var(--sumi);
  font-family:var(--body); font-size:16px; line-height:2.0; letter-spacing:.02em;
  font-feature-settings:"palt" 1; overflow-x:hidden;
}
img,svg{max-width:100%}
a{color:inherit}
button,input,select,textarea{font-family:inherit; font-size:inherit}
p{margin:0 0 1.5em}
p:last-child{margin-bottom:0}
strong{font-weight:700}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pc{display:none}
@media (min-width:768px){ .pc{display:inline} .sp{display:none} }

/* ---------- レイアウト ---------- */
.wrap{margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); max-width:calc(var(--maxw) + var(--pad)*2)}
@media (min-width:768px){ .wrap--wide{max-width:calc(880px + var(--pad)*2)} .wrap--wide > .narrow{margin-left:auto; margin-right:auto} }
.sec{padding:60px 0}
.sec--field{background:var(--paper-field); border-top:1px solid var(--rule-soft); border-bottom:1px solid var(--rule-soft)}
@media (min-width:768px){ .sec{padding:120px 0} }

.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 19px;
  letter-spacing: 0.05em;
  color: #4f6cdb;
  font-weight: 700;
  margin-bottom: 24px;
  padding: 5px 12px;
  border: 2px solid var(--rule);
  border-radius: 4px;
  background: #faf7f2;
}
.eyebrow::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--shu); flex:none}

h1,h2,h3{font-family:var(--display); font-weight:600; margin:0; letter-spacing:.01em; word-break:keep-all; overflow-wrap:anywhere}
h2{font-size:clamp(21px,4.7vw,32px); line-height:1.6; margin-bottom:28px; text-wrap:balance}
h3{font-size:17px; line-height:1.7; margin-bottom:8px}
.lead{color:var(--sumi-mid)}
.one{
  /* 1セクション1メッセージ用：短い結論 */
  font-family:var(--display); word-break:keep-all; overflow-wrap:anywhere; font-size:clamp(19px,5vw,24px); line-height:1.8;
  border-left:3px solid var(--shu); padding-left:16px; margin:36px 0 0;
}
.one em{font-style:normal; color:var(--shu)}
.small{font-size:12.5px; line-height:1.9; color:var(--sumi-soft)}
.u{display:inline-block; background:linear-gradient(transparent 62%, var(--shu-pale) 62%); font-weight:700}

/* ---------- 写真（各セクション共通） ---------- */
/* 素材は 960×640(3:2)。比率はCSS側で指定し、object-fit:cover でトリミングするため画像は歪まない。 */
.shot{margin:32px 0 0; border:1px solid var(--rule); border-radius:4px; overflow:hidden; background:#fff; box-shadow:0 1px 3px rgba(28,26,23,.04)}
.shot img{
  display:block; width:100%; height:auto;
  aspect-ratio:3/2; object-fit:cover; object-position:50% 50%;
  filter:grayscale(1) contrast(1.06) brightness(1.03);
}
/* ワイド：.wrap--wide 直下に置く帯状の写真。PCでは横長にして主張を抑える */
@media (min-width:768px){
  .shot--wide img{aspect-ratio:2.4/1}
}
/* 被写体が上寄りの写真のトリミング基準 */
.shot--upper img{object-position:50% 40%}
/* 枠なし：.field など既に枠を持つ箱の中で使い、二重枠を避ける */
.shot--flat{border:none; border-radius:0; box-shadow:none; background:transparent}

/* ---------- ヘッダー ---------- */
.head{display:flex; align-items:center; justify-content:space-between; padding-top:18px; padding-bottom:18px; border-bottom:1px solid var(--rule)}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; transition:color .15s ease}
.brand:hover{color:var(--shu)}
.brand img{height:20px; width:auto; flex:none}
.brand__t small{display:block; font-size:9.5px; letter-spacing:.2em; color:var(--sumi-soft); font-weight:400; line-height:1.2}

/* ---------- ヒーロー ---------- */
.hero{
  padding-top:20px; padding-bottom:40px; position:relative;
  background-color:var(--paper); background-size:36px 36px;
  background-image:
    linear-gradient(to right, rgba(221,213,199,.45) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(221,213,199,.45) 1px, transparent 1px);
}
@media (min-width:768px){ .hero{padding-top:60px; padding-bottom:50px} }
.hero h1{
  font-size:clamp(26px,7vw,46px); line-height:1.6; margin-bottom:10px;
  opacity:0; animation:heroH1In .7s ease-out forwards;
}
@keyframes heroH1In{
  from{opacity:0; transform:translateY(14px)}
  to{opacity:1; transform:translateY(0)}
}
.hero__lead{
  font-family:var(--display); font-size:clamp(18px,4.9vw,23px); line-height:1.8; word-break:keep-all; overflow-wrap:anywhere;
  margin:0 0 22px;
}
.hero__lead em{font-style:normal; color:var(--shu)}
.hero__note{font-size:14px; color:var(--sumi-mid); margin-bottom:20px}
.hero__note--tight{margin-bottom:18px}
.hero__visual{margin:0 0 20px; border:1px solid var(--rule); border-radius:4px; overflow:hidden; background:#fff; box-shadow:0 1px 3px rgba(28,26,23,.04)}
.hero__visual img{display:block; width:100%; height:auto}

/* ---------- 吹き出し（AIへの質問例） ---------- */
.qbubbles{list-style:none; margin:0 0 28px; padding:0}
.qbubble{
  position:relative; display:table; max-width:88%;
  font-family:var(--display); font-size:14.5px; color:var(--sumi); font-weight:600;
  background:#fff; border:1px solid var(--rule); border-radius:10px;
  padding:10px 16px; margin:0 0 14px;
  box-shadow:0 1px 3px rgba(28,26,23,.05);
  opacity:0; animation:qbubbleIn .5s ease-out forwards;
}
.qbubble::before,.qbubble::after{content:""; position:absolute; left:20px; top:100%; border:7px solid transparent}
.qbubble::before{border-top-color:var(--rule); margin-top:0}
.qbubble::after{border-top-color:#fff; margin-top:-1px}
.qbubble:nth-child(1){margin-left:0; animation-delay:.15s}
.qbubble:nth-child(2){margin-left:6%; animation-delay:.65s}
.qbubble:nth-child(3){margin-left:12%; animation-delay:1.15s}
@keyframes qbubbleIn{
  from{opacity:0; transform:translateY(10px)}
  to{opacity:1; transform:translateY(0)}
}
@media (min-width:768px){
  .qbubble{font-size:15.5px}
  .qbubble:nth-child(1){margin-left:0}
  .qbubble:nth-child(2){margin-left:32px}
  .qbubble:nth-child(3){margin-left:64px}
}
.tanzaku{
  position:absolute; top:0; right:var(--pad); width:30px; height:98px;
  border:1px solid var(--rule); border-top:none; border-radius:0 0 4px 4px;
  background:linear-gradient(180deg,rgba(186,51,41,.08),rgba(255,255,255,0));
}
.tanzaku span{
  display:block; writing-mode:vertical-rl; font-family:var(--display);
  font-size:10.5px; letter-spacing:.34em; color:var(--sumi-soft);
  padding-top:14px; margin:0 auto; text-align:center; width:100%;
}
@media (min-width:768px){ .tanzaku{height:120px; width:34px} }

/* ---------- CTA ---------- */
.cta__btn{
  display:block; width:100%; text-align:center;
  background:var(--shu); color:#fff; font-size:17px; font-weight:700; letter-spacing:.06em;
  padding:20px 16px; border:none; border-radius:4px; cursor:pointer; text-decoration:none; line-height:1.5;
  box-shadow:0 10px 28px rgba(186,51,41,.28);
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.cta__btn:hover,.cta__btn:focus-visible{background:var(--shu-deep); transform:translateY(-1px); box-shadow:0 14px 32px rgba(152,25,20,.32)}
.cta__btn:active{transform:translateY(0) scale(.99)}
.cta__btn:focus-visible{outline:2px solid var(--sumi); outline-offset:3px}
.cta__pre{display:block; font-size:10.5px; letter-spacing:.24em; opacity:.85; margin-bottom:2px; font-weight:700}
.cta__sub{display:block; text-align:center; font-size:12.5px; color:var(--sumi-soft); margin-top:12px; letter-spacing:.04em}
.cta__badge{
  display:table; margin:14px auto 0;
  font-size:12.5px; color:var(--sumi-mid); letter-spacing:.02em;
  border:1px solid var(--rule); border-radius:999px; background:var(--paper-field);
  padding:7px 16px;
}
@media (min-width:768px){ .cta__btn{max-width:420px} .cta__sub{text-align:left} .cta__badge{margin-left:0} }

.sticky{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:rgba(251,250,246,.94); backdrop-filter:blur(6px); border-top:1px solid var(--rule);
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  transform:translateY(110%); transition:transform .3s ease;
}
.sticky.is-on{transform:translateY(0)}
.sticky a{
  display:block; text-align:center; background:var(--shu); color:#fff; font-weight:700; font-size:15px;
  padding:14px; text-decoration:none; letter-spacing:.06em; max-width:560px; margin:0 auto;
  border-radius:4px; box-shadow:0 6px 18px rgba(186,51,41,.25); transition:background .16s ease;
}
.sticky a:hover{background:var(--shu-deep)}

/* ---------- 01 こんなこと、ありませんか？（チェックカード） ---------- */
.checks{display:grid; grid-template-columns:1fr; gap:10px; margin:34px 0 26px}
@media (min-width:768px){ .checks{grid-template-columns:1fr 1fr; gap:12px} }
.check{
  display:flex; align-items:flex-start; gap:14px; width:100%; text-align:left;
  background:#fff; border:1px solid var(--rule); border-radius:4px; padding:16px 16px 16px 14px;
  font-size:14.5px; line-height:1.75; color:var(--sumi); cursor:pointer;
  box-shadow:0 1px 3px rgba(28,26,23,.04);
  transition:border-color .15s ease, background .15s ease, box-shadow .15s ease;
  -webkit-tap-highlight-color:transparent;
}
.check:hover{border-color:var(--shu); box-shadow:0 4px 14px rgba(186,51,41,.08)}
.check:focus-visible{outline:2px solid var(--sumi); outline-offset:2px}
.check__box{
  flex:none; width:20px; height:20px; margin-top:6px; border:1.5px solid var(--sumi); background:#fff;
  border-radius:2px; display:grid; place-items:center; transition:background .15s ease;
}
.check__box svg{width:12px; height:12px; opacity:0; color:#fff}
.check[aria-pressed="true"]{border-color:var(--shu); background:#FFFBFA; box-shadow:0 4px 14px rgba(186,51,41,.1)}
.check[aria-pressed="true"] .check__box{background:var(--shu); border-color:var(--shu)}
.check[aria-pressed="true"] .check__box svg{opacity:1}
.checks__result{font-size:14px; color:var(--sumi-mid); min-height:1.6em}
.checks__result b{color:var(--shu); font-family:var(--display); font-size:22px; margin:0 2px}

/* ---------- 02 なぜ起きるの？ ---------- */
.path{border:1px solid var(--rule); border-radius:4px; background:rgba(255,255,255,.7); padding:22px 18px; margin:34px 0 0; box-shadow:0 1px 3px rgba(28,26,23,.04)}
.path__row{display:flex; align-items:center; flex-wrap:wrap; gap:8px 10px; font-size:14px}
.path__row + .path__row{margin-top:18px; padding-top:18px; border-top:1px dashed var(--rule)}
.path__row--now{position:relative; padding-left:14px}
.path__row--now::before{content:""; position:absolute; left:0; top:20px; bottom:2px; width:3px; border-radius:2px; background:var(--shu)}
.path__lbl{
  flex: 0 0 100%;
  font-size: 16px;
  letter-spacing: 0.1em;
  color: var(--sumi-soft);
  font-weight: 700;
}
.path__lbl.is-shu{color:var(--shu)}
.node{border:1px solid var(--sumi); border-radius:4px; padding:4px 12px; line-height:1.6; background:#fff; white-space:nowrap}
.node--soft{border-color:var(--rule); color:var(--sumi-soft); background:transparent}
.node--shu{border:1.5px solid var(--shu); color:var(--shu); font-weight:700; background:rgba(186,51,41,.05); box-shadow:0 2px 8px rgba(186,51,41,.15)}
.node--dashed{border-style:dashed}
.arr{color:var(--sumi-soft); font-size:12px}

/* ---------- スクロール登場アニメーション ---------- */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease-out, transform .6s ease-out}
.reveal.is-in{opacity:1; transform:translateY(0)}
.reveal--d1.is-in{transition-delay:.1s}
.reveal--d2.is-in{transition-delay:.2s}
.reveal--d3.is-in{transition-delay:.3s}
@media (prefers-reduced-motion:reduce){ .reveal{opacity:1; transform:none; transition:none} }

.stat{
  margin:40px 0 0; padding:28px 22px 24px; border:1px solid var(--rule); border-radius:4px; background:rgba(255,255,255,.7); position:relative;
  box-shadow:0 1px 3px rgba(28,26,23,.04);
}
.stat__tag{position:absolute; top:-1px; left:-1px; background:var(--sumi); color:var(--paper); font-size:10px; letter-spacing:.2em; padding:3px 9px 3px 11px; font-weight:700; line-height:1.6; border-radius:4px 0 4px 0}
.stat__num{font-family:var(--display); font-size:clamp(44px,13vw,60px); line-height:1.05; margin:14px 0 10px; font-variant-numeric:tabular-nums}
.stat__num small{font-size:.42em; margin-left:2px}
.stat__t{font-size:15px; line-height:1.85; font-weight:700; margin-bottom:8px}
.stat__src{font-size:11.5px; line-height:1.8; color:var(--sumi-soft)}
.stat__src a{color:var(--sumi-soft); text-decoration:underline; text-underline-offset:3px}

/* ---------- 04 見つけられる場所を増やす：マップ ---------- */
.map{margin:36px auto 0; max-width:400px}
.map svg{display:block; width:100%; height:auto}
.map text{font-family:var(--body); font-weight:700; letter-spacing:.06em}
.map svg .map-center{font-size:16px}
.map svg .map-sub{font-size:12px}
.map svg .map-nodes{font-size:16px}
@media (max-width:767px){
  /* スマホでは.wrapの左右パディング分だけ図をはみ出させ、実寸の文字サイズを確保する */
  .map{width:calc(100% + var(--pad)*2); max-width:none; margin-left:calc(var(--pad)*-1); margin-right:calc(var(--pad)*-1)}
}

/* ---------- 05 活用シーン ---------- */
.uses{display:grid; grid-template-columns:1fr; gap:12px; margin:36px 0 0}
@media (min-width:768px){ .uses{grid-template-columns:repeat(3,1fr); gap:14px} }
.use{
  background:#fff; border:1px solid var(--rule); border-radius:4px; padding:22px 20px 20px;
  box-shadow:0 1px 3px rgba(28,26,23,.04); transition:border-color .2s ease, box-shadow .2s ease;
}
.use:hover{border-color:var(--shu); box-shadow:0 4px 14px rgba(186,51,41,.08)}
.use__n{font-size:10.5px; letter-spacing:.24em; color:var(--shu); font-weight:700; margin-bottom:8px}
.use h3{font-size:16.5px; margin-bottom:6px}
.use p{font-size:13.5px; line-height:1.85; color:var(--sumi-mid)}

/* ---------- 06 診断 ---------- */
.field{
  position:relative; border:1px solid var(--sumi); border-radius:8px; background:rgba(255,255,255,.55); padding:36px 20px 28px;
  box-shadow:0 12px 34px rgba(28,26,23,.07);
}
@media (min-width:768px){ .field{padding:48px 40px 40px} }
.field .shot{margin:28px 0 32px}
.field__tag{position:absolute; top:-1px; left:-1px; background:var(--sumi); color:var(--paper); font-size:14px; letter-spacing:.22em; padding:4px 10px 4px 12px; line-height:1.6; font-weight:700; border-radius:8px 0 4px 0}
.gets{list-style:none; margin:0 0 30px; padding:0; border-top:1px solid var(--rule)}
.gets li{padding:12px 0 12px 30px; border-bottom:1px solid var(--rule-soft); font-size:14.5px; line-height:1.8; position:relative}
.gets li::before{content:""; position:absolute; left:6px; top:22px; width:12px; height:1px; background:var(--shu)}
.gets li span{display:block; color:var(--sumi-soft); font-size:12.5px; line-height:1.7}
.trust{font-size:12.5px; line-height:1.9; color:var(--sumi-soft); border-left:2px solid var(--rule); padding-left:12px; margin:26px 0 0}

.price{margin:32px 0 0; padding:24px 20px; text-align:center; border:1px solid var(--rule); border-radius:4px; background:rgba(255,255,255,.7); box-shadow:0 1px 3px rgba(28,26,23,.04)}
.price__num{font-family:var(--display); font-size:clamp(34px,9vw,44px); color:var(--shu); font-variant-numeric:tabular-nums; line-height:1}
.price__num small{font-family:var(--body); font-size:.36em; font-weight:700; color:var(--sumi-mid); letter-spacing:.04em; margin-left:6px}

.plan{display:grid; grid-template-columns:1fr; gap:12px; margin:28px 0 0}
@media (min-width:768px){ .plan{grid-template-columns:1fr 1fr; gap:14px} }

.form{margin-top:8px}
.f__group{margin-bottom:18px}
.f__label{display:block; font-size:12.5px; font-weight:700; letter-spacing:.06em; margin-bottom:6px}
.f__req{font-size:10px; color:var(--shu); margin-left:8px; letter-spacing:.1em; font-weight:700}
.f__opt{font-size:10px; color:var(--sumi-soft); margin-left:8px; letter-spacing:.1em}
.f__hint{font-size:11.5px; color:var(--sumi-soft); margin:-2px 0 8px; line-height:1.7}
input[type=text],input[type=email],input[type=url],select,textarea{
  width:100%; border:1px solid var(--rule); background:#fff; color:var(--sumi);
  padding:13px 12px; line-height:1.5; border-radius:4px; appearance:none; -webkit-appearance:none;
  transition:border-color .15s ease;
}
select{background-image:linear-gradient(45deg,transparent 50%,var(--sumi-soft) 50%),linear-gradient(135deg,var(--sumi-soft) 50%,transparent 50%); background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%; background-size:5px 5px; background-repeat:no-repeat; padding-right:36px}
textarea{min-height:96px; resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--shu); outline-offset:0; border-color:var(--shu)}
.f__err{display:none; font-size:12px; color:var(--shu); margin-top:6px}
.f__group.is-err .f__err{display:block}
.f__group.is-err input,.f__group.is-err select{border-color:var(--shu)}
.f__consent{font-size:12px; line-height:1.9; color:var(--sumi-soft); margin:8px 0 22px}
.f__consent a{text-decoration:underline; text-underline-offset:3px}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.done{display:none; padding:10px 0 0}
.done.is-on{display:block}
.form.is-off{display:none}

/* ---------- フッター ---------- */
.foot{padding-top:10px; padding-bottom:10px; border-top:1px solid var(--rule-soft)}
.foot dl{margin:0; font-size:12.5px; line-height:1.9}
.foot dt{font-size:10.5px; letter-spacing:.22em; color:var(--sumi-soft); font-weight:700; margin-top:14px}
.foot dd{margin:0}
.foot a{text-decoration:underline; text-underline-offset:3px}
.foot__c{font-size:11px; color:var(--sumi-soft); margin-top:26px; letter-spacing:.06em}