/* =========================================================
     共通（全ページ）
     変数定義（デザインカンプ 0622 / 全幅1280px 基準）
     ========================================================= */
  :root{
    /* --- 色 --- */
    --cream:#f0e7dc;        /* テキスト（明） */
    --paper:#efe7dc;        /* 明るい背景・カード本文背景 */
    --navy:#223555;         /* ネイビー（全ネイビー統一値） */
    --gold:#cdaf8a;         /* 見出しゴールド */
    --gold-deep:#bca180;    /* Movie見出し / カード見出し帯 */

    /* --- 書体 --- */
    --font-ja:"Yu Mincho","YuMincho","Hiragino Mincho ProN","ヒラギノ明朝 ProN",serif;
    --font-en:"Libre Bodoni",serif;

    /* --- レイアウト --- */
    --maxw:1280px;
    --gutter:7.81%;         /* 左右マージン 100px @1280 */
    --section-gap:80px;     /* セクション上下余白 */
    --detail-section-gap:120px;     /* 詳細ページセクション上下余白 */
    --block-gap:clamp(40px,5vw,56px); /* 見出し→中身などの縦間隔（共通） */

    /* --- フォントサイズ（最大値=カンプ@1280 / vwで縮小）--- */
    --fs-nav:clamp(12px,1.25vw,16px);      /* ヘッダーナビ（和文6項目）16 */
    --fs-hero:clamp(30px,3.52vw,45px);     /* ヒーロー / メッセージ 45 */
    --fs-body:clamp(16px,1.56vw,20px);     /* 本文 20 */
    --fs-more:clamp(18px,1.95vw,25px);     /* View more 25 */
    --fs-subtitle:clamp(18px,1.875vw,24px);/* サブタイトル / 会社概要 24 */
    --fs-card-title:clamp(17px,1.62vw,21px);/* カード見出し 20.8 */
    --fs-card-body:clamp(14px,1.27vw,16px);/* カード本文 16.2 */
    --fs-small:14px;                        /* 注釈 / 会社概要 / フッター 14 */

    /* --- 見出しSVG幅（縦組み）--- */
    --head-w:clamp(34px,3.67vw,47px);       /* About / How to / Voice */
    --head-w-wide:clamp(47px,5.08vw,65px);  /* Strength / Company / Message */

    /* --- View more ボタン --- */
    --more-icon:clamp(54px,7.04vw,90px);    /* 矢印サークル（1280pxで90px） */
    --more-gap:clamp(12px,1.4vw,18px);
    --more-mt:clamp(28px,3.9vw,50px);       /* 本文との間隔 */
    --ab-radius:14px;        /* サービスボックスの角丸 */
    --footer-gap:clamp(40px,8vw,200px); /* フッター ロゴ/情報/リンク間（可変） */
  }

  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{font-family:var(--font-ja);color:var(--cream);background:var(--navy);}

  /* スマホのみ改行するbr */
  .sp-br{ display:none; }
  @media (max-width:768px){ .sp-br{ display:inline; } }
  .pc-br{ display:inline; }
  @media (max-width:768px){ .pc-br{ display:none; } }

  /* 共通: 見出しSVG（縦組み・左配置） */
  .sec-heading{
    position:absolute;
    left:var(--gutter);
    width:var(--head-w);
    height:auto;
    display:block;
  }
  /* スマホ用: 横書きテキスト見出し（PCでは非表示） */
  .sec-heading-text{
    display:none;
    font-family:var(--font-en);
    font-weight:400;
    color:var(--gold);
    font-size:45px;
    letter-spacing:.06em;
    line-height:1;
  }
  @media (max-width:768px){
    .sec-heading{ display:none !important; }   /* 縦組みSVGを隠す */
    .sec-heading-text{ display:block; margin-bottom:24px; }
    .movie .sec-heading-text{ color:var(--gold-deep); }
  }

  /* =========================================================
     共通（全ページ）
     ヘッダー（index=ヒーロー重ね / 下層=ネイビー帯）
     ========================================================= */
  /* index.html: ヒーロー画像に重ねるヘッダー（固定＋スクロールで背景を切替） */
  .header{
    position:fixed; top:0; left:0; z-index:50; width:100%;
    display:flex; align-items:center; justify-content:space-between;
    padding:26px 48px;
    background:transparent;
    transition:background .6s ease, box-shadow .6s ease;
  }
  .header.is-scrolled{
    background:var(--navy);
    box-shadow:0 2px 16px rgba(0,0,0,.18);
  }
  .header__logo img{ width:250px; height:auto; display:block; }

  /* 下層ページ: ネイビーの帯ヘッダー（固定） */
  .ab-header{
    position:fixed; top:0; left:0; z-index:50; width:100%;
    background:var(--navy);
    display:flex; align-items:center; justify-content:space-between;
    padding:24px 48px;
  }
  .ab-header__logo img{ width:250px; height:auto; display:block; }

  /* 固定ヘッダーの高さぶん、下層ページの本文を押し下げる（JSで--header-hを実測して設定） */
  body.about-page,
  body.howto-page,
  body.strength-page,
  body.contact-page,
  body.privacy-page,
  body.thanks-page,
  body.notfound-page{
    padding-top:var(--header-h, 104px);
  }

  /* 共通ナビ（両ヘッダー共用） */
  .nav__list{ list-style:none; display:flex; align-items:center; gap:clamp(14px,1.8vw,24px); }
  .nav__link{
    font-family:var(--font-ja);
    font-size:var(--fs-nav);
    font-weight:400;
    letter-spacing:.02em;
    white-space:nowrap;
    color:var(--cream);
    text-decoration:none;
    opacity:.95;
    transition:opacity .25s ease;
  }
  .nav__link:hover{ opacity:.6; }

  @media (max-width:900px){
    .header{ padding:18px 14px; }
    .header__logo img{ width:170px; }
    .ab-header{ padding:16px 14px; }
    .ab-header__logo img{ width:170px; }
    .nav__list{ gap:18px; }
    .nav__link{ font-size:14px; }
  }
  @media (max-width:480px){
    .nav__list{ gap:12px; }
    .nav__link{ font-size:12px; }
  }

  /* ハンバーガーメニュー（SPのみ） */
  .nav-toggle{
    display:none;
    position:relative; z-index:30;
    width:44px; height:44px; padding:0;
    background:none; border:none; cursor:pointer;
  }
  .nav-toggle span{
    position:absolute; left:10px; right:10px; height:2px;
    background:var(--cream); border-radius:2px;
    transition:top .3s ease, transform .3s ease, opacity .3s ease;
  }
  .nav-toggle span:nth-child(1){ top:15px; }
  .nav-toggle span:nth-child(2){ top:21px; }
  .nav-toggle span:nth-child(3){ top:27px; }
  .nav-open .nav-toggle span:nth-child(1){ top:21px; transform:rotate(45deg); }
  .nav-open .nav-toggle span:nth-child(2){ opacity:0; }
  .nav-open .nav-toggle span:nth-child(3){ top:21px; transform:rotate(-45deg); }

  @media (max-width:900px){
    .nav-toggle{ display:block; }
    .nav{
      position:fixed; inset:0; z-index:25;
      background:var(--navy);
      display:flex; align-items:center; justify-content:center;
      opacity:0; visibility:hidden; pointer-events:none;
      transition:opacity .35s ease, visibility .35s ease;
    }
    .nav-open .nav{ opacity:1; visibility:visible; pointer-events:auto; }
    .nav__list{ flex-direction:column; align-items:center; gap:30px; }
    .nav__link{ font-size:24px; letter-spacing:.06em; opacity:1; }
    .nav-open{ overflow:hidden; }
  }

  /* =========================================================
     共通（全ページ）
     フッター
     ========================================================= */
  /* PC: 1280pxデザイン基準。≥1280pxは原寸、未満は比率を保ってvw縮小
     （min(設計px, (設計px/1280*100)vw) でキャップ＆縮小） */
  .footer{
    background:var(--navy);
    padding:min(80px,6.25vw) var(--gutter) min(56px,4.375vw);
    box-sizing:border-box;
  }
  .footer__inner{
    width:min(var(--maxw),100%); margin:0 auto;
    display:flex; align-items:flex-end; justify-content:space-between;
    gap:min(28px,2.19vw);
  }
  .footer__logo{ flex-shrink:0; }
  .footer__logo img{ width:min(120px,9.375vw); height:auto; display:block; }
  .footer__info{
    flex-shrink:0;
    font-family:var(--font-ja);
    color:var(--cream);
    font-size:clamp(11px,1.094vw,12px);
    line-height:1.75;
    white-space:nowrap;
  }
  .footer__info p{ margin:0 0 min(10px,0.78vw); }
  .footer__info p:last-child{ margin-bottom:0; }
  .footer__info a{ color:var(--cream); text-decoration:none; }
  .footer__info a:hover{ text-decoration:underline; }
  .footer__nav{ flex-shrink:1; min-width:0; }
  .footer__nav ul{ list-style:none; display:flex; flex-wrap:wrap; justify-content:flex-end; gap:min(16px,1.25vw) min(22px,1.72vw); }
  .footer__nav a{
    font-family:var(--font-ja);
    font-weight:400;
    font-size:clamp(10px,1vw,11px);
    letter-spacing:.02em;
    white-space:nowrap;
    color:var(--cream);
    text-decoration:none;
    opacity:.95;
    transition:opacity .25s ease;
  }
  .footer__nav a:hover{ opacity:.6; }

  /* 一列に収まらない幅では「お客様の声」から先を1行にまとめて右寄せで折り返す */
  .footer__nav-break{ display:none; list-style:none; width:0; height:0; padding:0; margin:0; flex-basis:0; overflow:hidden; }
  @media (max-width:1000px){
    .footer__nav ul{ row-gap:min(5px,0.39vw); }
    .footer__nav-break{ display:block; flex-basis:100%; }
  }

  /* SP: 中央寄せで縦積み（文字は読みやすい固定サイズに戻す） */
  @media (max-width:768px){
    .footer{ padding:64px 14px 48px; }
    .footer__inner{ flex-direction:column; align-items:center; gap:48px; text-align:center; }
    .footer__logo img{ width:130px; }
    .footer__info{ font-size:14px; }
    .footer__info p{ margin:0 0 16px; }
    .footer__nav ul{ flex-wrap:wrap; justify-content:center; gap:8px 24px; }
    .footer__nav a{ font-size:14px; }
  }

  /* =========================================================
     index.html
     Hero
     ========================================================= */
  .hero{
    position:relative;
    width:100%;
    height:100vh;
    min-height:560px;
    overflow:hidden;
  }
  .hero__slider,
  .hero__slider .splide__track,
  .hero__slider .splide__list,
  .hero__slider .splide__slide{ height:100%; }
  .hero__slider{ position:absolute; inset:0; z-index:1; }
  .hero__slide-img{ width:100%; height:100%; object-fit:cover; display:block; }
  .hero__overlay{
    position:absolute; inset:0; z-index:2; pointer-events:none;
    background:
      linear-gradient(to bottom, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 28%),
      linear-gradient(to right, rgba(0,0,0,.45) 0%, rgba(0,0,0,.05) 55%);
  }

  /* Hero copy */
  .hero__content{
    position:absolute; z-index:5;
    top:50%; left:60px; transform:translateY(-50%);
    text-align:left;
  }
  .hero__title{
    font-family:var(--font-ja);
    font-weight:600;
    font-size:45px;            /* PCは固定（vwで縮小しない） */
    line-height:1.75;
    letter-spacing:.06em;
    text-shadow:0 2px 18px rgba(0,0,0,.4);
  }

  @media (max-width:768px){
    .hero__content{ left:14px; }
    .hero__title{ font-size:clamp(28px,8vw,40px); line-height:1.6; }
  }

  /* =========================================================
     共通（全ページ）
     共通: View more ボタン
     ========================================================= */
  .more{
    display:inline-flex; align-items:center; gap:var(--more-gap);
    text-decoration:none;
  }
  .more img{ width:var(--more-icon); height:auto; display:block; transition:transform .3s ease; }
  .more:hover img{ transform:translateX(6px); }
  .more span{
    font-family:var(--font-en);
    font-weight:400;
    font-size:var(--fs-more);
    letter-spacing:.08em;
    color:var(--cream);
  }

  /* 共通: 本文（20px） */
  .lead{
    margin:0;
    font-family:var(--font-ja);
    font-size:var(--fs-body);
    line-height:2;
    letter-spacing:.04em;
    color:var(--cream);
  }

  /* =========================================================
     index.html
     About
     ========================================================= */
  .about{ padding:50px 0 0; overflow:hidden; }
  .about__inner{
    position:relative; width:min(var(--maxw),100%); margin:0 auto;
    aspect-ratio:1280/1067;
  }
  .about__collage{ position:absolute; inset:0; }
  .about__heading{ top:8%; }
  .about__photo{ position:absolute; object-fit:cover; display:block; }
  .about__photo--1{ left:21.1%; top:12.6%; width:21.3%; height:45.2%; }
  .about__photo--3{ left:45.3%; top:36.3%; width:21.1%; height:37.0%; }
  .about__photo--2{ left:12.2%; top:59.9%; width:30.3%; height:26.4%; }
  .about__body{
    position:absolute; right:var(--gutter); top:64%;
    display:flex; flex-direction:column; align-items:flex-end;
  }
  .about__text{ text-align:left; white-space:nowrap; }   /* 原稿の改行位置だけで折り返す */
  .about__text .en{ font-family:var(--font-en); }
  .about__more{ margin-top:var(--more-mt); }

  @media (max-width:768px){
    .about{ padding:var(--section-gap) 14px; }
    .about__inner{ width:100%; aspect-ratio:auto; }
    .about__heading{ position:static; width:auto; height:90px; margin-bottom:24px; }
    .about__collage{ position:relative; inset:auto; width:80vw; margin:0 auto; aspect-ratio:1280/1067; }
    .about__photo--1{ left:25.3%; top:0;     width:28.9%; height:61.3%; }
    .about__photo--3{ left:58.1%; top:32.2%; width:28.6%; height:50.2%; }
    .about__photo--2{ left:13.2%; top:64.2%; width:41.1%; height:35.8%; }
    .about__body{ position:static; align-items:stretch; margin-top:28px; }
    .about__text{ white-space:normal; }
    .about__more{ align-self:flex-start; }
  }

  /* =========================================================
     スクロールイン・フェードアップ演出（IntersectionObserverと連動）
     JS側で要素が画面内に入った時に .is-visible を付与する
     ========================================================= */
  .js-reveal{
    opacity:0;
    transform:translateY(var(--reveal-distance, 40px));
    transition:opacity var(--reveal-duration, .5s) var(--reveal-ease, ease),
               transform var(--reveal-duration, .5s) var(--reveal-ease, ease);
    transition-delay:var(--reveal-delay, 0s);
  }
  .js-reveal.is-visible{
    opacity:1;
    transform:translateY(0);
  }
  @media (prefers-reduced-motion: reduce){
    .js-reveal{ opacity:1; transform:none; transition:none; }
  }

  /* 左からスライドイン演出（画面内に入るたびに毎回再生） */
  .js-reveal-left{
    opacity:0;
    transform:translateX(-40px);
    transition:opacity .5s ease, transform .5s ease;
  }
  .js-reveal-left.is-in{
    opacity:1;
    transform:translateX(0);
  }
  @media (prefers-reduced-motion: reduce){
    .js-reveal-left{ opacity:1; transform:none; transition:none; }
  }

  /* =========================================================
     index.html
     How to
     ========================================================= */
  .howto{ padding:0; overflow:hidden; }
  .howto__inner{
    position:relative; width:min(var(--maxw),100%); margin:0 auto;
    aspect-ratio:1280/910;
  }
  .howto__collage{ position:absolute; inset:0; }
  .howto__heading{ top:11.7%; }
  .howto__photo{ position:absolute; object-fit:cover; display:block; }
  .howto__photo--1{ left:49.9%; top:23%; width:16.6%; height:37%; }
  .howto__photo--2{ left:68.8%; top:16%; width:22.2%; height:66.6%; }
  .howto__body{
    position:absolute; left:14.4%; top:55%;
    display:flex; flex-direction:column; align-items:flex-start;
  }
  .howto__text{ width:52%; }
  .howto__more{ margin-top:var(--more-mt); }

  @media (max-width:768px){
    .howto{ padding:0 14px; }
    .howto__inner{ width:100%; aspect-ratio:auto; }
    .howto__heading{ position:static; width:auto; height:90px; margin-bottom:24px; }
    .howto__collage{ position:relative; inset:auto; width:80vw; margin:0 auto; aspect-ratio:1280/910; }
    .howto__photo--1{ left:19.1%; top:10.5%; width:24.9%; height:55.6%; }
    .howto__photo--2{ left:47.5%; top:0;     width:33.3%; height:100%; }
    .howto__body{ position:static; margin-top:28px; }
    .howto__text{ width:100%; }
  }

  /* =========================================================
     index.html
     Strength
     ========================================================= */
  .strength{ padding:0; overflow:hidden; }
  .strength__inner{
    position:relative; width:min(var(--maxw),100%); margin:0 auto;
    aspect-ratio:656/570;
  }
  .strength__heading{ top:17%; width:var(--head-w-wide); }
  .strength__icons{ position:absolute; inset:0; }
  .strength__icon{ position:absolute; top:27.2%; width:17.2%; height:auto; display:block; }
  .strength__icon--1{ left:19%; }
  .strength__icon--2{ left:42.9%; }
  .strength__icon--3{ left:67.1%; }
  .strength__body{
    position:absolute; left:14.5%; top:60%;
    display:flex; flex-direction:column; align-items:flex-start;
  }
  .strength__text{ width:58%; }
  .strength__more{ margin-top:var(--more-mt); }

  @media (max-width:768px){
    .strength{ padding:var(--section-gap) 14px; }
    .strength__inner{ width:100%; aspect-ratio:auto; }
    .strength__heading{ position:static; width:auto; height:90px; margin-bottom:24px; }
    .strength__icons{ position:relative; inset:auto; display:flex; justify-content:space-between; gap:4%; }
    .strength__icon{ position:static; width:30%; }
    .strength__icon--1,.strength__icon--2,.strength__icon--3{ left:auto; }
    .strength__body{ position:static; margin-top:28px; }
    .strength__text{ width:100%; }
  }

  /* =========================================================
     index.html
     Movie
     ========================================================= */
  .movie{ background:var(--paper); padding:30px 0; overflow:hidden; }
  .movie__inner{
    position:relative; width:min(var(--maxw),100%); margin:0 auto;
    aspect-ratio:660/360;
  }
  .movie__heading{ top:11%; width:var(--head-w-wide); }
  .movie__frame{
    position:absolute; left:50%; top:50%; width:65%;
    transform:translate(-50%,-50%);
    background:#fff; padding:14px;
  }
  .movie__media{ display:block; width:100%; height:auto; }

  @media (max-width:768px){
    .movie{ padding:var(--section-gap) 14px; }
    .movie__inner{ width:100%; aspect-ratio:auto; }
    .movie__heading{ position:static; width:auto; height:90px; margin-bottom:24px; }
    .movie__frame{ position:static; width:100%; padding:10px; transform:none; }
  }

  /* =========================================================
     index.html
     Voice
     ========================================================= */
  .voice{ padding:110px 0; overflow:hidden; }
  .voice__head{
    position:relative; width:min(var(--maxw),100%); margin:0 auto;
    min-height:300px; padding:0 0 40px;
    display:flex; justify-content:center; align-items:flex-end;
  }
  .voice__heading{ top:0; }
  .voice__subtitle{
    margin:0; text-align:center;
    font-family:var(--font-ja);
    color:var(--cream);
    font-size:var(--fs-subtitle);
    letter-spacing:.1em;
  }
  .voice__slider .splide__slide{ display:flex; height:auto; }
  .voice__card{ flex:1; height:100%; min-height:480px; display:flex; flex-direction:column; }
  .voice__card-head{
    background:var(--gold-deep);
    color:var(--cream);
    text-align:center;
    font-family:var(--font-ja);
    font-weight:600;
    font-size:var(--fs-card-title);
    line-height:1.7;
    letter-spacing:.03em;
    padding:12px; margin-bottom:12px;
    min-height:92px;
    display:flex; align-items:center; justify-content:center;
  }
  .voice__card-body{
    position:relative;
    flex:1 1 auto;
    background:var(--paper);
    color:var(--navy);
    font-family:var(--font-ja);
    font-size:var(--fs-card-body);
    line-height:1.95;
    letter-spacing:.02em;
    padding:32px 20px 46px;
    display:flex; flex-direction:column;
  }
  .voice__card-body p{ margin:0 0 18px; }
  .voice__card-name{
    position:absolute; right:20px; bottom:18px;
    margin:0;
    text-align:right;
    font-size:var(--fs-small);
    color:var(--navy);
  }

  @media (max-width:768px){
    .voice__head{
      min-height:auto; flex-direction:column; align-items:center;
      padding:0 14px 24px;
    }
    .voice__heading{ position:static; width:auto; height:80px; margin-bottom:22px; }
    .voice__card-head{ font-size:16px; padding:12px 6px; }
  }

  /* =========================================================
     index.html
     Message
     ========================================================= */
  .message{
    position:relative; width:100%;
    aspect-ratio:1921/1201;
    background:url("../../images/top-message-bg.webp") center/cover no-repeat;
    display:flex; justify-content:center; align-items:flex-start;
    padding-top:13%;
  }
  .message__text{
    margin:0;
    font-family:var(--font-ja);
    font-weight:600;
    color:var(--cream);
    font-size:var(--fs-hero);
    letter-spacing:.08em;
    text-align:center;
    text-shadow:0 2px 18px rgba(0,0,0,.45);
  }

  @media (max-width:768px){
    .message{ aspect-ratio:auto; min-height:70vh; padding-top:64px; }
    .message__text{ font-size:24px; padding:0 14px; line-height:1.6; }
  }

  /* =========================================================
     index.html
     Company
     ========================================================= */
  .company{ padding:110px 0; overflow:hidden; }
  .company__inner{
    position:relative; width:min(var(--maxw),100%); margin:0 auto;
    padding:0 var(--gutter);
    box-sizing:border-box;
  }
  .company__heading{ top:0; width:var(--head-w-wide); }
  .company__content{ margin-left:22%; padding-top:80px; color:var(--cream); }
  .company__title{
    margin:0 0 36px;
    font-family:var(--font-ja);
    font-weight:400;
    font-size:var(--fs-subtitle);
    letter-spacing:.08em;
  }
  .company__list{ margin:0; }
  .company__row{
    display:grid; grid-template-columns:150px 1fr; gap:0 16px;
    margin-bottom:20px;
  }
  .company__row dt{
    font-family:var(--font-ja);
    font-size:var(--fs-small);
    letter-spacing:.04em;
  }
  .company__row dd{
    margin:0;
    font-family:var(--font-ja);
    font-size:var(--fs-small);
    line-height:1.9;
    letter-spacing:.02em;
  }
  .company__contact-wrap{ display:flex; justify-content:flex-end; margin-top:48px; }
  .company__contact{ display:inline-flex; align-items:center; gap:16px; text-decoration:none; }
  .company__contact img{ width:var(--more-icon); height:auto; display:block; transition:transform .3s ease; }
  .company__contact:hover img{ transform:translateX(6px); }
  .company__contact span{
    font-family:var(--font-ja);
    font-size:var(--fs-body);
    letter-spacing:.06em;
    color:var(--cream);
  }

  @media (max-width:768px){
    .company__inner{ padding:0 14px; }
    .company__heading{ position:static; width:auto; height:80px; margin-bottom:28px; }
    .company__content{ margin-left:0; padding-top:0; }
    .company__title{ margin-bottom:28px; }
    .company__row{ grid-template-columns:104px 1fr; gap:0 12px; }
    .company__contact-wrap{ justify-content:flex-start; margin-top:40px; }
  }
  @media (max-width:480px){
    .company__row{ grid-template-columns:1fr; gap:2px; margin-bottom:18px; }
    .company__row dt{ opacity:.7; }
  }

  /* =========================================================
     about.html
     About ページ（Our Services / Philosophy / Message）
     ========================================================= */
/* =========================================================
   共通（下層ページ）
   セクション見出し（sec-label / sec-title）
   ========================================================= */

/* セクション共通ラベル＆見出し（中央寄せ） */
.sec-label{
  text-align:center;
  font-family:var(--font-en);
  font-weight:400;
  font-size:clamp(14px,1.41vw,18px);
  letter-spacing:.18em;
  color:var(--gold);
  margin:0 0 14px;
}
.sec-title{
  text-align:center;
  font-family:var(--font-ja);
  font-weight:400;
  font-size:clamp(22px,2.34vw,30px);
  letter-spacing:.12em;
  color:var(--cream);
  margin:0 auto;
  padding-bottom:18px;
  width:min(420px,100%);
  border-bottom:1px solid var(--gold);
}
.flow .sec-title{ width:min(550px,100%); }
.ourservice .sec-title{ width:min(550px,100%); }

/* =========================================================
   共通（下層ページ）
   MV（メインビジュアル・スライダー）
   ========================================================= */
.ab-mv{ width:100%; overflow:hidden; background:var(--navy); }
.ab-mv__slider,
.ab-mv__slider .splide__track,
.ab-mv__slider .splide__list,
.ab-mv__slider .splide__slide{ height:100%; }
.ab-mv__img{
  width:100%; height:46vw; max-height:560px; min-height:240px;
  object-fit:cover; display:block;
}

@media (max-width:768px){
  .ab-mv__img{ height:56vw; min-height:200px; }
}

/* =========================================================
   共通（about / howto / strength）
   ページ見出し・目次（ab-intro）
   ========================================================= */
.ab-intro{ padding:72px 0 0; }
.ab-intro__inner{
  width:min(var(--maxw),100%); margin:0 auto; padding:0 var(--gutter);
  box-sizing:border-box;
}
.ab-intro__title{
  font-family:var(--font-ja);
  font-size:clamp(40px,5.4vw,64px);
  font-weight:600; letter-spacing:.02em;   /* 游明朝 DemiBold */
  color:var(--cream); line-height:1; margin:0 0 26px;
}
.ab-intro__nav{ list-style:none; }
.ab-intro__nav li{ margin-bottom:10px; }
.ab-intro__nav a{
  font-family:var(--font-en);
  font-weight:400;
  font-size:var(--fs-body);
  letter-spacing:.04em;
  color:var(--cream); text-decoration:none;
  transition:opacity .25s ease;
}
.ab-intro__nav a:hover{ opacity:.6; }

@media (max-width:768px){
  .ab-intro{ padding:48px 0 0; }
  .ab-intro__inner{ padding:0 14px; }
  .ab-intro__nav a{ font-size:14px; }
}

/* =========================================================
   about.html
   Our Services
   ========================================================= */
.ourservice{ padding:var(--section-gap) 0; overflow:hidden; }
.ourservice__inner{
  width:min(var(--maxw),100%); margin:0 auto; padding:0 var(--gutter);
  box-sizing:border-box;
}
.ourservice__lead{
  background:var(--paper);
  color:var(--navy);
  font-family:var(--font-ja);
    font-weight:600;
  font-size:var(--fs-body);
  letter-spacing:.06em;
  text-align:center;
  padding:26px 22px;
  margin:var(--block-gap) 0;
}

/* サービス配置：PC = 左カラム / 中央イラスト / 右カラム */
.service{
  display:grid;
  grid-template-columns:1fr minmax(300px,38%) 1fr;
  grid-template-rows:auto auto;
  grid-template-areas:
    "design  illust  manage"
    "select  illust  exit";
  column-gap:clamp(20px,3vw,46px);
  row-gap:clamp(28px,3.6vw,56px);
  align-items:start;
}
.service__illust{ grid-area:illust; align-self:center; }
.service__illust img{ width:100%; height:auto; display:block; }
.svc-block--design{ grid-area:design; }
.svc-block--select{ grid-area:select; }
.svc-block--manage{ grid-area:manage; }
.svc-block--exit{ grid-area:exit; }

.svc-block__title{
  position:relative;
  font-family:var(--font-ja);
  font-weight:400;
  font-size:20px;
  letter-spacing:.06em;
  color:var(--gold);
  padding-bottom:10px;
  margin:0 0 14px;
}
.svc-block__title::after{
  content:""; position:absolute; left:0; bottom:0;
  width:100%; max-width:300px; height:1px; background:var(--gold);
}
.svc-block__lead{
  font-family:var(--font-ja);
  font-size:var(--fs-card-body);
  line-height:1.8;
  letter-spacing:.03em;
  color:var(--cream);
  margin:0 0 16px;
}
.svc-block__box{
  border:1px solid var(--gold);
  border-radius:var(--ab-radius);
  padding:20px 22px;
}
.svc-block__box ul{ list-style:none; }
.svc-block__box li{
  position:relative;
  font-family:var(--font-ja);
  font-size:var(--fs-card-body);
  line-height:1.9;
  letter-spacing:.02em;
  color:var(--cream);
  padding-left:1.3em;
}
.svc-block__box li::before{
  content:"□";
  position:absolute; left:0; top:0;
  color:var(--cream);
}

/* スマホ：画像が上、内容を縦に並べる */
@media (max-width:768px){
  .ourservice{ padding:var(--section-gap) 0; }
  .ourservice__inner{ padding:0 14px; }
  .ourservice__lead{ margin:28px 0 40px; padding:20px; }
  .service{
    display:flex; flex-direction:column;
    gap:36px;
  }
  .svc-block{ width:100%; }
  .service__illust{ order:-1; margin-bottom:4px; }
  .service__illust img{ width:75%; margin:0 auto; }
  .svc-block__box{ padding:18px 20px; }
}

/* =========================================================
   about.html
   Philosophy
   ========================================================= */
.philosophy{ padding:var(--section-gap) 0; background:var(--paper); }
.philosophy__inner{
  width:min(var(--maxw),100%); margin:0 auto; padding:0 var(--gutter);
  box-sizing:border-box;
}
.philosophy .sec-label{ color:var(--gold-deep); }
.philosophy .sec-title{ color:var(--navy); border-bottom-color:var(--gold-deep); }
.philosophy__catch{
  text-align:center;
  font-family:var(--font-ja);
  font-weight:600;
  font-size:var(--fs-hero);
  line-height:1.7;
  letter-spacing:.08em;
  color:var(--navy);
  margin:var(--block-gap) 0;
}
.philosophy__catch .gold{ color:var(--gold-deep); }
.philosophy__grid{
  display:grid;
  grid-template-columns:57.4% 1fr;   /* 1280pxで写真620px（内容1080pxの57.4%） */
  gap:clamp(32px,5vw,72px);
  align-items:stretch;
}
.philosophy__photo{ aspect-ratio:1/1; align-self:start; }
.philosophy__photo img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:24px; }
.philosophy__body{
  border-left:2px solid var(--gold);   /* #cdaf8a */
  padding:16px 0 0 20px;                /* 線は画像下端まで／文字だけ上16px */
}
.philosophy__body p{
  font-family:var(--font-ja);
  font-size:var(--fs-card-body);
  line-height:2.1;
  letter-spacing:.04em;
  color:var(--navy);
  margin:0 0 22px;
}
.philosophy__body p:last-child{ margin-bottom:0; }

@media (max-width:768px){
  .philosophy__inner{ padding:0 14px; }
  .philosophy__catch{ font-size:24px; margin:36px 0 40px; line-height:1.7; }
  .philosophy__grid{ grid-template-columns:1fr; gap:32px; }
  .philosophy__photo{ aspect-ratio:auto; }
  .philosophy__photo img{ height:auto; }
  .philosophy__body{ padding:16px 0 16px 20px; }
}

/* =========================================================
   about.html
   Message
   ========================================================= */
.message-sec{ padding:var(--section-gap) 0; }
.message-sec__inner{
  width:min(var(--maxw),100%); margin:0 auto; padding:0 var(--gutter);
  box-sizing:border-box;
}
.message-sec__grid{
  display:grid;
  grid-template-columns:1fr minmax(0,34%);
  gap:clamp(32px,5vw,72px);
  margin-top:var(--block-gap);
  align-items:start;
}
.message-sec__text p{
  font-family:var(--font-ja);
  font-size:var(--fs-card-body);
  line-height:2.1;
  letter-spacing:.03em;
  color:var(--cream);
  margin:0 0 26px;
}
.message-sec__sign-label{
  font-family:var(--font-ja);
  font-size:var(--fs-small);
  letter-spacing:.06em;
  color:var(--cream);
  margin-top:100px !important;
  margin-bottom:6px !important;
}
.message-sec__sign{ width:clamp(150px,18vw,210px); height:auto; display:block; }

.message-sec__photo img{
  width:100%; height:auto; display:block; border-radius:10px;
}
.message-sec__profile figure {
  margin-bottom: 60px;
  text-align: left;
}
.message-sec__profile figcaption {
  margin-top: 10px;
}

.message-sec__name{
  font-family:var(--font-ja);
  font-size:var(--fs-body);
  letter-spacing:.06em;
  color:var(--cream);
  margin:20px 0 14px;
}
.message-sec__bio{
  font-family:var(--font-ja);
  font-size:12px;
  line-height:1.95;
  letter-spacing:.02em;
  color:var(--cream);
  opacity:.85;
  margin:0;
}

/* TOP に戻る ボタン（左向き矢印） */
.back-top-wrap{ display:flex; justify-content:flex-end; margin-top:64px; }
.back-top{ display:inline-flex; align-items:center; gap:16px; text-decoration:none; }
.back-top img{
  width:var(--more-icon); height:auto; display:block;
  transform:scaleX(-1);
  transition:transform .3s ease;
}
.back-top:hover img{ transform:scaleX(-1) translateX(6px); }
.back-top span{
  font-family:var(--font-en);
  font-weight:400;
  font-size:var(--fs-more);
  letter-spacing:.06em;
  color:var(--cream);
}

@media (max-width:768px){
  .message-sec__inner{ padding:0 14px; }
  .message-sec__text br{ display:none; }
  .message-sec__grid{ grid-template-columns:1fr; gap:36px; margin-top:36px; }
  .message-sec__profile{ order:-1; }
  .message-sec__photo img{ max-width:280px; margin:0 auto; }
  .message-sec__profile figcaption { text-align: center}
  .message-sec__name{ text-align:center; }
  .back-top-wrap{ justify-content:flex-end; margin-top:48px; }
}

  /* =========================================================
     howto.html
     Feature / Values / Flow
     ========================================================= */

  /* 共通 inner / リード / Learn more */
  .ho-inner{
    width:min(var(--maxw),100%); margin:0 auto; padding:0 var(--gutter);
    box-sizing:border-box;
  }
  .ho-lead{
    width:min(var(--maxw),100%); margin:0 auto var(--block-gap);
    padding:0 var(--gutter); box-sizing:border-box;
    text-align:center;
    font-family:var(--font-ja);
    font-weight:600;
    font-size:20px;
    line-height:2; letter-spacing:.05em;
    color:var(--navy);
  }
  .ho-more-wrap{ display:flex; justify-content:flex-end; margin-top:clamp(28px,3.4vw,48px); }

  /* ---- Feature（タン帯タイトル → イラスト → 本文 / クリーム地カード） ---- */
  .feature{ padding:var(--section-gap) 0 0; overflow:hidden; }
  .feature__body{
    background:var(--paper);
    margin-top:var(--block-gap);
    padding:clamp(40px,5vw,64px) 0 clamp(48px,6vw,72px);
  }
  .feature__frame{
    width:min(1086px, 84.38%); margin:0 auto; box-sizing:border-box;
    background:var(--navy);
    border-radius:clamp(16px,2vw,26px);
    padding:clamp(24px,3.2vw,44px);
  }
  .feature__grid{
    display:grid; grid-template-columns:repeat(2,minmax(0,482px));
    justify-content:center;
    gap:clamp(20px,2.6vw,34px);
  }
  .feat-card{
    border-radius:var(--ab-radius);
    overflow:hidden;
    background:var(--paper);
    display:flex; flex-direction:column;
  }
  .feat-card__title{
    background:var(--gold-deep);
    color:var(--cream);
    text-align:center;
    font-family:var(--font-ja);
    font-weight:400;
    font-size:var(--fs-card-title);
    letter-spacing:.04em;
    line-height:1.5;
    padding:clamp(16px,1.8vw,22px) 18px;
    margin:0;
  }
  .feat-card__media{ width:48%; margin:clamp(22px,2.6vw,32px) auto clamp(14px,1.8vw,22px); }
  .feat-card__media img{ width:100%; height:auto; display:block; }
  .feat-card__text{
    padding:0 clamp(20px,2.4vw,30px) clamp(24px,2.8vw,34px);
    font-family:var(--font-ja);
    font-size:14px;
    line-height:1.95; letter-spacing:.02em;
    color:var(--navy);
    text-align:justify;
    margin:0;
  }

  @media (max-width:768px){
    .ho-lead{ padding:0 14px; font-size:16px; text-align:left; }
    .feature__frame{ width:calc(100% - 28px); }
    .feature__grid{ grid-template-columns:1fr; gap:20px; }
    .feat-card__media{ width:44%; }
  }

  /* ---- Values（円形図1枚） ---- */
  .values{ padding:var(--section-gap) 0; overflow:hidden; }
  .values__text{
    text-align:center;
    font-family:var(--font-ja);
    font-weight:600;
    font-size:20px;
    line-height:2; letter-spacing:.05em;
    color:var(--cream);
    margin:var(--block-gap) 0;
  }
  .values__figure{ width:min(620px,100%); margin:0 auto; }
  .values__figure img{ width:100%; height:auto; display:block; }

  @media (max-width:768px){
    .values__text{ font-size:16px; text-align:left; }
    .values__text br{ display:none; }
    .values__figure{ width:min(440px,100%); }
  }

  /* ---- Flow（見出し=navy / ステップ=クリーム全幅帯 / ボタン=navy） ---- */
  .flow{ padding:var(--section-gap) 0 var(--section-gap); overflow:hidden; }
  .flow__steps{
    background:var(--paper); width:100%;
    padding:clamp(40px,6vw,76px) 0;
    margin:var(--block-gap) 0;
  }
  .flow__steps-inner{
    width:min(var(--maxw),100%); margin:0 auto;
    padding:0 var(--gutter); box-sizing:border-box;
  }
  .flow__list{ list-style:none; position:relative; width:min(900px,100%); min-width:min(930px,100%); margin:0 auto; }
  .flow__step{
    position:relative;
    display:grid; grid-template-columns:138px 1fr;
    column-gap:clamp(20px,2.6vw,36px);
    padding-bottom:clamp(28px,3.4vw,48px);
  }
  /* 各ステップの丸中心から次の丸中心まで線を引く（丸の背景が端を隠す） */
  .flow__step::before{
    content:""; position:absolute; left:68px; top:69px;
    height:100%; width:2px; background:var(--gold-deep); opacity:.55; z-index:0;
  }
  .flow__step:last-child{ padding-bottom:0; }
  .flow__step:last-child::before{ display:none; }
  .flow__num{
    width:138px; height:138px; border-radius:50%;
    border:2px solid var(--gold-deep);
    background:var(--paper);
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-ja);
    font-size:56px; letter-spacing:.04em;
    color:#ccaf8a;
    position:relative; z-index:1;
  }
  .flow__content{ padding-top:8px; }
  .flow__title{
    font-family:var(--font-ja);
    font-weight:600;
    font-size:var(--fs-subtitle);
    letter-spacing:.05em;
    color:var(--navy);
    margin:0 0 12px;
  }
  .flow__text{
    font-family:var(--font-ja);
    font-size:var(--fs-card-body);
    line-height:1.95; letter-spacing:.02em;
    color:var(--navy);
    margin:0;
  }
  .flow__actions{
    display:flex; flex-direction:column; align-items:flex-start; gap:20px;
    width:max-content; max-width:100%; margin-left:auto;
  }

  @media (max-width:768px){
    .flow__steps-inner{ padding:0 14px; }
    .flow__step::before{ left:24px; top:25px; }
    .flow__step{ grid-template-columns:50px 1fr; column-gap:16px; }
    .flow__num{ width:50px; height:50px; font-size:18px; }
    .flow__title{ font-size:var(--fs-body); }
    .flow__text br{ display:none; }
    .flow__actions{ align-items:flex-start; }
  }


  /* =========================================================
     strength.html
     Strength（index の .strength と衝突しないよう .strg 接頭辞）
     ========================================================= */

  /* 見出し下のサブタイトル（About/How to の目次の代わり） */
  .ab-intro__sub{
    font-family:var(--font-ja);
    font-size:var(--fs-subtitle);
    letter-spacing:.08em;
    color:var(--cream);
    margin:0;
  }

  .strg{ padding:var(--section-gap) 0; overflow:hidden; }
  .strg__inner{
    width:min(var(--maxw),100%); margin:0 auto; padding:0 var(--gutter);
    box-sizing:border-box;
  }
  .strg__lead{
    text-align:center;
    font-family:var(--font-ja);
    font-weight:600;
    font-size:20px;
    line-height:2;
    letter-spacing:.05em;
    color:var(--cream);
    margin:0 0 var(--block-gap);
  }
  .strg__panel{
    background:var(--paper);
    border-radius:clamp(16px,2.2vw,30px);
    padding:clamp(26px,3.6vw,52px);
    display:flex; flex-direction:column;
    gap:clamp(16px,2vw,26px);
  }
  .strg__card{
    background:var(--navy);
    display:flex; align-items:center;
    gap:clamp(24px,3vw,44px);
    padding:clamp(28px,3.4vw,40px) 64px;
  }
  .strg__icon{ flex:0 0 auto; width:113px; }
  .strg__icon img{ width:100%; height:auto; display:block; }
  .strg__title{
    font-family:var(--font-ja);
    font-weight:400;
    font-size:var(--fs-subtitle);
    letter-spacing:.04em;
    color:var(--cream);
    margin:0 0 10px;
  }
  .strg__text{
    font-family:var(--font-ja);
    font-size:var(--fs-card-body);
    line-height:1.9;
    letter-spacing:.02em;
    color:var(--cream);
    margin:0;
  }
  .strg__btns{ display:flex; justify-content:flex-end; margin-top:clamp(36px,4vw,56px); }

  @media (max-width:768px){
    .strg__inner{ padding:0 14px; }
    .strg__lead{ font-size:16px; text-align:left; }
    .strg__panel{ padding:20px; }
    .strg__card{ flex-direction:column; align-items:center; gap:16px; padding:28px 24px; }
    .strg__icon{ width:72px; }
    .strg__body{ width:100%; }
    .strg__title{ text-align:center; }
    .strg__text br{ display:none; }
    .strg__btns{ justify-content:flex-end; }
  }

  /* =========================================================
     privacy.html
     Privacy Policy
     ========================================================= */
  .privacy{ padding:var(--section-gap) 0; }
  .privacy__inner{
    width:min(1100px, calc(100% - 44px)); margin:0 auto; padding:0;
    box-sizing:border-box;
  }
  .privacy__heading{
    text-align:center;
    font-family:var(--font-en);
    font-weight:400;
    font-size:36px;
    letter-spacing:.08em;
    color:var(--gold);
    margin:0 0 var(--block-gap);
  }
  .privacy__panel{
    max-width:1100px; margin:0 auto;
    background:var(--paper);
    border-radius:clamp(16px,2.2vw,30px);
    padding:clamp(28px,4vw,60px);
    color:var(--navy);
  }
  .privacy__lead{
    font-family:var(--font-ja);
    font-size:14px;
    line-height:1.95;
    letter-spacing:0;
    color:var(--navy);
    margin:0;
  }
  .privacy__article{ margin-top:clamp(28px,3.4vw,40px); }
  .privacy__article h3{
    font-family:var(--font-ja);
    font-weight:normal;
    font-size:14px;
    letter-spacing:.02em;
    color:var(--navy);
    margin:0 0 6px;
  }
  .privacy__article p{
    font-family:var(--font-ja);
    font-size:14px;
    line-height:1.95;
    letter-spacing:0;
    color:var(--navy);
    margin:0 0 10px;
  }
  .privacy__article p:last-child{ margin-bottom:0; }
  .privacy__list,
  .privacy__sublist{ margin:6px 0 12px; padding-left:0; list-style:none; }
  .privacy__list > li{
    font-family:var(--font-ja);
    font-size:14px;
    line-height:1.9;
    letter-spacing:0;
    color:var(--navy);
    margin-bottom:4px;
  }
  .privacy__sublist{ counter-reset:sub; margin-top:8px; padding-left:0; }
  .privacy__sublist > li{
    counter-increment:sub;
    position:relative;
    font-size:14px;
    line-height:1.9; color:var(--navy);
    padding-left:1.6em; margin-bottom:4px;
  }
  .privacy__sublist > li::before{
    content:counter(sub)"．"; position:absolute; left:0; top:0; color:var(--navy);
  }
  .privacy__contact{ margin-top:12px !important; line-height:1.9; }
  .privacy__btns{ display:flex; justify-content:flex-end; margin-top:clamp(36px,4vw,56px); }

  @media (max-width:768px){
    .privacy__inner{ width:min(1100px, calc(100% - 28px)); }
    .privacy__panel{ padding:24px 20px; }
    .privacy__btns{ justify-content:flex-end; }
  }

  /* =========================================================
     thanks.html / 404.html
     お問い合わせ完了・ページが見つかりません
     ========================================================= */
  .result{ padding:var(--section-gap) 0; min-height:60vh; display:flex; align-items:center; }
  .result__inner{
    width:min(900px, calc(100% - 44px)); margin:0 auto;
  }
  .result__panel{
    background:var(--paper);
    border-radius:clamp(16px,2.2vw,30px);
    padding:clamp(40px,6vw,72px) clamp(28px,4vw,60px);
    text-align:center;
  }
  .result__heading{
    font-family:var(--font-ja);
    font-weight:600;
    font-size:clamp(22px,2.6vw,30px);
    letter-spacing:.04em;
    color:var(--navy);
    margin:0 0 clamp(20px,2.6vw,28px);
  }
  .result__text{
    font-family:var(--font-ja);
    font-size:var(--fs-body);
    line-height:1.9;
    letter-spacing:.02em;
    color:var(--navy);
    margin:0;
  }
  .result__code{
    display:block;
    font-family:var(--font-en);
    font-size:14px;
    letter-spacing:.04em;
    color:var(--navy);
    opacity:.6;
    margin-top:10px;
  }
  .result__btns{ display:flex; justify-content:flex-end; margin-top:clamp(36px,4vw,56px); }

  @media (max-width:768px){
    .result{ padding:var(--section-gap) 14px; }
    .result__panel{ padding:32px 20px; }
  }

  /* =========================================================
     contact.html
     Contact（フォーム）
     ========================================================= */
  .contact{ padding:var(--section-gap) 0; }
  .contact__inner{
    width:min(var(--maxw),100%); margin:0 auto; padding:0 var(--gutter);
    box-sizing:border-box;
  }
  .contact__heading{
    text-align:center;
    font-family:var(--font-en);
    font-weight:400;
    font-size:clamp(28px,3.6vw,42px);
    letter-spacing:.08em;
    color:var(--gold);
    margin:0 0 var(--block-gap);
  }
  .contact__panel{
    background:var(--paper);
    border-radius:clamp(16px,2.2vw,30px);
    padding:clamp(28px,4vw,64px);
    color:var(--navy);
  }
  .contact__grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:clamp(24px,4vw,56px);
    row-gap:clamp(22px,2.8vw,34px);
  }
  .field--full{ grid-column:1 / -1; }
  .field--left{ grid-column:1; }
  .field label{
    display:block;
    font-family:var(--font-ja);
    font-size:var(--fs-small);
    letter-spacing:.04em;
    color:var(--navy);
    margin-bottom:10px;
  }
  .field .req{
    display:inline-block;
    margin-left:8px;
    font-size:11px;
    color:#b0533f;
    letter-spacing:.04em;
  }
  .field input,
  .field textarea{
    width:100%;
    font-family:var(--font-ja);
    font-size:var(--fs-card-body);
    color:var(--navy);
    background:transparent;
    border:none;
    border-bottom:1px solid rgba(34,53,85,.45);
    padding:8px 2px;
    box-sizing:border-box;
    outline:none;
    transition:border-color .2s ease;
  }
  .field input::placeholder,
  .field textarea::placeholder{ color:rgba(34,53,85,.4); }
  .field input:focus,
  .field textarea:focus{ border-color:var(--navy); }
  .field textarea{
    border:1px solid rgba(34,53,85,.45);
    border-radius:8px;
    padding:14px;
    resize:vertical;
    line-height:1.8;
  }

  .contact__note{ margin-top:clamp(24px,3vw,36px); }
  .contact__note p{
    font-family:var(--font-ja);
    font-size:12px;
    line-height:1.9;
    letter-spacing:.02em;
    color:var(--navy);
    margin:0 0 8px;
  }
  .contact__note a{ color:var(--navy); text-decoration:underline; }

  .contact__agree{
    display:flex; align-items:center; justify-content:center; gap:10px;
    margin-top:18px;
    font-family:var(--font-ja);
    font-size:var(--fs-card-body);
    color:var(--navy);
    cursor:pointer;
  }
  .contact__agree input{ width:18px; height:18px; accent-color:var(--navy); }

  .contact__submit-wrap{ display:flex; justify-content:center; margin-top:clamp(28px,3.4vw,44px); }
  .contact__submit{
    min-width:200px;
    padding:14px 40px;
    background:var(--navy);
    color:var(--cream);
    border:none;
    font-family:var(--font-ja);
    font-size:var(--fs-body);
    letter-spacing:.1em;
    cursor:pointer;
    transition:opacity .25s ease;
  }
  .contact__submit:hover{ opacity:.85; }

  .contact__btns{ display:flex; justify-content:flex-end; margin-top:clamp(36px,4vw,56px); }

  @media (max-width:768px){
    .contact__inner{ padding:0 14px; }
    .contact__panel{ padding:24px 20px; }
    .contact__grid{ grid-template-columns:1fr; column-gap:0; }
    .field--left,.field--full{ grid-column:1; }
    .contact__btns{ justify-content:flex-end; }
    .contact__submit{ width:100%; }
  }

  /* =========================================================
     共通: 詳細ページ（.detail-page = feature.html / merit.html / risk.html）
     howto.html の各カードから「Learn more」で遷移する下層詳細ページ群。
     ヒーロー〜リード〜ナンバリング本文〜CTA の型を .fd- 接頭辞のクラスで共通化している。
     ========================================================= */

  /* ナンバリング本文セクション（.flow のナンバリング意匠を流用） */
  .fd-feature{ padding:var(--section-gap) 0 0; overflow:hidden; }

  /* Pattern / Difference 共通の中身ブロック */
  .fd-pattern,
  .fd-difference{ padding:var(--detail-section-gap) 0 0; overflow:hidden; }
  .fd-block{ margin-top:var(--block-gap); }
  .fd-block:first-of-type{ margin-top:var(--block-gap); }
  .fd-text{
    font-family:var(--font-ja);
    font-size:var(--fs-card-body);
    line-height:1.95; letter-spacing:.02em;
    color:var(--cream);
    margin:0;
  }
  .fd-sub{ margin-top:110px; }
  .fd-sub__num{
    font-family:var(--font-en);
    color:var(--gold);
    font-size:14px;
    letter-spacing:.18em;
    margin:0 0 6px;
  }
  .fd-sub__title{
    font-family:var(--font-ja);
    font-weight:600;
    font-size:var(--fs-subtitle);
    letter-spacing:.04em;
    color:var(--cream);
    margin:0 0 10px;
  }
  .fd-sub__text{
    font-family:var(--font-ja);
    font-size:18px;
    line-height:1.95; letter-spacing:.02em;
    color:var(--cream);
    margin:0;
  }
  .fd-sub__text + .fd-sub__text{ margin-top:20px; }

  /* fd-sub 内で画像とテキストを横並びにする行（PCのみ／スマホは縦積みのまま） */
  .fd-sub__row{
    display:flex;
    align-items:center;
    gap:32px;
  }
  .fd-sub__row .feat-card__media{
    flex:0 0 auto;
    width:auto;
    max-width:50%;
    margin:0;
  }
  .fd-sub__row .feat-card__media img{
    width:auto;
    height:auto;
    max-width:100%;
    display:block;
  }
  @media (min-width:769px){
    .fd-sub__row .feat-card__media--diff01-01{
      flex-basis:265px;
      width:265px;
      max-width:265px;
      align-self:center;
    }
    .fd-sub__row .feat-card__media--diff01-02{
      flex-basis:271px;
      width:271px;
      max-width:271px;
      align-self:center;
    }
    .fd-sub__row .feat-card__media--diff01-03{
      flex-basis:254px;
      width:254px;
      max-width:254px;
      align-self:center;
    }
    .fd-sub__row .feat-card__media--merit-column{
      flex-basis:291px;
      width:291px;
      max-width:291px;
      align-self:center;
    }
    .fd-sub__row .feat-card__media--merit-solution03{
      flex-basis:463px;
      width:463px;
      max-width:463px;
      align-self:center;
    }
    .fd-sub__row--merit-charm .feat-card__media--merit-charm{
      flex:1 1 0;
      width:auto;
      max-width:none;
      align-self:center;
    }
    .fd-sub__row--merit-charm .fd-panel__text{
      flex:0 0 586px;
      width:586px;
      max-width:586px;
      margin:0;
    }
    .fd-sub__row--risk-vacancy .fd-sub__text{
      flex:0 0 317px;
      width:317px;
      max-width:317px;
      margin:0;
    }
    .fd-sub__row--risk-protect .fd-sub__text{
      flex:0 0 436px;
      width:436px;
      max-width:436px;
      margin:0;
    }
    .fd-sub__row--risk-vacancy .flow__media,
    .fd-sub__row--risk-protect .flow__media{
      flex:1 1 0;
      width:auto;
      max-width:none;
      margin:0;
      align-self:center;
    }
    .fd-sub__row .feat-card__media--diff01-01 img,
    .fd-sub__row .feat-card__media--diff01-02 img,
    .fd-sub__row .feat-card__media--diff01-03 img,
    .fd-sub__row .feat-card__media--merit-column img,
    .fd-sub__row .feat-card__media--merit-solution03 img,
    .fd-sub__row .feat-card__media--merit-charm img{
      width:100%;
      height:auto;
    }
  }
  .fd-sub__row .fd-sub__text{ flex:1 1 auto; margin:0; }
  .fd-sub__row > .fd-panel__text,
  .fd-sub__row > .fd-sub__text,
  .fd-sub__row .text > .fd-panel__text:first-child,
  .fd-sub__row .text > .fd-sub__text:first-child{
    margin-top:0;
  }
  .fd-sub__row .text > .fd-panel__text:last-child,
  .fd-sub__row .text > .fd-sub__text:last-child{
    margin-bottom:0;
  }
  .merit-page .mr-note > .kakomi + .fd-sub__row{
    margin-top:30px;
  }
  .fd-sub__row + .fd-sub__text{ margin-top:30px; }
  .fd-sub__row + .fd-panel__text{ margin-top:30px; }
  .fd-sub__row--reverse{ flex-direction:row-reverse; }

  /* Pattern02: 比較表（メリット / 区分との決定的違い） */
  .fd-compare{
    display:grid; grid-template-columns:291px 431px;
    gap:24px;
    width:min(746px, 100%);
    margin:28px auto 0;
  }
  .fd-compare__col{
    background:var(--paper);
    border:1px solid var(--gold-deep);
    border-radius:var(--ab-radius);
    overflow:hidden;
    text-align:center;
  }
  .fd-compare__label{
    background:var(--gold-deep);
    font-family:var(--font-ja);
    font-weight:600;
    font-size:21px;
    letter-spacing:.04em;
    color:var(--cream);
    margin:0;
    padding:16px 20px;
  }
  .fd-compare__text{
    font-family:var(--font-ja);
    font-size:14px;
    line-height:1.9; letter-spacing:.02em;
    color:var(--navy);
    margin:0;
    padding:20px 24px;
  }

  /* navy地の上で使うリード文（.ho-lead は paper 地専用のため、navy 用を別途用意） */
  /* .ho-inner の中に置く前提で、テキスト幅を920pxに制限し中央寄せ */
  .fd-lead-sec{ padding:60px 0 90px; }
  .fd-lead{
    max-width:920px;
    margin:0 auto 24px;
    text-align:left;
    font-family:var(--font-ja);
    font-weight:600;
    font-size:20px;
    line-height:1.9; letter-spacing:.05em;
    color:var(--cream);
  }
  .fd-lead:last-child{ margin-bottom:0; }

  /* 末尾 CTA（提案文＋ボタン） */
  .fd-cta{ padding:var(--section-gap) 0; overflow:hidden; }
  .fd-cta__label{
    text-align:center;
    font-family:var(--font-en);
    font-weight:400;
    font-size:clamp(14px,1.41vw,18px);
    letter-spacing:.14em;
    color:var(--gold);
    margin:0 0 14px;
  }
  .fd-cta .fd-lead{ text-align:center; margin-bottom:16px; }
  .fd-cta .fd-lead:last-of-type{ margin-bottom:var(--block-gap); }

  /* ---- 数字付きカードパネル（囲み背景＋色付き四角ナンバー） 共通コンポーネント ----
     .strg__panel 同様の paper 地の囲みだが、1280px時に幅1100pxで中央寄せになる点が異なる。
     Feature / Merit / Risk の各ページの番号付きリストで共通利用する。 */
  .fd-panel-inner{
    width:min(1100px, calc(100% - 44px));
    margin:60px auto 0;
    box-sizing:border-box;
  }
  .fd-panel{
    background:var(--paper);
    border-radius:clamp(20px,2.6vw,32px);
    padding:clamp(24px,7.8vw,100px) clamp(28px,9.4vw,120px);
    display:flex; flex-direction:column;
    gap:100px;
  }
  .fd-panel__head{
    display:flex; align-items:center;
    gap:30px;
    margin-bottom:45px;
  }
  .fd-panel__num{
    flex:0 0 auto;
    width:87px; height:87px;
    background:var(--gold-deep);
    color:var(--cream);
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-en);
    font-weight:700;
    font-size:clamp(24px,2.8vw,36px);
    letter-spacing:.02em;
  }
  .fd-panel__title{
    font-family:var(--font-ja);
    font-weight:600;
    font-size:30px;
    letter-spacing:.04em;
    line-height:1.5;
    color:var(--navy);
    margin:0;
  }
  .fd-panel__text{
    font-family:var(--font-ja);
    font-size:18px;
    line-height:1.95; letter-spacing:.02em;
    color:var(--navy);
    margin:0;
  }

  /* .fd-panel（paper地）内に入れ子で使う要素は navy 地想定の配色を上書き */
  .fd-panel .fd-text,
  .fd-panel .fd-sub__title,
  .fd-panel .fd-sub__text{
    color:var(--navy);
  }
  .fd-panel .fd-sub__num{ color:var(--gold-deep); }

  /* 詳細3ページ共通: イントロ / リード / 英字系を除き、見出し=R・本文=Dに調整 */
  .detail-page .fd-panel__title,
  .detail-page .fd-panel__title--full,
  .detail-page .fd-panel .kakomi,
  .detail-page .fd-panel .kakomi strong{
    font-weight:400;
  }
  .detail-page .fd-panel .fd-panel__text,
  .detail-page .fd-panel .fd-sub__text,
  .detail-page .fd-panel .fd-text,
  .detail-page .mr-note p:not(.fd-lead):not(.kakomi){
    font-weight:600;
  }
  .detail-page .fd-sub:has(> .kakomi) .fd-panel__text,
  .detail-page .fd-sub:has(> .kakomi) .fd-sub__text,
  .detail-page .mr-note:has(.kakomi) .fd-panel__text,
  .detail-page .mr-note:has(.kakomi) .fd-sub__text{
    font-size:16px;
    line-height:2.2;
  }

  @media (max-width:768px){
    .fd-panel-inner{ margin-top:40px; }
    .fd-panel{ padding:24px 20px; gap:32px; }
    .fd-panel__head{ align-items:center; gap:20px; margin-bottom:20px; }
    .fd-panel__num{ width:48px; height:48px; font-size:20px; }
    .fd-panel__title{ font-size:20px; }
    .fd-sub__row{ display:block; }
    .fd-sub__row .feat-card__media{ width:48%; margin:clamp(22px,2.6vw,32px) auto clamp(14px,1.8vw,22px); }
  }

  @media (max-width:768px){
    .fd-lead-sec{ padding:40px 0 40px; }
    .fd-lead{ font-size:16px; text-align:left; }
    .fd-block{ margin-top:32px; }
    .fd-text{ font-size:14px; }
    .fd-sub__text{ font-size:14px; }
    .fd-compare{ grid-template-columns:1fr; gap:16px; }
    .fd-compare__label{ font-size:18px; padding:14px 16px; }
    .fd-compare__text{ font-size:14px; padding:16px 18px; }
  }

  /* ナンバリング本文内の画像（merit.html / risk.html） / 注意書きボックス（merit.html / risk.html） */
  .flow__media{ margin:16px 0 20px; width:min(520px,100%); }
  .flow__media img{ width:100%; height:auto; display:block; border-radius:var(--ab-radius); }
  .flow__media--lg{ width:min(740px,100%); margin-left:auto; margin-right:auto; }
  .flow__media--lg-mid{ width:min(500px,100%); margin-left:auto; margin-right:auto; }
  .flow__media--lg-mini{ width:min(455px,100%); margin-left:auto; margin-right:auto; }

  .mr-note{
    margin-top:28px;
  }
  .mr-note p{
    font-family:var(--font-ja);
    font-size:16px;
    line-height:1.9;
    letter-spacing:.02em;
    color:var(--navy);
    margin:60px 0 6px;
  }
  .mr-note p:last-child{ margin-bottom:0; }
  .merit-page .mr-note > .kakomi{
    font-size:20px;
    line-height:1.5;
    margin:0;
  }

  @media (max-width:768px){
    .flow__media{ width:100%; }
  }

.fd-panel__title--full {
  background: var(--gold-deep);
  color: var(--cream);
  font-size: 28px;
  text-align: center;
  padding: 28px;
  margin-bottom: 24px;
}

.fd-panel__text + .fd-panel__text {
  margin-top: 24px;
}

/* .fd-panel__item + .fd-panel__item,
.fd-sub + .fd-panel__item {
  padding-top: 100px;
} */

.fd-panel__last {
  background: var(--navy);
  font-size: 25px;
  text-align: center;
  padding: 20px;
  border-radius: 24px;
  margin-top: 20px;
}

.fd-cta .fd-panel {
  display: block;
  padding-top: 80px;
  padding-bottom: 80px;
  margin-bottom: var(--block-gap);
}

.fd-cta .fd-panel .fd-lead {
  color: var(--navy);
  font-size: 18px;
  text-align: left;
}

/* 他の見出し（.flow .sec-title など）と同じ固定幅の下線バー方式。1行に収まりつつ下線が文字幅より左右1文字分ほど長く出る幅に設定 */
.fd-cta .sec-title{
  width: min(620px, 100%);
}

.kakomi {
  border: 2px solid var(--navy);
  color: var(--navy);
  font-size: 20px;
  padding: 10px;
  border-radius: 20px;
  text-align: center;
  margin-bottom: 20px;
}

#charm .fd-block {
  max-width: 960px;
  margin: 60px auto 120px;
}

/* イントロ（それは、8つの価値を...）専用。パネル内の番号タイトル(.fd-panel__title)には影響させない */
#charm .fd-block h3 {
  font-size: 32px;
  text-align: center;
  margin-bottom: 80px;
}

/* イントロ内のテキストのみ navy 地想定の cream 色に。01-04パネル内の本文(.fd-panel__text)は巻き込まない */
#charm .fd-block .fd-panel__text {
  color: var(--cream);
  margin-top: 0;
}

#charm .fd-sub {
  margin-top: 40px;
}

/* Riskページ　個別の設定 */
.fd-sub__inner {
  padding: 80px clamp(0px, 3.1vw, 39px) 40px;
}

.fd-panel__title--full + .fd-sub {
  margin-top: 60px;
}

#risk .fd-panel__title--full {
  display: block;
  width: fit-content;
  margin-inline: auto;
  padding: 12px 2em;
}

#risk .mr-note {
  background: #bca1804d;
  padding: 40px;
  border-radius: 26px;
  margin-top: 80px;
}

#risk .mr-note .sec-title {
    text-align: center;
    font-family: var(--font-ja);
    font-weight: 400;
    font-size: 22px;
    letter-spacing: .12em;
    color: var(--navy);
    margin: 0 auto;
    padding-bottom: 4px;
    width: min(276px, 100%);
    border-bottom: 1px solid var(--gold);
}

#risk .mr-note .flow__media + p {
  margin-top: 0;
}

#risk .mr-note p + p {
  margin-top: 30px;
}

#risk  .fd-sub__text + .fd-sub__text {
  margin-top: 40px;
}

#risk .mr-note p {
  font-size: 16px;
  line-height: 2.2;
}

#risk .mr-note .fd-lead {
  text-align: center;
  margin-top: 10px;
  font-size: 18px;
  font-weight: 400;
}

/* =========================================================
   feature.html / merit.html / risk.html
   SP調整: PC版の見え方を保ちつつ、詳細3ページだけ読みやすく整える
   ========================================================= */
@media (max-width:768px){
  body.feature-page,
  body.merit-page,
  body.risk-page{
    padding-top:var(--header-h, 76px);
  }

  .detail-page .ab-mv__img{
    height:62vw;
    min-height:220px;
  }

  .detail-page .ab-intro{
    padding-top:42px;
  }

  .detail-page .ab-intro__title{
    font-size:clamp(40px,12vw,52px);
    margin-bottom:16px;
  }

  .detail-page .ab-intro__sub{
    font-size:16px;
    line-height:1.7;
  }

  .detail-page .ho-inner{
    padding-inline:18px;
  }

  .detail-page .sec-title{
    width:100%;
    max-width:360px;
    font-size:clamp(21px,6vw,24px);
    line-height:1.55;
    letter-spacing:.05em;
    padding-bottom:14px;
  }

  .fd-feature,
  .fd-pattern,
  .fd-difference{
    padding-top:64px;
  }

  .fd-lead-sec{
    padding:36px 0 18px;
  }

  .fd-lead{
    font-size:15px;
    line-height:2;
    letter-spacing:.03em;
    margin-bottom:18px;
  }

  .fd-panel-inner{
    width:calc(100% - 28px);
    margin-top:32px;
  }

  .fd-panel{
    border-radius:18px;
    padding:28px 18px 34px;
    gap:54px;
  }

  .fd-panel__head{
    display:grid;
    grid-template-columns:48px minmax(0, 1fr);
    align-items:start;
    gap:14px;
    margin-bottom:18px;
  }

  .fd-panel__head.is-single-line{
    align-items:center;
  }

  .fd-panel__num{
    width:48px;
    height:48px;
    font-size:20px;
    margin-top:3px;
  }

  .fd-panel__head.is-single-line .fd-panel__num{
    margin-top:0;
  }

  .fd-panel__title{
    font-size:clamp(19px,5.3vw,22px);
    line-height:1.55;
    letter-spacing:.02em;
    overflow-wrap:anywhere;
  }

  .fd-panel__title br,
  .fd-panel__title--full br,
  .fd-sub__title br{
    display:none;
  }

  .fd-panel__title br.sp-br,
  .fd-panel__title--full br.sp-br{
    display:inline;
  }

  .fd-panel__title--full{
    font-size:18px;
    line-height:1.65;
    letter-spacing:.02em;
    padding:16px 14px;
    margin-bottom:22px;
  }

  #risk .fd-panel__title--full{
    width:auto;
    margin-inline:0;
    padding:16px 14px;
  }

  .fd-panel__text,
  .fd-sub__text,
  .detail-page .fd-panel .fd-panel__text,
  .detail-page .fd-panel .fd-sub__text,
  .detail-page .fd-panel .fd-text{
    font-size:15px;
    line-height:2;
    letter-spacing:.02em;
    text-align:left;
  }

  .detail-page .fd-sub:has(> .kakomi) .fd-panel__text,
  .detail-page .fd-sub:has(> .kakomi) .fd-sub__text,
  .detail-page .mr-note:has(.kakomi) .fd-panel__text,
  .detail-page .mr-note:has(.kakomi) .fd-sub__text{
    font-size:15px;
    line-height:2;
  }

  .fd-panel__text + .fd-panel__text{
    margin-top:18px;
  }

  .fd-sub{
    margin-top:42px;
  }

  .fd-panel__title--full + .fd-sub{
    margin-top:34px;
  }

  .fd-sub__inner{
    padding:34px 0 0;
  }

  .fd-sub__row{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:18px;
  }

  .fd-sub__row--reverse{
    flex-direction:column;
  }

  .fd-sub__row .feat-card__media,
  .fd-sub__row .flow__media,
  .fd-sub__row--risk-vacancy .flow__media,
  .fd-sub__row--risk-protect .flow__media{
    width:min(100%, 420px);
    max-width:100%;
    margin:0 auto;
  }

  .merit-page #charm .fd-sub__row--merit-charm .feat-card__media--merit-charm{
    width:65%;
    max-width:420px;
    margin-left:auto;
    margin-right:auto;
  }

  .risk-page .flow__media--risk-earthquake-01{
    width:95%;
    max-width:420px;
  }

  .risk-page .flow__media--risk-earthquake-02{
    width:70%;
    max-width:420px;
  }

  .risk-page .flow__media--risk-arrears{
    width:65%;
    max-width:420px;
  }

  .fd-sub__row .feat-card__media img,
  .fd-sub__row .flow__media img{
    width:100%;
    height:auto;
  }

  .fd-sub__row > .fd-panel__text,
  .fd-sub__row > .fd-sub__text,
  .fd-sub__row .text{
    width:100%;
  }

  .fd-sub__row + .fd-sub__text,
  .fd-sub__row + .fd-panel__text{
    margin-top:20px;
  }

  .flow__media{
    width:100%;
    margin:18px auto 20px;
  }

  .flow__media img,
  .fd-sub__row .feat-card__media img{
    border-radius:12px;
  }

  .kakomi{
    font-size:16px;
    line-height:1.7;
    padding:12px 14px;
    border-radius:14px;
    text-align:left;
  }

  .mr-note,
  #risk .mr-note{
    margin-top:34px;
    padding:22px 16px;
    border-radius:18px;
  }

  .mr-note p,
  #risk .mr-note p{
    font-size:15px;
    line-height:2;
    margin-top:22px;
  }

  #risk .mr-note p + p,
  #risk .mr-note .flow__media + p,
  #risk .fd-sub__text + .fd-sub__text{
    margin-top:22px;
  }

  .merit-page .mr-note > .kakomi{
    font-size:17px;
    line-height:1.65;
  }

  #risk .mr-note .sec-title{
    width:100%;
    max-width:360px;
    font-size:clamp(21px,6vw,24px);
    line-height:1.55;
    letter-spacing:.05em;
    padding-bottom:14px;
  }

  #risk .mr-note .fd-lead{
    font-size:15px;
    line-height:2;
    letter-spacing:.03em;
  }

  #charm .fd-block{
    margin:38px auto 62px;
  }

  #charm .fd-block h3{
    font-size:22px;
    line-height:1.7;
    margin-bottom:34px;
    text-align:center;
  }

  #charm .fd-sub{
    margin-top:28px;
  }

  .fd-compare{
    width:100%;
  }

  .fd-panel__last{
    font-size:18px;
    line-height:1.6;
    border-radius:16px;
    padding:16px;
  }

  .fd-cta{
    padding:64px 0;
  }

  .fd-cta .fd-panel{
    padding:28px 18px;
  }

  .fd-cta .fd-panel .fd-lead{
    font-size:15px;
    line-height:2;
  }

  .fd-cta .flow__actions{
    width:max-content;
    max-width:100%;
    margin-left:auto;
    align-items:flex-start;
    gap:16px;
  }

  .fd-cta .more,
  .fd-cta .back-top{
    justify-content:flex-start;
    gap:14px;
    width:auto;
  }
}

@media (max-width:390px){
  .fd-panel{
    padding-inline:15px;
  }

  .fd-panel__head{
    grid-template-columns:42px minmax(0, 1fr);
    gap:12px;
  }

  .fd-panel__num{
    width:42px;
    height:42px;
    font-size:18px;
  }

  .fd-panel__title{
    font-size:18px;
  }

  .fd-panel__text,
  .fd-sub__text,
  .detail-page .fd-panel .fd-panel__text,
  .detail-page .fd-panel .fd-sub__text,
  .detail-page .fd-panel .fd-text{
    font-size:14px;
  }
}