/* Approved A implementation — 2026-07-30. Loaded after subpages.css. */
.function-page-v3 .fr-hero__brand, .case-listing-v3 .cs-hero__brand { position:absolute; z-index:2; right:-.055em; bottom:-.22em; pointer-events:none; user-select:none; white-space:nowrap; color:rgba(0,156,166,.14); font:800 clamp(112px,12.2vw,218px)/1 Inter,sans-serif; letter-spacing:-.095em; }
.function-page-v3 .fr-hero__inner, .case-listing-v3 .cs-hero__inner { position:relative; z-index:3; }

/* FUNCTION: segmented rail prevents a background line from passing through each arrow. */
.function-page-v3 .fr-phase-list { position:relative; padding-left:30px; border:0; }
.function-page-v3 .fr-phase-list::before { display:none; }
.function-page-v3 .fr-phase-row { position:relative; min-height:199px; padding:27px 0; border:0; }
.function-page-v3 .fr-phase-row::before { content:""; position:absolute; top:0; bottom:0; left:-29px; width:2px; border-radius: var(--radius-pill); background:var(--teal); }
.function-page-v3 .fr-phase-row:nth-child(n+2)::before { top:20px; }
.function-page-v3 .fr-phase-row:nth-child(2)::before { background:var(--orange); }
.function-page-v3 .fr-phase-row:not(:last-child)::after { content:""; position:absolute; z-index:2; bottom:-5px; left:-32px; width:7px; height:7px; border-right:1.5px solid var(--dark); border-bottom:1.5px solid var(--dark); background:var(--ivory); transform:rotate(45deg); }
.function-page-v3 .fr-phase-row > header { padding-left:0; }
.function-page-v3 .fr-phase-row > header::before { display:none; }

/* Shared page identity for subordinate-page heroes. */
.blog-listing-v3 .bl-hero, .blog-detail-page-v3 .bd3-hero, .news-listing-v3 .news3-hero, .conversion-page-v3 .cv-hero, .case-detail-page-v3 .cd3-hero { isolation:isolate; }
.page-hero-identity { position:absolute; z-index:1; right:-.055em; bottom:-.22em; margin:0; pointer-events:none; user-select:none; white-space:nowrap; color:rgba(0,156,166,.13); font:800 clamp(88px,10.2vw,184px)/1 Inter,sans-serif; letter-spacing:-.095em; }
.blog-listing-v3 .bl-hero__inner, .blog-detail-page-v3 .bd3-hero__inner, .news-listing-v3 .news3-hero__inner, .conversion-page-v3 .cv-hero__inner, .case-detail-page-v3 .cd3-hero__inner { position:relative; z-index:2; }
.news-listing-v3 .page-hero-identity { color:rgba(255,255,255,.13); }
.conversion-page-v3 .page-hero-identity { right:-.04em; color:rgba(0,156,166,.1); }
.case-detail-page-v3 .page-hero-identity { right:-.1em; color:rgba(0,156,166,.1); font-size:clamp(74px,8.8vw,154px); }

/* CASE STUDY: neutral archive hero, then an explicit editorial pickup. */
.case-listing-v3 .cs-hero { min-height:660px; }
.case-listing-v3 .cs-hero__inner { min-height:660px; grid-template-columns:.82fr 1.18fr; }
.case-listing-v3 .cs-hero__visual { height:472px; display:grid; grid-template-columns:minmax(0,1fr) 30%; align-items:end; gap:18px; }
.case-listing-v3 .cs-hero__visual::before { display:none; }
.case-listing-v3 .cs-hero__visual figure { position:relative; z-index:1; overflow:hidden; margin:0; background:#dfe8e7; box-shadow:16px 18px 0 rgba(244,123,32,.13); }
.case-listing-v3 .cs-hero__visual-main { height:438px; }
.case-listing-v3 .cs-hero__visual-side { height:348px; margin-bottom:34px; display:grid; grid-template-rows:1.08fr .92fr; gap:18px; }
.case-listing-v3 .cs-hero__visual-sub, .case-listing-v3 .cs-hero__visual-accent { height:auto; }
.case-listing-v3 .cs-hero__visual img { position:static; display:block; width:100%; height:100%; object-fit:cover; }
.case-listing-v3 .cs-hero__visual-main img { object-position:54% center; }
.case-listing-v3 .cs-hero__visual-sub img { object-position:54% center; }
.case-listing-v3 .cs-hero__visual-accent img { object-position:center; }
.case-listing-v3 .cs-stories { padding-top:74px; }
.case-listing-v3 .cs-stories__head, .case-listing-v3 .cs-story { border-bottom:0; }
.case-listing-v3 .cs-story + .cs-story { margin-top:38px; }
.case-listing-v3 .cs-story__meta { justify-content:flex-start; }
.case-listing-v3 .cs-story__meta { margin-top:25px; padding-top:0; border-top:0; }
.case-listing-v3 .cs-story__link { width:auto; gap:20px; justify-content:flex-start; border-bottom:0; }

/* NEWS A: the same calm, split hero and unboxed archive controls. */
.news-listing-v3 .news3-hero { min-height:520px; background:linear-gradient(108deg,#fff 0 48%,var(--news3-ivory) 48% 100%); }
.news-listing-v3 .news3-hero__inner { min-height:520px; width:min(1312px,calc(100% - 64px)); display:grid; grid-template-columns:.82fr 1.18fr; align-items:center; gap:74px; }
.news-listing-v3 .news3-hero__copy { width:auto; padding-left:32px; }
.news-listing-v3 .news3-hero__image { z-index:1; top:64px; right:max(32px,calc((100vw - 1312px)/2)); left:auto; width:min(46vw,620px); height:400px; object-position:center; }
.news-listing-v3 .news3-hero__veil { display:none; }
.news-listing-v3 .news3-hero__inner { z-index:2; }
.news-listing-v3 .news3-hero .page-hero-identity { z-index:1; color:rgba(0,156,166,.13); }
.news-listing-v3 .news3-category { color:var(--news3-ink); background:#fff; }
.news-listing-v3 .news3-category__inner { min-height:128px; grid-template-columns:250px minmax(0,1fr); gap:50px; }
.news-listing-v3 .news3-category small { color:var(--news3-teal-dark); }
.news-listing-v3 .news3-category h2 { color:var(--news3-ink); }
.news-listing-v3 .news3-category__buttons { gap:10px; overflow:visible; }
.news-listing-v3 .news3-category__buttons a { min-height:42px; padding:0 20px; border-color:var(--news3-line); border-radius: var(--radius-control); color:var(--news3-ink); background:#fff; }
.news-listing-v3 .news3-category__buttons a.is-active { border-color:var(--news3-dark); color:#fff; background:var(--news3-dark); }

/* Shared desktop start line. Deliberately min-height only; content can grow. */
@media (min-width:701px) {
  .blog-listing-v3 .bl-hero, .blog-listing-v3 .bl-hero__inner, .blog-detail-page-v3 .bd3-hero, .blog-detail-page-v3 .bd3-hero__inner, .case-detail-page-v3 .cd3-hero, .case-detail-page-v3 .cd3-hero__inner, .conversion-page-v3 .cv-hero { min-height:520px; }
  .case-listing-v3 .cs-hero, .case-listing-v3 .cs-hero__inner { min-height:520px; }
}

@media (max-width:700px) {
  .function-page-v3 .fr-hero__brand, .case-listing-v3 .cs-hero__brand { display:none; }
  .function-page-v3 .fr-phase-list { padding-left:20px; }
  .function-page-v3 .fr-phase-row { min-height:0; padding:22px 0; }
  .function-page-v3 .fr-phase-row::before { left:-19px; }
  .function-page-v3 .fr-phase-row:nth-child(n+2)::before { top:18px; }
  .function-page-v3 .fr-phase-row:not(:last-child)::after { bottom:-5px; left:-22px; width:7px; height:7px; }
  .page-hero-identity { display:none; }
  .case-listing-v3 .cs-hero, .case-listing-v3 .cs-hero__inner { min-height:550px; }
  .case-listing-v3 .cs-hero__copy { padding-top:28px; }
  .case-listing-v3 .cs-hero__visual { height:248px; margin-top:16px; padding:0 20px; grid-template-columns:minmax(0,1fr) 31%; gap:10px; }
  .case-listing-v3 .cs-hero__visual-main { height:236px; }
  .case-listing-v3 .cs-hero__visual-side { height:206px; margin-bottom:12px; gap:10px; }
  .case-listing-v3 .cs-stories { padding-top:56px; }
  .case-listing-v3 .cs-story + .cs-story { margin-top:14px; }
  .case-listing-v3 .cs-story__meta { margin-top:20px; }
  .news-listing-v3 .news3-hero, .news-listing-v3 .news3-hero__inner { min-height:0; }
  .news-listing-v3 .news3-hero { padding:36px 0 0; background:#fff; }
  .news-listing-v3 .news3-hero__inner { width:100%; display:block; }
  .news-listing-v3 .news3-hero__copy { padding:0 20px; text-align:center; }
  .news-listing-v3 .news3-hero__image { position:relative; inset:auto; width:calc(100% - 40px); height:250px; margin:24px 20px 0; object-position:center; }
  .news-listing-v3 .news3-category__inner { min-height:0; padding:28px 20px 18px; }
  .news-listing-v3 .news3-category__buttons { margin-top:15px; overflow-x:auto; }
  .news-listing-v3 .news3-category__buttons a { min-height:36px; padding:0 14px; }
}

/* --------------------------------------------------------------------------
   Hero height system — approved 2026-07-30
   The hero itself (rather than only its minimum height) is the common visual
   unit.  Each page keeps its own content and imagery, scaled to live inside
   that unit without stretching any raster asset.
   -------------------------------------------------------------------------- */
@media (min-width:701px) {
  .function-page-v3 .fr-hero,
  .case-listing-v3 .cs-hero,
  .case-detail-page-v3 .cd3-hero,
  .blog-listing-v3 .bl-hero,
  .blog-detail-page-v3 .bd3-hero,
  .news-listing-v3 .news3-hero,
  .conversion-page-v3 .cv-hero {
    height:520px !important;
    min-height:520px !important;
    max-height:520px !important;
  }

  .function-page-v3 .fr-hero__inner,
  .case-listing-v3 .cs-hero__inner,
  .case-detail-page-v3 .cd3-hero__inner,
  .blog-listing-v3 .bl-hero__inner,
  .blog-detail-page-v3 .bd3-hero__inner,
  .news-listing-v3 .news3-hero__inner,
  .conversion-page-v3 .cv-hero__inner {
    height:520px !important;
    min-height:520px !important;
    max-height:520px !important;
    box-sizing:border-box;
  }

  /* The eyebrow is the shared vertical start line: 112px from hero top. */
  .function-page-v3 .fr-hero__copy,
  .case-listing-v3 .cs-hero__copy,
  .blog-listing-v3 .bl-hero__copy,
  .news-listing-v3 .news3-hero__copy,
  .conversion-page-v3 .cv-hero__copy {
    align-self:stretch;
    padding-top:112px;
  }

  .case-detail-page-v3 .cd3-hero__copy,
  .blog-detail-page-v3 .bd3-hero__copy {
    align-self:stretch;
    padding-top:112px;
  }

  .function-page-v3 .fr-hero__inner { padding-block:0; }
  .function-page-v3 .fr-hero h1 { font-size:58px; font-weight:700; line-height:1.42; letter-spacing:-.045em; }
  .function-page-v3 .fr-lead { margin-top:18px; font-size:14px; line-height:1.8; }
  .function-page-v3 .fr-hero__scene { min-height:0; height:406px; align-self:center; }
  .function-page-v3 .fr-hero__photo { inset:0 0 20px 50px; }
  .function-page-v3 .fr-hero__ui { width:326px; }
  .function-page-v3 .fr-hero__note { right:16px; bottom:12px; width:190px; padding:12px 14px; }

  .case-listing-v3 .cs-hero__visual { height:410px; }
  .case-listing-v3 .cs-hero__visual-main { height:380px; }
  .case-listing-v3 .cs-hero__visual-side { height:304px; margin-bottom:22px; }

  .blog-listing-v3 .bl-hero__visual { align-self:center; }
  .blog-listing-v3 .bl-hero__visual img { aspect-ratio:1.36; }

  .case-detail-page-v3 .cd3-hero__copy h1 { margin-top:16px; font-size:42px; line-height:1.3; }
  .case-detail-page-v3 .cd3-hero__copy > p:last-child { margin-top:16px; font-size:14px; }
  .case-detail-page-v3 .cd3-hero__visual { height:390px !important; align-self:center; }
  .case-detail-page-v3 .cd3-hero__visual > img { height:390px !important; }

  .blog-detail-page-v3 .bd3-hero__copy h1 { margin-top:16px; font-size:42px; line-height:1.32; }
  .blog-detail-page-v3 .bd3-meta { margin-top:17px; }
  .blog-detail-page-v3 .bd3-cover img { height:360px !important; }

  .news-listing-v3 .news3-hero__inner { align-items:stretch; }
  .news-listing-v3 .news3-hero__copy { padding-left:32px; }
  .news-listing-v3 .news3-hero__image { top:60px; height:400px; }

  .conversion-page-v3 .cv-hero h1 { font-size:58px; font-weight:700; line-height:1.42; letter-spacing:-.045em; }
  .conversion-page-v3 .cv-hero__inner { grid-template-columns:minmax(0,600px) minmax(220px,1fr); gap:16px; }
  .conversion-page-v3 .cv-hero__copy { min-width:0; }
  .conversion-page-v3 .cv-hero__title-mobile { display:none; }
  .conversion-page-v3 .cv-hero__lead { margin-top:17px; font-size:14px; line-height:1.8; }
  .conversion-page-v3 .document-stage { min-height:390px; align-self:center; }
  .conversion-page-v3 .document-stage::before { inset:45px 0 0 42px; }
  .conversion-page-v3 .contact-visual { height:390px; align-self:center; }
}

@media (max-width:700px) {
  /* PH-24: SP hero fixed-height mechanism removed (was 650px !important on
     hero + hero__inner). Heroes now fit their own content (height:auto) so
     no page can grow a blank gap below its image when content is shorter
     than a forced box. Pages that truly need a floor height set their own
     explicit min-height further down (see fr-hero__scene, cs-hero__visual,
     bl-hero__visual etc.) instead of forcing the whole hero shell. */
  .function-page-v3 .fr-hero,
  .case-listing-v3 .cs-hero,
  .case-detail-page-v3 .cd3-hero,
  .blog-listing-v3 .bl-hero,
  .blog-detail-page-v3 .bd3-hero,
  .news-listing-v3 .news3-hero,
  .conversion-page-v3 .cv-hero {
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
  }

  .function-page-v3 .fr-hero__inner,
  .case-listing-v3 .cs-hero__inner,
  .case-detail-page-v3 .cd3-hero__inner,
  .blog-listing-v3 .bl-hero__inner,
  .blog-detail-page-v3 .bd3-hero__inner,
  .news-listing-v3 .news3-hero__inner,
  .conversion-page-v3 .cv-hero__inner {
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    box-sizing:border-box;
  }

  /* The mobile start line is 36px from hero top, with the 20px content rail. */
  .function-page-v3 .fr-hero__copy,
  .case-listing-v3 .cs-hero__copy,
  .case-detail-page-v3 .cd3-hero__copy,
  .blog-listing-v3 .bl-hero__copy,
  .blog-detail-page-v3 .bd3-hero__copy,
  .news-listing-v3 .news3-hero__copy,
  .conversion-page-v3 .cv-hero__copy { padding-top:36px; }

  .function-page-v3 .fr-hero__inner { width:100% !important; padding:0 20px; }
  .function-page-v3 .fr-hero h1 { font-size:36px; font-weight:700; line-height:1.42; letter-spacing:-.045em; }
  .function-page-v3 .fr-lead { margin-top:11px; font-size:12px; line-height:1.7; }
  .function-page-v3 .fr-hero__scene { min-height:0; height:360px; margin:17px -20px 0; }
  .function-page-v3 .fr-hero__ui { bottom:12px; width:248px; }

  .case-listing-v3 .cs-hero__copy { padding-top:36px; }
  .case-listing-v3 .cs-hero__visual { height:350px; margin-top:14px; }
  .case-listing-v3 .cs-hero__visual-main { height:334px; }
  .case-listing-v3 .cs-hero__visual-side { height:290px; margin-bottom:18px; }

  .case-detail-page-v3 .cd3-hero__inner { display:block; }
  .case-detail-page-v3 .cd3-hero__copy { padding:36px 20px 0; }
  .case-detail-page-v3 .cd3-hero__copy h1 { margin-top:14px; font-size:29px; line-height:1.28; }
  .case-detail-page-v3 .cd3-hero__copy > p:last-child { margin-top:12px; }
  /* fix: subpages.css @media(max-width:760px)の`height:auto !important`（cd3-hero__visual/img共通ルール）に
     常に上書きされ、figureが高さ0に潰れて絶対配置img（inset:0）も箱を失っていたため、!importantで明示高さを勝たせる。
     値(246px)は元々このブレークポイント用に設計されていたもの。 */
  .case-detail-page-v3 .cd3-hero__visual { height:246px !important; margin-top:18px; }
  .case-detail-page-v3 .cd3-hero__visual > img { height:246px !important; }

  .blog-listing-v3 .bl-hero__inner { display:block; }
  .blog-listing-v3 .bl-hero__copy { padding:36px 20px 0; }
  .blog-listing-v3 .bl-hero h1 { font-size:36px; line-height:1.34; }
  .blog-listing-v3 .bl-lead { margin-top:11px; line-height:1.7; }
  .blog-listing-v3 .bl-hero__visual { height:355px; margin-top:17px; max-width:none; }
  .blog-listing-v3 .bl-hero__visual img { height:100%; aspect-ratio:auto; object-fit:cover; }

  .blog-detail-page-v3 .bd3-hero__inner { padding-top:0; display:block; }
  .blog-detail-page-v3 .bd3-hero__copy { padding:36px 20px 0; }
  .blog-detail-page-v3 .bd3-hero__copy h1 { margin-top:14px; font-size:29px; line-height:1.3; }
  .blog-detail-page-v3 .bd3-meta { margin-top:13px; }
  .blog-detail-page-v3 .bd3-cover { margin-top:18px; }
  .blog-detail-page-v3 .bd3-cover img { height:250px; }

  /* fix: bd3-heroだけ固定650pxだと中身(見出し+画像)より箱が大きく、画像下に空白が残るため実コンテンツ高さに合わせて縮小（他ページの650px共有ブロックは変更しない） */
  .blog-detail-page-v3 .bd3-hero,
  .blog-detail-page-v3 .bd3-hero__inner {
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
  }

  /* fix: cd3-hero(事例詳細)だけbd3/cv/news3と同じ「実コンテンツ高さにフィット」対応が漏れており、
     650px固定のまま中身(見出し+画像246px)がそれより小さいため画像下に空白が残っていた。
     bd3-heroと同じパターンで650px固定を打ち消す（他ページの650px共有ブロックは変更しない） */
  .case-detail-page-v3 .cd3-hero,
  .case-detail-page-v3 .cd3-hero__inner {
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
  }

  .news-listing-v3 .news3-hero { padding:0; }
  .news-listing-v3 .news3-hero__inner { width:100%; padding:0; }
  .news-listing-v3 .news3-hero__copy { padding:36px 20px 0; }
  .news-listing-v3 .news3-hero__image { height:310px; margin:17px 20px 0; }

  .conversion-page-v3 .cv-hero__inner { padding:0; gap:0; display:block; }
  .conversion-page-v3 .cv-hero__copy { padding:36px 0 0; }
  .conversion-page-v3 .cv-hero h1 { font-size:36px; font-weight:700; line-height:1.42; letter-spacing:-.045em; }
  .conversion-page-v3 .cv-hero__title-desktop { display:none; }
  .conversion-page-v3 .cv-hero__title-mobile { display:inline; }
  .conversion-page-v3 .cv-hero__lead { margin-top:12px; line-height:1.7; }
  .conversion-page-v3 .document-stage { min-height:285px; margin-top:10px; }
  .conversion-page-v3 .document-stage::before { inset:34px 20px 0; }
  .conversion-page-v3 .contact-visual { height:275px; margin:13px 20px 0; width:calc(100% - 40px); }
  .materials-page .document-stage { margin-top:50px; }
  .contact-page .contact-visual { margin-top:38px; }
}

/* --------------------------------------------------------------------------
   PH-24: T48 (三木さん確認メモ) の 600px 再固定ブロックを撤去。
   fr-hero / cs-hero / bl-hero / cv-hero も他ヒーローと同じ
   コンテンツフィット（height:auto、上のブロックで設定済み）に統一する。
   固定していた名残りの見た目は fr-hero__scene / cs-hero__visual /
   bl-hero__visual の明示 height で個別に再現する（下の @media 700px 参照）。
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   DC-07 — BLOG detail PC horizontal scroll
   The decorative hero identity (.page-hero-identity) overhangs the right edge
   by a fraction of an em. Clip it inside the hero so document width no longer
   exceeds the viewport. Content and focus rings stay inside the inner shell,
   so nothing interactive is clipped. The bottom CTA arrow is already contained
   by .fr-final-cta { overflow:hidden }.
   -------------------------------------------------------------------------- */
/* fix: bd3-heroがposition:staticのままだと絶対配置の透かし(.page-hero-identity)がoverflow:hiddenでクリップされず右に数pxはみ出し横スクロールが出る。relativeにしてクリップを効かせる（三木指示） */
.blog-detail-page-v3 .bd3-hero { position: relative; overflow: hidden; }

/* --------------------------------------------------------------------------
   DC-01 — NEWS (お知らせ) SP hero image restored inside the 650px hero
   PC keeps its current absolute composition (unchanged). On SP the forced
   650px height on .news3-hero__inner made the inner fill the whole hero, so
   the trailing image was pushed below and clipped. Turn the hero into a
   column: the copy takes its natural height and the image fills the rest of
   the fixed 650px hero via object-fit:cover, without distorting its ratio.
   -------------------------------------------------------------------------- */
@media (max-width:700px) {
  .news-listing-v3 .news3-hero { display:flex; flex-direction:column; }
  .news-listing-v3 .news3-hero__inner {
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    flex:0 0 auto;
  }
  .news-listing-v3 .news3-hero__image {
    position:relative;
    inset:auto;
    flex:1 1 auto;
    width:calc(100% - 40px);
    height:auto;
    min-height:0;
    margin:24px 20px 20px;
    object-fit:cover;
  }
}

/* --------------------------------------------------------------------------
   Subpage hero alignment and English eyebrow — approved 2026-07-31
   Keep the shared 520px / 650px hero-height system.  The page-name H1,
   English section eyebrow and merged description form one copy group and are
   centered within the hero's copy column; visual/UI compositions remain in
   their existing grid or stack position.
   -------------------------------------------------------------------------- */
.page-hero-eyebrow {
  margin: 0 0 14px;
  color: var(--teal-dark);
  font-family: Inter, "Noto Sans JP", sans-serif;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: .14em;
}

@media (min-width:701px) {
  .function-page-v3 .fr-hero__inner,
  .case-listing-v3 .cs-hero__inner,
  .blog-listing-v3 .bl-hero__inner,
  .news-listing-v3 .news3-hero__inner,
  .conversion-page-v3 .cv-hero__inner {
    height: 100%;
    min-height: 0 !important;
  }

  .function-page-v3 .fr-hero__inner { padding-block: 0; }

  .function-page-v3 .fr-hero__copy,
  .case-listing-v3 .cs-hero__copy,
  .blog-listing-v3 .bl-hero__copy,
  .news-listing-v3 .news3-hero__copy,
  .conversion-page-v3 .cv-hero__copy {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

@media (max-width:700px) {
  .page-hero-eyebrow {
    margin-bottom: 12px;
    font-size: 10px;
  }

  /* The mobile heroes retain their image-first stack. This offset centers
     the complete text group in its reserved upper copy area. */
  .function-page-v3 .fr-hero__copy,
  .case-listing-v3 .cs-hero__copy,
  .blog-listing-v3 .bl-hero__copy,
  .news-listing-v3 .news3-hero__copy,
  .conversion-page-v3 .cv-hero__copy { padding-top: 28px; }
}

/* --------------------------------------------------------------------------
   DC-14 — Photo-card hero treatment unified across single-photo heroes
   Same-role "single photo as a card" heroes get one shared treatment:
   the orange offset backing (座布団) and the diagonal corner radius.
   Values are consolidated here (source of truth) so page-local variants
   (blog listing radius:2px, contact 0 50px 0 50px, the slightly different
   orange shadow value, and heroes that had no backing at all) all converge.
   The box-shadow is decorative only and does not affect layout/scroll width.
   Excluded by design: FUNCTION hero (a product-UI scene composite, not a
   single photo card) and MATERIALS hero (a CSS document-cover stack).
   -------------------------------------------------------------------------- */
.case-listing-v3 .cs-hero__visual figure,
.blog-listing-v3 .bl-hero__visual,
.case-detail-page-v3 .cd3-hero__visual > img,
.blog-detail-page-v3 .bd3-cover img,
.conversion-page-v3 .contact-visual,
.news-listing-v3 .news3-hero__image {
  border-radius: 0 40px 0 40px;
  box-shadow: 16px 18px 0 rgba(244,123,32,.13);
}

@media (max-width:700px) {
  .case-listing-v3 .cs-hero__visual figure,
  .blog-listing-v3 .bl-hero__visual,
  .case-detail-page-v3 .cd3-hero__visual > img,
  .blog-detail-page-v3 .bd3-cover img,
  .conversion-page-v3 .contact-visual,
  .news-listing-v3 .news3-hero__image {
    border-radius: 0 28px 0 28px;
  }
}

/* --------------------------------------------------------------------------
   DC-08 — FUNCTION page lower section headings unified with front sections
   Front sections use `.fr-section h2` (48px PC / 32px SP / 700). The lower
   MODULES / ROADMAP / future blocks use the shared `.section-title` class,
   which resolved to clamp(38px,3.6vw,54px) ≈ 51.84px PC / 31px SP — a second
   heading system on one page. Pin them to the front-section size so the page
   reads as one system. The bottom CTA (`.fr-final-cta h2`) keeps its own
   shared-CTA token and is intentionally left out.
   -------------------------------------------------------------------------- */
.function-page-v3 .module-heading .section-title,
.function-page-v3 .fr-lower-heading .section-title { font-size: 48px; }

@media (max-width:700px) {
  .function-page-v3 .module-heading .section-title,
  .function-page-v3 .fr-lower-heading .section-title { font-size: 32px; }
}

/* --------------------------------------------------------------------------
   Subpage hero: page-name H1 + one merged supporting paragraph (2026-07-31)
   The H1 is the page name itself (機能紹介 / 導入事例 / …) for clear orientation.
   A separate 28px sub-heading + lead read as two redundant support levels, so
   the former marketing copy and the lead are merged into the single existing
   lead paragraph. The large background English watermark (FUNCTION / … ) still
   carries the English/section accent. DEC-050 subsequently restores a small
   English-only eyebrow above the H1 without reintroducing a second Japanese
   heading level.
   -------------------------------------------------------------------------- */
.function-page-v3 .fr-lead.page-hero-description,
.case-listing-v3 .cs-lead.page-hero-description,
.blog-listing-v3 .bl-lead.page-hero-description,
.news-listing-v3 .news3-hero__copy .page-hero-description,
.conversion-page-v3 .cv-hero__lead.page-hero-description {
  max-width: 34em;
  margin-top: 22px;
  font-size: 17px;
  line-height: 1.85;
}

@media (max-width:700px) {
  .function-page-v3 .fr-lead.page-hero-description,
  .case-listing-v3 .cs-lead.page-hero-description,
  .blog-listing-v3 .bl-lead.page-hero-description,
  .news-listing-v3 .news3-hero__copy .page-hero-description,
  .conversion-page-v3 .cv-hero__lead.page-hero-description {
    max-width: 34em;
    margin-top: 20px;
    font-size: 14px;
    line-height: 1.8;
  }
}

/* ロゴカラー表示・導入企業セクション中央揃え */
.client-strip__logos img { filter: none !important; }
.client-strip__inner { justify-content: center; }

/* SBI新生銀行ロゴのサイズを大きく */
.client-strip__logos img[src*="sbi-shinsei"] {
  max-height: 72px !important;
  max-width: 320px !important;
}

/* アニメーション整理：非インタラクティブ要素からアニメーションを除去 */
.client-strip__logos { animation: none !important; }

/* 最短2週間ボックスを矢印の先に合わせる */
.top-onboarding__right {
  top: 210px !important;
}

/* 資料選択チェックボックス */
.material-card__select {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
  color: var(--navy);
}
.material-card__select input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #009ca6;
  cursor: pointer;
}
.material-card:has(input:checked) {
  outline: 2px solid #009ca6;
  outline-offset: 2px;
}

/* thanks ページ: 資料個別ダウンロードカード */
.download-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 32px;
}
.dl-card {
  display: flex;
  align-items: center;
  gap: 32px;
  background: #fff;
  border: 1px solid var(--line, #e0e6ed);
  border-radius: 12px;
  padding: 28px 32px;
}
.dl-card__thumb {
  flex: 0 0 200px;
  background: var(--navy, #08223b);
  color: #fff;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
}
.dl-card__thumb small {
  display: block;
  font-size: 11px;
  letter-spacing: .08em;
  opacity: .7;
  margin-bottom: 8px;
}
.dl-card__thumb h2 {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  margin: 0 0 8px;
}
.dl-card__thumb b {
  font-size: 11px;
  opacity: .6;
}
.dl-card__action {
  flex: 1;
}
.dl-card__action p {
  font-size: 14px;
  color: var(--body, #59697a);
  margin: 0 0 16px;
}
@media (max-width: 600px) {
  .dl-card {
    flex-direction: column;
    align-items: stretch;
  }
  .dl-card__thumb {
    flex: none;
  }
}

/* FAQ もっと見るボタン */
.top-faq__more {
  text-align: center;
  margin-top: 32px;
}
.top-faq__more-btn {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 0;
  border: none;
  background: none;
  color: #009ca6;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity .15s;
}
.top-faq__more-btn:hover {
  opacity: .7;
}
.top-faq__more-icon {
  display: inline-block;
  margin-right: 6px;
  font-size: 18px;
  line-height: 1;
}