/*
Theme Name: OLTANA-002 Child
Template: oltana-002
Author: CROOVER inc.
Author URI: https://croover.co.jp
Version: 1.0.0
*/

/* ========================================
   0. カラー変数（案A+：ブライトブルー × クールグレー）
   ======================================== */
:root {
  --color-main: #2e6da4;       /* メイン（テーマカラー） */
  --color-main-dark: #234e73;  /* 濃（hover・見出し） */
  --color-accent: #6e8095;     /* サブ・グレー寄りアクセント */
  --color-text: #3a4654;       /* 本文 */
  --color-bg: #eef1f4;         /* 背景（クールグレー） */
}

/* ========================================
   1. iOS Safari 文字自動拡大の抑止（実機だけ見出しが巨大化する対策）
   ======================================== */
html {
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
}

/* ========================================
   2. セクション見出しサイズ統一
   親テーマで ol-heading-small.ol-heading-mini が大画面(1728px超)で
   42-70pxまで膨張するため、ol-heading.ol-heading-mini と同サイズに揃える
   ======================================== */
.ol-heading-small.ol-heading-mini {
  font-size: clamp(35px, 1.27rem + 1.42vw, 45px) !important;
  letter-spacing: 0.08em !important;
  line-height: 1.65 !important;
  font-weight: 400 !important;
}
@media (max-width: 1023px) {
  .ol-heading.ol-heading-mini,
  .ol-heading-small.ol-heading-mini {
    font-size: clamp(27px, 1.48rem + 0.62vw, 30px) !important;
    font-weight: 500 !important;
    line-height: 1.7 !important;
  }
}

/* ========================================
   3. 本文中の見出し（.ol-text 配下のクラスなし h2/h3/h4）
   ※テーマ標準の ol-* クラス付き見出しには影響なし
   ======================================== */
.ol-text h2,
.ol-text h3,
.ol-text h4 {
  position: relative;
  font-weight: 600;
  color: var(--color-main);
  line-height: 1.5;
}
.ol-text h2 {
  font-size: 1.5em;
  padding: 0.4em 0 0.4em 18px;
  margin: 2.2em 0 1em;
  border-left: 5px solid var(--color-main);
}
.ol-text h3 {
  font-size: 1.1em;
  padding: 0 0 0.4em 0;
  margin: 1.6em 0 0.6em;
  border-bottom: 2px solid var(--color-main);
}
.ol-text h4 {
  font-size: 1.05em;
  padding-left: 12px;
  margin: 1.3em 0 0.5em;
  border-left: 3px solid var(--color-main);
}
.ol-text h2 + p, .ol-text h2 + ul,
.ol-text h3 + p, .ol-text h3 + ul,
.ol-text h4 + p, .ol-text h4 + ul {
  margin-top: 0.5em;
}

/* ===== 記事本文（コラム・解決事例・お知らせ）共通：見出し h2/h3/h4 ===== */
/* お知らせ（テーマ標準）の装飾リセット */
.ol-article__content .tcdce-body h2,
.ol-article__content .tcdce-body h3,
.ol-article__content .tcdce-body h4 { background: none !important; width: auto !important; }
.ol-article__content .tcdce-body :is(h2,h3,h4)::before,
.ol-article__content .tcdce-body :is(h2,h3,h4)::after { display: none !important; content: none !important; }

/* h2＝下ボーダー */
.column-single__content h2,
.cases-single__content h2,
.ol-article__content .tcdce-body h2 {
  font-weight: 500 !important;
  font-size: clamp(21px, 1.2rem + 0.6vw, 27px) !important;
  color: var(--color-main-dark) !important;
  letter-spacing: 0.06em !important; line-height: 1.6 !important;
  margin: 2.4em 0 1.1em !important; padding: 0 0 14px !important;
  border: none !important; border-bottom: 1px solid #B7C0CC !important;
}
/* h3＝メインカラーの左バー */
.column-single__content h3,
.cases-single__content h3,
.ol-article__content .tcdce-body h3 {
  font-weight: 500 !important;
  font-size: clamp(18px, 1.05rem + 0.4vw, 21px) !important;
  color: var(--color-main) !important;
  letter-spacing: 0.05em !important; line-height: 1.6 !important;
  margin: 2em 0 0.8em !important; padding: 0 0 0 14px !important;
  border: none !important; border-left: 3px solid var(--color-main) !important;
}
/* h4＝シルバーの左バー */
.column-single__content h4,
.cases-single__content h4,
.ol-article__content .tcdce-body h4 {
  font-weight: 500 !important;
  font-size: 16.5px !important;
  color: var(--color-main) !important;
  letter-spacing: 0.04em !important; line-height: 1.6 !important;
  margin: 1.7em 0 0.6em !important; padding: 0 0 0 12px !important;
  border: none !important; border-left: 3px solid #B7C0CC !important;
}
/* 本文先頭の見出しは上余白リセット */
.column-single__content :is(h2,h3,h4):first-child,
.cases-single__content :is(h2,h3,h4):first-child,
.ol-article__content .tcdce-body :is(h2,h3,h4):first-child { margin-top: 0 !important; }

/* ========================================
   4. 独自サブページ見出しの重なり対策＋上部余白の最適化
   .ol-subpage-header を隠し、コンテンツ上部の余白を詰める
   ======================================== */
.ol-subpage-header { display: none !important; }
.ol-content-subpage { padding-top: clamp(48px, 5vw, 72px) !important; }

/* ========================================
   5. ページネーションが空のときの余白解消（コラム・お知らせ等の謎の余白対策）
   ======================================== */
.ol-pagination {
  margin-top: 0 !important;
  padding-bottom: 0 !important;
}
.ol-pagination:has(*) {
  margin-top: clamp(48px, 2.83rem + 0.77vw, 60px) !important;
  padding-bottom: clamp(48px, 2.83rem + 0.77vw, 60px) !important;
}

/* ========================================
   6. サービス画像ホバー（共通の質感）
   ======================================== */
.ol-service__list-item-image { overflow: hidden; }
.ol-service__list-item-image img {
  transform: scale(1);
  transition: transform 0.5s ease !important;
  will-change: auto !important;
}
.ol-service__list-item:hover .ol-service__list-item-image img {
  transform: scale(1.05);
}

/* ========================================
   7. 管理バー表示時（ログイン中のみ）：固定ハンバーガー位置補正
   ※一般ユーザー表示には影響なし
   ======================================== */
.admin-bar .ol-header__inner { top: 32px !important; }
@media (max-width: 782px) {
  .admin-bar .ol-header__inner { top: 46px !important; }
}

/* ========================================
   8. フッター自動 ACCESS の出し分け（トップ＋アクセスページのみ表示）
   ※ アクセス固定ページ = page-id-33。CONTACTは全ページ表示のまま残す。
   ======================================== */
#olAccess { display: none !important; }
body.home #olAccess { display: block !important; }

/* ===== ヘッダーロゴ（PCは大きく／SPは小さめ・ハンバーガーとの干渉回避） ===== */
.ol-header__title-logo img {
  width: clamp(360px, 34vw, 520px) !important;
  height: auto !important;
  max-width: none !important;
}
@media (max-width: 767px) {
  .ol-header__title-logo img {
    width: clamp(200px, 64vw, 270px) !important;
  }
}

/* ===== フッター自動 ACCESS / CONTACT のセクション上下余白を詰める ===== */
#olAccess .ol-section,
#olContact .ol-section {
  margin-top: clamp(32px, 4vw, 52px) !important;
  margin-bottom: clamp(32px, 4vw, 52px) !important;
}

/* ========================================
   9. トップ ファーストビュー（FV）
   ======================================== */
/* 9-1. 白文字の視認性（影のみ・文字色はカスタマイザ管轄） */
body.home .ol-firstview__title-maincopy,
body.home .ol-firstview__title-subcopy {
  text-shadow: 0 2px 10px rgba(0,0,0,0.55), 0 0 22px rgba(0,0,0,0.32) !important;
}
body.home .ol-header__call-number,
body.home .ol-header__call-subtext,
body.home .ol-header__cvbutton .ol-btn-regular {
  text-shadow: 0 1px 4px rgba(0,0,0,0.55), 0 0 8px rgba(0,0,0,0.3) !important;
}

/* 9-2. キャッチ＋お問い合わせボタンを全体的に少し下げる
   （translateY の値で微調整可。プラスで下、マイナスで上） */
body.home .ol-firstview__inner {
  transform: translateY(64px) !important;
}
@media (max-width: 767px) {
  body.home .ol-firstview__inner {
    transform: translateY(32px) !important;
  }
}
/* 9-3. お問い合わせボタンだけ少し上に寄せる（キャッチとの間隔を詰める） */
body.home .ol-firstview__mail {
  transform: translateY(-24px) !important;
}
@media (max-width: 767px) {
  body.home .ol-firstview__mail {
    transform: translateY(-14px) !important;
  }
}

/* 9-4. SP：FVを横長化（ロゴ・ハンバーガーは画像の上部／キャッチは画像に重ねる／ボタンは画像の下） */
@media (max-width: 767px) {
  body.home .ol-firstview__section {
    --fv-head: 96px;   /* ロゴ＋ハンバーガーの領域 */
    --fv-ratio: 75vw;  /* 画像の高さ。aspect-ratio 4/3 のとき 75vw */
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    padding-top: var(--fv-head) !important;
    margin-bottom: 0 !important;
  }
  body.home .ol-firstview__inner {
    display: contents !important;
  }
  /* 画像：通常フローに戻して横長比率に */
  body.home .ol-firstview__image {
    position: relative !important;
    height: auto !important;
    z-index: 0 !important;
    order: 1 !important;
  }
  body.home .ol-firstview__image-inner img {
    height: auto !important;
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;
    object-fit: cover !important;
  }
  /* キャッチ：画像に重ねて下寄せ */
  body.home .ol-firstview__title {
    position: absolute !important;
    top: var(--fv-head) !important;
    left: 0 !important;
    width: 100% !important;
    height: var(--fv-ratio) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    padding: 0 24px 20px !important;
    box-sizing: border-box !important;
    z-index: 200 !important;
    transform: none !important;
  }
  /* テーマ標準の下マージンを消して、しっかり下寄せに */
  body.home .ol-firstview__title-maincopy { margin-bottom: 0 !important; }
  body.home .ol-firstview__title-subcopy  { margin-bottom: 10px !important; }
  /* 明るい空でも読めるよう影を強化 */
  body.home .ol-firstview__title-subcopy {
    text-shadow: 0 1px 3px rgba(0,0,0,0.9), 0 2px 14px rgba(0,0,0,0.65) !important;
  }
  body.home .ol-firstview__title-maincopy {
    text-shadow: 0 2px 6px rgba(0,0,0,0.75), 0 0 20px rgba(0,0,0,0.45) !important;
  }
  /* お問い合わせボタン：画像の下・中央揃え */
  body.home .ol-firstview__mail {
    order: 2 !important;
    position: relative !important;
    align-self: center !important;
    margin: 18px 24px 0 !important;
    transform: none !important;
    z-index: 1 !important;
  }
  /* ハンバーガー：ロゴの高さに合わせて下げる＋3本線を濃紺に */
  body.home .ol-hamburger__menu { padding-top: 40px !important; }
  body.home .ol-hamburger__menu-icon-item1,
  body.home .ol-hamburger__menu-icon-item2,
  body.home .ol-hamburger__menu-icon-item3 {
    background-color: #234e73 !important;
  }
  /* トップのセクション間余白を圧縮（親テーマは96〜120px） */
  body.home .ol-section {
    margin-top: clamp(56px, 9vw, 72px) !important;
    margin-bottom: clamp(56px, 9vw, 72px) !important;
  }
  /* FV直後（CONCEPT）はさらに詰める */
  body.home #olConcept .ol-section { margin-top: 24px !important; }
}

/* ========================================
   10. トップ ACCESS：2拠点対応（本部マップ下に草津マップ／電話に2拠点）
   ======================================== */
body.home #ol-section-access .tacc-kusatsu-map { margin-top: 16px !important; }

/* 電話：住所・最寄と同形式・番号は少し大きく＋青系 */
body.home #ol-section-access #access3 .ol-access__info-item-text { line-height: 1.7; }
body.home #ol-section-access #access3 .tacc-tel-label { font-size: 15px; font-weight: 400; vertical-align: baseline; }
body.home #ol-section-access #access3 .tacc-tel-label b { font-weight: 700; }
body.home #ol-section-access #access3 .ol-contact-phone-number { display: inline !important; }
body.home #ol-section-access #access3 .ol-contact-phone-number-text {
  font-size: 22px !important; font-weight: 500; letter-spacing: .04em;
  color: var(--color-main-dark) !important;
}
body.home #ol-section-access #access3 .tacc-tel-row { margin-top: 6px; }

/* ========================================
   11. SP最終調整
   ======================================== */
/* 11-1. トップのセクション見出しh2→SP一括縮小 */
@media (max-width: 767px) {
  body.home h2.ol-heading-large {
    font-size: clamp(26px, 7vw, 30px) !important;
    line-height: 1.55 !important;
  }
}

/* 11-2. SP/タブレット：取扱業務・私たちの強みだけ左右対称に */
@media (max-width: 1080px) {
  body.home #olService .ol-content-frame,
  body.home #olProduct .ol-content-frame {
    padding-right: clamp(3.125rem, -1.161rem + 8.93vw, 6.875rem) !important;
  }
}
@media (max-width: 767px) {
  body.home #olService .ol-content-frame,
  body.home #olProduct .ol-content-frame {
    padding-right: clamp(32px, 1.7692307692rem + 1.0256410256vw, 48px) !important;
  }
}
@media (max-width: 540px) {
  body.home #olService .ol-content-frame,
  body.home #olProduct .ol-content-frame {
    padding-right: 30px !important;
  }
}

/* 11-3. SP：CONTACTセクションのリード文が左寄せになるので中央揃えに
   ※ フッター自動出力のCONTACTは全ページ共通のため、body.home 限定にしない */
@media (max-width: 767px) {
  #olContact .ol-contact__desc {
    text-align: center !important;
  }
}

/* 11-4. SP：トップACCESSの地図2枚を非表示にし、住所欄のMAPボタンに置き換え
   ※ PCは従来どおり地図を表示（MAPボタンは非表示） */
.tacc-maplink { display: none; }
@media (max-width: 767px) {
  body.home #olAccess .ol-access__image { display: none !important; }
  body.home #olAccess .tacc-maplink {
    display: inline-flex !important;
    align-items: center;
    margin-left: 10px;
    padding: 3px 11px;
    border: 1px solid var(--color-main);
    border-radius: 3px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 1.6;
    color: var(--color-main) !important;
    text-decoration: none !important;
    white-space: nowrap;
    vertical-align: middle;
  }
  body.home #olAccess .tacc-maplink::after {
    content: "↗";
    margin-left: 4px;
    font-size: 10px;
  }
}

/* 11-5. PC：トップACCESSのGoogleマップが幅600px固定で、大画面だと右が余る
   → コンテナ幅いっぱいに広げる（比率はテーマの画像と同じ 3:2） */
#olAccess .ol-access__map iframe {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 3 / 2 !important;
  display: block !important;
  border: 0 !important;
}

/* 11-6. プライバシーポリシー：記事下のSNSシェアボタンを非表示（PC/SP共通） */
.page-id-10 .ol-article__sns-share { display: none !important; }