@charset "UTF-8";
/*
 * ======================================
 * 追加クラス一覧（共通SCSS取り込み検討用）
 * ======================================
 *
 * .okd-inner / --1100 / --1000 / --880   - 内側の幅（1200px基準。左右余白 clamp(20px,5vw,40px)）
 * .okd-sec / --sub / --pb-s / --list      - セクション上下余白（clamp で 375〜1280px の間で縮小）
 * .okd-stack-lg / .okd-stack-md           - 縦積み（gap で要素間を空ける）
 * .okd-split                              - 2カラム（auto-fit。狭い幅で自動的に縦積み）
 * .okd-heading / __en / __ja / __bar / __lead / --left / --light - セクション見出し（英字＋日本語＋水色バー）
 * .okd-btn / --sm / --outline             - ピル型ボタン（水色 → hover 濃紺）
 * .okd-media / --4x3 / --4x5 / --3x2 / --16x9 / --shadow - 写真枠（比率固定＋角丸）
 * .okd-ph                                 - 写真差し込み待ちのプレースホルダー（ストライプ）
 * .okd-header / .okd-nav / .okd-toggle / .okd-spnav - ヘッダー（PC2段→スクロールで1段）・SPメニュー
 * .okd-hero / .okd-crumbs                 - 下層ページタイトル（濃紺グラデ＋パンくず右寄せ）
 * .okd-cta                                - お問い合わせCTA（リビング写真＋紺の重ね／見出し・電話・フォームの3列）
 * .okd-footer                             - フッター（会社情報＋地図）
 * .okd-side-cta / .okd-pagetop           - 追従ボタン（PC右端縦・400pxスクロールで表示）・ページトップ
 * .okd-mv                                 - TOPメインビジュアル（写真全面＋白ボックス）
 * .okd-svc-card                           - 事業カード（写真の横並び。触れた1枚が広がる／SPは横スクロール）・.okd-svc-full（画面幅いっぱいの枠）
 * .okd-rsn-card                           - 選ばれる理由カード（写真の背面にずらした色面）
 * .okd-post-card / .okd-post-grid / .okd-chip / .okd-date - 新着情報カード
 * .okd-profile                            - 会社概要の項目表（dl）
 *
 * ======================================
 * 共通SCSSに不足していたもの
 * ======================================
 *
 * 【値の粒度不足】
 *   - 余白・文字サイズを clamp() で連続的に縮める utility がない（mb-* 等は固定値＋tablet半減の2段階のみ）
 *   - .container は 1320px 以下で 95%＋10px になり、デザインの「1200px＋左右 clamp(20px,5vw,40px)」と合わない
 * 【指定方向不足】
 *   - ヘッダーの PC/SP 切替が 1100px 固定。デザインは 1180px で切り替える
 * 【状態不足】
 *   - header-bar は fixed 固定。sticky＋スクロールで2段→1段に縮む状態がない
 * 【構造不足】
 *   - PCヘッダーの「上段：電話・CTA／下段：ナビ」の2段構成がない
 *   - 画面右端の縦書き追従ボタン（電話・お問い合わせ）がない
 *   - 写真の背面に色面をずらして敷くカード（.okd-rsn-card）がない
 * 【装飾パターン不足】
 *   - 写真差し込み待ちのプレースホルダー（ストライプ＋ラベル）がない
 *
 */

/* ==========================================================
   変数（値は claude-design-output の実数）
   ========================================================== */
:root {
  --okd-navy: #14508C;
  --okd-navy-d: #0F406F;
  --okd-sky: #2E9BD6;
  --okd-sky-d: #1F8BC7;
  --okd-gray: #F4F8FC;
  --okd-icon-bg: #E6F0F8;
  --okd-tint: #E9F4F9;
  --okd-ink: #22313F;
  --okd-txt: #3A4A5C;
  --okd-sub: #4A5A6C;
  --okd-mute: #5A6A7C;
  --okd-line: #E1EAF3;
  --okd-line-2: #D6E2EE;
  --okd-ease: .4s ease;
  --okd-hd-h: 68px;
  --okd-r-lg: 0;
  --okd-r-md: 0;
  --okd-r-sm: 0;
  --okd-shadow: 0 18px 40px rgba(20, 80, 140, .12);
  /* 文字は全体を明朝体（日本語：Zen Old Mincho／英字：Cormorant） */
  --okd-font: "Zen Old Mincho", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", serif;
  --okd-font-en: "Cormorant", "Zen Old Mincho", serif;
  /* 青のグラデーション（水色 → 濃紺） */
  --okd-grad: linear-gradient(90deg, #3FA4DB 0%, #14508C 100%);
  --okd-grad-d: linear-gradient(135deg, #1B5E9E 0%, #0B2F55 100%);
}
@media (min-width: 1180px) { :root { --okd-hd-h: 112px; } }

/* ==========================================================
   ベース（共通 base の値をデザインに合わせて戻す）
   ========================================================== */
body { font-family: var(--okd-font); font-size: 1.6rem; color: var(--okd-ink); line-height: 1.6; letter-spacing: normal; }
/* 共通CSS（main.css）で英字フォントを指定している部品も英字の明朝（Cormorant）にそろえる */
.heading__en, .heading__sub, .heading__number, .header__nav-en, .sp-nav__en, .footer-bottom__copyright, .news-list__date, .blog-list__date, .font-en { font-family: var(--okd-font-en); }
.header__tel, .btn-cta-tel, .footer-cta__tel { font-family: var(--okd-font); }
/* 青のグラデーション文字（英字見出し・番号） */
.okd-heading:not(.okd-heading--light) .okd-heading__en,
.okd-rsn-card__no, .okd-reason-card__no, .okd-svc-item__no, .okd-flow__no { background-image: var(--okd-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding-block: .12em; margin-block: -.12em; }
/* Cormorant の数字は「3」「4」などが下に下がる形が標準なので、高さのそろった数字にする */
.okd-rsn-card__no, .okd-reason-card__no, .okd-svc-item__no, .okd-flow__no, .okd-svc-card__no, .okd-date, .okd-mv__en, .footer-bottom__copyright, .news-list__date, .blog-list__date { font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; }
@media (max-width: 896px) { body { font-size: 1.6rem; } }
body.is-nav-open { overflow: hidden; }
a { color: var(--okd-navy); transition: color var(--okd-ease), background-color var(--okd-ease), border-color var(--okd-ease), box-shadow var(--okd-ease), transform .45s ease, width .45s ease, opacity var(--okd-ease); }
a:hover { opacity: 1; color: var(--okd-sky); }
img { display: block; }
svg { flex-shrink: 0; }
button, input, textarea, select { font-family: inherit; }
.spbr { display: none; }
@media (max-width: 639px) { .spbr { display: inline; } }
[data-aos="fade-up"] { transform: translate3d(0, 20px, 0); }
/* スクロールで表示のたびに動かす（common.js が画面に入ったら .is-in を付け、画面の下へ戻ったら外す）
   写真は左から幕が開くように＋中の写真を少し拡大から戻す（.okd-reveal）／カードは下からふわっと順番に（.okd-inview）
   カードの hover の transform とぶつからないよう、位置は translate・拡大は scale（個別プロパティ）で動かす */
.okd-js .okd-inview { opacity: 0; }
.okd-js .okd-inview.is-in { opacity: 1; animation: okd-in .8s cubic-bezier(.2, .7, .2, 1) var(--okd-delay, 0s) backwards; }
@keyframes okd-in { from { opacity: 0; translate: 0 28px; } to { opacity: 1; translate: 0 0; } }
.okd-js .okd-reveal { clip-path: inset(0 100% 0 0); }
.okd-js .okd-reveal.is-in { clip-path: none; animation: okd-reveal 1.1s cubic-bezier(.77, 0, .18, 1) var(--okd-delay, 0s) backwards; }
@keyframes okd-reveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.okd-js .okd-reveal.is-in .okd-media__img { animation: okd-reveal-img 1.6s cubic-bezier(.2, .7, .2, 1) var(--okd-delay, 0s) backwards; }
@keyframes okd-reveal-img { from { scale: 1.15; } to { scale: 1; } }
@media (prefers-reduced-motion: reduce) {
  .okd-js .okd-inview, .okd-js .okd-reveal { opacity: 1; clip-path: none; }
  .okd-js .is-in, .okd-js .is-in .okd-media__img { animation: none; }
}

/* ==========================================================
   レイアウト
   ========================================================== */
.okd-inner { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 40px); }
.okd-inner--1100 { max-width: 1100px; }
.okd-inner--1000 { max-width: 1000px; }
.okd-inner--880 { max-width: 880px; }
.okd-sec { padding: clamp(80px, 10vw, 136px) 0; }
.okd-sec--sub { padding: clamp(80px, 10vw, 128px) 0; }
.okd-sec--pb-s { padding-bottom: clamp(40px, 5vw, 64px); }
.okd-sec--list { padding: clamp(64px, 8vw, 112px) 0 clamp(80px, 10vw, 128px); }
.okd-bg-gray { background: linear-gradient(180deg, #F6F9FD 0%, #E6EFF8 100%); }
.okd-stack-lg { display: flex; flex-direction: column; gap: clamp(36px, 5vw, 60px); }
.okd-stack-md { display: flex; flex-direction: column; gap: clamp(18px, calc(13.86px + 1.105vw), 28px); }
.okd-center { display: flex; justify-content: center; }
.okd-center-text { text-align: center; align-items: center; }
.okd-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: clamp(40px, 6vw, 80px); align-items: center; }
.okd-split--wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
/* 広い幅（TOPのABOUT US・選ばれる理由）：写真を大きく見せるため、他のセクションより左右の余白を詰めて広げる（タブレット以下は通常の余白） */
@media (min-width: 897px) { .okd-inner.okd-inner--wide { max-width: 1440px; padding: 0 clamp(20px, 3vw, 40px); } }
/* TOPのABOUT US：写真の列を広めにとる（タブレット以下は縦積み） */
.okd-split.okd-about { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: clamp(40px, 5vw, 72px); }
@media (max-width: 896px) { .okd-split.okd-about { grid-template-columns: 1fr; } }
.okd-ib { display: inline-block; }
.okd-ib--gap { margin-right: .6em; }

/* ==========================================================
   見出し・本文
   ========================================================== */
.okd-heading { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.okd-heading--left { align-items: flex-start; text-align: left; }
.okd-heading .okd-heading__en { font-family: var(--okd-font-en); font-size: clamp(15px, calc(13.34px + 0.442vw), 19px); font-weight: 600; letter-spacing: .22em; line-height: 1.6; color: var(--okd-sky); }
.okd-heading .okd-heading__ja { margin-top: 0; font-size: clamp(22px, 3vw, 34px); font-weight: 700; color: var(--okd-navy); letter-spacing: .06em; line-height: 1.5; }
.okd-heading__bar { display: block; width: 48px; height: 2px; margin-top: 6px; background: var(--okd-grad); }
.okd-heading__lead { margin-top: 6px; font-size: clamp(14px, calc(13.17px + 0.221vw), 16px); font-weight: 500; line-height: 2; color: var(--okd-txt); text-wrap: pretty; }
.okd-heading--light .okd-heading__en { color: #9FD3F0; }
.okd-heading--light .okd-heading__ja { color: #fff; }
.okd-heading--light .okd-heading__lead { color: #E6EFF8; font-weight: 400; }
.okd-sec-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: clamp(16px, calc(12.69px + 0.884vw), 24px); }
.okd-txt-stack { display: flex; flex-direction: column; gap: clamp(12px, calc(10.34px + 0.442vw), 16px); }
.okd-txt { font-size: clamp(13.5px, calc(12.67px + 0.221vw), 15.5px); line-height: 2.15; color: var(--okd-txt); text-wrap: pretty; }
.okd-txt--sm { font-size: clamp(13px, calc(12.17px + 0.221vw), 15px); line-height: 2.05; }
.okd-gap-line { display: block; height: .6em; }

/* ==========================================================
   ボタン
   ========================================================== */
.okd-btn { display: inline-flex; align-items: center; gap: 14px; padding: clamp(11px, calc(8.51px + 0.663vw), 17px) clamp(26px, calc(20.2px + 1.547vw), 40px); border-radius: 0; border: 1.5px solid var(--okd-sky); background: var(--okd-sky); color: #fff; font-size: clamp(13px, calc(12.17px + 0.221vw), 15px); font-weight: 700; letter-spacing: .06em; line-height: 1.6; }
.okd-btn:hover { background: var(--okd-navy); border-color: var(--okd-navy); color: #fff; }
.okd-btn--sm { gap: 8px; padding: 11px clamp(16px, calc(12.69px + 0.884vw), 24px); font-size: clamp(12.5px, calc(11.88px + 0.166vw), 14px); }
.okd-btn--outline { padding: 15px clamp(22px, calc(17.03px + 1.326vw), 34px); background: #fff; border-color: var(--okd-navy); color: var(--okd-navy); }
.okd-btn--outline:hover { background: var(--okd-navy); color: #fff; }
.okd-btn--outline-sky { gap: 10px; padding: 15px clamp(22px, calc(18.69px + 0.884vw), 30px); background: #fff; color: var(--okd-sky); white-space: nowrap; }
.okd-btn--outline-sky:hover { background: var(--okd-sky); border-color: var(--okd-sky); color: #fff; }
.okd-btn--white { background: #fff; border-color: #fff; color: var(--okd-navy); }
.okd-btn--white:hover { background: var(--okd-navy); border-color: var(--okd-navy); color: #fff; }
/* 塗りのボタンは青のグラデーション。hover でグラデーションを濃紺側へゆっくり寄せる */
.okd-btn:not(.okd-btn--outline):not(.okd-btn--outline-sky):not(.okd-btn--white),
.okd-cta__mail, .okd-side-cta__mail, .okd-spnav__mail, .okd-footer__mail { background: linear-gradient(90deg, #3FA4DB 0%, #1F6FB0 50%, #0F406F 100%) 0 0 / 200% 100%; border-color: transparent; background-origin: border-box; transition: background-position .6s ease, color var(--okd-ease), box-shadow var(--okd-ease), width .45s ease, opacity var(--okd-ease); }
.okd-btn:not(.okd-btn--outline):not(.okd-btn--outline-sky):not(.okd-btn--white):hover,
.okd-cta__mail:hover, .okd-side-cta__mail:hover, .okd-spnav__mail:hover, .okd-footer__mail:hover { background: linear-gradient(90deg, #3FA4DB 0%, #1F6FB0 50%, #0F406F 100%) 100% 0 / 200% 100%; border-color: transparent; color: #fff; opacity: 1; }

/* ==========================================================
   写真枠・プレースホルダー
   ========================================================== */
.okd-media { position: relative; overflow: hidden; width: 100%; background: #E9F0F7; }
.okd-media > .okd-media__img,
.okd-media > .okd-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.okd-media--4x3 { aspect-ratio: 4 / 3; }
.okd-media--4x5 { aspect-ratio: 4 / 5; max-height: 620px; }
.okd-media--3x2 { aspect-ratio: 3 / 2; }
.okd-media--16x9 { aspect-ratio: 16 / 9; }
.okd-media--16x10 { aspect-ratio: 16 / 10; }
.okd-media--shadow { box-shadow: 0 24px 60px rgba(20, 80, 140, .12); }
.okd-r-lg { border-radius: var(--okd-r-lg); }
.okd-r-md { border-radius: var(--okd-r-md); }
.okd-ph { display: flex; align-items: center; justify-content: center; padding: 16px; background: repeating-linear-gradient(135deg, #E9F0F7 0 12px, #E1EAF3 12px 24px); }
.okd-ph__label { font-family: ui-monospace, Menlo, monospace; font-size: 12px; line-height: 1.6; color: #6A7B8C; background: rgba(255, 255, 255, .8); padding: 6px 10px; border-radius: 0; text-align: center; }

/* ==========================================================
   ヘッダー
   ========================================================== */
/* 白帯なし：写真（TOPのMV・下層のタイトル）の上に重ね、文字は白抜き。スクロール後・メニュー表示中は紺のグラデーションの帯を敷く */
.okd-header.header-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: transparent; border-bottom: 1px solid transparent; box-shadow: none; transition: background-color .45s ease, border-color .45s ease, box-shadow .45s ease; }
.okd-header.header-bar::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(11, 47, 85, .94) 0%, rgba(20, 80, 140, .9) 60%, rgba(31, 111, 176, .88) 100%); opacity: 0; transition: opacity .45s ease; pointer-events: none; }
.okd-header.header-bar.is-scrolled,
body.is-nav-open .okd-header.header-bar { border-bottom-color: rgba(255, 255, 255, .12); box-shadow: 0 6px 24px rgba(11, 47, 85, .18); }
.okd-header.header-bar.is-scrolled::before,
body.is-nav-open .okd-header.header-bar::before { opacity: 1; }
.okd-header .okd-logo,
.okd-header .okd-header__tel,
.okd-header .okd-nav { text-shadow: 0 0 14px rgba(10, 30, 60, .45); }
.okd-header.is-scrolled .okd-logo,
.okd-header.is-scrolled .okd-header__tel,
.okd-header.is-scrolled .okd-nav { text-shadow: none; }
.okd-header .okd-header__inner { max-width: 1360px; height: var(--okd-hd-h); padding: 0 clamp(16px, 3vw, 40px); gap: clamp(16px, calc(12.69px + 0.884vw), 24px); transition: height .45s ease; }
.okd-logo.header-logo { flex-shrink: 0; }
.okd-logo .header-logo__body { gap: 3px; }
/* 英字は社名（日本語。株式会社は1文字分）とほぼ同じ幅になるよう、文字サイズを日本語に連動させる */
.okd-logo { --okd-logo-fs: clamp(24px, 2vw, 28px); }
.okd-logo .okd-logo__ja { display: flex; align-items: center; font-size: var(--okd-logo-fs); font-weight: 700; color: #fff; letter-spacing: .08em; line-height: 1.2; }
/* 「株式会社」は1文字分の枠に2×2で納める（株＝左上・式＝右上・会＝左下・社＝右下） */
.okd-logo__kk { display: grid; grid-template-columns: repeat(2, .5em); grid-template-rows: repeat(2, .5em); flex-shrink: 0; width: 1em; height: 1em; margin-right: .14em; letter-spacing: 0; }
.okd-logo__kk > span { display: flex; align-items: center; justify-content: center; font-size: .5em; line-height: 1; }
.okd-logo .okd-logo__en { font-family: var(--okd-font-en); font-size: calc(var(--okd-logo-fs) * .42); font-weight: 600; letter-spacing: .16em; color: rgba(255, 255, 255, .88); line-height: 1; }
.okd-logo:hover .okd-logo__ja { color: #fff; }

.okd-header__pc { display: none; flex-direction: column; align-items: flex-end; gap: 10px; transition: gap .45s ease; }
.okd-header .okd-header__top { display: flex; height: auto; gap: clamp(13px, calc(10.1px + 0.773vw), 20px); max-height: 60px; overflow: hidden; transition: max-height .45s ease, opacity .35s ease; }
.okd-header__tel { display: flex; align-items: center; gap: 10px; }
.okd-header__tel-num { display: flex; align-items: center; gap: 6px; font-family: var(--okd-font); font-size: clamp(21px, calc(19.76px + 0.331vw), 24px); color: #fff; letter-spacing: .04em; line-height: 1.1; }
.okd-header__tel-num svg { color: #fff; }
.okd-header__tel:hover .okd-header__tel-num { color: #9FD3F0; }
.okd-header__hours { font-size: 11px; color: rgba(255, 255, 255, .85); letter-spacing: .04em; line-height: 1.25; text-align: center; }

.okd-nav.header__nav { display: flex; gap: 30px; margin: 0; }
.okd-nav .header__nav-item a { display: block; padding: 4px 0 6px; }
.okd-nav .header__nav-item a::after { bottom: 0; height: 1px; background: #fff; }
.okd-nav .header__nav-item a:hover::after { width: 100%; left: 0; }
.okd-nav .header__nav-item.is-current a::after { width: 100%; left: 0; transform: none; }
.okd-nav .header__nav-ja { margin-top: 0; font-size: 15px; font-weight: 500; color: #fff; letter-spacing: .06em; line-height: 1.6; transition: color var(--okd-ease); }
.okd-nav .header__nav-item a:hover .header__nav-ja,
.okd-nav .header__nav-item.is-current .header__nav-ja { color: #fff; }

.okd-header__sp { display: flex; align-items: center; gap: 8px; }
.okd-iconbtn { width: 44px; height: 44px; border-radius: 0; border: 1px solid rgba(255, 255, 255, .6); background: rgba(255, 255, 255, .08); display: flex; align-items: center; justify-content: center; color: #fff; }
.okd-iconbtn:hover { color: #fff; background: rgba(255, 255, 255, .2); }
.okd-header__toggle-space { width: 48px; height: 48px; }

/* ハンバーガー（header の外に置き、ヘッダー右端に重ねる） */
.okd-toggle.nav-toggle { display: block; top: calc((var(--okd-hd-h) - 48px) / 2); right: clamp(16px, 3vw, 40px); z-index: 210; width: 48px; height: 48px; border-radius: 0; background: var(--okd-grad); backdrop-filter: none; transition: opacity var(--okd-ease); }
.okd-toggle.nav-toggle:hover { opacity: .85; }
.okd-toggle .nav-toggle__line { left: 14px; width: 20px; height: 1.5px; background: #fff; transform: none; transition: transform .4s ease, opacity .3s ease, top .4s ease; }
.okd-toggle .nav-toggle__line:nth-child(1) { top: 17.25px; }
.okd-toggle .nav-toggle__line:nth-child(2) { top: 23.25px; }
.okd-toggle .nav-toggle__line:nth-child(3) { top: 29.25px; }
.okd-toggle.is-active .nav-toggle__line:nth-child(1) { top: 23.25px; transform: rotate(45deg); }
.okd-toggle.is-active .nav-toggle__line:nth-child(3) { top: 23.25px; transform: rotate(-45deg); }

/* SPメニュー（ヘッダーの下から画面下まで） */
.okd-spnav.sp-nav { top: var(--okd-hd-h); display: block; background: #fff; border-top: 1px solid #E3EBF3; padding: clamp(20px, calc(16.69px + 0.884vw), 28px) clamp(16px, 5vw, 40px) 40px; overscroll-behavior: contain; transform: translateY(-12px); transition: opacity .45s ease, transform .45s ease, visibility .45s; }
.okd-spnav.sp-nav.is-open { transform: none; }
.okd-spnav .okd-spnav__list { max-width: none; text-align: left; }
.okd-spnav .okd-spnav__item { border-bottom: 1px solid #E3EBF3; }
.okd-spnav .okd-spnav__item:first-child { border-top: none; }
.okd-spnav .okd-spnav__link { padding: clamp(12px, calc(9.51px + 0.663vw), 18px) 4px; color: var(--okd-navy); font-size: clamp(14px, calc(13.17px + 0.221vw), 16px); font-weight: 500; line-height: 1.6; }
.okd-spnav .okd-spnav__link::after { content: none; }
.okd-spnav .okd-spnav__link:hover { background: none; color: var(--okd-sky); }
.okd-spnav .okd-spnav__en { margin: 0; padding: 0; opacity: 1; font-size: 11px; letter-spacing: .2em; color: var(--okd-sky); }
.okd-spnav .okd-spnav__bottom { max-width: none; margin-top: 24px; }
.okd-spnav__btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.okd-spnav__tel,
.okd-spnav__mail { display: flex; align-items: center; justify-content: center; gap: 6px; height: 46px; padding: 0 14px; border-radius: 0; color: #fff; white-space: nowrap; }
.okd-spnav__tel { background: var(--okd-navy); font-family: var(--okd-font); font-size: clamp(14px, 3.7vw, 18px); letter-spacing: .02em; }
.okd-spnav__mail { background: var(--okd-sky); font-size: clamp(12.5px, 3.3vw, 14px); font-weight: 700; letter-spacing: .04em; }
.okd-spnav__tel:hover,
.okd-spnav__mail:hover { color: #fff; opacity: .85; }
.okd-spnav__hours { margin-top: 10px; text-align: center; font-size: 12px; color: var(--okd-mute); }

@media (min-width: 1180px) {
  .okd-header__pc { display: flex; }
  .okd-header__sp,
  .okd-toggle.nav-toggle,
  .okd-spnav.sp-nav { display: none; }
  .okd-header.is-scrolled .okd-header__inner { height: 76px; }
  .okd-header.is-scrolled .okd-header__pc { gap: 0; }
  .okd-header.is-scrolled .okd-header__top { max-height: 0; opacity: 0; pointer-events: none; }
}

/* ==========================================================
   下層ページタイトル
   ========================================================== */
.okd-hero.page-hero { background: var(--okd-navy); }
/* 写真は左側の約3分の2。右は濃いネイビーのベタで、写真の中ほどからグラデーションでネイビーに切り替わる */
.okd-hero { --okd-hero-photo: 80%; --okd-hero-fade: 36%; }
@media (max-width: 639px) { .okd-hero { --okd-hero-photo: 100%; --okd-hero-fade: 55%; } }
.okd-hero__bg { position: absolute; inset: 0; z-index: 0; background: var(--okd-navy-d); }
.okd-hero .okd-hero__photo { position: absolute; top: 0; left: 0; right: auto; width: var(--okd-hero-photo); height: 100%; object-fit: cover; }
/* 写真の上は濃いネイビー60%（タイトルを読みやすく）→ fade の位置から写真の右端まで、段階を細かく刻んでゆるやかにベタへ */
.okd-hero .okd-hero__overlay { background: linear-gradient(90deg,
  rgba(15, 64, 111, .6) 0%,
  rgba(15, 64, 111, .6) var(--okd-hero-fade),
  rgba(15, 64, 111, .66) calc(var(--okd-hero-fade) + (var(--okd-hero-photo) - var(--okd-hero-fade)) * .25),
  rgba(15, 64, 111, .76) calc(var(--okd-hero-fade) + (var(--okd-hero-photo) - var(--okd-hero-fade)) * .5),
  rgba(15, 64, 111, .9) calc(var(--okd-hero-fade) + (var(--okd-hero-photo) - var(--okd-hero-fade)) * .78),
  #0F406F var(--okd-hero-photo),
  #0F406F 100%); pointer-events: none; }
.okd-hero .okd-hero__content { max-width: 1360px; margin: 0 auto; padding: calc(var(--okd-hd-h) + clamp(48px, 6vw, 80px)) clamp(16px, 3vw, 40px) clamp(56px, 7vw, 96px); flex-direction: row; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: clamp(13px, calc(10.1px + 0.773vw), 20px) clamp(21px, calc(16.44px + 1.215vw), 32px); }
.okd-hero__title { display: flex; flex-direction: column; gap: 10px; }
.okd-hero .okd-hero__en { font-size: clamp(40px, 5.4vw, 72px); font-weight: 400; color: #fff; letter-spacing: .06em; line-height: 1; text-shadow: 0 0 18px rgba(15, 64, 111, .55); }
.okd-hero .okd-hero__ja { margin-top: 0; font-size: clamp(19px, 2vw, 24px); font-weight: 700; color: #fff; letter-spacing: .08em; line-height: 1.6; text-shadow: 0 0 18px rgba(15, 64, 111, .55); }
.okd-crumbs.breadcrumb { padding: 0 0 4px; font-size: 12.5px; }
.okd-crumbs .okd-crumbs__list { gap: 10px; }
.okd-crumbs .okd-crumbs__item { gap: 10px; color: #fff; }
.okd-crumbs .okd-crumbs__item:not(:last-child)::after { content: "›"; margin: 0; color: #fff; }
.okd-crumbs .okd-crumbs__link { display: flex; align-items: center; color: #8FD0F2; }
.okd-crumbs .okd-crumbs__link:hover { color: #fff; text-decoration: none; }
.okd-crumbs .okd-crumbs__current { color: #fff; }
@media (max-width: 639px) {
  .okd-crumbs.breadcrumb { font-size: 11px; }
  .okd-crumbs .okd-crumbs__link svg { width: 12px; height: 12px; }
  .okd-crumbs .okd-crumbs__list,
  .okd-crumbs .okd-crumbs__item { gap: 5px; }
}

/* ==========================================================
   お問い合わせCTA
   ========================================================== */
.okd-cta.footer-cta { padding: clamp(48px, 6vw, 72px) 0; }
/* 背景はリビングの写真（cta-bg。contact-cta.php の style で指定）に紺を重ねて文字を読みやすくする */
.okd-cta.footer-cta { background: var(--okd-navy) center / cover no-repeat; }
.okd-cta.footer-cta::before { background: linear-gradient(120deg, rgba(11, 47, 85, .92) 0%, rgba(20, 80, 140, .82) 55%, rgba(46, 155, 214, .7) 100%); }
.okd-cta .okd-cta__inner { display: block; gap: 0; padding: 0 clamp(20px, 5vw, 40px); }
/* 見出し｜電話｜フォームの3列。タブレットは見出しを上に置いて下に2列、スマホは縦積み */
.okd-cta__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; gap: clamp(13px, calc(10.1px + 0.773vw), 20px) clamp(16px, 2vw, 28px); }
.okd-cta__grid > .okd-heading { gap: 8px; align-self: center; grid-row: 1 / span 2; }
/* 受付時間は電話の枠の下（PC・タブレットは電話と同じ列の2段目） */
.okd-cta__tel { grid-column: 2; grid-row: 1; }
.okd-cta__mail { grid-column: 3; grid-row: 1; }
.okd-cta__hours { grid-column: 2; grid-row: 2; margin-top: -4px; font-size: 12.5px; color: #E6EFF8; text-align: center; }
.okd-cta__grid > .okd-heading .okd-heading__lead { margin-top: 2px; font-size: clamp(13px, calc(12.38px + 0.166vw), 14.5px); line-height: 1.9; }
@media (max-width: 1023px) {
  .okd-cta__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .okd-cta__grid > .okd-heading { grid-column: 1 / -1; grid-row: 1; align-items: center; text-align: center; margin-bottom: 8px; }
  .okd-cta__tel { grid-column: 1; grid-row: 2; }
  .okd-cta__mail { grid-column: 2; grid-row: 2; }
  .okd-cta__hours { grid-column: 1; grid-row: 3; }
}
@media (max-width: 639px) {
  .okd-cta__grid { grid-template-columns: minmax(0, 1fr); }
  .okd-cta__grid > .okd-heading, .okd-cta__tel, .okd-cta__mail, .okd-cta__hours { grid-column: auto; grid-row: auto; }
  .okd-cta__hours { margin: -4px 0 6px; }
}
.okd-cta__tel,
.okd-cta__mail { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: clamp(20px, 2.2vw, 28px) 20px; border-radius: 0; text-align: center; }
.okd-cta__tel { background: #fff; color: var(--okd-navy); }
.okd-cta__tel:hover { color: var(--okd-navy); box-shadow: 0 0 0 3px var(--okd-sky); }
.okd-cta__mail { background: var(--okd-sky); color: #fff; gap: 10px; }
.okd-cta__mail:hover { color: #fff; background: var(--okd-sky-d); }
.okd-cta__label { font-size: clamp(12.5px, calc(12.17px + 0.088vw), 13.5px); font-weight: 700; letter-spacing: .06em; }
.okd-cta__num { display: flex; align-items: center; gap: 8px; font-family: var(--okd-font); font-size: clamp(28px, 2.6vw, 34px); font-weight: 300; letter-spacing: .04em; line-height: 1.2; }
.okd-cta__num svg { color: var(--okd-sky); }
.okd-cta__form { display: flex; align-items: center; gap: 10px; font-size: clamp(17px, 1.6vw, 20px); font-weight: 700; letter-spacing: .06em; }

/* ==========================================================
   フッター
   ========================================================== */
.okd-footer { background: #fff; border-top: 1px solid #E3EBF3; }
.okd-footer .okd-footer__body { padding: 0; }
.okd-footer .okd-footer__inner { max-width: 1200px; padding: clamp(56px, 7vw, 88px) clamp(20px, 5vw, 40px); display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: clamp(36px, 5vw, 56px); align-items: stretch; }
.okd-footer .okd-footer__info { flex: 1 1 400px; max-width: 440px; min-width: min(100%, 400px); display: flex; flex-direction: column; gap: clamp(16px, calc(12.69px + 0.884vw), 24px); margin-bottom: 0; font-size: inherit; color: inherit; line-height: 1.6; }
.okd-footer .okd-footer__logo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 0; }
.okd-footer__logo { --okd-logo-fs: clamp(28px, calc(26.34px + 0.442vw), 32px); }
.okd-footer__logo-ja { display: flex; align-items: center; font-size: var(--okd-logo-fs); font-weight: 700; color: var(--okd-navy); letter-spacing: .08em; line-height: 1.2; }
.okd-footer__logo-en { font-family: var(--okd-font-en); font-size: calc(var(--okd-logo-fs) * .42); font-weight: 600; letter-spacing: .16em; color: var(--okd-sky); }
.okd-footer__addr { display: flex; flex-direction: column; gap: 6px; font-size: clamp(12.5px, calc(11.88px + 0.166vw), 14px); line-height: 1.9; color: var(--okd-txt); }
.okd-footer__btns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 12px; }
.okd-footer__tel,
.okd-footer__mail { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 15px clamp(10px, calc(7.51px + 0.663vw), 16px); border-radius: 0; color: #fff; white-space: nowrap; line-height: 1.6; }
.okd-footer__tel { background: var(--okd-navy); font-family: var(--okd-font); font-size: clamp(16px, calc(15.17px + 0.221vw), 18px); letter-spacing: .04em; }
.okd-footer__tel:hover { background: var(--okd-navy-d); color: #fff; }
.okd-footer__mail { background: var(--okd-sky); font-size: clamp(12.5px, calc(11.88px + 0.166vw), 14px); font-weight: 700; letter-spacing: .06em; }
.okd-footer__mail:hover { background: var(--okd-navy); color: #fff; }
.okd-footer .okd-footer__nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px clamp(10px, calc(7.51px + 0.663vw), 16px); padding-top: 20px; border-top: 1px solid #E3EBF3; margin-top: auto; }
.okd-footer__nav a { display: flex; align-items: center; gap: 6px; min-height: 28px; font-size: 13.5px; font-weight: 500; white-space: nowrap; }
.okd-footer__nav a::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--okd-sky); flex-shrink: 0; }
.okd-footer .okd-footer__map { flex: 999 1 480px; width: auto; height: auto; min-width: min(100%, 320px); min-height: 320px; margin-top: 0; border-radius: 0; border: 1px solid var(--okd-line); }
.okd-footer__map iframe { min-height: 320px; }
.okd-footer .okd-footer__copy { background: linear-gradient(90deg, #0B2F55 0%, #14508C 60%, #1F6FB0 100%); padding: 18px clamp(20px, 5vw, 40px); }
.okd-footer__copy .footer-bottom__copyright { font-family: var(--okd-font-en); font-size: 12px; letter-spacing: .12em; color: #DCE8F4; }

/* ==========================================================
   追従ボタン・ページトップ
   ========================================================== */
.okd-side-cta { position: fixed; right: 0; top: 50%; z-index: 90; display: none; flex-direction: column; align-items: flex-end; gap: 4px; transform: translate(24px, -50%); opacity: 0; pointer-events: none; transition: opacity .45s ease, transform .45s ease; }
.okd-side-cta.is-show { transform: translate(0, -50%); opacity: 1; pointer-events: auto; }
.okd-side-cta a { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 60px; padding: clamp(14px, calc(10.69px + 0.884vw), 22px) 0; border-radius: 0; color: #fff; border: 2px solid #fff; border-right: none; box-shadow: 0 8px 24px rgba(20, 80, 140, .2); }
.okd-side-cta .okd-side-cta__label { writing-mode: vertical-rl; font-size: clamp(13px, calc(12.17px + 0.221vw), 15px); font-weight: 700; letter-spacing: .16em; line-height: 1.6; }
.okd-side-cta__tel { background: var(--okd-navy); }
.okd-side-cta__tel:hover { width: 68px; background: var(--okd-navy-d); color: #fff; }
.okd-side-cta__mail { background: var(--okd-sky); }
.okd-side-cta__mail:hover { width: 68px; background: var(--okd-sky-d); color: #fff; }
@media (min-width: 768px) { .okd-side-cta { display: flex; } }


.okd-pagetop.page-top { right: 12px; bottom: 12px; z-index: 91; transform: none; transition: opacity .4s ease, visibility .4s; }
.okd-pagetop .okd-pagetop__link { width: 36px; border-radius: 0; height: 36px; border: 1.5px solid var(--okd-navy); background: #fff; color: var(--okd-navy); box-shadow: 0 6px 18px rgba(20, 80, 140, .16); }
.okd-pagetop .okd-pagetop__link:hover { background: var(--okd-navy); color: #fff; border-color: #fff; transform: none; }
@media (min-width: 768px) {
  .okd-pagetop.page-top { right: 10px; bottom: 8px; }
  .okd-pagetop .okd-pagetop__link { width: 40px; height: 40px; }
}

/* ==========================================================
   TOP：メインビジュアル
   ========================================================== */
.okd-mv { position: relative; overflow: hidden; background: var(--okd-gray); }
.okd-mv #slideshow { position: relative; height: 100svh; min-height: 640px; max-height: 1080px; }
/* スマホは写真を画面いっぱいにせず低めに（390px幅で約420px） */
@media (max-width: 639px) {
  .okd-mv #slideshow { height: calc(min(108vw, 450px) + var(--okd-hd-h)); min-height: calc(380px + var(--okd-hd-h)); }
  /* スマホは以前の見せ方のまま：キャッチは下寄せで強めの影 */
  .okd-mv .okd-mv__box { inset: auto 20px 28px; max-width: none; margin: 0; padding: 0; }
  .okd-mv .okd-mv__catch,
  .okd-mv .okd-mv__sub { text-shadow: 0 0 18px rgba(15, 40, 70, .75), 0 2px 6px rgba(15, 40, 70, .45); }
  .okd-mv .okd-mv__en { display: none; }
  .okd-mv .okd-mv__sub { font-size: 13px; }
  .okd-mv .okd-mv__catch { font-size: min(28px, calc((100vw - 40px) / 12)); }
}
/* CMSスライダー（フェード）の枠を #slideshow の高さに合わせる。スライドの位置は Swiper が付けるので触らない */
.okd-mv #cms-slider-1-1-area,
.okd-mv #slideshow .slider_wrapper { --swiper-wrapper-height: 100%; height: 100%; }
.okd-mv #slideshow .main_slider__outer { height: 100%; }
.okd-mv #slideshow img { width: 100%; height: 100%; object-fit: cover; }
.okd-mv #slideshow .okd-ph { position: absolute; inset: 0; width: 100%; height: 100%; }
.okd-mv #slideshow .okd-ph { align-items: flex-start; justify-content: flex-end; padding: clamp(16px, 3vw, 40px) clamp(16px, 4.5vw, 72px); }
/* 写真全体を暗くして白文字を読みやすくする */
.okd-mv #slideshow::after { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(10, 25, 45, .42); pointer-events: none; }
/* キャッチは枠なしの白文字。位置はコンテンツ幅（.okd-inner と同じ1200px）の左端にそろえ、上下中央に置く（PC・スマホ共通） */
.okd-mv__box { position: absolute; z-index: 2; inset: 0; max-width: 1200px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 40px); display: flex; flex-direction: column; justify-content: center; gap: clamp(14px, 1.6vw, 22px); pointer-events: none; }
.okd-mv__box > * { max-width: 660px; pointer-events: auto; }
.okd-mv__en { font-family: var(--okd-font-en); font-size: 12px; font-weight: 500; letter-spacing: .3em; line-height: 1.6; color: #fff; }
.okd-mv__catch { font-size: clamp(20px, calc((100vw - 84px) / 12.5), 44px); font-weight: 700; color: #fff; line-height: 1.45; letter-spacing: .04em; white-space: nowrap; }
.okd-mv__sub { font-size: clamp(14px, 1.1vw, 15.5px); line-height: 2; color: #fff; text-wrap: pretty; }
.okd-mv__en,
.okd-mv__catch,
.okd-mv__sub { text-shadow: 0 0 18px rgba(15, 40, 70, .5), 0 2px 6px rgba(15, 40, 70, .35); }
/* 下中央のスクロール表示（線の中をバーが上から下へ流れる） */
.okd-mv__scroll { position: absolute; z-index: 2; left: 50%; bottom: clamp(16px, 2.5vw, 32px); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; user-select: none; }
.okd-mv__scroll-text { font-family: var(--okd-font-en); font-size: 10px; font-weight: 500; letter-spacing: .2em; line-height: 1; color: rgba(255, 255, 255, .75); }
.okd-mv__scroll-line { position: relative; width: 1px; height: clamp(32px, 3.4vw, 48px); background: rgba(255, 255, 255, .3); overflow: hidden; }
.okd-mv__scroll-line::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 50%; background: #fff; animation: okd-scroll 1.8s ease-in-out infinite; }
@keyframes okd-scroll { 0% { transform: translateY(-100%); } 100% { transform: translateY(200%); } }
@media (max-width: 639px) { .okd-mv__scroll { display: none; } }
/* ページ全体のローダー（TOPのみ）：MVの写真の1枚目が出るまで画面を覆う。読み込み後（.okd-loader.is-hidden／.okd-mv.is-loaded）にふわっと消し、キャッチの枠をふわっと出す */
.okd-loader { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: #fff; user-select: none; transition: opacity .7s ease, visibility .7s ease; }
.okd-loader__inner { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.okd-loader__ja { font-size: clamp(20px, 2vw, 24px); font-weight: 700; color: var(--okd-navy); letter-spacing: .08em; line-height: 1.2; }
.okd-loader__en { font-family: var(--okd-font-en); font-size: 11px; font-weight: 500; letter-spacing: .3em; color: var(--okd-sky); line-height: 1; }
.okd-loader__spin { width: 36px; height: 36px; margin-top: 22px; border: 3px solid rgba(46, 155, 214, .2); border-top-color: var(--okd-sky); border-radius: 50%; animation: okd-spin 1s linear infinite; }
@keyframes okd-spin { to { transform: rotate(360deg); } }
.okd-loader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.okd-mv__box { opacity: 0; transform: translateY(24px); transition: opacity .9s ease .2s, transform .9s ease .2s; }
.okd-mv.is-loaded .okd-mv__box { opacity: 1; transform: none; }

/* ==========================================================
   TOP：事業カード
   ========================================================== */
/* 写真を横に並べ、触れた1枚が広がる（PC）。最初は 01 が広く、他を触るとその1枚が広がり残りは細くなる。
   写真の全面に紺のグラデーションを重ね、白抜き文字で番号・事業名。細い間は事業名を縦書き、広がると横書きにして説明と右下の矢印をふわっと出す。
   セクションの内側の幅を閉じて画面幅いっぱい（両端に少しだけ余白）に出す。タブレット・スマホは横スクロール（1枚ずつ止まる） */
.okd-svc-full { margin-top: clamp(36px, 5vw, 60px); padding: 0 clamp(12px, 1.4vw, 20px); }
.okd-svc-more { margin-top: clamp(36px, 5vw, 60px); }
.okd-svc-cards { display: flex; gap: clamp(6px, .6vw, 10px); }
.okd-svc-card { position: relative; flex: 1 1 0; min-width: 0; height: clamp(440px, 36vw, 560px); display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; padding: clamp(24px, 2.6vw, 38px) clamp(22px, 2.4vw, 36px) clamp(24px, 2.6vw, 36px); background: var(--okd-grad-d); color: #fff; overflow: hidden; isolation: isolate; transition: flex .6s cubic-bezier(.22, .61, .36, 1), opacity .45s ease; }
.okd-svc-card:hover { color: #fff; }
.okd-svc-card__bg { position: absolute; inset: 0; z-index: -1; background: center / cover no-repeat; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1), filter .6s ease; pointer-events: none; user-select: none; }
.okd-svc-card__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 47, 85, .1) 0%, rgba(11, 47, 85, .28) 40%, rgba(11, 47, 85, .9) 100%), linear-gradient(135deg, rgba(46, 155, 214, .3) 0%, rgba(46, 155, 214, 0) 60%); }
.okd-svc-card:hover .okd-svc-card__bg { transform: scale(1.06); filter: brightness(1.08); }
.okd-svc-card__head { display: flex; flex-direction: column; gap: 6px; }
.okd-svc-card__no { font-family: var(--okd-font-en); font-size: clamp(30px, calc(24px + 1.2vw), 44px); font-weight: 400; line-height: 1; letter-spacing: .04em; color: #9FD3F0; }
.okd-svc-card__ttl { font-size: clamp(19px, calc(16.5px + .6vw), 25px); font-weight: 600; color: #fff; letter-spacing: .06em; line-height: 1.6; word-break: keep-all; overflow-wrap: anywhere; }
.okd-svc-card__txt { width: min(340px, calc(100% - 20px)); min-width: 260px; padding-right: clamp(56px, 5vw, 76px); max-height: 0; opacity: 0; overflow: hidden; font-size: clamp(13.5px, calc(12.67px + .221vw), 15px); line-height: 2; color: #fff; text-wrap: pretty; transition: opacity .45s ease, max-height .6s ease; }
.okd-svc-card__no, .okd-svc-card__ttl, .okd-svc-card__txt { text-shadow: 0 2px 14px rgba(10, 30, 60, .45); }
.okd-svc-card__arrow { position: absolute; right: 0; bottom: 0; width: clamp(56px, 5vw, 76px); height: clamp(50px, 4.4vw, 64px); display: flex; align-items: center; justify-content: center; background: #fff; color: var(--okd-navy); opacity: 0; transition: opacity .45s ease, background-color .6s ease, color .6s ease; }
.okd-svc-card:hover .okd-svc-card__arrow { background: var(--okd-navy); color: #fff; }
@media (min-width: 1024px) {
  .okd-svc-card.is-active,
  .okd-svc-card:hover,
  .okd-svc-card:focus-visible { flex-grow: 2.8; }
  .okd-svc-cards:has(.okd-svc-card:hover) .okd-svc-card:not(:hover),
  .okd-svc-cards:has(.okd-svc-card:focus-visible) .okd-svc-card:not(:focus-visible) { flex-grow: 1; opacity: .85; }
  .okd-svc-card:is(.is-active, :hover, :focus-visible) .okd-svc-card__txt,
  .okd-svc-card:is(.is-active, :hover, :focus-visible) .okd-svc-card__arrow { max-height: 200px; opacity: 1; transition-delay: .2s; }
  .okd-svc-cards:has(.okd-svc-card:hover) .okd-svc-card.is-active:not(:hover) .okd-svc-card__txt,
  .okd-svc-cards:has(.okd-svc-card:hover) .okd-svc-card.is-active:not(:hover) .okd-svc-card__arrow { max-height: 0; opacity: 0; transition-delay: 0s; }
  .okd-svc-card:not(:hover) .okd-svc-card__bg { transform: none; }
  /* 細い間は事業名を縦書き（途中で折り返さない）。広がったら横書きに戻す */
  .okd-svc-card__head { align-items: flex-start; gap: 14px; }
  .okd-svc-card__ttl { writing-mode: vertical-rl; white-space: nowrap; font-size: clamp(18px, 1.5vw, 22px); letter-spacing: .16em; line-height: 1.4; animation: okd-fade .5s ease both; }
  .okd-svc-card:is(.is-active, :hover, :focus-visible) .okd-svc-card__ttl { writing-mode: horizontal-tb; font-size: clamp(22px, 1.9vw, 28px); letter-spacing: .06em; line-height: 1.6; animation-name: okd-fade-2; }
  .okd-svc-cards:has(.okd-svc-card:hover) .okd-svc-card.is-active:not(:hover) .okd-svc-card__ttl { writing-mode: vertical-rl; font-size: clamp(18px, 1.5vw, 22px); letter-spacing: .16em; line-height: 1.4; animation-name: okd-fade; }
}
/* 縦書き⇔横書きの切り替えをふわっと見せる（同じ動きを名前違いで2つ持ち、切り替えのたびに再生させる） */
@keyframes okd-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes okd-fade-2 { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 1023px) {
  /* 画面幅いっぱいまで横に流し、1枚ずつ止まる。説明・矢印はすべて表示 */
  .okd-svc-full { padding: 0; }
  .okd-svc-cards { padding: 0 clamp(20px, 5vw, 40px) 4px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 clamp(20px, 5vw, 40px); -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .okd-svc-cards::-webkit-scrollbar { display: none; }
  .okd-svc-card { flex: 0 0 min(72vw, 400px); height: min(110vw, 500px); scroll-snap-align: start; }
  .okd-svc-card__txt { width: auto; min-width: 0; max-height: none; opacity: 1; }
  .okd-svc-card__arrow { opacity: 1; }
}

/* ==========================================================
   TOP：選ばれる理由カード
   ========================================================== */
.okd-rsn-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(16px, 2vw, 28px); width: 100%; max-width: 560px; margin: 0 auto; }
@media (min-width: 820px) { .okd-rsn-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; } }
.okd-rsn-card { --okd-rsn-off: clamp(14px, calc(11.52px + 0.663vw), 20px); display: flex; flex-direction: column; gap: clamp(18px, calc(14.69px + 0.884vw), 26px); }
.okd-rsn-card__visual { position: relative; padding-left: var(--okd-rsn-off); }
.okd-rsn-card__deco { position: absolute; left: 0; top: var(--okd-rsn-off); bottom: calc(var(--okd-rsn-off) * -1); width: calc(100% - var(--okd-rsn-off)); border-radius: var(--okd-r-md); background: var(--okd-icon-bg); pointer-events: none; user-select: none; }
.okd-rsn-card__body { display: flex; flex-direction: column; gap: clamp(10px, calc(8.34px + 0.442vw), 14px); padding-top: clamp(10px, calc(8.34px + 0.442vw), 14px); }
.okd-rsn-card__head { display: flex; align-items: center; gap: clamp(12px, calc(10.34px + 0.442vw), 16px); }
.okd-rsn-card__no { font-family: var(--okd-font-en); font-size: clamp(44px, calc(37.37px + 1.768vw), 60px); font-weight: 400; line-height: .85; color: var(--okd-sky); }
.okd-rsn-card__ttl { font-size: clamp(17px, calc(16.17px + 0.221vw), 19px); font-weight: 700; color: var(--okd-navy); letter-spacing: .04em; line-height: 1.45; word-break: keep-all; overflow-wrap: anywhere; }
.okd-rsn-card__txt { font-size: clamp(13px, calc(12.38px + 0.166vw), 14.5px); line-height: 2; color: var(--okd-txt); text-wrap: pretty; }

/* ==========================================================
   TOP：施工の流れ・ご相談枠
   ========================================================== */
.okd-flow { list-style: none; padding: 0; margin: 0 auto; width: 100%; max-width: 560px; display: grid; grid-template-columns: minmax(0, 1fr); }
.okd-flow__step { position: relative; display: flex; gap: 18px; }
.okd-flow__mark { position: relative; flex-shrink: 0; width: 64px; display: flex; justify-content: center; align-items: flex-start; }
.okd-flow__step:not(:last-child) .okd-flow__mark::before { content: ""; position: absolute; left: 50%; top: 32px; width: 1.5px; height: 100%; margin-left: -.75px; background: #BFDDF0; }
.okd-flow__circle { position: relative; width: 64px; height: 64px; border-radius: 50%; background: #fff; border: 1.5px solid var(--okd-sky); display: flex; align-items: center; justify-content: center; color: var(--okd-sky); }
.okd-flow__body { display: flex; flex-direction: column; gap: 4px; padding: 10px 0 28px; }
.okd-flow__no { font-family: var(--okd-font-en); font-size: 13px; letter-spacing: .16em; color: var(--okd-sky); line-height: 1.2; }
.okd-flow__ttl { font-size: clamp(15.5px, calc(14.67px + 0.221vw), 17.5px); font-weight: 700; color: var(--okd-navy); letter-spacing: .04em; line-height: 1.5; }
@media (min-width: 1024px) {
  .okd-flow { max-width: none; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
  .okd-flow__step { flex-direction: column; align-items: center; text-align: center; }
  .okd-flow__mark { width: 100%; height: 64px; }
  .okd-flow__step:not(:last-child) .okd-flow__mark::before { top: 50%; width: calc(100% + 24px); height: 1.5px; margin: -.75px 0 0; }
  .okd-flow__body { padding: 0 6px; }
}
.okd-consult { max-width: 880px; width: 100%; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: clamp(16px, calc(12.69px + 0.884vw), 24px) 32px; padding: clamp(22px, calc(17.03px + 1.326vw), 34px) clamp(22px, calc(15.38px + 1.768vw), 38px); border-radius: var(--okd-r-md); border: 1.5px dashed #9CCBE8; background: #fff; }
.okd-consult__main { display: flex; align-items: center; gap: clamp(14px, calc(11.52px + 0.663vw), 20px); flex: 1 1 360px; min-width: 0; }
.okd-consult__icon { width: clamp(48px, calc(43.03px + 1.326vw), 60px); height: clamp(48px, calc(43.03px + 1.326vw), 60px); flex-shrink: 0; border-radius: 50%; background: var(--okd-icon-bg); display: flex; align-items: center; justify-content: center; color: var(--okd-sky); }
.okd-consult__ttl { font-size: clamp(15.5px, calc(14.67px + 0.221vw), 17.5px); font-weight: 700; color: var(--okd-navy); letter-spacing: .04em; line-height: 1.5; }
.okd-consult__txt { margin-top: 4px; font-size: clamp(13px, calc(12.38px + 0.166vw), 14.5px); line-height: 1.8; color: var(--okd-sub); text-wrap: pretty; }

/* ==========================================================
   新着情報一覧：カテゴリの切り替え（各カテゴリの一覧へのリンク）
   ========================================================== */
.okd-cat-tabs { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; padding-bottom: 8px; }
.okd-cat-tab { position: relative; display: flex; align-items: center; justify-content: center; width: clamp(104px, calc(90px + 3.7vw), 140px); min-height: 44px; padding: 12px 0; border-radius: 0; border: 1.5px solid var(--okd-navy); background: #fff; color: var(--okd-navy); font-size: clamp(13px, calc(12.38px + 0.166vw), 14.5px); font-weight: 700; letter-spacing: .06em; line-height: 1.6; }
.okd-cat-tab:hover { background: #EAF3FA; color: var(--okd-navy); }
.okd-cat-tab.is-active { background: var(--okd-navy); color: #fff; }
.okd-cat-tab::after { content: ""; position: absolute; left: 50%; top: 100%; margin: -1px 0 0 -7px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 8px solid var(--okd-navy); opacity: 0; transition: opacity var(--okd-ease); }
.okd-cat-tab.is-active::after { opacity: 1; }
/* スマホ：3つを必ず1列に並べる（幅を等分） */
@media (max-width: 639px) {
  .okd-cat-tabs { flex-wrap: nowrap; gap: 8px; }
  .okd-cat-tab { flex: 1 1 0; width: auto; min-width: 0; max-width: 140px; white-space: nowrap; }
}
/* ==========================================================
   新着情報カード（TOP・一覧共通）
   ========================================================== */
.okd-post-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(16px, 2vw, 28px); }
.okd-post-grid--list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.okd-post-card { display: flex; flex-direction: column; border-radius: var(--okd-r-md); overflow: hidden; background: #fff; color: var(--okd-ink); }
.okd-post-card--border { border: 1px solid var(--okd-line); }
/* ブログCMS：テンプレートは TOP・一覧で共通（ページ送り付き）。出し分けは置き場所で行う */
.okd-post-grid > [id^="cms-blog-entry-list-"] { display: contents; }
.okd-post-grid .okd-cms-pager { grid-column: 1 / -1; }
#okd-top-news .okd-cms-pager { display: none; }
#okd-blog-list .okd-post-card { border: 1px solid var(--okd-line); }
.okd-post-card:hover { transform: translateY(-4px); box-shadow: var(--okd-shadow); color: var(--okd-ink); }
.okd-post-card__body { display: flex; flex-direction: column; gap: 12px; padding: clamp(14px, calc(10.69px + 0.884vw), 22px) clamp(16px, calc(12.69px + 0.884vw), 24px) clamp(18px, calc(13.86px + 1.105vw), 28px); }
.okd-post-card__ttl { font-size: clamp(14px, calc(13.17px + 0.221vw), 16px); font-weight: 700; color: var(--okd-navy); line-height: 1.7; text-wrap: pretty; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.okd-post-meta { display: flex; align-items: center; gap: 12px; }
.okd-chip { font-size: 12px; font-weight: 700; line-height: 1.6; color: #fff; background: var(--okd-sky); padding: 4px 12px; border-radius: 0; letter-spacing: .04em; }
.okd-date { font-family: var(--okd-font-en); font-size: clamp(12.5px, calc(11.88px + 0.166vw), 14px); color: var(--okd-mute); letter-spacing: .06em; }
.okd-date--lg { font-size: clamp(13px, calc(12.17px + 0.221vw), 15px); }

/* ==========================================================
   会社概要の項目表（TOP・会社概要ページ共通）
   ========================================================== */
.okd-profile { background: #fff; border-radius: 0; padding: clamp(8px, 2vw, 24px) clamp(20px, 4vw, 48px); }
.okd-profile--tint { background: var(--okd-gray); }
.okd-profile__row { display: flex; flex-wrap: wrap; gap: 6px clamp(21px, calc(16.44px + 1.215vw), 32px); padding: clamp(14px, calc(10.69px + 0.884vw), 22px) 0; border-bottom: 1px solid var(--okd-line); }
.okd-profile--tint .okd-profile__row { border-bottom-color: var(--okd-line-2); }
.okd-profile__row:last-child { border-bottom: none; }
.okd-profile dt { flex: 0 0 150px; font-size: clamp(13px, calc(12.17px + 0.221vw), 15px); font-weight: 700; color: var(--okd-navy); }
.okd-profile dd { flex: 1 1 300px; font-size: clamp(13px, calc(12.17px + 0.221vw), 15px); line-height: 1.9; color: var(--okd-txt); }

/* ==========================================================
   選ばれる理由
   ========================================================== */
.okd-sign { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.okd-sign__role { font-size: 13px; color: var(--okd-mute); }
.okd-sign__name { font-size: clamp(19.5px, calc(18.46px + 0.276vw), 22px); font-weight: 700; color: var(--okd-navy); letter-spacing: .2em; }
.okd-reason-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: clamp(16px, 2vw, 28px); }
.okd-reason-card { --okd-rc-pad: clamp(30px, 3.6vw, 48px); display: flex; flex-direction: column; gap: clamp(12px, calc(9.51px + 0.663vw), 18px); padding: var(--okd-rc-pad); border-radius: 0; overflow: hidden; background: #fff; box-shadow: 0 10px 30px rgba(20, 80, 140, .06); }
/* 写真はカードの上端いっぱいに付ける（カードの余白分を打ち消す） */
.okd-reason-card__img { width: auto; margin: calc(var(--okd-rc-pad) * -1) calc(var(--okd-rc-pad) * -1) clamp(8px, calc(5.51px + 0.663vw), 14px); }
.okd-reason-card__head { display: flex; align-items: flex-end; gap: clamp(12px, calc(9.51px + 0.663vw), 18px); padding-bottom: 18px; border-bottom: 1px solid var(--okd-line); }
.okd-reason-card__no { font-family: var(--okd-font-en); font-size: clamp(64px, 7vw, 92px); font-weight: 400; line-height: .9; color: var(--okd-sky); letter-spacing: .02em; }
.okd-reason-card__ttl { margin-bottom: 4px; font-size: clamp(19px, 2vw, 23px); font-weight: 700; color: var(--okd-navy); letter-spacing: .05em; line-height: 1.5; word-break: keep-all; overflow-wrap: anywhere; }
.okd-reason-card__txt { font-size: clamp(13px, calc(12.17px + 0.221vw), 15px); line-height: 2.05; color: var(--okd-txt); text-wrap: pretty; }
@media (max-width: 639px) {
  /* スマホは文字まわりの余白と番号を少し小さく（写真は --okd-rc-pad を打ち消して端いっぱいのまま） */
  .okd-reason-card { --okd-rc-pad: 22px; }
  .okd-reason-card__no { font-size: 52px; }
}
.okd-quals { display: flex; flex-wrap: wrap; gap: 12px; }
.okd-qual { display: inline-flex; align-items: center; gap: 8px; padding: 12px clamp(13px, calc(10.1px + 0.773vw), 20px); border-radius: 0; background: var(--okd-gray); border: 1px solid var(--okd-line-2); font-size: clamp(13px, calc(12.38px + 0.166vw), 14.5px); font-weight: 700; line-height: 1.6; color: var(--okd-navy); }
.okd-qual::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--okd-sky); }

/* ==========================================================
   事業内容
   ========================================================== */
.okd-svc-list-sec { padding: clamp(40px, 5vw, 64px) 0 clamp(52px, 6.5vw, 84px); }
.okd-svc-list { display: flex; flex-direction: column; gap: clamp(24px, 3vw, 36px); }
.okd-svc-item { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: clamp(28px, 4vw, 64px); align-items: center; padding: clamp(24px, 3vw, 40px); border-radius: 0; background: var(--okd-gray); scroll-margin-top: calc(var(--okd-hd-h) + 16px); }
.okd-svc-item:nth-child(even) { background: #fff; }
.okd-svc-item:last-child { padding-bottom: 0; }
@media (min-width: 768px) { .okd-svc-item:nth-child(even) .okd-svc-item__img { order: 2; } }
.okd-svc-item__body { display: flex; flex-direction: column; gap: clamp(13px, calc(10.1px + 0.773vw), 20px); }
.okd-svc-item__head { display: flex; align-items: center; justify-content: space-between; gap: clamp(10px, calc(7.51px + 0.663vw), 16px); }
.okd-svc-item__no { font-family: var(--okd-font-en); font-size: clamp(64px, 7vw, 96px); font-weight: 400; line-height: .9; color: var(--okd-sky); letter-spacing: .02em; }
.okd-svc-item__icon { width: 76px; height: 76px; flex-shrink: 0; border-radius: 50%; background: #fff; border: 1px solid var(--okd-line-2); display: flex; align-items: center; justify-content: center; color: var(--okd-navy); }
.okd-svc-item__ttl { font-size: clamp(20px, 2.3vw, 26px); font-weight: 700; color: var(--okd-navy); letter-spacing: .05em; line-height: 1.5; text-wrap: pretty; }
.okd-svc-item__txt { font-size: clamp(13px, calc(12.17px + 0.221vw), 15px); line-height: 2.05; color: var(--okd-txt); text-wrap: pretty; }
.okd-note { padding: 14px clamp(12px, calc(9.51px + 0.663vw), 18px); border-radius: 0; background: var(--okd-tint); font-size: clamp(12.5px, calc(11.88px + 0.166vw), 14px); line-height: 1.85; color: var(--okd-navy); font-weight: 500; }
.okd-emph { -webkit-text-emphasis: filled dot var(--okd-sky); text-emphasis: filled dot var(--okd-sky); -webkit-text-emphasis-position: over right; text-emphasis-position: over right; }

/* ==========================================================
   新着情報 一覧・詳細
   ========================================================== */
.okd-pager { display: flex; align-items: center; justify-content: center; gap: clamp(18px, calc(14.69px + 0.884vw), 26px); flex-wrap: wrap; padding-top: clamp(8px, calc(4.69px + 0.884vw), 16px); }
.okd-pager__link { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 6px; color: var(--okd-navy); font-size: clamp(13px, calc(12.38px + 0.166vw), 14px); font-weight: 700; letter-spacing: .04em; }
.okd-pager__link:hover { color: var(--okd-sky); }
.okd-pager__circle { width: 24px; height: 24px; border-radius: 50%; background: currentColor; display: flex; align-items: center; justify-content: center; }
.okd-pager__circle svg { color: #fff; }
.okd-pager__sep { width: 1px; height: 18px; background: #C9D8E7; }
.okd-entry { max-width: 860px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 40px); display: flex; flex-direction: column; gap: clamp(18px, calc(13.86px + 1.105vw), 28px); }
.okd-entry__head { display: flex; flex-direction: column; gap: clamp(10px, calc(7.51px + 0.663vw), 16px); padding-bottom: 28px; border-bottom: 1px solid var(--okd-line-2); }
.okd-entry__ttl { font-size: clamp(22px, 2.8vw, 30px); font-weight: 700; color: var(--okd-navy); line-height: 1.6; letter-spacing: .04em; }
.okd-entry__body { display: flex; flex-direction: column; gap: clamp(13px, calc(10.1px + 0.773vw), 20px); }
.okd-entry__body img { max-width: 100%; height: auto; border-radius: var(--okd-r-md); }
/* CMS の本文（段落・改行・画像がそのまま入る） */
.okd-entry__body { font-size: clamp(13.5px, calc(12.67px + 0.221vw), 15.5px); line-height: 2.15; color: var(--okd-txt); }
.okd-entry__body p { margin: 0; }
.okd-entry__body p + p { margin-top: clamp(13px, calc(10.1px + 0.773vw), 20px); }
.okd-entry__body a { color: var(--okd-sky); text-decoration: underline; }
.okd-no-post { text-align: center; }
.okd-chip:empty { display: none; }   /* CMS でカテゴリ未設定の記事はラベルを出さない */
.okd-entry__foot { display: flex; justify-content: center; padding-top: 32px; border-top: 1px solid var(--okd-line-2); }

/* ==========================================================
   会社概要：アクセス
   ========================================================== */
.okd-access__map.embed { border-radius: var(--okd-r-lg); border: 1px solid var(--okd-line); height: clamp(320px, 40vw, 460px); }
.okd-access__info { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: clamp(10px, calc(7.51px + 0.663vw), 16px); }
.okd-info-box { display: flex; flex-direction: column; gap: 8px; padding: clamp(17px, calc(13.27px + 0.994vw), 26px) clamp(20px, calc(15.86px + 1.105vw), 30px); border-radius: var(--okd-r-md); background: var(--okd-gray); }
.okd-info-box__label { font-size: 13px; font-weight: 700; color: var(--okd-sky); letter-spacing: .08em; }
.okd-info-box__txt { font-size: clamp(13.5px, calc(12.67px + 0.221vw), 15.5px); line-height: 1.9; color: var(--okd-ink); }

/* ==========================================================
   お問い合わせ
   ========================================================== */
.okd-guide { max-width: 640px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: clamp(13px, calc(10.1px + 0.773vw), 20px); }
.okd-telfax { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: 12px; }
.okd-telfax__card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: clamp(16px, calc(12.69px + 0.884vw), 24px) clamp(13px, calc(10.1px + 0.773vw), 20px); border-radius: var(--okd-r-sm); background: #fff; border: 1.5px solid var(--okd-line-2); color: var(--okd-navy); white-space: nowrap; }
.okd-telfax__card--tel { gap: 14px; }
.okd-telfax__card--tel:hover { background: var(--okd-navy); border-color: var(--okd-navy); color: #fff; }
.okd-telfax__icon { width: 52px; height: 52px; border-radius: 50%; background: var(--okd-icon-bg); display: flex; align-items: center; justify-content: center; transition: background-color var(--okd-ease); }
.okd-telfax__card--tel:hover .okd-telfax__icon { background: rgba(255, 255, 255, .16); }
.okd-telfax__line { display: flex; align-items: baseline; gap: 12px; font-family: var(--okd-font); line-height: 1; }
.okd-telfax__label { font-size: 13px; font-weight: 500; letter-spacing: .14em; color: var(--okd-sky); transition: color var(--okd-ease); }
.okd-telfax__card--tel:hover .okd-telfax__label { color: #fff; }
.okd-telfax__num { font-size: clamp(21px, calc(19.76px + 0.331vw), 24px); letter-spacing: .05em; }
.okd-hours-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 0; padding: clamp(10px, calc(7.51px + 0.663vw), 16px) clamp(13px, calc(10.1px + 0.773vw), 20px); border-radius: var(--okd-r-sm); background: var(--okd-tint); }
.okd-hours-band__item { display: flex; align-items: center; gap: 10px; padding: 0 clamp(16px, calc(12.69px + 0.884vw), 24px); }
.okd-hours-band__item svg { color: var(--okd-sky); }
.okd-hours-band__label { font-size: 13px; font-weight: 700; color: var(--okd-navy); letter-spacing: .06em; }
.okd-hours-band__time { font-family: var(--okd-font); font-size: clamp(16px, calc(15.17px + 0.221vw), 18px); color: var(--okd-ink); letter-spacing: .04em; }
.okd-hours-band__day { font-size: clamp(13px, calc(12.17px + 0.221vw), 15px); font-weight: 500; color: var(--okd-ink); }
.okd-hours-band__sep { width: 1px; height: 22px; background: #C6DAE6; }

.okd-form-sec { padding: clamp(56px, 7vw, 96px) 0; }
.okd-inner--form { padding: 0 clamp(16px, 4vw, 40px); }
.okd-form { display: flex; flex-direction: column; background: #fff; border-radius: var(--okd-r-lg); padding: clamp(36px, 4.5vw, 56px) clamp(20px, 4vw, 56px) clamp(36px, 4vw, 52px); }
.okd-form__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding-bottom: 18px; border-bottom: 2px solid var(--okd-navy); }
.okd-form__head-bar { width: 6px; height: 28px; border-radius: 0; background: var(--okd-sky); flex-shrink: 0; }
.okd-form__ttl { font-size: clamp(19px, 2vw, 22px); font-weight: 700; color: var(--okd-navy); letter-spacing: .06em; line-height: 1.4; }
.okd-form__head-note { margin-left: auto; font-size: 13px; color: var(--okd-mute); }
.okd-form__head-note .okd-req { margin-right: 6px; }
.okd-req { display: inline-block; font-size: 11px; font-weight: 700; color: #fff; background: var(--okd-sky); padding: 3px 9px; border-radius: 0; line-height: 1.4; }
.okd-form__row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px clamp(21px, calc(16.44px + 1.215vw), 32px); padding: clamp(16px, calc(12.69px + 0.884vw), 24px) 0; border-bottom: 1px solid var(--okd-line); }
.okd-form__row--top { align-items: flex-start; }
.okd-form__label { flex: 0 0 250px; display: flex; align-items: center; gap: 10px; font-size: clamp(13px, calc(12.17px + 0.221vw), 15px); font-weight: 700; color: var(--okd-navy); }
.okd-form__label--addr { padding-top: 38px; }
.okd-form__label--check { padding-top: 10px; }
.okd-form__label--area { padding-top: 14px; }
.okd-form__field { flex: 1 1 320px; min-width: 0; }
.okd-input { width: 100%; height: 52px; padding: 0 16px; border: 1px solid #CBD9E7; border-radius: 0; background: #FAFCFE; font-size: 16px; color: var(--okd-ink); outline: none; font-weight: 400; transition: border-color var(--okd-ease), box-shadow var(--okd-ease), background-color var(--okd-ease); }
.okd-input:focus { border-color: var(--okd-sky); box-shadow: 0 0 0 3px rgba(46, 155, 214, .18); background: #fff; }
.okd-textarea { height: auto; padding: 14px 16px; line-height: 1.8; resize: vertical; }
.okd-addr { display: flex; flex-direction: column; gap: clamp(10px, calc(7.51px + 0.663vw), 16px); }
.okd-addr__sub { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 500; color: var(--okd-mute); }
.okd-addr__zip { display: flex; flex-direction: column; gap: 6px; }
.okd-addr__zip > .okd-addr__sub { display: block; }
.okd-addr__zip-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.okd-addr__msg { font-size: 12.5px; color: var(--okd-mute); }
.okd-addr__msg.is-err { color: #B42318; }
.okd-addr__grid { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 12px 14px; }
.okd-zip { position: relative; display: block; width: 200px; max-width: 100%; }
.okd-zip__mark { position: absolute; left: 0; top: 0; bottom: 0; width: 46px; display: flex; align-items: center; justify-content: center; border-right: 1px solid #CBD9E7; font-size: clamp(14px, calc(13.17px + 0.221vw), 16px); font-weight: 700; color: var(--okd-navy); pointer-events: none; }
.okd-zip__input { padding-left: 60px; letter-spacing: .04em; }
.okd-checks { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 12px; }
@media (min-width: 600px) and (max-width: 767px), (min-width: 960px) { .okd-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.okd-check { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 10px 12px; border-radius: var(--okd-r-sm); font-size: clamp(13px, calc(12.17px + 0.221vw), 15px); line-height: 1.6; color: var(--okd-ink); cursor: pointer; transition: background-color var(--okd-ease); }
.okd-check:hover { background: var(--okd-gray); }
.okd-check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--okd-sky); flex-shrink: 0; }
.okd-form__submit { display: flex; flex-direction: column; align-items: center; gap: clamp(14px, calc(10.69px + 0.884vw), 22px); padding-top: 36px; }
.okd-agree { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; font-size: clamp(13px, calc(12.17px + 0.221vw), 15px); color: var(--okd-ink); cursor: pointer; }
.okd-agree input { width: 22px; height: 22px; margin: 0; accent-color: var(--okd-sky); }
.okd-agree__link { color: var(--okd-sky); text-decoration: underline; font-weight: 700; }
.okd-form__err { padding: 12px clamp(13px, calc(10.1px + 0.773vw), 20px); border-radius: var(--okd-r-sm); background: #FFF3F2; color: #B42318; font-size: clamp(12.5px, calc(11.88px + 0.166vw), 14px); font-weight: 500; }
.okd-form__err[hidden] { display: none; }
.okd-submit { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-width: min(100%, 320px); padding: clamp(12px, calc(9.1px + 0.773vw), 19px) clamp(36px, calc(27.71px + 2.21vw), 56px); border: none; border-radius: 0; background: var(--okd-sky); color: #fff; font-size: clamp(14px, calc(13.17px + 0.221vw), 16px); font-weight: 700; letter-spacing: .08em; line-height: normal; cursor: pointer; transition: background-color var(--okd-ease); }
.okd-submit:hover:not(:disabled) { background: var(--okd-navy); }
.okd-submit:disabled { background: #B8C4CF; cursor: not-allowed; }
.okd-policy { display: flex; flex-direction: column; gap: 14px; }
.okd-policy__item { display: flex; flex-direction: column; gap: 10px; padding: clamp(16px, calc(12.69px + 0.884vw), 24px) clamp(18px, calc(13.86px + 1.105vw), 28px); border-radius: 0; background: var(--okd-gray); }
.okd-policy__item h3 { font-size: clamp(14px, calc(13.17px + 0.221vw), 16px); font-weight: 700; line-height: 1.6; color: var(--okd-navy); }
.okd-policy__item p { font-size: clamp(13px, calc(12.38px + 0.166vw), 14.5px); line-height: 2; color: var(--okd-txt); text-wrap: pretty; }
#privacy { scroll-margin-top: calc(var(--okd-hd-h) + 10px); }
/* ページ内リンクの着地点（固定ヘッダーの高さぶん下げる） */
.okd-anchor { scroll-margin-top: var(--okd-hd-h); }
/* 新着のタブ（topics.php#topics-list）は固定ヘッダーの下に少し余白を空けて止める */
#topics-list { scroll-margin-top: calc(var(--okd-hd-h) + clamp(20px, 3vw, 40px)); }
/* ==========================================================
   フォームCMS（#cms-contact-1-1-area）：mail-form.css を上書きしてデザインのフォームに合わせる
   CMSの出力：.form-contents > form > dl > dt/dd（住所は .custom-area 内の dt/dd）
   ========================================================== */
.okd-cms-form { --okd-row-pad: clamp(16px, calc(12.69px + 0.884vw), 24px); }
#cms-contact-1-1-area .form-contents { padding: 0; margin: 0; background: transparent; }
#cms-contact-1-1-area form dl { display: grid; grid-template-columns: 250px minmax(0, 1fr); column-gap: 0; margin: 0; }
#cms-contact-1-1-area .custom-area { display: contents; }
#cms-contact-1-1-area form dl dt { float: none; width: auto; margin: 0; padding: calc(var(--okd-row-pad) + 14px) 0 var(--okd-row-pad); border-bottom: 1px solid var(--okd-line); text-align: left; }
#cms-contact-1-1-area form dl dt:has(+ dd input[type="checkbox"]) { padding-top: calc(var(--okd-row-pad) + 10px); }
#cms-contact-1-1-area form dl dt.okd-cms-dt-addr { padding-top: calc(var(--okd-row-pad) + 38px); }
#cms-contact-1-1-area form dl dt span { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 10px; font-size: clamp(13px, calc(12.17px + 0.221vw), 15px); font-weight: 700; line-height: 1.6; color: var(--okd-navy); }
#cms-contact-1-1-area form dl dt span.required::before { top: 0; margin: 0; padding: 3px 9px; border-radius: 0; background: var(--okd-sky); font-size: 11px; font-weight: 700; line-height: 1.4; color: #fff; }
#cms-contact-1-1-area form dl dt span.optional::before { display: none; }
#cms-contact-1-1-area form dl dd { margin: 0; padding: var(--okd-row-pad) 0 var(--okd-row-pad) clamp(21px, calc(16.44px + 1.215vw), 32px); border-bottom: 1px solid var(--okd-line); line-height: 1.6; }
#cms-contact-1-1-area dd .textarea { width: 100%; height: 52px; padding: 0 16px; border: 1px solid #CBD9E7; border-radius: 0; background: #FAFCFE; font-size: 16px; color: var(--okd-ink); outline: none; transition: border-color var(--okd-ease), box-shadow var(--okd-ease), background-color var(--okd-ease); }
#cms-contact-1-1-area dd textarea.textarea { height: auto; min-height: 212px; padding: 14px 16px; line-height: 1.8; resize: vertical; }
#cms-contact-1-1-area dd .textarea:focus { border-color: var(--okd-sky); box-shadow: 0 0 0 3px rgba(46, 155, 214, .18); background: #fff; }
/* お問い合わせ項目（チェックボックス） */
#cms-contact-1-1-area dd:has(> label > input[type="checkbox"]):not(.okd-cms-agree) { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 12px; }
@media (min-width: 600px) and (max-width: 767px), (min-width: 960px) {
  #cms-contact-1-1-area dd:has(> label > input[type="checkbox"]):not(.okd-cms-agree) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
#cms-contact-1-1-area dd:not(.okd-cms-agree) > label { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 10px 12px; border-radius: var(--okd-r-sm); font-size: clamp(13px, calc(12.17px + 0.221vw), 15px); line-height: 1.6; color: var(--okd-ink); cursor: pointer; transition: background-color var(--okd-ease); }
#cms-contact-1-1-area dd:not(.okd-cms-agree) > label:hover { background: var(--okd-gray); }
#cms-contact-1-1-area dd input[type="checkbox"] { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--okd-sky); flex-shrink: 0; }
/* 同意欄（JS で .okd-cms-agree を付与。左のラベルは出さず中央に置く） */
#cms-contact-1-1-area form dl dt.okd-cms-agree-dt { display: none; }
#cms-contact-1-1-area form dl dd.okd-cms-agree { grid-column: 1 / -1; display: flex; justify-content: center; padding: 36px 0 0; border-bottom: none; }
#cms-contact-1-1-area dd.okd-cms-agree > label { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; font-size: clamp(13px, calc(12.17px + 0.221vw), 15px); color: var(--okd-ink); cursor: pointer; }
#cms-contact-1-1-area dd.okd-cms-agree input[type="checkbox"] { width: 22px; height: 22px; margin: 0; }
/* 送信ボタン（同意にチェックするまでグレー） */
#cms-contact-1-1-area .submit-btn { display: flex; align-items: center; justify-content: center; gap: 14px; width: auto; min-width: min(100%, 320px); margin: clamp(14px, calc(10.69px + 0.884vw), 22px) auto 0; padding: clamp(12px, calc(9.1px + 0.773vw), 19px) clamp(36px, calc(27.71px + 2.21vw), 56px); border: none; border-radius: 0; background: var(--okd-sky); color: #fff; font-size: clamp(14px, calc(13.17px + 0.221vw), 16px); font-weight: 700; letter-spacing: .08em; line-height: normal; cursor: pointer; transition: background-color var(--okd-ease); }
#cms-contact-1-1-area .submit-btn::before { display: none; }
#cms-contact-1-1-area .submit-btn::after { content: ""; width: 18px; height: 18px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; }
#cms-contact-1-1-area .submit-btn:hover:not(:disabled) { background: var(--okd-navy); }
#cms-contact-1-1-area .submit-btn:disabled { background: #B8C4CF; cursor: not-allowed; }
/* エラー・送信完了 */
#cms-contact-1-1-area .form-err-msg { margin: 0 0 20px; padding: 12px clamp(13px, calc(10.1px + 0.773vw), 20px); border: none; border-radius: var(--okd-r-sm); background: #FFF3F2; color: #B42318; font-size: clamp(12.5px, calc(11.88px + 0.166vw), 14px); font-weight: 500; }
#cms-contact-1-1-area .form-err-msg ul { list-style: none; }
#cms-contact-1-1-area .form-thanks-msg { padding: clamp(48px, 6vw, 80px) 24px; border: none; background: #fff; text-align: center; }
#cms-contact-1-1-area .form-thanks-msg p { font-size: clamp(13.5px, calc(12.67px + 0.221vw), 15.5px); line-height: 2.15; color: var(--okd-txt); }
#cms-contact-1-1-area .form-thanks-msg .back-home-btn { width: auto; margin-top: clamp(20px, 3vw, 32px); }
#cms-contact-1-1-area .form-thanks-msg .back-home-btn a { display: inline-flex; padding: 15px clamp(22px, calc(17.03px + 1.326vw), 34px); border: 1.5px solid var(--okd-navy); border-radius: 0; background: #fff; color: var(--okd-navy); font-size: clamp(13px, calc(12.17px + 0.221vw), 15px); font-weight: 700; letter-spacing: .06em; }
#cms-contact-1-1-area .form-thanks-msg .back-home-btn a:hover { background: var(--okd-navy); color: #fff; }
/* 狭い幅：ラベルを上、入力欄を下に */
@media (max-width: 719px) {
  #cms-contact-1-1-area form dl { grid-template-columns: minmax(0, 1fr); }
  #cms-contact-1-1-area form dl dt,
  #cms-contact-1-1-area form dl dt:has(+ dd input[type="checkbox"]),
  #cms-contact-1-1-area form dl dt.okd-cms-dt-addr { padding: var(--okd-row-pad) 0 0; border-bottom: none; }
  #cms-contact-1-1-area form dl dd { padding-top: 12px; padding-left: 0; }
  #cms-contact-1-1-area form dl dd.okd-cms-agree { padding-top: 36px; }
}
/* iOS Safari の入力時ズーム対策：タッチ端末では入力欄を 16px 以上にする（フォームCMS差し替え後も効くよう枠の id を前に付ける） */
@media (hover: none) and (pointer: coarse) {
  input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
  input[type="search"], input[type="url"], input[type="password"], input[type="date"],
  select, textarea,
  #cms-contact-1-1-area input, #cms-contact-1-1-area select, #cms-contact-1-1-area textarea { font-size: 16px; }
}