@charset "UTF-8";
/*
* ======================================
* 株式会社おきさん（非常用発電機LP） サイト固有CSS（oks- プレフィックス）
* 追加クラス一覧（共通SCSS取り込み検討用）
* ======================================
*
* .oks-header / .oks-header__inner - sticky ヘッダー（1段・下端3pxブルー罫）
* .oks-logo / --footer - header-logo の角丸アイコン版（42px・sub上／name下）
* .oks-nav / .oks-hright / .oks-htel - 和文1行ナビ（下線アニメ無し）／右側CTA列／2段電話
* .oks-btn --green/--yellow/--sm - フラットな角丸6pxボタン（幅auto・900）
* .oks-cols --120〜--340 - auto-fit グリッド（--oks-min で最小幅を指定）
* .oks-gap-2〜26 / .oks-gap-22-20 - 5px刻みに無い gap（行×列の別値含む）
* .oks-sec --light/--pale/--f7 等 - セクション余白 64/74px の背景色バリエーション
* .oks-w1200 / 1160 / 1000 / 940 - 元データのコンテナ幅4種
* .oks-eyebrow / .oks-h2 - Barlow英字ラベル（字間.16em）／ブルーの流体h2
* .oks-mv - MV（濃紺地＋45度ストライプ＋右下ブリード画像）
* .oks-mark - 見出し内のイエロー下線マーカー（下端.13em）
* .oks-ctabar / .oks-telcard/.oks-bnr - ヘッド直下のCTAバー（電話カード＋2バナー）
* .oks-lead - 街並み写真14%＋白グラデ暗幕のリードセクション
* .oks-ph --16-10 / --4-3 - 写真プレースホルダ（実写受領後に img へ差し替え）
* .oks-gear - 更新時期カード（写真＋枠見出し＋更新期間＋注記）
* .oks-mante / .oks-chip - 年間メンテ表（gap2pxの列組み）／3色チップ
* .oks-worry - 吹き出し型お悩みカード（下向き三角＋0 3px 0 の影）
* .oks-slashttl - 両脇に傾いた棒を置く見出し（＼text／）
* .oks-cap - 対応内容アイコンカード（FontAwesome 46px相当）
* .oks-point - 5つのポイントカード（ブルー帯見出し＋アイコン）
* .oks-plus - ＋α（丸番号01〜03＋見出し＋本文の横並び）
* .oks-achieve - 官公庁実績ボックス（濃紺地＋写真プレースホルダ3枚）
* .oks-ctaband - 濃紺のCTA帯（コピー＋電話＋黄ボタン）
* .oks-flow - 工事の流れ（3列・丸番号＋点線コネクター）
* .oks-laws - 法令テーブル（gap2pxの3カラム行）
* .oks-form - お問い合わせフォーム（罫線区切りの2カラム行）
* .oks-footer - 濃紺2カラムフッター（左マップ枠／右会社情報）
* .oks-spbar / .oks-ptop - SP固定バー／ページトップの色調整
* .oks-mt-6〜44 - 5px刻みに無い上マージン
*
* ======================================
* 共通SCSSに不足していたもの
* ======================================
*
* ・構造不足 : auto-fit グリッド（grid-N は固定列数のみ。元データは
* minmax(auto-fit) が全セクションの基本レイアウト）。
* sticky ヘッダー（header-bar は fixed、header-sticky は JS前提）。
* 幅autoのフラットボタン（btn は max-width:300px + width:100% 前提）。
* 吹き出し（下向き三角）カード、丸番号＋点線コネクターのフロー図。
* ・値の粒度不足: 余白が 2/6/8/12/14/16/18/22/26/34/38/44/64/74px と5px刻みから外れる。
* フォントも 11/11.5/12.5/13.5/14.5/15.5/19/21/27/38/42px と fz-* に無い。
* 見出しは clamp() の流体指定で、fz-* の固定rem では再現できない。
* ・装飾パターン不足: 45度／115度の repeating-linear-gradient ストライプ地
* （bg-stripe は -45deg・0.03固定）、gap:2px で罫を作る表組み。
* ・状態不足 : 「地色そのものが変わる」hover（ブルー→濃紺／黄→濃紺＋文字反転）。
* hover-bg-* は変数色のみで、濃紺への切替が無い。
* ・指定方向不足: グリッド子要素の align-self:end + justify-self:end（右下寄せ）。
*
*/
/* ==========================================================================
0. 基本
元データ body は line-height / letter-spacing 未指定（= normal）。
scss/site.scss 側で $line_height_base / $letter_spacing_base を normal に
上書きしているため、ここでは追加指定しない。
========================================================================== */
/* --- 幅コンテナ（元データの4種） --- */
.oks-w1200 { max-width: 1200px; margin: 0 auto; }
.oks-w1160 { max-width: 1160px; margin: 0 auto; }
.oks-w1000 { max-width: 1000px; margin: 0 auto; }
.oks-w940 { max-width: 940px; margin: 0 auto; }
/* --- auto-fit グリッド --- */
.oks-cols {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(var(--oks-min, 260px), 1fr));
}
.oks-cols--120 { --oks-min: 120px; }
.oks-cols--140 { --oks-min: 140px; }
.oks-cols--150 { --oks-min: 150px; }
.oks-cols--160 { --oks-min: 160px; }
.oks-cols--200 { --oks-min: 200px; }
.oks-cols--210 { --oks-min: 210px; }
.oks-cols--220 { --oks-min: 220px; }
.oks-cols--240 { --oks-min: 240px; }
.oks-cols--260 { --oks-min: 260px; }
.oks-cols--280 { --oks-min: 280px; }
.oks-cols--320 { --oks-min: 320px; }
.oks-cols--340 { --oks-min: 340px; }
/* auto-fill 版（施工実績：件数が少なくても列幅を保つ） */
.oks-cols--fill { grid-template-columns: repeat(auto-fill, minmax(var(--oks-min, 280px), 1fr)); }
/* --- gap（5px刻みに無い値） --- */
.oks-gap-2 { gap: 2px; }
.oks-gap-12 { gap: 12px; }
.oks-gap-14 { gap: 14px; }
.oks-gap-16 { gap: 16px; }
.oks-gap-18 { gap: 18px; }
.oks-gap-22 { gap: 22px; }
.oks-gap-26 { gap: 26px; }
.oks-gap-22-20 { gap: 22px 20px; }
.oks-gap-8-18 { gap: 8px 18px; }
/* --- margin-top（5px刻みに無い値） --- */
.oks-mt-6 { margin-top: 6px; }
.oks-mt-8 { margin-top: 8px; }
.oks-mt-12 { margin-top: 12px; }
.oks-mt-14 { margin-top: 14px; }
.oks-mt-18 { margin-top: 18px; }
.oks-mt-22 { margin-top: 22px; }
.oks-mt-26 { margin-top: 26px; }
.oks-mt-28 { margin-top: 28px; }
.oks-mt-34 { margin-top: 34px; }
.oks-mt-38 { margin-top: 38px; }
.oks-mt-44 { margin-top: 44px; }
/* --- 文字色 --- */
.oks-yellow { color: #ECE41D; }
.oks-red { color: #a8391f; font-weight: 700; }
/* ==========================================================================
0-2. アニメーション
・MVは読み込み時に @keyframes で下から立ち上げる
・MV以降は IntersectionObserver で .is-in を付与して現れる
・JS無効時に内容が消えないよう、初期状態（非表示）は html.oks-anim が
付いているときだけ効かせる（クラスは head.php の1行スクリプトで付与）
========================================================================== */
@keyframes oks-rise {
from { opacity: 0; transform: translateY(26px); }
to { opacity: 1; transform: none; }
}
/* --- MV：読み込み時（テキストのみ。イラストはアニメーションなし） --- */
.oks-mv__catch { animation: oks-rise 0.8s 0.10s both ease-out; }
.oks-mv__ttl { animation: oks-rise 0.8s 0.22s both ease-out; }
.oks-mv__sub { animation: oks-rise 0.8s 0.34s both ease-out; }
.oks-mv__lead { animation: oks-rise 0.8s 0.46s both ease-out; }
/* --- スクロールで現れる（単体） --- */
.oks-anim .oks-fade {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.oks-anim .oks-fade.is-in { opacity: 1; transform: none; }
/* --- スクロールで現れる（子要素を順番に） --- */
.oks-anim .oks-stagger > * {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.oks-anim .oks-stagger.is-in > * { opacity: 1; transform: none; }
.oks-anim .oks-stagger.is-in > *:nth-child(1) { transition-delay: 0.05s; }
.oks-anim .oks-stagger.is-in > *:nth-child(2) { transition-delay: 0.13s; }
.oks-anim .oks-stagger.is-in > *:nth-child(3) { transition-delay: 0.21s; }
.oks-anim .oks-stagger.is-in > *:nth-child(4) { transition-delay: 0.29s; }
.oks-anim .oks-stagger.is-in > *:nth-child(5) { transition-delay: 0.37s; }
.oks-anim .oks-stagger.is-in > *:nth-child(6) { transition-delay: 0.45s; }
.oks-anim .oks-stagger.is-in > *:nth-child(7) { transition-delay: 0.53s; }
.oks-anim .oks-stagger.is-in > *:nth-child(8) { transition-delay: 0.61s; }
/* --- 動きを減らす設定の環境では無効化 --- */
@media (prefers-reduced-motion: reduce) {
.oks-mv__catch,
.oks-mv__ttl,
.oks-mv__sub,
.oks-mv__lead { animation: none; }
.oks-anim .oks-fade,
.oks-anim .oks-stagger > * {
opacity: 1;
transform: none;
transition: none;
}
}
/* ==========================================================================
1. セクション枠（元データ：上64px／下74px、左右20px）
========================================================================== */
.oks-sec { padding: 64px 20px 74px; }
.oks-sec--light { background: #E6EEF6; }
.oks-sec--pale { background: #EFF5FA; }
.oks-sec--white { background: #fff; }
.oks-sec--f7 { background: #F5F8FB; }
.oks-sec--pt66 { padding-top: 66px; }
.oks-sec--pt0 { padding-top: 0; }
.oks-sec--pt20 { padding-top: 20px; }
.oks-sec--pb56 { padding-bottom: 56px; }
.oks-sec--pb72 { padding-bottom: 72px; }
@media (max-width: 639px) {
.oks-sec { padding: 40px 16px 46px; }
}
/* --- 共通セクション見出し --- */
.oks-eyebrow {
font-size: 14px;
font-weight: 700;
letter-spacing: 0.16em;
color: #58789E;
}
.oks-eyebrow--wide { letter-spacing: 0.18em; }
/* セクション見出し（上の英字ラベルは廃止したため margin-top は持たない）
色は濃いめのブルー #0E3C6E に統一 */
.oks-h2 {
margin: 0;
text-align: center;
font-size: clamp(24px, 3.4vw, 39px);
font-weight: 900;
color: #0E3C6E;
}
.oks-h2--lg { font-size: clamp(27px, 3.6vw, 41px); }
.oks-h2--ls { letter-spacing: 0.02em; }
.oks-h2--dark { font-size: clamp(29px, 3.8vw, 43px); }
/* 見出し内の数字を1文字だけ強調（「5つのポイント！」の5） */
.oks-h2__num {
font-size: 1.85em;
font-weight: 700;
color: #F09813; /* サブカラー */
line-height: 1;
}
.oks-sec__lead {
margin: 14px auto 0;
max-width: 62em;
text-align: center;
font-size: 16.5px;
font-weight: 500;
line-height: 2;
color: #374149;
text-wrap: pretty;
}
.oks-sec__lead--soft { color: #444D57; }
/* スマホでは中央揃えだと行頭が揃わず読みにくいので左揃えにし、文字も少し詰める */
@media (max-width: 639px) {
.oks-sec__lead {
text-align: left;
font-size: 14.5px;
}
/* 指定改行はPCのみ。スマホは画面幅にまかせて自然に折り返す */
.oks-sec__lead--nobr-sp br { display: none; }
}
/* --- 施工実績の見出し：巨大な英字を背景に敷いて和文を重ねる（heading-big--bgtext） --- */
.oks-workshead { position: relative; padding-bottom: 18px; }
.oks-workshead .heading__en {
font-size: clamp(57px, 7.6vw, 105px);
font-weight: 700;
letter-spacing: 0.06em;
color: #1B6FB5;
opacity: 0.1;
}
.oks-workshead .heading__ja {
margin-top: -1.2em;
font-size: clamp(26px, 3.4vw, 29px);
font-weight: 900;
line-height: 1.4;
color: #0E3C6E;
}
/* 和文の下にイエローの短いバー */
.oks-workshead::after {
content: "";
position: absolute;
left: 50%;
bottom: 0;
width: 44px;
height: 3px;
margin-left: -22px;
background: #ECE41D;
}
/* ==========================================================================
2. ヘッダー（sticky・1段・下端3pxブルー罫）
========================================================================== */
.oks-header {
position: sticky;
top: 0;
z-index: 60;
background: #fff;
border-bottom: 3px solid #1B6FB5;
}
.oks-header__inner {
max-width: 1316px; /* 元データ max-width:1280px + 左右padding18px（content-box） */
height: auto;
padding: 8px 18px;
gap: 20px;
flex-wrap: wrap;
}
@media (max-width: 1100px) {
.oks-header__inner { height: auto; padding: 8px 14px; }
}
/* --- ロゴ（テキストロゴ：角丸アイコン＋サブ／社名） --- */
.oks-logo { gap: 11px; }
.oks-logo__icon {
width: 42px;
height: 42px;
border-radius: 8px;
background: #1B6FB5;
color: #ECE41D;
font-size: 16px;
font-weight: 700;
letter-spacing: 0.04em;
}
.oks-logo__sub {
font-size: 12px;
font-weight: 700;
letter-spacing: normal;
line-height: 1.2;
color: #444D57;
}
.oks-logo__name {
font-size: 23px;
font-weight: 900;
letter-spacing: 0.06em;
line-height: 1.2;
color: #0E3C6E;
}
/* フッター用（イエロー地アイコン＋イエロー社名） */
.oks-logo--footer .oks-logo__icon { width: 40px; height: 40px; background: #ECE41D; color: #0E3C6E; }
.oks-logo--footer .oks-logo__sub { color: rgba(255, 255, 255, 0.8); }
.oks-logo--footer .oks-logo__name { font-size: 22px; color: #ECE41D; }
/* --- PCナビ（和文1行・下線アニメ無し・色替えhover） --- */
.oks-nav {
gap: 20px;
flex: 1 1 260px;
flex-wrap: wrap;
/* ロゴと右側（電話・CTA）のちょうど中間に置く */
justify-content: center;
margin-left: 0;
margin-right: 0;
}
.oks-nav .header__nav-item a {
display: block; /* 元データは素の a（EN/JA2段組みではない） */
flex-direction: row;
align-items: normal;
padding: 0;
font-size: 14.5px;
font-weight: 700;
color: #29323C;
}
.oks-nav .header__nav-item a::after { display: none; }
.oks-nav .header__nav-item a:hover { color: #1B6FB5; opacity: 1; }
/* --- 右側：電話＋CTA --- */
.oks-hright {
gap: 10px;
height: auto;
flex-wrap: wrap;
}
.oks-htel {
display: flex;
flex-direction: column;
line-height: 1.05;
padding-right: 12px;
}
.oks-htel:hover { opacity: 0.75; }
.oks-htel__label { font-size: 11px; font-weight: 700; color: #555E68; }
.oks-htel__num { font-size: 28px; font-weight: 700; color: #0E3C6E; }
/* --- SPナビ：英字ラベルなし。日本語と矢印の間に余白を取る --- */
.oks-spnav__link {
justify-content: flex-start;
gap: 14px;
}
.oks-spnav__link::after { margin-left: auto; padding-left: 14px; }
/* --- SPナビ下部の電話ブロック --- */
.oks-spnav-tel {
display: block;
padding: 14px 10px;
color: #fff;
text-align: center;
}
.oks-spnav-tel:hover { opacity: 0.85; }
.oks-spnav-tel__label { display: block; font-size: 12px; font-weight: 700; }
.oks-spnav-tel__num { display: block; font-size: 31px; font-weight: 700; line-height: 1.2; }
.oks-spnav-tel__num i { font-size: 0.6em; margin-right: 8px; }
.oks-spnav-tel__note { display: block; font-size: 12px; font-weight: 500; opacity: 0.85; }
/* ==========================================================================
3. ボタン（フラット・角丸6px・幅auto）
========================================================================== */
.oks-btn {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 6px;
font-weight: 900;
line-height: normal; /* 元データはボタンに line-height 未指定 */
text-align: center;
text-decoration: none;
transition: all 0.3s ease;
}
.oks-btn--sm { padding: 12px 16px; font-size: 14.5px; }
.oks-btn--green { background: #1B6FB5; color: #fff; }
.oks-btn--green:hover { background: #0E3C6E; color: #fff; opacity: 1; }
.oks-btn--yellow { background: #ECE41D; color: #0E3C6E; }
.oks-btn--yellow:hover { background: #0E3C6E; color: #ECE41D; opacity: 1; }
.oks-btn--fmail { padding: 12px 22px; font-size: 15.5px; }
.oks-btn--fmail:hover { background: #fff; color: #0E3C6E; }
/* --- ヘッダーの中間幅対策（1101〜1280px） ---
ハンバーガーに切り替わる 1100px までの帯。屋号が長いぶんロゴが幅を取り、
PCナビが2段に折り返して「工事の流れ」だけ下段に落ちるため、
ロゴ・ナビ・電話・ボタンをまとめて詰めて1行に収める。
※ .oks-nav / .oks-btn--sm の定義より後ろに置くこと（先に書くと上書きされない） */
@media (min-width: 1101px) and (max-width: 1280px) {
.oks-header__inner { gap: 10px; padding: 8px 14px; }
.oks-logo { gap: 8px; }
.oks-logo__name { font-size: 18px; letter-spacing: 0.02em; }
.oks-nav { gap: 12px; flex: 1 1 auto; flex-wrap: nowrap; }
.oks-nav .header__nav-item a { font-size: 13px; white-space: nowrap; }
.oks-hright { gap: 8px; flex-wrap: nowrap; }
.oks-htel { padding-right: 4px; }
.oks-htel__num { font-size: 22px; }
.oks-header .oks-btn--sm { padding: 10px 11px; font-size: 12.5px; white-space: nowrap; }
}
/* ==========================================================================
4. メインビュー
========================================================================== */
.oks-mv {
position: relative;
background: #fff;
overflow: hidden;
}
/* 背景：斜めパターンの画像（mv_bg.webp）＋濃紺のベールの2層。
画像そのものは明るいグリーンなので、白文字の可読性を確保するために
ベールを重ねる。テキスト側（左）を濃く、イラスト側（右）を薄くして
パターンが右側で見えるようにしている。
ベースカラーをブルーに変更したため、緑のパターン画像は hue-rotate で
ブルーに転色している（画像自体の差し替えは不要）。 */
.oks-mv__bg {
position: absolute;
inset: 0;
background-color: #0B2C52;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
filter: hue-rotate(125deg);
}
.oks-mv__veil {
position: absolute;
inset: 0;
background: linear-gradient(
100deg,
rgba(8, 33, 60, 0.6) 0%,
rgba(10, 42, 80, 0.5) 38%,
rgba(11, 44, 82, 0.78) 66%,
rgba(14, 60, 110, 0.6) 100%
);
}
.oks-mv__inner {
position: relative;
max-width: 1328px; /* 元データ max-width:1280px + 左右padding24px（content-box） */
margin: 0 auto;
padding: 56px 24px 40px;
}
.oks-mv__text {
color: #fff;
}
.oks-mv__catch {
font-size: clamp(17px, 1.6vw, 21px);
font-weight: 900;
letter-spacing: 0.06em;
line-height: 1.7;
color: #ECE41D;
}
/* ブランド名が途中で分断されないようにする（中間幅で「サンプ／ル」と割れる） */
.oks-mv__catch-brand { font-size: 1.25em; white-space: nowrap; }
.oks-mv__ttl {
margin: 0;
font-size: clamp(31px, 4.2vw, 55px);
font-weight: 900;
line-height: 1.34;
letter-spacing: 0.01em;
text-wrap: pretty;
}
.oks-mv__sub {
margin-top: 20px;
font-size: clamp(23px, 2.9vw, 39px);
font-weight: 900;
line-height: 1.5;
text-wrap: pretty;
}
.oks-mv__sub-sm { font-size: 0.72em; }
.oks-mv__lead {
margin: 24px 0 0;
font-size: clamp(14.5px, 1.1vw, 16.5px);
font-weight: 500;
line-height: 2.2;
color: rgba(255, 255, 255, 0.85);
text-wrap: pretty;
}
/* イラストはカラム幅より大きく描き、右と下は overflow:hidden で切り落とす。
幅はカラムに対する％で持たせているので、テキスト側へは食い込まない。
ラッパーを height:0 の「行下端のアンカー」にして img を絶対配置している。
こうしないとイラストの高さが行高＝MVの高さを決めてしまい、
画面高に合わせて MV を縮めてもテキストが切れてしまう。 */
.oks-mv__img {
position: relative;
align-self: end;
justify-self: stretch;
height: 0;
margin: 0 -24px 0 0;
}
.oks-mv__img img {
position: absolute;
left: 0;
bottom: -140px; /* 行下端より140px下（=セクション下端より100px下）まで伸ばして切る */
display: block;
width: 116%; /* 少し縮小（128% → 116%） */
max-width: none;
height: auto;
}
/* 見出し内のイエロー下線マーカー */
.oks-mark {
position: relative;
display: inline-block;
padding: 0 0.06em;
}
.oks-mark::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0.02em;
height: 0.13em;
background: #ECE41D;
}
/* PCでは「ヘッダー(63px)＋直下のCTAバー(170px)」を画面高から差し引いた高さにして、
CTAバーの下端がちょうど画面の下に来るようにする。
テキストがこれより高くなる場合は content 側が勝つ（min-height なので潰れない）。 */
/* 画面高に合わせて MV を伸ばすのは、イラストがカラム幅いっぱいに育つ
1400px 以上だけにする。それ未満で高さを固定すると、イラストが
カラム幅に比例して小さくなる一方でセクションだけが高く残り、
イラストの上に大きな余白ができてバランスが崩れる。 */
@media (min-width: 1400px) {
.oks-mv__inner {
height: calc(100vh - 233px);
min-height: 564px; /* テキストブロックが入る下限。これ以上は縮めない */
}
}
/* 中間幅：高さはテキストなりに任せ、イラストは少し大きめにして
右カラムの空きを詰める */
@media (min-width: 897px) and (max-width: 1099px) {
.oks-mv__img img { width: 122%; }
}
@media (max-width: 896px) {
.oks-mv__inner { padding: 44px 20px 0; }
.oks-mv__img { position: static; height: auto; justify-self: stretch; margin: 20px -20px 0; }
.oks-mv__img img { position: static; width: 100%; }
}
/* ==========================================================================
5. ヘッド直下のCTAバー
========================================================================== */
.oks-ctabar {
background: #E6EEF6;
padding: 26px 20px;
border-bottom: 1px solid rgba(27, 111, 181, 0.18);
}
.oks-ctabar__inner { max-width: 1280px; margin: 0 auto; }
/* タブレット幅で3列が2列に折り返して帯が急に高くなるため、最小幅を下げて3列を維持 */
@media (min-width: 897px) and (max-width: 999px) {
.oks-ctabar__inner { --oks-min: 250px; }
}
.oks-telcard {
background: #fff;
border: 2px solid #1B6FB5;
border-radius: 8px;
padding: 16px 18px;
text-align: center;
}
.oks-telcard__label { font-size: 14.5px; font-weight: 900; color: #0E3C6E; }
.oks-telcard__link {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 4px;
color: #0E3C6E;
}
.oks-telcard__link:hover { color: #1B6FB5; opacity: 1; }
.oks-telcard__icon { font-size: 23px; color: #1B6FB5; }
.oks-telcard__num { font-size: 39px; font-weight: 700; line-height: 1; }
.oks-telcard__note { font-size: 12.5px; font-weight: 700; color: #555E68; }
.oks-bnr {
display: grid;
align-content: center;
gap: 4px;
border-radius: 8px;
padding: 18px;
text-align: center;
transition: all 0.3s ease;
}
.oks-bnr--green { background: #1B6FB5; color: #fff; }
.oks-bnr--green:hover { background: #0E3C6E; color: #fff; opacity: 1; }
.oks-bnr--yellow { background: #ECE41D; color: #0E3C6E; }
.oks-bnr--yellow:hover { background: #0E3C6E; color: #fff; opacity: 1; }
.oks-bnr__label {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
font-size: 14.5px;
font-weight: 900;
}
.oks-bnr__label i { font-size: 1.15em; }
.oks-bnr--green .oks-bnr__label { color: #ECE41D; }
.oks-bnr__ttl { font-size: 20px; font-weight: 900; line-height: 1.5; }
.oks-bnr__ttl--lg { font-size: 22px; line-height: 1.4; }
/* ==========================================================================
6. リード（街並み写真＋白グラデ暗幕）
========================================================================== */
.oks-lead {
position: relative;
background: #fff;
padding: 70px 20px 76px;
overflow: hidden;
}
/* 「サンプルの強み」見出し：タイトル全体をイエローマーカーで強調 */
.oks-strengthttl { position: relative; }
/* 白背景で使うマーカー（MVのイエロー下線を明るい面向けに調整） */
.oks-mark--dark::after {
bottom: 0.06em;
height: 0.22em;
background: rgba(236, 228, 29, 0.75);
z-index: -1;
}
.oks-mark--dark { z-index: 0; }
/* 両サイドの人物イラスト（装飾）。下端そろえ。
右側は反転させて中央のテキストを指す向きにする。
中央のテキストと干渉する幅（tablet以下）では非表示。 */
.oks-lead__person {
position: absolute;
bottom: 0;
width: auto;
height: clamp(230px, 24vw, 340px);
pointer-events: none;
user-select: none;
}
/* 中間幅ではテキストに重なるので端寄せ。広い画面だけ中央寄りに配置する。 */
.oks-lead__person--l { left: clamp(0px, 2.5vw, 40px); }
.oks-lead__person--r { right: clamp(0px, 2.5vw, 40px); }
/* 12.5vw は 1400px 以下ではテキストに重なるため、余裕が出る 1440px 以上で適用 */
@media (min-width: 1440px) {
.oks-lead__person--l { left: clamp(0px, 12.5vw, 215px); }
.oks-lead__person--r { right: clamp(0px, 12.5vw, 215px); }
}
@media (max-width: 896px) {
.oks-lead__person { display: none; }
}
.oks-lead__inner {
position: relative;
max-width: 1000px;
margin: 0 auto;
}
.oks-lead__txt {
margin: 30px auto 0;
max-width: 34em; /* brに頼らず、読みやすい幅で自然に折り返す */
font-size: clamp(15.5px, 1.35vw, 17.5px);
font-weight: 500;
line-height: 2.15;
color: #374149;
}
/* 中央揃えの短い段落なので、行長を揃えて座りを良くする。
word-break:auto-phrase で文節の途中では折り返さない */
.oks-lead__txt p {
text-align: center;
text-wrap: balance;
word-break: auto-phrase;
}
/* スマホでは行頭を揃えたいので左揃え */
@media (max-width: 639px) {
.oks-lead__txt,
.oks-lead__txt p { text-align: left; }
}
.oks-lead__pill {
display: inline-block;
margin: 24px auto 0;
background: #0E3C6E;
color: #fff;
border-radius: 6px;
padding: 14px 26px;
font-size: clamp(16px, 1.6vw, 20px);
font-weight: 900;
line-height: 1.7;
}
@media (max-width: 639px) {
.oks-lead { padding: 44px 16px 48px; }
/* 画面幅が狭いぶん、ピルの左右パディングを詰めて文字の入る幅を確保する */
.oks-lead__pill { padding: 14px 19px; }
}
/* ==========================================================================
7. 更新時期の目安
========================================================================== */
/* 写真プレースホルダ（実写受領後に img へ差し替え） */
.oks-ph {
background: #EAF0F6;
border-radius: 6px;
display: grid;
place-items: center;
overflow: hidden;
}
.oks-ph--16-10 { aspect-ratio: 16 / 10; }
.oks-ph--4-3 { aspect-ratio: 4 / 3; border-radius: 8px; }
.oks-ph__body { text-align: center; color: #828A94; }
.oks-ph__en { font-size: 13px; font-weight: 700; letter-spacing: 0.16em; }
.oks-ph__en--sm { font-size: 12.5px; }
.oks-ph__name { font-size: 13px; font-weight: 700; }
.oks-ph__icon { font-size: 43px; color: #C9DBEC; display: block; }
.oks-gear {
display: flex;
flex-direction: column;
gap: 14px;
background: #fff;
border-radius: 10px;
padding: 18px;
}
/* 機器イラスト：素材が250×250の正方形（白背景の不透明PNG）なので、
枠も1:1にして contain で全体を表示する（トリミングなし）。 */
.oks-gear__photo {
width: 80%; /* カード幅に対して80％＝約20％小さく */
margin: 0 auto;
aspect-ratio: 1 / 1;
border-radius: 6px;
overflow: hidden;
background: #fff;
}
.oks-gear__photo img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
.oks-gear__name {
border: 2px solid #1B6FB5;
border-radius: 6px;
padding: 10px 14px;
text-align: center;
font-size: 17px;
font-weight: 900;
line-height: 1.5;
color: #0E3C6E;
}
.oks-gear__years {
background: #F7F9E3;
border-radius: 6px;
padding: 10px 14px;
text-align: center;
}
.oks-gear__years-label { font-size: 13.5px; font-weight: 900; color: #0E3C6E; }
.oks-gear__years-num { font-size: 43px; font-weight: 700; line-height: 1; color: #1B6FB5; }
.oks-gear__years-unit {
font-family: "Zen Kaku Gothic New", system-ui, sans-serif;
font-size: 18px;
font-weight: 900;
}
.oks-gear__note { margin: 0; font-size: 14px; font-weight: 500; line-height: 1.9; color: #444D57; }
.oks-mantebox {
margin-top: 34px;
background: #fff;
border-radius: 10px;
padding: clamp(20px, 2.6vw, 30px);
}
.oks-mantebox__ttl { margin: 0; font-size: 20px; font-weight: 900; color: #0E3C6E; }
.oks-mantebox__note { margin: 8px 0 0; font-size: 14px; font-weight: 500; color: #555E68; }
.oks-mante { margin-top: 18px; }
.oks-mante__col {
display: flex;
flex-direction: column;
background: #EFF5FA;
border-bottom: 2px solid #fff;
}
.oks-mante__head {
background: #1B6FB5;
color: #fff;
text-align: center;
padding: 12px 6px;
font-size: 16px;
font-weight: 900;
}
.oks-mante__body {
display: grid;
gap: 6px;
align-content: start;
justify-items: center;
padding: 14px 10px;
min-height: 64px;
text-align: center;
}
.oks-chip {
border-radius: 4px;
padding: 6px 8px;
font-size: 13px;
font-weight: 900;
line-height: 1.4;
}
.oks-chip--base { background: #1B6FB5; color: #fff; }
.oks-chip--mid { background: #D8E7F3; color: #0E3C6E; }
.oks-chip--top { background: #ECE41D; color: #0E3C6E; }
/* ==========================================================================
8. こんなお悩みございませんか？
========================================================================== */
.oks-worrysec { position: relative; overflow: hidden; }
.oks-worrysec__stripe {
position: absolute;
inset: 0;
/* 元データより薄く・ピッチを細かく（0.05→0.03／42px→24px周期） */
background: repeating-linear-gradient(115deg, rgba(27, 111, 181, 0.03) 0 8px, transparent 8px 24px);
}
/* 吹き出し型のお悩みカード（3列固定 → tablet2列 → SP1列） */
.oks-worrylist {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.oks-worry {
position: relative;
background: #fff;
border: 2px solid #1B6FB5;
border-radius: 14px;
padding: 26px 22px;
text-align: center;
font-size: 17px;
font-weight: 900;
line-height: 1.7;
color: #1A1F26;
box-shadow: 0 3px 0 rgba(27, 111, 181, 0.18);
}
/* 吹き出しの尻尾：ブルーの三角の上に白い三角を重ねて2px枠を作る。
白い三角の底辺をカード下端より2px内側に置き、カードの下枠線を隠して
本体と尻尾がつながって見えるようにしている。 */
.oks-worry::before,
.oks-worry::after {
content: "";
position: absolute;
left: 50%;
width: 0;
height: 0;
transform: translateX(-50%);
border-left-style: solid;
border-right-style: solid;
border-left-color: transparent;
border-right-color: transparent;
}
/* 外側（枠線色） */
.oks-worry::before {
bottom: -14px;
border-left-width: 12px;
border-right-width: 12px;
border-top: 14px solid #1B6FB5;
}
/* 内側（背景色） */
.oks-worry::after {
bottom: -12px;
border-left-width: 9.4px;
border-right-width: 9.4px;
border-top: 14px solid #fff;
}
.oks-worrysec__mid {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
}
.oks-worrysec__illust { display: grid; place-items: center; }
.oks-worrysec__illust img { display: block; width: 100%; max-width: 320px; height: auto; }
/* 両脇に傾いた棒を置く見出し（＼text／） */
.oks-slashttl {
margin: 8px 0 0;
/* flex（ブロックレベル）にしてコンテナ幅を超えないようにする。
gap も幅に応じて詰めることで、狭い画面で棒が外に出るのを防ぐ。 */
display: flex;
justify-content: center;
max-width: 100%;
align-items: end;
gap: clamp(12px, 2vw, 30px);
font-size: clamp(22px, 2.7vw, 33px);
font-weight: 900;
line-height: 1.55;
color: #0E3C6E;
text-wrap: pretty;
}
.oks-slashttl__bar {
width: 3px;
height: 2em; /* 元データ2.6em より短く */
background: #1B6FB5;
border-radius: 2px;
flex-shrink: 0;
}
/* 傾きを深くして外へ開かせる（元データ ±20deg） */
.oks-slashttl__bar--l { transform: rotate(-30deg); }
.oks-slashttl__bar--r { transform: rotate(30deg); }
/* SPでは棒が画面端に迫るので、文字を少し詰めて棒も短くする */
@media (max-width: 479px) {
.oks-slashttl { font-size: clamp(19px, 5vw, 24px); }
.oks-slashttl__bar { height: 1.6em; }
}
/* 対応内容アイコンカード：白地＋ブルーの枠線 */
.oks-cap {
background: #fff;
border: 2px solid #1B6FB5;
border-radius: 8px;
padding: 22px 14px 20px;
text-align: center;
color: #0E3C6E;
transition: background 0.3s ease, transform 0.3s ease;
}
.oks-cap:hover {
background: #E6EEF6;
transform: translateY(-3px);
}
.oks-cap__icon {
display: block;
font-size: 39px;
line-height: 46px;
height: 51px;
color: #1B6FB5;
}
.oks-cap__txt {
margin-top: 8px;
font-size: 18px;
font-weight: 700;
line-height: 1.5;
color: #0E3C6E;
}
@media (max-width: 896px) {
.oks-worrylist { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 639px) {
.oks-worrylist { grid-template-columns: 1fr; }
}
/* ==========================================================================
9. 5つのポイント
========================================================================== */
.oks-point {
display: flex;
flex-direction: column;
border: 2px solid #1B6FB5;
border-radius: 10px;
overflow: hidden;
}
.oks-point__head {
background: #1B6FB5;
color: #fff;
padding: 14px 16px;
text-align: center;
font-size: 18.5px;
font-weight: 900;
line-height: 1.45;
}
/* スマホではカード幅が広がるので、見出しの改行をやめて1行に流す */
@media (max-width: 639px) {
.oks-point__head { font-size: 16px; }
.oks-point__head br { display: none; }
}
.oks-point__body {
display: grid;
gap: 12px;
justify-items: center;
padding: 18px 16px 20px;
}
.oks-point__ico { display: block; width: 78px; height: 78px; object-fit: contain; }
.oks-point__txt { margin: 0; font-size: 14px; font-weight: 500; line-height: 1.9; color: #444D57; }
/* ==========================================================================
9-2. 取り扱いメーカー例
対応内容アイコンカード（.oks-cap）と同じ白地＋2pxブルー枠でそろえる
========================================================================== */
.oks-maker {
display: flex;
align-items: center;
justify-content: center;
min-height: 64px;
padding: 14px 12px;
background: #fff;
border: 2px solid #1B6FB5;
border-radius: 8px;
text-align: center;
font-size: 18px;
font-weight: 700;
line-height: 1.5;
color: #0E3C6E;
}
/* メーカー一覧の下の注記（「その他国内メーカー多数」）。
チップではないので枠は付けず、一覧の中央に小さく添える */
.oks-makers__note {
margin-top: 16px;
text-align: center;
font-size: 16px;
font-weight: 700;
color: #0E3C6E;
}
/* スマホは1列だと縦に長くなりすぎるので2列に組む */
@media (max-width: 639px) {
.oks-makers { grid-template-columns: repeat(2, 1fr); }
.oks-maker { min-height: 56px; font-size: 15px; }
.oks-makers__note { font-size: 14px; }
}
/* ==========================================================================
10. ＋α
========================================================================== */
/* PC：左に丸番号（2行ぶん）／右に見出し＋本文 */
.oks-plus {
display: grid;
grid-template-columns: auto 1fr;
column-gap: 22px;
row-gap: 11px;
align-items: start;
background: #fff;
border-radius: 10px;
padding: clamp(20px, 2.6vw, 30px);
}
.oks-plus__num {
grid-row: 1 / span 2;
display: grid;
place-items: center;
width: 64px;
height: 64px;
border-radius: 50%;
background: #1B6FB5;
color: #ECE41D;
font-size: 31px;
font-weight: 700;
}
.oks-plus__ttl,
.oks-plus__txt { grid-column: 2; }
.oks-plus__ttl {
margin: 0;
font-size: clamp(19px, 2.2vw, 25px);
font-weight: 900;
line-height: 1.5;
color: #0E3C6E;
}
/* 見出しの
はスマホ専用の改行指定。PCは1行に流す */
.oks-plus__ttl br { display: none; }
.oks-plus__txt {
margin: 0;
font-size: 15.5px;
font-weight: 500;
line-height: 2;
color: #444D57;
text-wrap: pretty;
}
/* SP：番号はカード左上の枠にかぶせて置き、見出し・本文は1カラムで全幅に流す */
@media (max-width: 639px) {
.oks-plus {
position: relative;
grid-template-columns: 1fr;
row-gap: 10px;
/* 上余白は、かぶせた番号のぶんだけ広げて見出しと重ならないようにする */
padding: 30px 18px 22px;
}
.oks-plus__num {
position: absolute;
top: -15px;
left: -6px;
grid-row: auto;
width: 44px;
height: 44px;
font-size: 22px;
box-shadow: 0 2px 6px rgba(26, 31, 38, 0.18);
}
.oks-plus__ttl,
.oks-plus__txt { grid-column: 1; }
/* 指定位置で2行に割る。320px級の狭い端末でも2行に収まるよう字を少し詰める */
.oks-plus__ttl {
font-size: clamp(16.5px, 5vw, 19px);
text-align: center;
}
.oks-plus__ttl br { display: inline; }
}
/* ==========================================================================
11. 官公庁の実績
========================================================================== */
/* 左：テキスト（内側に余白）／右：画像を上下右の余白なしで敷く。
角丸で画像を切るため overflow:hidden。 */
.oks-achieve {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
background: #0E3C6E;
color: #fff;
border-radius: 10px;
overflow: hidden;
}
/* 上下の padding だけ16px積んで、ボックス＝画像の縦幅を少し伸ばす
（画像は行の高さに追従するので、上下右の余白ゼロは保たれる） */
.oks-achieve__body {
align-self: center;
padding: calc(clamp(22px, 3vw, 60px) + 16px) clamp(22px, 2vw, 60px);
}
.oks-achieve__ttl { font-size: clamp(20px, 2.3vw, 28px); font-weight: 900; line-height: 1.6; }
.oks-achieve__txt {
margin: 14px 0 0;
font-size: 15px;
font-weight: 500;
line-height: 1.95;
color: rgba(255, 255, 255, 0.85);
}
/* 画像は絶対配置にして行の高さに影響させない。
→ ボックスの高さは左のテキストだけで決まり、画像はその高さに合わせて敷かれる。 */
.oks-achieve__img { position: relative; }
.oks-achieve__img img {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transform: scaleX(-1); /* 水平方向に反転して掲載 */
}
/* 1カラムに落ちる幅では、画像の枠に高さを与える */
@media (max-width: 639px) {
.oks-achieve__img { min-height: 200px; }
}
/* ==========================================================================
12. CTA帯
========================================================================== */
.oks-ctaband { background: #0E3C6E; padding: 30px 20px; }
.oks-ctaband__ttl {
color: #fff;
font-size: clamp(18px, 2vw, 24px);
font-weight: 900;
line-height: 1.6;
}
/* SPは見出し・電話・ボタンが1カラムに積まれるので、見出しも中央ぞろえにする */
@media (max-width: 639px) {
.oks-ctaband__ttl { text-align: center; }
}
/* 電話カードと黄ボタンは同じ高さ・同じ幅に揃える。
grid の stretch は同一行内でしか効かないため、折り返しても揃うよう
両方に同じ min-height（PC時の電話カードの実寸100px）を持たせる。 */
.oks-ctaband__tel,
.oks-ctaband__btn { min-height: 100px; }
.oks-ctaband__tel {
display: grid;
align-content: center;
background: #fff;
border-radius: 8px;
padding: 14px;
text-align: center;
color: #0E3C6E;
transition: all 0.3s ease;
}
.oks-ctaband__tel:hover { background: #ECE41D; color: #0E3C6E; opacity: 1; }
.oks-ctaband__tel-label { font-size: 13.5px; font-weight: 900; }
.oks-ctaband__tel-num { font-size: 35px; font-weight: 700; line-height: 1.1; }
.oks-ctaband__tel-note { font-size: 12px; font-weight: 700; }
.oks-ctaband__btn {
display: grid;
place-items: center;
background: #ECE41D;
border-radius: 8px;
padding: 18px 14px;
text-align: center;
color: #0E3C6E;
font-size: 21px;
font-weight: 900;
transition: all 0.3s ease;
}
.oks-ctaband__btn:hover { background: #fff; color: #0E3C6E; opacity: 1; }
/* ==========================================================================
13. 設置工事の流れ（丸番号＋点線コネクター）
========================================================================== */
.oks-flow {
position: relative;
display: grid;
grid-template-columns: repeat(6, 1fr); /* PCは6ステップを1列に納める */
gap: 30px 18px;
}
.oks-flow__item {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
padding-top: 6px;
text-align: center;
}
.oks-flow__line {
position: absolute;
top: 39px;
left: calc(50% + 40px);
right: calc(-50% + 31px);
height: 2px;
background: repeating-linear-gradient(90deg, rgba(27, 111, 181, 0.45) 0 6px, transparent 6px 12px);
}
.oks-flow__circle {
position: relative;
z-index: 1;
display: grid;
place-items: center;
width: 74px; /* 元データ 68px + border 3px×2（content-box） */
height: 74px;
border-radius: 50%;
background: #fff;
border: 3px solid #1B6FB5;
}
.oks-flow__no { font-size: 33px; font-weight: 700; line-height: 1; color: #1B6FB5; }
.oks-flow__txt {
font-size: 15.5px;
font-weight: 900;
line-height: 1.8;
color: #1A1F26;
text-wrap: pretty;
}
/* 1列に収まらない幅では3列 → 1列に落とす。
3列時は接続線を残し、行末（3の倍数）の線だけ消す。
※6番目の線はPHP側で最初から出力していない。 */
@media (max-width: 1100px) {
.oks-flow { grid-template-columns: repeat(3, 1fr); }
.oks-flow__item:nth-child(3n) .oks-flow__line { display: none; }
}
/* SP：1列の縦並び。丸番号を左に置き、番号どうしを縦の点線でつなぎ、
テキストは番号の右に配置する。 */
@media (max-width: 639px) {
.oks-flow {
grid-template-columns: 1fr;
gap: 0;
}
.oks-flow__item {
display: grid;
grid-template-columns: 74px 1fr;
align-items: center;
column-gap: 16px;
padding-top: 0;
padding-bottom: 22px;
text-align: left;
}
.oks-flow__item:last-child { padding-bottom: 0; }
.oks-flow__circle { grid-column: 1; }
.oks-flow__txt { grid-column: 2; }
/* 縦の点線コネクター（最終ステップ以外） */
.oks-flow__line { display: none; }
.oks-flow__item::before {
content: "";
position: absolute;
top: 74px;
bottom: 0;
left: 36px;
width: 2px;
background: repeating-linear-gradient(180deg, rgba(27, 111, 181, 0.45) 0 6px, transparent 6px 12px);
}
.oks-flow__item:last-child::before { content: none; }
}
/* ==========================================================================
14. 法令テーブル
========================================================================== */
.oks-laws {
background: #fff;
border-radius: 10px;
overflow: hidden;
border: 1px solid rgba(26, 31, 38, 0.12);
}
.oks-laws__head {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 20px;
border-bottom: 3px solid #a8391f;
}
.oks-laws__head-ttl { font-size: clamp(17px, 2vw, 23px); font-weight: 900; color: #1A1F26; }
.oks-laws__body { display: grid; gap: 2px; padding: 16px 20px 20px; }
.oks-laws__name {
display: grid;
place-items: center;
background: #1B6FB5;
color: #fff;
padding: 18px;
font-size: 18px;
font-weight: 900;
}
.oks-laws__target,
.oks-laws__penalty {
background: #F3F6F9;
padding: 18px;
font-size: 14.5px;
line-height: 1.85;
}
.oks-laws__target { font-weight: 500; color: #374149; }
.oks-laws__penalty { font-weight: 700; color: #a8391f; }
/* ==========================================================================
15. お問い合わせ
========================================================================== */
.oks-contact__lead {
margin: 12px 0 0;
text-align: center;
font-size: 16.5px;
font-weight: 700;
color: #444D57;
}
/* 電話は本社の1枚のみ。940pxいっぱいに伸びると間延びするので幅を絞って中央に置く */
.oks-ctel-wrap { display: flex; justify-content: center; }
.oks-ctel-wrap .oks-ctel { width: 100%; max-width: 420px; }
.oks-ctel {
display: block;
border: 2px solid #1B6FB5;
border-radius: 8px;
padding: 16px;
text-align: center;
color: #0E3C6E;
transition: all 0.3s ease;
}
.oks-ctel:hover { background: #E6EEF6; color: #0E3C6E; opacity: 1; }
.oks-ctel__label { font-size: 13.5px; font-weight: 900; }
.oks-ctel__num { font-size: 37px; font-weight: 700; line-height: 1.1; }
/* --------------------------------------------------------------------------
CMSフォーム（cms_ajax / cms_id=7 / design_pattern=1）の見た目上書き
CMS側の mail-form.css は body 内の で後から読み込まれるため、
詳細度が同じだとCMS側が勝つ。そのため
`.oks-form .form-contents.form-pattern-1 …` と1段深く当てている。
-------------------------------------------------------------------------- */
.oks-form {
margin-top: 26px;
border: 1px solid rgba(26, 31, 38, 0.14);
border-radius: 10px;
overflow: hidden;
}
/* 外枠の余白はラッパー側で持つので、CMSのpaddingは落とす */
.oks-form .form-contents.form-pattern-1 {
padding: 0;
background: #fff;
}
/* dt/dd を float から2カラムgridへ置き換え（ラベルセルを行の高さいっぱいに） */
.oks-form .form-contents.form-pattern-1 form dl {
display: grid;
grid-template-columns: 280px 1fr;
margin-bottom: 0;
}
.oks-form .form-contents.form-pattern-1 form dl dt {
float: none;
width: auto;
margin-right: 0;
display: flex;
align-items: center;
padding: 16px 18px;
background: #EDF2F7;
border-bottom: 1px solid rgba(26, 31, 38, 0.1);
font-size: 15px;
font-weight: 900;
color: #1A1F26;
}
.oks-form .form-contents.form-pattern-1 form dl dt span {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
}
.oks-form .form-contents.form-pattern-1 form dl dd {
padding: 18px;
border-bottom: 1px solid rgba(26, 31, 38, 0.1);
}
/* 必須バッジ：CMSの ::before をそのまま使い、色・形だけ変えて右端へ寄せる */
.oks-form .form-contents.form-pattern-1 dl dt span.required::before {
order: 2;
margin-left: auto;
margin-right: 0;
top: 0;
padding: 3px 7px;
border-radius: 3px;
background: #a8391f;
color: #fff;
font-size: 12px;
font-weight: 900;
line-height: 1.5;
}
/* 入力欄 */
.oks-form .form-contents.form-pattern-1 dd .textarea,
.oks-form .form-contents.form-pattern-1 dd input.textarea {
height: auto;
padding: 11px 12px;
border: 1px solid rgba(26, 31, 38, 0.25);
border-radius: 4px;
font-size: 15px;
font-family: inherit;
color: #1A1F26;
background: #fff;
transition: border-color 0.3s ease;
}
.oks-form .form-contents.form-pattern-1 dd textarea.textarea { resize: vertical; }
.oks-form .form-contents.form-pattern-1 dd .textarea:focus {
border-color: #1B6FB5;
outline: none;
}
/* 送信ボタン */
.oks-form .form-contents.form-pattern-1 .submit-btn {
width: auto;
min-width: 300px;
margin: 22px auto;
padding: 16px 40px;
background: #1B6FB5;
border: 1px solid #1B6FB5;
border-radius: 6px;
color: #fff;
font-size: 18px;
font-weight: 900;
font-family: inherit;
}
.oks-form .form-contents.form-pattern-1 .submit-btn::before { background-color: #fff; }
.oks-form .form-contents.form-pattern-1 .submit-btn:hover {
background: #0E3C6E;
border-color: #0E3C6E;
color: #fff;
}
/* 送信完了・エラー表示 */
.oks-form .form-contents.form-pattern-1 .form-thanks-msg {
margin: 24px 18px;
border: 1px solid #1B6FB5;
}
.oks-form .form-contents.form-pattern-1 .form-thanks-msg .back-home-btn a {
background: #1B6FB5;
border-color: #1B6FB5;
border-radius: 6px;
font-weight: 900;
}
.oks-form .form-contents.form-pattern-1 .form-thanks-msg .back-home-btn a:hover {
background: #0E3C6E;
}
.oks-form .form-contents.form-pattern-1 .form-err-msg { margin: 18px; }
/* ラベル1カラム化（CMS側は1024px切替。他セクションと揃えて896pxで切替える） */
@media (max-width: 896px) {
.oks-form .form-contents.form-pattern-1 form dl { grid-template-columns: 1fr; }
.oks-form .form-contents.form-pattern-1 form dl dt {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 10px;
}
.oks-form .form-contents.form-pattern-1 form dl dd { padding-top: 16px; }
.oks-form .form-contents.form-pattern-1 .submit-btn { min-width: 0; width: 260px; }
}
/* ==========================================================================
99. フッター（濃紺2カラム：左マップ枠／右会社情報）
========================================================================== */
.oks-footer { background: #0E3C6E; color: #fff; }
.oks-footer__inner {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
max-width: 1280px;
margin: 0 auto;
}
.oks-footer__map {
min-height: 280px;
background: #0A2A50;
display: grid;
place-items: center;
border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.oks-footer__embed { height: 100%; min-height: 280px; border-radius: 0; }
.oks-footer__map-ph { text-align: center; padding: 24px; }
.oks-footer__map-icon { display: block; font-size: 59px; line-height: 63px; color: #ECE41D; }
.oks-footer__map-en {
margin-top: 10px;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.18em;
color: rgba(236, 228, 29, 0.9);
}
.oks-footer__map-note {
margin-top: 4px;
font-size: 13.5px;
font-weight: 500;
color: rgba(255, 255, 255, 0.7);
}
.oks-footer__body { padding: 40px clamp(20px, 4vw, 44px); }
.oks-footer__info {
margin-top: 16px;
font-size: 14px;
font-weight: 500;
line-height: 1.95;
color: rgba(255, 255, 255, 0.85);
}
/* SPでは事業所名のあとで改行して、住所を次の行に落とす */
@media (max-width: 639px) {
.oks-footer__office { display: block; }
}
.oks-footer__cta {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-top: 20px;
}
.oks-ftel {
display: flex;
align-items: center;
gap: 10px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.28);
border-radius: 6px;
padding: 12px 18px;
color: #fff;
transition: all 0.3s ease;
}
.oks-ftel:hover { background: #fff; color: #0E3C6E; opacity: 1; }
.oks-ftel__label { font-size: 12.5px; font-weight: 900; }
.oks-ftel__num { font-size: 25px; font-weight: 700; line-height: 1; }
.oks-fnav {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 8px 18px;
margin-top: 22px;
font-size: 14px;
font-weight: 700;
}
.oks-fnav a { color: rgba(255, 255, 255, 0.85); }
.oks-fnav a:hover { color: #ECE41D; opacity: 1; }
.oks-footer__copyright {
margin-top: 22px;
padding-top: 16px;
border-top: 1px solid rgba(255, 255, 255, 0.16);
font-size: 12.5px;
font-weight: 500;
color: rgba(255, 255, 255, 0.6);
}
@media (max-width: 896px) {
.oks-footer__map { border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
}
/* SPは画面下の固定バー（お電話・資料請求・お問い合わせ）と役割が重複するため、
フッターのTEL・お問い合わせボタンとナビは表示しない */
@media (max-width: 639px) {
.oks-footer__cta,
.oks-fnav { display: none; }
}
/* 固定バー（実寸66px）が出る幅では、その高さぶんフッター下に余白を足して
コピーライトがバーに隠れないようにする */
@media (max-width: 896px) {
.oks-footer__body { padding-bottom: 86px; }
}
/* ==========================================================================
100. SP固定バー／ページトップ
========================================================================== */
.oks-spbar .sp-fixed-bar__link {
font-size: 12px;
font-weight: 700;
color: #0E3C6E;
}
.oks-spbar .sp-fixed-bar__link i { display: block; font-size: 17px; margin-bottom: 3px; color: #1B6FB5; }
.oks-ptop .page-top__link { background: #1B6FB5; color: #fff; }
.oks-ptop .page-top__link:hover { background: #0E3C6E; }
/* SP固定バーと重ならないよう、バーの高さ分だけ持ち上げる */
@media (max-width: 896px) {
.oks-ptop { bottom: 74px; }
}