@charset "UTF-8";
/*
 * ======================================
 * otokura株式会社（音蔵）サイト固有CSS
 * 追加クラス一覧（共通SCSS取り込み検討用）
 * ======================================
 *
 *  otk-header 系      - 3段構成ヘッダー（上部バー／ロゴバー／グローバルナビ）
 *  otk-drawer 系      - SPスライドインドロワー
 *  otk-cta            - フッター上の緑グラデCTA帯
 *  otk-footer 系      - 会社情報＋ナビ＋地図＋コピーライト
 *  otk-btn 系         - LINE/白/ゴールド/濃緑ボタン（3D影付き）
 *  otk-pagetop        - ページトップボタン
 *  otk-mv 系          - TOPファーストビュー（緑背景＋写真＋波＋バッジ）
 *  otk-badges         - 4連バッジカード（緑背景）
 *  otk-philosophy     - 理念セクション（画像グリッド＋テキスト）
 *  otk-worries        - お悩みチェックリスト（2×2）
 *  otk-solutions      - 防音ソリューション3カード（緑グリッド背景）
 *  otk-reasons        - 選ばれる4つの理由（番号付きカード）
 *  otk-voices         - お客様の声スライダー（緑背景）
 *  otk-price / otk-steps - 費用の目安テーブル／3ステップ
 *  otk-sec 系         - セクション見出し・共通パーツ
 *  otk-page-hero      - 下層ページヒーロー
 *
 * ======================================
 * 共通SCSSに不足していたもの（5分類）
 * ======================================
 *  装飾パターン不足 : 上下グラデ帯・波型SVG装飾・グリッド線背景（緑背景セクション）
 *  構造不足        : 3段ヘッダー／写真の非対称グリッド／時間性能保証バッジ
 *  値の粒度不足     : ブランド固有の余白・角丸・3D影（0 4px 0 #xxx）
 */

:root {
  --otk-green: #294F2C;
  --otk-green-grad: #2F5733;
  --otk-gold: #D7BC79;
  --otk-gold-dark: #8A6A2F;
  --otk-gold-shadow: #B89A53;
  --otk-line: #06C755;
  --otk-line-shadow: #05a648;
  --otk-txt: #22303c;
  --otk-txt-sub: #5b6b7b;
  --otk-muted: #7a8896;
  --otk-section: #F8F9FA;
  --otk-border: #e4e9ef;
}

/* ============ base ============ */
html { overflow-x: clip; }           /* オフキャンバスのドロワー等による横スクロールを抑止（stickyは維持） */
body { color: var(--otk-txt); overflow-x: clip; }
.otk-wrap { overflow-x: clip; background: #fff; }

/* ============ buttons ============ */
.otk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-weight: 700; font-size: 15px; text-decoration: none; line-height: 1.35;
  padding: 15px 26px; border-radius: 11px; border: none; cursor: pointer;
  text-align: center; max-width: 100%; box-sizing: border-box;
}
.otk-btn i { flex: none; }
.otk-btn--lg { font-size: 16px; padding: 16px 28px; }
.otk-btn--line { background: var(--otk-line); color: #fff; box-shadow: 0 4px 0 var(--otk-line-shadow); }
.otk-btn--white { background: #fff; color: var(--otk-green); box-shadow: 0 4px 0 #c7d3de; }
.otk-btn--gold { background: var(--otk-gold-dark); color: #fff; box-shadow: 0 4px 0 var(--otk-gold-shadow); }
.otk-btn--green { background: var(--otk-green); color: #fff; }
.otk-btn--outline-white { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.6); padding: 13px 26px; }
.otk-btn--line:hover, .otk-btn--white:hover, .otk-btn--gold:hover { transform: translateY(2px); box-shadow: 0 2px 0 currentColor; color: #fff; opacity: .95; }
.otk-btn--white:hover { color: var(--otk-green); }
.otk-btn:hover { opacity: .93; }
.otk-btn--green:hover, .otk-btn--outline-white:hover { color: #fff; opacity: .9; }

/* ============ header ============ */
.otk-header {
  font-family: "Noto Sans JP", sans-serif;
  position: relative; z-index: 190;
}
.otk-header__bar { background: var(--otk-gold-dark); color: #fff; }
.otk-header__bar-inner {
  max-width: 1240px; margin: 0 auto; padding: 7px 20px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px;
}
.otk-header__catch { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .02em; display: flex; align-items: center; gap: 9px; }
.otk-header__badge { background: #fff; color: #7A5A2C; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 3px; }
.otk-header__util { display: flex; align-items: center; gap: 16px; font-size: 12px; color: #fff5ee; }
.otk-header__access { color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; font-weight: 700; }
.otk-header__access:hover { color: #fff; opacity: .85; }

.otk-header__main { background: var(--otk-green); }
.otk-header__main-inner {
  max-width: 1240px; margin: 0 auto; padding: 16px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
}
.otk-header__logo { display: flex; align-items: center; flex: none; text-decoration: none; }
.otk-header__logo img { height: clamp(52px, 5.8vw, 72px); width: auto; display: block; }
.otk-header__actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.otk-header__tel { text-align: right; line-height: 1.15; text-decoration: none; display: block; }
.otk-header__tel-label { display: block; font-size: 10.5px; color: #9fb4c8; font-weight: 500; }
.otk-header__tel-num { font-size: 26px; font-weight: 700; color: #fff; letter-spacing: .01em; display: inline-flex; align-items: center; gap: 7px; }
.otk-header__tel-num i { color: var(--otk-gold); font-size: 20px; }
.otk-header__line {
  display: inline-flex; align-items: center; gap: 7px; background: var(--otk-line); color: #fff;
  font-weight: 700; font-size: 14px; text-decoration: none; padding: 12px 18px; border-radius: 9px;
  box-shadow: 0 3px 0 var(--otk-line-shadow);
}
.otk-header__line:hover { color: #fff; opacity: .95; }
.otk-hamburger {
  display: none; align-items: center; justify-content: center; width: 46px; height: 46px;
  background: #F8F9FA; border: 2px solid #e2e8ef; border-radius: 9px; cursor: pointer; padding: 0;
}
.otk-hamburger i { font-size: 22px; color: var(--otk-green); }

.otk-gnav { background: var(--otk-green); border-top: 1px solid rgba(255,255,255,.14); position: sticky; top: 0; z-index: 200; box-shadow: 0 2px 12px rgba(25,50,27,.08); }
.otk-gnav__inner { max-width: 1240px; margin: 0 auto; padding: 0 20px; display: flex; align-items: stretch; justify-content: center; gap: 2px; }
.otk-gnav__item {
  text-decoration: none; color: #eaf1f7; font-weight: 700; font-size: 14.5px; padding: 15px 20px;
  letter-spacing: .02em; border-bottom: 3px solid transparent; white-space: nowrap; transition: all .25s;
}
.otk-gnav__item:hover { color: var(--otk-gold); background: rgba(215,188,121,.08); }
.otk-gnav__item.is-current { color: var(--otk-gold); border-bottom-color: var(--otk-gold); background: rgba(215,188,121,.1); }

/* ============ SP drawer ============ */
.otk-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(340px, 86vw); z-index: 250;
  background: var(--otk-green); padding: 80px 22px 28px; display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .35s ease; overflow-y: auto;
  box-shadow: -8px 0 30px rgba(0,0,0,.25);
}
.otk-drawer.is-open { transform: translateX(0); }
.otk-drawer__list { list-style: none; margin: 0; padding: 0; }
.otk-drawer__link {
  display: block; color: #fff; text-decoration: none; font-weight: 700; font-size: 15px;
  padding: 15px 8px; border-bottom: 1px solid rgba(255,255,255,.12);
}
.otk-drawer__link.is-current, .otk-drawer__link:hover { color: var(--otk-gold); }
.otk-drawer__actions { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.otk-drawer__line, .otk-drawer__tel {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  text-align: center; font-weight: 700; text-decoration: none; padding: 14px; border-radius: 9px;
}
.otk-drawer__line { background: var(--otk-line); color: #fff; }
.otk-drawer__tel { background: #fff; color: var(--otk-green); }
.otk-hamburger.is-active i::before { content: "\f00d"; } /* fa-xmark */

/* ============ CTA band ============ */
.otk-cta { background: linear-gradient(180deg, var(--otk-green-grad), var(--otk-green)); border-bottom: 3px solid var(--otk-gold); }
.otk-cta__inner { max-width: 1100px; margin: 0 auto; padding: 48px 20px; text-align: center; }
.otk-cta__title { margin: 0 0 10px; font-size: clamp(22px, 3vw, 30px); font-weight: 700; color: #fff; line-height: 1.4; text-wrap: balance; word-break: keep-all; }
.otk-cta__desc { margin: 0 auto 26px; max-width: 640px; font-size: 14px; line-height: 1.9; color: #b6c6d6; text-wrap: balance; word-break: keep-all; }
.otk-cta__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ============ footer ============ */
.otk-footer { font-family: "Noto Sans JP", sans-serif; background: var(--otk-green); color: #dbe5ee; }
.otk-footer__inner { max-width: 1240px; margin: 0 auto; padding: 52px 20px 36px; display: grid; grid-template-columns: 1.1fr .7fr 1fr; gap: 40px; }
.otk-footer__logo { display: inline-block; text-decoration: none; margin-bottom: 18px; }
.otk-footer__logo img { height: 76px; width: auto; display: block; }
.otk-footer__info { margin: 0; font-size: 13.5px; line-height: 2; color: #b6c6d6; }
.otk-footer__info a { color: inherit; text-decoration: none; font-weight: 400; }
.otk-footer__nav { display: flex; flex-direction: column; gap: 12px; }
.otk-footer__nav-item { color: #dbe5ee; text-decoration: none; font-size: 13.5px; font-weight: 500; display: inline-flex; align-items: center; gap: 9px; }
.otk-footer__nav-item::before { content: ""; flex: none; width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 7px; border-color: transparent transparent transparent var(--otk-gold); }
.otk-footer__nav-item:hover { color: var(--otk-gold); }
.otk-footer__map { border: 2px solid #2a4a68; border-radius: 9px; overflow: hidden; min-height: 220px; background: var(--otk-green-grad); }
.otk-footer__map iframe { width: 100%; height: 100%; min-height: 220px; border: 0; display: block; filter: grayscale(.15); }
.otk-footer__bottom { border-top: 1px solid rgba(255,255,255,.1); }
.otk-footer__bottom .otk-footer__copy { display: block; max-width: 1240px; margin: 0 auto; padding: 18px 20px; text-align: center; font-size: 12px; color: #7f97ad; }

/* ============ page top ============ */
.otk-pagetop {
  position: fixed; right: 20px; bottom: 20px; width: 48px; height: 48px; border-radius: 50%;
  background: var(--otk-gold-dark); color: #fff; border: none; cursor: pointer; z-index: 150;
  display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden;
  transform: translateY(10px); transition: all .3s ease; box-shadow: 0 4px 14px rgba(0,0,0,.25);
}
.otk-pagetop.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.otk-pagetop i { font-size: 18px; }

/* ============ responsive header ============ */
@media (max-width: 980px) {
  .otk-gnav { display: none; }
  /* グロナビが無いモバイルでは、ハンバーガーを維持するためロゴバーを追従させる */
  .otk-header { position: sticky; top: 0; box-shadow: 0 2px 12px rgba(25,50,27,.08); }
  .otk-hamburger { display: inline-flex; }
  .otk-header__tel { display: none; }
  .otk-header__line { display: none; }
}
@media (max-width: 760px) {
  .otk-footer__inner { grid-template-columns: 1fr; gap: 28px; }
  .otk-header__catch { font-size: 11.5px; }
  .otk-header__util { display: none; }
}

/* ============ section heading ============ */
.otk-sec-head { margin-bottom: 40px; }
.otk-sec-head--center { text-align: center; }
.otk-sec-head__title { margin: 0; font-size: clamp(23px, 3.2vw, 34px); font-weight: 700; color: var(--otk-green); line-height: 1.45; text-wrap: balance; word-break: keep-all; }
.otk-sec-head--white .otk-sec-head__title { color: #fff; }
.otk-sec-head__note { margin: 8px 0 0; font-size: 13.5px; color: var(--otk-txt-sub); }

/* ============ MV ============ */
.otk-mv { position: relative; overflow: hidden; background: var(--otk-green); }
.otk-mv__bg { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 0; }
/* MV CMSスライダー（背景レイヤー）。Swiper初期化はCMS側（§10.1） */
.otk-mv__slider { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: var(--otk-green); }
.otk-mv__slider #cms-slider-1-1-area,
.otk-mv__slider .swiper,
.otk-mv__slider .swiper-container,
.otk-mv__slider .swiper-wrapper,
.otk-mv__slider .swiper-slide { width: 100%; height: 100%; }
.otk-mv__slider img { width: 100%; height: 100%; object-fit: cover; display: block; }
.otk-mv__overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(100deg, rgba(20,44,22,.82) 0%, rgba(20,44,22,.58) 30%, rgba(20,44,22,.22) 60%, rgba(20,44,22,0) 100%); pointer-events: none; }
.otk-mv__grid { position: absolute; inset: 0; z-index: 1; background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 44px), repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 44px); pointer-events: none; }
.otk-mv__inner { position: relative; z-index: 2; max-width: 1240px; margin: 0 auto; padding: clamp(64px, 9vw, 110px) 20px; min-height: clamp(500px, 60vh, 640px); display: flex; flex-direction: column; justify-content: center; pointer-events: none; }
.otk-mv__inner a { pointer-events: auto; }
.otk-mv__body { max-width: 680px; }
.otk-mv__tag { display: inline-flex; align-items: center; gap: 8px; background: rgba(215,188,121,.2); border: 1.5px solid rgba(215,188,121,.55); color: #e6d3a1; font-size: 12.5px; font-weight: 700; padding: 6px 13px; border-radius: 6px; letter-spacing: .03em; margin: 0 0 24px; }
.otk-mv__title { margin: 0 0 22px; color: #fff; font-size: clamp(29px, 4.2vw, 50px); font-weight: 700; line-height: 1.5; letter-spacing: .01em; text-shadow: 0 2px 24px rgba(0,0,0,.4); }
.otk-mv__title-em { color: var(--otk-gold); }
.otk-mv__lead { margin: 0 0 34px; color: #dbe6f0; font-size: clamp(14px, 1.4vw, 17px); line-height: 2; max-width: 560px; text-shadow: 0 1px 10px rgba(0,0,0,.4); }
.otk-mv__lead b { color: #fff; }
.otk-mv__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 600px; }
.otk-mv__actions .otk-btn small { font-size: 11px; font-weight: 500; }
.otk-mv__note { position: absolute; z-index: 2; right: clamp(16px, 3vw, 40px); bottom: clamp(16px, 3vw, 32px); margin: 0; background: rgba(25,50,27,.82); color: #fff; font-size: 12.5px; font-weight: 700; padding: 9px 15px; border-radius: 9px; border: 1px solid rgba(255,255,255,.14); }

/* ============ BADGES ============ */
.otk-badges { background: var(--otk-green); border-top: 1px solid rgba(255,255,255,.08); }
.otk-badges__inner { max-width: 1240px; margin: 0 auto; padding: 56px 20px 60px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.otk-badge { text-decoration: none; background: var(--otk-gold); border: 2px solid var(--otk-gold); border-radius: 10px; padding: 22px 20px; box-shadow: 0 10px 24px rgba(0,0,0,.18); display: flex; align-items: center; justify-content: center; gap: 14px; transition: transform .3s; }
.otk-badge:hover { transform: translateY(-5px); }
.otk-badge__icon { flex: none; width: 48px; height: 48px; border-radius: 10px; background: var(--otk-green); display: flex; align-items: center; justify-content: center; }
.otk-badge__icon i { color: #fff; font-size: 24px; }
.otk-badge__title { min-width: 0; color: var(--otk-green); font-size: 17px; font-weight: 700; letter-spacing: .01em; line-height: 1.35; overflow-wrap: anywhere; }

/* ============ PHILOSOPHY ============ */
.otk-philosophy { background: var(--otk-section); }
.otk-philosophy__inner { max-width: 1080px; margin: 0 auto; padding: 80px 20px; }
.otk-philosophy .otk-sec-head { margin-bottom: 36px; }
.otk-philosophy .otk-sec-head__title { font-size: clamp(24px, 3.4vw, 38px); line-height: 1.4; }
.otk-philosophy__cols { display: grid; grid-template-columns: 1fr 1.02fr; gap: clamp(24px, 4vw, 48px); align-items: center; }
.otk-philosophy__photos { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; height: clamp(320px, 34vw, 420px); }
.otk-philosophy__photo { position: relative; border-radius: 10px; overflow: hidden; background: #35603A; }
.otk-philosophy__photo--tall { grid-row: 1 / 3; }
.otk-philosophy__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.otk-philosophy__text { font-size: clamp(15px, 1.5vw, 17px); line-height: 2.15; color: #33414d; }
.otk-philosophy__text p { margin: 0 0 20px; }
.otk-philosophy__text p:last-child { margin-bottom: 0; }
.otk-philosophy__text b { color: var(--otk-green); }

/* ============ WORRIES ============ */
.otk-worries { background: #fff; }
.otk-worries__inner { max-width: 1080px; margin: 0 auto; padding: 78px 20px; }
.otk-worries__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.otk-worry { display: flex; gap: 16px; align-items: flex-start; background: var(--otk-section); border: 2px solid #e4e9ef; border-radius: 9px; padding: 20px 22px; }
.otk-worry__check { flex: none; width: 30px; height: 30px; border: 2.5px solid var(--otk-green); border-radius: 7px; display: flex; align-items: center; justify-content: center; background: #fff; }
.otk-worry__check i { color: var(--otk-gold); font-size: 15px; }
.otk-worry p { margin: 0; font-size: 15px; line-height: 1.8; color: #33414d; font-weight: 500; }
.otk-worries__lead { text-align: center; margin: 34px 0 0; font-size: clamp(16px, 1.8vw, 20px); font-weight: 700; color: var(--otk-green); text-wrap: balance; word-break: keep-all; }
.otk-worries__lead span { color: var(--otk-gold-dark); }

/* ============ SOLUTIONS ============ */
.otk-solutions { position: relative; background-color: var(--otk-green); background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 44px), repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 44px); }
.otk-solutions__inner { max-width: 1240px; margin: 0 auto; padding: 80px 20px; }
.otk-solutions .otk-sec-head { margin-bottom: 44px; }
.otk-solutions__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.otk-sec-head--white .otk-sec-head__note { color: #cde0d0; }
.otk-solcard { position: relative; text-decoration: none; background: #fff; border-radius: 11px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 8px 20px rgba(0,0,0,.06); transition: transform .3s, box-shadow .3s; }
.otk-solcard:hover { transform: translateY(-5px); box-shadow: 0 14px 28px rgba(0,0,0,.15); }
.otk-solcard__img { aspect-ratio: 16/10; position: relative; background: #35603A; }
.otk-solcard__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.otk-solcard__body { padding: 18px 18px 24px; flex: 1; display: flex; flex-direction: column; align-items: flex-start; }
.otk-solcard__tag { display: inline-flex; align-items: center; gap: 7px; background: var(--otk-green); color: #fff; font-size: 11px; font-weight: 700; line-height: 1.4; padding: 5px 10px; border-radius: 6px; margin-bottom: 10px; }
.otk-solcard__title { margin: 0 0 8px; font-size: 16px; font-weight: 700; line-height: 1.5; color: var(--otk-green); word-break: keep-all; overflow-wrap: anywhere; }
.otk-solcard__text { margin: 0; font-size: 13px; line-height: 1.8; color: var(--otk-txt-sub); padding-right: 44px; }
/* カード内の費用目安（未確定カテゴリは --ask で「規模に応じてお見積り」）。タイトルが2行でも下端で揃える */
.otk-solcard__price { margin: auto 0 0; padding-right: 44px; font-size: 18px; font-weight: 700; color: var(--otk-gold-dark); }
.otk-solcard__price--ask { font-size: 13px; color: var(--otk-txt-sub); }
.otk-solcard__arrow { position: absolute; right: 0; bottom: 0; width: 42px; height: 42px; background: var(--otk-gold); border-radius: 42px 0 0 0; display: flex; align-items: flex-end; justify-content: flex-end; padding: 0 8px 8px 0; }
.otk-solcard__arrow i { color: #fff; font-size: 13px; }
.otk-solutions__more { text-align: center; margin-top: 36px; }

/* ============ 4 REASONS ============ */
.otk-reasons { background: var(--otk-section); }
.otk-reasons__inner { max-width: 1240px; margin: 0 auto; padding: 80px 20px; }
.otk-reasons .otk-sec-head { margin-bottom: 44px; }
.otk-reasons__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.otk-reason { display: flex; gap: 20px; background: #fff; border: 2px solid #e4e9ef; border-radius: 11px; padding: 26px; }
.otk-reason__num { flex: none; text-align: center; }
.otk-reason__label { display: block; font-family: "Barlow Condensed", sans-serif; font-size: 13px; font-weight: 700; color: var(--otk-gold-dark); letter-spacing: .1em; }
.otk-reason__no { display: block; font-family: "Barlow Condensed", sans-serif; font-size: 52px; font-weight: 700; color: var(--otk-green); line-height: .9; }
.otk-reason__body { border-left: 2px solid #eef1f5; padding-left: 20px; }
.otk-reason__title { margin: 0 0 8px; font-size: 17px; font-weight: 700; color: var(--otk-green); line-height: 1.5; }
.otk-reason__text { margin: 0; font-size: 13.5px; line-height: 1.9; color: var(--otk-txt-sub); }
.otk-reasons__more { text-align: center; margin-top: 36px; }

/* ============ VOICES ============ */
.otk-voices { background: var(--otk-green); }
.otk-voices__inner { max-width: 1160px; margin: 0 auto; padding: 78px 20px; }
.otk-voices .otk-sec-head { margin-bottom: 40px; }
.otk-voices__slider { position: relative; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 18px 40px rgba(0,0,0,.22); max-width: 1000px; margin: 0 auto; }
.otk-voices__viewport { overflow: hidden; }
.otk-voices__track { display: flex; transition: transform .55s cubic-bezier(.4,0,.2,1); }
.otk-voice { flex: 0 0 100%; box-sizing: border-box; padding: clamp(30px, 4vw, 52px) clamp(58px, 6vw, 68px); display: grid; grid-template-columns: .8fr 1.2fr; gap: 32px; align-items: center; }
.otk-voice__img { aspect-ratio: 4/3; border-radius: 12px; overflow: hidden; border: 2px solid rgba(0,0,0,.08); }
.otk-voice__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.otk-voice__stars { display: flex; gap: 4px; margin-bottom: 14px; color: #E0A63A; font-size: 18px; }
.otk-voice__text { margin: 0 0 18px; color: #2b3742; font-size: clamp(15px, 1.6vw, 18px); line-height: 1.9; font-weight: 500; }
.otk-voice__meta { color: var(--otk-muted); font-size: 13px; }
.otk-voices__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; background: rgba(41,79,44,.1); border: none; color: var(--otk-green); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.otk-voices__nav:hover { background: rgba(41,79,44,.2); }
.otk-voices__nav--prev { left: 14px; }
.otk-voices__nav--next { right: 14px; }
.otk-voices__dots { display: flex; justify-content: center; gap: 9px; margin-top: 20px; }
.otk-voices__dot { width: 10px; height: 10px; border-radius: 5px; border: none; cursor: pointer; padding: 0; background: #c8d2dc; transition: all .25s; }
.otk-voices__dot.is-active { width: 26px; background: var(--otk-gold); }
.otk-voices__more { text-align: center; margin-top: 30px; }

/* ============ PRICE + STEPS ============ */
.otk-price-steps { background: var(--otk-section); }
.otk-price-steps__inner { max-width: 1160px; margin: 0 auto; padding: 80px 20px; }
.otk-price-steps .otk-sec-head { margin-bottom: 36px; }
.otk-price { max-width: 940px; margin: 0 auto; background: #fff; border: 2px solid #e4e9ef; border-radius: 11px; overflow: hidden; }
.otk-price__row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 26px; border-bottom: 1px solid #eef1f5; }
.otk-price__row:last-child { border-bottom: none; }
.otk-price__name { display: block; font-size: 16px; font-weight: 700; color: var(--otk-green); }
.otk-price__note { display: block; font-size: 12.5px; color: var(--otk-muted); margin-top: 3px; }
.otk-price__value { flex: none; font-size: 22px; font-weight: 700; color: var(--otk-gold-dark); white-space: nowrap; }
.otk-steps__head { margin: 60px 0 34px; }
.otk-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.otk-step { background: #fff; border: 2px solid #e4e9ef; border-radius: 11px; overflow: hidden; position: relative; }
.otk-step__img { position: relative; aspect-ratio: 16/10; background: #35603A; }
.otk-step__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.otk-step__no { position: absolute; left: 16px; bottom: -22px; width: 52px; height: 52px; border-radius: 9px; background: var(--otk-green); color: #fff; font-family: "Barlow Condensed", sans-serif; font-size: 24px; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 3px solid #fff; box-shadow: 0 4px 12px rgba(0,0,0,.2); }
.otk-step__body { padding: 32px 24px 26px; }
.otk-step__title { margin: 0 0 8px; font-size: 16px; font-weight: 700; color: var(--otk-green); }
.otk-step__text { margin: 0; font-size: 13px; line-height: 1.8; color: var(--otk-txt-sub); }

/* ============ TOP responsive ============ */
@media (max-width: 1080px) {
  .otk-solutions__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .otk-badges__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .otk-solutions__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .otk-steps { grid-template-columns: 1fr; }
  .otk-reasons__grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .otk-badges__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 34px 16px 38px; }
  .otk-solutions__grid { gap: 10px; }
  .otk-solcard__body { padding: 13px 13px 17px; }
  .otk-solcard__tag { font-size: 10px; gap: 5px; padding: 4px 8px; margin-bottom: 8px; }
  .otk-solcard__title { font-size: 14px; margin-bottom: 6px; }
  .otk-solcard__price { font-size: 15px; padding-right: 30px; }
  .otk-solcard__price--ask { font-size: 10.5px; padding-right: 24px; }
  .otk-solcard__arrow { width: 32px; height: 32px; border-radius: 32px 0 0 0; padding: 0 6px 6px 0; }
  .otk-solcard__arrow i { font-size: 11px; }
  .otk-badge { flex-direction: column; text-align: center; gap: 8px; padding: 16px 10px; }
  .otk-badge__icon { width: 40px; height: 40px; border-radius: 8px; }
  .otk-badge__icon i { font-size: 20px; }
  .otk-badge__title { font-size: 12.5px; letter-spacing: 0; line-height: 1.4; word-break: keep-all; }
}
@media (max-width: 680px) {
  .otk-mv__actions { grid-template-columns: 1fr 1fr; gap: 10px; }
  .otk-philosophy__cols { grid-template-columns: 1fr; }
  .otk-worries__grid { grid-template-columns: 1fr; }
  .otk-voice { grid-template-columns: 1fr; gap: 20px; }
  .otk-voice__img { max-width: 320px; margin: 0 auto; }
  .otk-price__row { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ============ page hero (solid green grid) ============ */
.otk-page-hero { position: relative; background-color: var(--otk-green); background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 1px, transparent 1px 44px), repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 44px); }
.otk-page-hero__inner { max-width: 1100px; margin: 0 auto; padding: 56px 20px; text-align: center; }
.otk-page-hero__title { margin: 0; color: #fff; font-size: clamp(26px, 3.4vw, 38px); font-weight: 700; }
.otk-page-hero__lead { margin: 12px 0 0; color: #cde0d0; font-size: 14px; }

/* ============ reason intro ============ */
.otk-rintro { background: #fff; }
.otk-rintro__inner { max-width: 1080px; margin: 0 auto; padding: 72px 20px; display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; }
.otk-rintro__tag { display: inline-flex; align-items: center; gap: 8px; background: #faf6ee; border: 1.5px solid var(--otk-gold); color: #7A5A2C; font-size: 12.5px; font-weight: 700; padding: 6px 13px; border-radius: 6px; margin-bottom: 22px; }
.otk-rintro__title { margin: 0 0 20px; color: var(--otk-green); font-size: clamp(24px, 3.2vw, 38px); font-weight: 700; line-height: 1.5; }
.otk-rintro__title-em { color: var(--otk-gold-dark); border-bottom: 4px solid var(--otk-gold); padding-bottom: 2px; }
.otk-rintro__lead { margin: 0; color: #44515d; font-size: clamp(14px, 1.5vw, 17px); line-height: 2; }
.otk-rintro__lead b { color: var(--otk-green); }
.otk-rintro__img { position: relative; aspect-ratio: 4/3; border-radius: 11px; overflow: hidden; border: 2px solid #e4e9ef; box-shadow: 0 16px 40px rgba(0,0,0,.12); }
.otk-rintro__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============ Q&A ============ */
.otk-qa { background: var(--otk-section); padding-bottom: 72px; }
.otk-qa__head { max-width: 1080px; margin: 0 auto; padding: 72px 20px 24px; text-align: center; }
.otk-qa__balloon { position: relative; display: inline-block; background: var(--otk-green); border-radius: 11px; padding: 22px 72px; box-shadow: 0 6px 18px rgba(41,79,44,.14); }
.otk-qa__balloon h2 { margin: 0; font-size: clamp(22px, 3vw, 32px); font-weight: 700; color: #fff; text-wrap: balance; word-break: keep-all; }
.otk-qa__balloon::after { content: ""; position: absolute; left: 50%; bottom: -15px; transform: translateX(-50%); width: 0; height: 0; border-style: solid; border-width: 15px 13px 0 13px; border-color: var(--otk-green) transparent transparent transparent; }
.otk-qa__list { display: flex; flex-direction: column; gap: 28px; }
.otk-qcard { max-width: 1080px; margin: 0 auto; width: 100%; padding: 0 20px; scroll-margin-top: 170px; }
.otk-qcard > * + * { margin-top: 0; }
.otk-qcard__inner, .otk-qcard { }
.otk-qcard__head, .otk-qcard__body { background: #fff; }
.otk-qcard { }
.otk-qcard__wrap { }
.otk-qcard__head { display: flex; gap: 16px; align-items: center; padding: 26px 26px 24px; border: 2px solid #e4e9ef; border-bottom: none; border-radius: 12px 12px 0 0; }
.otk-qcard__no { flex: none; font-family: "Barlow Condensed", sans-serif; background: var(--otk-green); color: #fff; width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 21px; font-weight: 700; box-shadow: 0 4px 10px rgba(41,79,44,.25); }
.otk-qcard__bubble { position: relative; flex: 1; background: var(--otk-section); border: 2px solid #e4e9ef; border-radius: 10px; padding: 14px 20px; display: flex; flex-direction: column; gap: 3px; }
.otk-qcard__bubble::before { content: ""; position: absolute; left: -11px; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-style: solid; border-width: 9px 11px 9px 0; border-color: transparent #e4e9ef transparent transparent; }
.otk-qcard__bubble::after { content: ""; position: absolute; left: -8px; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-style: solid; border-width: 8px 9px 8px 0; border-color: transparent var(--otk-section) transparent transparent; }
.otk-qcard__label { font-size: 11.5px; font-weight: 700; color: var(--otk-gold-dark); letter-spacing: .04em; }
.otk-qcard__ask { font-size: clamp(15px, 1.7vw, 18px); font-weight: 700; color: var(--otk-green); }
.otk-qcard__body { padding: clamp(24px, 3vw, 36px); display: grid; grid-template-columns: 1fr 30%; gap: 26px; align-items: stretch; border: 2px solid #e4e9ef; border-top: none; border-radius: 0 0 12px 12px; }
.otk-qcard__title { margin: 0 0 16px; font-size: clamp(17px, 2vw, 22px); font-weight: 700; color: var(--otk-green); line-height: 1.6; }
.otk-qcard__title span { color: var(--otk-gold-dark); }
.otk-qcard__text { margin: 0; font-size: 15px; line-height: 2.1; color: #44515d; }
.otk-qcard__text b { color: var(--otk-green); }
.otk-qcard__evi { background: #faf6ee; border: 2px solid var(--otk-gold); border-radius: 12px; padding: 22px 24px; margin-top: 22px; }
.otk-qcard__evi-label { font-size: 12px; font-weight: 700; color: var(--otk-gold-dark); letter-spacing: .06em; margin-bottom: 8px; }
.otk-qcard__evi p { margin: 0; font-size: 15.5px; line-height: 1.95; color: #2b3742; font-weight: 500; }
.otk-qcard__evi b { color: #7A5A2C; }
.otk-qcard__img { position: relative; border-radius: 5px; overflow: hidden; min-height: 200px; background: #35603A; }
.otk-qcard__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============ FAQ accordion ============ */
.otk-faq-sec { background: #fff; }
.otk-faq-sec__inner { max-width: 900px; margin: 0 auto; padding: 72px 20px; }
.otk-faq-sec .otk-sec-head { margin-bottom: 36px; }
.otk-faq-list { display: flex; flex-direction: column; gap: 12px; }
.otk-faq { background: #fff; border: 2px solid #e4e9ef; border-radius: 9px; overflow: hidden; }
.otk-faq__q { width: 100%; display: flex; gap: 14px; align-items: center; text-align: left; background: none; border: none; cursor: pointer; padding: 20px 22px; }
.otk-faq__badge { flex: none; width: 30px; height: 30px; border-radius: 7px; background: var(--otk-green); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 15px; }
.otk-faq__badge--a { background: var(--otk-gold-dark); }
.otk-faq__ask { flex: 1; font-size: 15px; font-weight: 700; color: var(--otk-green); line-height: 1.6; }
.otk-faq__icon { flex: none; color: var(--otk-gold); font-size: 16px; transition: transform .25s; }
.otk-faq.is-open .otk-faq__icon { transform: rotate(180deg); }
.otk-faq__a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.otk-faq.is-open .otk-faq__a { max-height: 600px; }
.otk-faq__a-inner { display: flex; gap: 14px; padding: 0 22px 22px; }
.otk-faq__a-inner p { margin: 0; font-size: 14px; line-height: 1.95; color: #44515d; }

@media (max-width: 820px) {
  .otk-rintro__inner { grid-template-columns: 1fr; }
  .otk-qcard__body { grid-template-columns: 1fr; }
  .otk-qcard__img { min-height: 200px; }
  .otk-qa__balloon { padding: 20px 28px; }
}

/* ============ services ============ */
.otk-svc-intro { background: #fff; }
.otk-svc-intro { text-align: center; }
.otk-svc-intro p { max-width: 900px; margin: 0 auto; padding: 52px 20px 8px; font-size: clamp(15px, 1.7vw, 18px); font-weight: 700; line-height: 1.9; color: var(--otk-green); text-wrap: balance; word-break: keep-all; }
.otk-svc-subnav { position: sticky; top: 0; z-index: 60; background: #fff; border-bottom: 2px solid #eef1f5; box-shadow: 0 4px 14px rgba(25,50,27,.05); }
.otk-svc-intro p.otk-svc-intro__note { padding: 12px 20px 0; font-size: 12.5px; font-weight: 400; line-height: 1.8; color: var(--otk-muted); }
.otk-svc-subnav__inner { max-width: 1240px; margin: 0 auto; padding: 16px 20px 22px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.otk-svc-subnav a { text-decoration: none; white-space: nowrap; font-size: 13px; font-weight: 700; padding: 10px 16px; color: #fff; background: var(--otk-gold-dark); border: 2px solid var(--otk-gold-dark); border-radius: 10px; box-shadow: 0 4px 0 var(--otk-gold-shadow); transition: all .2s; }
.otk-svc-subnav a:hover { background: var(--otk-green); border-color: var(--otk-green); box-shadow: 0 4px 0 #1f3d22; color: #fff; transform: translateY(-1px); }
.otk-svc-group { scroll-margin-top: 120px; }
.otk-svc-group--gray { background: var(--otk-section); }
.otk-svc-group--green { background: #eef2ee; }
.otk-svc-group__inner { max-width: 1100px; margin: 0 auto; padding: 76px 20px; }
.otk-svc-group__head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.otk-svc-group__bar { width: 6px; height: 30px; background: var(--otk-gold); border-radius: 3px; }
.otk-svc-group__title { margin: 0; font-size: clamp(20px, 2.4vw, 27px); font-weight: 700; color: var(--otk-green); }
.otk-svc-group__lead { margin: 0 0 32px; font-size: 14px; line-height: 1.9; color: var(--otk-txt-sub); max-width: 760px; }
.otk-svc-rows { display: flex; flex-direction: column; gap: 22px; }
.otk-svc-row { background: #fff; border: 2px solid #e4e9ef; border-radius: 12px; overflow: hidden; display: grid; grid-template-columns: .85fr 1.15fr; box-shadow: 0 6px 18px rgba(41,79,44,.05); scroll-margin-top: 130px; }
.otk-svc-row__img { position: relative; min-height: 230px; background: #35603A; }
.otk-svc-row__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* 画像左上の費用目安バッジ（--ask は金額未確定カテゴリ用） */
.otk-svc-row__badge { position: absolute; left: 14px; top: 14px; background: var(--otk-gold-dark); color: #fff; font-size: 14px; font-weight: 700; padding: 6px 13px; border-radius: 6px; box-shadow: 0 3px 10px rgba(0,0,0,.2); }
.otk-svc-row__badge--ask { background: var(--otk-green); font-size: 11.5px; }
.otk-svc-row__body { padding: clamp(24px, 3vw, 34px); }
/* お客様の「やりたいこと」ラベル */
.otk-svc-row__want { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 10px; font-size: 13px; font-weight: 700; line-height: 1.4; color: var(--otk-gold-dark); background: #faf6ee; border: 1px solid var(--otk-gold); border-radius: 20px; padding: 5px 14px; }
.otk-svc-row__title { margin: 0 0 8px; font-size: clamp(18px, 2vw, 22px); font-weight: 700; color: var(--otk-green); }
.otk-svc-row__pt { margin: 0 0 16px; font-size: 15px; line-height: 1.75; color: var(--otk-gold-dark); font-weight: 700; }
.otk-svc-row__text { margin: 0 0 18px; font-size: 13.5px; line-height: 1.95; color: #44515d; }
.otk-svc-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.otk-svc-tags span { font-size: 11.5px; color: var(--otk-txt-sub); background: var(--otk-section); border: 1px solid #e4e9ef; border-radius: 20px; padding: 4px 12px; }
.otk-svc-row__more { display: inline-flex; align-items: center; gap: 7px; color: var(--otk-green); font-weight: 700; font-size: 13.5px; text-decoration: none; border: 2px solid var(--otk-green); padding: 11px 20px; border-radius: 10px; transition: all .2s; }
.otk-svc-row__more:hover { background: var(--otk-green); color: #fff; }
/* カテゴリごとの問い合わせ導線（事例 → LINE／メール／電話） */
.otk-svc-row__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.otk-svc-row__contact { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.otk-svc-row__then { width: 100%; display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--otk-muted); }
.otk-svc-row__then::before { content: ""; width: 14px; height: 1px; background: var(--otk-border); }
.otk-svc-btn { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; line-height: 1.35; text-decoration: none; padding: 11px 16px; border-radius: 10px; transition: all .2s; }
.otk-svc-btn--line { background: var(--otk-line); color: #fff; box-shadow: 0 3px 0 var(--otk-line-shadow); }
.otk-svc-btn--mail { background: var(--otk-gold-dark); color: #fff; box-shadow: 0 3px 0 var(--otk-gold-shadow); }
.otk-svc-btn--tel { background: #fff; color: var(--otk-green); border: 2px solid var(--otk-green); padding: 9px 14px; }
.otk-svc-btn--line:hover, .otk-svc-btn--mail:hover { transform: translateY(2px); box-shadow: none; color: #fff; }
.otk-svc-btn--tel:hover { background: var(--otk-green); color: #fff; }
.otk-svc-cta { background: #fff; }
.otk-svc-cta__inner { max-width: 1100px; margin: 0 auto; padding: 20px 20px 76px; }
.otk-svc-cta__box { background: #faf6ee; border: 2px solid var(--otk-gold); border-radius: 12px; padding: clamp(30px, 4vw, 48px); text-align: center; }
.otk-svc-cta__box h2 { margin: 0 0 12px; color: var(--otk-green); font-size: clamp(18px, 2.6vw, 28px); font-weight: 700; text-wrap: balance; word-break: keep-all; }
.otk-svc-cta__box p { margin: 0 auto 26px; max-width: 600px; color: var(--otk-txt-sub); font-size: 14px; line-height: 1.9; text-wrap: balance; word-break: keep-all; }

@media (max-width: 820px) {
  .otk-svc-row { grid-template-columns: 1fr; }
  .otk-svc-row__img { min-height: 200px; }
  .otk-svc-subnav { position: static; }
}
@media (max-width: 560px) {
  .otk-svc-row__want { font-size: 12px; padding: 5px 12px; }
  .otk-svc-row__contact { width: 100%; }
  .otk-svc-row__then { width: 100%; }
  .otk-svc-btn { flex: 1 1 auto; justify-content: center; }
  .otk-svc-row__more { width: 100%; justify-content: center; }
}

/* ============ generic gold-bar heading ============ */
.otk-head-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.otk-head-bar__bar { width: 6px; height: 28px; background: var(--otk-gold); border-radius: 3px; }
.otk-head-bar__title { margin: 0; font-size: clamp(19px, 2.4vw, 26px); font-weight: 700; color: var(--otk-green); }

/* ============ company: greeting ============ */
.otk-greeting { background: #fff; }
.otk-greeting__inner { max-width: 1000px; margin: 0 auto; padding: 70px 20px 20px; }
.otk-greeting__box { background: var(--otk-section); border: 2px solid #e4e9ef; border-left: 6px solid var(--otk-gold); border-radius: 10px; padding: clamp(26px, 3.5vw, 40px); font-size: 15px; line-height: 2.1; color: #33414d; }
.otk-greeting__box p { margin: 0 0 18px; }
.otk-greeting__box p:last-of-type { margin-bottom: 0; }
.otk-greeting__sign { margin-top: 22px; text-align: right; font-weight: 700; color: var(--otk-green); }

/* ============ company: staff ============ */
.otk-staff { background: var(--otk-section); }
.otk-staff__head { max-width: 1100px; margin: 0 auto; padding: 70px 20px 14px; text-align: center; }
.otk-staff__title { margin: 0 0 10px; font-size: clamp(21px, 2.8vw, 30px); font-weight: 700; color: var(--otk-green); }
.otk-staff__lead { margin: 0 auto; max-width: 640px; font-size: 14px; line-height: 1.9; color: var(--otk-txt-sub); }
.otk-staff__lead b { color: var(--otk-green); }
.otk-staff__grid { max-width: 1100px; margin: 0 auto; padding: 24px 20px 76px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.otk-staffcard { background: #fff; border: 2px solid #e4e9ef; border-radius: 11px; overflow: hidden; text-align: center; }
.otk-staffcard__img { aspect-ratio: 1/1; position: relative; background: #35603A; }
.otk-staffcard__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.otk-staffcard__body { padding: 20px 18px 24px; }
.otk-staffcard__role { display: inline-flex; align-items: center; gap: 6px; background: var(--otk-green); color: #fff; font-size: 11px; font-weight: 700; padding: 4px 11px; border-radius: 6px; margin-bottom: 12px; }
.otk-staffcard__name { font-size: 18px; font-weight: 700; color: var(--otk-green); margin-bottom: 4px; }
.otk-staffcard__inst { font-size: 12px; color: var(--otk-gold-dark); font-weight: 700; margin-bottom: 12px; }
.otk-staffcard__text { margin: 0; font-size: 12.5px; line-height: 1.8; color: var(--otk-txt-sub); text-align: left; }

/* ============ company: info table ============ */
.otk-info { background: #fff; }
.otk-info__inner { max-width: 1000px; margin: 0 auto; padding: 50px 20px 20px; }
.otk-info__table { border: 2px solid #e4e9ef; border-radius: 10px; overflow: hidden; }
.otk-info__row { display: grid; grid-template-columns: 220px 1fr; border-bottom: 1px solid #eef1f5; }
.otk-info__row:last-child { border-bottom: none; }
.otk-info__th { background: var(--otk-section); padding: 18px 24px; font-size: 14px; font-weight: 700; color: var(--otk-green); }
.otk-info__td { padding: 18px 24px; font-size: 14px; line-height: 1.8; color: #44515d; }
.otk-info__note { margin: 16px 0 0; font-size: 12px; color: #8ba0b3; }

/* ============ company: access ============ */
.otk-access { background: #fff; }
.otk-access__inner { max-width: 1000px; margin: 0 auto; padding: 50px 20px 80px; }
.otk-access__map { border: 2px solid #e4e9ef; border-radius: 10px; overflow: hidden; height: 380px; }
.otk-access__map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ============ contact ============ */
.otk-contact { background: var(--otk-section); }
.otk-contact__intro { max-width: 900px; margin: 0 auto; padding: 44px 20px 0; text-align: center; font-size: clamp(14px, 1.5vw, 16px); line-height: 1.9; color: #44515d; text-wrap: balance; word-break: keep-all; }
.otk-contact__inner { max-width: 1000px; margin: 0 auto; padding: 56px 20px 90px; }
.otk-contact__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 40px; }
.otk-contact__card { border-radius: 11px; padding: 28px 26px; color: #fff; display: flex; flex-direction: column; gap: 10px; }
.otk-contact__card--line { background: var(--otk-line); }
.otk-contact__card--tel { background: var(--otk-green); }
.otk-contact__card-eyebrow { font-size: 13px; font-weight: 700; opacity: .9; }
.otk-contact__card-eyebrow--gold { color: #e6d3a1; opacity: 1; }
.otk-contact__card-title { font-size: 20px; font-weight: 700; }
.otk-contact__card-desc { margin: 0; font-size: 13px; line-height: 1.8; opacity: .95; }
.otk-contact__card-desc--light { color: #c3d1de; opacity: 1; }
.otk-contact__card-btn { margin-top: 8px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: #fff; color: #06985f; font-weight: 700; text-decoration: none; padding: 14px; border-radius: 10px; }
.otk-contact__card-tel { font-size: 30px; font-weight: 700; color: #fff; text-decoration: none; letter-spacing: .01em; }

/* form */
.otk-form { background: #fff; border: 2px solid #e4e9ef; border-radius: 12px; padding: clamp(26px, 4vw, 44px); }
.otk-form__note { margin: 0 0 26px; font-size: 13.5px; color: var(--otk-txt-sub); line-height: 1.9; }
.otk-form__req-inline { color: var(--otk-gold-dark); font-weight: 700; }
.otk-form__fields { display: flex; flex-direction: column; gap: 22px; }
.otk-form__grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.otk-form__label { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--otk-green); margin-bottom: 8px; }
.otk-form__req { font-size: 10px; color: #fff; background: var(--otk-gold); padding: 2px 8px; border-radius: 4px; }
.otk-form__input { width: 100%; box-sizing: border-box; padding: 13px 15px; font-size: 14px; border: 2px solid #e2e8ef; border-radius: 10px; background: #fbfcfd; color: var(--otk-txt); outline: none; font-family: inherit; }
.otk-form__input:focus { border-color: var(--otk-green); }
.otk-form__textarea { resize: vertical; line-height: 1.7; }
.otk-form__select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23294F2C' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; padding-right: 40px; }
.otk-form__agree { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.otk-form__agree input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--otk-green); flex: none; }
.otk-form__agree span { font-size: 13px; line-height: 1.7; color: #44515d; }
.otk-form__error { display: none; background: #f7f2e9; border: 2px solid var(--otk-gold); border-radius: 10px; padding: 14px 18px; font-size: 13px; color: #7A5A2C; font-weight: 700; }
.otk-form__submit { align-self: center; display: inline-flex; align-items: center; gap: 9px; background: var(--otk-gold-dark); color: #fff; font-weight: 700; font-size: 17px; border: none; cursor: pointer; padding: 18px 48px; border-radius: 12px; box-shadow: 0 4px 0 var(--otk-gold-shadow); }
.otk-form__submit:hover { transform: translateY(2px); box-shadow: 0 2px 0 var(--otk-gold-shadow); }
.otk-form-sent { display: none; background: #fff; border: 2px solid var(--otk-line); border-radius: 12px; padding: clamp(36px, 5vw, 60px); text-align: center; }
.otk-form-sent__icon { width: 72px; height: 72px; margin: 0 auto 20px; border-radius: 50%; background: var(--otk-line); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 34px; }
.otk-form-sent__title { margin: 0 0 12px; font-size: 24px; font-weight: 700; color: var(--otk-green); }
.otk-form-sent__text { margin: 0 auto; max-width: 520px; font-size: 14px; line-height: 1.9; color: var(--otk-txt-sub); text-wrap: balance; word-break: keep-all; }

@media (max-width: 900px) {
  .otk-staff__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .otk-contact__cards { grid-template-columns: 1fr; }
  .otk-form__grid2 { grid-template-columns: 1fr; }
  .otk-info__row { grid-template-columns: 110px 1fr; }
  .otk-info__th { padding: 14px 14px; font-size: 13px; }
  .otk-info__td { padding: 14px 14px; font-size: 13px; }
}

/* ============ cases & columns ============ */
.otk-cases-intro { background: #fff; text-align: center; }
.otk-cases-intro { max-width: 1100px; margin: 0 auto; padding: 48px 20px 44px; }
.otk-cases-intro__lead { margin: 0 0 24px; font-size: clamp(15px, 1.7vw, 18px); font-weight: 700; line-height: 1.9; color: var(--otk-green); text-wrap: balance; word-break: keep-all; }
.otk-viewtoggle { display: inline-flex; background: var(--otk-green); border: 1px solid rgba(255,255,255,.16); border-radius: 12px; padding: 5px; }
.otk-viewtoggle__btn { border: none; cursor: pointer; font-family: "Noto Sans JP", sans-serif; font-size: 14px; font-weight: 700; padding: 12px 26px; border-radius: 9px; color: #dbe5ee; background: transparent; transition: all .2s; }
.otk-viewtoggle__btn.is-active { color: var(--otk-green); background: #fff; }

.otk-cases-view, .otk-columns-view { background: var(--otk-section); }
.otk-cases-view__inner { max-width: 1200px; margin: 0 auto; padding: 48px 20px 78px; }
.otk-columns-view__inner { max-width: 1160px; margin: 0 auto; padding: 48px 20px 78px; }

.otk-filter { background: #fff; border: 2px solid #e4e9ef; border-radius: 11px; padding: 24px 26px; margin-bottom: 32px; }
.otk-filter__row { display: flex; gap: 14px; align-items: baseline; padding: 10px 0; border-bottom: 1px dashed #e9edf1; }
.otk-filter__row:last-child { border-bottom: none; }
.otk-filter__label { flex: none; width: 150px; font-size: 13px; font-weight: 700; color: var(--otk-green); }
.otk-filter__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.otk-chip { display: inline-block; text-decoration: none; font-family: "Noto Sans JP", sans-serif; font-size: 12.5px; font-weight: 700; color: #44515d; background: var(--otk-section); border: 1.5px solid #e2e8ef; border-radius: 20px; padding: 6px 15px; cursor: pointer; transition: all .15s; }
.otk-chip:hover { border-color: var(--otk-green); }
.otk-chip.is-active { background: var(--otk-green); color: #fff; border-color: var(--otk-green); }

.otk-case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.otk-casecard { text-decoration: none; background: #fff; border: 2px solid #e4e9ef; border-radius: 11px; overflow: hidden; display: block; transition: transform .3s, box-shadow .3s; }
.otk-casecard:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0,0,0,.1); }
.otk-casecard__img { aspect-ratio: 16/10; position: relative; background: #35603A; }
.otk-casecard__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.otk-casecard__badge { position: absolute; left: 14px; top: 14px; background: var(--otk-gold-dark); color: #fff; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 5px; }
.otk-casecard__body { padding: 22px 22px 24px; }
.otk-casecard__date { display: block; font-family: "Barlow Condensed", sans-serif; font-size: 14px; font-weight: 700; letter-spacing: .04em; color: #8ba0b3; margin-bottom: 6px; }
.otk-casecard__title { margin: 0; font-size: 17px; font-weight: 700; color: var(--otk-green); line-height: 1.5; }

.otk-columns-view__lead { margin: 0 0 32px; font-size: 13.5px; color: var(--otk-txt-sub); text-align: center; }
.otk-column-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.otk-colcard { text-decoration: none; background: #fff; border: 2px solid #e4e9ef; border-radius: 11px; overflow: hidden; display: grid; grid-template-columns: 150px 1fr; transition: transform .3s, box-shadow .3s; }
.otk-colcard:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0,0,0,.1); }
.otk-colcard__img { position: relative; background: #35603A; }
.otk-colcard__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.otk-colcard__body { padding: 20px; display: flex; flex-direction: column; justify-content: center; }
.otk-colcard__date { font-family: "Barlow Condensed", sans-serif; font-size: 14px; font-weight: 700; color: var(--otk-gold-dark); letter-spacing: .04em; margin-bottom: 8px; }
.otk-colcard__title { margin: 0; font-size: 15px; font-weight: 700; color: var(--otk-green); line-height: 1.6; }

.otk-pager { display: flex; justify-content: center; gap: 8px; margin-top: 40px; }
.otk-pager__item { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 9px; background: #fff; color: var(--otk-green); border: 1.5px solid #e2e8ef; font-weight: 700; font-size: 14px; cursor: pointer; text-decoration: none; }
.otk-pager__item.is-current { background: var(--otk-green); color: #fff; border-color: var(--otk-green); }

@media (max-width: 820px) {
  .otk-case-grid { grid-template-columns: repeat(2, 1fr); }
  .otk-column-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .otk-case-grid { grid-template-columns: 1fr; }
  .otk-filter__row { flex-direction: column; gap: 8px; }
  .otk-filter__label { width: auto; }
}

/* ============ blog layout (entry / entry_list / entry_column) ============ */
.otk-blog-wrap { background: var(--otk-section); }
.otk-page-hero--sm .otk-page-hero__inner { padding: 44px 20px; }
.otk-page-hero--sm .otk-page-hero__title { font-size: clamp(21px, 2.8vw, 30px); }
.otk-crumb { background: #fff; border-bottom: 1px solid #eef1f5; }
.otk-crumb__inner { max-width: 1200px; margin: 0 auto; padding: 12px 20px; font-size: 12px; color: var(--otk-muted); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.otk-crumb__inner a { text-decoration: none; color: var(--otk-muted); }
.otk-crumb__inner a:hover { color: var(--otk-green); }
.otk-crumb__current { color: var(--otk-green); }
.otk-blog { max-width: 1200px; margin: 0 auto; padding: 40px 20px 76px; display: grid; grid-template-columns: 1fr 320px; gap: 40px; align-items: start; }

/* article */
.otk-article { background: #fff; border: 2px solid #e4e9ef; border-radius: 12px; overflow: hidden; }
.otk-article__head { padding: clamp(24px, 3.5vw, 44px) clamp(24px, 3.5vw, 44px) 0; }
.otk-article__tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.otk-article__tag { font-size: 11px; font-weight: 700; color: #fff; background: var(--otk-gold); padding: 4px 11px; border-radius: 5px; }
.otk-article__date { font-size: 12px; color: #8ba0b3; margin-bottom: 10px; }
.otk-article__title { margin: 0 0 24px; font-size: clamp(21px, 3vw, 32px); font-weight: 700; color: var(--otk-green); line-height: 1.55; }
.otk-article__hero { aspect-ratio: 16/9; position: relative; background: #35603A; }
.otk-article__hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.otk-article__body { padding: clamp(24px, 3.5vw, 44px); }
.otk-article__p { margin: 0 0 28px; font-size: 15px; line-height: 2.15; color: #44515d; }
.otk-article__h2 { margin: 0 0 14px; font-size: clamp(18px, 2.2vw, 23px); font-weight: 700; color: var(--otk-green); border-left: 6px solid var(--otk-gold); padding-left: 14px; line-height: 1.4; }
.otk-article__note { margin: 0 0 30px; font-size: 12.5px; color: #8ba0b3; line-height: 1.8; }
.otk-article__cta { background: var(--otk-green); border-radius: 10px; padding: 26px; text-align: center; }
.otk-article__cta p { margin: 0 0 16px; color: #fff; font-size: 15px; font-weight: 700; }

/* entry: step head / before-after / spec */
.otk-step-head { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; }
.otk-step-head__badge { font-family: "Barlow Condensed", sans-serif; background: var(--otk-green); color: #fff; padding: 6px 14px; border-radius: 8px; font-weight: 700; font-size: 14px; letter-spacing: .05em; }
.otk-step-head__badge--gold { background: var(--otk-gold-dark); }
.otk-step-head__title { margin: 0; font-size: clamp(18px, 2.2vw, 23px); font-weight: 700; color: var(--otk-green); }
.otk-ba { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0 0 30px; }
.otk-ba__item { border: 2px solid #e4e9ef; border-radius: 12px; overflow: hidden; }
.otk-ba__item--after { border-color: var(--otk-gold); }
.otk-ba__label { background: var(--otk-green); color: #fff; font-size: 12px; font-weight: 700; padding: 8px 14px; }
.otk-ba__item--after .otk-ba__label { background: var(--otk-gold-dark); }
.otk-ba__img { aspect-ratio: 4/3; background: #35603A; position: relative; }
.otk-ba__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.otk-spec { background: var(--otk-section); border: 2px solid #e4e9ef; border-radius: 12px; padding: 20px 24px; margin: 0 0 30px; }
.otk-spec__title { font-size: 13px; font-weight: 700; color: var(--otk-green); margin-bottom: 10px; }
.otk-spec__list { display: flex; flex-direction: column; gap: 8px; }
.otk-spec__item { display: flex; gap: 10px; align-items: center; font-size: 14px; color: #44515d; }
.otk-spec__item i { color: var(--otk-gold); font-size: 14px; }

/* entry_column: checkbox list + price table */
.otk-checkbox-list { display: flex; flex-direction: column; gap: 10px; margin: 0 0 30px; }
.otk-checkbox-list__item { display: flex; gap: 12px; align-items: flex-start; background: var(--otk-section); border: 1.5px solid #e4e9ef; border-radius: 10px; padding: 14px 18px; }
.otk-checkbox-list__item i { color: var(--otk-gold); font-size: 16px; flex: none; margin-top: 3px; }
.otk-checkbox-list__item p { margin: 0; font-size: 14px; line-height: 1.8; color: #44515d; }
.otk-checkbox-list__item b { color: var(--otk-green); }
.otk-pricetable { border: 2px solid #e4e9ef; border-radius: 12px; overflow: hidden; margin: 0 0 20px; }
.otk-pricetable__row { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid #eef1f5; gap: 12px; }
.otk-pricetable__row:last-child { border-bottom: none; }
.otk-pricetable__name { font-size: 14px; font-weight: 700; color: var(--otk-green); }
.otk-pricetable__price { font-size: 19px; font-weight: 700; color: var(--otk-gold-dark); white-space: nowrap; }

/* entry_list: column list cards */
.otk-blog__main { min-width: 0; }
.otk-collist { display: flex; flex-direction: column; gap: 18px; }
.otk-collist__item { display: grid; grid-template-columns: 220px 1fr; gap: 22px; background: #fff; border: 2px solid #e4e9ef; border-radius: 11px; overflow: hidden; text-decoration: none; transition: box-shadow .3s; }
.otk-collist__item:hover { box-shadow: 0 10px 22px rgba(0,0,0,.08); }
.otk-collist__img { aspect-ratio: 16/10; background: #35603A; position: relative; }
.otk-collist__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.otk-collist__body { padding: 22px 22px 22px 0; display: flex; flex-direction: column; justify-content: center; }
.otk-collist__meta { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.otk-collist__cat { font-size: 11px; font-weight: 700; color: #fff; background: var(--otk-green); padding: 3px 10px; border-radius: 5px; }
.otk-collist__date { font-size: 12px; color: #8ba0b3; }
.otk-collist__title { margin: 0 0 8px; font-size: 17px; font-weight: 700; color: var(--otk-green); line-height: 1.55; }
.otk-collist__excerpt { margin: 0; font-size: 13px; line-height: 1.8; color: var(--otk-txt-sub); }

/* sidebar widgets */
.otk-blog__aside { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 20px; }
.otk-widget { background: #fff; border: 2px solid #e4e9ef; border-radius: 11px; padding: 22px; }
.otk-widget__title { font-size: 14px; font-weight: 700; color: var(--otk-green); border-bottom: 2px solid var(--otk-gold); padding-bottom: 10px; margin-bottom: 14px; }
.otk-widget__post { display: flex; gap: 12px; align-items: center; text-decoration: none; padding: 9px 0; border-bottom: 1px dashed #eef1f5; }
.otk-widget__thumb { flex: none; width: 56px; height: 44px; border-radius: 8px; background: #35603A; overflow: hidden; position: relative; }
.otk-widget__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.otk-widget__post-title { font-size: 12.5px; line-height: 1.5; color: var(--otk-green); font-weight: 500; }
.otk-widget__link { display: block; text-decoration: none; font-size: 13px; line-height: 1.6; color: var(--otk-green); font-weight: 500; padding: 9px 0; border-bottom: 1px dashed #eef1f5; }
.otk-widget__link:last-child { border-bottom: none; }
.otk-widget__arch { display: flex; justify-content: space-between; text-decoration: none; font-size: 13px; color: #44515d; padding: 8px 0; border-bottom: 1px dashed #eef1f5; }
.otk-widget__arch:last-child { border-bottom: none; }
.otk-widget__count { color: #8ba0b3; }
.otk-widget__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.otk-widget__tags span { font-size: 12px; color: #44515d; background: var(--otk-section); border: 1.5px solid #e2e8ef; border-radius: 20px; padding: 5px 12px; cursor: pointer; }
.otk-widget-cta { background: var(--otk-green); border-radius: 11px; padding: 24px; text-align: center; }
.otk-widget-cta p { margin: 0 0 14px; color: #fff; font-size: 14px; font-weight: 700; line-height: 1.6; }
.otk-widget-cta__btn { display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--otk-line); color: #fff; font-weight: 700; text-decoration: none; padding: 13px; border-radius: 10px; }
.otk-blog-back { display: block; text-align: center; background: var(--otk-green); color: #fff; font-weight: 700; text-decoration: none; padding: 15px; border-radius: 12px; }

@media (max-width: 900px) {
  .otk-blog { grid-template-columns: 1fr; }
  .otk-blog__aside { position: static; }
}
@media (max-width: 560px) {
  .otk-collist__item { grid-template-columns: 1fr; }
  .otk-collist__body { padding: 0 20px 20px; }
  .otk-ba { grid-template-columns: 1fr; }
}

/* view toggle (cases/columns) */
.otk-view { display: none; }
.otk-view.is-active { display: block; }

/* drawer close button */
.otk-drawer__close { position: absolute; top: 18px; right: 18px; width: 40px; height: 40px; border: none; background: rgba(255,255,255,.12); color: #fff; border-radius: 8px; cursor: pointer; font-size: 20px; display: flex; align-items: center; justify-content: center; }
.otk-drawer__close:hover { background: rgba(255,255,255,.22); }

/* 4つの理由：見出し強調 */
.otk-reasons .otk-sec-head__title { line-height: 1.8; }
.otk-reasons__em { display: inline-block; font-size: 1.35em; line-height: 1.3; }

/* ============ CMS list containers ============ */
/* 挿入先スパンはブロック化（施工事例テンプレは .otk-case-cms + .pages を返す） */
#cms-blog-entry-list-1-area { display: block; }
/* 施工事例：CMSテンプレ出力の .otk-case-cms を3列グリッドに */
.otk-case-cms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.otk-case-cms [data-case="コラム"] { display: none; }
/* コラム：素の otk-colcard がスパン直下 → スパンを2列グリッドに */
.otk-column-cms #cms-blog-entry-list-1-area { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 820px) {
  .otk-case-cms { grid-template-columns: repeat(2, 1fr); }
  .otk-column-cms #cms-blog-entry-list-1-area { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .otk-case-cms { grid-template-columns: 1fr; }
}

/* CMSページャ（.pages / .page_prev / .page_next） */
.pages { display: flex; justify-content: center; gap: 12px; margin-top: 36px; flex-wrap: wrap; }
.pages a { display: inline-flex; align-items: center; padding: 11px 22px; border: 2px solid var(--otk-green); border-radius: 10px; color: var(--otk-green); font-weight: 700; font-size: 14px; text-decoration: none; transition: all .2s; }
.pages a:hover { background: var(--otk-green); color: #fff; }

/* ============ entry.php: CMS詳細ページ ============ */
.otk-cms-body { font-size: 15px; line-height: 2.15; color: #44515d; }
.otk-cms-body > span { display: block; }
.otk-cms-body p { margin: 0 0 24px; }
.otk-cms-body h2 { margin: 32px 0 14px; font-size: clamp(18px, 2.2vw, 23px); font-weight: 700; color: var(--otk-green); border-left: 6px solid var(--otk-gold); padding-left: 14px; line-height: 1.5; }
.otk-cms-body h3 { margin: 26px 0 12px; font-size: 17px; font-weight: 700; color: var(--otk-green); line-height: 1.6; }
.otk-cms-body img { max-width: 100%; height: auto; border-radius: 8px; margin: 12px 0; display: block; }
.otk-cms-body a { color: var(--otk-gold-dark); font-weight: 700; }
.otk-cms-body ul, .otk-cms-body ol { margin: 0 0 24px; padding-left: 1.4em; }
.otk-cms-body li { margin-bottom: 8px; }
.otk-cms-body table { width: 100%; border-collapse: collapse; margin: 0 0 24px; }
.otk-cms-body th, .otk-cms-body td { border: 1px solid #e4e9ef; padding: 10px 14px; font-size: 14px; text-align: left; }
.otk-cms-body th { background: var(--otk-section); color: var(--otk-green); font-weight: 700; }

.otk-entry-nav { margin-top: 30px; }
.otk-entry-nav a { color: var(--otk-green); font-weight: 700; text-decoration: none; }
.otk-entry-nav a:hover { color: var(--otk-gold-dark); }

/* サイドバー「最近の施工事例／コラム」CMSリスト（縦積み） */
.otk-recent-cms #cms-blog-entry-list-1-area { display: flex; flex-direction: column; gap: 14px; }
.otk-recent-cms .otk-case-cms { grid-template-columns: 1fr; gap: 14px; }
.otk-recent-cms .pages { display: none; }
.otk-recent-cms [data-case="コラム"] { display: none; }
.otk-recent-cms .otk-casecard__body { padding: 14px 16px 16px; }
.otk-recent-cms .otk-casecard__title { font-size: 14px; }
.otk-recent-cms .otk-colcard { grid-template-columns: 96px 1fr; }
.otk-recent-cms .otk-colcard__body { padding: 12px 14px; }
.otk-recent-cms .otk-colcard__title { font-size: 13px; }

/* entry.php: 記事枠外のCTA */
.otk-entry-cta { background: var(--otk-green); border-radius: 12px; padding: 30px 25px; text-align: center; margin-top: 24px; }
.otk-entry-cta p { margin: 0 0 16px; color: #fff; font-size: 15px; font-weight: 700; }

/* ============ company: 拠点一覧 ============ */
.otk-branches-sec { background: var(--otk-section); }
.otk-branches-sec__inner { max-width: 1000px; margin: 0 auto; padding: 50px 20px; }
.otk-branches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.otk-branch { position: relative; background: #fff; border: 2px solid #e4e9ef; border-top: 4px solid var(--otk-gold); border-radius: 10px; padding: 22px 22px 24px; }
.otk-branch__name { font-size: 17px; font-weight: 700; color: var(--otk-green); margin-bottom: 10px; }
.otk-branch__addr { margin: 0; font-size: 13.5px; line-height: 1.8; color: #44515d; }
.otk-branch__tel { margin: 10px 0 0; font-size: 13px; color: var(--otk-gold-dark); font-weight: 700; }
@media (max-width: 820px) { .otk-branches { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .otk-branches { grid-template-columns: 1fr; } }

/* 施工事例一覧はJS絞り込みのため全件読み込み → CMSページャは非表示 */
.otk-cases-cms .pages { display: none; }

/* 拠点カードのGoogleマップリンク */
.otk-branch__map { position: absolute; top: 12px; right: 12px; display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; letter-spacing: .04em; color: #fff; background: var(--otk-green); text-decoration: none; border-radius: 6px; padding: 5px 10px; transition: all .2s; }
.otk-branch__map:hover { background: var(--otk-gold-dark); color: #fff; }
.otk-branch__map i { font-size: 11px; }

/* 施工事例一覧：一定の高さで内部スクロール（画面の縦幅に追従。5件目以降はスクロールで表示） */
.otk-cases-cms { max-height: min(80vh, 820px); overflow-y: auto; overscroll-behavior: auto; padding-right: 8px; }
.otk-cases-cms::-webkit-scrollbar { width: 8px; }
.otk-cases-cms::-webkit-scrollbar-thumb { background: var(--otk-gold); border-radius: 4px; }
.otk-cases-cms::-webkit-scrollbar-track { background: #eef1f5; border-radius: 4px; }
@media (max-width: 980px) { .otk-cases-cms { max-height: 74vh; } }
@media (max-width: 640px) { .otk-cases-cms { max-height: 70vh; } }

/* スマホではフッターのグローバルナビを非表示 */
@media (max-width: 640px) {
  .otk-footer__nav { display: none; }
  .otk-footer__inner { grid-template-columns: 1fr; }
}

/* ============ スマホ余白・文字の最終調整 ============ */
@media (max-width: 640px) {
  /* セクション縦余白を圧縮 */
  .otk-philosophy__inner, .otk-worries__inner, .otk-solutions__inner,
  .otk-reasons__inner, .otk-voices__inner, .otk-price-steps__inner,
  .otk-svc-group__inner, .otk-faq-sec__inner, .otk-rintro__inner { padding-top: 52px; padding-bottom: 52px; }
  .otk-badges__inner { padding: 40px 20px 44px; }
  .otk-qa { padding-bottom: 52px; }
  .otk-qa__head { padding-top: 52px; }
  /* 見出し下の余白を圧縮 */
  .otk-sec-head { margin-bottom: 28px; }
  .otk-solutions .otk-sec-head, .otk-reasons .otk-sec-head, .otk-voices .otk-sec-head { margin-bottom: 28px; }
  /* ステップ番号バッジが次カードに被らないよう間隔確保 */
  .otk-steps { gap: 30px; }
  /* 価格行の値を左寄せに */
  .otk-price__value { font-size: 22px; }
  /* MVの最小高さをスマホ向けに調整 */
  .otk-mv__inner { min-height: 98vh; min-height: 98dvh; padding: 64px 20px; }
  .otk-mv__title { font-size: clamp(24px, 6.4vw, 32px); }
  /* 見出しの行間・サイズ微調整 */
  .otk-qa__balloon { padding: 18px 22px; }
}

/* ============ contact: プライバシーポリシー（アコーディオン） ============ */
.otk-privacy { margin-top: 28px; background: #fff; border: 2px solid #e4e9ef; border-radius: 12px; overflow: hidden; }
.otk-privacy__head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px; background: none; border: none; cursor: pointer; padding: 20px 24px; font-size: 16px; font-weight: 700; color: var(--otk-green); text-align: left; }
.otk-privacy__icon { flex: none; color: var(--otk-gold); font-size: 15px; transition: transform .25s; }
.otk-privacy.is-open .otk-privacy__icon { transform: rotate(180deg); }
.otk-privacy__body { max-height: 0; overflow: hidden; transition: max-height .45s ease; }
.otk-privacy.is-open .otk-privacy__body { max-height: 2400px; }
.otk-privacy__inner { padding: 0 24px 26px; border-top: 1px solid #eef1f5; }
.otk-privacy__inner p { margin: 16px 0 0; font-size: 13.5px; line-height: 1.95; color: #44515d; }
.otk-privacy__inner h3 { margin: 22px 0 0; font-size: 15px; font-weight: 700; color: var(--otk-green); border-left: 4px solid var(--otk-gold); padding-left: 12px; line-height: 1.5; }
.otk-privacy__inner ul { margin: 10px 0 0; padding-left: 1.3em; }
.otk-privacy__inner li { font-size: 13.5px; line-height: 1.9; color: #44515d; }

/* contact: フォーム見出し（小さめ） */
.otk-form-heading { margin: 8px 0 16px; font-size: 18px; font-weight: 700; color: var(--otk-green); padding-left: 12px; border-left: 4px solid var(--otk-gold); line-height: 1.4; }

/* CTA帯ボタン：スマホで縦積み・全幅、文言は文節で改行 */
.otk-cta .otk-btn { word-break: keep-all; }
@media (max-width: 640px) {
  .otk-cta__actions { flex-direction: column; align-items: center; }
  .otk-cta__actions .otk-btn { width: 100%; max-width: 360px; }
}

/* CTA説明文：スマホでは word-break を解除して自然に折り返す */
@media (max-width: 640px) {
  .otk-cta__desc { word-break: normal; }
}

/* ============ reason: スマホ調整（バルーン見出し・Q&Aカード） ============ */
@media (max-width: 640px) {
  .otk-qa__balloon h2 { font-size: 15px; line-height: 1.55; }
  .otk-qcard { padding: 0 16px; }
  .otk-qcard__head { padding: 18px 16px 16px; gap: 12px; }
  .otk-qcard__no { width: 46px; height: 46px; font-size: 18px; }
  .otk-qcard__bubble { padding: 11px 14px; }
  .otk-qcard__label { font-size: 11px; }
  .otk-qcard__ask { font-size: 15px; }
  .otk-qcard__body { padding: 18px 16px 20px; gap: 16px; }
  .otk-qcard__img { order: -1; min-height: 190px; }
  .otk-qcard__title { font-size: 17px; }
  .otk-qcard__text { font-size: 14.5px; line-height: 2; }
  .otk-qcard__evi { padding: 16px 16px; }
  .otk-qcard__evi p { font-size: 14px; }
}

/* 選ばれる理由ボタン：短文なので不自然な改行を防ぐ */
.otk-reasons__more .otk-btn { word-break: keep-all; }

/* メインビューのボタン：文節で改行（不自然な改行防止） */
.otk-mv__actions .otk-btn { word-break: keep-all; }

/* 各種防音工事リード文：スマホでは word-break 解除で自然に折り返す */
@media (max-width: 640px) {
  .otk-svc-intro p { word-break: normal; }
}

/* 記事枠外CTAの文言：スマホで文字サイズ縮小 */
@media (max-width: 640px) {
  .otk-entry-cta p { font-size: 13px; }
}

/* メインビュー：スマホでボタン2カラム維持＋文字小さめ、ノートも縮小 */
@media (max-width: 640px) {
  .otk-mv__actions { grid-template-columns: 1fr 1fr; gap: 10px; }
  .otk-mv__actions .otk-btn { font-size: 12px; padding: 12px 8px; gap: 6px 4px; border-radius: 9px; flex-wrap: wrap; }
  .otk-mv__actions .otk-btn i { font-size: 15px; }
  .otk-mv__actions .otk-btn small { flex: 0 0 100%; display: block; text-align: center; font-size: 9.5px; }
  .otk-mv__note { font-size: 10px; padding: 6px 10px; right: 12px; bottom: 12px; }
}

/* 選ばれる理由の番号：スマホでほんの少し小さく */
@media (max-width: 640px) {
  .otk-reason__no { font-size: 32px; }
  .otk-reason__label { font-size: 11px; }
}

/* Q&Aカード見出し：スマホは文節（句読点・かっこ）で改行 */
@media (max-width: 640px) {
  .otk-qcard__title { word-break: keep-all; }
}

/* タブレットのみ：ストローク幅で画像が横長・低くなるため高さを増やす（SP/PCは据え置き） */
@media (min-width: 641px) and (max-width: 820px) {
  .otk-svc-row__img { min-height: 320px; }
  .otk-qcard__img { min-height: 300px; }
}

/* タブレット：3ステップを2カラムに（ソリューションは8カードのため上部のブレークポイントで制御） */
@media (min-width: 641px) and (max-width: 1024px) {
  .otk-steps { grid-template-columns: repeat(2, 1fr); }
}

/* お問い合わせカードのバランス調整（電話カードを縦中央・LINEボタンを下端に） */
.otk-contact__card--line .otk-contact__card-btn { margin-top: auto; }
.otk-contact__card--tel { justify-content: center; }

/* スマホのメインビュー画像：もう少し右側が見えるように */
@media (max-width: 640px) {
  .otk-mv__slider img,
  .otk-mv__bg { object-position: 72% 72%; background-position: 72% 72%; }
}

/* ============ TOPページ スクロールアニメーション ============ */
.otk-reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; will-change: opacity, transform; }
.otk-reveal.is-in { opacity: 1; transform: none; }
/* メインビューは読み込み時にフェードアップ */
@keyframes otk-fadeup { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.otk-mv__body { animation: otk-fadeup .9s ease both; }
.otk-mv__note { animation: otk-fadeup 1s ease .3s both; }
@media (prefers-reduced-motion: reduce) {
  .otk-reveal { opacity: 1; transform: none; transition: none; }
  .otk-mv__body, .otk-mv__note { animation: none; }
}

/* ============ スマホでは word-break: keep-all を全て解除（自然に折り返す） ============ */
@media (max-width: 640px) {
  .otk-cta__title, .otk-cta__desc, .otk-sec-head__title, .otk-worries__lead,
  .otk-badge__title, .otk-qa__balloon h2, .otk-qcard__title, .otk-svc-intro p,
  .otk-svc-cta__box h2, .otk-svc-cta__box p, .otk-contact__intro, .otk-form-sent__text,
  .otk-cases-intro__lead,
  .otk-cta .otk-btn, .otk-reasons__more .otk-btn, .otk-mv__actions .otk-btn {
    word-break: normal;
  }
}

/* SP専用の改行（PC・タブレットでは無効） */
.otk-sp-br { display: none; }
@media (max-width: 640px) { .otk-sp-br { display: inline; } }

/* 会社情報テーブル：スマホは th（項目名）を上・td（内容）を下に縦積み */
@media (max-width: 640px) {
  .otk-info__row { grid-template-columns: 1fr; }
  .otk-info__th { padding: 12px 16px 6px; font-size: 13px; }
  .otk-info__td { padding: 0 16px 14px; font-size: 13.5px; }
}

/* スマホで2行になるボタンのアイコンを上の行に合わせる */
@media (max-width: 640px) {
  .otk-cta__actions .otk-btn, .otk-mv__actions .otk-btn { align-items: flex-start; }
  .otk-cta__actions .otk-btn i, .otk-mv__actions .otk-btn i { margin-top: 3px; }
  .otk-cta__actions .otk-btn span { text-align: left; }
}

/* スマホ：フッターの会社情報（ロゴ〜代表者）を中央揃え */
@media (max-width: 640px) {
  .otk-footer__company { text-align: center; }
}