@charset "utf-8";
/* =========================================================
   index.css — トップページ専用（ホログラム版）
   FV / About / Profile(message) / Service / Flow /
   News / Contact(corp)＋お問い合わせフォーム

   変数・リセット・ヘッダー・フッター・見出し・ガラスカード・
   ボタン・光の円は common.css 側にある。
   行間は DESIGN.md の規定値（1.4 / 1.5 / 1.6 / 1.75 / 2.0 / 2.6）だけを使う。
   ========================================================= */


/* =========================================================
   FV（ファーストビュー）
   左＝文字、右＝ロゴの組み上がりアニメ（js/fv-anim.js が #fv-stage に描く）。
   文字の出現も js/fv-anim.js が data-rise="秒" を見て制御する（CSSアニメは使わない）。
   ========================================================= */
.fv {
  position: relative;
  isolation: isolate;   /* ぼかし円の z-index:-1 をこのセクション内に閉じ込める */
  overflow: clip;       /* 画面外へ出るぼかし円で横スクロールが生まれないよう切り落とす */
  padding: var(--sec-y-lg) var(--pad-x) var(--sec-y); }

.fv__inner {
  max-width: 1120px;   /* About以下の .inner と同じ幅。文字とボタンの左端を揃える（2026-09-05。旧1280px） */
  margin: 0 auto;
  display: grid;
  grid-template-columns: 560px 1fr;
  gap: 64px;
  align-items: center; }

.fv__glow--1 {
  left: -120px; top: -80px; width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(91,172,224,.35) 0%, rgba(255,255,255,0) 70%); }
.fv__glow--2 {
  right: -60px; top: 120px; width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(243,159,128,.3) 0%, rgba(255,255,255,0) 70%); }
.fv__glow--3 {
  right: 300px; bottom: -160px; width: 460px; height: 460px;
  background: radial-gradient(circle, rgba(125,202,202,.35) 0%, rgba(255,255,255,0) 70%); }

.fv__en {
  margin-bottom: 24px;
  font-family: var(--font-accent);
  font-weight: 300;
  font-size: 20px;
  letter-spacing: 0.05em;
  line-height: 1.75; }

.fv__catch { margin-bottom: 32px; }
.fv__catch-line {
  display: block;
  font-weight: 500;
  font-size: 32px;
  letter-spacing: .1em;
  line-height: 1.4;   /* 文字が大きいほど比率を小さくする方針に従い最小の1.4 */
  /* 2行のキャッチは意図した位置で改行させる。幅ごとに文字サイズを落として収める */
  white-space: nowrap; }

.fv__lead {
  margin-bottom: 48px;
  font-size: 15px;
  letter-spacing: .07em;
  line-height: 2; }
.fv__lead-br { display: none; }   /* リードの改行はスマホ幅（600px以下）のみ有効 */

.fv__actions {
  display: flex;
  align-items: center;
  gap: 24px; }

/* JSで出現させる要素は、開始時点では隠しておく。
   html.is-fv-anim は fv-anim.js が付けるので、JSが動かない環境では文字が消えたままにならない */
html.is-fv-anim [data-rise] { opacity: 0; }

.fv__figure { position: relative; }

/* ロゴの組み上がりアニメのステージ（SVGは fv-anim.js がこの中に描く） */
.fv__stage {
  height: 460px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center; }
.fv__stage .stage__svg { display: block; overflow: visible; height: 100%; }

@media (prefers-reduced-motion: reduce) {
  [data-rise] { opacity: 1 !important; transform: none !important; } }


/* =========================================================
   About
   ========================================================= */
.glow--about-1 {
  right: -100px; top: -100px; width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(125,202,202,.35) 0%, rgba(255,255,255,0) 70%); }
.glow--about-2 {
  left: 30%; bottom: -200px; width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(91,172,224,.25) 0%, rgba(255,255,255,0) 70%); }

.about__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 96px; align-items: start; }
.about__catch { margin-bottom: 24px; font-size: 20px; font-weight: 500; letter-spacing: .1em; line-height: 1.4; }
.about__txt { margin-bottom: 24px; font-size: 15px; letter-spacing: .07em; line-height: 2; }
.about__txt:last-child { margin-bottom: 0; }

.about__cards { display: grid; gap: 16px; }
.value-card {
  padding: 32px;
  border-radius: 24px;
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 24px;
  align-items: start; }
.value-card__num {
  font-family: var(--font-accent);
  font-weight: 300;
  font-size: 20px;
  letter-spacing: .05em;
  line-height: 1.75;
  text-align: center; }
.value-card__title { margin-bottom: 8px; font-size: 18px; font-weight: 500; letter-spacing: .05em; line-height: 1.5; }
.value-card__text { font-size: 13px; letter-spacing: .05em; line-height: 2; }


/* =========================================================
   Profile（1枚の大きなガラスカード）
   ========================================================= */
.glow--profile {
  left: -140px; top: 40px; width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(243,159,128,.26) 0%, rgba(255,255,255,0) 70%); }

.message__card {
  border-radius: 24px;
  padding: 48px;
  display: grid;
  grid-template-columns: 240px 1fr;   /* 写真は従来300pxの0.8倍 */
  gap: 64px;
  align-items: start; }

.about__img { position: relative; }
.about__img-item { border-radius: 16px; overflow: hidden; }
.about__img-item img { width: 100%; height: auto; }
.about__img-label {
  margin-top: 16px;
  font-style: italic;
  font-family: var(--font-en);
  font-size: 16px;
  letter-spacing: .1em;
  line-height: 1.4; }

/* 氏名の下に肩書きを置く */
.message__profile { margin-bottom: 24px; }
.message__profile-name { font-size: 20px; font-weight: 500; letter-spacing: .1em; line-height: 1.4; }
.message__profile-sub { margin-top: 8px; font-size: 13px; letter-spacing: .1em; line-height: 1.6; color: var(--sub-gray-mid); }
.message__txt { font-size: 15px; letter-spacing: .07em; line-height: 2; }
.message__txt--2 { margin-top: 24px; }   /* 段落間（本文標準） */
/* 活動フィールドは本文の下。DESIGN.md「その他の要素」（13px / 0.05em / line-height 2.0）。
   本文と同格に見せず、補足として一段下げ、右寄せにする
   （note 導線を置いていたときの揃えを踏襲。導線は 2026-09-05 に外した） */
.message__txt.message__field {
  margin-top: 24px;
  font-size: 13px;
  letter-spacing: .05em;
  line-height: 2;
  text-align: right;
  color: var(--sub-gray-mid); }


/* =========================================================
   Service（4本柱）
   ガラスカード2×2。カード上部の淡いグラデ地に現行の図形ラベルを載せる。
   差し色は fadein 発火後に .7s / .95s / 1.2s / 1.45s とずらして出る。
   ========================================================= */
.glow--service {
  right: -160px; bottom: -120px; width: 560px; height: 560px;
  background: radial-gradient(circle, rgba(91,172,224,.3) 0%, rgba(255,255,255,0) 70%); }

/* 導入文。見出し（.sec-head の64px）とカードの間に同じ64pxを空ける */
.service__txt {
  margin-bottom: 64px;
  font-size: 15px;
  letter-spacing: .07em;
  line-height: 2; }

.service__list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 40px; }   /* gap は 2026-09-05 に32→40px */

.s4 { position: relative; border-radius: 24px; overflow: hidden; }
/* カード上端のグラデーション線 */
.s4:before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: var(--holo);
  z-index: 2; }

.s4__figure {
  height: 240px;   /* 2026-09-05 に180→240px。アイコン144pxの上下に48pxずつ（PC・SP共通） */
  display: flex;
  align-items: center;
  justify-content: center; }
.s4--ai .s4__figure  { background: linear-gradient(135deg, rgba(91,172,224,.28), rgba(125,202,202,.18), rgba(255,255,255,.4)); }
.s4--app .s4__figure { background: linear-gradient(135deg, rgba(217,217,217,.4), rgba(255,255,255,.5), rgba(125,202,202,.16)); }
.s4--lead .s4__figure{ background: linear-gradient(135deg, rgba(243,159,128,.24), rgba(255,255,255,.4), rgba(91,172,224,.2)); }
.s4--wd .s4__figure  { background: linear-gradient(135deg, rgba(125,202,202,.28), rgba(255,255,255,.4), rgba(243,159,128,.18)); }

.s4 { --s4-label: 144px; }   /* 2026-09-05 に120→144px（2割拡大）。PC・SP共通 */
.s4__label { position: relative; z-index: 0; width: var(--s4-label); flex-shrink: 0; }
.s4__label:before { content: ""; display: block; width: 100%; padding-top: 100%; }
.s4__label-txt {
  position: absolute;
  top: 0; left: 0;
  height: 100%; width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: var(--font-accent);
  font-weight: 300;
  font-size: 17px;   /* 図形120→144pxの拡大に合わせ 14→17px（内側のバランスを拡大前と同じに。2026-09-05） */
  letter-spacing: .05em;
  line-height: 1.6;
  text-align: center;
  color: var(--white);
  z-index: 1; }
.s4__label-txt:before {
  content: "";
  position: absolute;
  bottom: 0; left: 0;
  width: 100%;
  padding-top: 100%;
  z-index: -2; }
/* 差し色 */
.s4__label-txt:after {
  content: "";
  position: absolute;
  z-index: -1;
  opacity: 0;
  transition: 1s var(--ease-line); }
.s4.is-show-before .s4__label-txt:after { transform: none; opacity: 1; }

/* AI導入支援（ティール四角）。文字は四角の中央 */
.s4--ai .s4__label-txt { padding: 0; }
.s4--ai .s4__label-txt:before { background: var(--teal); }
.s4--ai .s4__label-txt:after {
  background: var(--mint);
  width: 40%; padding-top: 40%;
  top: 33%; left: -23.5%;
  transform: scaleX(0);
  transform-origin: top left;
  transition-delay: .7s; }

/* アプリ開発（グレー四角。薄グレー地のため文字だけ基準色） */
.s4--app .s4__label-txt { padding: 0 0 2% 2%; color: var(--text); }
.s4--app .s4__label-txt:before { background: var(--gray-k20); }
.s4--app .s4__label-txt:after {
  background: var(--sub-gray-lt);
  width: 30%; padding-top: 30%;
  top: -9%; left: 78%;
  transform: translate(50%,-40%);
  transition-delay: .95s; }

/* プロジェクト推進（コーラル円）。
   円は同寸の四角より小さく見えるため大きく描く（視覚補正）。2026-09-05 に 108.2%→111.1%（144px枠に対し160px）にし、
   ラベル枠の中心に置く（上下左右へ5.55%ずつはみ出す）。文字は円の中心＝枠の中心なのでパディングなし */
.s4--lead .s4__label-txt { padding: 1% 0 0 0; }   /* 上下のパディングはウェブ制作（1% 上）と同じにして文字の高さを揃える */
.s4--lead .s4__label-txt:before {
  background: var(--coral);
  width: 111.1%; padding-top: 111.1%;
  left: -5.55%; bottom: -5.55%;
  border-radius: 50%; }
.s4--lead .s4__label-txt:after {
  background: var(--sub-coral-lt);
  border-radius: 50%;
  width: 38.9%; padding-top: 38.9%;   /* 144px枠に対し56px（2026-09-05。旧33%＝48px） */
  top: -8%; left: 78%;   /* 大きい円にもう少し重ねる（2026-09-05） */
  transform: translate(60%,-40%);
  transition-delay: 1.2s; }

/* ウェブ制作・運用（ブルー右角丸） */
.s4--wd .s4__label-txt { padding: 1% 3% 0 0; }
.s4--wd .s4__label-txt:before { background: var(--blue); border-radius: 0 46% 46% 0; }
.s4--wd .s4__label-txt:after {
  background: var(--sub-blue-lt);
  border-radius: 46% 46% 0 0;
  width: 37%; padding-top: 37%;
  bottom: -7%; left: 62.5%;
  transform: translateY(50%);
  transition-delay: 1.45s; }

.s4__body { padding: 40px; }
.s4__ttl { font-weight: 500; font-size: 18px; letter-spacing: .05em; line-height: 1.5; }
/* DESIGN.md「本文標準」（15px / 0.07em / line-height 2.0） */
.s4__lead { margin-top: 16px; font-weight: 500; font-size: 15px; letter-spacing: .07em; line-height: 2; }
/* リードは行ごとに --holo の帯を敷く。box-decoration-break: clone で
   改行のたびに帯が分かれ、左右のパディングも各行に付く。
   文字色は基準色のまま（グラデーションは背景だけに使う）。
   白のベールを重ねて彩度を落とし、本文の可読性を確保している */
.s4__lead span {
  display: inline;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: .18em .4em;
  background-image: linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,.55)), var(--holo); }
/* DESIGN.md「その他の要素」13px / 0.05em / line-height 2.0 */
.s4__txt { margin-top: 24px; font-size: 13px; letter-spacing: .05em; line-height: 2; }
/* #タグは本文の下に横並び。折り返しても行が詰まらないよう gap で間隔をとる */
.s4__word {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  font-size: 13px;
  letter-spacing: .05em;
  line-height: 1.6;
  color: var(--sub-text); }


/* =========================================================
   Flow（Service 内の小ブロック。2026-09-05 に独立セクションから移動）
   4本柱カードの下に、細いグラデ罫で区切って置く。
   見出しは Service の h2 の下位（h3）なので、英字は .sec-head__en（35px）より小さい 20px
   ========================================================= */
.service__flow { margin-top: 96px; }
.service__flow-head { margin-bottom: 48px; }
.service__flow-head .sec-head__row { align-items: center; }   /* 共通のbaseline揃えだと和文が上寄りに見えるため、英字の高さ中央に（2026-09-05） */
.service__flow-en {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-en);
  font-style: italic;   /* セクション見出しの英字（立体・35px）と役割を分けるため、イタリック＋前に短い罫を置く（2026-09-05） */
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0.16em;
  line-height: 1.4; }
.service__flow-en:before {
  content: "";
  display: block;
  width: 32px;
  height: 1px;
  background: var(--holo); }
.service__flow-ttl { font-size: 14px; font-weight: 500; letter-spacing: 0.1em; line-height: 1.6; color: var(--text); }   /* h4。2026-09-05 に 12px・グレーから 14px・基準色に（見出しとしての存在感を少し上げる） */

.flow__grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 32px; align-items: start; }   /* gap は 2026-09-05 に24→32px */
.flow__head { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.flow__num {
  flex-shrink: 0;
  width: 48px; height: 48px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-accent);
  font-weight: 300;
  font-size: 20px;
  letter-spacing: .05em;
  line-height: 1.75;
  color: var(--text);
  border: 1px solid transparent;
  background: linear-gradient(var(--glass-strong),var(--glass-strong)) padding-box, var(--holo) border-box; }
/* 進行中〜完了の段階を塗りつぶしで示す */
.flow__num--fill { color: var(--white); border: 0; background: var(--holo); }
.flow__line { flex: 1; height: 1px; background: var(--holo); opacity: .7; }
.flow__title { margin-bottom: 8px; font-size: 18px; font-weight: 500; letter-spacing: .05em; line-height: 1.5; }
.flow__text { font-size: 13px; letter-spacing: .05em; line-height: 2; }


/* =========================================================
   News（トップの最新1件）
   DOMは news-post スキルが参照するため変えず、見た目だけ行スタイルにする。
   ========================================================= */
.news__head { margin-bottom: 48px; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.news__head-main { flex: 1; margin-bottom: 0; }

.news__list-item a {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 32px;
  align-items: center;
  padding: 24px 8px;
  border-top: 1px solid var(--border-soft);
  color: var(--text);
  transition: background var(--dur) var(--ease); }
.news__list-item:last-child a { border-bottom: 1px solid var(--border-soft); }
.news__list-item a:hover { background: rgba(255,255,255,.5); }

.news__list-head { display: flex; align-items: center; gap: 24px; }
.news__list-date { font-family: var(--font-en); font-size: 13px; letter-spacing: .05em; line-height: 1.6; color: var(--sub-text); }
/* カテゴリはグラデ枠のピル */
.news__list-cate {
  font-size: 12px;
  letter-spacing: .1em;
  line-height: 1.6;
  text-align: center;
  padding: 4px 14px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: linear-gradient(var(--glass-strong),var(--glass-strong)) padding-box, var(--holo) border-box; }
.news__list-ttl {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 15px;
  letter-spacing: .07em;
  line-height: 2; }

.news__link.tb, .news__link.sp { margin-top: 32px; }


/* =========================================================
   Contact
   黒地のCTAセクション（.corp 系）は全ページ共通のため common.css が持つ。
   ここにはお問い合わせフォーム（/contact/）の指定だけを置く。
   ========================================================= */

/* =========================================================
   お問い合わせフォーム
   黒地の上に白いカード（角丸24px）として載せる。
   HTMLの構造・name・id・注記は dev から変えていない。
   ========================================================= */

/* --- リード文（黒地の上なので白） --- */
.cform__lead {
  font-size: 15px;
  letter-spacing: .1em;
  line-height: 2.6;
  color: var(--white);
  margin-bottom: 48px; }

/* --- フォーム本体：黒地に載る白いカード --- */
.cform {
  background: var(--white);
  border-radius: 24px;
  padding: 56px 64px 64px;
  box-shadow: 0 32px 80px -40px rgba(0,0,0,.6); }

/* SP専用の改行。リード文で使う（.cform__br-pc は common.css 側） */
.cform__br-sp { display: none; }

/* スパム対策のハニーポット（画面外へ隠す。人間には見えず、ボットだけが入力する） */
.cform__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.cform__note {
  font-size: 13px;
  letter-spacing: .05em;
  line-height: 2;
  color: var(--sub-text);
  text-align: right;
  margin-bottom: 24px; }

/* --- 各項目 --- */
.cform__row { margin-bottom: 32px; }
.cform__label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: .1em;
  line-height: 1.6;
  margin-bottom: 12px; }

/* 必須マーク（記号のみ。文字バッジは使わない） */
.cform__req { color: var(--teal); font-size: 15px; line-height: 1; }

/* --- 入力欄 --- */
.cform__field,
.cform__textarea {
  width: 100%;
  font-family: inherit;
  font-size: 15px;
  letter-spacing: .07em;
  line-height: 2;
  color: var(--text);
  background: var(--white);
  border: 1px solid var(--gray-k20);
  border-radius: 8px;
  padding: 13px 16px;
  transition: border-color .3s var(--ease-line); }
.cform__field::placeholder,
.cform__textarea::placeholder { color: var(--sub-gray-lt); }
.cform__textarea { min-height: 200px; resize: vertical; display: block; }
.cform__field:focus,
.cform__textarea:focus { outline: none; border-color: var(--teal); }

/* --- エラー表示（ブラウザ標準の吹き出しを止め、自前で出す） ---
   ※ 色は暫定。DESIGN.mdの世界観に合わせて要確定（オレンジは使わない方針） */
.cform__field.is-error,
.cform__textarea.is-error { border-color: #C0392B; }
.cform__error {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  letter-spacing: .03em;
  line-height: 1.6;
  color: #C0392B; }

/* --- 送信エリア：同意 → ボタン → 対応目安（中央揃え） --- */
.cform__submit-area { margin-top: 48px; text-align: center; }
.cform__agree {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  text-align: left;
  font-size: 14px;
  letter-spacing: .05em;
  line-height: 1.6;
  margin-bottom: 0;    /* エラー文を「同意する」の直下（8px）に付けるため下余白は持たせない */
  cursor: pointer; }
.cform__agree input {
  width: 18px; height: 18px; margin-top: 3px; flex-shrink: 0;
  accent-color: var(--teal); }
.cform__agree a {
  color: var(--text);
  position: relative;
  text-decoration: none;
  border-bottom: 1px solid var(--text);
  padding-bottom: 1px; }

.cform__submit {
  display: block;
  width: 100%;
  max-width: 340px;
  margin: 32px auto 0;
  padding: 19px 40px;
  text-align: center;   /* リセット継承でleftになっていたため明示的に中央へ */
  font-family: inherit;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: .15em;
  color: var(--white);
  background: var(--text);   /* ブランド4色は白文字とのコントラストが不足するため基準色を使う */
  border: 1px solid var(--text);
  border-radius: 999px;
  cursor: pointer;
  transition: opacity .3s var(--ease-line); }
.cform__submit:hover { opacity: .75; }

/* =========================================================
   お問い合わせページ（/contact/）
   トップの黒地セクションとは地色が逆になるため、
   リード文の色とカードの陰影だけをここで上書きする
   ========================================================= */
.cpage { max-width: 840px; margin: 0 auto; }
.cpage__ttl { margin-bottom: 16px; }
.cpage__ja {
  margin-bottom: 32px;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: .1em;
  line-height: 1.4; }
.cpage .holo-rule { margin-bottom: 40px; }
/* リード文の下はフォームまでの余白をとる */
.cpage .cform__lead { color: var(--sub-text); margin-bottom: 40px; }
.cpage .cform {
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-glass); }

/* =========================================================
   レスポンシブ
   1200 / 900 / 600px（common.css と同じ切り方）
   ========================================================= */
@media screen and (max-width: 1200px) {
  .fv__inner { gap: 40px; grid-template-columns: 1fr 1fr; }
  .fv__catch-line { font-size: 26px; }   /* 2カラムのまま列が細るぶん、1行に収まる大きさへ落とす */
  .about__grid { gap: 48px; }
  .message__card { gap: 40px; grid-template-columns: 208px 1fr; }   /* 従来260pxの0.8倍 */
}

@media screen and (max-width: 900px) {
  .fv { padding: 64px var(--pad-x) var(--sec-y); }
  .fv__inner { grid-template-columns: 1fr; gap: 40px; }
  .fv__catch-line { font-size: 28px; }   /* 1カラムに戻るので幅に余裕ができる */
  .fv__stage { height: 380px; }

  .about__grid, .message__card { grid-template-columns: 1fr; }
  .message__card { padding: 32px; }
  .about__img { max-width: 240px; }   /* 1カラムに戻ったときも0.8倍を保つ */

  .service__list, .flow__grid { grid-template-columns: 1fr 1fr; }
}

@media screen and (max-width: 600px) {
  /* SPは 英文 → キャッチ → ロゴ → ボタン の縦1本にして、100dvh の上下中央に置く
     （旧サイトのSP方針。運用・実装メモ「FVのレスポンシブ構成」に合わせたもの） */
  .fv {
    display: flex;
    align-items: center;
    min-height: calc(100vh - var(--header-h));    /* dvh 非対応ブラウザ向けのフォールバック */
    min-height: calc(100dvh - var(--header-h));   /* ヘッダー分を引かないと中身が画面中央より下がる（2026-09-05） */
    padding: 24px 20px; } /* 上下対称。中央寄せの計算を素直にするため。左右は --pad-x と同じ20px */

  /* .fv__body を透過させて、英文・キャッチ・ロゴ・ボタンを同じ縦並びの兄弟にする
     （DOM順は 本文 → ロゴ のままで、order だけでボタンをロゴの下へ回す） */
  .fv__inner {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;   /* PC用の center のままだと、ボタンが全幅にならない */
    gap: 0; }
  .fv__body { display: contents; }
  .fv__en      { order: 1; font-size: 15px; margin-bottom: 14px; }
  .fv__catch   { order: 2; margin-bottom: 18px; }
  .fv__figure  { order: 3; }
  .fv__actions { order: 4; margin-top: 20px; }

  /* 19px・行間2.0：旧サイトのSP方針に合わせた大きさ */
  .fv__catch-line { font-size: 19px; line-height: 2; }
  .fv__lead { display: none; }          /* SPはリードを出さず、英文→キャッチ→ロゴ→ボタン */
  .fv__lead-br { display: inline; }
  .fv__actions { flex-direction: column; align-items: stretch; gap: 12px; }

  /* ステージは正方形の viewBox が高さで決まるため、
     ロゴの表示高＝この値 × (JS の LOGO_H_SP / 600)。220 × (540/600) ＝ 198px
     （シンボル幅 158px ＝ 375pxの42%・390pxの40%）。
     iPhone SE の実表示（約553px）でもFV全体が収まる高さとして決めた（仮決め） */
  .fv__stage { height: 220px; }

  .about__catch { font-size: 18px; }
  .value-card { padding: 24px; gap: 16px; grid-template-columns: 40px 1fr; }
  .message__card { padding: 24px; }
  .message__txt.message__field { text-align: left; }   /* SPは左揃え（2026-09-05） */
  .message__profile-name { font-size: 18px; }

  .service__list, .flow__grid { grid-template-columns: 1fr; }
  /* SPは見出し→導入文→カードをいずれも48pxに詰める */
  .service__ttl { margin-bottom: 48px; }
  .service__txt { margin-bottom: 48px; }
  .service__flow { margin-top: 64px; }
  .service__flow-head { margin-bottom: 32px; }
  /* SPは番号の横に見出しを置き、本文は下に全幅で（2026-09-05） */
  .flow__step { display: grid; grid-template-columns: 48px 1fr; column-gap: 16px; align-items: center; }
  .flow__head { margin-bottom: 0; }
  .flow__title { margin-bottom: 0; }
  .flow__text { grid-column: 1 / -1; margin-top: 12px; }
  /* SPで縦に積むと、番号の右に伸びる線が意味を持たなくなる */
  .flow__line { display: none; }

  .news__head { display: block; }
  .news__head-main { margin-bottom: 24px; }
  .news__list-item a { display: block; padding: 20px 0; }
  .news__list-head { margin-bottom: 12px; }

  .cpage__ja { font-size: 18px; }
  .cpage .holo-rule { margin-bottom: 32px; }
  .cform__lead { font-size: 14px; line-height: 2; margin-bottom: 32px; }
  .cform { padding: 32px 20px; border-radius: 16px; }
  .cform__row { margin-bottom: 24px; }
  .cform__textarea { min-height: 170px; }
  .cform__submit-area { margin-top: 32px; }
  .cform__submit { max-width: none; }
  /* リード文は句点ごとに4行にする */
  .cform__br-sp { display: inline; }
  /* 375pxで「プライバシーポリシーに同意する＊」を1行に収める */
  .cform__agree { font-size: 13px; }
  .cform__agree .cform__req { font-size: 13px; }
  /* プレースホルダーは補足文と同じ13pxに合わせる（入力文字は15pxのまま） */
  .cform__textarea::placeholder { font-size: 13px; letter-spacing: .05em; }
}

/* 375px未満（対応の下限は375pxなので、ここは保険）。
   nowrap のままだと内容幅が足りず右が無言で切り取られるため、折り返しを許す */
@media screen and (max-width: 374px) {
  .fv__catch-line { white-space: normal; }
}