@charset "utf-8";

/* =========================================================
   サービス紹介ページ専用Style（service.css）
   -----------------------------------------------------------
   ・読み込み順： style.css → micro-interactions.css → kasou.css → service.css
   ・すべてのセレクタを body.page-service の中に閉じ込めているので、
     他ページの見た目には一切影響しません。
   ・色は style.css の --c-* トークンをそのまま使っています。
   ========================================================= */

.page-service{
  --sv-line:      #dbe4f0;              /* 罫線（淡い） */
  --sv-line-mid:  #c6d5ea;              /* 罫線（やや濃い） */
  --sv-tint:      #f4f7fc;              /* 行の下地 */
  --sv-tint2:     #eaf0fa;              /* 強みボックスの下地 */
  --sv-navy:      var(--c-navy);
  --sv-navy-deep: var(--c-bg-footer);
  --sv-ease:      cubic-bezier(.2,0,0,1);
}

/* ---------- main の上余白 ----------
   kasou.css は main#main に固定ヘッダー分の余白を入れるが、
   このページはヒーローの淡いグラデーションをヘッダーの裏まで
   敷きたいので、余白はヒーロー側の padding-top で確保する。 */
.page-service main#main{ padding-top: 0; }


/* =========================================================
   1. ヒーロー
   ========================================================= */
.page-service .sv-hero{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: calc(var(--header-h) + clamp(24px, 4vw, 48px));
  padding-bottom: 0;            /* 写真の下端をヒーローの下端にそろえる（文字側の余白は .sv-hero-text で確保） */
  background:
    radial-gradient(120% 90% at 82% 0%, #eaf1fb 0%, rgba(234,241,251,0) 62%),
    linear-gradient(180deg, #ffffff 0%, #f2f6fd 100%);
}
/* 右下の装飾曲線 */
.page-service .sv-hero-wave{
  position: absolute;
  right: 0;
  bottom: -8%;
  width: min(62%, 780px);
  height: 78%;
  z-index: 0;
  pointer-events: none;
}
.page-service .sv-hero-inner{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 46%) minmax(0, 1fr);
  align-items: center;
  gap: clamp(20px, 3vw, 36px);
}
.page-service .sv-hero-title{
  margin: 0;
  color: var(--c-navy);
  font-size: clamp(1.625rem, 2.9vw, 2.3rem);   /* 明朝体（.font-mincho）。文字サイズ拡大（2026-09）：1.5〜2.05rem → 1.625〜2.3rem */
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: .02em;
}
.page-service .sv-hero-lead{
  margin: 1.1em 0 0;
  color: var(--c-note);
  font-size: 1.0625rem;         /* 1rem → 1.0625rem */
  /* 折り返しは HTML の <wbr> と句読点の位置だけで（2026-09 変更）。
     旧：word-break:auto-phrase … Chrome でも「おまか／せください」と切れ、Safari・Firefox は非対応だったため */
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.page-service .sv-hero-action{ margin: 1.6em 0 0; }

/* 文字は写真より前面に（写真の透明なぼかし部分を文字の下に潜らせるため） */
.page-service .sv-hero-text{
  position: relative;
  z-index: 1;
  padding-bottom: clamp(32px, 5vw, 56px);
}

/* ---- 写真：images/mv_onestop.png（2026-09-28 差し替え）----
   左端・下端がもともと透明にぼかしてあるPNGなので、枠や背景色は付けず、
   ヒーローの背景（白〜淡いブルー）にそのまま溶かす。
   ・右端 … 画面の端まで伸ばす（はみ出しは .sv-hero の overflow:hidden で切れる）
   ・左端 … 透明なぼかし部分を見出し側へ少し潜らせる（margin-left の負の値）
   ・上端 … 写真がまっすぐ切れているので、マスクで背景へ溶かす
   ・下端 … ヒーローの下端（パンくずの帯）にそろえる */
.page-service .sv-hero-photo{
  position: relative;
  z-index: 0;
  align-self: end;
  margin-left: -8%;
  margin-right: -20px;          /* .l-wide の左右余白（20px）ぶん画面の端まで */
}
.page-service .sv-hero-img{
  display: block;
  width: 100%;
  height: auto;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 18%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 18%);
}
/* 写真がまだ無い時のプレースホルダー（.ph）用 */
.page-service .sv-hero-photo .ph{
  min-height: 0;
  aspect-ratio: 16 / 9.6;
  border-radius: 10px;
  margin-bottom: clamp(32px, 5vw, 56px);
}
/* PCでは写真を画面の右端まで伸ばす（カンプ準拠）。
   はみ出した分は .sv-hero の overflow:hidden で切り取られる。 */
@media (min-width: 1081px){
  .page-service .sv-hero-photo{
    margin-right: calc((1080px - 100vw) / 2 - 20px);
  }
}


/* =========================================================
   2. セクション見出し（共通）
   ========================================================= */
.page-service .sv-head{
  text-align: center;
  margin-bottom: clamp(20px, 3vw, 32px);
}
.page-service .sv-head-title{
  margin: 0;
  color: var(--c-navy);
  font-size: clamp(1.625rem, 3.2vw, 2.125rem);   /* 1.5〜1.875rem → 1.625〜2.125rem */
}
.page-service .sv-head-title.is-sm{ font-size: clamp(1.375rem, 2.6vw, 1.75rem); }   /* 1.25〜1.5rem → 1.375〜1.75rem */
.page-service .sv-head-note{ margin: .5em 0 0; font-size: 1.0625rem; }              /* .9375rem → 1.0625rem */

/* タイトルと注釈を横並びにする（事例紹介） */
.page-service .sv-head.is-inline{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-start;
  gap: .4em 1.2em;
  text-align: left;
}
.page-service .sv-head.is-inline .sv-head-note{ margin: 0; }

/* 左右に細い罫線が伸びる中央見出し（よくあるご質問） */
.page-service .sv-title-rule{
  display: flex;
  align-items: center;
  gap: 1em;
  margin: 0 0 clamp(18px, 3vw, 28px);
  color: var(--c-navy);
  font-size: clamp(1.375rem, 2.6vw, 1.75rem);   /* 1.25〜1.5rem → 1.375〜1.75rem */
  text-align: center;
}
.page-service .sv-title-rule::before,
.page-service .sv-title-rule::after{
  content: "";
  flex: 1 1 0;
  height: 1px;
  background: var(--sv-line-mid);
}

.page-service .sv-center{ text-align: center; margin: 0; }


/* =========================================================
   3. 制作〜印刷〜発送までの流れ
   -----------------------------------------------------------
   1行 = 番号／写真／アイコン／本文／強み の5カラムグリッド。
   08 だけ .is-feature で紺ベタの強調ブロックになります。
   ========================================================= */
.page-service .sv-flow{
  padding-block: clamp(40px, 6vw, 64px);
  background: var(--c-bg);
}
.page-service .flow-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.page-service .flow-item{
  display: grid;
  grid-template-columns: 66px 190px 52px minmax(0, 1fr) 204px;   /* 番号・強みの列を文字サイズ拡大に合わせて少し広げる（62→66／184→204px） */
  align-items: center;
  gap: 16px;
  padding: 10px 16px 10px 6px;
  background: var(--sv-tint);
  border: 1px solid var(--sv-line);
  border-radius: 8px;
}

.page-service .flow-num{
  justify-self: center;
  color: var(--c-navy);
  font-size: 2rem;              /* 1.75rem → 2rem */
  font-weight: 700;
  font-style: italic;
  letter-spacing: .02em;
  line-height: 1;
}

.page-service .flow-photo{ align-self: stretch; }
.page-service .flow-photo .ph,
.page-service .flow-photo img{
  width: 100%;
  height: 100%;
  min-height: 68px;
  border-radius: 6px;
  font-size: .8125rem;
  object-fit: cover;
}

.page-service .flow-icon{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  justify-self: center;
  color: var(--c-navy);
  background: #fff;
  border: 1px solid var(--sv-line-mid);
  border-radius: 8px;
}
.page-service .flow-icon svg{ width: 24px; height: 24px; }

.page-service .flow-title{
  margin: 0 0 .25em;
  color: var(--c-navy);
  font-size: 1.1875rem;         /* 1.0625rem → 1.1875rem */
  line-height: 1.4;
}
.page-service .flow-desc{
  margin: 0;
  color: var(--c-text);
  font-size: 1rem;              /* .875rem → 1rem */
  line-height: 1.7;
}

/* 強みバッジ */
.page-service .flow-merit{
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 8px 12px;
  background: var(--sv-tint2);
  border: 1px solid var(--sv-line-mid);
  border-radius: 6px;
  text-align: center;
}
.page-service .flow-merit-label{
  color: var(--c-note);
  font-size: .8125rem;          /* .75rem → .8125rem */
  letter-spacing: .08em;
}
.page-service .flow-merit-text{
  color: var(--c-navy);
  font-size: .9375rem;          /* .8125rem → .9375rem */
  font-weight: 700;
  line-height: 1.5;
  word-break: auto-phrase;
}

/* ---------- 08：アフターフォロー（紺の強調ブロック） ---------- */
.page-service .flow-item.is-feature{
  grid-template-columns: 66px 190px minmax(0, 1fr);
  align-items: stretch;
  padding: 14px 16px 14px 6px;
  color: #fff;
  background: linear-gradient(120deg, var(--sv-navy-deep) 0%, var(--sv-navy) 100%);
  border-color: var(--sv-navy-deep);
}
.page-service .flow-item.is-feature .flow-num{
  align-self: center;
  color: #fff;
}
.page-service .flow-item.is-feature .flow-photo .ph{ min-height: 100%; }
.page-service .flow-feature{
  display: grid;
  gap: 12px;
  align-content: center;
}
.page-service .flow-feature-head{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 204px;
  align-items: center;
  gap: 16px;
}
.page-service .flow-item.is-feature .flow-title{ color: #fff; }
.page-service .flow-item.is-feature .flow-desc{ color: var(--c-note-on-navy); }
.page-service .flow-item.is-feature .flow-merit{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.45);
}
.page-service .flow-item.is-feature .flow-merit-label{ color: var(--c-note-on-navy); }
.page-service .flow-item.is-feature .flow-merit-text{ color: #fff; }

/* 08 の中の3カード */
.page-service .flow-sub{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.page-service .flow-sub > li{
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 6px;
}
.page-service .flow-sub-icon{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  color: #fff;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 6px;
}
.page-service .flow-sub-icon svg{ width: 20px; height: 20px; }
.page-service .flow-sub-body{ display: grid; gap: 2px; }
.page-service .flow-sub-body b{
  color: #fff;
  font-size: 1.0625rem;         /* .9375rem → 1.0625rem */
  line-height: 1.4;
}
.page-service .flow-sub-body span{
  color: var(--c-note-on-navy);
  font-size: .9375rem;          /* .8125rem → .9375rem */
  line-height: 1.6;
}


/* =========================================================
   4. よくあるご質問（details / summary）
   ========================================================= */
.page-service .sv-faq{
  padding-block: clamp(32px, 5vw, 52px);
  background: var(--c-bg);
}
.page-service .faq-list{
  border-top: 1px solid var(--sv-line);
  margin-bottom: clamp(20px, 3vw, 28px);
}
.page-service .faq-item{
  border-bottom: 1px solid var(--sv-line);
}
.page-service .faq-item > summary{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  padding: 14px 6px;
  color: var(--c-navy);
  font-size: 1.0625rem;         /* .9375rem → 1.0625rem */
  font-weight: 500;
  list-style: none;          /* Firefox の三角を消す */
  cursor: pointer;
  transition: color .2s var(--sv-ease), background .2s var(--sv-ease);
}
.page-service .faq-item > summary::-webkit-details-marker{ display: none; }
.page-service .faq-item > summary:hover{ background: var(--sv-tint); }
.page-service .faq-item > summary:focus-visible{
  outline: 3px solid var(--c-focus);
  outline-offset: 2px;
}
/* 右端の矢印（開くと下向きに回転） */
.page-service .faq-item > summary::after{
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  margin-right: 4px;
  border-top: 1.5px solid var(--c-navy);
  border-right: 1.5px solid var(--c-navy);
  transform: rotate(45deg);
  transition: transform .25s var(--sv-ease);
}
.page-service .faq-item[open] > summary::after{ transform: rotate(135deg); }
.page-service .faq-answer{
  padding: 0 6px 18px;
  color: var(--c-text);
  font-size: 1rem;              /* .9375rem → 1rem */
  line-height: 1.9;
}
.page-service .faq-answer p{ margin: 0; }

@media (prefers-reduced-motion: reduce){
  .page-service .faq-item > summary,
  .page-service .faq-item > summary::after{ transition: none; }
}


/* =========================================================
   5. 事例紹介
   ========================================================= */
.page-service .sv-cases{
  padding-block: clamp(32px, 5vw, 52px) clamp(40px, 6vw, 64px);
  background: var(--c-bg);
}
.page-service .case-cards{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.page-service .case-card > a{
  display: flex;
  flex-direction: column;
  height: 100%;
  color: var(--c-text);
  text-decoration: none;
  transition: transform .25s var(--sv-ease);
}
.page-service .case-card > a:hover{ transform: translateY(-3px); }
.page-service .case-card .ph2{
  min-height: 0;
  aspect-ratio: 16 / 10;
  border-radius: 6px;
  font-size: .8125rem;
}
.page-service .case-card img{
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 6px;
}
.page-service .case-body{
  display: grid;
  gap: .4em;
  padding: 12px 2px 0;
}
.page-service .case-title{
  color: var(--c-navy);
  font-size: 1.1875rem;         /* 1.0625rem → 1.1875rem */
  font-weight: 700;
}
.page-service .case-desc{
  color: var(--c-text);
  font-size: .9375rem;          /* .8125rem → .9375rem */
  line-height: 1.7;
}
.page-service .case-more{
  display: inline-flex;
  align-items: center;
  gap: .5em;
  margin-top: .3em;
  color: var(--c-navy);
  font-size: .9375rem;          /* .875rem → .9375rem */
  font-weight: 700;
}
.page-service .case-more .arrow{ transition: transform .25s var(--sv-ease); }
.page-service .case-card > a:hover .case-more .arrow{ transform: translateX(4px); }

@media (prefers-reduced-motion: reduce){
  .page-service .case-card > a,
  .page-service .case-more .arrow{ transition: none; }
  .page-service .case-card > a:hover{ transform: none; }
}


/* =========================================================
   6. CTA（紺帯）
   ========================================================= */
.page-service .sv-cta{
  padding-block: clamp(40px, 6vw, 60px);
  color: #fff;
  background: linear-gradient(120deg, var(--sv-navy-deep) 0%, var(--sv-navy) 55%, var(--sv-navy-deep) 100%);
  text-align: center;
}
.page-service .sv-cta-title{
  margin: 0;
  color: #fff;
  font-size: clamp(1.5rem, 3vw, 2rem);   /* 1.375〜1.75rem → 1.5〜2rem */
}
.page-service .sv-cta-lead{
  margin: .6em 0 0;
  color: var(--c-note-on-navy);
  font-size: 1.0625rem;         /* .9375rem → 1.0625rem */
}
.page-service .cta-cards{
  list-style: none;
  margin: clamp(24px, 4vw, 34px) 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.page-service .cta-cards > li{
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 8px;
  text-align: left;
}
.page-service .cta-card-icon{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  color: #fff;
}
.page-service .cta-card-icon svg{ width: 40px; height: 40px; }
.page-service .cta-card-body{ display: grid; gap: .25em; }
.page-service .cta-card-body b{
  color: #fff;
  font-size: 1.1875rem;         /* 1.0625rem → 1.1875rem */
  line-height: 1.4;
}
.page-service .cta-card-body span{
  color: var(--c-note-on-navy);
  font-size: .9375rem;          /* .8125rem → .9375rem */
  line-height: 1.6;
}
/* 大きめの白ボタン */
.page-service .sv-cta-btn{
  min-width: min(360px, 100%);
  justify-content: center;
  font-size: 1.125rem;          /* 1.0625rem → 1.125rem */
  padding: 1em 2.2em;
}


/* =========================================================
   7. 採用情報
   ========================================================= */
.page-service .sv-recruit{
  padding-block: clamp(32px, 5vw, 48px);
  background: var(--c-bg-section);
}
.page-service .sv-recruit-inner{
  display: grid;
  grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
  align-items: center;
  gap: clamp(20px, 3vw, 36px);
}
.page-service .sv-recruit-title{
  margin: 0 0 .6em;
  color: var(--c-navy);
  font-size: clamp(1.375rem, 2.6vw, 1.75rem);   /* 1.25〜1.5rem → 1.375〜1.75rem */
}
.page-service .sv-recruit-text p{
  margin: 0;
  font-size: 1.0625rem;         /* .9375rem → 1.0625rem */
  line-height: 1.9;
}
.page-service .sv-recruit-action{ margin-top: 1.4em !important; }
.page-service .sv-recruit-photo .ph{
  min-height: 0;
  aspect-ratio: 16 / 5.2;
  border-radius: 8px;
}


/* =========================================================
   8. ヘッダーの追記分（ロゴ下のタグライン／資料請求ボタン）
   -----------------------------------------------------------
   .logo-sub と .btn-request は style.css には指定がなく、
   watashi.css の「ヘッダーの追記分」ブロックにあるパーツです。
   このページは watashi.css を読まないので、**watashi.css と同じ指定**を
   ここに複製しています（違いは .page-service に閉じ込めた点だけ）。

   → watashi.css 側を直したら、このブロックも同じように直してください。
     逆に、両ページで共通なのでいずれ style.css に移してしまうのも手です。

   フッターは実サイトと同じ共通4カラム（style.css の .footer-grid）を
   そのまま使うので、このページ専用の指定は持ちません。
   ========================================================= */

/* ---------- ロゴ下のタグライン ----------
.page-service .logo-text{ display: flex; flex-direction: column; line-height: 1.25; }
.page-service .logo-sub{
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .02em;
  color: #3b4a68;
  transition: color .4s ease;
}
.page-service header.scrolled .logo-sub{ color: var(--c-note); }
 */
/* ---------- ヘッダー右のボタン2つ ----------
   row-reverse なので、HTMLの順番（お問い合わせ → 資料請求）に対して
   表示は「資料請求（紺の塗り）｜お問い合わせ（白枠）」の並びになります
.page-service .header-cta{
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  gap: 10px;
}
.page-service .btn-request{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 20px;
  border: 1px solid rgba(0,30,80,.35);
  border-radius: 6px;
  background: var(--c-navy);
  color: #fff;
  font-size: 13px;
  white-space: nowrap;
  transition: background .2s, color .2s, border-color .2s;
}
.page-service .btn-request:hover{
  background: #fff;
  border-color: var(--c-navy);
  color: var(--c-navy);
  text-decoration: none;
}
 */

/* =========================================================
   9. レスポンシブ
   ========================================================= */

/* ---- ~1240px：ヘッダーの詰め（watashi.css の @media(max-width:1240px) と同じ） ---- */
@media (max-width: 1240px){
  .page-service header{ padding: 0 20px; }
  .page-service .logo-sub{ display: none; }        /* ロゴ下のタグラインは省略 */
  .page-service .dropmenu > li > a{ padding: 0 10px; font-size: 12.5px; }
  .page-service .dropmenu > li > a::before{ left: 10px; right: 10px; }
  .page-service .header-cta{ gap: 8px; }
  .page-service .btn-contact2,
  .page-service .btn-request{ padding: 8px 12px; font-size: 12px; }
}

/* ---- ~1160px：ナビをハンバーガーに切り替える【このページ独自・任意】 ----
   watashi.css には無い指定です。ロゴ＋6項目のナビ＋ボタン2つは、
   詰めた状態でも 1160px を下回ると入り切らず、ロゴの文字が縦に潰れます
   （style.css がナビを隠すのは 767px 以下のため）。
   トップページと完全に同じ挙動にしたい場合は、この @media ごと
   削除してください。逆に watashi.css 側にも同じ指定を足せば、
   両ページの挙動が揃います。 */
@media (max-width: 1160px){
  .page-service #g_navi,
  .page-service .header-cta{ display: none; }
  .page-service .hamburger{ display: flex; }
}

/* ---- ~1080px：流れの行の写真とバッジを少し細く ---- */
@media (max-width: 1080px){
  .page-service .flow-item{
    grid-template-columns: 58px 150px 46px minmax(0, 1fr) 180px;
    gap: 12px;
  }
  .page-service .flow-item.is-feature{
    grid-template-columns: 58px 150px minmax(0, 1fr);
  }
  .page-service .flow-feature-head{ grid-template-columns: minmax(0, 1fr) 180px; }
}

/* ---- ~900px：写真を落とし、事例カードとCTAカードを2列／1列に ---- */
@media (max-width: 900px){
  .page-service .flow-item{
    grid-template-columns: 58px 46px minmax(0, 1fr) 170px;
  }
  .page-service .flow-photo{ display: none; }
  .page-service .flow-item.is-feature{
    grid-template-columns: 58px minmax(0, 1fr);
  }
  .page-service .flow-feature-head{ grid-template-columns: minmax(0, 1fr) 170px; }

  .page-service .case-cards{ grid-template-columns: repeat(2, 1fr); }
  .page-service .cta-cards{ grid-template-columns: 1fr; }
}

/* ---- ~767px：ヒーロー・流れを縦積みに ---- */
@media (max-width: 767px){
  /* style.css は 767px以下で .header-cta を隠す指定を持っているが、
     後から読む側で .header-cta{display:flex} を指定すると読み込み順で
     そちらが勝ってしまい、ハンバーガーの隣にボタンが残る。
     （watashi.css も同じ状態なので、あちらも直したほうがよいです）
     ここで明示的に隠し直す。 */
  .page-service #g_navi,
  .page-service .header-cta{ display: none; }
  .page-service .hamburger{ display: flex; }

  .page-service .sv-hero-inner{ grid-template-columns: 1fr; }
  .page-service .sv-hero-wave{ width: 90%; opacity: .8; }
  .page-service .sv-hero-photo .ph{ aspect-ratio: 16 / 9; }
  /* SPは「文字 → 写真」の縦積み。写真は左右とも画面の端まで */
  .page-service .sv-hero-text{ padding-bottom: 0; }
  .page-service .sv-hero-photo{ margin-inline: -20px; }

  /* 流れ：番号＋タイトルを1段目、本文を2段目、強みを3段目に */
  .page-service .flow-item{
    grid-template-columns: 46px minmax(0, 1fr);
    align-items: center;
    gap: 8px 12px;
    padding: 14px;
  }
  .page-service .flow-num{
    grid-column: 1; grid-row: 1;
    justify-self: center;
    font-size: 1.5rem;          /* 1.375rem → 1.5rem */
  }
  .page-service .flow-icon{
    width: 40px; height: 40px;
    grid-column: 2; grid-row: 1;
    justify-self: start;
  }
  .page-service .flow-icon svg{ width: 21px; height: 21px; }
  .page-service .flow-body{ grid-column: 1 / -1; grid-row: 2; }
  .page-service .flow-merit{
    grid-column: 1 / -1;
    grid-row: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .8em;
    text-align: left;
  }
  /* SPでは番号の隣にタイトルを出したいので、本文側の見出し余白を調整 */
  .page-service .flow-title{ margin-top: 0; }

  .page-service .flow-item.is-feature{
    grid-template-columns: 46px minmax(0, 1fr);
    padding: 14px;
  }
  .page-service .flow-item.is-feature .flow-num{
    grid-column: 1 / -1; grid-row: 1;
    justify-self: start;
  }
  .page-service .flow-feature{ grid-column: 1 / -1; grid-row: 2; }
  .page-service .flow-feature-head{ grid-template-columns: 1fr; gap: 12px; }
  .page-service .flow-sub{ grid-template-columns: 1fr; }

  .page-service .sv-recruit-inner{ grid-template-columns: 1fr; }
  .page-service .sv-recruit-photo .ph{ aspect-ratio: 16 / 7; }

  .page-service .sv-cta-btn{ min-width: 100%; }
}

/* ---- ~520px ---- */
@media (max-width: 520px){
  .page-service .case-cards{ grid-template-columns: 1fr; }
  .page-service .flow-merit{ flex-direction: column; gap: .2em; text-align: center; }
}