@charset "UTF-8";
/* ============================================================
   乗り場案内ページへの導線バナー（.platform-banner）
   令和8年度改修「乗り場案内ページへの導線の改善」
   採用案: 1c（トップ ルート検索窓）/ 2a（運航状況PC）/ 3a（運航状況SP）

   設置先: wp-content/themes/tokyoisland/css/platform_banner.css
   読み込み: wp-content/mu-plugins/umisora-platform-banner.php
             （統合版CSS tokyo-island-pages より後に出力される）

   このファイルは compass / webpack のビルド対象外なので、
   ビルドを回しても上書き・削除されません
   （compass は sass/ 配下のみ、CleanWebpackPlugin は dist/ 配下のみを対象）。

   既存ルールの上書き箇所（詳細度は同じ。読み込み順で上書きしている）
     .mv__platform          … css/main.css
     .mv__platform a        … css/style.css
     .mv__button button     … css/style.css（280px → 336px）
     .info__detail-sup      … css/traffic.css（:has() で詳細度が上なので順序に依存しない）
   ============================================================ */

:root {
  --umisora-navy:        #005BAC; /* 主導線・見出し */
  --umisora-navy-dark:   #004F8C; /* hover */
  --umisora-navy-table:  #1B4F9E; /* 表ヘッダー（既存） */
  --umisora-cyan:        #29ABE2; /* アクセント */
  --umisora-yellow:      #F5D93F; /* 検索ボタン（既存・変更しない） */
  --umisora-bg-tint:     #EAF4FB; /* バナー背景 */
  --umisora-bg-tint-hv:  #D9ECF8; /* バナー hover */
  --umisora-border:      #D5DEE6;
  --umisora-ink:         #333333;
  --umisora-ink-sub:     #445566;
  --umisora-link:        #0068B7;

  /* 検索ボタンと 1c バナーの共通幅。既存は 280px。
     280px では補足文（17文字）がアイコンの右に収まらないため +20% にストレッチする。
     ここ1箇所を変えると検索ボタンとバナーの両方が追従する。 */
  --umisora-search-btn-w: 336px;
}

/* ---------- 共通（1c を基準形とする） ---------- */
a.platform-banner {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 44px;               /* タップターゲット 44px 以上を厳守 */
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--umisora-bg-tint);
  color: var(--umisora-navy);
  text-align: left;               /* 親の text-align:center を打ち消す */
  text-decoration: none;
  transition: background-color .15s ease;
}
a.platform-banner:hover,
a.platform-banner:active {
  background: var(--umisora-bg-tint-hv);
  color: var(--umisora-navy);     /* 文字色は変えない */
  text-decoration: none;
}
a.platform-banner:focus-visible {
  outline: 2px solid var(--umisora-link);
  outline-offset: 2px;
}
/* :focus-visible 未対応ブラウザ向けフォールバック */
a.platform-banner:focus {
  outline: 2px solid var(--umisora-link);
  outline-offset: 2px;
}
a.platform-banner:focus:not(:focus-visible) {
  outline: none;
}

.platform-banner__icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--umisora-navy);
  color: #FFF;                    /* SVG は currentColor で追従 */
}
.platform-banner__icon svg {
  display: block;
  width: 24px;
  height: 24px;
}

.platform-banner__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.platform-banner__title {
  font-size: 16px;
  font-weight: 800;
  line-height: 1.35;
}
.platform-banner__note {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--umisora-ink-sub);
}
.platform-banner__chev {
  flex: 0 0 auto;
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
}

/* ---------- SP での基準形の縮小（1c / 2a 共通） ---------- */
@media screen and (max-width: 767px) {
  .platform-banner__icon      { width: 40px; height: 40px; }
  .platform-banner__icon svg  { width: 22px; height: 22px; }
  .platform-banner__title     { font-size: 15px; }
  .platform-banner__note      { font-size: 11px; }
}

/* ---------- 1c: トップ ルート検索窓 ---------- */
/* 幅・位置は黄色の「検索」ボタン（.mv__button button）に完全に揃える。
   検索ボタンは PC / SP とも固定幅・中央寄せなのでバナーも同値にする。 */
.mv__platform--banner {
  padding-top: 0;                 /* 既存 .mv__platform の padding-top:16px を打ち消し、検索ボタンに寄せる */
}
/* 既存の検索ボタン幅（style.css の .mv__button button { width: 280px }）を
   バナーと共通の変数で上書きする。※既存要素への変更なので適用は要判断。 */
.mv__button button {
  width: var(--umisora-search-btn-w);
  max-width: 100%;
}

a.platform-banner--top {
  width: var(--umisora-search-btn-w);
  max-width: 100%;                /* 極端に狭い幅ではカード幅に従う */
  margin: 0 auto;                 /* 検索ボタンと同じ中央寄せ */
  gap: 12px;
  padding: 13px 16px;
}
/* パワポ 1c どおりアイコンの右に主ラベル＋補足文を積む。
   アイコンを 40px に、字送りを詰めて補足文を1行に収める。 */
a.platform-banner--top .platform-banner__icon     { width: 40px; height: 40px; }
a.platform-banner--top .platform-banner__icon svg { width: 22px; height: 22px; }
a.platform-banner--top .platform-banner__note     {
  letter-spacing: .02em;          /* 既存 body の 0.15em だと1行に収まらない */
}
/* PC の間隔は .mv__button の padding-bottom:32px のみ＝検索ボタン下 32px */

@media screen and (max-width: 767px) {
  /* SP は .mv__button の padding-bottom が 25px に縮むため、
     誤タップ防止に 12px 足して合計 37px 確保する */
  a.platform-banner--top { margin-top: 12px; }
}

/* ---------- 2a: 運航状況（PC）表の直下・凡例の下 ---------- */
/* 既存 css/traffic.css の縦の刻み
      8px … .info__detail-sample padding-bottom      … 凡例内（アイコン行→注記）
     16px … .info__detail-table margin-bottom
            .info__detail-sample padding-top          … 表と凡例をつなぐ刻み
     40px … .info__detail-text padding-bottom
            .info__detail-title padding-bottom 20 + margin-bottom 20
                                                      … 文章ブロックの下（テキスト→次の要素）
     50px … .info__detail-sup padding-bottom          … 「〇〇行き」→「〇〇発」の区切り
     64px … .info__detail.pc padding-top              … セクションの区切り

   「※運航状況が…」は文章ブロックなので、その下は既存の文章ブロック用の刻み 40px を使う
   （16px だと文字情報が渋滞する）。バナーの下はセクションの区切り 64px。
   40px : 64px ＝ 1:1.6 でバナーは表側のグループに寄って見える。

   横幅・横位置は 400px（お問い合せ先の1カラム幅）・テーブル左端揃えで確定。 */

/* .info__detail-sup の 50px は「〇〇行き」→「〇〇発」の区切り用。
   後ろにバナーが続くときは文章ブロックの下の刻み 40px に置き換える。
   :has() を使わない場合は PHP 側で --tight クラスを付けてもよい。 */
.info__detail-sup:has(+ .platform-banner--pc),
.info__detail-sup.info__detail-sup--tight {
  padding-bottom: 40px;
}

/* テーブル全幅では横に長すぎるため、テーブル幅の半分にしてテーブルの左端に揃える。
   実測 1024px で 509px / 1280px 以上で 600px。 */
/* 幅 400px の根拠（css/traffic.css の既存値から導出）
     .info__contact-list { max-width: 800px; margin: auto }  ← この区画の内容幅の基準
     .info__contact-item { width: 50% }                      → 800 / 2 = 400px（カラム）
     .info__contact-item { padding: 0 12px }
     .info__contact-box  { width: 100% }                     → 400 - 24 = 376px（白カード）
   バナー直下の「お問い合せ先」は 800px を2カラムに割った 400px モジュールで組まれている。
   バナーもこのモジュールに合わせ、ビューポートに依らない固定 400px とする。
   ・1024px でも 1920px でも同じ幅になり、折り返しの心配がない
   ・テーブル 1200px に対して 33.3%（＝ほぼ1/3）
   不採用案: 表の列境界に合わせる 35.5%（列は % 指定 14 + 7 + 7.5 + 7 ＝「出発時刻」列の右端）。
   1200px で 426px になるが 1018px で 361px となり、折り返し下限 362px を割る。
   固定 px にすれば回避できるが 1024px でグリッドから外れ、根拠が失われるため見送り。 */
a.platform-banner--pc {
  width: 400px;
  /* 補足文が1行に収まる下限は実測 362px。どの指定でもここは割らせない。 */
  min-width: 362px;
  max-width: 100%;
  padding: 14px 18px;
  /* 上0（sup側の40pxが担う）/ 下64px / 左右は左端揃え（margin-left:0 / margin-right:auto） */
  margin: 0 auto 64px 0;
}

/* ---------- 3a: 運航状況（SP）便リスト末尾・更新時刻の上 ---------- */
/* SP は紺塗りにして視認性を上げる（1c の淡色バナーと異なる）。
   補足文は出さない（主ラベルのみ）。

   既存 css/traffic.css（SP）の縦の刻み
      8px … .info__detail-timestamp / -caution padding-bottom … フッター内の行送り
     16px … .info__detail-table（便カード）margin-bottom        … リストの項目間
     12/16px … .info__detail-thereaback margin                  … 方面切替の上下
     20px … .info__detail-title padding-bottom + margin-bottom
     40px … .info__detail-text padding-bottom
            .info__detail-cycle padding-bottom                  … ブロックの区切り
     32px … .info__detail padding-top

   ・上 4px … 便カード間の 16px より詰めてリストの締めに見せる（引継書 §4.2）
   ・下 20px … 改修前のリスト→フッター間隔は最後の便カードの margin-bottom = 16px。
               紺ベタのボタンは白カードより重いので一段上げて 20px（見出しの下と同値）。
               40px（ブロックの区切り）は構造的に別物が始まる箇所の値で、
               更新時刻は上のリストの更新時刻＝同じブロックの続きなので離しすぎになる。
   ・padding 16px 24px … 便カード .info__detail-table の padding と同値。
                         アイコンの左端が便カード内テキストの左端と揃う。 */
a.platform-banner--sp {
  margin: 4px 0 20px;
  min-height: 48px;               /* SP 固定・全幅ボタンは 48px 目安 */
  padding: 16px 24px;
  /* 3a は補足文なしの1行ボタンなので、バナー型の 12px ではなく
     引継書 §1.2 のピル型 999px を使う（既存の検索ボタン 32px・
     「事業者の詳細」ボタン 50px と同じボタン系の仕上げ）。 */
  border-radius: 999px;
  background: var(--umisora-navy);
  color: #FFF;
  /* 引継書 §4.6 の box-shadow: 0 3px 0 rgba(0,60,110,.25) は入れない。
     運航状況ページ（#info）内で box-shadow を持つ要素は他に1つもなく、
     便カード（白＋1px 紺ボーダー・角丸28px）も「事業者の詳細」ボタン
     （透明＋1px 紺ボーダー・角丸50px）もフラットなヘアライン仕上げのため、
     影を足すとこのバナーだけが浮いて見える。 */
}
a.platform-banner--sp:hover,
a.platform-banner--sp:active {
  background: var(--umisora-navy-dark);
  color: #FFF;
}
.platform-banner--sp .platform-banner__icon {
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;               /* 丸背景なし */
}
.platform-banner--sp .platform-banner__icon svg {
  width: 22px;
  height: 22px;
}
.platform-banner--sp .platform-banner__title {
  font-size: 15px;
  font-weight: 800;
  color: #FFF;
}
/* 3a は補足文を出さないため .platform-banner__note のスタイルは持たない
   （マークアップ側で出力しない。CSS で display:none にはしない）。 */