/* RevAis Lab コーポレート v5 —「判子 × AI」ハイブリッド
   2026-07-05 ケンジさん指示：生成りの紙（ぼてっと感）をやめ、
   ロゴと同じ 白×濃紺×オレンジ のスタイリッシュな土台に、
   判子のアナログ感（採用印・丸スタンプ・朱）をアクセントとして残す。 */
:root{
  --paper:#fafbfd;        /* 台紙（ほぼ白・わずかにクール） */
  --paper-deep:#eef2f7;   /* 帯（薄いクールグレー） */
  --sheet:#ffffff;        /* カードの白 */
  --ink:#12275a;          /* ロゴの濃紺 */
  --body:#3f4c66;         /* 本文 */
  --muted:#7d8899;        /* グレー */
  --shu:#d8502a;          /* 朱＝ロゴオレンジ寄り（印鑑・CTA） */
  --shu-deep:#bc3f1c;
  --line:#e2e7ef;         /* 罫線 */
  --rule:#ccd5e2;
  --grid:rgba(18,39,90,.04);
  --font-jp:"Noto Sans JP",sans-serif;
  --font-num:"Outfit","Noto Sans JP",sans-serif;
  --font-hand:"Yusei Magic",sans-serif;
  --shadow:0 14px 34px rgba(18,39,90,.09);
  --shadow-soft:0 6px 18px rgba(18,39,90,.06);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:56px} /* 追従する手紙バー（約40px）に隠れない着地位置 */
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:var(--paper);
  color:var(--body);
  font-family:var(--font-jp);
  font-size:15.5px;
  line-height:2.05;
  -webkit-font-smoothing:antialiased;
}
/* main配下の演出要素（ゴースト英字など）の横はみ出しだけをここで切り取る。
   html/bodyにoverflow-x:hiddenを置くとposition:stickyが効かなくなるため、範囲をmainに限定。
   さらにhiddenだとmainがスクロール容器になってホイールが食われるため、clip（切り取りのみ・
   スクロール容器を作らない）を使う。clip未対応の古いブラウザは1行目のhiddenで代用。 */
main{overflow-x:hidden;overflow-x:clip}
img{max-width:100%;display:block}
a{color:var(--shu);text-decoration:none}
a:hover{color:var(--shu-deep)}
:focus-visible{outline:2px solid var(--shu);outline-offset:2px}

.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.wrap.narrow{max-width:880px}
.center{text-align:center}
.sp-only{display:none}

/* ── 書類カード（共通の白い紙） ── */
.sheet{
  background:var(--sheet);
  border:1px solid var(--line);
  border-radius:6px;
  box-shadow:var(--shadow-soft);
}

/* ── ボタン（判子のような角） ── */
.btn{
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;border:none;cursor:pointer;text-align:center;
  font-family:var(--font-jp);font-weight:700;font-size:15px;line-height:1.5;
  border-radius:8px;padding:14px 30px;transition:transform .18s,background .18s,border-color .18s,box-shadow .18s;
}
.btn:hover{transform:translateY(-2px)}
.btn-solid{background:var(--shu);color:#fff;box-shadow:0 8px 22px rgba(207,79,40,.32)}
.btn-solid:hover{background:var(--shu-deep)}
.btn-ghost{background:var(--sheet);color:var(--ink);border:1.5px solid var(--ink);font-weight:700}
.btn-ghost:hover{border-color:var(--shu);color:var(--shu-deep)}
.btn-lg{padding:17px 38px;font-size:16.5px}
.btn-sub{font-size:11.5px;font-weight:500;opacity:.9}

/* ── 朱印（スタンプ） ── */
.stamp-seal{width:46px;height:46px;font-size:13px;border-width:2px;font-family:var(--font-jp)}

/* ── 手書き注釈（油性マジック） ── */
.handnote{
  font-family:var(--font-hand);color:var(--shu);
  font-size:17px;line-height:1.6;transform:rotate(-3deg);
}

/* ── 手紙バー（手紙経由の来訪者向け・スクロールしても常時追従） ── */
.letter-bar{position:sticky;top:0;z-index:100;background:var(--ink);text-align:center;padding:9px 16px}
.letter-bar a{color:#fff;font-size:13px;font-weight:700;letter-spacing:.04em}
.letter-bar a:hover{color:#ff8a54}
.letter-bar .lb-arrow{margin-left:8px;font-family:var(--font-num)}

/* ── ヘッダー ── */
.site-header{
  background:rgba(250,251,253,.9);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:70px}
.brand{display:flex;align-items:center;gap:10px}
.brand-logo{width:36px;height:36px}
.brand-name{font-family:var(--font-num);font-weight:800;font-size:18px;color:var(--ink)}
.gnav{display:flex;align-items:center;gap:26px}
.gnav a{color:var(--body);font-size:13.5px;font-weight:600}
.gnav a:hover{color:var(--shu-deep)}
.menu-toggle{display:none;background:none;border:none;cursor:pointer;width:40px;height:40px}
.menu-toggle span{display:block;width:22px;height:2px;background:var(--ink);margin:5px auto;transition:transform .3s,opacity .3s}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ── HERO ── */
.hero{position:relative;padding:102px 0 110px;overflow:hidden}
.hero-inner{position:relative;z-index:1;max-width:1120px}
.hero-text{max-width:660px}
/* ⛔ 冒頭の文章はPCとスマホで出し分ける（2026-08-30）。PCは3行のまま、スマホは4行に短縮 */
.sp-lead{display:none}
.sp-br{display:none}   /* ⛔スマホだけ改行する */
.sp-indent{display:inline}   /* PCでは何もしない */
/* ロゴマークの特大背景（9designの巨大「9」ロゴ演出を踏襲）＝左下に大きくにじませる */
.logo-watermark{
  position:absolute;z-index:0;pointer-events:none;user-select:none;
  left:-14%;bottom:-22%;height:150%;width:auto;
  opacity:.08;filter:saturate(1.3);
}
/* 採用の朱印（ChatGPT生成・透過済み）＝右側に大きく、枠が少しはみ出す */
.saiyo-stamp{
  position:absolute;z-index:0;pointer-events:none;user-select:none;
  right:1%;top:50%;
  height:94%;width:auto;
  transform:translateY(-50%) rotate(13deg);
  opacity:.92;
}
.index-tab{ /* 書類のインデックスタブ */
  display:inline-block;background:var(--ink);color:var(--sheet);
  font-weight:700;font-size:12.5px;letter-spacing:.14em;
  padding:7px 18px;border-radius:4px 4px 0 0;margin-bottom:18px;
  position:relative;
}
.index-tab::after{content:"";position:absolute;left:0;bottom:-6px;width:100%;height:6px;background:linear-gradient(rgba(32,48,79,.25),transparent)}
.hero-title{
  font-weight:900;font-size:clamp(32px,4.5vw,54px);line-height:1.5;color:var(--ink);
  letter-spacing:.01em;margin-bottom:26px;word-break:keep-all;
}
.hero-title .accent{position:relative;display:inline-block;color:var(--shu-deep)}
.marker{ /* 手書きマーカー線 */
  position:absolute;left:-2%;bottom:-4px;width:104%;height:12px;color:rgba(207,79,40,.55);
}
.marker path{stroke-dasharray:240;stroke-dashoffset:240;animation:draw 1s .5s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.marker path{animation:none;stroke-dashoffset:0}}
.hero-lead{max-width:600px;font-size:15.5px;margin-bottom:6px}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:64px}

/* ── ロゴ帯（マーキー・RevAis Lab流し／ロゴ配色＝濃紺地に白×オレンジ） ── */
.tapeline{
  overflow:hidden;padding:0;margin:26px 0 0;
  background:var(--ink);
}
.tapeline-track{display:flex;white-space:nowrap;animation:tapeflow 36s linear infinite;padding:13px 0}
.tapeline-track span{
  flex-shrink:0;
  font-family:var(--font-num);font-weight:800;font-size:29px;letter-spacing:.08em;
  color:#ffffff;
}
.tapeline-track em{font-style:normal;color:#ff8a54}
@keyframes tapeflow{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.tapeline-track{animation:none}}

/* ── セクション共通 ── */
.section{padding:110px 0;position:relative}
.section-alt{background:var(--paper-deep)}
.sec-head{display:flex;align-items:flex-start;gap:20px;margin-bottom:34px;position:relative}
.sec-head-center{justify-content:center;text-align:left}
.sec-ghost{ /* セクション名の特大ゴースト英字（オレンジ帯のob-ghostと同族） */
  position:absolute;left:-10px;bottom:26%;z-index:0;
  font-family:var(--font-num);font-weight:800;line-height:1;white-space:nowrap;
  font-size:clamp(64px,9.5vw,136px);letter-spacing:.05em;text-transform:uppercase;
  color:rgba(18,39,90,.06);pointer-events:none;user-select:none;
}
.sec-no{
  font-family:var(--font-num);font-weight:800;font-size:15px;color:#fff;
  background:var(--shu);border-radius:4px;padding:5px 11px;margin-top:8px;
  letter-spacing:.06em;flex-shrink:0;
  box-shadow:0 6px 14px rgba(216,80,42,.28);
  position:relative;z-index:1;
}
.sec-head > div{position:relative;z-index:1}
.sec-title{font-weight:900;font-size:clamp(25px,3.6vw,38px);line-height:1.5;color:var(--ink);text-wrap:balance;word-break:keep-all}
.sec-lead{color:var(--muted);margin-bottom:34px}
.sec-cta{margin-top:42px}
.prose p{margin-bottom:1.4em}
.prose p:last-child{margin-bottom:0}
.prose-q{font-weight:900;font-size:1.15em;color:var(--ink);margin-bottom:1.2em!important}
.prose-strong{font-weight:900;font-size:1.16em;color:var(--ink)}
.u-shu{font-style:normal;font-weight:700;color:var(--shu-deep);
  background:linear-gradient(transparent 68%,rgba(207,79,40,.18) 68%)}
.src-ref{color:var(--muted);font-size:.8em;vertical-align:super}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:26px 0 22px}
.fact{text-align:center;padding:24px 16px 20px;background:var(--sheet);border:1px solid var(--line);border-top:4px solid var(--shu);border-radius:14px;box-shadow:var(--shadow-soft)}
.fact-num{font-family:var(--font-num);font-weight:800;font-size:clamp(32px,4.4vw,50px);color:var(--shu);line-height:1;letter-spacing:.01em;display:block}
.fact-label{margin:14px 0 0;font-size:13.5px;font-weight:700;color:var(--ink);line-height:1.7}
.fact-note{margin:7px 0 0;font-size:11.5px;color:var(--muted);line-height:1.6}
.src-note{font-size:12px;color:var(--muted)}

/* WHY の紙 */
#why .sheet{padding:44px 46px;position:relative}
.note-abs{position:absolute;right:26px;bottom:-16px;background:var(--paper);padding:2px 10px}

/* ── PROMISE（丸判子スタイル・採用印と同族／3つ同格） ── */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:26px;justify-items:center}
.tile{display:flex;justify-content:center;background:none;border:none;box-shadow:none;padding:0}
.seal-card{
  width:min(360px,100%);aspect-ratio:1;border-radius:50%;
  background:var(--sheet);
  border:5px solid var(--shu);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:40px 30px;position:relative;
  box-shadow:0 20px 44px rgba(216,80,42,.16);
  transition:transform .22s,box-shadow .22s;
}
.seal-card::after{ /* 判子の内リング */
  content:"";position:absolute;inset:10px;border-radius:50%;
  border:1.5px solid rgba(216,80,42,.45);pointer-events:none;
}
.tile:nth-child(1) .seal-card{transform:rotate(-2.5deg)}
.tile:nth-child(2) .seal-card{transform:rotate(1.5deg)}
.tile:nth-child(3) .seal-card{transform:rotate(-1deg)}
.tile:hover .seal-card{transform:translateY(-6px) rotate(0);box-shadow:0 26px 56px rgba(216,80,42,.26)}
.tile-xl{
  font-weight:900;font-size:clamp(21px,2.3vw,27px);line-height:1.5;color:var(--ink);
  font-feature-settings:"tnum";margin-bottom:14px;word-break:keep-all;
}
.tile-xl em{font-style:normal;font-size:1.75em;color:var(--shu);font-family:var(--font-num);letter-spacing:0;display:inline-block;line-height:1}
.tile-sub{font-size:12.5px;color:var(--muted);line-height:1.8;max-width:220px}
.tile-free{color:var(--shu);font-weight:900;background:linear-gradient(transparent 62%,rgba(216,80,42,.16) 62%);padding:0 1px}

/* ── FLOW（工程表） ── */
.flow-list{list-style:none;padding:14px 40px;margin-top:10px}
.flow-list li{
  display:grid;grid-template-columns:110px 1fr;gap:24px;align-items:start;
  padding:24px 0;border-bottom:1px dashed var(--rule);font-size:14.5px;
}
.flow-list li:last-child{border-bottom:none}
.flow-no{
  font-family:var(--font-num);font-weight:800;font-size:14px;color:var(--shu);
  border:1.5px solid var(--shu);border-radius:4px;text-align:center;padding:5px 0;margin-top:4px;
  letter-spacing:.08em;white-space:nowrap;
}
.flow-list strong{display:block;color:var(--ink);font-size:16.5px;margin-bottom:4px;font-weight:900}

/* 手紙コールアウト（白カード＋親展スタンプ） */
.envelope{
  margin-top:52px;position:relative;overflow:hidden;
  background:var(--sheet);border:1.5px solid rgba(216,80,42,.45);border-radius:10px;
  padding:36px 34px 34px;box-shadow:var(--shadow);
}
.env-mark{
  position:absolute;top:26px;right:26px;
  font-weight:700;color:var(--shu);border:2px solid var(--shu);border-radius:4px;
  padding:2px 8px;font-size:12.5px;letter-spacing:.3em;transform:rotate(4deg);opacity:.85;
}
/* ⛔ 末尾ブロックのCTAと同じ3段構え（2026-08-30）＝朱の小さい一言／特大の見出し／幅いっぱいの朱ボタン。
   ここに辿り着く人は最も申し込みに近いので、いちばん強い見せ方を当てる */
.env-eyebrow{font-weight:700;color:var(--shu);font-size:12.5px;letter-spacing:.12em;margin-bottom:14px}
.env-lead{font-weight:900;color:var(--ink);font-size:clamp(24px,3.2vw,32px);line-height:1.55;
  letter-spacing:.01em;margin-bottom:26px}
.btn-wide{width:100%}

/* ── PRICING（月額ヒーロー＋紹介会社比較） ── */
.price-hero{padding:56px 46px 46px;margin-bottom:30px;text-align:center;position:relative}
.ph-zero{
  display:inline-block;font-weight:900;color:var(--ink);font-size:15px;
  border:2.5px solid var(--ink);border-radius:999px;padding:7px 26px;margin-bottom:24px;letter-spacing:.08em;
}
.ph-zero em{font-style:normal;color:var(--shu);font-family:var(--font-num);font-weight:800;font-size:1.3em;margin-left:6px;vertical-align:-1px}
.ph-main{display:flex;align-items:baseline;justify-content:center;gap:8px;color:var(--ink)}
.ph-cur{font-weight:900;font-size:clamp(20px,2.6vw,28px)}
.ph-num{
  font-style:normal;font-family:var(--font-num);font-weight:800;
  font-size:clamp(66px,10vw,110px);line-height:1;color:var(--shu);letter-spacing:.01em;
  font-feature-settings:"tnum";
}
.ph-unit{font-weight:900;font-size:clamp(20px,2.6vw,28px)}
.ph-unit small{font-size:.58em;color:var(--muted);font-weight:700;margin-left:4px}
.ph-line{font-size:clamp(15px,2vw,18.5px);font-weight:500;color:var(--ink);margin:20px auto 28px;max-width:600px}
.ph-line strong{font-weight:900;background:linear-gradient(transparent 68%,rgba(207,79,40,.18) 68%)}
.ph-line .nw{white-space:nowrap}
.ph-notes{list-style:none;display:grid;gap:7px;max-width:600px;margin:0 auto;text-align:left;border-top:1px dashed var(--rule);padding-top:22px}
.ph-notes li{position:relative;padding-left:20px;font-size:13.5px;color:var(--body)}
.ph-notes li::before{content:"・";position:absolute;left:2px;color:var(--shu)}

.compare{padding:44px 46px 42px;margin-bottom:34px;text-align:center;border-left:5px solid var(--shu)}
.cmp-lead{font-size:clamp(17px,2.2vw,21px);font-weight:700;line-height:1.9;margin-bottom:0;color:var(--ink)}
.cmp-punch{font-weight:900;color:var(--ink);font-size:clamp(19px,2.8vw,26px);line-height:1.7}
.cmp-big{font-style:normal;font-family:var(--font-num);font-weight:800;letter-spacing:.01em;font-feature-settings:"tnum"}
.cmp-lead .cmp-big{color:var(--shu);font-size:1.9em;line-height:1;vertical-align:-2px}
.cmp-punch .cmp-big{font-size:1.9em;line-height:1;vertical-align:-2px}
.cmp-shu{color:var(--shu)}

/* ── ORANGE BAND（塗りオレンジの強調帯／ロゴAisのオレンジ単色・全面） ── */
.orange-band{
  position:relative;overflow:hidden;padding:96px 0;
  background:#ee5b2b; /* ロゴ「Ais」のオレンジ */
}
.ob-ghost{ /* 裏側のゴースト文字 */
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-family:var(--font-num);font-weight:800;white-space:nowrap;
  font-size:clamp(120px,16vw,230px);letter-spacing:.02em;
  color:rgba(255,255,255,.08);pointer-events:none;user-select:none;
}
.ob-eyebrow{
  font-family:var(--font-num);font-weight:800;font-size:13px;letter-spacing:.4em;
  color:rgba(255,255,255,.75);margin-bottom:14px;
}
.ob-title{font-weight:900;font-size:clamp(26px,4vw,40px);color:#fff;margin-bottom:16px;text-wrap:balance}
.ob-lead{color:rgba(255,255,255,.88);font-size:15.5px;margin-bottom:34px}
.btn-white{background:#fff;color:var(--shu-deep);box-shadow:0 12px 30px rgba(0,0,0,.18)}
.btn-white:hover{background:#fff5f0}
.ob-cta{display:flex;justify-content:center;align-items:center;gap:16px;flex-wrap:wrap}
.btn-ob-line{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.8)}
.btn-ob-line:hover{background:rgba(255,255,255,.14);border-color:#fff}
.ob-mail{margin-top:22px;font-size:13px;color:rgba(255,255,255,.8)}
.ob-mail a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.ob-mail a:hover{color:#fff5f0}

/* ── FAQ ── */
.faq-list{display:grid;gap:12px;margin-top:8px}
.faq-item{overflow:hidden;transition:box-shadow .2s,border-color .2s}
.faq-item[open]{border-color:rgba(207,79,40,.5);box-shadow:var(--shadow)}
.faq-item summary{
  cursor:pointer;list-style:none;padding:19px 54px 19px 24px;
  font-weight:700;color:var(--ink);font-size:15px;position:relative;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::before{content:"問．";color:var(--shu);font-weight:900;margin-right:8px}
.faq-item summary::after{
  content:"";position:absolute;right:24px;top:50%;
  width:10px;height:10px;margin-top:-8px;
  border-right:2.5px solid var(--shu);border-bottom:2.5px solid var(--shu);
  transform:rotate(45deg);transition:transform .25s;
}
.faq-item[open] summary::after{transform:rotate(225deg);margin-top:-2px}
.faq-item p{padding:0 24px 22px 24px;font-size:14px}

/* ── ABOUT ── */
.about-table{margin-bottom:34px;padding:10px 34px}
.about-table > div{display:grid;grid-template-columns:150px 1fr;gap:14px;padding:16px 2px;border-bottom:1px solid var(--line)}
.about-table > div:last-child{border-bottom:none}
.about-table dt{color:var(--muted);font-size:13.5px;padding-top:2px;font-weight:700;letter-spacing:.1em}
.about-table dd{color:var(--ink);font-size:14.5px}
.rep{display:grid;grid-template-columns:200px 1fr;gap:36px;align-items:start;padding:38px 42px}
.rep-photo{position:relative;border:1px solid var(--line);background:#fff;padding:8px 8px 26px;box-shadow:var(--shadow-soft);transform:rotate(-2deg)}
.rep-photo img{aspect-ratio:1/1;object-fit:cover;width:100%}
.rep-label{font-size:12px;font-weight:700;letter-spacing:.3em;color:var(--shu);margin-bottom:14px}
.rep-text p{margin-bottom:1.2em;font-size:14.5px}
.rep-text p:last-child{margin-bottom:0}
.rep-sign{
  display:flex;align-items:center;justify-content:flex-end;gap:14px;
  font-weight:700;color:var(--ink);border-top:1px dashed var(--rule);padding-top:18px;margin-top:22px;
}

/* ── フッター ── */
.site-footer{background:var(--ink);padding:66px 0 46px;text-align:center}
.footer-logo{width:48px;height:48px;margin:0 auto 18px;border-radius:8px;background:#fff;padding:6px}
.footer-line{color:#fff;font-weight:700;font-size:15.5px;margin-bottom:28px;letter-spacing:.05em}
.footer-nav{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 28px;margin-bottom:24px}
.footer-nav a{color:rgba(255,255,255,.6);font-size:12.5px}
.footer-nav a:hover{color:#fff}
.copyright{color:rgba(255,255,255,.45);font-size:12px;font-family:var(--font-num);letter-spacing:.08em}

/* ── 固定相談ボタン（スマホのみ） ── */
.fab{display:none}

/* ── チャットボット ── */
.bot-overlay{
  position:fixed;inset:0;z-index:200;background:rgba(32,48,79,.5);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;padding:22px;
  overscroll-behavior:contain;
}
.bot-overlay[hidden]{display:none}
.bot{
  width:min(480px,100%);max-height:min(680px,calc(100dvh - 44px));
  background:var(--sheet);border:1px solid var(--line);border-radius:14px;
  display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 40px 100px rgba(32,48,79,.45);
}
.bot-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:15px 20px;border-bottom:1px solid var(--line);background:var(--paper);
}
.bot-title{font-weight:800;color:var(--ink);font-size:14px}
.bot-close{background:none;border:none;color:var(--muted);font-size:22px;cursor:pointer;line-height:1;padding:4px 8px}
.bot-close:hover{color:var(--ink)}
.bot-body{padding:20px;overflow-y:auto;display:flex;flex-direction:column;gap:12px;background:var(--paper);overscroll-behavior:contain}
.bot-msg{
  background:var(--sheet);border:1px solid var(--line);border-radius:4px 14px 14px 14px;
  padding:13px 16px;font-size:13.5px;line-height:1.9;max-width:94%;
  white-space:pre-line;color:var(--body);box-shadow:var(--shadow-soft);
}
.bot-msg strong{color:var(--ink)}
.bot-choices{display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.bot-choice{
  background:var(--sheet);border:1.5px solid var(--shu);color:var(--shu-deep);
  border-radius:999px;padding:9px 18px;font-size:13.5px;font-weight:700;cursor:pointer;
  font-family:var(--font-jp);transition:background .2s,color .2s;text-align:center;
}
.bot-choice:hover{background:var(--shu);color:#fff}
.bot-user{
  align-self:flex-end;background:var(--shu);color:#fff;font-weight:700;
  border-radius:14px 4px 14px 14px;padding:10px 16px;font-size:13.5px;max-width:88%;
}
.bot-form{display:flex;flex-direction:column;gap:10px;background:var(--sheet);border:1px solid var(--line);border-radius:10px;padding:16px}
.bot-form label{font-size:12px;color:var(--muted);font-weight:700}
.bot-form input,.bot-form textarea{
  width:100%;background:#fff;border:1px solid var(--rule);border-radius:6px;
  color:var(--ink);font-family:var(--font-jp);font-size:14px;padding:11px 12px;
}
.bot-form input:focus,.bot-form textarea:focus{outline:2px solid var(--shu);outline-offset:0;border-color:transparent}
.bot-form textarea{resize:vertical;min-height:64px}
.bot-form .hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.bot-steps{display:flex;align-items:stretch;gap:8px;background:var(--paper);border:1px dashed var(--rule);border-radius:8px;padding:12px 8px;margin-top:2px}
.bot-steps > div{flex:1;text-align:center;position:relative}
.bot-steps .st-no{
  display:inline-flex;width:20px;height:20px;border-radius:50%;
  background:var(--shu);color:#fff;font-weight:800;font-size:11px;
  align-items:center;justify-content:center;font-family:var(--font-num);
}
.bot-steps .st-t{display:block;font-size:11.5px;font-weight:700;color:var(--ink);margin-top:4px;line-height:1.4}
.bot-steps .st-s{display:block;font-size:11px;color:var(--shu-deep);font-weight:700;line-height:1.4}
.bot-steps > div:not(:last-child)::after{
  content:"›";position:absolute;right:-7px;top:50%;transform:translateY(-50%);
  color:var(--shu);font-weight:700;font-size:14px;
}
.bot-send{
  background:var(--shu);border:none;color:#fff;font-weight:700;font-size:14.5px;
  border-radius:8px;padding:12px;cursor:pointer;font-family:var(--font-jp);
}
.bot-send:hover{background:var(--shu-deep)}
.bot-send:disabled{opacity:.6;cursor:wait}
.bot-error{color:var(--shu-deep);font-size:12px}
/* 相談モード＝チャットUI（大きめ固定サイズ＋入力バー） */
.bot--chat{width:min(560px,100%);height:min(720px,calc(100dvh - 44px));max-height:none}
.bot-inputbar{display:flex;gap:10px;padding:12px 14px;border-top:1px solid var(--line);background:var(--sheet)}
.bot-inputbar[hidden]{display:none}
.bot-inputbar input{
  flex:1;background:#fff;border:1px solid var(--rule);border-radius:999px;
  padding:11px 18px;font-family:var(--font-jp);font-size:14px;color:var(--ink);
}
.bot-inputbar input::placeholder{color:var(--muted);font-size:12.5px}
.bot-inputbar input:focus{outline:2px solid var(--shu);border-color:transparent}
.bot-inputsend{
  background:var(--shu);border:none;color:#fff;font-weight:700;
  border-radius:999px;padding:0 22px;cursor:pointer;font-family:var(--font-jp);font-size:13.5px;
}
.bot-inputsend:hover{background:var(--shu-deep)}

/* ── 出現アニメーション ── */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .65s ease,transform .65s ease}
.reveal.is-visible{opacity:1;transform:none}
/* 判子はポンと押される */
.reveal .stamp{transition:transform .35s cubic-bezier(.2,1.6,.4,1),opacity .3s}
.reveal:not(.is-visible) .stamp{transform:scale(1.6) rotate(-6deg);opacity:0}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ── レスポンシブ ── */
@media (max-width:960px){
  .saiyo-stamp{height:88%;right:-18%;opacity:.3}
  .tiles{grid-template-columns:1fr;gap:26px;max-width:480px;margin-left:auto;margin-right:auto}
  .rep{grid-template-columns:1fr;gap:30px}
  .rep-photo{max-width:220px}
  .price-hero{padding:44px 28px 38px}
  .compare{padding:36px 26px 34px}
}
@media (max-width:760px){
  /* ⛔ スマホでは朱印を出さない（2026-08-30 ケンジさん指摘）。本文に被って邪魔になる */
  .saiyo-stamp{display:none}
  /* ⛔ ロゴのゴースト。上下は中央、左右は画面幅ぴったり（145vwは寄せすぎたので戻した） */
  .logo-watermark{height:auto;width:100vw;left:0;top:50%;bottom:auto;
    transform:translateY(-50%);opacity:.10}
  /* ⛔ ゴースト英字は見出しの真裏に置かない（2026-08-30 ケンジさん指摘）。
     スマホは見出しが2行に折り返すので、bottom:38% だと文字同士が完全に重なって
     本文が読みにくい。見出しの上へ逃がして独立させる。
     ⛔ 位置と濃さはセットで直す。被ったまま濃くすると本文が読めなくなる。
        逃がしたぶん .06 → .15 まで上げられる（薄すぎて見えない、の解消） */
  .sec-ghost{font-size:clamp(30px,8.4vw,40px);top:0;bottom:auto;left:-2px;
    color:rgba(18,39,90,.15);
    max-width:100%;overflow:hidden;white-space:nowrap}
  /* ⛔ 数字の2枚を横に並べない。縦に積む（横だと縦に間延びして読みにくい） */
  .facts{display:grid;grid-template-columns:1fr;gap:14px;margin:22px 0 18px;
    max-width:420px;margin-left:auto;margin-right:auto}
  .fact{padding:22px 18px 18px}
  .fact-num{font-size:clamp(34px,10vw,44px)}
  .fact-label{font-size:13px;line-height:1.75;margin-top:10px}
  .fact-note{font-size:11px}
  body{font-size:14.5px}
  .sp-only{display:inline}
  .section{padding:78px 0}
  /* ⛔ タブはスマホでも出す（2026-08-30 ケンジさん指示） */
  .index-tab{margin-bottom:14px;font-size:11.5px;padding:6px 15px}
  /* ⛔ 開いた瞬間、帯が画面の底にぴたっと来るようにする。
     中身が増えても潰れないよう min-height（下限）で確保する。
     画面高から差し引く：お手紙バー37 ＋ ヘッダー70 ＋ 帯39 ＋ heroのpadding
     ⛔ 100dvh は使わない（2026-08-30）。スマホはスクロールでアドレスバーが縮むと
        dvh の値そのものが伸びる＝heroが後から縦に伸びて、FV最終行と帯の間に
        余白が生まれる。svh（アドレスバーが出ている側で固定）なら動かない */
  .hero{padding:22px 0 14px;min-height:calc(100vh - 37px - 70px - 39px - 36px);
    min-height:calc(100svh - 37px - 70px - 39px - 36px);
    display:flex;align-items:flex-start}
  .hero-inner{width:100%}
  /* ⛔ 4行に分けて文字を大きく（2026-08-30 ケンジさん指示）
     御社の／採用サイトを、／先に作って／お見せします。 */
  .sp-br{display:inline}
  /* ⛔ 2行目だけ少し右にずらす（2026-08-30 ケンジさん指示） */
  .sp-indent{display:inline-block;margin-left:1.5em}
  .hero-title{font-size:clamp(34px,10.2vw,44px);word-break:normal;line-height:1.4;
    margin-bottom:22px}
  /* ⛔ スマホでは短い方を出す */
  .pc-lead{display:none}
  .sp-lead{display:block}
  .hero-lead{font-size:14.5px;line-height:1.9;margin-bottom:0}
  .sp-lead .hero-lead + .hero-lead{margin-top:14px}
  /* ⛔ 冒頭のボタンはスマホでは出さない。料金も約束もまだ見ていない段階では押せない */
  .hero .cta-row{display:none}
  /* ⛔ ヘッダーを本文より前に出す（2026-08-30）。HERO側が z-index:1 を持っているため、
     指定が無いとメニューの上に本文が描画されて重なって見える。
     お手紙バー100・申し込みモーダル200の間に置く */
  .site-header{position:relative;z-index:150}
  /* ⛔ top:70px（固定）で置かない。お手紙バー37pxを勘定できておらず、
     ページ最上部ではヘッダーに食い込む。top:100% ＝ ヘッダーの下端に常に付く */
  .gnav{
    position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;
    background:#fffdf8;border-bottom:1px solid var(--line);
    box-shadow:0 12px 24px rgba(18,39,90,.08);
    padding:18px 24px 26px;gap:4px;display:none;
  }
  .gnav.is-open{display:flex}
  .gnav a{padding:13px 4px;border-bottom:1px solid var(--line);font-size:15px}
  .menu-toggle{display:block}
  .cta-row .btn{width:100%}
  /* ⛔ 上の余白はゴースト英字の居場所。削ると見出しに重なって戻る */
  .sec-head{gap:12px;padding-top:30px}
  .section{overflow:hidden}
  /* ⛔ 見出しが画面からはみ出して切れるので、2行でよいから普通に折り返す */
  .sec-title{font-size:clamp(21px,5.8vw,27px);line-height:1.6;
    word-break:normal;overflow-wrap:anywhere}
  .sec-no{margin-top:4px}
  .about-table{padding:6px 20px}
  .about-table > div{grid-template-columns:1fr;gap:2px}
  .flow-list{padding:6px 20px}
  .flow-list li{grid-template-columns:1fr;gap:8px}
  .flow-no{display:inline-block;width:92px}
  /* ⛔ 追いかけてくるボタンは消す */
  .fab{display:none}
  /* ⛔ スクロールする帯が太すぎるので細く */
  .tapeline{margin-top:0}
  .tapeline-track{padding:8px 0}
  .tapeline-track span{font-size:19px;letter-spacing:.06em}
  .bot-overlay{padding:0;align-items:flex-end}
  .bot{width:100%;max-height:92dvh;border-radius:14px 14px 0 0}
  .bot--chat{width:100%;height:92dvh}
}


/* ⛔ 月3,300円の価値そのもの（2026-08-30・末尾ブロックと同じ扱い）。文中に埋めない */
.ph-pitch{max-width:560px;margin:0 auto 24px;padding:24px 22px;
  background:var(--ink,#12275a);border-radius:10px;color:#fff;
  font-size:19px;line-height:1.75;font-weight:900;text-align:center;letter-spacing:.01em}
.ph-pitch em{font-style:normal;color:#ff7a4d}

/* ⛔ 保守の範囲。線は「そのまま作業に入れるか」1本（2026-08-30・末尾ブロックと同じ） */
.ph-scope{display:inline-block;margin-top:10px;font-size:12.5px;
  line-height:1.85;color:var(--muted,#7d8899);font-weight:400}