@charset "UTF-8";
/* ==========================================================================
   SECTION 10 ｜ 最終CTA「“まず話を聞いてみたい”だけで、大歓迎です。」
   参考元: assets/images/SECTION 10/SECTION10_参考元画像.png (1484x1060)
   設計幅 1484px。ヘッダー下 y=62 を原点にしたセクション座標（高さ 998px）で記述する。
   すべての寸法は「設計px × --u」の単一座標系（入れ子の掛け算をしない）。
   数値はすべて参考元のピクセル実測値（tools/place10.py・tools/box10.py）。
   ファイル末尾の「[CAL] 調整値」は tools/cal10.py が自動で書き換える。手で書かない。
   ========================================================================== */

/* 既存の style.css に「#contact ＝ 黄色いグラデーション」の指定が残っているので、
   ID を含む選択子で必ず上書きする（詳細度で負けると地が黄色くなる）。 */
section#contact.s10{
  --ink:   #061638;   /* 実測 見出し・本文の濃紺 */
  --navy:  #011437;   /* 実測 下部CTAの帯／番号丸 */
  --y:     #FEBF01;   /* 実測 黄（帯・三角） */
  --green: #06BA29;   /* 実測 LINEボタンの緑 */
  --ybtn:  #FEBE01;   /* 実測 フォームボタンの黄 */
  --card:  #FEFEFE;   /* 実測 カード・安心バーの地 */
  --bg:    #FCFCFD;   /* 実測 ページ地 */
  --cline: #F2F2F3;   /* 実測 カードの枠線 */
  --divc:  #E5E5E6;   /* 実測 安心バーの点線 */

  position: relative;
  display: flex;
  justify-content: center;
  background: var(--bg);
  overflow: hidden;
  isolation: isolate;
  padding: 0;
}

.s10-stage{
  --u: 0.0673854cqw;              /* 1 設計px。1484px 幅のとき 1px */
  position: relative;
  width: min(100%, 1484px);
  height: calc(920 * var(--u));
  container-type: inline-size;
  font-family: "Noto Sans JP", sans-serif;
  color: var(--ink);
  font-feature-settings: "palt" 0;   /* 参考元は約物を詰めていない */
}
.s10-stage > *{ --u: 0.0673854cqw; }
.s10-stage img{ display: block; }

/* 位置指定の共通形（--x/--y2/--w/--h だけを各要素で持つ） */
.s10-stage img[data-cal10],
.s10-card, .s10-panel, .s10-circle, .s10-btnbg, .s10-div, .s10-t{
  position: absolute;
  left: calc(var(--x) * var(--u));
  top:  calc(var(--y2) * var(--u));
}
.s10-stage img[data-cal10],
.s10-card, .s10-panel, .s10-circle, .s10-btnbg{
  width:  calc(var(--w) * var(--u));
  height: calc(var(--h) * var(--u));
}
.s10-stage img[data-cal10]{ z-index: 3; }
/* リンクとリストは「箱を作らない入れ物」。中の要素はすべてステージ座標で置く。 */
.s10-steps li, .s10-btn, .s10-cta{ display: contents; }

/* ── 重なり順（強制指定は使わず、あとに書いた同じ強さの指定で上書きする） ──
   参考元をよく見ると、人物写真はカードの「後ろ」にある（カード3の右端で
   ぴたりと隠れている）。装飾 0 → 人物 1 → カード・パネル・ボタンの地 2 →
   中身の絵と文字 3 → 吹き出し 4 の順に重ねる。 */
.s10-stage img.s10-deco{ z-index: 0; }
.s10-stage img.s10-person{ z-index: 1; }
.s10-stage img.s10-bubble{ z-index: 4; }

/* ── 装飾（いちばん下） ─────────────────────────────────── */
.s10-deco{ pointer-events: none; user-select: none; }
.s10-deco.flipx{ transform: scaleX(-1); }
.s10-deco.flipy{ transform: scaleY(-1); }
.s10-deco.flipxy{ transform: scale(-1, -1); }

/* 右上の黄い帯（参考元の実測：右端 y=171〜360、傾き dx/dy=-1.238）
   と左下の三角（(0,922)(0,998)(156,998)）。どちらも人物・カードの下に敷く。 */
.s10-tri{ position: absolute; inset: 0; z-index: 0; background: var(--y); pointer-events: none; }
.s10-tri.r{
  clip-path: polygon(
    calc(1484 * var(--u)) calc(171 * var(--u)),
    calc(1484 * var(--u)) calc(360 * var(--u)),
    calc(1280 * var(--u)) calc(525 * var(--u)),
    calc(1280 * var(--u)) calc(336 * var(--u)));
}
.s10-tri.bl{
  clip-path: polygon(0 calc(844 * var(--u)), 0 calc(920 * var(--u)), calc(156 * var(--u)) calc(920 * var(--u)));
}

/* ── 見出し ─────────────────────────────────────────────── */
.s10-head{ margin: 0; position: static; }
.s10-sub{ margin: 0; position: static; }

/* 人物写真。カード1〜3の上・カード4の下に入る。
   参考元の写真はカードの下端（y=551）でスパッと切れているので、そこで切る。 */
/* 写真の枠は設計どおり 403x579。素材の縦横比（0.75）とは違うので、
   引き伸ばさずに枠を埋める（顔が歪まないよう object-fit: cover）。 */
.s10-person{
  clip-path: inset(0 0 calc(var(--cut) * var(--u)) 0);
  object-fit: cover;
  object-position: 50% 12%;   /* 顔が中心に来る位置 */
}

/* ── ステップカード ─────────────────────────────────────── */
.s10-steps{ list-style: none; margin: 0; padding: 0; }
.s10-card{
  background: var(--card);
  border: calc(1 * var(--u)) solid var(--cline);
  border-radius: calc(26 * var(--u));
  box-shadow: 0 calc(2 * var(--u)) calc(9 * var(--u)) rgba(20, 24, 48, .05);
  z-index: 2;
}


/* ── CTAボタン2本 ───────────────────────────────────────── */
.s10-btnbg{
  border-radius: calc(16 * var(--u));
  z-index: 2;
  transition: transform .2s ease, box-shadow .2s ease;
}
.s10-btnbg.line{ background: var(--green); }
.s10-btnbg.form{ background: var(--ybtn); }
.s10-btn:hover .s10-btnbg{
  box-shadow: 0 calc(6 * var(--u)) calc(16 * var(--u)) rgba(20, 24, 48, .18);
}
.s10-btn img{ z-index: 3; }
.s10-btn:focus-visible .s10-btnbg{ outline: calc(3 * var(--u)) solid var(--ink); outline-offset: calc(3 * var(--u)); }
/* ボタンの中の白丸（素材ではなく CSS の丸） */
.s10-circle{
  background: #FFFFFF;
  border-radius: 50%;
  z-index: 3;
}

/* ── 安心バー ───────────────────────────────────────────── */
.s10-panel{
  background: var(--card);
  border: calc(1 * var(--u)) solid var(--cline);
  border-radius: calc(26 * var(--u));
  box-shadow: 0 calc(2 * var(--u)) calc(9 * var(--u)) rgba(20, 24, 48, .05);
  z-index: 2;
}
.s10-div{                              /* 項目のあいだの縦の点線（実測 4.5px/8.5px） */
  width:  calc(2 * var(--u));
  height: calc(var(--h) * var(--u));
  background: repeating-linear-gradient(180deg,
      var(--divc) 0 calc(4.5 * var(--u)),
      transparent calc(4.5 * var(--u)) calc(8.5 * var(--u)));
  z-index: 2;
}
/* 「秘密厳守」だけ支給素材が無いので CSS で組む（他の3つは素材） */
.s10-t{
  margin: 0;
  z-index: 2;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  color: var(--ink);
}
.s10-t.ttl{ font-size: calc(var(--fs) * var(--u)); letter-spacing: calc(var(--ls) * var(--u)); }
.s10-t.dsc{ font-size: calc(var(--fs) * var(--u)); letter-spacing: calc(var(--ls) * var(--u)); }

/* ── 下部 ───────────────────────────────────────────────── */
.s10-cta img{ transition: transform .2s ease; }
.s10-cta:hover img{ transform: translateY(calc(-2 * var(--u))); }
.s10-cta:focus-visible img{ outline: calc(3 * var(--u)) solid var(--ink); outline-offset: calc(2 * var(--u)); }

/* ── 動きを減らす設定のとき ─────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  .s10-btnbg, .s10-cta img{ transition: none; }
  .s10-cta:hover img{ transform: none; }
}

/* 安心4つのグループ箱と、下部ひとことのスマホ用テキスト。PC では出さない */
.s10-anshin{ display: contents; }
.s10-btmtx{ display: none; }

/* ── 狭い画面 ───────────────────────────────────────────── */
@media (max-width: 1024px) and (min-width: 901px){
  .s10-stage{ --u: 0.0673854cqw; }
}

/* ── スマホ：縦積みに組み直す ───────────────────────────── */
/* 注意：基底の「.s10-stage img[data-cal10]{width/height:calc(...)}」は
   セレクタが強い（クラス2＋要素1）ので、ここでも同じ強さ以上で書く。 */
@media (max-width: 900px){
  section.s10{ padding: 44px 0 52px; }
  .s10-stage{ height: auto; min-height: 0; container-type: normal; padding: 0 5vw; }

  .s10-stage img.s10-deco,
  .s10-stage img[data-cal10^="arw"],
  .s10-stage img[data-cal10="btm_text"],
  .s10-tri, .s10-div, .s10-panel, .s10-card,
  .s10-btnbg, .s10-circle{ display: none; }

  /* 画像は原寸ではなく親幅基準に戻す（この1行が基底より強い必要がある） */
  .s10-stage img[data-cal10]{ position: static; width: auto; height: auto; }

  /* ── 見出し：画像をやめて本物のテキストで組む ── */
  .s10-head{ text-align: left; }
  .s10-stage img[data-cal10^="head_"]{ display: none; }
  .s10-headtx{
    display: block; text-align: left; font-weight: 900; color: var(--ink);
    font-size: clamp(21px, 5.6vw, 27px); line-height: 1.5; letter-spacing: 0;
  }
  .s10-sub{ position: static; }
  .s10-subtx{
    display: block; margin-top: 12px; text-align: left; font-weight: 700; color: var(--ink);
    font-size: 15px; line-height: 1.7;
  }

  /* ── 人物写真と手書き吹き出し ── */
  /* 吹き出しが左・写真が右（HTML の並び順で決まる）。間の 4% は左側の吹き出しが持つ */
  .s10-stage img.s10-bubble{ position: static; display: inline-block;
                             width: 38%; max-width: 165px; height: auto;
                             vertical-align: middle; margin: 14px 4% 0 0; }
  .s10-stage img.s10-person{ position: static; display: inline-block;
                             width: 52%; max-width: 230px; height: auto;
                             vertical-align: bottom; margin-top: 14px;
                             clip-path: none; }

  /* ── 4ステップ：1ステップ＝1カード ── */
  .s10-steps{ margin: 10px 0 0; padding: 0; list-style: none; }
  .s10-steps li{
    display: grid;
    grid-template-columns: 52px 1fr;
    grid-template-areas: "badge title" "icon body";
    grid-template-rows: auto 46px;
    align-items: center; column-gap: 12px; row-gap: 8px;
    margin-top: 12px; padding: 14px 16px;
    background: var(--card); border: 1px solid var(--cline);
    border-radius: 14px;
    box-shadow: 0 2px 6px rgba(20,24,48,.05);
  }
  .s10-stage .s10-steps img[data-cal10$="_badge"]{ grid-area: badge; width: 40px; height: auto; }
  .s10-stage .s10-steps img[data-cal10$="_icon"]{ grid-area: icon; width: auto; height: 44px; justify-self: center; }
  /* 文字は画像をやめてテキストに（13px の画像は読みにくいため） */
  .s10-stage .s10-steps img[data-cal10$="_title"],
  .s10-stage .s10-steps img[data-cal10$="_desc1"],
  .s10-stage .s10-steps img[data-cal10$="_desc2"]{ display: none; }
  .s10-sttx{ grid-area: title; justify-self: start; text-align: left;
             font-weight: 800; font-size: 17px; color: var(--ink); line-height: 1.4; }
  .s10-sdtx{ grid-area: body; justify-self: start; text-align: left;
             font-weight: 500; font-size: 14px; color: #3A4258; line-height: 1.65; }

  /* ── LINE／フォームの2ボタン ── */
  .s10-btn{
    display: grid;
    grid-template-columns: 48px 1fr;
    grid-template-areas: "mark title" "mark sub";
    align-items: center; column-gap: 14px; row-gap: 6px;
    width: 100%; margin-top: 14px; padding: 18px;
    border-radius: 14px; text-decoration: none;
  }
  .s10-btn.line{ background: var(--green); margin-top: 22px; }
  .s10-btn.form{ background: var(--ybtn); }
  /* LINE のロゴは白いので、白丸を敷かないと緑地に埋もれる */
  .s10-stage .s10-btn img[data-cal10="bl_mark"]{
    grid-area: mark; width: 46px; height: auto;
    background: #fff; border-radius: 50%; padding: 5px; box-sizing: border-box; }
  .s10-stage .s10-btn img[data-cal10="bf_mail"]{ grid-area: mark; width: 40px; height: auto; justify-self: center; }
  .s10-stage .s10-btn img[data-cal10$="_title"],
  .s10-stage .s10-btn img[data-cal10$="_sub"],
  .s10-stage .s10-btn img[data-cal10$="_arrow"]{ display: none; }
  .s10-bttx{ grid-area: title; justify-self: start; text-align: left;
             font-weight: 800; font-size: 19px; line-height: 1.3; }
  .s10-bstx{ grid-area: sub; justify-self: start; text-align: left;
             font-weight: 500; font-size: 13px; line-height: 1.4; opacity: .92; }
  .s10-btn.line .s10-bttx, .s10-btn.line .s10-bstx{ color: #fff; }
  .s10-btn.form .s10-bttx, .s10-btn.form .s10-bstx{ color: var(--ink); }

  /* ── 安心4つ：1項目1行 ── */
  .s10-anshin{
    display: grid;
    grid-template-columns: 48px 1fr;
    grid-template-areas: "icon title" "icon desc";
    grid-template-rows: auto minmax(32px, auto);
    align-items: center; column-gap: 14px; row-gap: 6px;
    margin-top: 12px; padding: 12px 16px;
    background: var(--card); border: 1px solid var(--cline);
    border-radius: 14px;
  }
  .s10-stage .s10-anshin img[data-cal10$="_icon"]{ grid-area: icon; width: 44px; height: auto; }
  .s10-stage .s10-anshin img[data-cal10$="_title"],
  .s10-stage .s10-anshin img[data-cal10$="_desc"]{ display: none; }
  .s10-attx{ grid-area: title; justify-self: start; text-align: left;
             font-weight: 800; font-size: 16px; color: var(--ink); line-height: 1.4; }
  .s10-adtx{ grid-area: desc; justify-self: start; text-align: left;
             font-weight: 500; font-size: 13.5px; color: #3A4258; line-height: 1.6; }
  .s10-anshin .s10-t{ position: static; }
  .s10-anshin .s10-t.ttl{ grid-area: title; justify-self: start;
                          font-size: 16px; font-weight: 800; letter-spacing: .02em; }
  .s10-anshin .s10-t.dsc{ grid-area: desc; justify-self: start;
                          font-size: 13.5px; font-weight: 500; color: #3A4258;
                          letter-spacing: .01em; line-height: 1.6; }
  .s10-anshin p[data-cal10="a3_d1"]{ align-self: start; }
  .s10-anshin p[data-cal10="a3_d2"]{ align-self: end; }

  /* ── 下部ひとこと（画像の代わりにテキスト） ── */
  .s10-btmtx{
    display: block; margin: 22px 0 0; text-align: center;
    font-weight: 700; font-size: clamp(12px, 3.4vw, 15px); line-height: 1.8;
    color: var(--ink);
  }
}

/* [CAL] 調整値 ここから（tools/cal10.py が書き換える。手で書かない） */
section#contact.s10{
  --a3t-fs: 20.0;  --a3t-ls: 2.67;
  --a3d-fs: 14;  --a3d-ls: 1.14;  --a3d-lh: 20.0;
}
/* [CAL] 調整値 ここまで */