/* =========================================================
   sema-theme page-first-time.css（「はじめての方へ」固有）
   共通土台（page.css）を継承。独自の導入面＋STEP見出しの再設計。
   STEP番号を視覚的アクセントとして独立させ、各節の起点にする。
   バッジ/ピル/チップ/カード/工程表/タイムラインにはしない。
   ========================================================= */

/* ---- 導入領域：固有（非対称・アイボリー＋右端の深緑面） ---- */
.sema-ft-hero{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg, var(--sema-paper) 0%, var(--sema-ivory) 100%);
  border-bottom:1px solid var(--sema-line);
  padding:clamp(52px,8vw,96px) 0 clamp(36px,5vw,60px);
}
.sema-ft-hero::after{
  content:""; position:absolute; top:0; right:0; height:100%;
  width:clamp(38px,7vw,96px);
  background:linear-gradient(160deg, var(--sema-sage-deep), var(--sema-sage));
}
.sema-ft-hero__inner{ position:relative; z-index:1; padding-right:clamp(52px,9vw,128px); }
.sema-ft-hero__rule{ display:block; width:40px; height:1px; background:var(--sema-bronze); margin-bottom:1.3em; }
.sema-ft-hero__title{
  font-family:var(--sema-serif); font-weight:700;
  font-size:clamp(1.7rem, 3.2vw, 2.35rem); line-height:1.42; letter-spacing:.09em;
  margin:0; color:var(--sema-ink); text-wrap:balance;
}

/* ---- 本文：左寄せ（非対称） ---- */
.sema-ft-body{ max-width:44rem; margin-inline:0; }

/* 導入のリード文（本文先頭段落）を少し大きく */
.sema-ft-body > p:first-child{
  font-size:1.1rem; line-height:2; color:var(--sema-ink); margin-bottom:1.9em;
}

/* 案内リンク（原稿のCTA）——静かな矢印リンク（ゴシック小） */
.sema-ft-body p a{
  display:inline-flex; align-items:center; gap:.45em;
  font-family:var(--sema-sans); font-size:.9rem; letter-spacing:.06em;
  color:var(--sema-sage-deep); text-decoration:none;
}
.sema-ft-body p a::after{ content:"→"; transition:margin .25s var(--sema-ease); }
.sema-ft-body p a:hover{ color:var(--sema-bronze); text-decoration:underline; text-underline-offset:3px; }
.sema-ft-body p a:hover::after{ margin-left:.3em; }

/* =========================================================
   ★2026-08-02 追加：文中の案内リンクを「行」にする
   これまでは長い一文の途中にリンクを挟んでいたため、
   「〜が気になる場合は、女風の客層→もあわせてご覧ください。」のように
   矢印が文の途中に出てきて、どこが行き先か読み取りにくかった。
   「誰向けか（小さいゴシック）／行き先（明朝）」の2段にして、押せる面を行全体に広げる。
   ⚠️ このページはバッジ/ピル/チップ/カードにしない方針なので、
      角丸や色面は使わず、細い罫線と余白だけでボタン状にしている。
   ⚠️ hover でレイアウトを動かさない（動かすとタッチ端末で1回目のタップが外れる）。
   ========================================================= */
.sema-ft-body .sema-ft-links{
  list-style:none; margin:1.15em 0 0; padding:0;
  display:grid; gap:8px;
}
.sema-ft-body .sema-ft-links > li{ margin:0; }
.sema-ft-body .sema-ft-links a{
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:3px 14px;
  padding:13px 15px;
  border:1px solid var(--sema-line-2); background:var(--sema-paper);
  text-decoration:none;
  transition:border-color .2s var(--sema-ease), background-color .2s var(--sema-ease);
}
.sema-ft-link__lead{
  grid-column:1; grid-row:1;
  font-family:var(--sema-sans); font-size:.78rem; line-height:1.65; letter-spacing:.04em;
  color:var(--sema-ink-soft);
}
.sema-ft-link__title{
  grid-column:1; grid-row:2;
  font-family:var(--sema-serif); font-size:1.02rem; font-weight:600; line-height:1.5; letter-spacing:.05em;
  color:var(--sema-sage-deep);
}
.sema-ft-link__arrow{
  grid-column:2; grid-row:1 / span 2;
  color:var(--sema-bronze); font-size:.95rem;
}
.sema-ft-body .sema-ft-links a:hover,
.sema-ft-body .sema-ft-links a:focus-visible{
  border-color:var(--sema-sage); background:var(--sema-ivory);
}
.sema-ft-body .sema-ft-links a:focus-visible{ outline:2px solid var(--sema-sage); outline-offset:2px; }

/* 行の直後に来る節のまとめリンク（「◯◯を見る →」）と間を空ける。
   詰まっていると、まとめリンクが行の一部に見えてしまう。 */
.sema-ft-body .sema-ft-links + p{ margin-top:1.5em; }

@media (min-width:768px){
  .sema-ft-body .sema-ft-links a{ padding:14px 18px; }
  .sema-ft-link__title{ font-size:1.06rem; }
}

/* =========================================================
   STEP見出し（再設計）— モバイル既定
   STEP(小ゴシック) / 数字(明朝・大) / 短い罫線 / タイトル(明朝・段差)
   ========================================================= */
.sema-ft-body .sema-ft-step{
  display:flex; flex-direction:column; align-items:flex-start;
  margin:2.8em 0 .9em;
}
.sema-ft-body .sema-ft-step:first-of-type{ margin-top:2.2em; }
.sema-ft-body .sema-ft-step__index{
  display:flex; flex-direction:column; align-items:flex-start; line-height:1;
}
.sema-ft-body .sema-ft-step__label{
  font-family:var(--sema-sans); font-weight:700; font-size:.62rem;
  letter-spacing:.26em; color:var(--sema-bronze); margin-bottom:.55em;
}
.sema-ft-body .sema-ft-step__num{
  font-family:var(--sema-serif); font-weight:600; font-size:2rem;
  color:var(--sema-sage-deep); line-height:1;
}
.sema-ft-body .sema-ft-step__num::after{
  content:""; display:block; width:24px; height:1px; background:var(--sema-bronze); margin-top:.6em;
}
.sema-ft-body .sema-ft-step__title{
  font-family:var(--sema-serif); font-weight:600;
  font-size:clamp(1.24rem, 4.4vw, 1.5rem); line-height:1.55; letter-spacing:.05em;
  color:var(--sema-ink); margin:.85em 0 0 1.1em; /* 段差：少し右へずらす */
}
/* STEP直後の本文はタイトルの位置に合わせて軽く整える */
.sema-ft-body .sema-ft-step + p{ margin-top:.2em; }

/* =========================================================
   PC：番号を左・タイトルを右（非対称・段差）／左に読み進める細い縦線
   ========================================================= */
@media (min-width:768px){
  .sema-ft-body{ border-left:1px solid var(--sema-line-2); padding-left:clamp(26px,3.5vw,46px); }

  .sema-ft-body .sema-ft-step{
    flex-direction:row; align-items:flex-start; gap:clamp(20px,2.6vw,34px);
    margin:3em 0 1em;
  }
  .sema-ft-body .sema-ft-step__index{ flex:0 0 auto; padding-top:.25em; }
  .sema-ft-body .sema-ft-step__num{ font-size:2.3rem; }
  .sema-ft-body .sema-ft-step__num::after{ width:26px; }
  .sema-ft-body .sema-ft-step__title{
    margin:.55em 0 0; /* 番号の高さに合わせた段差（ラベルより下へ） */
    font-size:clamp(1.32rem, 2.2vw, 1.6rem);
  }
}