/* ============================================================
   おこさらまんち BtoB出展募集LP  ―  骨格ドラフト
   assets/css/style.css
   ============================================================ */

/* ---------- minimal reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html,body,h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,ul,ol{ margin:0; padding:0; }
ul,ol{ list-style:none; }

/* ========================================================================
   TOKENS  ―  白基調 / ターコイズ=専門性・サービス / くすみピンク=共感・問い合わせ
   単一テーマ（ライト）に意図的にコミット。全色を明示的に塗る。
   ======================================================================== */
:root{
  --white:        #FFFFFF;
  --ink:          #24384F;   /* 濃いネイビー = 本文 */
  --ink-mid:      #55697F;
  --ink-soft:     #7D8FA1;
  --ink-strong:   #262626;   /* FV見出し専用のほぼ黒（クライアント支給デザイン準拠） */

  --turq:         #2FAEBB;   /* 主色 */
  --turq-deep:    #1B8794;
  --turq-line:    #B8E4E9;
  --mint:         #E9F6F8;   /* 淡いミント背景 */

  --pink:         #E38AA0;   /* 差し色 */
  --pink-deep:    #CE6A83;
  --pink-line:    #F4CBD6;
  --pink-pale:    #FCEDF1;   /* ペールピンク背景 */

  --beige:        #FBF3D9;   /* 明るいパステル調に調整（旧 #F7F2E8 はくすんで見えるため） */
  --beige-line:   #F1DFAF;   /* 旧 #EADFC9 */
  --beige-deep:   #986E24;   /* ベージュの同系色（暖色のゴールドブラウン）。旧 #8A6A38 より明るく黄みを強めた */

  --green:        #257A60;   /* FVバッジ「1日8社限定」専用（クライアント支給デザイン準拠、白文字コントラストのため原色より濃く調整） */
  --green-deep:   #1B5C48;

  --line:         #06C755;   /* LINE公式カラー */
  --line-deep:    #05A648;

  --page-ground:  #E7EFF1;
  --hair:         #E4EAEF;

  --sh-card:  0 8px 20px -14px rgba(36,56,79,.28);
  --sh-lift:  0 14px 30px -16px rgba(36,56,79,.34);
  --sh-btn:   0 10px 20px -12px rgba(36,56,79,.42);

  --r-card: 18px;
  --r-sm:   12px;

  --pad: 20px;

  --f-disp: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
  --f-body: "Zen Kaku Gothic New", "Hiragino Sans", "Noto Sans JP", sans-serif;
  --f-num:  "Outfit", "Zen Maru Gothic", sans-serif;
  --f-hand: "Yomogi", "Zen Maru Gothic", sans-serif; /* 手書き風（#voiceの吹き出し本文専用） */
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; color-scheme:light; }

body{
  margin:0;
  background: var(--page-ground);
  color: var(--ink);
  font-family: var(--f-body);
  font-size:16px;
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }
h1,h2,h3,h4{ margin:0; font-family:var(--f-disp); text-wrap:balance; line-height:1.55; }
p{ margin:0; }

:focus-visible{ outline:3px solid var(--turq); outline-offset:3px; border-radius:6px; }

/* ---- 375px基準 / 320〜430pxで自然に伸縮 ---- */
.page{
  max-width:430px;
  min-width:320px;
  margin:0 auto;
  background: var(--white);
  position:relative;
  overflow-x:clip;
}
@media (min-width:460px){
  .page{ box-shadow: 0 0 60px -20px rgba(36,56,79,.35); }
}

/* ========================= 共通パーツ ========================= */
.sec{ padding:76px var(--pad); position:relative; overflow:hidden; scroll-margin-top:64px; }
.sec--tight{ padding-block:64px; }
.sec--wide{ padding-block:88px; }
.sec--white{ background:var(--white); }
.sec--mint{ background:var(--mint); }
.sec--beige{ background:var(--beige); }
.sec--pink{ background:var(--pink-pale); }
.inner{ position:relative; z-index:1; }

.eyebrow{
  display:block;
  font-family:var(--f-num);
  font-size:13.5px; font-weight:600; letter-spacing:.16em;
  color:var(--turq); text-transform:uppercase;
  margin-bottom:8px;
}
.eyebrow--pink{ color:var(--pink-deep); }
.eyebrow--dot{ display:flex; align-items:center; gap:8px; }
.eyebrow--dot::before{ content:""; width:20px; height:2px; background:currentColor; border-radius:2px; }

.h-sec{ font-size:26px; font-weight:900; letter-spacing:.01em; }
.h-sec .em{ color:var(--turq); }
.h-sec .em-p{ color:var(--pink-deep); }
.sec-lead{ margin-top:14px; font-size:15px; color:var(--ink-mid); line-height:1.85; }

.card{
  background:var(--white);
  border-radius:var(--r-card);
  box-shadow:var(--sh-card);
  padding:22px 20px;
}
.card-list{ display:flex; flex-direction:column; gap:16px; margin-top:26px; }

.n-big{ font-family:var(--f-num); font-weight:700; font-feature-settings:"tnum"; font-variant-numeric:tabular-nums; line-height:1; }

/* ---- ボタン ---- */
.btn{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; min-height:58px; padding:14px 20px;
  border:none; border-radius:999px; cursor:pointer;
  font-family:var(--f-disp); font-weight:700; font-size:16.5px; line-height:1.4;
  box-shadow:var(--sh-btn);
  transition:transform .18s ease, box-shadow .18s ease;
}
.btn:active{ transform:translateY(1px); }
.btn--contact{ background:var(--pink); color:#fff; }
.btn--dl{ background:var(--turq); color:#fff; }
.btn--ghost{
  background:var(--white); color:var(--turq-deep);
  border:1.5px solid var(--turq-line); box-shadow:var(--sh-card);
}
.btn .arw{ width:18px; height:18px; flex:none; }

.btn-note{
  display:flex; align-items:center; justify-content:center; gap:6px;
  font-size:14px; font-weight:700; color:var(--ink-mid);
  margin-bottom:10px; text-align:center; line-height:1.5;
}
.btn-note::before,.btn-note::after{
  content:""; width:14px; height:1.5px; background:var(--ink-soft); opacity:.5; flex:none;
}
/* 訴求を強めたい注記（固定CTAのキャンペーン文言など）。一段大きく・濃く */
.btn-note--lg{ font-size:16px; font-weight:900; color:var(--pink-deep); }
.btn-note--lg::before,.btn-note--lg::after{ background:var(--pink-deep); opacity:.45; width:16px; }

/* ---- 装飾ブロブ（画面端に寄せる） ---- */
.blob{ position:absolute; border-radius:50%; z-index:0; pointer-events:none; }

/* ---- 写真プレースホルダ ---- */
.ph{
  position:relative; overflow:hidden;
  background:linear-gradient(140deg,#EFF7F8 0%,#F8F1E9 100%);
  color:var(--turq-deep);
  display:flex; align-items:center; justify-content:center;
}
.ph svg{ width:100%; height:100%; }
.lineart{ fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }

/* ---- 横スワイプレール（次カードを端に覗かせる） ---- */
.rail{
  display:flex; gap:16px;
  margin:22px calc(var(--pad) * -1) 0;
  padding:6px var(--pad) 14px;
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  scrollbar-width:none;
}
.rail::-webkit-scrollbar{ display:none; }
.rail > *{ flex:0 0 auto; scroll-snap-align:start; }
.swipe-hint{
  display:flex; align-items:center; gap:6px;
  font-family:var(--f-num); font-size:12.5px; font-weight:600; letter-spacing:.1em;
  color:var(--ink-soft); margin-top:2px;
}

/* ========================= ヘッダー ========================= */
.hdr{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--hair);
  height:58px;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:0 12px 0 var(--pad);
}
.logo{ display:flex; align-items:center; gap:8px; flex:1 1 auto; min-width:0; }
.logo-mark{ width:26px; height:26px; flex:none; border-radius:50%; object-fit:cover; background:var(--mint); }
.logo-text{ min-width:0; }
.logo-txt{ display:block; font-family:var(--f-disp); font-weight:900; font-size:16px; letter-spacing:.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.logo-sub{ display:block; font-family:var(--f-body); font-weight:500; font-size:11px; color:var(--ink-soft); letter-spacing:.04em; line-height:1; margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.hdr-btns{ display:flex; align-items:center; gap:5px; flex:none; }
.hdr-line,.hdr-cta{
  display:flex; align-items:center; justify-content:center; gap:4px;
  height:34px; padding:0 10px; border-radius:999px;
  font-family:var(--f-disp); font-weight:700; font-size:13px; white-space:nowrap;
  box-shadow:var(--sh-card);
}
.hdr-line{ background:var(--line); color:#fff; }
.hdr-cta{ background:var(--pink); color:#fff; }
.hdr-line svg,.hdr-cta svg{ width:13px; height:13px; flex:none; }

/* 320〜374px：ラベルとサブタイトルを隠し、アイコンのみの丸ボタンにする */
@media (max-width:374px){
  .logo-sub{ display:none; }
  .hdr-line .lb,.hdr-cta .lb{ display:none; }
  .hdr-line,.hdr-cta{ width:34px; padding:0; }
}

/* ========================= ファーストビュー ========================= */
.fv{ background:var(--white); padding:38px var(--pad) 32px; position:relative; overflow:hidden; }
.fv .b1{ width:230px; height:230px; background:var(--mint); top:-90px; right:20px; }
.fv .b2{ width:150px; height:150px; background:var(--pink-pale); top:210px; left:-84px; }
.fv .b3{ width:88px;  height:88px;  background:var(--beige); top:96px; right:-30px; }

.fv-target{
  display:inline-flex; align-items:center; gap:7px;
  background:var(--mint); color:var(--turq-deep);
  border-radius:999px; padding:7px 15px;
  font-family:var(--f-disp); font-weight:700; font-size:14px;
}
.fv-target svg{ width:15px; height:15px; }

.fv-name{
  margin-top:22px;
  font-family:var(--f-disp); font-weight:900; font-size:16px; line-height:1.5; color:var(--turq-deep);
}

.fv-benefit{
  position:relative;
  margin-top:18px;
  /* 元はh1だったため見出しフォントが自動で当たっていた。h1を中の.fv-benefit-textへ移した後も
     同じ見た目を保つよう、ここで明示している */
  font-family:var(--f-disp);
  font-size:30px; font-weight:900; line-height:1.4; letter-spacing:.01em;
  color:var(--ink-strong);
  min-height:308px; /* 絶対配置の写真（top44+height258）の下端まで確保し、下のカードと重ならないようにする */
}
/* 写真：右端は画面端までぴったり（白フチなし）。上下左はオーバーレイのグラデーションで
   白背景へソフトにフェードさせる（マスクではなく白グラデーション重ねなので旧ブラウザでも崩れない）。
   バッジ・見出しテキストの側に z-index を張って、常に文字が写真の上に読める。 */
.fv-benefit-photo-wrap{
  position:absolute; z-index:0; overflow:hidden;
  top:44px; right:calc(var(--pad) * -1);
  width:320px; height:258px;
}
.fv-benefit-photo{
  width:100%; height:100%; object-fit:cover; object-position:62% 30%;
  pointer-events:none;
  -webkit-user-select:none; user-select:none;
}
.fv-photo-fade{ position:absolute; pointer-events:none; }
.fv-photo-fade--left{
  top:0; left:0; bottom:0; width:44%;
  background:linear-gradient(to right, var(--white) 0%, rgba(255,255,255,0) 100%);
}
.fv-photo-fade--top{
  top:0; left:0; right:0; height:30%;
  background:linear-gradient(to bottom, var(--white) 0%, rgba(255,255,255,0) 100%);
}
.fv-photo-fade--bottom{
  bottom:0; left:0; right:0; height:26%;
  background:linear-gradient(to top, var(--white) 0%, rgba(255,255,255,0) 100%);
}

.fv-badges{
  position:relative; z-index:1;
  display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; gap:10px;
  margin-bottom:16px;
}
.fv-badge{
  display:inline-block;
  font-family:var(--f-disp); font-weight:700; font-size:.9em; color:#fff;
  padding:9px 20px 10px; border-radius:14px;
}
.fv-badge--pink{
  background:var(--pink-deep);
  box-shadow:0 8px 18px -10px rgba(206,106,131,.6);
}
.fv-badge--green{
  background:var(--green);
  box-shadow:0 8px 18px -10px rgba(37,122,96,.6);
}
.fv-benefit-text{
  position:relative; z-index:1; display:block;
  /* h1になったことで h1,h2,h3,h4 の line-height:1.55 が効いてしまうため、
     親（.fv-benefit）の1.4を明示的に引き継ぐ。font-size/weightも親から継承させる */
  margin:0; font-size:inherit; font-weight:inherit; line-height:inherit;
  text-shadow:0 0 14px var(--white), 0 0 14px var(--white), 0 0 6px var(--white);
}

/* 320〜359px：見出しと写真のバランスを調整 */
@media (max-width:359px){
  .fv-benefit{ font-size:25px; min-height:256px; }
  .fv-benefit-photo-wrap{ width:250px; height:206px; top:40px; right:calc(var(--pad) * -1); }
  .fv-badge{ font-size:.78em; padding:8px 16px 9px; }
}

.fv-desc{ margin-top:20px; font-size:16px; color:var(--ink-mid); line-height:1.85; }

.fv-stats{ display:flex; gap:12px; margin-top:18px; }
.fv-stat{
  position:relative;
  flex:1; background:var(--white); border:1.5px solid var(--turq-line);
  border-radius:var(--r-card); padding:15px 10px; text-align:center;
  box-shadow:var(--sh-card);
}
.fv-stat .lb{ font-size:12.5px; font-weight:700; color:var(--ink-mid); line-height:1.4; }
.fv-stat .vl{ margin-top:7px; color:var(--turq-deep); }
.fv-stat .vl .n{ font-family:var(--f-num); font-weight:800; font-size:28px; line-height:.9; }
.fv-stat .vl .n--sm{ font-size:28px; letter-spacing:-.01em; }
.fv-stat .vl .u{ font-family:var(--f-disp); font-weight:700; font-size:15px; margin-left:2px; }
.fv-stat .nt{ font-size:11px; color:var(--ink-soft); margin-top:6px; }

/* 未確認の数値に付ける「要確認」バッジ（クライアント確認が取れ次第、該当箇所ごと削除すること） */

.fv-cta{ margin-top:24px; }
/* ========================= 悩み ========================= */
.worry .b1{ width:150px; height:150px; background:#EFE6D2; opacity:.5; top:20px; left:-70px; }
.worry-head{ text-align:center; }
.worry-head .eyebrow{ justify-content:center; }
.worry-list{ display:flex; flex-direction:column; gap:14px; margin-top:28px; }
.worry-item{
  display:flex; align-items:flex-start; gap:13px;
  background:var(--white); border-radius:var(--r-card);
  padding:18px; box-shadow:var(--sh-card);
}
.worry-item .qm{
  flex:none; width:30px; height:30px; border-radius:50%;
  background:var(--beige); color:var(--pink-deep);
  font-family:var(--f-num); font-weight:700; font-size:15px;
  display:flex; align-items:center; justify-content:center;
}
.worry-item p{ font-size:16px; line-height:1.75; }
.worry-item b{ color:var(--pink-deep); font-weight:700; }

/* ========================= 解決宣言バナー ========================= */
.solve{
  background:var(--pink-pale);
  padding:0 var(--pad) 34px;
  text-align:center; position:relative; overflow:hidden;
}
.solve-art{
  position:relative; overflow:hidden;
  width:auto; height:170px;
  margin:0 calc(var(--pad) * -1) 14px; border-radius:0;
}
.solve-art img{ width:100%; height:100%; object-fit:cover; object-position:50% 78%; display:block; }
.solve-art-fade{ position:absolute; left:0; right:0; pointer-events:none; }
.solve-art-fade--bottom{ bottom:0; height:32%; background:linear-gradient(to top, var(--pink-pale) 0%, rgba(252,237,241,0) 100%); }
.solve-txt{ font-family:var(--f-disp); font-weight:900; font-size:21px; line-height:1.6; }
.solve-txt .em{ color:var(--pink-deep); font-size:25px; }
.solve-sub{ font-size:14px; color:var(--ink-mid); margin-top:8px; }

/* ========================= 3つの強み ========================= */
.strength .b1{ width:180px; height:180px; background:var(--mint); opacity:.62; top:120px; right:-100px; }
/* カルーセルをやめ、1件ずつ縦に並べる形式に変更。写真は画面幅いっぱいにブリード */
.st-list{ margin-top:28px; display:flex; flex-direction:column; gap:40px; }
.st-photo{
  position:relative; overflow:hidden;
  height:200px; margin:0 calc(var(--pad) * -1); border-radius:0;
}
.st-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.st-body{ margin-top:16px; }
.st-before{
  margin-top:12px; padding:9px 13px; border-radius:11px; background:var(--mint);
}
.st-before-label{
  font-family:var(--f-disp); font-weight:800; font-size:11.5px;
  color:var(--turq-deep); letter-spacing:.02em;
}
.st-before-txt{ margin-top:3px; font-size:12.5px; line-height:1.5; color:var(--ink-soft); }
.st-no{
  display:flex; align-items:center; gap:9px;
  font-family:var(--f-num); font-weight:700; font-size:14.5px;
  color:var(--turq); letter-spacing:.08em;
}
.st-no::after{ content:""; height:1px; flex:1; background:var(--turq-line); }
.st-no .d{ font-size:28px; line-height:1; }
.st-ttl{ margin-top:9px; font-size:19px; font-weight:900; line-height:1.5; }
.st-ttl .em{ color:var(--turq-deep); }
.st-txt{ margin-top:9px; font-size:16px; color:var(--ink-mid); line-height:1.8; }


/* ========================= 保有資産 ========================= */
.asset-head .eyebrow{ justify-content:center; }
.asset-head{ text-align:center; }
.asset-card{
  width:calc(100% - 28px); background:var(--white); border-radius:var(--r-card);
  box-shadow:var(--sh-card); overflow:hidden;
}
.asset-card .ph{ height:180px; }
.asset-card .bd{ padding:15px 16px 18px; }
.asset-card .lb{
  display:inline-block; font-family:var(--f-disp); font-weight:700; font-size:12.5px;
  color:var(--turq-deep); background:var(--mint); border-radius:5px; padding:3px 9px;
}
.asset-card .vl{ margin-top:9px; display:flex; align-items:baseline; gap:3px; color:var(--turq-deep); }
.asset-card .vl .n{ font-family:var(--f-num); font-weight:700; font-size:38px; line-height:.95; }
.asset-card .vl .u{ font-family:var(--f-disp); font-weight:700; font-size:15.5px; }
.asset-card .nt{ font-size:12.5px; color:var(--ink-soft); margin-top:6px; line-height:1.6; }

/* ========================= CTAブロック ========================= */
.ctablk{ padding:52px var(--pad); position:relative; overflow:hidden; }
.ctablk-in{
  background:var(--white); border-radius:22px; box-shadow:var(--sh-lift);
  padding:26px 20px 24px; text-align:center; position:relative; z-index:1;
}
.ctablk--onwhite .ctablk-in{ border:1.5px solid var(--hair); }
.ctablk-ttl{ font-size:19px; font-weight:900; line-height:1.55; }
.ctablk-ttl .em-p{ color:var(--pink-deep); }
.ctablk-txt{ font-size:14.5px; color:var(--ink-mid); margin-top:9px; }
.ctablk-btns{ display:flex; flex-direction:column; gap:14px; margin-top:20px; }
.ctablk-note{ font-size:14.5px; font-weight:700; color:var(--pink-deep); margin-top:20px; }
.limit-chip{
  display:inline-flex; align-items:center; gap:7px;
  background:var(--pink-pale); color:var(--pink-deep);
  border-radius:999px; padding:6px 14px; margin-bottom:12px;
  font-family:var(--f-disp); font-weight:700; font-size:14px;
}
.limit-chip .n{ font-family:var(--f-num); font-size:17px; line-height:1; }
/* ラベルを1つのフレックスアイテムにまとめる（文字ごとにgapが入るのを防ぐ） */
.limit-chip-tx{ line-height:1.45; }
.limit-chip svg{ flex:none; }
.limit-chip svg{ width:14px; height:14px; }

/* ---- 問い合わせフォーム ---- */
.form-divider{
  display:flex; align-items:center; gap:10px;
  margin:26px 0 20px; position:relative; z-index:1;
  font-family:var(--f-disp); font-weight:700; font-size:14px; color:var(--pink-deep);
}
.form-divider::before,.form-divider::after{ content:""; height:1px; flex:1; background:var(--pink-line); }
.contact-form{
  position:relative; z-index:1;
  background:var(--white); border-radius:22px; box-shadow:var(--sh-lift);
  padding:24px 20px 26px; text-align:left;
}
.form-row{ margin-bottom:16px; }
.form-row--split{
  display:flex; flex-direction:column; gap:16px;
}
.form-row label{
  display:block; font-family:var(--f-disp); font-weight:700; font-size:14.5px;
  color:var(--ink); margin-bottom:7px;
}
.form-tag{
  display:inline-block; margin-left:6px; vertical-align:1px;
  font-family:var(--f-body); font-size:11.5px; font-weight:700; line-height:1;
  border-radius:4px; padding:3px 6px;
}
.form-tag--req{ color:#fff; background:var(--pink-deep); }
.form-tag--opt{ color:var(--turq-deep); background:var(--mint); }
.contact-form input:not([type="checkbox"]),
.contact-form textarea{
  display:block; width:100%; min-height:48px;
  padding:12px 14px; border:1.5px solid var(--hair); border-radius:12px;
  font-family:var(--f-body); font-size:16px; color:var(--ink);
  background:var(--white);
}
.contact-form input::placeholder,
.contact-form textarea::placeholder{ color:var(--ink-soft); }
.contact-form input:not([type="checkbox"]):focus,
.contact-form textarea:focus{ border-color:var(--turq); outline:none; }
.contact-form textarea{ min-height:120px; line-height:1.75; resize:vertical; }
.contact-form .btn-note{ margin-top:4px; }
.contact-form .btn{ margin-top:10px; }

/* ---- 送信完了サンクス表示（フォームと入れ替わる。main.js制御） ---- */
.thanks-card{
  position:relative; z-index:1;
  background:var(--white); border-radius:22px; box-shadow:var(--sh-lift);
  padding:36px 24px; text-align:center;
}
.thanks-icon{
  display:flex; align-items:center; justify-content:center;
  width:56px; height:56px; margin:0 auto 16px;
  border-radius:50%; background:var(--mint); color:var(--turq-deep);
}
.thanks-icon svg{ width:28px; height:28px; }
.thanks-ttl{ font-size:19px; font-weight:900; }
.thanks-ttl:focus{ outline:none; }
.thanks-txt{ margin-top:10px; font-size:14.5px; color:var(--ink-mid); line-height:1.8; }

/* ========================= 企業様の声（新規追加） ========================= */
.voice-list{ display:flex; flex-direction:column; gap:34px; margin-top:28px; }
.voice-person{ display:flex; align-items:center; gap:14px; margin-bottom:12px; margin-left:2px; }
.voice-ic{
  flex:none; width:62px; height:62px; border-radius:50%;
  border:2px solid var(--pink-line); box-shadow:var(--sh-card);
  display:flex; align-items:center; justify-content:center;
}
.voice-ic svg{ width:34px; height:34px; }
.voice-name{ font-family:var(--f-disp); font-weight:800; font-size:19px; color:var(--ink); line-height:1.3; white-space:nowrap; }
.voice-bubble-wrap{ position:relative; margin-left:20px; }
.voice-bubble-shadow{
  position:absolute; top:6px; left:6px; right:-6px; bottom:-6px;
  border-radius:16px; z-index:0;
}
.voice-bubble-shadow::before{
  content:""; position:absolute; top:-7px; left:22px;
  width:14px; height:14px; background:inherit;
  transform:rotate(45deg); border-radius:3px 0 0 0;
}
.voice-bubble{
  position:relative; z-index:1; background:var(--white); border-radius:16px;
  padding:18px 18px 14px; box-shadow:var(--sh-card);
}
.voice-bubble::before{
  content:""; position:absolute; top:-7px; left:22px;
  width:14px; height:14px; background:var(--white);
  transform:rotate(45deg); border-radius:3px 0 0 0;
}
.voice-bubble::after{
  content:"”"; position:absolute; top:-22px; right:6px;
  font-family:var(--f-disp); font-weight:900; font-size:76px; line-height:1;
  pointer-events:none;
}
.voice-bubble p{
  position:relative; z-index:1;
  font-family:var(--f-hand); font-size:17px; font-weight:500; line-height:32px;
  background-image:repeating-linear-gradient(to bottom, transparent 0, transparent 31px, var(--voice-accent) 31px, var(--voice-accent) 32px);
}

/* 1件目・2件目でアイコンの色・下線・影・傾きを振って、遊び心を出す */
.voice-item:nth-child(1){ --voice-accent:var(--turq-line); }
.voice-item:nth-child(1) .voice-ic{ background:var(--mint); color:var(--turq-deep); border-color:var(--turq-line); }
.voice-item:nth-child(1) .voice-bubble-wrap{ transform:rotate(-1.4deg); }
.voice-item:nth-child(1) .voice-bubble-shadow{ background:var(--turq-deep); }
.voice-item:nth-child(1) .voice-bubble::after{ color:var(--turq-line); }
.voice-item:nth-child(1) .voice-bubble p{ color:var(--turq-deep); }
.voice-item:nth-child(2){ --voice-accent:var(--pink-line); }
.voice-item:nth-child(2) .voice-ic{ background:var(--pink-pale); color:var(--pink-deep); border-color:var(--pink-line); }
.voice-item:nth-child(2) .voice-bubble-wrap{ transform:rotate(1.4deg); }
.voice-item:nth-child(2) .voice-bubble-shadow{ background:var(--pink-deep); }
.voice-item:nth-child(2) .voice-bubble::after{ color:var(--pink-line); }
.voice-item:nth-child(2) .voice-bubble p{ color:var(--pink-deep); }

/* ========================= サービス詳細（縦フロー + アコーディオン） ========================= */
.flow{ margin-top:28px; display:flex; flex-direction:column; gap:14px; }
.step{
  background:var(--white); border-radius:var(--r-card);
  box-shadow:var(--sh-card); border:1px solid var(--hair);
  overflow:hidden; position:relative;
}
.step-sum{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; gap:13px;
  padding:17px 46px 17px 17px; min-height:56px; position:relative;
}
.step-sum::-webkit-details-marker{ display:none; }
.step-ic{
  flex:none; width:44px; height:44px; border-radius:13px;
  background:var(--mint); color:var(--turq-deep);
  display:flex; align-items:center; justify-content:center;
}
.step-ic svg{ width:22px; height:22px; }
.step-no{ display:block; font-family:var(--f-num); font-weight:700; font-size:12.5px; color:var(--turq); letter-spacing:.12em; line-height:1.4; }
.step-ttl{ display:block; font-family:var(--f-disp); font-weight:700; font-size:16.5px; line-height:1.4; }
.step-sum .pm{
  position:absolute; right:16px; top:50%; transform:translateY(-50%);
  width:24px; height:24px; border-radius:50%; background:var(--mint); color:var(--turq-deep);
  display:flex; align-items:center; justify-content:center; transition:transform .22s ease;
}
.step-sum .pm svg{ width:12px; height:12px; }
.step[open] .step-sum .pm{ transform:translateY(-50%) rotate(135deg); }
.step-det{ padding:0 17px 20px 74px; }
.step-det p{ font-size:15px; color:var(--ink-mid); line-height:1.8; }
.step-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:11px; }
.step-tags span{
  font-size:12.5px; font-weight:700; color:var(--turq-deep);
  background:var(--mint); border-radius:5px; padding:3px 9px;
}
.step-arrow{ display:flex; justify-content:center; color:var(--turq-line); }
.step-arrow svg{ width:18px; height:18px; }

/* ========================= 導入事例（横2×縦のブロック） ========================= */
.case-head{ text-align:center; }
.case-head .eyebrow{ justify-content:center; }
/* 成果の一例：もとは1枚のPNGだったものをHTML/CSSで再現している。
   カードは白・左に「業種チップ＋獲得内容」、右に大きな数字＋「件」。
   配色はティール／ピンク／ゴールドの3系統を上から順に循環させる。 */
.case-grid{
  display:grid; grid-template-columns:1fr; gap:12px;
  margin-top:22px;
}
.case-card{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--white); border-radius:16px;
  box-shadow:0 6px 16px -12px rgba(36,56,79,.22);
  padding:16px 18px;
}
.case-body{ display:flex; flex-direction:column; align-items:flex-start; gap:7px; min-width:0; }
.case-ind{
  display:inline-block; max-width:100%;
  font-family:var(--f-disp); font-weight:700; font-size:15.5px; line-height:1.3;
  border-radius:9px; padding:5px 12px;
}
.case-card--mint  .case-ind{ color:var(--turq-deep);  background:var(--mint); }
.case-card--pink  .case-ind{ color:var(--pink-deep);  background:var(--pink-pale); }
.case-card--beige .case-ind{ color:var(--beige-deep); background:var(--beige); }
/* 獲得内容の説明。元PNGに合わせたニュートラルグレー（--ink-soft より青みが少ない） */
.case-lb{ font-size:14px; font-weight:500; color:#7C8085; line-height:1.5; }
.case-vl{ display:flex; align-items:baseline; gap:2px; flex:none; }
.case-vl .n{
  font-family:var(--f-num); font-weight:700; font-size:46px; line-height:1;
  font-feature-settings:"tnum"; font-variant-numeric:tabular-nums;
}
.case-card--mint  .case-vl .n{ color:var(--turq-deep); }
.case-card--pink  .case-vl .n{ color:var(--pink-deep); }
.case-card--beige .case-vl .n{ color:var(--beige-deep); }
.case-vl .u{ font-family:var(--f-disp); font-weight:700; font-size:17px; line-height:1; color:var(--ink-strong); }

/* ========================= FAQ ========================= */
.faq-head{ text-align:center; }
.faq-head .eyebrow{ justify-content:center; }
.faq-list{ display:flex; flex-direction:column; gap:10px; margin-top:26px; }
.faq{ background:var(--white); border:1px solid var(--hair); border-radius:14px; overflow:hidden; }
.faq-sum{
  list-style:none; cursor:pointer; position:relative;
  display:flex; align-items:flex-start; gap:11px;
  padding:15px 46px 15px 15px; min-height:56px;
}
.faq-sum::-webkit-details-marker{ display:none; }
.faq-q{
  flex:none; width:24px; height:24px; border-radius:50%;
  background:var(--turq); color:#fff;
  font-family:var(--f-num); font-weight:700; font-size:13.5px;
  display:flex; align-items:center; justify-content:center; margin-top:1px;
}
.faq-sum .tx{ font-family:var(--f-disp); font-weight:700; font-size:16px; line-height:1.6; }
.faq-sum .pm{
  position:absolute; right:15px; top:50%; transform:translateY(-50%);
  color:var(--turq); transition:transform .22s ease;
}
.faq-sum .pm svg{ width:14px; height:14px; }
.faq[open] .faq-sum .pm{ transform:translateY(-50%) rotate(135deg); }
.faq-ans{ display:flex; gap:11px; padding:0 15px 18px 15px; }
.faq-a{
  flex:none; width:24px; height:24px; border-radius:50%;
  background:var(--pink-pale); color:var(--pink-deep);
  font-family:var(--f-num); font-weight:700; font-size:13.5px;
  display:flex; align-items:center; justify-content:center;
}
.faq-ans p{ font-size:15px; color:var(--ink-mid); line-height:1.8; }

/* ========================= 開催カレンダー（新規追加。Googleカレンダー埋め込み） ========================= */
.cal-embed{
  margin-top:26px; border-radius:16px; overflow:hidden;
  background:var(--white); box-shadow:var(--sh-card);
}
.cal-embed iframe{ display:block; width:100%; height:480px; border:0; }

/* ========================= 想い（代表メッセージ） ========================= */
.founder-head{ text-align:center; }
.founder-body{ margin-top:24px; display:flex; flex-direction:column; gap:14px; }
.founder-body p{ font-size:16px; color:var(--ink-mid); line-height:1.9; }

/* ========================= 会社概要 ========================= */
.co-head{ text-align:center; }
.co-head .eyebrow{ justify-content:center; }
.co-tbl{
  margin-top:24px; background:var(--white); border-radius:var(--r-card);
  box-shadow:var(--sh-card); overflow:hidden;
}
.co-row{ display:flex; gap:12px; padding:14px 18px; border-bottom:1px solid var(--hair); font-size:15px; }
.co-row:last-child{ border-bottom:none; }
.co-row dt{ flex:none; width:78px; font-weight:700; color:var(--ink-soft); font-size:14px; }
.co-row dd{ margin:0; line-height:1.7; }
.co-more{ border-top:1px solid var(--hair); }
.co-more[open]{ border-top:none; }
.co-more-sum{
  list-style:none; cursor:pointer; min-height:52px;
  display:flex; align-items:center; justify-content:center; gap:7px;
  font-family:var(--f-disp); font-weight:700; font-size:14.5px; color:var(--turq-deep);
  background:var(--white);
}
.co-more-sum::-webkit-details-marker{ display:none; }
.co-more-sum svg{ width:13px; height:13px; transition:transform .22s ease; }
.co-more[open] .co-more-sum svg{ transform:rotate(180deg); }
.co-more[open] .co-more-sum .lb-close{ display:inline; }
.co-more[open] .co-more-sum .lb-open{ display:none; }
.co-more .lb-close{ display:none; }

/* ========================= フッター ========================= */
.ft{ background:var(--ink); color:#fff; padding:34px var(--pad) 30px; text-align:center; }
.ft-logo{ font-family:var(--f-disp); font-weight:900; font-size:16px; }
.ft-sub{ font-size:13px; opacity:.62; margin-top:6px; line-height:1.8; }
.ft-note{ font-size:12px; opacity:.42; margin-top:16px; line-height:1.7; }
.ft-links{ margin-top:14px; font-size:13px; }
.ft-links a{ opacity:.78; text-decoration:underline; text-underline-offset:3px; }
.ft-links a:hover{ opacity:1; }

/* ボット対策用の項目。画面にも読み上げにも出さないが、display:none だと
   埋めないボットがいるため、位置をずらして隠している */
.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ---- フォームの同意チェックボックス ---- */
.form-consent{
  display:flex; align-items:flex-start; gap:10px;
  margin-top:16px; font-size:13.5px; line-height:1.7; color:var(--ink-mid);
  cursor:pointer;
}
.form-consent input[type="checkbox"]{
  flex:none; width:20px; height:20px; margin:2px 0 0; cursor:pointer;
  accent-color:var(--pink-deep);
}
.form-consent a{ color:var(--pink-deep); text-decoration:underline; text-underline-offset:2px; }

/* ---- プライバシーポリシーなどの規約ページ ---- */
.legal-head{ text-align:center; }
.legal-head .h-sec{ margin-top:2px; }
.legal-head .sec-lead{ text-align:left; margin-top:20px; }
.legal-body{ margin-top:34px; }
.legal-body h2{
  font-size:17px; font-weight:900; color:var(--turq-deep);
  margin-top:34px; padding-bottom:8px; border-bottom:2px solid var(--turq-line);
}
.legal-body h2:first-child{ margin-top:0; }
.legal-body p{ margin-top:12px; font-size:14.5px; line-height:1.9; color:var(--ink-mid); }
.legal-body ul{ margin-top:12px; display:flex; flex-direction:column; gap:9px; }
.legal-body li{
  position:relative; padding-left:17px;
  font-size:14.5px; line-height:1.85; color:var(--ink-mid);
}
.legal-body li::before{
  content:""; position:absolute; left:2px; top:.72em;
  width:6px; height:6px; border-radius:50%; background:var(--turq-line);
}
.legal-body b{ color:var(--ink); font-weight:700; }
.legal-body a{ color:var(--turq-deep); text-decoration:underline; text-underline-offset:2px; word-break:break-all; }
.legal-note{ font-size:13px !important; color:var(--ink-soft) !important; }
.legal-contact{
  margin-top:14px; padding:18px 20px;
  background:var(--mint); border-radius:var(--r-card);
}
.legal-contact p{ margin-top:4px; font-size:14px; }
.legal-contact p:first-child{ margin-top:0; }
.legal-date{ margin-top:34px !important; font-size:13px !important; color:var(--ink-soft) !important; }
.legal-back{ margin-top:40px; }

/* ========================= 固定CTA ========================= */
.sticky{
  position:fixed; left:50%; bottom:0; z-index:70;
  width:100%; max-width:430px;
  transform:translate(-50%, 130%);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-top:1px solid var(--hair);
  padding:11px var(--pad) calc(11px + env(safe-area-inset-bottom));
}
.sticky.is-on{ transform:translate(-50%, 0); }
.sticky .btn-note{ margin-bottom:7px; font-size:13px; }
.sticky .btn-note--lg{ font-size:15px; }
.sticky .btn{ min-height:54px; font-size:16px; }

/* ============================================================
   アニメーション
   方針：CSS transition + IntersectionObserver のみ（ライブラリ不使用）。
   パララックス・常時ループ・バウンスは使わず、控えめに。
   動きを減らす設定の端末では、最下部の prefers-reduced-motion で全て無効化される。
   ============================================================ */

/* ---- スクロールリビール（main.jsが .is-visible を付与） ---- */
.reveal{
  opacity:0; transform:translateY(20px);
  transition:opacity .6s ease-out, transform .6s ease-out;
}
.reveal.is-visible{ opacity:1; transform:none; }
/* カード群は兄弟間で少しずつ遅らせる（4枚で一巡させ、遅延が長くなりすぎないようにする） */
.reveal-stagger > *:nth-child(4n+2){ transition-delay:.09s; }
.reveal-stagger > *:nth-child(4n+3){ transition-delay:.18s; }
.reveal-stagger > *:nth-child(4n+4){ transition-delay:.27s; }

/* ---- ファーストビューはスクロール監視ではなくロード直後に順番に出す ----
   JSを使わずCSSアニメーションだけで完結させている。JSに任せると、タブが非アクティブな
   状態で読み込まれたときに requestAnimationFrame が発火せず、見出しが表示されないまま
   になる恐れがあるため。動きを減らす設定の端末にはそもそも適用しない。 */
@media (prefers-reduced-motion: no-preference){
  @keyframes fvFadeUp{
    from{ opacity:0; transform:translateY(14px); }
    to  { opacity:1; transform:none; }
  }
  .fv-target,.fv-name,.fv-badges,.fv-benefit-text,
  .fv-stats,.fv-desc,.fv-cta,.fv-benefit-photo-wrap{
    animation:fvFadeUp .7s ease-out both;
  }
  .fv-name              { animation-delay:.05s; }
  .fv-badges            { animation-delay:.10s; }
  .fv-benefit-text      { animation-delay:.20s; }
  .fv-stats             { animation-delay:.30s; }
  .fv-desc              { animation-delay:.38s; }
  .fv-cta               { animation-delay:.44s; }
  .fv-benefit-photo-wrap{ animation-delay:.30s; }
}

/* ---- ホバー（マウス操作の環境のみ。タップ端末では出さない） ---- */
@media (hover:hover) and (pointer:fine){
  .case-card,.worry-card,.asset-card,.voice-bubble-wrap{
    transition:transform .25s ease, box-shadow .25s ease;
  }
  .case-card:hover,.worry-card:hover,.asset-card:hover{
    transform:translateY(-4px);
    box-shadow:var(--sh-lift);
  }
  .btn{ transition:transform .25s ease, box-shadow .25s ease, filter .25s ease; }
  .btn:hover{ filter:brightness(1.06); }
  .btn .arw{ transition:transform .25s ease; }
  .btn:hover .arw{ transform:translateX(4px); }
}

/* ---- アコーディオン ----
   アイコンの「＋→×」回転は既存ルール（.faq[open] .faq-sum .pm 等）で行っているため、
   ここではその変化をなめらかにする transition だけを足す。
   高さのアニメーションは ::details-content に対応したブラウザでのみ有効。
   非対応ブラウザでは今までどおり即時に開閉するだけで、内容は必ず表示される。 */
.faq-sum .pm,.step-sum .pm{ transition:transform .3s ease; }

@supports selector(details::details-content){
  html{ interpolate-size:allow-keywords; } /* height:auto へのトランジションを可能にする */
  details.faq::details-content,
  details.step::details-content{
    block-size:0; overflow:hidden;
    transition:block-size .32s ease, content-visibility .32s allow-discrete;
  }
  details.faq[open]::details-content,
  details.step[open]::details-content{ block-size:auto; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
  /* 動きを消すだけでなく、初期状態で隠している要素は必ず見えるようにする */
  .reveal,.fv-anim{ opacity:1 !important; transform:none !important; }
}

/* ========================= 本番コピー追加分 ========================= */

/* 桁数の多い数字（例：100–150）を枠内に収める（.fv-stat側は上のFVブロックで定義済み） */
.asset-card .vl .n--sm{ font-size:27px; }

/* レール下の補足行（事例の補足・社内向け注記） */
.case-note{
  margin-top:14px; font-size:13px; line-height:1.75;
  color:var(--ink-soft); text-align:center;
}

/* FAQ本文の強調 */
.faq-ans p b{ color:var(--pink-deep); font-weight:700; }

/* ========================= 背景の円形装飾（各セクション共通） =========================
   ファーストビュー・悩み・3つの強みで使っていた.blobの演出を全セクションに拡張。
   SP・デスクトップ共通のベースCSSとして定義（メディアクエリなし＝両方に同じ値が効く）。
   各セクションは.sec/.solve/.ctablkですでにoverflow:hiddenのため、画面幅が変わっても
   はみ出た部分は自動的にクリップされ、横スクロールの原因にはならない。

   形のルール：円は必ず「上下」か「左右」のどちらか一辺だけをはみ出させる
   （例：topをマイナスにしたらrightは0以上の安全な内側の値にする）。
   上下・左右を同時にマイナスにして角からはみ出させると、
   円の中心からごく近い位置で2本の直線（セクションの上辺と右辺）に切り取られてしまい、
   なめらかな円弧ではなく角ばった「欠け」に見えてしまう（今回の指摘の原因）。
   一辺だけのはみ出しなら、どれだけ深くはみ出させても直線は1本だけなので、
   常になめらかな弧が残る。

   配色ルール：白背景のセクションはパレット内の複数色を自由に組み合わせてよいが、
   単色背景（ミント／ベージュ／ペールピンク）のセクションは、その背景と同系色の
   1トーン（--turq-line／--beige-line／--pink-line）だけを使う。彩度の高いトーンを
   低い不透明度で重ねる、といった凝った配色は行わず、単色で統一する。 */

/* 白背景セクション：複数色を組み合わせてOK */
.strength .b2{ width:130px; height:130px; background:var(--pink-pale); bottom:60px; left:-70px; }
.ctablk--onwhite .b1{ width:140px; height:140px; background:var(--mint); top:20px; left:-60px; opacity:.7; }
#service .b1{ width:150px; height:150px; background:var(--pink-pale); top:20px; left:-80px; }
#service .b2{ width:130px; height:130px; background:var(--mint); bottom:50px; right:-70px; }
#faq .b1{ width:150px; height:150px; background:var(--mint); top:20px; right:-80px; }
#faq .b2{ width:110px; height:110px; background:var(--beige); bottom:30px; left:-50px; }
.founder .b1{ width:140px; height:140px; background:var(--beige); top:20px; right:-70px; }

/* ペールピンク背景セクション：ピンク系1トーンのみ */
#case .b1{ width:200px; height:200px; background:var(--pink-line); top:-70px; right:30px; }
#case .b2{ width:130px; height:130px; background:var(--pink-line); bottom:20px; left:-60px; }
.solve .b1{ width:110px; height:110px; background:var(--pink-line); top:6px; right:-40px; opacity:.7; }
#contact .b1{ width:150px; height:150px; background:var(--pink-line); bottom:30px; right:-70px; }
#contact .b2{ width:110px; height:110px; background:var(--pink-line); top:10px; left:-50px; }

/* ミント背景セクション：ターコイズ系1トーンのみ */
#asset .b1{ width:160px; height:160px; background:var(--turq-line); top:-60px; right:30px; }
#asset .b2{ width:120px; height:120px; background:var(--turq-line); bottom:20px; left:-50px; }
#calendar .b1{ width:120px; height:120px; background:var(--turq-line); top:20px; left:-60px; opacity:.7; }

/* ベージュ背景セクション：ベージュ系1トーンのみ */
#voice .b1{ width:170px; height:170px; background:var(--beige-line); top:-60px; right:30px; }
#voice .b2{ width:130px; height:130px; background:var(--beige-line); bottom:20px; left:-60px; }
#company .b1{ width:120px; height:120px; background:var(--beige-line); bottom:20px; left:-60px; opacity:.7; }

/* 320〜359px：FV実績カードの数字が折り返さないよう縮小（.fv-stat 定義より後ろに置く） */
@media (max-width:359px){
  .fv-stat{ padding:15px 6px; }
  .fv-stat .vl .n{ font-size:25px; }
  .fv-stat .vl .n--sm{ font-size:25px; }
}

/* ============================================================
   デスクトップ版（960px以上）
   同一HTML・同一URLのまま、画面幅で自動的にレイアウトが切り替わる
   （別ページ・別ドメインではなく、レスポンシブによる単一ページ構成）
   960px未満（スマホ・タブレット）は上記のSPレイアウトがそのまま適用される
   ============================================================ */
@media (min-width:960px){

  /* ---- 全体 ----
     .page には最大幅を設けず画面いっぱいに広げる（以前は1280pxで頭打ちになり、
     大きいモニタでは左右に灰色の余白が出て「画面を使えていない」状態だった）。
     読みやすさは中身側（.inner・各セクションの max-width）で担保する */
  .page{ max-width:none; box-shadow:none; }
  .sec{ padding:96px 48px; }
  .sec--tight{ padding-block:76px; }
  .sec--wide{ padding-block:120px; }
  .inner{ max-width:1100px; margin-inline:auto; }
  .h-sec{ font-size:36px; max-width:680px; }
  .sec-lead{ font-size:17px; max-width:620px; }

  /* テキストが中央寄せの見出しブロックは、幅を絞って中央に固定 */
  .worry-head,.case-head,.asset-head,.faq-head,.co-head,.founder-head{
    max-width:640px; margin-inline:auto;
  }

  /* ---- ヘッダー ---- */
  .hdr{ padding:0 48px; height:72px; }
  .logo-mark{ width:34px; height:34px; }
  .logo-txt{ font-size:18px; }
  .logo-sub{ font-size:12px; }
  .hdr-btns{ gap:10px; }
  .hdr-line,.hdr-cta{ height:40px; padding:0 16px; font-size:14px; }
  .hdr-line svg,.hdr-cta svg{ width:14px; height:14px; }

  /* ---- ファーストビュー：左に文言、右に写真の2カラムヒーロー ---- */
  /* 写真はSP版と同じく「画面端まで写真をブリードさせ、白背景へフェードで溶け込ませる」演出を踏襲。
     .fv-benefit（h1）と.inner（共通ルールでposition:relative）の両方をstaticにして、
     絶対配置の基準を.fv-benefit-photo-wrapの祖先である.fv自体まで繰り上げている。 */
  .fv{ padding:80px 0 100px 48px; }
  .fv .inner{ position:static; max-width:none; margin-inline:0; min-height:600px; }
  .fv-target,.fv-name,.fv-benefit,.fv-stats,.fv-desc,.fv-cta{ max-width:520px; }
  .fv-target{ font-size:15px; }
  .fv-name{ font-size:20px; margin-top:26px; }
  .fv-benefit{ position:static; min-height:auto; font-size:44px; margin-top:22px; }
  .fv-benefit-photo-wrap{
    position:absolute; z-index:0; top:0; bottom:0; right:0; left:auto;
    /* 左テキスト列（48pxパディング＋520px幅）の右に32pxの余白を空けた位置に左端を固定し、
       右側は画面幅が広がるほどそのまま画面端までブリードする */
    width:calc(100% - 600px); height:auto;
    border-radius:0; box-shadow:none;
  }
  .fv-photo-fade--left{ width:32%; }
  .fv-photo-fade--top{ height:12%; }
  .fv-photo-fade--bottom{ height:12%; }
  .fv-benefit-text{ text-shadow:none; }
  .fv-badges{ margin-bottom:20px; }
  .fv-desc{ font-size:17px; margin-top:24px; }
  .fv-cta{ margin-top:30px; }
  .fv-cta .btn{ max-width:400px; margin-inline:auto; }

  /* ---- 導入事例：焼き込み画像は幅を絞って中央に（レイアウトはHTML化不可のため） ---- */
  /* 成果の一例：PCは2列。カード内部のレイアウトはSPと同じ */
  .case-grid{ grid-template-columns:repeat(2,1fr); gap:16px; margin-top:32px; }
  .case-card{ padding:20px 22px; }
  .case-ind{ font-size:16.5px; }
  .case-lb{ font-size:14.5px; }
  .case-vl .n{ font-size:50px; }
  .case-note{ max-width:720px; margin:18px auto 0; }

  /* ---- 悩み：2列グリッド ---- */
  .worry-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:36px; }

  /* ---- 解決宣言バナー：写真と文言を左右に ---- */
  .solve{
    display:grid; grid-template-columns:1fr 1fr;
    grid-template-areas:"art txt" "art sub";
    align-items:center; gap:8px 56px;
    max-width:1100px; margin:0 auto; padding:88px 48px;
    text-align:left;
  }
  .solve-art{ grid-area:art; margin:0; height:100%; min-height:360px; border-radius:24px; }
  .solve-art-fade{ display:none; }
  .solve-txt{ grid-area:txt; align-self:end; font-size:30px; }
  .solve-sub{ grid-area:sub; align-self:start; font-size:15.5px; }

  /* ---- 3つの強み：写真とテキストを左右交互（ジグザグ） ---- */
  .st-list{ gap:72px; }
  .st-item{ display:flex; align-items:center; gap:56px; }
  .st-item:nth-child(even){ flex-direction:row-reverse; }
  .st-photo{ flex:1 1 46%; margin:0; height:360px; border-radius:24px; }
  .st-body{ flex:1 1 54%; margin-top:0; }
  .st-ttl{ font-size:23px; }
  .st-txt{ font-size:16.5px; }

  /* ---- 保有資産：横スワイプ→3列グリッド ---- */
  .rail{
    display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
    margin:36px 0 0; padding:0; overflow:visible;
  }
  .asset-card{ width:auto; }
  .asset-card .ph{ height:210px; }
  .swipe-hint{ display:none; }

  /* ---- CTAブロック：カードを絞って中央に ---- */
  .ctablk{ padding:64px 48px; }
  .ctablk-in{ max-width:640px; margin-inline:auto; }
  .ctablk-btns .btn{ max-width:400px; margin-inline:auto; }

  /* ---- 企業さまの声：吹き出しを左右に並べる ---- */
  .voice-list{ flex-direction:row; gap:44px; margin-top:44px; }
  .voice-item{ flex:1 1 0; }

  /* ---- サービス詳細：縦の5ステップ→3列グリッド（矢印は不要なため非表示） ---- */
  .flow{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px 28px; align-items:start; margin-top:36px; }
  .step-arrow{ display:none; }

  /* ---- FAQ：2列グリッド ---- */
  .faq-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; align-items:start; margin-top:32px; }

  /* ---- 開催カレンダー：幅を絞って中央に ---- */
  .cal-embed{ max-width:760px; margin:32px auto 0; }

  /* ---- お問い合わせ：案内カード→フォームを縦積みのまま、幅を揃えて中央に ---- */
  #contact{ padding:88px 48px; }
  #contact .ctablk-in{ max-width:640px; margin-inline:auto; }
  #contact .form-divider{ max-width:640px; margin-inline:auto; }
  #contact .contact-form{ max-width:640px; margin-inline:auto; }
  #contact .thanks-card{ max-width:640px; margin-inline:auto; }

  /* ---- 規約ページ：本文幅を絞って中央に ---- */
  .legal-head,.legal-body,.legal-back{ max-width:760px; margin-inline:auto; }
  .legal-back{ margin-top:48px; }

  /* ---- 想い・会社概要：本文幅を絞って中央に ---- */
  .founder-body{ max-width:640px; margin:28px auto 0; }
  .co-tbl{ max-width:640px; margin-inline:auto; }

  /* ---- 固定CTA：全幅バーではなく右下のフローティングカードに ---- */
  .sticky{
    left:auto; right:32px; bottom:32px;
    width:340px; max-width:340px;
    border-radius:20px; border:1px solid var(--hair);
    box-shadow:var(--sh-lift);
    transform:translateY(140%);
    padding:16px 20px calc(16px + env(safe-area-inset-bottom));
  }
  .sticky.is-on{ transform:translateY(0); }
}

/* ============================================================
   大画面（1440px以上）の調整
   .page の最大幅を外して画面いっぱいに広げたことで、超ワイドなモニタでは
   ①ヒーロー写真が伸びすぎる ②各セクションの中身が画面端に寄って間延びする
   という問題が出るため、ここで中身の最大幅と左右パディングを引き上げて調整する
   ============================================================ */
@media (min-width:1440px){

  /* セクションの左右パディングを広げ、中身の最大幅も引き上げる */
  .sec{ padding-inline:calc((100vw - 1240px) / 2); }
  .inner{ max-width:1240px; }

  /* ヒーロー：左テキスト列を画面左端に張り付かせず、他セクションと左端を揃える */
  .fv{ padding-left:calc((100vw - 1240px) / 2); }
  .fv-target,.fv-name,.fv-benefit,.fv-stats,.fv-desc,.fv-cta{ max-width:560px; }
  /* 写真は右端に固定したまま、左端だけテキスト列の右に追従させる
     （max-width で頭打ちにすると右端との間に隙間ができるため、幅ではなく左端位置で制御する） */
  .fv-benefit-photo-wrap{
    width:auto;
    left:calc((100vw - 1240px) / 2 + 592px);
    right:0;
  }
}

/* 1760px以上：中身の最大幅をさらに引き上げ、全体を中央のカラムに収める */
@media (min-width:1760px){
  .sec{ padding-inline:calc((100vw - 1400px) / 2); }
  .inner{ max-width:1400px; }
  .fv{ padding-left:calc((100vw - 1400px) / 2); }
  .fv-benefit-photo-wrap{ left:calc((100vw - 1400px) / 2 + 592px); }
}