/* ============================================
     common.css / Bootstrap のオーバーライド
     - main の右padding(90px) を打ち消して全幅表示
     - Bootstrap の青リンクカラーを無効化（LP内のaはカード/ボタンのスタイルで色決定）
     ============================================ */
  main{padding-right:0}
  main a,
  main a:hover,
  main a:focus{color:inherit;text-decoration:none}
  /* PC（固定ヘッダー90px右側 ある状態）では main を右90px削って左右バランスを合わせる */
  @media (min-width:1101px){
    main{width:calc(100% - 90px);margin-right:90px;padding-right:0}
  }

  /* ============================================
     Design tokens
     - typography: 現サイト踏襲 (Noto Sans JP + Lora)
     - color: #000 / #FFF / #a49072 の3色のみ
     - mood: リーフ主体（モカ地、縦書き、花装飾）
     ============================================ */
  :root{
    --mocha: #a49072;   /* 既存サイト bg と同一 */
    --black: #000000;
    --white: #FFFFFF;
    --soft:  #faf8f4;   /* 白カードが真っ白すぎないよう1段柔らかく */
    --line-wh: rgba(255,255,255,.35);
    --line-bk: rgba(0,0,0,.15);
    --mocha-pale: rgba(164,144,114,.3);  /* --mocha 30%透過 ＝ 淡いモカブラウン(≒#d6d0c8) */
    --warn:  #cf6565;   /* 既存の注意色（menu-item__table span） */
  }

  /* --- base: common.css と同じ基本設定 --- */
  html{
    margin-top:0 !important;
    font-size:62.5%;   /* 1rem = 10px */
  }
  *{box-sizing:border-box}
  body{
    margin:0;
    background:var(--mocha);
    color:var(--black);
    font-size:1.5rem;
    overflow-x:hidden;
    font-family:"Noto Sans JP","游ゴシック体","Yu Gothic",YuGothic,"ヒラギノ角ゴシック Pro","Hiragino Kaku Gothic Pro",メイリオ,Meiryo,Osaka,sans-serif;
    font-weight:400;
    line-height:2.1;
    letter-spacing:0.1rem;
  }
  img{max-width:100%;height:auto;display:block}
  a{color:inherit;text-decoration:none}
  a:hover{text-decoration:none}
  p{line-height:2.1;margin-bottom:0;letter-spacing:0.1rem}
  .font-mincho{font-family:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif}
  /* br 制御ユーティリティ（SPでだけ改行） */
  .br-sp{display:none}
  @media (max-width:900px){.br-sp{display:inline}}
  @media (max-width:900px){.pc-only{display:none}}
  ul{list-style:none;padding-left:0;margin-bottom:0}
  h1,h2,h3,h4,h5,h6{margin:0}

  /* 注: ヘッダー出力の <div id="wrap" class="wrap"> と衝突しないよう
     LP 内部の .wrap は main 配下に限定して適用する */
  main .wrap{
    max-width:1120px;margin:0 auto;padding:0 32px;
    position:relative;z-index:2;
  }
  .section{padding:12rem 0;position:relative;z-index:calc(100 - var(--i, 50))}
  .section--mocha{background:var(--mocha);color:var(--white)}
  .section--mocha a{color:var(--white)}
  .section--white{background:var(--white);color:var(--black)}
  /* 円弧クリップ用ラッパ: 装飾は内側で overflow:hidden、花はセクション外に出せる */
  .arcs-wrap{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none}

  /* --- placeholder header/footer (WPで置換) --- */
  .ph-note{
    background:#2a2a2a;color:#aaa;padding:8px 16px;
    font-size:1.1rem;text-align:center;
    font-family:"Lora",serif;letter-spacing:0.2rem;
  }
  .ph-header,.ph-footer{
    padding:20px 32px;text-align:center;
    background:#111;color:#eee;
    font-size:1.1rem;letter-spacing:0.3rem;
    font-family:"Lora",serif;
  }

  /* ============================================
     見出しスタイル
     ---  現サイトの sec-ttl 系統を踏襲
     ============================================ */
  .sec-ttl-num{
    display:inline-block;
    font-family:"Lora",serif;
    font-size:1.4rem;
    border-bottom:1px solid var(--black);
    padding-bottom:4px;letter-spacing:0.1rem;
  }
  .section--mocha .sec-ttl-num{border-color:var(--white)}

  .sec-ttl{
    font-family:"Lora",serif;
    font-size:4.5rem;      /* fallback */
    font-size:4vw;         /* 現サイト .opn-ttl / .contents__right--heading--catch と同一指定 */
    letter-spacing:0.5rem;
    line-height:1.4;
    margin:1rem 0 1.6rem;
    font-weight:400;
  }

  /* 小英字サブタイトル: 現サイト .sec-subttl 準拠（Lora + モカ + 1.6rem） */
  .sec-subttl{
    font-family:"Lora",serif;
    font-size:1.6rem;
    letter-spacing:0.2rem;
    color:var(--mocha);
    line-height:1.6;
    font-weight:400;
    display:inline-block;
  }
  .section--mocha .sec-subttl{color:var(--white)}

  /* 和文キャプション: 大見出しの下に敷く日本語の説明文 */
  .sec-cap{
    font-family:"Noto Sans JP",sans-serif;
    font-size:1.4rem;
    letter-spacing:0.1rem;
    line-height:1.9;
    font-weight:400;
    margin-top:1.2rem;
  }

  .sec-head{
    text-align:center;
    margin-bottom:7rem;
  }
  .sec-head--left{text-align:left}

  /* --- リーフの縦書き見出し（明朝で特別感） --- */
  .vtxt{
    writing-mode:vertical-rl;
    -webkit-writing-mode:vertical-rl;
    font-family:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;
    font-weight:300;
    letter-spacing:0.4rem;
    line-height:1.9;
    white-space:nowrap; /* 不自然な途中改行を防ぐ */
  }

  /* --- 装飾: 花コーナー（リーフレット由来のPNG差し込み） ---
     セクションの繋ぎ目を跨ぐよう、大きな負オフセットで配置
     z-index: 1 → .wrap(z-index:2)より下 → 本文カードを邪魔しない */
  .deco-flower{
    position:absolute;
    pointer-events:none;
    z-index:1;
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center;
  }
  /* ベース種類（Illustrator書き出しのクリーンな透過PNG → WebP） */
  .deco-flower--peony-l    {background-image:url('../img/shukumou-kyosei/deco/flower-07.webp')}      /* 白ピオニー単体 */
  .deco-flower--peony-r    {background-image:url('../img/shukumou-kyosei/deco/flower-07-flip.webp')}
  .deco-flower--peony-big-l{background-image:url('../img/shukumou-kyosei/deco/flower-06.webp')}      /* 白ピオニー+ヒヤシンス+縞ダリア（大） */
  .deco-flower--peony-big-r{background-image:url('../img/shukumou-kyosei/deco/flower-06-flip.webp')}
  .deco-flower--red-l      {background-image:url('../img/shukumou-kyosei/deco/flower-01.webp')}      /* バーガンディ+白+小花 */
  .deco-flower--red-r      {background-image:url('../img/shukumou-kyosei/deco/flower-01-flip.webp')}
  .deco-flower--dahlia-l   {background-image:url('../img/shukumou-kyosei/deco/flower-03.webp')}      /* 縞ダリア+バーガンディ */
  .deco-flower--dahlia-r   {background-image:url('../img/shukumou-kyosei/deco/flower-03-flip.webp')}
  .deco-flower--dahlia-sm-l{background-image:url('../img/shukumou-kyosei/deco/flower-04.webp')}      /* 縞ダリアコンパクト */
  .deco-flower--dahlia-sm-r{background-image:url('../img/shukumou-kyosei/deco/flower-04-flip.webp')}
  .deco-flower--mixed-l    {background-image:url('../img/shukumou-kyosei/deco/flower-02.webp')}      /* ミックス bouquet */
  .deco-flower--mixed-r    {background-image:url('../img/shukumou-kyosei/deco/flower-02-flip.webp')}
  .deco-flower--rose-l     {background-image:url('../img/shukumou-kyosei/deco/flower-08.webp')}      /* 白ばら+ヒヤシンス */
  .deco-flower--rose-r     {background-image:url('../img/shukumou-kyosei/deco/flower-08-flip.webp')}
  .deco-flower--large-l    {background-image:url('../img/shukumou-kyosei/deco/flower-05.webp')}      /* 大型 bouquet */
  .deco-flower--large-r    {background-image:url('../img/shukumou-kyosei/deco/flower-05-flip.webp')}

  /* 位置 modifier（繋ぎ目またぎ：半分以上は隣接セクション側に出す） */
  .deco-flower--tl{top:-24rem;left:-6rem;width:42rem;height:42rem}
  .deco-flower--tr{top:-13rem;right:-6rem;width:40rem;height:40rem}
  .deco-flower--bl{bottom:-28rem;left:-14rem;width:50rem;height:50rem}
  .deco-flower--br{bottom:-26rem;right:-6rem;width:46rem;height:46rem}
  /* サイズユーティリティ */
  .deco-flower--sm{width:24rem !important;height:24rem !important}
  .deco-flower--md{width:34rem !important;height:34rem !important}
  /* 強制追加オフセット（コンテンツ重なり回避用） */
  .deco-flower--push-down{bottom:-32rem !important}
  .deco-flower--push-up{top:-28rem !important}

  /* --- 円弧線装飾（Illustratorから書き出した arc-rings.svg を使用） --- */
  .arc-rings{
    position:absolute;
    top:-30rem;right:-30rem;
    width:60rem;height:60rem;
    background:url('../img/shukumou-kyosei/deco/arc-rings.svg') no-repeat center/contain;
    pointer-events:none;
    z-index:0;
  }
  /* 白地セクションでは暗くして見えるように */
  .section--white .arc-rings,
  .cta .arc-rings,
  .store .arc-rings{filter:invert(1) opacity(.25)}

  /* 位置バリアント */
  .arc-rings--tl{top:-30rem;left:-30rem;right:auto}
  .arc-rings--bl{top:auto;bottom:-30rem;left:-30rem;right:auto}
  .arc-rings--br{top:auto;bottom:-30rem;right:-30rem}
  .arc-rings--lg{width:80rem;height:80rem}
  .arc-rings--sm{width:40rem;height:40rem;top:-20rem;right:-20rem}

  /* ヒーロー専用：左上の隅にチラッと（かなり外に逃がす） */
  .arc-rings--hero{
    top:-70rem;left:-55rem;right:auto;
    width:95rem;height:95rem;
    opacity:.7;
  }

  /* ============================================
     ボタン: 既存 btn01（白枠/白文字） & btn03（黒枠/黒文字）踏襲
     ============================================ */
  .btn01, .btn03{
    position:relative;
    display:inline-block;
    width:100%;max-width:360px;
    padding:1.8rem 5.2rem 1.8rem 2.4rem;
    font-family:"Lora",serif;
    font-size:1.3rem;
    letter-spacing:0.5rem;
    text-align:left;
    background:transparent;
    transition:0.3s;
  }
  .btn01{color:var(--white);border:1px solid var(--white);border-right:none}
  .btn03{color:var(--black);border:1px solid var(--black);border-right:none}
  .btn01::before, .btn03::before{
    content:"";
    position:absolute;top:50%;right:5%;
    transform:translateY(-50%);
    width:4rem;height:1.2rem;
    background:no-repeat center/contain;
    transition:0.4s;
  }
  .btn01::before{background-image:url('../img/shukumou-kyosei/arrow01.svg')}
  .btn03::before{background-image:url('../img/shukumou-kyosei/arrow02.svg')}
  .btn01:hover::before, .btn03:hover::before{right:-2%}
  /* ベタ塗りバリアント（黒背景・白文字・白矢印） */
  .btn-fill-dark{
    background:var(--black);
    color:var(--white);
    border-color:var(--black);
  }
  .btn-fill-dark::before{background-image:url('../img/shukumou-kyosei/arrow01.svg') !important}

  .btn-row{
    display:flex;gap:2.4rem;justify-content:center;flex-wrap:wrap;
    margin-top:5rem;
  }
  .btn-center{text-align:center;margin-top:5rem}

  /* ============================================
     1. HERO
     ============================================ */
  .hero{
    background:var(--mocha);
    padding:0;position:relative;
    min-height:80vh;
    display:flex;align-items:stretch;
    z-index:calc(100 - var(--i, 50));
  }
  .hero__inner{
    display:grid;grid-template-columns:1fr 1fr;gap:0;
    width:100%;margin:0;padding:0;
    position:relative;z-index:2;align-items:stretch;
    min-height:80vh;
  }
  /* --- Hero 左右入れ替えバージョン：写真を左、テキストを右へ --- */
  .hero--reverse .hero__visual{order:-1}
  .hero--reverse .hero__text{margin-left:0;margin-right:auto;padding:8rem 5rem 6rem 6rem}
  .hero__text{
    position:relative;color:var(--white);
    padding:8rem 5rem 6rem 5rem;
    max-width:56rem;
    margin-left:auto;    /* 画面左半分の中で右寄せ、画像とくっつく */
    align-self:center;
  }
  .hero__cta-wrap{text-align:center;margin-top:2rem}
  .hero__cta-wrap .btn01{max-width:28rem}
  .hero__area{
    display:inline-block;
    font-family:"Lora",serif;
    font-size:1.2rem;letter-spacing:0.4rem;
    padding-bottom:4px;
    border-bottom:1px solid var(--white);
    margin-bottom:3rem;
  }
  .hero__title{
    font-family:"Lora",serif;
    font-size:5.5rem;      /* fallback */
    font-size:5.5vw;       /* 現サイト .opn-ttl と同系統（4vw より大きめで feature 感） */
    letter-spacing:0.5rem;
    line-height:1.4;
    font-weight:400;
    margin:0 0 4rem;
  }
  .hero__title-jp{
    display:block;
    font-family:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;
    font-size:2.8rem;
    letter-spacing:0.4rem;
    line-height:1.7;
    font-weight:300;
    margin-top:1.6rem;
  }
  .hero__copy{
    display:flex;gap:3rem;align-items:flex-start;
    margin:0 0 4rem;
  }
  .hero__copy .vtxt{
    font-size:1.6rem;letter-spacing:0.5rem;
    flex-shrink:0;
  }
  .hero__lead{
    font-size:1.4rem;max-width:42rem;
    line-height:2.2;letter-spacing:0.1rem;
  }
  .hero__visual{
    position:relative;
    width:100%;height:100%;
    min-height:80vh;
    overflow:hidden;
  }
  .hero__visual picture{display:block;width:100%;height:100%}
  .hero__visual img{
    width:100%;height:100%;object-fit:cover;
  }
  .hero__brand{
    position:absolute;bottom:3rem;left:3rem;
    font-family:"Lora",serif;
    font-size:2rem;letter-spacing:0.2rem;color:var(--white);
    text-shadow:0 1px 4px rgba(0,0,0,.3);
  }

  /* ============================================
     2. STARTING POINT（旧 CONCERNS）
     縦書きキャッチ + 01〜05 の数字付きリストを横並び
     ============================================ */
  .starting{margin:0 auto;color:var(--black)}
  .starting__inner{
    display:grid;
    /* 左右を同じ固定幅にして、中央auto縦書きを真ん中に */
    grid-template-columns:42rem auto 42rem;
    gap:4rem;
    justify-content:center;
    align-items:center;
    margin-bottom:6rem;
  }
  .starting__visual{
    aspect-ratio:4/3;
    background:#efe8d9;
    display:flex;align-items:center;justify-content:center;
    overflow:hidden;
  }
  .starting__visual img{width:100%;height:100%;object-fit:cover}
  .starting__visual-label{
    font-family:"Lora",serif;
    font-size:1.2rem;letter-spacing:0.3rem;color:var(--mocha);
  }
  .starting__catch{
    writing-mode:vertical-rl;
    -webkit-writing-mode:vertical-rl;
    font-family:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;
    font-size:2.8rem;
    font-weight:300;
    line-height:2;
    letter-spacing:0.35rem;
    margin:0;
    white-space:nowrap;
  }
  .starting__phrases{
    list-style:none;
    padding:0;
    margin:0;
  }
  .starting__phrases li{
    font-family:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;
    font-size:1.8rem;
    line-height:2.8;
    letter-spacing:0.15rem;
    position:relative;
    padding-left:2rem;
    white-space:nowrap;    /* PCでは1行強制 */
  }
  @media (max-width:900px){
    .starting__phrases li{white-space:normal;padding-left:1.8rem}
  }
  .starting__num{
    position:absolute;left:0;top:50%;
    transform:translateY(-50%);
    font-size:1.2rem;
    color:var(--mocha);
    line-height:1;
  }
  .starting__lead{
    text-align:center;
    font-size:1.5rem;
    line-height:2.2;
    letter-spacing:0.08rem;
    margin:0 auto 2rem;
    max-width:62rem;
  }
  @media (max-width:900px){
    .starting__inner{grid-template-columns:1fr;gap:3rem}
    .starting__catch{
      writing-mode:horizontal-tb;
      -webkit-writing-mode:horizontal-tb;
      font-size:2.3rem;text-align:center;
      white-space:normal;
    }
    .starting__phrases li{font-size:1.6rem;padding-left:4rem;line-height:2.6}
  }
  .check-list{list-style:none;padding:0;margin:0}
  .check-list li{
    padding:1.8rem 0 1.8rem 3.6rem;
    border-bottom:1px solid var(--mocha-pale);
    position:relative;
    font-size:1.5rem;letter-spacing:0.1rem;
  }
  .check-list li::before{
    content:"◆";
    position:absolute;left:0;top:1.8rem;
    color:var(--mocha);font-size:1.2rem;
  }
  .section--mocha .check-list li{border-color:var(--line-wh)}
  .section--mocha .check-list li::before{color:var(--white)}
  .concerns__note{
    margin:7rem auto 0;text-align:center;
    font-size:1.4rem;max-width:82rem;line-height:2.4;
  }

  /* ============================================
     3. APPROACH
     ============================================ */
  .approach__inner{
    display:grid;
    /* 左右を同じ固定幅にして、中央auto縦書きを真ん中に */
    grid-template-columns:34rem auto 34rem;
    gap:4rem;
    justify-content:center;
    align-items:center;
  }
  .approach__visual{aspect-ratio:4/5;overflow:hidden}
  .approach__visual img{width:100%;height:100%;object-fit:cover;object-position:left center}
  .approach__text{position:relative}
  /* 画像とテキストの間に縦書き配置（独立カラム） */
  .approach__vtxt{
    position:static;
    font-size:2.8rem;
    letter-spacing:0.35rem;
    line-height:2;
    font-weight:300;
    margin:0;
    white-space:nowrap;
  }
  .approach__text p{
    margin:0 0 2rem;font-size:1.4rem;
    line-height:2.4;
  }

  /* ============================================
     4. 4 POINTS
     ============================================ */
  .points__grid{
    display:grid;grid-template-columns:repeat(2,1fr);
    gap:3rem;margin-top:2rem;
  }
  .point{
    background:var(--white);
    padding:4.8rem 4rem;
    box-shadow:0 0 10rem 1rem rgba(0,0,0,.04);
  }
  .point__num{
    font-family:"Lora",serif;
    font-size:1.4rem;letter-spacing:0.4rem;
    color:var(--mocha);margin-bottom:1.6rem;
    display:inline-block;
  }
  .point__title{
    font-size:1.8rem;
    margin:1.2rem 0 2rem;
    letter-spacing:0.15rem;line-height:1.6;
    padding-bottom:1.6rem;
    border-bottom:1px solid var(--mocha-pale);
    white-space:nowrap;    /* PCでは1行強制 */
  }
  @media (max-width:900px){
    .point__title{white-space:normal;letter-spacing:0.1rem}
  }
  .point__body{font-size:1.4rem;line-height:2;margin:0 0 3rem}
  /* ポイント下部の写真枠（画像差し替え前のプレースホルダ） */
  .point__visual{
    position:relative;
    aspect-ratio:4/3;
    background:#efe8d9;
    display:flex;align-items:center;justify-content:center;
    overflow:hidden;
  }
  .point__visual img{width:100%;height:100%;object-fit:cover}
  .point__visual-label{
    font-family:"Lora",serif;
    font-size:1.2rem;letter-spacing:0.3rem;
    color:var(--mocha);
  }
  .point__visual-caption{
    position:absolute;bottom:.8rem;right:1rem;
    font-size:1rem;letter-spacing:0.05rem;
    color:rgba(255,255,255,.9);
    text-shadow:0 1px 3px rgba(0,0,0,.5);
  }
  .points__note{
    text-align:center;margin-top:4rem;
    font-size:1.2rem;letter-spacing:0.1rem;
  }

  /* ============================================
     5. CASE STUDIES
     ============================================ */
  .case{
    background:var(--white);
    color:var(--black);
    padding:4.8rem;margin-bottom:4rem;
    box-shadow:0 0 10rem 1rem rgba(0,0,0,.04);
  }
  .case__head{
    text-align:center;margin-bottom:3.2rem;
    padding-bottom:2rem;border-bottom:1px solid var(--mocha-pale);
  }
  .case__head h3{
    font-size:1.8rem;margin:0 0 .8rem;
    letter-spacing:0.2rem;line-height:1.6;
  }
  .case__head .age{
    font-family:"Lora",serif;font-size:1.2rem;
    letter-spacing:0.4rem;color:var(--mocha);
  }
  .case__ba{
    display:grid;grid-template-columns:1fr 1fr;
    gap:1.6rem;margin:0 auto 3rem;
    max-width:60rem;
  }
  .case__ba--video{
    display:block;position:relative;max-width:72rem;
  }
  .case__video{
    width:100%;height:auto;display:block;
    aspect-ratio:16/9;object-fit:cover;background:#000;
  }
  .case__video-label{
    position:absolute;top:1.6rem;
    font-family:"Lora",serif;
    font-size:1.4rem;letter-spacing:0.3rem;color:var(--white);
    background:rgba(0,0,0,.45);
    padding:.6rem 1.6rem;
    pointer-events:none;
  }
  .case__video-label--left{left:1.6rem}
  .case__video-label--right{right:1.6rem}
  .case__ba-item{
    position:relative;aspect-ratio:4/5;
    background:#eee;overflow:hidden;
  }
  /* 2つのケースを横並び（小さめ） */
  .cases-pair{
    display:grid;grid-template-columns:1fr 1fr;
    gap:3rem;margin-top:4rem;
  }
  .case--compact{padding:3rem;margin-bottom:0}
  .case__ba--combined{
    display:block;position:relative;
    max-width:none;margin:0 0 2rem;
    aspect-ratio:4/3;overflow:hidden;
  }
  .case__ba--combined img{width:100%;height:100%;object-fit:cover;display:block}
  /* 小さめ写真2件用のBEFORE/AFTERラベル（video版より一回り小さく） */
  .case__ba--combined .case__video-label{
    top:1.2rem;font-size:1.1rem;letter-spacing:0.25rem;
    padding:.4rem 1.2rem;
  }
  .case__ba--combined .case__video-label--left{left:1.2rem;right:auto}
  .case__ba--combined .case__video-label--right{right:1.2rem;left:auto}
  @media (max-width:900px){
    .cases-pair{grid-template-columns:1fr}
  }
  .case__ba-item img{width:100%;height:100%;object-fit:cover}
  .case__ba-item .label{
    position:absolute;top:1.6rem;left:1.6rem;
    font-family:"Lora",serif;
    font-size:1.2rem;letter-spacing:0.3rem;color:var(--white);
    background:rgba(0,0,0,.4);padding:4px 1.4rem;
  }
  .case__ba-item .placeholder{
    position:absolute;inset:0;
    display:flex;align-items:center;justify-content:center;
    color:#999;font-family:"Lora",serif;letter-spacing:0.3rem;
  }
  .case__meta{
    display:flex;gap:3rem;flex-wrap:wrap;justify-content:center;
    font-size:1.3rem;letter-spacing:0.1rem;
    padding:1.6rem 0;
    border-top:1px solid var(--mocha-pale);
    border-bottom:1px solid var(--mocha-pale);
    margin-bottom:2rem;
  }
  .case__detail{
    display:grid;grid-template-columns:12rem 1fr;
    gap:2.4rem;align-items:center;
  }
  .case__detail .avatar{
    width:12rem;height:12rem;border-radius:50%;
    background:#eee;
    display:flex;align-items:center;justify-content:center;
    color:#999;font-size:1.1rem;letter-spacing:0.2rem;
    font-family:"Lora",serif;text-align:center;
  }
  .case__comment-label{
    font-size:1.2rem;color:var(--mocha);
    letter-spacing:0.2rem;margin-bottom:.8rem;
    font-family:"Lora",serif;
  }
  .case__comment{font-size:1.4rem;line-height:2;margin:0}
  .case__disclaimer{
    text-align:right;font-size:1.1rem;
    margin:1.6rem 0 0;opacity:.6;
  }

  /* ============================================
     6. FLOW
     ============================================ */
  .flow__list{
    counter-reset:step;list-style:none;padding:0;margin:0;
    display:grid;gap:0;max-width:90rem;margin:0 auto;
    position:relative;
  }
  .flow__list::before{
    content:"";position:absolute;
    left:6rem;top:4rem;bottom:4rem;
    width:1px;background:var(--mocha);opacity:.4;
  }
  .flow__item{
    display:grid;grid-template-columns:12rem 1fr;
    gap:4rem;padding:3rem 0;
  }
  .flow__step{text-align:center;position:relative;z-index:2}
  .flow__step-num{
    width:6rem;height:6rem;background:var(--white);
    border:1px solid var(--mocha);border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-family:"Lora",serif;
    font-size:2.2rem;color:var(--mocha);
    margin:0 auto .8rem;
  }
  .flow__step-label{
    font-family:"Lora",serif;
    font-size:1rem;letter-spacing:0.3rem;color:var(--mocha);
  }
  .flow__title{
    font-size:1.8rem;
    margin:1rem 0 1rem;letter-spacing:0.2rem;
  }
  .flow__body{font-size:1.4rem;line-height:2;margin:0}

  /* ============================================
     7. VOICES
     ============================================ */
  /* 旧 voices__grid は Case Studies と統合したので使わない。残置 */
  .voices__grid{display:none}

  /* Voices 小見出し（Case Studies の下に差し込み） */
  .voices__head{
    text-align:center;
    margin:8rem 0 3rem;
  }
  .voices__subttl{
    font-family:"Lora",serif;
    font-size:2.4rem;
    letter-spacing:0.3rem;
    margin:0 0 .8rem;
    color:var(--white);
    font-weight:400;
  }
  .voices__subcap{
    font-size:1.3rem;
    letter-spacing:0.15rem;
    color:var(--white);
    opacity:.85;
    margin:0;
  }

  /* Voices 画面幅いっぱい、ゆっくり無限に流れるマーキー */
  .voices__marquee{
    overflow:hidden;
    padding:2rem 0 3rem;
    width:100%;
    mask-image:linear-gradient(to right, transparent 0, #000 4rem, #000 calc(100% - 4rem), transparent 100%);
    -webkit-mask-image:linear-gradient(to right, transparent 0, #000 4rem, #000 calc(100% - 4rem), transparent 100%);
  }
  .voices__track{
    display:flex;
    gap:2rem;
    width:max-content;
    animation:voices-flow 90s linear infinite;
  }
  .voices__marquee:hover .voices__track{animation-play-state:paused}
  @keyframes voices-flow{
    from{transform:translateX(0)}
    to{transform:translateX(calc(-50% - 1rem))} /* gap(2rem)の半分を補正 */
  }

  .voice{
    background:var(--white);
    color:var(--black);
    padding:3.2rem 2.8rem;
    position:relative;
    box-shadow:0 0 10rem 1rem rgba(0,0,0,.04);
    min-width:28rem;
    width:28rem;
    flex-shrink:0;
  }
  .voice::before{
    content:"“";
    position:absolute;top:.4rem;right:2rem;
    font-family:"Lora",serif;
    font-size:7rem;color:var(--mocha);opacity:.4;line-height:1;
  }
  .voice__age{
    font-family:"Lora",serif;
    font-size:1.2rem;letter-spacing:0.4rem;
    color:var(--mocha);margin-bottom:1.2rem;
    display:inline-block;padding-bottom:2px;
    border-bottom:1px solid var(--mocha-pale);
  }
  .voice__title{
    font-size:1.7rem;
    margin:1.2rem 0 1.6rem;letter-spacing:0.2rem;line-height:1.6;
  }
  .voice__body{font-size:1.4rem;line-height:2;margin:0}

  /* ============================================
     8. FAQ
     ============================================ */
  .faq__list{max-width:90rem;margin:0 auto;padding:0}
  .faq__item{
    background:var(--white);margin-bottom:1.2rem;
    overflow:hidden;
  }
  .faq__q{
    padding:2.4rem 7rem 2.4rem 6rem;
    font-size:1.7rem;
    position:relative;letter-spacing:0.1rem;
    font-weight:400;
    margin:0;
    text-align:center;
    border-bottom:1px solid var(--mocha-pale);  /* 閉じている時も下線が見える */
    list-style:none;        /* native marker を消す */
    cursor:pointer;
    user-select:none;
  }
  .faq__q::-webkit-details-marker{display:none}  /* Safari の三角を消す */
  .faq__q::before{
    content:"Q";position:absolute;left:2rem;top:2.2rem;
    color:var(--mocha);font-family:"Lora",serif;
    font-size:2.2rem;
  }
  /* 開閉インジケーター +/− （右端） */
  .faq__q::after{
    content:"";position:absolute;right:2.4rem;top:50%;
    width:1.4rem;height:1.4rem;
    transform:translateY(-50%);
    background:
      linear-gradient(var(--mocha),var(--mocha)) center/100% 1px no-repeat,
      linear-gradient(var(--mocha),var(--mocha)) center/1px 100% no-repeat;
    transition:transform .25s ease;
  }
  .faq__item[open] .faq__q::after{
    /* 開くと縦棒を消して「−」に */
    background:linear-gradient(var(--mocha),var(--mocha)) center/100% 1px no-repeat;
  }
  /* 開いた時は下線をAの下に移す（Qの下線は消す） */
  .faq__item[open] .faq__q{border-bottom-color:transparent}
  .faq__a{
    padding:1.6rem 2.4rem 2.4rem 6rem;
    font-size:1.4rem;line-height:2;
    position:relative;letter-spacing:0.1rem;
    margin:0;
    border-bottom:1px solid var(--mocha-pale);  /* 開いた時はAの下に下線 */
  }
  .faq__a::before{
    content:"A";position:absolute;left:2rem;top:1.6rem;
    color:var(--mocha);font-family:"Lora",serif;
    font-size:2.2rem;
  }

  /* ============================================
     9. FIRST TIME
     ============================================ */
  .first-time__inner{
    display:grid;
    /* 左右を同じ固定幅にして、中央auto縦書きを真ん中に */
    grid-template-columns:40rem auto 40rem;
    grid-template-areas:"visual vtxt text";  /* HTMLの並び順と無関係に PC は 写真|縦書き|本文 */
    gap:4rem;
    justify-content:center;
    align-items:center;
  }
  .first-time__visual{grid-area:visual}
  .first-time__vtxt{grid-area:vtxt}
  .first-time__text{grid-area:text}
  .first-time__visual{aspect-ratio:1/1;overflow:hidden}
  .first-time__visual img{width:100%;height:100%;object-fit:cover;object-position:center calc(100% - -15px)}
  .first-time__vtxt{
    position:static;
    font-size:2.8rem;letter-spacing:0.35rem;
    line-height:2;font-weight:300;
    margin:0;white-space:nowrap;
  }
  .first-time__text p{
    font-size:1.4rem;line-height:2.2;margin:0 0 2rem;
  }
  /* Contact ブロック（For the First Time 内に統合） */
  .first-time__contact{
    margin-top:8rem;
    text-align:center;
  }
  .first-time__contact .cta__title{color:var(--white)}
  .first-time__contact .cta__text{color:var(--white)}
  .first-time__contact .cta__note{color:var(--white);opacity:.8}

  /* ============================================
     10. CTA
     ============================================ */
  .cta{
    text-align:center;background:var(--white);
    padding:12rem 3.2rem;position:relative;
    z-index:calc(100 - var(--i, 50));
  }
  .cta__title{
    font-family:"Noto Sans JP",sans-serif;
    font-size:2.6rem;font-weight:400;
    margin:1.5rem 0 2rem;
    letter-spacing:0.3rem;line-height:1.8;
  }
  .cta__text{
    font-size:1.4rem;line-height:2.2;
    margin:0 auto 2rem;max-width:72rem;
  }
  .cta__note{font-size:1.2rem;margin-top:3rem}

  /* ============================================
     11. MENU / PRICE
     ---  現サイト menu-item__ttl（Loraモカ+10pxボーダー）踏襲
     ============================================ */
  .price-wrap{max-width:84rem;margin:0 auto}
  .price-table{
    background:var(--white);
    color:var(--black);
    padding:0;margin-bottom:3.2rem;
    box-shadow:0 0 10rem 1rem rgba(0,0,0,.04);
  }
  .price-table__head{
    display:flex;align-items:center;justify-content:center;
    padding:2.4rem;
    font-family:"Lora",serif;
    font-size:2rem;letter-spacing:0.3rem;
    color:var(--mocha);
    border-bottom:5px solid var(--mocha-pale);
  }
  .price-table__head strong{
    font-size:3rem;letter-spacing:0.1rem;
    margin:0 1rem;font-weight:400;
  }
  .price-row{
    display:grid;grid-template-columns:1fr auto;gap:1.6rem;
    padding:2rem 3.2rem;
    border-bottom:1px solid var(--mocha-pale);
    align-items:center;
  }
  .price-row:last-child{border-bottom:none}
  .price-row__name{
    font-size:1.4rem;letter-spacing:0.1rem;
    position:relative;padding-left:2rem;
  }
  .price-row__name::before{
    content:"◆";position:absolute;left:0;
    color:var(--mocha);font-size:1.1rem;
  }
  .price-row__price{
    font-family:"Lora",serif;
    font-size:1.4rem;letter-spacing:0.1rem;
    text-align:right;white-space:nowrap;
  }
  .price-row__price .old{opacity:.4;text-decoration:line-through;margin-right:1rem}
  .price-row__price .now{font-size:2rem;color:var(--mocha)}
  .price-note{
    text-align:center;font-size:1.1rem;
    letter-spacing:0.1rem;line-height:2;
    margin:2.4rem 0 0;
  }

  /* ============================================
     12. ARTICLES
     ============================================ */
  .articles__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3.2rem}
  .article-card{
    background:var(--white);
    transition:transform .3s;
    display:block;
  }
  .article-card:hover{transform:translateY(-4px)}
  .article-card .thumb{
    aspect-ratio:16/9;background:#f0ebe3;
    position:relative;overflow:hidden;
  }
  .article-card .thumb::before{
    content:"ARTICLE";position:absolute;inset:0;
    display:flex;align-items:center;justify-content:center;
    font-family:"Lora",serif;font-size:1.1rem;letter-spacing:0.3rem;
    color:var(--mocha);opacity:.4;
  }
  .article-card__body{padding:2.4rem 2.8rem 3.2rem}
  .article-card__title{
    font-size:1.6rem;margin:0 0 1.2rem;
    line-height:1.8;letter-spacing:0.08rem;
    padding-bottom:1.2rem;
    border-bottom:1px solid var(--mocha-pale);
  }
  .article-card__excerpt{
    font-size:1.3rem;line-height:2;margin:0;
    color:var(--black);
    letter-spacing:0.05rem;
  }
  /* アーカイブページネーション */
  .archive-pagination{
    display:flex;justify-content:center;gap:1rem;
    margin-top:6rem;
    font-family:"Lora",serif;letter-spacing:0.1rem;
  }
  .archive-pagination .page-numbers{
    min-width:3.6rem;height:3.6rem;
    display:inline-flex;align-items:center;justify-content:center;
    border:1px solid var(--mocha-pale);
    color:var(--black);text-decoration:none;
    font-size:1.3rem;
    transition:background .2s;
  }
  .archive-pagination .page-numbers:hover{background:var(--mocha-pale)}
  .archive-pagination .page-numbers.current{
    background:var(--mocha);color:var(--white);
    border-color:var(--mocha);
  }
  .archive-pagination .page-numbers.dots{border-color:transparent}

  /* 一覧へリンク（primary = btn03 上段、secondary = テキストリンク 下段） */
  .articles__more{
    display:flex;flex-direction:column;
    justify-content:center;align-items:center;
    gap:2.4rem;
    margin-top:6rem;
  }
  .articles__more .btn03{max-width:28rem;width:100%}
  .articles__more-sub{
    font-family:"Lora",serif;
    font-size:1.3rem;letter-spacing:0.2rem;
    color:var(--mocha);
    text-decoration:none;
    padding-bottom:4px;
    border-bottom:1px solid var(--mocha-pale);
    transition:border-color .2s;
  }
  .articles__more-sub:hover{border-color:var(--mocha)}

  /* ============================================
     STORE INFO
     ============================================ */
  .store{background:var(--soft);padding:10rem 0 8rem;position:relative;z-index:calc(100 - var(--i, 50))}
  .store__inner{
    display:grid;grid-template-columns:1fr 1fr;gap:7rem;
    max-width:1120px;margin:0 auto;padding:0 32px;
  }
  .store__brand{margin-bottom:3rem}
  .store__brand img{height:4rem}
  .store__brand p{
    font-size:1.1rem;letter-spacing:0.5rem;
    margin-top:.8rem;color:var(--mocha);
  }
  .store dl{
    display:grid;grid-template-columns:10rem 1fr;
    gap:1.6rem 0rem;margin:0;
    font-size:1.3rem;letter-spacing:0.08rem;line-height:1.8;
  }
  .store dt{
    font-family:"Lora",serif;
    font-size:1.1rem;letter-spacing:0.3rem;color:var(--mocha);
    padding-top:2px;
  }
  .store dd{margin:0}
  .store__map{
    aspect-ratio:4/3;
    overflow:hidden;
    background:#f0ebe3;
  }
  .store__map iframe{
    width:100%;height:100%;
    display:block;
  }

  /* ============================================
     レスポンシブ
     ============================================ */
  @media (max-width:900px){
    .section{padding:8rem 0}
    main .wrap{padding:0 16px}
    .sec-ttl{font-size:2.4rem;letter-spacing:0.3rem;word-break:normal;overflow-wrap:break-word}
    .btn01,.btn03{max-width:none;width:100%}
    .arc-rings{display:none}  /* SPでは円弧装飾は非表示（横オーバーフロー防止） */
    /* お花はSPでも表示＆セクション跨ぎもPCと同じ仕様。
       横オーバーフローはbody側＋mainで封じる。
       overflow-x:clip なら overflow-y:visible のまま横だけクリップできる */
    html,body{overflow-x:hidden}
    main{overflow-x:clip}
    /* 各セクションでも横だけクリップ（縦は visible で跨ぎ花OK） */
    .section,.hero{overflow-x:clip;overflow-y:visible}
    .deco-flower{
      width:20rem !important;
      height:20rem !important;
    }
    /* ±位置は PC の bl/br/tl/tr のロジックを小サイズ用に縮小 */
    .deco-flower--tl{top:-8rem;left:-4rem}
    .deco-flower--tr{top:-8rem;right:-4rem}
    .deco-flower--bl{bottom:-8rem;left:-4rem;top:auto}
    .deco-flower--br{bottom:-8rem;right:-4rem;top:auto}

    /* --- HERO ---
       SP: 写真を全面背景、左にテキスト（上下中央寄せ）、右端に縦書き */
    .hero{min-height:80vh;position:relative}
    .hero__inner{
      grid-template-columns:1fr;
      grid-template-rows:1fr;
      padding:0;gap:0;min-height:80vh;
      position:relative;
    }
    .hero__visual{
      grid-area:1/1;
      width:100%;height:100%;
      min-height:unset;max-height:unset;
    }
    .hero__visual img{width:100%;height:100%;object-fit:cover;object-position:0 0}
    .hero--reverse .hero__visual{order:0}
    .hero__text{
      grid-area:1/1;
      position:relative;z-index:2;
      align-self:center;
      max-width:none;margin:0;
      padding:4rem 7.5rem 0rem 2rem;  /* 右側に縦書きスペースを確保 */
      background:none;  /* 背景色なし */
    }
    .hero--reverse .hero__text{padding:18rem 7.5rem 1rem 2rem}
    /* テキストは白＋控えめなドロップシャドウで視認性確保（ボタンと縦書きは除外） */
    .hero__area,
    .hero__title,
    .hero__title-jp,
    .hero__lead{
      color:#000;
      text-shadow:0 1px 3px rgb(255 255 255 / 70%);
    }
    .hero__copy .vtxt{color:#000;text-shadow:none}
    .hero__area{border-color:#000}
    /* 縦書きキャッチを右端に絶対配置 */
    .hero__copy{display:block;margin:0}
    .hero__copy .vtxt{
      position:absolute;
      top:0;right:0.5rem;
      writing-mode:vertical-rl;-webkit-writing-mode:vertical-rl;
      font-size:1.8rem;letter-spacing:0.4rem;line-height:1.9;
      color:var(--black);
      white-space:nowrap;
      z-index:3;
    }
    .hero__lead{
      font-size:1.2rem;line-height:1.8;letter-spacing:0.05rem;
      margin:0 0 2rem;
    }
    .hero__cta-wrap{text-align:center;margin:3rem -7.5rem 0 -2rem}  /* 左右paddingを打ち消してviewport全幅、buttonをその中で中央 */
    .hero__cta-wrap .btn01{max-width:24rem;width:100%;margin:0 auto;display:inline-block}
    .hero__title{font-size:5rem;margin:0 0 2rem}
    .hero__title-jp{font-size:1.6rem;margin-top:0}

    /* --- STARTING POINT (01) ---
       SP: First Timeと同じ構成（縦書き左ぶち抜き + 右上リスト + 右下写真(左寄せトリミング)） */
    .starting__inner{
      display:grid;
      grid-template-columns:auto minmax(0,1fr);
      grid-template-rows:auto auto;
      grid-template-areas:none;
      gap:1rem;
      justify-content:stretch;
      align-items:start;
    }
    .starting__catch{
      grid-column:1;grid-row:1 / span 2;
      writing-mode:vertical-rl;-webkit-writing-mode:vertical-rl;
      font-size:2rem;letter-spacing:0.3rem;line-height:1.9;
      white-space:nowrap;position:static;
      align-self:start;
      z-index:2;margin:0;
    }
    .starting__phrases{grid-column:2;grid-row:1;margin:0}
    .starting__phrases li{font-size:1.4rem;line-height:2.4;padding-left:1.6rem;white-space:normal;letter-spacing:0}
    .starting__lead{text-align:left;font-size:1.3rem}
    .starting__visual{
      grid-column:2;grid-row:2;
      aspect-ratio:16/9;
    }
    .starting__visual img{object-position:left center}

    /* --- APPROACH (02) ---
       SP: 縦書き（右・1列・改行なし）が本文と写真を貫いて縦長に流れる */
    .approach__inner{
      display:grid;
      grid-template-columns:minmax(0,1fr) auto;
      grid-template-rows:auto auto;
      gap:1rem;
      justify-content:stretch;
      align-items:start;
    }
    .approach__text{grid-column:1;grid-row:1}
    .approach__vtxt{
      grid-column:2;grid-row:1 / span 2;   /* 縦書きは右で2行ぶち抜き */
      writing-mode:vertical-rl;-webkit-writing-mode:vertical-rl;
      font-size:2rem;letter-spacing:0.3rem;line-height:1.9;
      white-space:nowrap;position:static;
      align-self:start;
      z-index:2;
    }
    .approach__visual{
      grid-column:1;grid-row:2;   /* 写真は左カラム → 左側を活かして右側がトリミング */
      aspect-ratio:16/9;
    }
    .approach__visual img{object-position:right center}  /* 右側を見せる */
    .approach__text p{padding-left:0;font-size:1.3rem;line-height:2.1;margin:0 0 1.4rem}

    /* --- 4 POINTS (03) --- */
    .points__grid{grid-template-columns:1fr}
    .point{padding:2.8rem 2rem}

    /* --- MENU & PRICE (04) --- */
    .price-row{padding:1.6rem 2rem}
    .price-table__head{padding:1rem 1.6rem;font-size:2.6rem}
    .price-table__head strong{font-size:3.8rem}
    .price-note{text-align:left}

    /* --- FLOW (05) ---
       SP: ステップ(左) + タイトル/本文(右) の2列、テキスト左寄せ */
    .flow__item{grid-template-columns:7rem 1fr;gap:1.6rem;text-align:left;padding:2rem 0;align-items:center}
    /* 縦線（PC同様、ステップの円の中心を貫く） */
    .flow__list::before{
      display:block;
      left:calc(3.5rem - .5px);   /* step列7remの中心 */
      top:4.5rem;bottom:4.5rem;   /* 最初と最後の円の中心まで */
    }
    .flow__step-num{width:5rem;height:5rem;font-size:1.8rem;margin:0 auto .4rem}
    .flow__step-label{font-size:.9rem}
    .flow__title{font-size:1.6rem;margin:0 0 .6rem}
    .flow__body{font-size:1.3rem;line-height:1.9}

    /* --- CASE STUDIES + VOICES (06-07) --- */
    .case{padding:3rem 2rem}
    .case__ba{grid-template-columns:1fr}
    .case__video-label{font-size:1.1rem;letter-spacing:0.2rem;padding:.4rem 1.1rem;top:1rem}
    .case__video-label--left{left:1rem}
    .case__video-label--right{right:1rem}
    .case__detail{grid-template-columns:1fr;text-align:center}
    .case__detail .avatar{margin:0 auto}
    .case__comment{text-align:left}
    .case__meta{padding:.8rem 0;gap:1.4rem;font-size:1.2rem}
    .cases-pair{grid-template-columns:1fr;gap:2rem}
    .voices__marquee{mask-image:none;-webkit-mask-image:none}  /* SPは左右ボカシ不要 */

    /* --- FAQ (08) --- */
    .faq__q{padding:2rem 5rem 2rem 5rem;font-size:1.5rem;text-align:left;line-height:2rem}
    .faq__q::before{left:1.6rem;top:1.8rem;font-size:1.8rem}
    .faq__q::after{right:1.6rem;width:1.2rem;height:1.2rem}
    .faq__a{padding:1.4rem 2rem 2rem 5rem;font-size:1.3rem}
    .faq__a::before{left:1.6rem;font-size:1.8rem}

    /* --- FIRST TIME (09) ---
       SP: Approachと同じ構成。縦書き(左1列ぶち抜き)+本文(右上)+写真(右下・左寄せトリミング) */
    .first-time__inner{
      grid-template-columns:auto minmax(0,1fr);
      grid-template-areas:none;
      grid-template-rows:auto auto;
      gap:1rem;
      justify-content:stretch;
      align-items:start;
    }
    .first-time__vtxt{
      grid-column:1;grid-row:1 / span 2;
      writing-mode:vertical-rl;-webkit-writing-mode:vertical-rl;
      font-size:2rem;letter-spacing:0.3rem;line-height:1.9;
      white-space:nowrap;position:static;
      align-self:start;
      z-index:2;
    }
    .first-time__text{grid-column:2;grid-row:1}
    .first-time__text p{font-size:1.3rem;line-height:2.1;margin:0 0 1.4rem}
    .first-time__visual{
      grid-column:2;grid-row:2;
      aspect-ratio:16/9;
    }
    .first-time__visual img{object-position:left center}
    .first-time__contact{margin-top:5rem}

    /* --- ARTICLES (10) ---
       SPは3件のみ表示（WP化時は posts_per_page で切り替え） */
    .articles__grid{grid-template-columns:1fr;gap:2.4rem}
    .articles__grid .article-card:nth-child(n+4){display:none}
    .articles__more{gap:1.8rem;margin-top:4rem}

    /* --- STORE --- */
    .store__inner{grid-template-columns:1fr;gap:4rem}
  }