@charset "UTF-8";
/*
 * ======================================
 * 株式会社 丸二タクシー — サイト固有CSS（site.css）
 * ======================================
 * 配色・フォントは scss/main.scss で @use "vars" with(...) により上書きし、
 * main.css にコンパイル済み（base=#003A97 / sub=#002E78 / accent=#C6A63C）。
 * 本ファイルは claude-design-output の固有レイアウト・余白・装飾を
 * mtx- プレフィックスで補完する（共通コンポーネントで再現できない差分のみ）。
 *
 * --------------------------------------
 * 追加クラス一覧（共通SCSS取り込み検討用）
 * --------------------------------------
 * 共通見出し/ボタン
 *   .mtx-eyebrow / .mtx-sec-title / .mtx-sec-head / .mtx-sec-lead - Barlow金ラベル＋Zen Kaku青見出し
 *   .mtx-btn(--gold/--white/--blue/--line/--tel/--full/--sm) - 角丸14pxのCTAボタン群
 *   .mtx-jphead - Zen Kaku Gothic New 見出しフォント適用ヘルパー
 * ヘッダー/フッター/共通帯
 *   .mtx-header(__bar/__inner/__logo) - 上部ゴールドバー付きstickyヘッダー
 *   .mtx-nav(__item) / .mtx-tel(__num) / .mtx-map-btn - 1行ナビ＋電話＋地図アイコン
 *   .mtx-cta-band - 写真背景＋暗幕のお問い合わせCTA帯
 *   .mtx-side-cta - 画面右端固定の縦書きCTAボタン
 *   .mtx-footer(-body/-bottom/__col/__logo/__title/__links/__map) - 濃紺3カラムフッター
 * ページ固有
 *   TOP     : .mtx-hero / .mtx-dispatch / .mtx-about / .mtx-lineup / .mtx-service / .mtx-recruit-band / .mtx-news
 *   下層     : .mtx-phero / .mtx-* （各ページで追記）
 *
 * --------------------------------------
 * 共通SCSSに不足していたもの（5分類で整理）
 * --------------------------------------
 * ・構造不足：上部ゴールドバー＋sticky＋1行ナビ＋積み上げ電話表示のヘッダー、
 *             画面右端固定の縦書きCTA（sp-fixed-barは下部固定のみ）
 * ・装飾パターン不足：写真背景＋暗幕のCTA帯、丸内マスコット、金グラデ・青の車両カード
 * ・値の粒度不足：design固有の余白・フォント（13.5/14.5/21/24/30/34/64px 等）が
 *             共通utilityの刻みに無く、セクション単位で個別指定
 */

/* ============================= 基本トークン ============================= */
:root{
  --mtx-blue:#003A97;
  --mtx-blue-dark:#002E78;
  --mtx-gold:#C6A63C;
  --mtx-gold-text:#C29A26;
  --mtx-gold-grad:linear-gradient(135deg,#D9C05F,#C6A63C);
  --mtx-txt:#1e2233;
  --mtx-txt-sub:#5a5f70;
}

/* body 字間の微調整 */
body{ letter-spacing:.02em; }

/* スマホのみ表示する改行 */
.mtx-sp-br{ display:none; }
@media(max-width:640px){ .mtx-sp-br{ display:inline; } }
/* PCのみ表示する改行（スマホで改行なし） */
@media(max-width:640px){ .mtx-pc-br{ display:none; } }

/* 見出しは Zen Kaku Gothic New */
.mtx-jphead,
.mtx-sec-title,
.mtx-hero__title,
.mtx-hero__lead{ font-family:"Zen Kaku Gothic New",sans-serif; }

/* ============================= 共通見出し ============================= */
.mtx-sec-head{ text-align:center; margin-bottom:44px; }
.mtx-eyebrow{
  font-family:"Barlow",sans-serif; font-weight:800; font-size:13px;
  letter-spacing:.22em; color:var(--mtx-gold-text); text-transform:uppercase;
  margin:0 0 12px;
}
.mtx-sec-title{
  font-weight:900; font-size:30px; color:var(--mtx-blue); line-height:1.4; margin:0;
}
.mtx-sec-lead{
  font-size:15px; color:var(--mtx-txt-sub); line-height:1.9;
  max-width:640px; margin:12px auto 0;
}
@media(max-width:640px){
  .mtx-eyebrow{ text-align:center; }
  .mtx-sec-title{ font-size:23px; text-align:center; text-wrap:balance; word-break:auto-phrase; }
  .mtx-sec-lead{ text-align:left; }
}

/* ============================= 共通ボタン ============================= */
.mtx-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:"Zen Kaku Gothic New",sans-serif; font-weight:700; font-size:16px;
  line-height:1.3; text-decoration:none; border:none; cursor:pointer;
  padding:16px 30px; border-radius:14px; transition:transform .3s ease,opacity .3s ease,box-shadow .3s ease;
}
.mtx-btn i{ font-size:.95em; }
.mtx-btn:hover{ transform:translateY(-2px); opacity:.95; }
.mtx-btn--gold{ background:var(--mtx-gold-grad); color:#fff; box-shadow:0 6px 18px rgba(160,128,40,.3); }
.mtx-btn--white{ background:#fff; color:var(--mtx-blue); box-shadow:0 6px 18px rgba(0,0,0,.14); }
.mtx-btn--blue{ background:var(--mtx-blue); color:#fff; }
.mtx-btn--sub{ background:var(--mtx-blue-dark); color:#fff; }
.mtx-btn--line{ background:#06C755; color:#fff; box-shadow:0 5px 14px rgba(6,199,85,.35); }
.mtx-btn--tel{ font-family:"Barlow",sans-serif; font-weight:700; font-size:20px; }
.mtx-btn--full{ width:100%; }
.mtx-btn--sm{ padding:12px 22px; font-size:14px; border-radius:12px; }
.mtx-btn--static{ cursor:default; }
.mtx-btn--static:hover{ transform:none; opacity:1; }

/* ============================= ヘッダー ============================= */
.mtx-header{
  position:sticky; top:0; z-index:100; background:#fefefe;
  border-bottom:1px solid rgba(19,26,134,.08); box-shadow:0 2px 14px rgba(19,26,134,.06);
}
.mtx-header__bar{ height:5px; background:linear-gradient(90deg,#D9C05F,#C6A63C,#B8952F,#C6A63C,#D9C05F); }
.mtx-header__inner{
  max-width:1240px; height:auto; padding:12px 24px; gap:22px; flex-wrap:wrap; row-gap:8px;
}
.mtx-header__logo img{ height:40px; width:auto; display:block; }

.mtx-nav{ gap:2px; align-items:center; }
.mtx-nav__item a{
  flex-direction:row; align-items:center; padding:10px 13px; border-radius:10px;
  font-family:"Zen Kaku Gothic New",sans-serif; font-weight:700; font-size:14.5px;
  color:var(--mtx-txt); white-space:nowrap; transition:background .25s ease,color .25s ease;
}
.mtx-nav__item a::after{ display:none; }
.mtx-nav__item a:hover{ background:rgba(198,166,60,.09); color:var(--mtx-gold-text); opacity:1; }
.mtx-nav__item.header__nav-item--current a{ color:var(--mtx-gold-text); background:rgba(198,166,60,.1); }

.mtx-header__right{ gap:12px; }
.mtx-tel{ display:flex; flex-direction:column; align-items:flex-end; text-decoration:none; line-height:1.05; }
.mtx-tel__num{ font-family:"Barlow",sans-serif; font-weight:700; font-size:23px; color:var(--mtx-blue); letter-spacing:.01em; }
.mtx-map-btn{
  display:flex; align-items:center; justify-content:center; width:44px; height:44px;
  border-radius:12px; border:2px solid rgba(19,26,134,.14); color:var(--mtx-blue);
  font-size:19px; text-decoration:none; flex:none; transition:border-color .25s ease;
}
.mtx-map-btn:hover{ border-color:var(--mtx-gold); color:var(--mtx-blue); }

@media(max-width:1200px){
  .mtx-nav__item a{ font-size:13.5px; padding:9px 9px; }
  .mtx-tel__num{ font-size:19px; }
}
@media(max-width:1100px){
  .mtx-header__inner{ padding:10px 16px; }
}
@media(max-width:640px){
  .mtx-header__logo img{ height:32px; }
}

/* ============================= 下層ページ共通ヒーロー ============================= */
.mtx-phero{ position:relative; min-height:300px; display:flex; align-items:center; overflow:hidden; }
.mtx-phero__bg{ position:absolute; inset:0; z-index:0; }
.mtx-phero__bg img{ width:100%; height:100%; object-fit:cover; }
.mtx-phero__overlay{ position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(100deg,rgba(0,0,0,.5),rgba(0,0,0,.24)); }
.mtx-phero__inner{ position:relative; z-index:2; max-width:1160px; margin:0 auto; width:100%; padding:36px 24px; }
.mtx-phero__en{ font-family:"Barlow",sans-serif; font-weight:800; font-size:13px; letter-spacing:.26em; color:#DCBE3A; margin:0 0 10px; }
.mtx-phero__title{ font-family:"Zen Kaku Gothic New",sans-serif; font-weight:900; font-size:40px; color:#fff; margin:0; text-shadow:0 3px 20px rgba(15,21,96,.5); }
@media(max-width:640px){
  .mtx-phero{ min-height:220px; }
  .mtx-phero__title{ font-size:28px; }
}

/* ============================= セクション区切り線 ============================= */
.mtx-divider{ background:#fefefe; }
.mtx-divider__line{ max-width:900px; margin:0 auto; border-top:1px solid rgba(19,26,134,.12); }

/* ============================= 共通フロー（STEP縦タイムライン） ============================= */
.mtx-flow{ max-width:820px; margin:0 auto; position:relative; }
.mtx-flow__line{ position:absolute; left:31px; top:20px; bottom:20px; width:2px; background:repeating-linear-gradient(#C6A63C,#C6A63C 6px,transparent 6px,transparent 12px); }
.mtx-flow__item{ display:flex; gap:28px; align-items:flex-start; position:relative; padding:14px 0; }
.mtx-flow__badge{ flex:none; width:64px; height:64px; border-radius:50%; background:#fff; border:3px solid #C6A63C; display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:1; box-shadow:0 4px 12px rgba(160,128,40,.2); }
.mtx-flow__step{ font-family:"Barlow",sans-serif; font-weight:700; font-size:9px; letter-spacing:.12em; color:#C6A63C; }
.mtx-flow__num{ font-family:"Barlow",sans-serif; font-weight:800; font-size:24px; line-height:1; color:var(--mtx-blue); }
.mtx-flow__card{ flex:1; background:#fff; border-radius:16px; padding:22px 28px; box-shadow:0 6px 18px rgba(19,26,134,.06); }
.mtx-flow__ctitle{ font-family:"Zen Kaku Gothic New",sans-serif; font-weight:900; font-size:18px; color:var(--mtx-blue); margin:0 0 8px; }
.mtx-flow__ctext{ font-size:13.5px; line-height:1.9; color:#4a4f66; margin:0; }
@media(max-width:640px){
  .mtx-flow__item{ gap:14px; padding:9px 0; }
  .mtx-flow__badge{ width:52px; height:52px; }
  .mtx-flow__step{ font-size:8px; }
  .mtx-flow__num{ font-size:20px; }
  .mtx-flow__line{ left:26px; top:16px; bottom:16px; }
  .mtx-flow__card{ padding:16px 18px; border-radius:14px; }
  .mtx-flow__ctitle{ font-size:16px; margin:0 0 6px; }
  .mtx-flow__ctext{ font-size:13px; line-height:1.8; }
  .mtx-cta-band__head{ font-size:23px; }
  .mtx-cta-band__sub{ font-size:14px; text-align:left; }
}

/* ============================= お問い合わせCTA帯 ============================= */
.mtx-cta-band{
  position:relative; padding:64px 24px; text-align:center;
  background-size:cover; background-position:center; overflow:hidden;
}
.mtx-cta-band::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(135deg,rgba(0,26,64,.58),rgba(0,20,50,.62));
}
.mtx-cta-band__inner{ max-width:820px; margin:0 auto; position:relative; z-index:1; }
.mtx-cta-band__head{
  font-family:"Zen Kaku Gothic New",sans-serif; font-weight:900; font-size:30px; color:#fff;
  margin:0 0 10px; line-height:1.4; text-shadow:0 2px 12px rgba(120,90,10,.5);
}
.mtx-cta-band__sub{ font-size:15px; color:rgba(255,255,255,.92); margin:0 0 26px; line-height:1.8; }
.mtx-cta-band__btns{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

/* ============================= 右サイド固定CTA ============================= */
.mtx-side-cta{
  position:fixed; top:50%; right:0; transform:translateY(-50%); z-index:80;
  display:flex; flex-direction:column; gap:10px; align-items:flex-end;
}
.mtx-side-cta__item{
  display:flex; align-items:center; gap:9px; writing-mode:vertical-rl;
  font-family:"Zen Kaku Gothic New",sans-serif; font-size:14px; padding:15px 16px;
  border-radius:14px 0 0 14px; text-decoration:none; color:#fff; letter-spacing:.06em;
  transition:transform .3s ease;
}
.mtx-side-cta__item i{ writing-mode:horizontal-tb; text-orientation:upright; font-size:1.05em; }
.mtx-side-cta__item:hover{ transform:translateX(-3px); }
.mtx-side-cta__item--gold{ background:linear-gradient(135deg,#C6A63C,#AF8E2E); font-weight:900; box-shadow:-4px 6px 18px rgba(19,26,134,.18); }
.mtx-side-cta__item--gold:hover{ background:linear-gradient(135deg,#AF8E2E,#927624); }
.mtx-side-cta__item--blue{ background:var(--mtx-blue-dark); font-weight:700; box-shadow:-4px 6px 18px rgba(19,26,134,.24); }
.mtx-side-cta__item--blue:hover{ background:#001c48; }
@media(max-width:896px){ .mtx-side-cta{ display:none; } }

/* ============================= フッター ============================= */
.mtx-footer-body{ padding:52px 24px 0; }
.mtx-footer-body .footer-body__inner{
  max-width:1240px; grid-template-columns:1.1fr 1fr 1.2fr; gap:44px; align-items:start;
  padding:0 0 40px;
}
.mtx-footer__logo{
  display:inline-flex; align-items:center; background:#fff; padding:10px 16px;
  border-radius:12px; margin-bottom:18px;
}
.mtx-footer__logo img{ height:34px; width:auto; display:block; }
.mtx-footer-body .footer-body__info{ font-size:13.5px; line-height:2; color:rgba(255,255,255,.82); margin:0; }
.mtx-footer-body .footer-body__info a{ color:#fff; text-decoration:none; }
.mtx-footer__title{
  font-family:"Barlow",sans-serif; font-weight:700; font-size:12px; letter-spacing:.16em;
  color:var(--mtx-gold); margin:0 0 16px;
}
.mtx-footer__links{ display:flex; flex-direction:column; gap:11px; }
.mtx-footer__links a{ color:rgba(255,255,255,.85); font-size:14px; text-decoration:none; transition:color .25s ease; }
.mtx-footer__links a:hover{ color:#fff; }
.mtx-footer__map{ border-radius:12px; overflow:hidden; box-shadow:0 6px 18px rgba(0,0,0,.25); }
.mtx-footer-bottom{ background:var(--mtx-blue-dark); border-top:1px solid rgba(255,255,255,.12); padding:20px 0; text-align:center; }
.mtx-footer-bottom .footer-bottom__copyright{ font-family:"Barlow",sans-serif; font-size:11.5px; letter-spacing:.08em; color:rgba(255,255,255,.5); margin:0; }

@media(max-width:896px){
  .mtx-footer-body .footer-body__inner{ grid-template-columns:1fr; gap:32px; }
}
/* ハンバーガー表示時（1100px以下）はフッターのサイトマップナビを非表示 */
@media(max-width:1100px){
  .mtx-footer__col--nav{ display:none; }
}
@media(max-width:640px){
  .mtx-footer__col{ text-align:center; }
  .mtx-footer__links{ align-items:center; }
}

/* ============ スマホ上書き（末尾で確実に適用） ============ */
@media(max-width:640px){
  .mtx-cta-band__head{ font-size:23px; }
  .mtx-cta-band__sub{ font-size:14px; text-align:left; }
}

/* ============ スマホ下部固定バー分の余白確保（896px以下） ============ */
@media(max-width:896px){
  /* コピーライト帯（濃紺）を固定バー分だけ下に伸ばし、白い余白を出さずに
     コピーライト文字が固定バーに隠れないようバランスを取る */
  .mtx-footer-bottom{ padding-bottom:calc(20px + 52px + env(safe-area-inset-bottom)); }
  /* 「トップへ戻る」ボタンを固定バーの上へ */
  .page-top{ bottom:calc(66px + env(safe-area-inset-bottom)); }
}