@charset "UTF-8";
/* ==========================================================================
   iPhone Duo（折りたたみデバイス）対応
   --------------------------------------------------------------------------
   作成日：2026-09-11
   読み込み：includes/duo-support.php（common-custom.css より後）
   前提：header.php の viewport に viewport-fit=cover を指定していること

   iPhone Duo のビューポート幅（CSSピクセル）
     外側ディスプレイ   466 × 678   → 既存SPレイアウト（767px以下）
     内側ディスプレイ   669 × 951   → 縦持ちは既存SPレイアウト
                        951 × 669   → 横持ちはPCレイアウト
     Split View         約 460〜475 → 既存SPレイアウト

   このファイルの記述はすべて「対応していない端末では何も起きない」条件付き。
   既存の PC / SP / タブレット表示は変えない。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. セーフエリア
   viewport-fit=cover で画面の隅まで描画されるため、固定ヘッダー・ドロワー・
   本文をノッチ／角丸の内側に収める。横持ち（951×669）で左右のインセットが効く。
   -------------------------------------------------------------------------- */
:root {
  --duo-safe-left: env(safe-area-inset-left, 0px);
  --duo-safe-right: env(safe-area-inset-right, 0px);
  --duo-safe-bottom: env(safe-area-inset-bottom, 0px);
}

.l-page {
  padding-left: var(--duo-safe-left);
  padding-right: var(--duo-safe-right);
}

.m-header {
  padding-left: var(--duo-safe-left);
  padding-right: var(--duo-safe-right);
}

.m-drawer {
  padding-left: var(--duo-safe-left);
  padding-right: var(--duo-safe-right);
}

.m-drawer__inner {
  padding-bottom: calc(var(--duo-safe-bottom) + 24px);
}

/* --------------------------------------------------------------------------
   2. 折り目（ヒンジ）回避
   CSS Viewport Segments 対応ブラウザだけが反応する。非対応ブラウザでは
   ブロックごと無視される。
   Apple Tech Talk「Design for iPhone Duo」の
   "keep interactive elements away from the hinge" に対応する。
   -------------------------------------------------------------------------- */
@media (horizontal-viewport-segments: 2) {
  :root {
    --duo-segment-width: env(viewport-segment-width 0 0, 50%);
    --duo-fold-start: env(viewport-segment-right 0 0, 50%);
    --duo-fold-end: env(viewport-segment-left 1 0, 50%);
    --duo-fold-width: calc(var(--duo-fold-end) - var(--duo-fold-start));
  }

  /* 2カラムはヒンジ位置で割る（折り目がコンテンツを横切らない） */
  .l-2-columns,
  .l-2-columns--reverse {
    grid-template-columns: var(--duo-segment-width) 1fr;
    column-gap: var(--duo-fold-width);
  }

  /* CTA・フッターは折り目をまたがせない */
  .m-cta__inner,
  .m-footer__inner {
    max-width: min(var(--duo-segment-width), 100%);
    margin-left: auto;
    margin-right: auto;
  }

  .m-header__inner {
    max-width: none;
  }

  /* 3カラムは中央列が折り目に重なるので2カラムへ */
  .m-top-services__list {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 部分的に折った状態（縦方向に2セグメント）では固定ヘッダーを解除する */
@media (vertical-viewport-segments: 2) {
  .m-header {
    position: absolute;
  }
}

/* --------------------------------------------------------------------------
   3. 展開時（768〜1160px）の文字サイズ下限
   style.css の @media (max-width: 1160px) にある
   html { font-size: calc(var(--_font-size) / var(--_width) * 100vw) }
   を上書きする。951px では 13.1px まで縮むため下限を 13.5px に置く。

   (any-pointer: coarse) かつ (any-hover: none) ＝ マウス・トラックパッドが
   一切ない端末だけが対象。PCブラウザの幅を狭めても発火しない。
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1160px) and (any-pointer: coarse) and (any-hover: none) {
  html {
    font-size: max(calc(var(--_font-size) / var(--_width) * 100vw), 13.5px);
  }

  /* 767px超だとPC用のホバー前提の指定になるが Duo は 951px でもタッチ操作。
     最小タップ領域 44px を確保する。 */
  .m-header__link,
  .m-header__menu-link,
  .m-footer__col-title-link,
  .m-footer__legal-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* --------------------------------------------------------------------------
   4. ポーズ変更中のちらつき抑制
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .l-page,
  .m-header {
    transition: padding 120ms ease-out;
  }
}