/* ===== 大洋電化ヘッダー / モバイルメニュー改修 ===== SWELL標準ヘッダーを土台に、SPのみ改修： ① ロゴ左・ハンバーガー右 ② ハンバーガー→×変形 ③ ドロワーを上から全幅で降ろす ④ メニュー項目のスタッガー表示 ⑤ タップ領域大きめ開閉状態は SWELL のをフックに（自前JS不要）。デスクトップ（960px以上）は一切変更しない。 */ /* ===== ヘッダーロゴ：7Dマーク＋サイトタイトルの横並び（全サイズ共通・指示書#16） ===== SWELLのテキストロゴは

大洋電化

。 ※指示書の .site-title/.p-title は当環境に存在しないため .c-headLogo__link に読み替え。リンク(a)内にマークを入れることでマークもトップへのクリック領域になる。 */ .c-headLogo__link{ display:inline-flex; align-items:center; gap:0; /* 間隔は::beforeのmargin-rightで付与（flex gapはSWELL環境で効かないため・フッターと同方式） */ color:var(--navy,#13456e); font-weight:900; font-size:26px; /* 文字の天地をマークと揃える（ヘッダー高40pxに対し上品なサイズ） */ letter-spacing:-.01em; line-height:1; } .c-headLogo__link::before{ content:""; display:inline-block; height:17px; /* 漢字の視覚天地(font26で約17px)に合わせる */ width:25px; /* 17px × トリム版アスペクト比1.492 ≒ 25 */ /* マークは文字色(currentColor)で描画＝テキストと必ず同色。画像はマスク(形)として使用 */ background:currentColor; -webkit-mask:url("../assets/img/logo_mark_trim.png") no-repeat center/contain; mask:url("../assets/img/logo_mark_trim.png") no-repeat center/contain; flex:none; margin-right:8px; /* マークとテキストの隙間をフッターと同じ見た目(ink間10px)に。ヘッダー漢字がやや大きくサイドベアリングも大きいため9→8で微調整 */ position:relative; top:2px; /* 漢字の視覚中心に合わせて下げ、下端を揃える */ } /* モバイル(ヘッダー高48px・ハンバーガーに合わせて僅かに大きめ) */ @media screen and (max-width:820px){ .c-headLogo__link{ font-size:27px; } .c-headLogo__link::before{ height:18px; width:27px; } /* 漢字の視覚天地(font27で約18px)に合わせ縮小 */ } @media screen and (max-width:959px){ /* --- ① ロゴ左・ハンバーガー右上を強制 --- SWELLがSPで .l-header__menuBtn{order:1}/.l-header__customBtn{order:3} を出力し「ハンバーガー左・検索右」になってしまうため、後読みの本CSSで上書きする。検索/RSS等のヘッダーアイコン(customBtn)はSPでは非表示（検索はドロワー内のフォームに一本化）。 */ .l-header__inner{ display:flex !important; align-items:center !important; } .l-header__logo{ order:0 !important; margin-right:auto !important; } .l-header__menuBtn{ order:2 !important; } .l-header__customBtn{ display:none !important; } .l-header .c-iconList__item.-search{ display:none !important; } /* --- タップ領域・重なり順（ドロワーより前面に置いて×として押せるように） --- */ .l-header{ position:relative; z-index:110; } .l-header__menuBtn{ position:relative; z-index:120; } .l-header__menuBtn .c-iconBtn.-menuBtn{ width:48px; height:48px; display:flex; align-items:center; justify-content:center; color:var(--color_header_text,#332f29); } /* --- ② ハンバーガー（3本線）→ ×へ変形 --- */ /* SWELLのアイコンフォント字形を消し、中央線＋擬似要素で3本線を描く */ .l-header__menuBtn .-menuBtn .c-iconBtn__icon{ position:relative; display:inline-block; width:26px; height:2px; background:currentColor; border-radius:2px; font-size:0; color:inherit; transition:background .2s ease; } .l-header__menuBtn .-menuBtn .c-iconBtn__icon::before, .l-header__menuBtn .-menuBtn .c-iconBtn__icon::after{ content:""; position:absolute; left:0; width:26px; height:2px; background:currentColor; border-radius:2px; transition:transform .3s ease, top .3s ease; } .l-header__menuBtn .-menuBtn .c-iconBtn__icon::before{ top:-8px; } .l-header__menuBtn .-menuBtn .c-iconBtn__icon::after{ top:8px; } html[data-spmenu="opened"] .l-header__menuBtn .-menuBtn .c-iconBtn__icon{ background:transparent; } html[data-spmenu="opened"] .l-header__menuBtn .-menuBtn .c-iconBtn__icon::before{ top:0; transform:rotate(45deg); } html[data-spmenu="opened"] .l-header__menuBtn .-menuBtn .c-iconBtn__icon::after{ top:0; transform:rotate(-45deg); } /* --- ③ ドロワーを「上から全幅でスッと降りる」形に --- */ .p-spMenu{ z-index:100 !important; } /* ヘッダーより後ろへ（ヘッダーの背後から降りる） */ .p-spMenu__closeBtn{ display:none !important; } /* ×はハンバーガーが担うので既存の閉じボタンは隠す */ .p-spMenu .p-spMenu__inner{ left:0 !important; right:0 !important; top:0 !important; bottom:auto !important; width:100% !important; max-width:100% !important; height:auto !important; min-height:100vh !important; min-height:100dvh !important; /* ★下部透過バグ修正: 画面高いっぱいまで背景を伸ばす */ max-height:100vh; max-height:100dvh; overflow-y:auto; background:#fdfdfd !important; /* SWELLの::before背景(#fdfdfd)と同色を直接付与＝確実に不透過 */ padding:76px 0 32px !important; /* 上はヘッダー分のクリアランス */ transform:translateY(-100%) !important; transition:transform .42s cubic-bezier(.33,1,.68,1) !important; box-shadow:0 14px 26px rgba(19,69,110,.14); -webkit-overflow-scrolling:touch; } html[data-spmenu="opened"] .p-spMenu .p-spMenu__inner{ transform:translateY(0) !important; } /* --- ⑤ メニュー項目：タップ領域大きめ・区切り線 --- */ .p-spMenu__nav{ margin-top:0 !important; } .p-spMenu__nav ul{ list-style:none; margin:0; padding:0; } .p-spMenu__nav li > a{ display:block; padding:16px 24px; font-size:17px; font-weight:700; line-height:1.4; border-bottom:1px solid rgba(0,0,0,.06); } /* --- 「サービス」の子6項目：常に展開表示（アコーディオンにせずシニアに親切）＋インデント＋1段小さく(15px維持) --- */ .p-spMenu__nav .sub-menu{ display:block !important; height:auto !important; } .p-spMenu__nav .sub-menu li > a{ padding:14px 24px 14px 44px; font-size:15px; font-weight:500; } .p-spMenu__nav .c-submenuToggleBtn{ display:none !important; } /* --- ④ 項目を上から順にスタッガー表示 --- */ .p-spMenu__nav li{ opacity:0; transform:translateY(-8px); transition:opacity .3s ease, transform .3s ease; } html[data-spmenu="opened"] .p-spMenu__nav li{ opacity:1; transform:translateY(0); } html[data-spmenu="opened"] .p-spMenu__nav li:nth-child(1){ transition-delay:.14s; } html[data-spmenu="opened"] .p-spMenu__nav li:nth-child(2){ transition-delay:.19s; } html[data-spmenu="opened"] .p-spMenu__nav li:nth-child(3){ transition-delay:.24s; } html[data-spmenu="opened"] .p-spMenu__nav li:nth-child(4){ transition-delay:.29s; } html[data-spmenu="opened"] .p-spMenu__nav li:nth-child(5){ transition-delay:.34s; } html[data-spmenu="opened"] .p-spMenu__nav li:nth-child(6){ transition-delay:.39s; } html[data-spmenu="opened"] .p-spMenu__nav li:nth-child(7){ transition-delay:.44s; } html[data-spmenu="opened"] .p-spMenu__nav li:nth-child(8){ transition-delay:.49s; } html[data-spmenu="opened"] .p-spMenu__nav li:nth-child(n+9){ transition-delay:.54s; } /* --- ② 検索フォーム（メニュー内・sp_menu_bottomウィジェット / SWELLは c-searchForm で描画） --- */ .p-spMenu__bottom{ margin-top:1em !important; padding:0 24px; } .p-spMenu__bottom .widget{ margin:0; } .p-spMenu .c-searchForm{ display:flex; align-items:stretch; background:#fff; border:2px solid rgba(0,0,0,.14); border-radius:12px; overflow:hidden; } .p-spMenu .c-searchForm input[type="search"], .p-spMenu .c-searchForm .c-searchForm__field{ flex:1; min-width:0; border:0; background:transparent; padding:12px 14px; font-size:16px; } .p-spMenu .c-searchForm button, .p-spMenu .c-searchForm .c-searchForm__submit{ border:0; background:transparent; padding:0 14px; } /* ドロワー内の重複する検索アイコン（→モーダル）は隠す（インラインフォームに一本化） */ .p-spMenu .c-iconList__item.-search{ display:none !important; } /* スタッガーで検索もふわっと */ .p-spMenu__bottom{ opacity:0; transform:translateY(-8px); transition:opacity .3s ease .5s, transform .3s ease .5s; } html[data-spmenu="opened"] .p-spMenu__bottom{ opacity:1; transform:translateY(0); } /* 動きを抑える設定の端末には配慮 */ @media (prefers-reduced-motion:reduce){ .p-spMenu .p-spMenu__inner{ transition:none !important; } .p-spMenu__nav li, .p-spMenu__bottom{ transition:none !important; opacity:1 !important; transform:none !important; } } } /* ===== 文字サイズ切替モード（標準/大/特大の3段階・指示書#18） ===== 本文系テキストのみ拡大（見出し・ボタン・タグ・パンくず・余白は据え置き＝骨格維持）。 html[data-fontsize] が付いている時だけ各要素の実サイズ×--fs-scaleで上書き（標準時は既存px維持・後読みCSSにも勝つ）。 ※指示書#18の calc(1em*scale) は 1em=親要素サイズのため既存px要素で誤動作 → 各要素の実px値を明示して修正。 ※base.cssはfront-page非読込のため、全ページ共通の本header.cssに定義。 ※--fs-scale の基準値(1)は tokens.css の :root に定義（:root一元化）。ここでは大/特大の上書きのみ。 */ html[data-fontsize="large"]{ --fs-scale:1.20; --fs-scale-h:1.12; } html[data-fontsize="xlarge"]{ --fs-scale:1.45; --fs-scale-h:1.25; } /* 画面幅による本文の底上げ（視距離が長いほど文字を大きく・指示書#43） ※ --fs-device は tokens.css の :root で 1 を定義済み。ここでは上書きのみ。 ※ data-fontsize の値に関わらず常に効かせるため、属性を付けずに指定する。 ※【重要】セレクタは必ず :root にする。html{} だと tokens.css の :root{--fs-device:1} （擬似クラス＝詳細度0,1,0）に負けて上書きできず、底上げが一切効かない。 :root 同士なら詳細度が同じで、後読みの本ファイルが勝つ（読込順：tokens.css → header.css）。 ※ 標準表示でも効かせるため、JS側で初期状態から data-fontsize="normal" を付与している（inc/a11y.php）。 */ @media screen and (min-width:768px){ :root{ --fs-device:1.06; } } @media screen and (min-width:960px){ :root{ --fs-device:1.10; } } html[data-fontsize] .taiyo .lead{ font-size:calc(16px * var(--fs-scale) * var(--fs-device)); } html[data-fontsize] .taiyo .lead-c{ font-size:calc(17px * var(--fs-scale) * var(--fs-device)); } html[data-fontsize] .taiyo .phead p, html[data-fontsize] .taiyo-svc .phead p{ font-size:calc(15px * var(--fs-scale) * var(--fs-device)); } html[data-fontsize] .taiyo .prose p{ font-size:calc(15.5px * var(--fs-scale) * var(--fs-device)); } html[data-fontsize] .taiyo .prose li{ font-size:calc(1em * var(--fs-scale) * var(--fs-device)); } html[data-fontsize] .taiyo .note{ font-size:calc(14px * var(--fs-scale) * var(--fs-device)); } html[data-fontsize] .taiyo table, html[data-fontsize] .taiyo th{ font-size:calc(14px * var(--fs-scale) * var(--fs-device)); } html[data-fontsize] .taiyo-about .shopinfo p{ font-size:calc(15px * var(--fs-scale) * var(--fs-device)); } html[data-fontsize] .taiyo-faq .qa .q{ font-size:calc(17px * var(--fs-scale) * var(--fs-device)); } html[data-fontsize] .taiyo-faq .qa .a{ font-size:calc(15px * var(--fs-scale) * var(--fs-device)); } html[data-fontsize] .taiyo-subsidy .area .row b{ font-size:calc(15px * var(--fs-scale) * var(--fs-device)); } html[data-fontsize] .taiyo .box{ font-size:calc(1em * var(--fs-scale) * var(--fs-device)); } html[data-fontsize] .taiyo-svc .box{ font-size:calc(14px * var(--fs-scale) * var(--fs-device)); } html[data-fontsize] .taiyo-svc table, html[data-fontsize] .taiyo-svc th{ font-size:calc(15px * var(--fs-scale) * var(--fs-device)); } html[data-fontsize] .taiyo-top .card p{ font-size:calc(15px * var(--fs-scale) * var(--fs-device)); } html[data-fontsize] .taiyo .card p{ font-size:calc(14.5px * var(--fs-scale) * var(--fs-device)); } /* ===== 指示書#30：拡大対象の追加（実機確認で判明した本文の漏れ） ===== */ /* --- トップページ --- */ html[data-fontsize] .taiyo-top .hero .lead{ font-size:calc(19px * var(--fs-scale) * var(--fs-device)); } html[data-fontsize] .taiyo-top .hero-tel{ font-size:calc(14px * var(--fs-scale) * var(--fs-device)); } html[data-fontsize] .taiyo-top .hero-tel a{ font-size:calc(17px * var(--fs-scale) * var(--fs-device)); } html[data-fontsize] .taiyo-top .hero-tel span{ font-size:calc(12px * var(--fs-scale) * var(--fs-device)); } html[data-fontsize] .taiyo-top .story p{ font-size:calc(17px * var(--fs-scale) * var(--fs-device)); } html[data-fontsize] .taiyo-top .ctaband p{ font-size:calc(16px * var(--fs-scale) * var(--fs-device)); } html[data-fontsize] .taiyo-top .ctaband .cta-tel{ font-size:calc(15px * var(--fs-scale) * var(--fs-device)); } html[data-fontsize] .taiyo-top .flow-steps p{ font-size:calc(15px * var(--fs-scale) * var(--fs-device)); } html[data-fontsize] .taiyo-top .flow-promise{ font-size:calc(14.5px * var(--fs-scale) * var(--fs-device)); } html[data-fontsize] .taiyo-top .card .more{ font-size:calc(14px * var(--fs-scale) * var(--fs-device)); } /* --- 下層共通 --- */ html[data-fontsize] .taiyo .phead p{ font-size:calc(15px * var(--fs-scale) * var(--fs-device)); } html[data-fontsize] .taiyo td{ font-size:calc(14px * var(--fs-scale) * var(--fs-device)); } html[data-fontsize] .taiyo .card .more{ font-size:calc(14px * var(--fs-scale) * var(--fs-device)); } html[data-fontsize] .taiyo p.enacted{ font-size:calc(14px * var(--fs-scale) * var(--fs-device)); } /* --- 私たちのこと --- */ html[data-fontsize] .taiyo-about .gen p{ font-size:calc(14.5px * var(--fs-scale) * var(--fs-device)); } html[data-fontsize] .taiyo-about .gen .grole{ font-size:calc(12px * var(--fs-scale) * var(--fs-device)); } html[data-fontsize] .taiyo-about .quals li{ font-size:calc(14px * var(--fs-scale) * var(--fs-device)); } /* ※.si-name（店名）は見出し扱いに変更したため #44 のセクションへ移動（--fs-scale-h） */ /* --- 補助金 --- */ html[data-fontsize] .taiyo-subsidy .area .row{ font-size:calc(14.5px * var(--fs-scale) * var(--fs-device)); } html[data-fontsize] .taiyo-subsidy .area .ext{ font-size:calc(14px * var(--fs-scale) * var(--fs-device)); } /* --- サービス詳細（td個別サイズ） --- */ html[data-fontsize] .taiyo-svc td{ font-size:calc(14px * var(--fs-scale) * var(--fs-device)); } /* --- フッター（余白が広く安全） --- */ html[data-fontsize] .taiyo-footer .tf-addr, html[data-fontsize] .taiyo-footer .tf-line{ font-size:calc(15px * var(--fs-scale) * var(--fs-device)); } html[data-fontsize] .taiyo-footer .tf-note{ font-size:calc(14px * var(--fs-scale) * var(--fs-device)); } /* ===== 指示書#32：ブログ本文（SWELL .post_content）にも文字サイズ切替を適用 ===== 方針は他ページと同じ「読む文字＝本文・リストを拡大／見出し(h1-h3)は骨格として固定」。基準：.post_content の本文16px。 */ html[data-fontsize] .post_content > p, html[data-fontsize] .post_content li{ font-size:calc(16px * var(--fs-scale) * var(--fs-device)); } /* ===== 指示書#44：見出しにも文字サイズ切替を適用（主従関係の回復） ===== #43で本文倍率を上げた結果、本文が見出しに追いつく／追い越す逆転が発生したため、見出しも --fs-scale-h（本文1.45に対し1.25＝控えめ）で拡大し、視覚的な主従関係を保つ。 ※px値は top.css / base.css / pages.css / service.css の定義値と一致させてある。ここを変えるときは元CSSの値も必ず一緒に直すこと（二重管理になっている点に注意）。 ※トップは `.taiyo-top` のみで `.taiyo` が付かないため、`.taiyo ～` の指定はトップに影響しない。 ※`.tag` `.ncat` `.fno` などの小さなラベルと `.taiyo-fsswitch` は対象外（骨格として固定）。 */ /* --- トップページ（top.css の定義値） --- */ html[data-fontsize] .taiyo-top .hero h1{ font-size:calc(52px * var(--fs-scale-h) * var(--fs-device)); } html[data-fontsize] .taiyo-top .badge{ font-size:calc(14px * var(--fs-scale-h) * var(--fs-device)); } html[data-fontsize] .taiyo-top h2.t{ font-size:calc(34px * var(--fs-scale-h) * var(--fs-device)); } html[data-fontsize] .taiyo-top h2.t .en{ font-size:calc(14px * var(--fs-scale-h) * var(--fs-device)); } html[data-fontsize] .taiyo-top .card h3{ font-size:calc(20px * var(--fs-scale-h) * var(--fs-device)); } html[data-fontsize] .taiyo-top .story h2{ font-size:calc(30px * var(--fs-scale-h) * var(--fs-device)); } html[data-fontsize] .taiyo-top .story .en{ font-size:calc(14px * var(--fs-scale-h) * var(--fs-device)); } html[data-fontsize] .taiyo-top .subsidy .txt b{ font-size:calc(23px * var(--fs-scale-h) * var(--fs-device)); } html[data-fontsize] .taiyo-top .ctaband h2{ font-size:calc(28px * var(--fs-scale-h) * var(--fs-device)); } html[data-fontsize] .taiyo-top .ncard h3{ font-size:calc(17px * var(--fs-scale-h) * var(--fs-device)); } html[data-fontsize] .taiyo-top .flow-steps h3{ font-size:calc(18px * var(--fs-scale-h) * var(--fs-device)); } /* --- 下層ページ共通（base.css の定義値） --- */ html[data-fontsize] .taiyo h2.t{ font-size:calc(34px * var(--fs-scale-h) * var(--fs-device)); } html[data-fontsize] .taiyo h2.t .en{ font-size:calc(14px * var(--fs-scale-h) * var(--fs-device)); } html[data-fontsize] .taiyo .ctaband h2{ font-size:calc(28px * var(--fs-scale-h) * var(--fs-device)); } /* --- ページヘッダー・各ページの見出し（pages.css / service.css の定義値） --- ※.phead h1 は pages.css・service.css とも 32px（820px以下で26px）。 ※.card h3 / .gen h3 / .area h3 はいずれも19px（トップの .card h3 20px とは別物）。 */ html[data-fontsize] .taiyo .phead h1, html[data-fontsize] .taiyo-svc .phead h1{ font-size:calc(32px * var(--fs-scale-h) * var(--fs-device)); } html[data-fontsize] .taiyo .phead .en, html[data-fontsize] .taiyo-svc .phead .en{ font-size:calc(13px * var(--fs-scale-h) * var(--fs-device)); } html[data-fontsize] .taiyo h2.box-h{ font-size:calc(20px * var(--fs-scale-h) * var(--fs-device)); } html[data-fontsize] .taiyo .card h3{ font-size:calc(19px * var(--fs-scale-h) * var(--fs-device)); } html[data-fontsize] .taiyo-about .gen h3{ font-size:calc(19px * var(--fs-scale-h) * var(--fs-device)); } html[data-fontsize] .taiyo-about .shopinfo .si-name{ font-size:calc(18px * var(--fs-scale-h) * var(--fs-device)); } html[data-fontsize] .taiyo-subsidy .area h3{ font-size:calc(19px * var(--fs-scale-h) * var(--fs-device)); } /* --- ブログ本文の見出し（SWELL .post_content） --- ※SWELL側は 600px未満が可変（h2=4.8vw / h3=4.4vw）、600px以上が固定（h2=22.4px / h3=20.8px）。 px固定で書くとスマホの可変が壊れるため、vwのまま倍率を掛けている。 ※これはSWELL本体の値を写したもの。SWELL側の見出し設定を変更したらここも要更新。 ※【ここだけ --fs-scale（本文倍率）を使う】SWELLの見出しは本文16pxに対し h2=18px・h3=16.5px と元の差が小さいため、控えめな --fs-scale-h(1.25) を掛けると 375px×特大で h2 22.5px < 本文 23.2px と逆転する。本文と同じ倍率にすることで SWELL本来の見出し:本文の比率がどのサイズでも保たれる。 */ /* ※max() の下限は320px対策。SWELLの 4.8vw は 320px幅だと 15.36px となり、本文16pxを下回って標準表示でも見出しの方が小さいという逆転が元から起きていた。 375px時の値（h2=18px / h3=16.5px）を下限にして、狭い画面でも主従を保つ。 */ html[data-fontsize] .post_content h2{ font-size:calc(max(4.8vw, 18px) * var(--fs-scale) * var(--fs-device)); } html[data-fontsize] .post_content h3{ font-size:calc(max(4.4vw, 16.5px) * var(--fs-scale) * var(--fs-device)); } @media screen and (min-width:600px){ html[data-fontsize] .post_content h2{ font-size:calc(22.4px * var(--fs-scale) * var(--fs-device)); } html[data-fontsize] .post_content h3{ font-size:calc(20.8px * var(--fs-scale) * var(--fs-device)); } } /* --- レスポンシブで値が変わる見出しの上書き（元CSSと同じブレークポイント） --- ※トップの .ctaband h2 は top.css にモバイル用の縮小が無いため28pxのまま（下層の24pxとは別）。 */ @media screen and (max-width:820px){ html[data-fontsize] .taiyo-top .hero h1{ font-size:calc(38px * var(--fs-scale-h) * var(--fs-device)); } html[data-fontsize] .taiyo-top h2.t, html[data-fontsize] .taiyo h2.t{ font-size:calc(26px * var(--fs-scale-h) * var(--fs-device)); } html[data-fontsize] .taiyo .ctaband h2{ font-size:calc(24px * var(--fs-scale-h) * var(--fs-device)); } html[data-fontsize] .taiyo .phead h1, html[data-fontsize] .taiyo-svc .phead h1{ font-size:calc(26px * var(--fs-scale-h) * var(--fs-device)); } } @media screen and (min-width:821px) and (max-width:1024px){ html[data-fontsize] .taiyo-top .hero h1{ font-size:calc(44px * var(--fs-scale-h) * var(--fs-device)); } } /* ヘッダーの文字サイズ切替ウィジェット（JSで .l-header__inner 内へ移動） */ .taiyo-fsswitch{ display:inline-flex; align-items:center; gap:5px; margin-left:14px; } .taiyo-fsswitch[hidden]{ display:none; } /* JS移動前は非表示（上のinline-flexより高詳細度で確実に隠す） */ .taiyo-fsswitch .fss-label{ font-size:11px; color:#766f64; font-weight:700; margin-right:2px; } /* 「標準/大/特大」の2文字ラベルに対応：固定幅ではなく padding＋min-width で可変に（指示書#28-E） */ .taiyo-fsswitch button{ border:1px solid #cdd6de; background:#fff; color:#13456e; border-radius:6px; cursor:pointer; font-weight:800; padding:0 8px; min-width:26px; height:26px; line-height:1; white-space:nowrap; display:inline-flex; align-items:center; justify-content:center; transition:.15s; } .taiyo-fsswitch button[data-size="normal"]{ font-size:12px; } .taiyo-fsswitch button[data-size="large"]{ font-size:14px; height:28px; } .taiyo-fsswitch button[data-size="xlarge"]{ font-size:15px; height:30px; } .taiyo-fsswitch button[aria-pressed="true"]{ background:#c15a16; color:#fff; border-color:#c15a16; } .taiyo-fsswitch button:hover{ border-color:#ef8636; } @media screen and (max-width:820px){ .taiyo-fsswitch{ margin-left:8px; order:1; } .taiyo-fsswitch .fss-label{ display:none; } .taiyo-fsswitch button{ padding:0 6px; } /* モバイルは少し詰める */ } /* 320px系の極小画面：中(大)ボタンは#19で非表示＝標準・特大の2ボタン。1行に収めるためさらに詰める */ @media screen and (max-width:359px){ .taiyo-fsswitch{ gap:3px; margin-left:4px; } .taiyo-fsswitch button{ padding:0 5px; min-width:0; } } /* 320px以下の極小画面では「中(large)」を隠して標準・特大の2ボタンに（指示書#19）。 360px幅では3ボタンが収まるため、それより狭い320px系のみ対象。 */ @media screen and (max-width:359px){ .taiyo-fsswitch button[data-size="large"]{ display:none; } } /* ===== スキップリンク（指示書#27） ===== */ .taiyo-skiplink{ position:absolute; left:8px; top:-60px; z-index:9999; background:#13456e; color:#fff; font-weight:800; font-size:15px; padding:10px 16px; border-radius:0 0 10px 10px; text-decoration:none; transition:top .15s ease; } .taiyo-skiplink:focus{ top:0; outline:3px solid #c15a16; outline-offset:2px; }