/* 杉戸タクシー ブランドA　全ページ共通（ヘッダー・メニュー・フッター・お問い合わせ・右下の MENU・色と書体の決まり） すべてのページが読む。トップだけの見た目は brand-top.css。分け方は 実装/split_brand.py */ @charset "UTF-8"; /* ============================================================ 杉戸タクシー ブランドA（2026-09-25 殿採用） 決まりの正本: 顧客/杉戸タクシー/トップのくまWeb似せ過ぎ解消_20260925/A案やり直し/アートディレクション.md 形は「道を走る一台」: 屋根の表示灯（行灯の台形）・車の窓（左上だけ丸い）・センターラインの破線・ロゴの環・横断歩道・駅名標 色: 紺 / 車体の黒 / 生成り / 白 / 営業ナンバーの緑 / 表示灯のクリーム。影はずらした硬い影だけ。 すべて .st-brand-a（ に付ける）の下に書き、既存の指定より強くする。 ============================================================ */ /* 見出しの数字だけ（1953・73・500 など）。和文の看板文字と高さをそろえるため大きめに当てる */ :root { --st-navy: #10275A; --st-black: #15171B; --st-paper: #F2EEE4; --st-white: #FFFFFF; --st-green: #1F8A47; --st-lamp: #FFF1BF; --st-f-display: "St Digits", "M PLUS Rounded 1c", "Zen Kaku Gothic New", sans-serif; /* 見出し: 数字は細長い欧文、和文は丸い太字（殿の直しで見やすい形に） */ --st-f-head: "M PLUS Rounded 1c", "Zen Kaku Gothic New", sans-serif; --st-f-body: YakuHanJP, "Zen Kaku Gothic New", "Yu Gothic", sans-serif; --st-f-en: "Barlow Condensed", "Zen Kaku Gothic New", sans-serif; --st-shadow: .4rem .4rem 0 var(--st-navy); /* 版ずれの硬い影 */ --st-shadow-lg: .6rem .6rem 0 var(--st-navy); } /* 行灯の台形（上が狭く、上の2隅だけ丸い）。札・ボタン・メーターに使う */ .st-brand-a .st-lamp-shape { clip-path: polygon(8% 0, 92% 0, 100% 100%, 0 100%); border-radius: .6rem .6rem 0 0 } /* ------------------------------------------------------------ ヘッダー（上端からぶら下がる紺の箱） ------------------------------------------------------------ */ .st-brand-a .st-nav__main__inner { background: var(--st-navy) !important; border-radius: 0 0 0 2.8rem !important; box-shadow: none !important; } .st-brand-a .st-nav__main__inner::before, .st-brand-a .st-nav__main__inner::after { display: none !important } .st-brand-a .st-nav__list__txt-main { display: flex !important; align-items: center; justify-content: center; gap: .5rem; font-family: var(--st-f-en) !important; font-weight: 700 !important; font-style: normal !important; font-size: 1.15rem !important; letter-spacing: .08em !important; text-transform: uppercase; color: #fff !important; opacity: .9; } .st-brand-a .st-nav__list__txt-main::before { content: ""; width: .6rem; height: .6rem; background: #fff; flex: none } .st-brand-a .st-nav__list__txt-sub { font-weight: 900 !important; color: #fff !important; letter-spacing: .04em } .st-brand-a .st-nav__button__icon span { background: #fff !important; height: .35rem !important; border-radius: 0 !important } .st-brand-a .st-nav__sub__inner { background: #fff !important; border: .3rem solid var(--st-navy) !important; border-top: 0 !important; border-radius: 0 0 0 2rem !important; box-shadow: none !important; } .st-brand-a .st-nav__list2 a { color: var(--st-navy) !important; font-weight: 900 !important; font-size: 1.45rem !important } .st-brand-a .st-nav__list2 .st-arrow { display: none !important } /* ------------------------------------------------------------ 01 ファーストビュー ------------------------------------------------------------ */ /* 天気: 黒い行灯にクリームの数字 */ /* 見出しの上の札 */ /* 大見出し: 看板文字・紺の縁取りと、ずらした紺の影 */ /* 呼び方の3つのボタン */ /* 電話の左に、表示灯の「空車」 */ /* 右上の動画の小窓（はたらく人へ／乗務員募集） */ /* 右下の MENU（ロゴの環） */ .st-brand-a .st-fab__btn { border: .35rem solid var(--st-navy) !important; background: #fff !important; box-shadow: var(--st-shadow) !important } .st-brand-a .st-fab__btn__txt { font-family: var(--st-f-en) !important; font-weight: 800 !important; color: var(--st-navy) !important; letter-spacing: .1em } /* ------------------------------------------------------------ 共通の部品 ------------------------------------------------------------ */ /* 行灯の札（上が狭い台形・上の2隅だけ丸い） */ .st-brand-a .st-lamp-tag, .st-brand-a .top-intro__en span, .st-brand-a .top-intro__link__balloon { display: inline-block; background: var(--st-navy) !important; color: #fff !important; clip-path: polygon(1.2rem 0, calc(100% - 1.2rem) 0, 100% 100%, 0 100%); border-radius: .8rem .8rem 0 0; font-family: var(--st-f-en) !important; font-style: normal !important; font-weight: 700 !important; letter-spacing: .08em; text-transform: uppercase; } /* 横断歩道の縞（セクションの上端） */ .st-brand-a .st-crosswalk-top { background-image: repeating-linear-gradient(90deg, var(--st-navy) 0 3rem, #fff 3rem 6rem); background-size: 100% 4rem; background-repeat: no-repeat; } /* ------------------------------------------------------------ 02 導入 ------------------------------------------------------------ */ /* 下端の道路（紺にクリームの破線） */ /* 見出し: 「杉戸タクシー」を看板文字で大きく、下に「SUGITO TAXI · SINCE 1953」 */ /* 本文: 下線をやめ、3語だけ緑のマーカー */ /* 下のカード2枚: 左上だけ大きく丸い白いカード */ /* ------------------------------------------------------------ 03 サービス ------------------------------------------------------------ */ /* 上端: 表示灯の言葉が流れる黒い帯 */ /* 下端: 横断歩道 */ /* カード: 生成りの地、左上だけ丸い窓 */ /* カードの下の道路と、走る一台 */ /* View All */ /* ------------------------------------------------------------ x1 タクシー料金（黒い料金メーターの箱） ------------------------------------------------------------ */ /* お支払い方法 */ /* くまWeb の斜めの重なり（前後のセクションに食い込む余白）をやめ、水平に並べる */ /* ------------------------------------------------------------ 04 対応エリア（駅名標のカード） ------------------------------------------------------------ */ /* カルーセルの下を通る道路 */ /* 駅名標: 白い板に駅名、下に紺の帯と隣の駅名 */ /* 乗り入れの件数: 紺の行灯札 */ /* View All: 紺の台形 */ /* ------------------------------------------------------------ 05 お悩み（黒い夜にクリームの札、横断歩道で紺へ） ------------------------------------------------------------ */ /* ------------------------------------------------------------ x2 運賃とお支払い・予約配車・地域活動（1本の帯） ------------------------------------------------------------ */ /* ------------------------------------------------------------ 06 お知らせ・ブログ ------------------------------------------------------------ */ /* ボタンの上の取っ手（表示灯の台） */ /* ------------------------------------------------------------ 07 杉戸タクシーの歴史 ------------------------------------------------------------ */ /* 乗務員が横断歩道に立つ */ /* 白いカード: 左上だけ大きく丸い */ /* Q&A */ /* 07 の並び: ロゴ → 札 → 横断歩道に立つ乗務員 → カード */ /* 06 を詰める */ /* 07 の並び（縦に積む） */ /* ------------------------------------------------------------ 08 乗務員紹介の動画（夜の黒いタクシーの屋根に載った表示灯） ------------------------------------------------------------ */ /* 表示灯: 台形・紺の太い縁・外側にクリームの光の縁 */ /* ------------------------------------------------------------ x3 紹介動画（SUGITO TAXI CHANNEL） ------------------------------------------------------------ */ /* ------------------------------------------------------------ 09 乗務員募集 ------------------------------------------------------------ */ /* 乗務員が横断歩道に立つ */ /* 破線の道 */ /* ENTRY のカード: タクシー乗り場に並ぶ表示灯 */ /* ------------------------------------------------------------ お問い合わせ（見本なし。同じ決まりで） ------------------------------------------------------------ */ .st-brand-a .st-inquiry { background: var(--st-paper) !important } .st-brand-a .st-inquiry__inner { clip-path: none !important; border: .4rem solid var(--st-navy) !important; border-radius: 4rem .6rem .6rem .6rem !important; box-shadow: .8rem .8rem 0 var(--st-navy) !important } .st-brand-a .st-inquiry__inner::before, .st-brand-a .st-inquiry__inner::after { display: none !important } .st-brand-a .st-inquiry .st-title span { font-family: var(--st-f-body) !important; font-weight: 900 !important; color: var(--st-navy) !important } .st-brand-a .st-contact-heading { font-family: var(--st-f-head) !important; font-weight: 900 !important; color: var(--st-navy) !important } .st-brand-a .st-contact__tel a { background: var(--st-green) !important; border-radius: 2.4rem .6rem .6rem .6rem !important; box-shadow: .5rem .5rem 0 var(--st-navy) !important } .st-brand-a .st-contact__tel__num { font-family: var(--st-f-en) !important; font-weight: 800 !important; letter-spacing: .02em } .st-brand-a .st-contact__form a { border: .35rem solid var(--st-navy) !important; border-radius: 2.4rem .6rem .6rem .6rem !important; box-shadow: .5rem .5rem 0 var(--st-navy) !important; clip-path: none !important } /* ------------------------------------------------------------ 10 フッター（右側だけ。左の紺の面は今のまま＝殿指示） ------------------------------------------------------------ */ .st-brand-a .st-footer__main { background: var(--st-paper) !important } .st-brand-a .st-footer__txt span { display: block; font-family: var(--st-f-head) !important; font-weight: 900 !important; font-style: normal !important; font-size: 7.2rem !important; line-height: 1.12 !important; text-transform: uppercase; letter-spacing: 0 !important; color: var(--st-navy) !important; text-shadow: .4rem .4rem 0 var(--st-lamp), .6rem .6rem 0 rgba(16,39,90,.25) !important; } .st-brand-a .st-footer__txt { padding-bottom: 2.4rem; border-bottom: .5rem dashed var(--st-navy) } .st-brand-a .st-footer__nav .st-footer__cell { border-color: var(--st-navy) !important; border-style: dashed !important; border-width: 0 0 .3rem !important } .st-brand-a .st-footer__parent { font-weight: 900 !important; color: var(--st-navy) !important } .st-brand-a .st-footer__parent a, .st-brand-a .st-footer__parent button { color: var(--st-navy) !important; font-weight: 900 !important; font-size: 2rem !important } .st-brand-a .st-footer__main .st-plus { background: var(--st-navy) !important } .st-brand-a .st-footer__address dt { background: var(--st-navy) !important; color: #fff !important; clip-path: none !important; border-radius: .6rem !important; font-weight: 900 !important; padding: .6rem 1.6rem !important; } .st-brand-a .st-footer__address dt::before, .st-brand-a .st-footer__address dt::after { display: none !important } .st-brand-a .st-footer__address dd, .st-brand-a .st-footer__address dd * { color: var(--st-navy) !important; font-weight: 700 } .st-brand-a .st-footer__address .c-freedial, .st-brand-a .st-footer__address a[href^="tel"] { color: var(--st-green) !important; font-family: var(--st-f-en) !important; font-weight: 800 !important; font-size: 4.4rem !important } .st-brand-a .st-footer__copyright small { color: var(--st-navy) !important; font-weight: 700 } /* ------------------------------------------------------------ 11 メニュー（開いた時） ------------------------------------------------------------ */ .st-brand-a .st-menu__body { background: var(--st-navy) !important; clip-path: none !important } .st-brand-a .st-menu__body::before, .st-brand-a .st-menu__body::after { display: none !important } .st-brand-a .st-menu__body { position: relative } .st-brand-a .st-menu__inner { padding-bottom: 8rem !important } .st-brand-a .st-menu__body > .st-menu__inner::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5.4rem; background: repeating-linear-gradient(90deg, var(--st-lamp) 0 3.6rem, transparent 3.6rem 6.4rem) 1rem 50% / 100% .8rem no-repeat, var(--st-black); } .st-brand-a .st-menu__header [class*="__en"], .st-brand-a .st-menu__header p:first-child span, .st-brand-a .st-menu__txt span { font-family: var(--st-f-en) !important; font-style: normal !important; font-weight: 800 !important; text-transform: uppercase; letter-spacing: 0 !important; } .st-brand-a .st-menu__main .st-menu__parent, .st-brand-a .st-menu__main .st-menu__parent a { font-weight: 900 !important; color: #fff !important } .st-brand-a .st-menu__children a, .st-brand-a .st-menu__main [class*="term"] a { border: .25rem solid #fff !important; background: transparent !important; color: #fff !important; border-radius: .8rem .8rem .3rem .3rem !important; } .st-brand-a .st-menu__close { background: var(--st-black) !important; border: .4rem solid var(--st-lamp) !important; border-radius: 2.4rem 2.4rem .8rem .8rem !important; } .st-brand-a .st-menu__close__txt { color: #fff !important; font-family: var(--st-f-en) !important; font-weight: 800 !important; font-size: 2.2rem !important; letter-spacing: .12em !important } .st-brand-a .st-menu__close__icon { display: none !important } .st-brand-a .st-menu .st-hours__time, .st-brand-a .st-menu [class*="hours"] strong { display: inline-block; background: var(--st-black); color: var(--st-lamp) !important; border: .3rem solid var(--st-lamp); border-radius: 1.2rem 1.2rem .4rem .4rem; padding: .4rem 2.4rem; font-family: var(--st-f-en) !important; font-weight: 800 !important; } .st-brand-a .st-footer__parent a::before, .st-brand-a .st-footer__parent button::before { width: 2.6rem !important; height: 2.6rem !important; background: url(/v3/assets/img/common/icon/mark-navy.png) center/100% no-repeat !important; margin-right: 1.2rem !important; } .st-brand-a .st-menu__parent a::before { width: 2.6rem !important; height: 2.6rem !important; background: #fff url(/v3/assets/img/common/icon/mark-navy.png) center/100% no-repeat !important; margin-right: 1.2rem !important; } .st-brand-a .st-footer__txt span { font-size: 6rem !important; white-space: nowrap } .st-brand-a .st-menu__random__txt span { display: block; font-family: var(--st-f-en) !important; font-style: normal !important; font-weight: 800 !important; text-transform: uppercase; color: #fff !important; font-size: 7rem !important; line-height: 1 !important; letter-spacing: 0 !important; text-shadow: .4rem .4rem 0 #06173d !important; } .st-brand-a .st-menu__random__txt span:nth-child(3) { display: none } .st-brand-a .st-menu-bubble { background: var(--st-lamp) !important; color: var(--st-navy) !important; border-radius: 1rem 1rem .3rem .3rem !important; font-weight: 900 !important } .st-brand-a .st-menu-bubble::before, .st-brand-a .st-menu-bubble::after { display: none !important } .st-brand-a .st-menu-hours__time { display: inline-block; background: var(--st-black); color: var(--st-lamp) !important; border: .3rem solid var(--st-lamp); border-radius: 1.2rem 1.2rem .4rem .4rem; padding: .4rem 2.4rem; font-family: var(--st-f-en) !important; font-weight: 800 !important; } .st-brand-a .st-menu-hours__en { font-family: var(--st-f-en) !important; font-weight: 700 !important; letter-spacing: .06em } .st-brand-a .st-menu__children a *, .st-brand-a .st-menu__main [class*="term"] a * { color: #fff !important } .st-brand-a .st-menu__close__txt { writing-mode: vertical-rl !important; transform: none !important } @media screen and (min-width: 1024px) { .st-brand-a .st-menu__random__txt span { font-size: 5.8rem !important } } /* ============================================================ スマホ幅（1023px 以下）。見本 A-SP と PC の決まりに合わせる ============================================================ */ @media screen and (max-width: 1023px) { /* ヘッダー */ .st-brand-a .st-nav__main__inner { border-radius: 0 0 0 2rem !important } /* 01 */ /* 02 */ /* 03 */ /* x1 */ /* 04 */ /* 05 */ /* x2 */ /* 06 */ /* 07 */ /* 08 */ /* x3 */ /* 09 */ /* 10 右側 */ .st-brand-a .st-footer__txt span { font-size: 3.4rem !important; white-space: normal; text-shadow: .25rem .25rem 0 var(--st-lamp) !important } .st-brand-a .st-footer__txt { border-bottom-width: .35rem; padding-bottom: 1.6rem } .st-brand-a .st-footer__parent a, .st-brand-a .st-footer__parent button { font-size: 1.5rem !important } .st-brand-a .st-footer__parent a::before, .st-brand-a .st-footer__parent button::before { width: 2rem !important; height: 2rem !important; margin-right: .8rem !important } .st-brand-a .st-footer__address .c-freedial, .st-brand-a .st-footer__address a[href^="tel"] { font-size: 3rem !important } /* 11 */ .st-brand-a .st-menu__random__txt span { font-size: 3.8rem !important } .st-brand-a .st-menu__parent a::before { width: 2rem !important; height: 2rem !important; margin-right: .8rem !important } .st-brand-a .st-menu__close__txt { font-size: 1.5rem !important } /* お問い合わせ */ .st-brand-a .st-inquiry__inner { border-width: .25rem !important; border-radius: 2.4rem .4rem .4rem .4rem !important; box-shadow: .4rem .4rem 0 var(--st-navy) !important } } /* ---- 検証1回目の指摘への直し ---- */ /* ナビの英字は四角の印だけ（見本） */ .st-brand-a .st-nav__list__txt-main { font-size: 0 !important } .st-brand-a .st-nav__list__txt-main::before { width: .7rem; height: .7rem } /* x2: 外の白い枠をやめる */ /* 06: View More は丸い端のボタン＋上の取っ手 */ /* 07: Q&A の Q の尾が切れない／もっと見るの矢印 */ /* 09: 乗務員の足元の横断歩道 */ /* 10: ブログの＋は紺の丸、札の小さな飾りを消す */ .st-brand-a .st-footer__main .st-plus { border-radius: 50% !important } .st-brand-a .st-footer__address dt::before, .st-brand-a .st-footer__address dt::after { content: none !important; display: none !important } /* 11: 営業時間の札は二重の枠、英字は大文字小文字のまま */ .st-brand-a .st-menu-hours__time { box-shadow: 0 0 0 .3rem var(--st-black), 0 0 0 .55rem var(--st-lamp) } .st-brand-a .st-menu-hours__en { text-transform: none !important } /* ---- 検証2回目の指摘への直し ---- */ .st-brand-a .st-footer__address dt { white-space: nowrap !important; width: auto !important; min-width: max-content !important } /* 紹介動画のボタンの丸は再生の印 */ @media screen and (max-width: 1023px) { /* 01 */ .st-brand-a .st-nav__button { position: relative } .st-brand-a .st-nav__button::after { content: "MENU"; position: absolute; left: 0; right: 0; bottom: .5rem; text-align: center; color: #fff; font: 800 1.1rem/1 var(--st-f-en); letter-spacing: .08em } .st-brand-a .st-nav__button__icon { margin-bottom: 1.2rem } /* 02: 動画の小窓の上は TAXI の表示灯 */ /* 03 */ /* 08: 表示灯を台形に（縁は影で描く） */ } /* ---- 検証3回目の指摘への直し（実際に確かめて当たっていた物だけ） ---- */ /* 09: ENTRY の右のロゴの環が消えていた */ /* 09: 乗務員の足元の横断歩道を大きく */ /* 03・x1: 札の後ろの硬い影 */ /* x1: クレジットカードの行を1行に */ /* 05: 境目の横断歩道は斜めの縞 */ /* x2: 「くわしく」は3枚とも白い行灯の札 */ /* 04: 3枚がちょうど見える幅 */ /* 08: 再生ボタンは正円（PC）／Recruit Movie の札は最初から見せる */ /* 10: ブログの＋は紺の丸 */ .st-brand-a .st-footer__main .st-plus { background-color: var(--st-navy) !important; --bg-color: var(--st-navy) } /* 01: 天気の上の表示灯の耳（見本） */ /* ---- 検証4回目の指摘への直し ---- */ /* ---- 検証5回目の指摘への直し ---- */ /* 横にはみ出さない（スマホで横スクロールが出ないように） */ .st-brand-a .top-news__header, .st-brand-a .st-footer { overflow-x: clip } @media screen and (max-width: 1279px) { .st-brand-a .st-footer__txt span { white-space: normal; font-size: 4.6rem !important } } /* 08: キャラクターの画像は周りの余白が大きい（絵は幅の55%）ので、枠を大きくして見本の大きさに */ /* ---- 殿の直し（2026-09-26）---- 1. View More は普通のカプセル型（上の札をやめる） 2. タクシー料金のカードは A案の前のデザインに戻す（黒いメーターの箱の指定を外した。元の common.min.css のカード） 3. 対応エリアのカルーセル: カードの幅を元（A案の前）より狭くしたため、Swiper が1画面に4枚入ると数え、5枚ではループの並べ替えが足りず、 端まで送って右側が空になった。幅は元のまま（Swiper の前提どおり）にし、現在のカードだけ幅を変える指定もやめた */ /* ---- 殿の直し（2026-09-26 夕）: 一覧の点はロゴではなく小さな紺の丸 ---- */ .st-brand-a .st-footer__parent a::before, .st-brand-a .st-footer__parent button::before { width: 1rem !important; height: 1rem !important; background: var(--st-navy) !important; border-radius: 50% !important } .st-brand-a .st-menu__parent a::before { width: 1rem !important; height: 1rem !important; background: #fff !important; border-radius: 50% !important } /* ---- 殿の直し: 採用のお問い合わせのボタンは、いつも紺。マウスを乗せると白 ---- */ .st-brand-a .st-contact__form a { background: var(--st-navy) !important; color: #fff !important; transition: background .2s, color .2s } .st-brand-a .st-contact__form a .st-inquiry__button__txt, .st-brand-a .st-contact__form a .st-inquiry__button__txt * { color: inherit !important } .st-brand-a .st-contact__form a .st-contact__form__icon { background: rgba(255,255,255,.18) !important; color: #fff !important } .st-brand-a .st-contact__form a .st-contact__form__icon svg * { stroke: currentColor } .st-brand-a .st-contact__form a .st-contact__arrow { background: #fff !important; color: var(--st-navy) !important } .st-brand-a .st-contact__form a:hover { background: #fff !important; color: var(--st-navy) !important } .st-brand-a .st-contact__form a:hover .st-contact__form__icon { background: #EEF0F4 !important; color: var(--st-navy) !important } .st-brand-a .st-contact__form a:hover .st-contact__arrow { background: var(--st-navy) !important; color: #fff !important } /* ---- 殿の直し: ヘッダーのメニューは「アイコン＋文字」を横に並べる。アイコンは軽い SVG（線の絵）を文字の色で塗る ---- */ .st-brand-a .st-nav__list > li > a { display: flex !important; flex-direction: row !important; align-items: center !important; gap: .7rem !important } .st-brand-a .st-nav__list__txt-main { font-size: 0 !important; width: 2rem !important; height: 2rem !important; flex: none; opacity: 1 !important; margin: 0 !important; background-color: currentColor; color: #fff; -webkit-mask: var(--st-nav-icon) center / contain no-repeat; mask: var(--st-nav-icon) center / contain no-repeat } .st-brand-a .st-nav__list__txt-main::before, .st-brand-a .st-nav__list__txt-main::after { content: none !important; display: none !important } .st-brand-a .st-nav__list__txt-sub { margin: 0 !important } .st-brand-a .st-nav__list > li > a[href$="/about/"] .st-nav__list__txt-main { --st-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21V5l8-3 8 3v16'/%3E%3Cpath d='M9 21v-5h6v5M8 8h.01M12 8h.01M16 8h.01M8 12h.01M12 12h.01M16 12h.01M2 21h20'/%3E%3C/svg%3E") } /* 会社案内 */ .st-brand-a .st-nav__list > li > a[href$="/service/"] .st-nav__list__txt-main { --st-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 16l1.5-5a2 2 0 0 1 2-1.5h7a2 2 0 0 1 2 1.5L19 16'/%3E%3Cpath d='M3 16h18v3H3zM9 6h6l1 3.5H8zM7 19v2M17 19v2'/%3E%3Ccircle cx='7.5' cy='17.5' r='.5'/%3E%3Ccircle cx='16.5' cy='17.5' r='.5'/%3E%3C/svg%3E") } /* サービス */ .st-brand-a .st-nav__list > li > a[href$="/area/"] .st-nav__list__txt-main { --st-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5A7 7 0 0 1 19 9.5C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E") } /* 対応エリア */ .st-brand-a .st-nav__list > li > a[href$="/fare/"] .st-nav__list__txt-main { --st-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2'/%3E%3Cpath d='M2.5 10h19M6.5 15h4'/%3E%3C/svg%3E") } /* 運賃・お支払い */ .st-brand-a .st-nav__list > li > a[href$="/flow/"] .st-nav__list__txt-main { --st-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E") } /* 予約・配車方法 */ .st-brand-a .st-nav__list > li > a[href$="/voice/"] .st-nav__list__txt-main { --st-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 0 0-7.8 7.8L12 21.2l8.8-8.8a5.5 5.5 0 0 0 0-7.8z'/%3E%3C/svg%3E") } /* 地域活動 */ /* 乗務員紹介のカードの年代・入社は「・」で折り返す（依頼C-9） */ .st-drv__meta { word-break: keep-all; } /* メインメニューの「乗務員募集」（殿 2026-09-26。対応エリアは右の小さいメニューへ移した） */ .st-brand-a .st-nav__list > li > a[href$="/recruit/"] .st-nav__list__txt-main { --st-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='4'/%3E%3Cpath d='M2 21v-1a7 7 0 0 1 14 0v1M19 8v6M16 11h6'/%3E%3C/svg%3E") }