/*
Theme Name: Lightning Child
Theme URI:
Template: lightning
Description: CLBプロフェッショナル 子テーマ
Author:
Tags:
Version: 0.7.0
*/
/* ボーダーの削除*/
h2, h3, h3:where(:not(.wp-block-post-title)):after {
  border: none;
}
h3.ltg-slide-text-title {
  font-size: 5.6rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, .4);
}
@media screen and (max-width: 767px) {
  h3.ltg-slide-text-title {
    font-size: 3.6rem;
  }
}
img {
  display: inline !important;
}
.site-footer-copyright p:nth-child(2) {
  display: none;
}
th {
  background-color: #ddd;
}
.btna a {
  text-decoration: none !important;
}
.iframe-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}
.iframe-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.global-nav-list > li > ul.sub-menu {
  background-color: var(--vk-color-primary);
  box-shadow: 1px 1px 3px rgba(0, 0, 0, .2);
  left: 50%;
  margin-left: -180px;
  width: 360px;
}

/* =========================================================================
   CLBプロフェッショナル ブランドカラー（サイト共通変数）
   ベース（60%）：ホワイト〜ライトグレー
   メイン（30%）：グレーブルー
   アクセント（10%）：ディープネイビー / チャコール
   ========================================================================= */
:root {
  --clb-blue: #5b7088;          /* メイン：グレーブルー */
  --clb-blue-deep: #3f566e;     /* グレーブルー濃いめ */
  --clb-navy: #1e2a3c;          /* アクセント：ディープネイビー */
  --clb-charcoal: #2b313a;      /* テキスト：チャコール */
  --clb-muted: #6c7682;         /* 補助テキスト */
  --clb-mist: #eef2f7;          /* ミストブルー（背景） */
  --clb-gray: #f5f7f9;          /* ライトグレー（背景） */
  --clb-border: #e3e8ee;        /* ボーダー */
  --clb-white: #ffffff;
  --clb-serif: 'Noto Serif JP', 'Yu Mincho', 'YuMincho', serif;
  --clb-sans: 'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', sans-serif;
  --clb-en: 'Cormorant Garamond', 'Times New Roman', serif;
}

/* =========================
  .entry-body 見出し装飾（h1〜h4）
  ========================= */
/* 共通 */
.entry-body h1, .entry-body h2, .entry-body h3, .entry-body h4 {
  line-height: 1.25;
  letter-spacing: .02em;
  margin: 2.0em 0 .8em;
  font-weight: 700;
  color: #111;
}
/* h1：記事タイトル級 */
.entry-body h1 {
  font-size: clamp(26px, 2.4vw, 36px);
  padding: .15em 0 .35em;
  border-bottom: 3px solid rgba(30, 42, 60, .14);
}
/* h2：大見出し（左ライン＋背景） */
.entry-body h2 {
  font-size: clamp(20px, 2.0vw, 28px);
  padding: .55em .8em;
  background: rgba(91, 112, 136, .07);
  border-left: 6px solid var(--clb-blue);
  border-radius: 10px;
}
/* h3：中見出し（下線） */
.entry-body h3 {
  font-size: clamp(18px, 1.6vw, 22px);
  padding: .2em 0 .45em;
  border-bottom: 2px solid rgba(30, 42, 60, .12);
}
/* h4：小見出し（ドット/バー） */
.entry-body h4 {
  font-size: clamp(16px, 1.3vw, 18px);
  padding-left: .75em;
  position: relative;
}
.entry-body h4::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: .45em;
  height: .45em;
  border-radius: 50%;
  background: var(--clb-blue);
}
/* 直後の要素が詰まりすぎないように */
.entry-body h1 + p, .entry-body h2 + p, .entry-body h3 + p, .entry-body h4 + p {
  margin-top: 0;
}
/********** footer-sns *****************/
.footer-sns__list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-sns__item a {
  display: block;
}
.footer-sns__item img {
  width: 36px;
  height: 36px;
  display: block;
  border-radius: 50%;
  transition: 0.3s;
}
/* ホバーでちょい浮かせる */
.footer-sns__item a:hover img {
  transform: translateY(-3px);
  opacity: 0.8;
}
/********** footer-sns *****************/

/********** sp-fixed-contact *****************/
.sp-fixed-contact {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  z-index: 9999;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.12);
}

.sp-fixed-contact__btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  min-height: 58px;
  padding: 8px 6px;
  color: #fff !important;
  text-decoration: none !important;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  box-sizing: border-box;
}

.sp-fixed-contact__btn i {
  font-size: 20px;
  line-height: 1;
}

.sp-fixed-contact__btn span {
  display: block;
  font-size: 11px;
  line-height: 1.2;
}

.sp-fixed-contact__btn--web {
  background: var(--clb-blue);
}
.sp-fixed-contact__btn--web i {
  transform: translateX(4px);
}

.sp-fixed-contact__btn--tel {
  background: var(--clb-navy);
}
.sp-fixed-contact__btn--tel i {
  transform: translateX(4px);
}

.sp-fixed-contact__btn--line {
  background: #06c755;
}
.sp-fixed-contact__btn--line i {
  transform: translateX(4px);
}

.sp-fixed-contact__btn:hover,
.sp-fixed-contact__btn:focus {
  opacity: 0.9;
}

/* PCでは非表示 */
@media screen and (min-width: 769px) {
  .sp-fixed-contact {
    display: none;
  }
}

/* スマホで下に隠れないよう本文側に余白をつける場合 */
@media screen and (max-width: 768px) {
  body {
    padding-bottom: 58px;
  }
}
/********** sp-fixed-contact *****************/


/********** vk-mobile-nav-menu-btn *****************/
@media (max-width:782px) {
  .admin-bar .vk-mobile-nav-menu-btn {
    top: calc(46px + 5px)
  }
  .admin-bar .vk-mobile-nav {
    top:0px
  }
}
@media screen and (max-width:782px) {
  .admin-bar .vk-mobile-nav.vk-mobile-nav-open.vk-mobile-nav-drop-in, .admin-bar .vk-mobile-nav.vk-mobile-nav-open.vk-mobile-nav-left-in, .admin-bar .vk-mobile-nav.vk-mobile-nav-open.vk-mobile-nav-right-in {
    top: 0px
  }
/********** vk-mobile-nav-menu-btn *****************/
}

/* =========================================================================
   下層ページ用 ページヘッダー（page-header.php）
   ========================================================================= */
.page-header {
  background-color: var(--clb-navy);
  color: #fff;
}
.page-header .page-header-title {
  font-family: var(--clb-serif);
  letter-spacing: 0.12em;
  color: #fff;
}

/* =========================================================================
   共通プレースホルダー画像（画像未設定時の仮表示）
   ========================================================================= */
.placeholder-image {
  display: flex !important;
  width: 100%;
  height: 100%;
  min-height: 240px;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #e9eef3 0%, #dde4ec 50%, #e9eef3 100%);
  position: relative;
  overflow: hidden;
}
.placeholder-image::after {
  content: attr(data-label);
  font-family: var(--clb-en);
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  color: var(--clb-blue);
}
.placeholder-image--dark {
  background: linear-gradient(135deg, #28374a 0%, #1c2838 50%, #28374a 100%);
}
.placeholder-image--dark::after {
  color: #8ea3bd;
}

/* =========================================================================
   CLBプロフェッショナル / front-page.php 専用スタイル
   グレーブルー × ホワイト × ディープネイビーで「化粧品のような洗練」
   ========================================================================= */
.fp-root {
  font-family: var(--clb-sans);
  color: var(--clb-charcoal);
  letter-spacing: 0.04em;
  line-height: 1.85;
}
.fp-root * {
  box-sizing: border-box;
}
.fp-root img {
  max-width: 100%;
  height: auto;
  display: block !important;
}
.fp-root .sp_only { display: none; }
@media (max-width: 768px) {
  .fp-root .sp_only { display: inline; }
}

/* Container */
.fp-container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}
.fp-container--narrow {
  max-width: 880px;
}

/* Section basics */
.fp-section {
  padding: 110px 0;
  position: relative;
}
@media (max-width: 768px) {
  .fp-section {
    padding: 64px 0;
  }
}
.fp-section--gray { background: var(--clb-gray); }
.fp-section--mist { background: var(--clb-mist); }
.fp-section--navy {
  background: var(--clb-navy);
  color: #e7edf4;
}

/* Section header */
.fp-section__header {
  text-align: center;
  margin-bottom: 56px;
}
@media (max-width: 768px) {
  .fp-section__header { margin-bottom: 38px; }
}
.fp-section__en {
  font-family: var(--clb-en);
  font-size: 0.95rem;
  letter-spacing: 0.34em;
  color: var(--clb-blue);
  margin: 0 0 12px;
  font-weight: 600;
  text-transform: uppercase;
}
.fp-section__en--light { color: #9fb3cc; }
.fp-section__title {
  font-family: var(--clb-serif);
  font-size: clamp(22px, 2.3vw, 33px);
  letter-spacing: 0.14em;
  color: var(--clb-navy);
  font-weight: 600;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
}
.fp-section__title::after { display: none; }
.fp-section--navy .fp-section__title { color: #fff; }
.fp-section__line {
  display: block;
  width: 44px;
  height: 2px;
  background: var(--clb-blue);
  margin: 22px auto 0;
}

/* Fade-in */
.fp-fade {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.9s ease, transform 0.9s ease;
  will-change: opacity, transform;
}
.fp-fade.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Hero staggered */
.fp-anim {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 1s ease, transform 1s ease;
  transition-delay: var(--fp-delay, 0s);
}
.fp-anim.is-shown {
  opacity: 1;
  transform: translateY(0);
}

/* =========================
   2. HERO
   ========================= */
.fp-hero {
  position: relative;
  height: 100vh;
  min-height: 580px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: #fff;
  text-align: center;
}
.fp-hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  transform: scale(1.03);
}
.fp-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(30,42,60,0.55) 0%, rgba(63,86,110,0.40) 45%, rgba(30,42,60,0.66) 100%);
  z-index: 1;
}
.fp-hero__content {
  position: relative;
  z-index: 2;
  padding: 0 22px;
  max-width: 960px;
}
.fp-hero__subtitle {
  font-family: var(--clb-en);
  font-size: clamp(0.85rem, 1.2vw, 1.05rem);
  letter-spacing: 0.3em;
  color: #cdd9e8;
  margin: 0 0 22px;
  font-weight: 500;
}
.fp-hero__title {
  font-family: var(--clb-serif);
  font-size: clamp(24px, 3.4vw, 46px);
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.7;
  margin: 0 0 26px;
  text-shadow: 0 2px 20px rgba(20,30,45,0.45);
}
.fp-hero__lead {
  font-size: clamp(0.9rem, 1.2vw, 1.05rem);
  letter-spacing: 0.1em;
  line-height: 2;
  color: #eef2f7;
  margin: 0 0 36px;
  text-shadow: 0 1px 12px rgba(20,30,45,0.4);
}
.fp-hero__cta-wrap { margin-top: 4px; }
.fp-hero__cta {
  display: inline-block;
  padding: 16px 46px;
  border: 1px solid rgba(255,255,255,0.85);
  color: #fff;
  text-decoration: none;
  letter-spacing: 0.18em;
  font-size: 0.95rem;
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(2px);
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.fp-hero__cta:hover {
  background: #fff;
  color: var(--clb-navy);
  transform: translateY(-2px);
}
.fp-hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 2;
  color: #dce4ee;
  font-family: var(--clb-en);
  letter-spacing: 0.3em;
  font-size: 0.72rem;
  text-align: center;
}
.fp-hero__scroll-line {
  width: 1px;
  height: 50px;
  margin: 10px auto 0;
  background: rgba(255,255,255,0.3);
  position: relative;
  overflow: hidden;
}
.fp-hero__scroll-line::after {
  content: "";
  position: absolute;
  top: -50px;
  left: 0;
  width: 100%;
  height: 50px;
  background: #fff;
  animation: fpScrollLine 2.2s ease-in-out infinite;
}
@keyframes fpScrollLine {
  0%   { top: -50px; }
  100% { top: 50px; }
}

/* =========================
   3. CONCEPT
   ========================= */
.fp-concept__content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
@media (max-width: 900px) {
  .fp-concept__content {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}
.fp-concept__image img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 4px;
}
.fp-concept__catch {
  font-family: var(--clb-serif);
  font-size: clamp(21px, 2.1vw, 30px);
  letter-spacing: 0.08em;
  line-height: 1.7;
  margin: 0 0 24px;
  font-weight: 600;
  color: var(--clb-navy);
}
.fp-concept__text p {
  color: #4a5360;
  margin: 0 0 18px;
  font-size: 0.97rem;
}
.fp-concept__btn-wrap { margin-top: 28px; }

/* =========================
   4. LASTELLA
   ========================= */
.fp-lastella__lead,
.fp-products__lead,
.fp-shops__lead {
  text-align: center;
  color: var(--clb-muted);
  margin: 0 0 48px;
  font-size: 0.96rem;
  line-height: 1.9;
}
.fp-lastella__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
@media (max-width: 768px) {
  .fp-lastella__grid { grid-template-columns: 1fr; }
}
.fp-grade {
  position: relative;
  background: #fff;
  border: 1px solid var(--clb-border);
  border-radius: 6px;
  padding: 40px 36px 36px;
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.fp-grade:hover {
  border-color: var(--clb-blue);
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(30,42,60,0.10);
}
.fp-grade--top {
  background: linear-gradient(160deg, #25344a 0%, #1e2a3c 100%);
  border-color: var(--clb-navy);
  color: #e7edf4;
}
.fp-grade__badge {
  position: absolute;
  top: -13px;
  left: 36px;
  background: var(--clb-blue);
  color: #fff;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  padding: 5px 16px;
  border-radius: 20px;
}
.fp-grade__bottle {
  background: #fff;
  border: 1px solid var(--clb-border);
  border-radius: 6px;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  margin: 0 0 24px;
}
.fp-grade__bottle img { width: 100%; height: 100%; object-fit: contain; padding: 14px; }
.fp-grade__head {
  display: flex;
  flex-direction: column;
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--clb-border);
}
.fp-grade--top .fp-grade__head { border-bottom-color: rgba(255,255,255,0.16); }
.fp-grade__en {
  display: block;
  font-family: var(--clb-en);
  font-size: 0.82rem;
  letter-spacing: 0.2em;
  line-height: 1.6;
  color: var(--clb-blue);
  margin-bottom: 6px;
}
.fp-grade--top .fp-grade__en { color: #9fb3cc; }
.fp-grade__name {
  font-family: var(--clb-en);
  font-size: 2rem;
  letter-spacing: 0.1em;
  font-weight: 600;
  color: var(--clb-navy);
  margin: 0;
  line-height: 1.1;
  border: none;
  padding: 0;
  background: transparent;
}
.fp-grade__name::after { display: none; }
.fp-grade--top .fp-grade__name { color: #fff; }
.fp-grade__name span {
  display: block;
  font-family: var(--clb-sans);
  font-size: 0.9rem;
  letter-spacing: 0.16em;
  color: var(--clb-muted);
  margin-top: 6px;
  font-weight: 400;
}
.fp-grade--top .fp-grade__name span { color: #b7c4d4; }
.fp-grade__desc {
  font-size: 0.92rem;
  line-height: 1.9;
  color: #4a5360;
  margin: 0 0 22px;
}
.fp-grade--top .fp-grade__desc { color: #c4cedd; }
.fp-grade__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  color: var(--clb-blue-deep);
  text-decoration: none;
  font-weight: 500;
}
.fp-grade--top .fp-grade__link { color: #cdd9e8; }
.fp-grade__link i {
  width: 18px;
  height: 1px;
  background: currentColor;
  transition: width 0.3s ease;
}
.fp-grade__link:hover i { width: 28px; }

/* 性能比較ダイジェスト */
.fp-compare {
  max-width: 760px;
  margin: 48px auto 0;
  background: #fff;
  border: 1px solid var(--clb-border);
  border-radius: 6px;
  padding: 32px 36px;
}
.fp-compare__title {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--clb-navy);
  margin: 0 0 22px;
}
.fp-compare__title span {
  display: block;
  font-size: 0.74rem;
  font-weight: 400;
  color: var(--clb-muted);
  margin-top: 4px;
  letter-spacing: 0.02em;
}
.fp-compare__row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}
.fp-compare__row:last-child { margin-bottom: 0; }
.fp-compare__label {
  font-family: var(--clb-en);
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  color: var(--clb-charcoal);
  width: 110px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}
.fp-compare__label small {
  font-family: var(--clb-sans);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--clb-muted);
}
.fp-compare__label--top { color: var(--clb-navy); font-weight: 600; }
.fp-compare__bar {
  flex: 1;
  height: 12px;
  background: var(--clb-mist);
  border-radius: 20px;
  overflow: hidden;
}
.fp-compare__bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #7e93ab, var(--clb-blue));
  border-radius: 20px;
}
.fp-compare__bar span.fp-compare__bar--top {
  background: linear-gradient(90deg, var(--clb-blue), var(--clb-navy));
}
.fp-lastella__sub {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 22px;
  margin: 36px 0 0;
}
.fp-lastella__sub a {
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: var(--clb-blue-deep);
  text-decoration: none;
  padding: 6px 16px;
  border: 1px solid var(--clb-border);
  border-radius: 20px;
  background: #fff;
  transition: border-color 0.3s ease, color 0.3s ease;
}
.fp-lastella__sub a:hover {
  border-color: var(--clb-blue);
  color: var(--clb-navy);
}
.fp-lastella__more,
.fp-products__more,
.fp-shops__more {
  text-align: center;
  margin-top: 44px;
}

/* =========================
   5. PRODUCTS
   ========================= */
.fp-products__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
@media (max-width: 1024px) {
  .fp-products__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .fp-products__grid { grid-template-columns: 1fr; }
}
.fp-product {
  display: block;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border: 1px solid var(--clb-border);
  border-radius: 6px;
  overflow: hidden;
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.fp-product:hover {
  border-color: var(--clb-blue);
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(30,42,60,0.10);
}
.fp-product__image {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--clb-mist);
}
.fp-product__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.fp-product:hover .fp-product__image img { transform: scale(1.06); }
.fp-product__image .placeholder-image { min-height: 100%; }
/* その他商材(item)ページのボトル画像は白背景・余白付きで表示（front-pageの写真カードには影響しないよう .lst-root 限定） */
.lst-root .fp-product__image { background: #fff; }
.lst-root .fp-product__image img { object-fit: contain; padding: 16px; }
.fp-product__body { padding: 22px 22px 26px; }
.fp-product__en {
  font-family: var(--clb-en);
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  color: var(--clb-blue);
  display: block;
  margin-bottom: 6px;
}
.fp-product__name {
  font-family: var(--clb-serif);
  font-size: 1.1rem;
  letter-spacing: 0.06em;
  color: var(--clb-navy);
  margin: 0 0 8px;
  font-weight: 600;
  border: none;
  padding: 0;
  background: transparent;
}
.fp-product__name::after { display: none; }
.fp-product__desc {
  font-size: 0.84rem;
  line-height: 1.7;
  color: var(--clb-muted);
  margin: 0;
}

/* =========================
   6. CLB GARAGE
   ========================= */
.fp-garage__inner {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  align-items: center;
}
@media (max-width: 900px) {
  .fp-garage__inner {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}
.fp-garage__image {
  aspect-ratio: 4 / 3;
  border-radius: 6px;
  overflow: hidden;
}
.fp-garage__image .placeholder-image { min-height: 100%; }
.fp-garage__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fp-garage__title {
  font-family: var(--clb-serif);
  font-size: clamp(26px, 3vw, 38px);
  letter-spacing: 0.1em;
  color: #fff;
  margin: 6px 0 8px;
  font-weight: 600;
}
.fp-garage__sub {
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  color: #9fb3cc;
  margin: 0 0 22px;
}
.fp-garage__desc {
  font-size: 0.96rem;
  line-height: 2;
  color: #c4cedd;
  margin: 0 0 32px;
}

/* =========================
   7. SHOPS & WORKS
   ========================= */
.fp-shops__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 768px) {
  .fp-shops__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .fp-shops__grid { grid-template-columns: 1fr; }
}
.fp-shops__item {
  display: block;
  text-decoration: none;
  color: inherit;
}
.fp-shops__item-image {
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--clb-mist);
  border-radius: 4px;
}
.fp-shops__item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.fp-shops__item:hover .fp-shops__item-image img { transform: scale(1.06); }
.fp-shops__item-label {
  margin: 14px 0 0;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  color: var(--clb-charcoal);
}

/* =========================
   8. TWIN CONTACT
   ========================= */
.fp-twin__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
@media (max-width: 768px) {
  .fp-twin__grid { grid-template-columns: 1fr; }
}
.fp-twin__card {
  display: block;
  text-decoration: none;
  padding: 48px 44px;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.fp-twin__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 44px rgba(30,42,60,0.16);
}
.fp-twin__card--c {
  background: var(--clb-mist);
  border: 1px solid var(--clb-border);
  color: var(--clb-charcoal);
}
.fp-twin__card--b {
  background: var(--clb-navy);
  color: #e7edf4;
}
.fp-twin__tag {
  display: inline-block;
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  padding: 4px 14px;
  border-radius: 20px;
  margin-bottom: 16px;
}
.fp-twin__card--c .fp-twin__tag { background: var(--clb-blue); color: #fff; }
.fp-twin__card--b .fp-twin__tag { background: rgba(255,255,255,0.14); color: #cdd9e8; }
.fp-twin__title {
  font-family: var(--clb-serif);
  font-size: clamp(18px, 1.9vw, 23px);
  letter-spacing: 0.06em;
  margin: 0 0 12px;
  font-weight: 600;
  border: none;
  padding: 0;
  background: transparent;
}
.fp-twin__card--c .fp-twin__title { color: var(--clb-navy); }
.fp-twin__card--b .fp-twin__title { color: #fff; }
.fp-twin__title::after { display: none; }
.fp-twin__desc {
  font-size: 0.92rem;
  line-height: 1.85;
  margin: 0 0 24px;
}
.fp-twin__card--c .fp-twin__desc { color: #4a5360; }
.fp-twin__card--b .fp-twin__desc { color: #c4cedd; }
.fp-twin__arrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.92rem;
  letter-spacing: 0.1em;
  font-weight: 500;
}
.fp-twin__card--c .fp-twin__arrow { color: var(--clb-blue-deep); }
.fp-twin__card--b .fp-twin__arrow { color: #fff; }
.fp-twin__arrow i {
  width: 22px;
  height: 1px;
  background: currentColor;
  transition: width 0.3s ease;
}
.fp-twin__card:hover .fp-twin__arrow i { width: 34px; }
.fp-twin__sns {
  text-align: center;
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid var(--clb-border);
}
.fp-twin__sns-lead {
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  color: var(--clb-muted);
  margin: 0 0 20px;
}
.fp-twin__sns-list {
  display: flex;
  justify-content: center;
  gap: 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.fp-twin__sns-list a {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--clb-blue-deep);
  text-decoration: none;
  transition: color 0.3s ease, transform 0.3s ease;
}
.fp-twin__sns-list a:hover {
  color: var(--clb-navy);
  transform: translateY(-3px);
}
.fp-twin__sns-list svg {
  width: 34px;
  height: 34px;
}
.fp-twin__sns-list span {
  font-family: var(--clb-en);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
}

/* =========================
   Buttons
   ========================= */
.fp-btn {
  display: inline-block;
  padding: 15px 42px;
  font-size: 0.92rem;
  letter-spacing: 0.14em;
  text-decoration: none;
  border-radius: 3px;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.fp-btn--navy {
  background: var(--clb-navy);
  color: #fff;
  border: 1px solid var(--clb-navy);
}
.fp-btn--navy:hover {
  background: var(--clb-blue-deep);
  border-color: var(--clb-blue-deep);
  transform: translateY(-2px);
}
.fp-btn--outline {
  border: 1px solid var(--clb-blue);
  color: var(--clb-blue-deep);
  background: transparent;
}
.fp-btn--outline:hover {
  background: var(--clb-blue);
  color: #fff;
  transform: translateY(-2px);
}
.fp-btn--white {
  background: #fff;
  color: var(--clb-navy);
  border: 1px solid #fff;
}
.fp-btn--white:hover {
  background: transparent;
  color: #fff;
  transform: translateY(-2px);
}
/* ボタンの矢印（CSSシェブロン：前へ／戻る） */
.fp-btn--next, .fp-btn--back { display: inline-flex; align-items: center; justify-content: center; gap: 12px; }
.fp-btn--next::after, .fp-btn--back::before {
  content: "";
  width: 7px;
  height: 7px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  display: inline-block;
  flex-shrink: 0;
}
.fp-btn--next::after { transform: rotate(45deg); margin-top: 1px; }
.fp-btn--back::before { transform: rotate(-135deg); margin-top: 1px; }
.fp-btn--outline-light {
  border: 1px solid rgba(255,255,255,0.7);
  color: #fff;
  background: transparent;
}
.fp-btn--outline-light:hover {
  background: #fff;
  color: var(--clb-navy);
  transform: translateY(-2px);
}
/* =========================================================================
   / front-page.php 専用スタイル ここまで
   ========================================================================= */


/* =========================================================================
   サイト共通フッター（site-footer.php）
   ========================================================================= */
.clb-footer {
  background: var(--clb-navy);
  color: #c4cedd;
}
.clb-footer__inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 48px;
  padding-top: 64px;
  padding-bottom: 56px;
  align-items: start;
}
@media (max-width: 900px) {
  .clb-footer__inner {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
    padding-top: 48px;
    padding-bottom: 40px;
  }
}
.clb-footer__logo-img { max-width: 200px; margin: 0 0 18px; }
@media (max-width: 900px) { .clb-footer__logo-img { margin: 0 auto 18px; } }
.clb-footer__logo-text {
  font-family: var(--clb-en);
  font-size: 1.7rem;
  letter-spacing: 0.16em;
  font-weight: 600;
  color: #fff;
  margin: 0 0 18px;
  line-height: 1;
}
.clb-footer__logo-text span {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.34em;
  color: #9fb3cc;
  margin-top: 6px;
}
.clb-footer__info {
  font-size: 0.86rem;
  line-height: 1.95;
  color: #b7c4d4;
  margin: 0 0 22px;
}
.clb-footer__info strong { color: #fff; font-weight: 600; letter-spacing: 0.06em; }
.clb-footer__info a { color: #cdd9e8; text-decoration: none; }
.clb-footer__info a:hover { color: #fff; }
.clb-footer__sns {
  display: flex;
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (max-width: 900px) { .clb-footer__sns { justify-content: center; } }
.clb-footer__sns a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  color: #cdd9e8;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.clb-footer__sns a:hover {
  background: var(--clb-blue);
  border-color: var(--clb-blue);
  color: #fff;
  transform: translateY(-3px);
}
.clb-footer__nav-head,
.clb-footer__contact .clb-footer__nav-head {
  font-family: var(--clb-en);
  font-size: 0.82rem;
  letter-spacing: 0.26em;
  color: #9fb3cc;
  margin: 0 0 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.14);
}
.clb-footer__nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
@media (max-width: 900px) {
  .clb-footer__nav ul { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 12px 20px; }
}
.clb-footer__nav a {
  font-size: 0.88rem;
  letter-spacing: 0.04em;
  color: #c4cedd;
  text-decoration: none;
  transition: color 0.3s ease, padding 0.3s ease;
}
.clb-footer__nav a:hover { color: #fff; }
.clb-footer__contact-text {
  font-size: 0.86rem;
  line-height: 1.85;
  color: #b7c4d4;
  margin: 0 0 18px;
}
.clb-footer__btn {
  display: inline-block;
  width: 100%;
  text-align: center;
  padding: 14px 20px;
  background: var(--clb-blue);
  color: #fff;
  text-decoration: none;
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  border-radius: 3px;
  transition: background 0.3s ease, transform 0.3s ease;
}
.clb-footer__btn:hover { background: #fff; color: var(--clb-navy); transform: translateY(-2px); }
.clb-footer__tel {
  display: block;
  text-align: center;
  margin-top: 12px;
  font-family: var(--clb-en);
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  color: #fff;
  text-decoration: none;
}
.clb-footer__copyright {
  text-align: center;
  padding-top: 24px;
  padding-bottom: 24px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.clb-footer__copytext {
  font-family: var(--clb-en);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  color: #8294a9;
  margin: 6px 0 0;
}
/* 親テーマのコピーライト重複を抑制（独自表記を使用） */
.clb-footer__copyright .site-footer-copyright p:first-child { color: #8294a9; font-size: 0.74rem; }


/* =========================================================================
   コンセプトページ専用スタイル（page-concept.php / .cp-root）
   グレーブルー×白、余白を活かした「引き算」のデザイン。
   背景画像は img/concept/○○.jpg を指定（後から差し替え／未設置でも崩れない）。
   ========================================================================= */
.cp-root { overflow: hidden; }
.cp-eyebrow {
  font-family: var(--clb-en);
  font-size: 0.82rem;
  letter-spacing: 0.3em;
  color: var(--clb-blue);
  text-transform: uppercase;
  margin: 0 0 16px;
  font-weight: 600;
}

/* ---- 1. メインビジュアル ---- */
.cp-mv {
  position: relative;
  min-height: 84vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 120px 24px;
  overflow: hidden;
}
.cp-mv__bg {
  position: absolute;
  inset: 0;
  background-color: var(--clb-mist);   /* 画像未設置時の下地 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  transform: scale(1.03);
}
.cp-mv__scrim {
  position: absolute;
  inset: 0;
  /* 写真が入っても文字が読めるよう、白〜ミストのごく淡いスクリーン */
  background: linear-gradient(180deg, rgba(255,255,255,0.62) 0%, rgba(238,242,247,0.70) 100%);
  z-index: 1;
}
.cp-mv__inner {
  position: relative;
  z-index: 2;
  max-width: 760px;
}
.cp-mv__en {
  font-family: var(--clb-en);
  font-size: 1rem;
  letter-spacing: 0.36em;
  color: var(--clb-blue);
  margin: 0 0 22px;
  font-weight: 600;
}
.cp-mv__title {
  font-family: var(--clb-serif);
  font-size: clamp(25px, 3.4vw, 44px);
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.7;
  color: var(--clb-navy);
  margin: 0 0 30px;
}
.cp-mv__lead {
  font-size: clamp(0.92rem, 1.1vw, 1.02rem);
  line-height: 2.2;
  letter-spacing: 0.06em;
  color: #3c4654;
  margin: 0 auto;
  max-width: 640px;
}
@media (max-width: 768px) {
  .cp-mv { min-height: 70vh; padding: 100px 22px; }
}

/* ---- 2. 実現したいこと（背景画像バンド） ---- */
.cp-vision {
  position: relative;
  overflow: hidden;
}
.cp-vision__bg {
  position: absolute;
  inset: 0;
  background-color: var(--clb-blue);   /* 画像未設置時の下地 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
}
.cp-vision__scrim {
  position: absolute;
  inset: 0;
  /* 背景イラストが明るく線が多いため、濃いネイビーで被せて白文字の視認性を確保 */
  background: linear-gradient(180deg, rgba(18,27,40,0.84) 0%, rgba(30,42,60,0.80) 100%);
  z-index: 1;
}
.cp-vision__inner {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #eef2f7;
}
.cp-vision .cp-eyebrow { color: #9fb3cc; }
.cp-vision__title {
  font-family: var(--clb-serif);
  font-size: clamp(21px, 2.4vw, 32px);
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.7;
  color: #fff;
  margin: 0 0 30px;
  border: none;
  padding: 0;
  background: transparent;
}
.cp-vision__title::after { display: none; }
.cp-vision__body p {
  font-size: 1rem;
  line-height: 2.2;
  letter-spacing: 0.04em;
  color: #dce4ee;
  margin: 0 auto 20px;
  max-width: 720px;
}
.cp-vision__body p:last-child { margin-bottom: 0; }

/* ---- 3. 想いの循環（画像＋テキスト） ---- */
.cp-cycle__inner {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 60px;
  align-items: center;
}
@media (max-width: 900px) {
  .cp-cycle__inner { grid-template-columns: 1fr; gap: 36px; }
}
.cp-cycle__image {
  aspect-ratio: 6 / 7;                 /* PC：cycle.jpg（1200×1400 縦長） */
  border-radius: 6px;
  background-color: #dfe6ee;          /* 画像未設置時の下地 */
  background-image: var(--cp-cycle-pc);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
@media (max-width: 900px) {
  /* スマホ：cycle_sp.jpg（1200×900 横長）に切替 */
  .cp-cycle__image {
    aspect-ratio: 4 / 3;
    background-image: var(--cp-cycle-sp);
  }
}
.cp-cycle__title {
  font-family: var(--clb-serif);
  font-size: clamp(20px, 2.2vw, 29px);
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.65;
  color: var(--clb-navy);
  margin: 0 0 24px;
  border: none;
  padding: 0;
  background: transparent;
}
.cp-cycle__title::after { display: none; }
.cp-cycle__text p {
  font-size: 0.97rem;
  line-height: 2.1;
  color: #4a5360;
  margin: 0 0 18px;
}
.cp-cycle__text p:last-child { margin-bottom: 0; }

/* ---- 4. 3つの真摯な姿勢 ---- */
.cp-stance__lead {
  text-align: center;
  color: var(--clb-muted);
  margin: 0 0 48px;
  font-size: 0.97rem;
}
.cp-stance__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
@media (max-width: 900px) {
  .cp-stance__grid { grid-template-columns: 1fr; gap: 24px; max-width: 560px; margin: 0 auto; }
}
.cp-stance__card {
  background: #fff;
  border: 1px solid var(--clb-border);
  border-radius: 6px;
  overflow: hidden;
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.cp-stance__card:hover {
  border-color: var(--clb-blue);
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(30,42,60,0.10);
}
.cp-stance__image {
  aspect-ratio: 16 / 10;
  background-color: var(--clb-mist);   /* 画像未設置時の下地 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.cp-stance__body { padding: 28px 26px 32px; }
.cp-stance__num {
  font-family: var(--clb-en);
  font-size: 1.4rem;
  letter-spacing: 0.1em;
  color: var(--clb-blue);
  display: block;
  margin-bottom: 10px;
}
.cp-stance__title {
  font-family: var(--clb-serif);
  font-size: 1.18rem;
  letter-spacing: 0.06em;
  color: var(--clb-navy);
  margin: 0 0 2px;
  font-weight: 600;
  border: none;
  padding: 0;
  background: transparent;
  line-height: 1.5;
}
.cp-stance__title::after { display: none; }
.cp-stance__sub {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--clb-blue);
  margin: 0 0 14px;
  min-height: 1em;
}
.cp-stance__text {
  font-size: 0.9rem;
  line-height: 1.95;
  color: #4a5360;
  margin: 0;
}

/* ---- 5. 代表メッセージ ---- */
.cp-rep__inner {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 56px;
  align-items: center;
}
@media (max-width: 900px) {
  .cp-rep__inner { grid-template-columns: 1fr; gap: 32px; }
}
.cp-rep__photo {
  aspect-ratio: 4 / 5;
  border-radius: 6px;
  background-color: #dfe6ee;          /* 画像未設置時の下地 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
@media (max-width: 900px) {
  /* width:100% が無いと margin:auto により幅が中身基準(0)になり高さも0に潰れる */
  .cp-rep__photo { aspect-ratio: 16 / 11; width: 100%; max-width: 420px; margin: 0 auto; }
}
.cp-rep__title {
  font-family: var(--clb-serif);
  font-size: clamp(21px, 2.3vw, 30px);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--clb-navy);
  margin: 8px 0 24px;
  border: none;
  padding: 0;
  background: transparent;
}
.cp-rep__title::after { display: none; }
.cp-rep__msg p {
  font-size: 0.97rem;
  line-height: 2.15;
  color: #4a5360;
  margin: 0 0 18px;
}
.cp-rep__sign {
  margin: 26px 0 0;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  color: var(--clb-navy);
}
.cp-rep__sign strong {
  font-size: 1.2rem;
  letter-spacing: 0.1em;
  font-weight: 600;
}
.cp-rep__kana {
  display: inline;            /* PC：漢字名の横に並べる */
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--clb-muted);
  margin-left: 8px;
  white-space: nowrap;
}
@media (max-width: 768px) {
  /* スマホ：名前・ふりがなを右揃え */
  .cp-rep__sign { text-align: right; }
}

/* ---- 6. フッター導線 ---- */
.cp-outro {
  position: relative;
  padding: 120px 24px;
  text-align: center;
  overflow: hidden;
}
.cp-outro__bg {
  position: absolute;
  inset: 0;
  background-color: var(--clb-navy);   /* 画像未設置時の下地 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
}
.cp-outro__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(30,42,60,0.74) 0%, rgba(30,42,60,0.82) 100%);
  z-index: 1;
}
.cp-outro__inner {
  position: relative;
  z-index: 2;
}
.cp-outro__text {
  font-family: var(--clb-serif);
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.8;
  color: #fff;
  margin: 0 0 40px;
}
.cp-outro__links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px;
}
@media (max-width: 560px) {
  .cp-outro__links { flex-direction: column; align-items: stretch; max-width: 360px; margin: 0 auto; }
}
/* =========================================================================
   / コンセプトページ専用スタイル ここまで
   ========================================================================= */


/* =========================================================================
   ラステラ（コーティング）ページ専用スタイル
   page-coating.php / page-aegis.php / page-matrix.php / .lst-root
   ========================================================================= */

/* ---- レーダーチャート（数値指定SVG） ---- */
.clb-radar { width: 100%; max-width: 520px; margin: 0 auto; }
.clb-radar__svg { width: 100%; height: auto; display: block; }
.clb-radar__label { font-family: var(--clb-sans); font-size: 13px; fill: var(--clb-charcoal); font-weight: 500; }
.clb-radar__badge { font-family: var(--clb-en); font-size: 12px; fill: #fff; font-weight: 700; }
.clb-radar__legend {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 14px 24px;
  list-style: none; margin: 18px 0 0; padding: 0;
}
.clb-radar__legend li { display: flex; align-items: center; gap: 8px; font-size: 0.88rem; color: var(--clb-charcoal); }
.clb-radar__legend-mark { width: 16px; height: 16px; border-radius: 3px; display: inline-block; }

/* ---- SPEC表（数値指定） ---- */
.clb-spec { width: 100%; }
.clb-spec__title {
  font-family: var(--clb-en); font-size: 1rem; letter-spacing: 0.2em;
  color: var(--clb-navy); font-weight: 600; margin: 0 0 16px;
  padding-left: 20px; position: relative;
}
.clb-spec__title::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 11px; height: 11px; background: var(--clb-blue);
}
.clb-spec__table { width: 100%; border-collapse: collapse; }
.clb-spec__table th, .clb-spec__table td {
  text-align: left; padding: 14px 16px; font-size: 0.9rem; line-height: 1.7;
  border-bottom: 1px solid var(--clb-border); vertical-align: top;
}
.clb-spec__table tr:first-child th, .clb-spec__table tr:first-child td { border-top: 1px solid var(--clb-border); }
.clb-spec__table th {
  width: 34%; background: var(--clb-gray); color: var(--clb-navy);
  font-weight: 600; letter-spacing: 0.04em; white-space: nowrap;
}
.clb-spec__table td { color: #4a5360; }

/* ---- コーティングトップ HERO ---- */
.lst-hero { position: relative; padding: 120px 24px 100px; text-align: center; overflow: hidden; color: #fff; }
.lst-hero__bg { position: absolute; inset: 0; background-color: var(--clb-navy); background-size: cover; background-position: center; z-index: 0; }
.lst-hero__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(30,42,60,0.80) 0%, rgba(30,42,60,0.88) 100%); z-index: 1; }
.lst-hero__inner { position: relative; z-index: 2; max-width: 760px; margin: 0 auto; }
.lst-hero__logo { width: 240px; max-width: 70%; height: auto; margin: 0 auto 26px; display: block !important; }
.lst-hero__en { font-family: var(--clb-en); letter-spacing: 0.3em; color: #9fb3cc; font-size: 0.95rem; margin: 0 0 12px; font-weight: 600; }
.lst-hero__title { font-family: var(--clb-serif); font-size: clamp(22px, 2.6vw, 34px); letter-spacing: 0.12em; color: #fff; margin: 0 0 20px; font-weight: 600; }
.lst-hero__lead { font-size: clamp(0.92rem, 1.1vw, 1rem); line-height: 2; color: #dce4ee; margin: 0; }

/* ---- ブランド紹介 ---- */
.lst-brand__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
@media (max-width: 900px) { .lst-brand__inner { grid-template-columns: 1fr; gap: 36px; } }
.lst-brand__en { font-family: var(--clb-en); font-size: 0.92rem; letter-spacing: 0.26em; color: var(--clb-blue); margin: 0 0 14px; font-weight: 600; }
.lst-brand__title { font-family: var(--clb-serif); font-size: clamp(22px, 2.4vw, 32px); letter-spacing: 0.1em; color: var(--clb-navy); margin: 0 0 24px; font-weight: 600; line-height: 1.5; border: none; padding: 0; background: transparent; }
.lst-brand__title::after { display: none; }
.lst-brand__text p { font-size: 0.97rem; line-height: 2.05; color: #4a5360; margin: 0 0 18px; }
.lst-brand__text p:last-child { margin-bottom: 0; }
.lst-brand__image img { width: 100%; border-radius: 6px; aspect-ratio: 16 / 10; object-fit: cover; }
/* ブランド紹介の上に置くラインナップ画像（横並びボトル・余白ぶん小さめに center 配置） */
.lst-brand__lineup { max-width: 640px; margin: 0 auto 40px; text-align: center; }
.lst-brand__lineup img { display: block; width: 100%; height: auto; margin: 0 auto; }
@media (max-width: 600px) { .lst-brand__lineup { max-width: 100%; margin-bottom: 28px; } }

/* ---- 選ばれる理由 ---- */
.lst-reasons__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 900px) { .lst-reasons__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .lst-reasons__grid { grid-template-columns: 1fr; } }
.lst-reason { background: #fff; border: 1px solid var(--clb-border); border-radius: 6px; padding: 32px 28px; transition: border-color 0.3s ease, transform 0.3s ease; }
.lst-reason:hover { border-color: var(--clb-blue); transform: translateY(-3px); }
.lst-reason__num { font-family: var(--clb-en); font-size: 1.7rem; letter-spacing: 0.08em; color: var(--clb-blue); display: block; margin-bottom: 10px; }
.lst-reason__title { font-family: var(--clb-serif); font-size: 1.1rem; letter-spacing: 0.04em; color: var(--clb-navy); margin: 0 0 12px; font-weight: 600; line-height: 1.5; border: none; padding: 0; background: transparent; }
.lst-reason__title::after { display: none; }
.lst-reason__text { font-size: 0.88rem; line-height: 1.95; color: #4a5360; margin: 0; }

/* ---- ラインナップ集合写真（見出し直下・白パネルで下地を白く） ---- */
.lst-lineup { margin: 0 auto 44px; max-width: 1040px; background: #fff; border: 1px solid var(--clb-border); border-radius: 10px; padding: 28px 32px; text-align: center; }
.lst-lineup img { display: block; width: 100%; height: auto; margin: 0 auto; }
@media (max-width: 600px) { .lst-lineup { padding: 18px; margin-bottom: 32px; } }

/* ---- ブランドストーリー（背景画像バンド） ---- */
.lst-story { position: relative; padding: 110px 24px; overflow: hidden; }
@media (max-width: 768px) { .lst-story { padding: 70px 24px; } }
.lst-story__bg { position: absolute; inset: 0; background-color: var(--clb-navy); background-size: cover; background-position: center; z-index: 0; }
.lst-story__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,29,42,0.82) 0%, rgba(30,42,60,0.86) 100%); z-index: 1; }
.lst-story__inner { position: relative; z-index: 2; text-align: center; color: #eef2f7; }
.lst-story__en { font-family: var(--clb-en); font-size: 0.92rem; letter-spacing: 0.3em; color: #9fb3cc; margin: 0 0 14px; font-weight: 600; }
.lst-story__title { font-family: var(--clb-serif); font-size: clamp(21px, 2.4vw, 31px); letter-spacing: 0.1em; color: #fff; margin: 0 0 24px; font-weight: 600; border: none; padding: 0; background: transparent; }
.lst-story__title::after { display: none; }
.lst-story__text { font-size: 1rem; line-height: 2.15; color: #dce4ee; margin: 0 auto; max-width: 720px; }
.lst-story__vm { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 44px; max-width: 720px; margin-left: auto; margin-right: auto; }
@media (max-width: 600px) { .lst-story__vm { grid-template-columns: 1fr; gap: 18px; } }
.lst-story__vm-item { border-top: 1px solid rgba(255,255,255,0.22); padding-top: 18px; }
.lst-story__vm-item span { font-family: var(--clb-en); font-size: 0.82rem; letter-spacing: 0.26em; color: #9fb3cc; display: block; margin-bottom: 8px; }
.lst-story__vm-item p { font-family: var(--clb-serif); font-size: 1.02rem; letter-spacing: 0.06em; color: #fff; margin: 0; line-height: 1.6; }

/* ---- グレードカード ---- */
.lst-grades__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
@media (max-width: 768px) { .lst-grades__grid { grid-template-columns: 1fr; } }
/* 3カード横並び（バイクコーティング等） */
.lst-grades__grid--three { grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 980px) { .lst-grades__grid--three { grid-template-columns: 1fr; max-width: 520px; margin-left: auto; margin-right: auto; } }
.lst-card {
  position: relative; background: #fff; border: 1px solid var(--clb-border);
  border-radius: 8px; overflow: hidden; display: flex; flex-direction: column;
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.lst-card:hover { border-color: var(--clb-blue); transform: translateY(-4px); box-shadow: 0 18px 40px rgba(30,42,60,0.10); }
.lst-card--top { border-color: var(--clb-navy); }
.lst-card__badge {
  position: absolute; top: 16px; left: 16px; z-index: 2;
  background: var(--clb-navy); color: #fff; font-size: 0.72rem; letter-spacing: 0.12em;
  padding: 5px 14px; border-radius: 20px;
}
.lst-card__bottle { aspect-ratio: 4 / 3; background: #fff; }
.lst-card__bottle .placeholder-image { min-height: 100%; }
.lst-card__bottle img { width: 100%; height: 100%; object-fit: contain; padding: 20px; }
.lst-card__body { padding: 28px 30px 32px; flex: 1; display: flex; flex-direction: column; }
.lst-card__en { display: block; font-family: var(--clb-en); font-size: 0.8rem; letter-spacing: 0.18em; line-height: 1.6; color: var(--clb-blue); margin-bottom: 6px; }
.lst-card__name {
  font-family: var(--clb-en); font-size: 2rem; letter-spacing: 0.1em; color: var(--clb-navy);
  font-weight: 600; margin: 0 0 14px; line-height: 1.1; border: none; padding: 0; background: transparent;
}
.lst-card__name::after { display: none; }
.lst-card__name span { display: block; font-family: var(--clb-sans); font-size: 0.9rem; letter-spacing: 0.16em; color: var(--clb-muted); margin-top: 6px; font-weight: 400; }
.lst-card__desc { font-size: 0.92rem; line-height: 1.9; color: #4a5360; margin: 0 0 18px; }
.lst-card__chart { margin: 4px 0 22px; padding-top: 18px; border-top: 1px solid var(--clb-border); }
.lst-card__chart .clb-radar { max-width: 420px; }
.lst-card__chart-note { text-align: center; color: var(--clb-muted); font-size: 0.78rem; margin: 6px 0 0; }
.lst-card__body .fp-btn { margin-top: auto; }

/* ---- 性能比較 ---- */
.lst-compare__note { text-align: center; color: var(--clb-muted); font-size: 0.84rem; margin: 0 0 28px; }
.lst-compare__chart { display: flex; justify-content: center; }

/* ---- オプション ---- */
.lst-options__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 640px) { .lst-options__grid { grid-template-columns: 1fr; } }
.lst-option {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 32px 20px; border: 1px solid var(--clb-border); border-radius: 6px;
  background: #fff; text-decoration: none; transition: border-color 0.3s ease, transform 0.3s ease;
}
.lst-option:hover { border-color: var(--clb-blue); transform: translateY(-3px); }
.lst-option__img { width: 140px; max-width: 60%; margin-bottom: 6px; }
.lst-option__img img { width: 100%; height: auto; display: block; }
.lst-option__en { font-family: var(--clb-en); font-size: 1.1rem; letter-spacing: 0.2em; color: var(--clb-blue); }
.lst-option__ja { font-size: 0.9rem; color: var(--clb-charcoal); letter-spacing: 0.04em; }

/* ---- CTA（共通） ---- */
.lst-cta__inner { text-align: center; }
.lst-cta__title { font-family: var(--clb-serif); font-size: clamp(20px, 2.2vw, 28px); color: #fff; margin: 0 0 16px; font-weight: 600; letter-spacing: 0.08em; }
.lst-cta__text { color: #c4cedd; margin: 0 0 30px; font-size: 0.95rem; line-height: 1.9; }

/* ---- 商品詳細 HERO ---- */
.lst-dhero { background: var(--clb-navy); color: #e7edf4; padding: 84px 0 72px; }
.lst-dhero--top { background: linear-gradient(160deg, #25344a 0%, #1a2535 100%); }
.lst-dhero__inner { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; }
@media (max-width: 900px) { .lst-dhero__inner { grid-template-columns: 1fr; gap: 32px; } }
.lst-dhero__logo { width: 200px; max-width: 60%; height: auto; margin: 0 0 22px; display: block !important; }
.lst-dhero__badge { display: inline-block; background: var(--clb-blue); color: #fff; font-size: 0.74rem; letter-spacing: 0.12em; padding: 5px 16px; border-radius: 20px; margin: 0 0 14px; }
.lst-dhero__en { display: block; font-family: var(--clb-en); font-size: 0.9rem; letter-spacing: 0.2em; line-height: 1.6; color: #9fb3cc; margin-bottom: 6px; }
.lst-dhero__name {
  font-family: var(--clb-en); font-size: clamp(40px, 6vw, 68px); letter-spacing: 0.08em;
  color: #fff; font-weight: 600; margin: 0 0 18px; line-height: 1; border: none; padding: 0; background: transparent;
}
.lst-dhero__name::after { display: none; }
.lst-dhero__name span { display: block; font-family: var(--clb-sans); font-size: 1rem; letter-spacing: 0.18em; color: #b7c4d4; margin-top: 10px; font-weight: 400; }
.lst-dhero__lead { font-size: 1rem; line-height: 2; color: #dce4ee; margin: 0; }
.lst-dhero__bottle { width: 100%; aspect-ratio: 4 / 5; border-radius: 8px; overflow: hidden; background: #fff; }
.lst-dhero__bottle .placeholder-image { min-height: 100%; }
.lst-dhero__bottle img { width: 100%; height: 100%; object-fit: contain; padding: 18px; }
@media (max-width: 900px) { .lst-dhero__bottle { aspect-ratio: 16 / 10; max-width: 420px; margin: 0 auto; } }

/* ---- 性能・SPEC ---- */
.lst-data__note { text-align: center; color: var(--clb-muted); font-size: 0.84rem; margin: 0 0 36px; }
.lst-data__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
@media (max-width: 900px) { .lst-data__grid { grid-template-columns: 1fr; gap: 40px; } }
.lst-data__chart { display: flex; justify-content: center; }

/* ---- 下地処理 ---- */
.lst-primer__text { font-size: 0.97rem; line-height: 2.1; color: #4a5360; text-align: center; max-width: 720px; margin: 0 auto; }

/* ---- 関連ナビ ---- */
.lst-detail-nav__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 640px) { .lst-detail-nav__grid { grid-template-columns: 1fr; } }
.lst-detail-nav__item {
  display: flex; flex-direction: column; gap: 6px; padding: 26px 28px;
  border: 1px solid var(--clb-border); border-radius: 6px; text-decoration: none;
  background: #fff; transition: border-color 0.3s ease, transform 0.3s ease;
}
.lst-detail-nav__item:hover { border-color: var(--clb-blue); transform: translateY(-3px); }
.lst-detail-nav__label { font-size: 0.78rem; letter-spacing: 0.1em; color: var(--clb-blue); }
.lst-detail-nav__name { font-size: 1.02rem; color: var(--clb-navy); font-weight: 600; letter-spacing: 0.04em; }

/* ---- 特徴（features：商品詳細／簡易商品 共通） ---- */
.lst-features { background: var(--clb-gray); }
.clb-feature__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; }
.clb-feature { background: #fff; border: 1px solid var(--clb-border); border-radius: 6px; padding: 26px 26px; }
.clb-feature__title { font-family: var(--clb-serif); font-size: 1.06rem; letter-spacing: 0.04em; color: var(--clb-navy); margin: 0 0 10px; font-weight: 600; line-height: 1.5; border: none; padding: 0; background: transparent; }
.clb-feature__title::after { display: none; }
.clb-feature__text { font-size: 0.9rem; line-height: 1.95; color: #4a5360; margin: 0; }

/* ---- 簡易商品ページ（clb-product-page） ---- */
.clb-product__top { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; align-items: center; }
@media (max-width: 768px) { .clb-product__top { grid-template-columns: 1fr; gap: 32px; } }
.clb-product__image { background: #fff; border: 1px solid var(--clb-border); border-radius: 8px; aspect-ratio: 1 / 1; overflow: hidden; }
.clb-product__image img { width: 100%; height: 100%; object-fit: contain; padding: 26px; }
.clb-product__image .placeholder-image { min-height: 100%; }
@media (max-width: 768px) { .clb-product__image { max-width: 420px; margin: 0 auto; } }
.clb-product__lead { font-size: 1rem; line-height: 2.05; color: #3c4654; margin: 0; letter-spacing: 0.04em; }
/* =========================================================================
   / ラステラ ページ専用スタイル ここまで
   ========================================================================= */


/* =========================================================================
   下層共通：ページイントロ / 準備中 / ミッション / ガレージ
   ========================================================================= */

/* ---- ページイントロ（greeting / mission 等） ---- */
.clb-pintro { background: var(--clb-mist); padding: 92px 24px 72px; text-align: center; }
.clb-pintro__en { font-family: var(--clb-en); letter-spacing: 0.3em; color: var(--clb-blue); font-size: 0.95rem; margin: 0 0 12px; font-weight: 600; }
.clb-pintro__title { font-family: var(--clb-serif); font-size: clamp(24px, 3vw, 36px); letter-spacing: 0.12em; color: var(--clb-navy); margin: 0; font-weight: 600; }
.clb-pintro__lead { max-width: 680px; margin: 18px auto 0; color: #4a5360; font-size: 0.96rem; line-height: 1.9; }

/* ---- 準備中（Coming Soon） ---- */
.clb-cs { padding: 120px 24px; text-align: center; }
.clb-cs__badge { display: inline-block; background: var(--clb-mist); color: var(--clb-blue-deep); border: 1px solid var(--clb-border); font-size: 0.78rem; letter-spacing: 0.14em; padding: 6px 18px; border-radius: 20px; margin: 0 0 22px; }
.clb-cs__en { font-family: var(--clb-en); letter-spacing: 0.3em; color: var(--clb-blue); font-size: 0.9rem; margin: 0 0 10px; font-weight: 600; }
.clb-cs__title { font-family: var(--clb-serif); font-size: clamp(24px, 3vw, 36px); letter-spacing: 0.1em; color: var(--clb-navy); margin: 0 0 10px; font-weight: 600; }
.clb-cs__sub { color: var(--clb-muted); font-size: 0.95rem; margin: 0 0 24px; letter-spacing: 0.06em; }
.clb-cs__desc { color: #4a5360; font-size: 0.96rem; line-height: 1.9; max-width: 560px; margin: 0 auto 34px; }
.clb-cs__links { display: flex; justify-content: center; flex-wrap: wrap; gap: 16px; }
@media (max-width: 480px) { .clb-cs__links { flex-direction: column; align-items: stretch; max-width: 320px; margin: 0 auto; } }

/* ---- MISSION / VISION ブロック ---- */
.clb-mv { display: flex; flex-direction: column; gap: 40px; }
.clb-mv__item { padding: 0 0 36px; border-bottom: 1px solid var(--clb-border); }
.clb-mv__item:last-child { border-bottom: none; padding-bottom: 0; }
.clb-mv__en { font-family: var(--clb-en); font-size: 0.95rem; letter-spacing: 0.28em; color: var(--clb-blue); display: block; margin-bottom: 12px; font-weight: 600; }
.clb-mv__title { font-family: var(--clb-serif); font-size: clamp(20px, 2.2vw, 28px); letter-spacing: 0.08em; color: var(--clb-navy); margin: 0 0 16px; font-weight: 600; line-height: 1.6; border: none; padding: 0; background: transparent; }
.clb-mv__title::after { display: none; }
.clb-mv__text { font-size: 0.97rem; line-height: 2.05; color: #4a5360; margin: 0; }

/* ---- 3つの姿勢（values） ---- */
.clb-values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 768px) { .clb-values { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; } }
.clb-value { background: #fff; border: 1px solid var(--clb-border); border-radius: 6px; padding: 32px 28px; text-align: center; }
.clb-value__num { font-family: var(--clb-en); font-size: 1.6rem; color: var(--clb-blue); display: block; margin-bottom: 12px; }
.clb-value__title { font-family: var(--clb-serif); font-size: 1.12rem; letter-spacing: 0.04em; color: var(--clb-navy); margin: 0 0 12px; font-weight: 600; border: none; padding: 0; background: transparent; }
.clb-value__title::after { display: none; }
.clb-value p { font-size: 0.9rem; line-height: 1.9; color: #4a5360; margin: 0; }

/* ---- 会社概要（page-about） ---- */
.clb-about__philosophy {
  font-family: var(--clb-serif); font-size: clamp(16px, 1.6vw, 20px); line-height: 2;
  letter-spacing: 0.06em; color: var(--clb-navy); text-align: center; margin: 0 0 44px;
}
.clb-about__philosophy p { margin: 0 0 1em; }
.clb-about__philosophy p:last-child { margin-bottom: 0; }
.clb-mv__jp { display: block; font-size: 1.05rem; font-weight: 600; color: var(--clb-navy); margin: 0 0 12px; letter-spacing: 0.06em; }
.clb-about__service { font-size: 0.97rem; line-height: 2; color: #4a5360; }
.clb-about__service img { border-radius: 6px; margin: 1em 0; }
.clb-info { width: 100%; border-collapse: collapse; }
.clb-info th, .clb-info td {
  text-align: left; padding: 16px 16px; font-size: 0.92rem; line-height: 1.8;
  border-bottom: 1px solid var(--clb-border); vertical-align: top;
}
.clb-info tr:first-child th, .clb-info tr:first-child td { border-top: 1px solid var(--clb-border); }
.clb-info th {
  width: 30%; min-width: 110px; background: var(--clb-gray); color: var(--clb-navy);
  font-weight: 600; letter-spacing: 0.04em;
}
.clb-info td { color: #4a5360; }
.clb-info td a { color: var(--clb-blue-deep); text-decoration: none; }
.clb-info td a:hover { text-decoration: underline; }
@media (max-width: 600px) {
  .clb-info, .clb-info tbody, .clb-info tr, .clb-info th, .clb-info td { display: block; width: 100%; }
  .clb-info th { border-bottom: none; padding-bottom: 4px; }
  .clb-info td { padding-top: 4px; }
  .clb-info tr:first-child td { border-top: none; }
}
.clb-about__photo { margin-top: 32px; }
.clb-about__photo img { width: 100%; border-radius: 6px; }

/* ---- ガレージ ---- */
.lst-garage__photo { aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden; }
.lst-garage__photo .placeholder-image { min-height: 100%; }
/* ガレージ限定メニュー：左に写真、右にテキストの横並び */
.clb-menu { list-style: none; margin: 0; padding: 0; }
.clb-menu li { display: grid; grid-template-columns: 260px 1fr; gap: 28px; align-items: center; padding: 24px 4px; border-bottom: 1px solid var(--clb-border); }
.clb-menu li:first-child { border-top: 1px solid var(--clb-border); }
@media (max-width: 700px) { .clb-menu li { grid-template-columns: 1fr; gap: 16px; padding: 20px 0; } }
.clb-menu__thumb { border-radius: 6px; overflow: hidden; background: var(--clb-mist); aspect-ratio: 4 / 3; }
.clb-menu__thumb img { display: block !important; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.clb-menu li:hover .clb-menu__thumb img { transform: scale(1.04); }
.clb-menu__body { display: flex; flex-direction: column; gap: 6px; }
.clb-menu__name { font-family: var(--clb-serif); font-size: 1.08rem; color: var(--clb-navy); font-weight: 600; letter-spacing: 0.04em; }
.clb-menu__desc { font-size: 0.88rem; color: var(--clb-muted); line-height: 1.85; }
.clb-menu__btn { align-self: flex-start; margin-top: 14px; }
.clb-menu__soon { align-self: flex-start; margin-top: 12px; font-size: 0.76rem; letter-spacing: 0.08em; color: var(--clb-muted); border: 1px solid var(--clb-border); border-radius: 3px; padding: 5px 14px; }
/* =========================================================================
   / 下層共通スタイル ここまで
   ========================================================================= */


/* =========================================================================
   施工店（shop）ページ：一覧／地域／個別
   ========================================================================= */

/* ---- 地域ナビ（一覧ページのアンカー） ---- */
.clb-area-nav { margin: 0 0 48px; }
.clb-area-nav ul { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
.clb-area-nav li { flex: 0 0 calc((100% - 30px) / 4); }
@media (max-width: 768px) { .clb-area-nav li { flex: 0 0 calc((100% - 10px) / 2); } }
.clb-area-nav a { display: block; padding: 12px 10px; text-align: center; text-decoration: none; background: var(--clb-mist); color: var(--clb-navy); border-radius: 4px; font-size: 0.9rem; letter-spacing: 0.04em; transition: background 0.3s ease, color 0.3s ease; }
.clb-area-nav a:hover { background: var(--clb-blue); color: #fff; }

/* ---- 地域グループ見出し ---- */
.clb-shop-area { margin: 0 0 56px; scroll-margin-top: 100px; }
.clb-shop-area__title { font-family: var(--clb-serif); font-size: clamp(20px, 2.2vw, 28px); letter-spacing: 0.1em; color: var(--clb-navy); margin: 0 0 28px; padding: 0 0 14px; border-bottom: 2px solid var(--clb-blue); font-weight: 600; }
.clb-shop-area__title::after { display: none; }

/* ---- 施工店カード（一覧・地域） ---- */
.clb-shop-list { display: flex; flex-direction: column; gap: 28px; }
.clb-shop-card { display: grid; grid-template-columns: 300px 1fr; align-items: start; background: #fff; border: 1px solid var(--clb-border); border-radius: 8px; overflow: hidden; }
@media (max-width: 768px) { .clb-shop-card { grid-template-columns: 1fr; } }
.clb-shop-card__photo { aspect-ratio: 4 / 3; background: var(--clb-mist); }
.clb-shop-card__photo a { display: block; width: 100%; height: 100%; }
.clb-shop-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.clb-shop-card__photo .placeholder-image { min-height: 100%; }
.clb-shop-card__body { padding: 26px 30px 30px; }
@media (max-width: 768px) { .clb-shop-card__body { padding: 24px; } }
.clb-shop-card__title { font-family: var(--clb-serif); font-size: 1.3rem; letter-spacing: 0.04em; margin: 0 0 16px; padding: 0 0 12px; border-bottom: 1px solid var(--clb-border); font-weight: 600; }
.clb-shop-card__title::after { display: none; }
.clb-shop-card__title a { color: var(--clb-navy); text-decoration: none; }
.clb-shop-card__title a:hover { color: var(--clb-blue); }
.clb-shop-card__meta { display: grid; grid-template-columns: max-content 1fr; gap: 5px 14px; margin: 0 0 16px; font-size: 0.9rem; }
/* 親テーマの dt（margin-bottom / border-left）を打ち消してから整える */
.clb-shop-card__meta dt,
.clb-shop-card__meta dd { display: block; box-sizing: border-box; margin: 0; padding: 0; border: 0; line-height: 1.6; min-width: 0; }
.clb-shop-card__meta dt { color: var(--clb-blue-deep); font-weight: 600; white-space: nowrap; }
.clb-shop-card__meta dd { color: #4a5360; overflow-wrap: anywhere; }
.clb-shop-card__meta a { color: var(--clb-blue-deep); text-decoration: none; }
.clb-shop-card__info { background: var(--clb-gray); border-radius: 6px; padding: 14px 16px; margin: 0 0 18px; }
.clb-shop-card__info-label { font-family: var(--clb-en); font-size: 0.76rem; letter-spacing: 0.2em; color: var(--clb-blue); display: block; margin-bottom: 6px; }
.clb-shop-card__info p { margin: 0; font-size: 0.86rem; line-height: 1.8; color: #4a5360; }
.clb-shop-card__more { margin: 0; }
.clb-shop-empty { text-align: center; color: var(--clb-muted); padding: 40px 0; }
.clb-shop-back { margin: 0 0 28px; }
.clb-shop-back a { color: var(--clb-blue-deep); text-decoration: none; font-size: 0.92rem; }

/* ---- 個別ページ：基本情報 ---- */
.clb-shop-prof { display: grid; grid-template-columns: 1fr 1.4fr; gap: 40px; align-items: start; }
@media (max-width: 900px) { .clb-shop-prof { grid-template-columns: 1fr; gap: 28px; } }
.clb-shop-prof__photo { border-radius: 8px; overflow: hidden; background: var(--clb-mist); }
.clb-shop-prof__photo img { width: 100%; height: auto; }
.clb-shop-prof__photo .placeholder-image { min-height: 280px; }
.clb-shop-prof__meta { display: grid; grid-template-columns: max-content 1fr; margin: 0 0 22px; font-size: 0.95rem; }
/* 親テーマの dt には margin-bottom と border-left が入っているため、
   まず dt/dd 双方をリセットしてから罫線を引く（左右の罫線が段違いになるのを防ぐ）。 */
.clb-shop-prof__meta dt,
.clb-shop-prof__meta dd {
  display: block; box-sizing: border-box;
  margin: 0; padding: 13px 0; border: 0;
  border-bottom: 1px solid var(--clb-border);
  line-height: 1.8; min-width: 0;
}
.clb-shop-prof__meta dt { padding-right: 24px; color: var(--clb-navy); font-weight: 600; white-space: nowrap; }
.clb-shop-prof__meta dd { color: #4a5360; overflow-wrap: anywhere; }
/* 1行目に上罫線を入れて表として閉じる（ガレージのSTORE INFOと揃える） */
.clb-shop-prof__meta > dt:first-of-type,
.clb-shop-prof__meta > dd:first-of-type { border-top: 1px solid var(--clb-border); }
@media (max-width: 480px) {
  .clb-shop-prof__meta { grid-template-columns: 1fr; }
  .clb-shop-prof__meta dt { padding: 12px 0 2px; border-bottom: 0; }
  .clb-shop-prof__meta dd { padding: 0 0 12px; }
  .clb-shop-prof__meta > dd:first-of-type { border-top: 0; }
}
.clb-shop-prof__meta a { color: var(--clb-blue-deep); text-decoration: none; }
.clb-shop-sns { display: flex; gap: 12px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.clb-shop-sns a { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 1px solid var(--clb-border); border-radius: 50%; color: var(--clb-navy); font-size: 18px; text-decoration: none; transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease; }
.clb-shop-sns a:hover { background: var(--clb-blue); border-color: var(--clb-blue); color: #fff; }

/* ---- SHOP INFO ---- */
.clb-shop-info { margin-top: 36px; background: var(--clb-gray); border-radius: 8px; padding: 28px 32px; }
.clb-shop-info__label { font-family: var(--clb-en); font-size: 0.85rem; letter-spacing: 0.2em; color: var(--clb-blue); display: block; margin-bottom: 12px; }
.clb-shop-info__body { font-size: 0.95rem; line-height: 1.95; color: #4a5360; }

/* ---- 店舗紹介ブロック ---- */
.clb-shop-block { background: #fff; border: 1px solid var(--clb-border); border-radius: 10px; padding: 24px; margin: 0 0 20px; }
.clb-shop-block:last-child { margin-bottom: 0; }
.clb-shop-block__title { font-family: var(--clb-serif); font-size: 1.2rem; color: var(--clb-navy); margin: 0 0 14px; font-weight: 600; border: none; padding: 0; background: transparent; line-height: 1.5; }
.clb-shop-block__title::after { display: none; }
.clb-shop-block__inner { display: flex; flex-direction: column; gap: 14px; }
.clb-shop-block__text { font-size: 0.95rem; line-height: 1.9; color: #4a5360; }
.clb-shop-block__img img { width: 100%; height: auto; border-radius: 8px; display: block; }
@media (min-width: 768px) {
  .clb-shop-block.has-img .clb-shop-block__inner { display: grid; grid-template-columns: 1fr 360px; gap: 20px; align-items: start; }
  .clb-shop-block.has-img .clb-shop-block__img { order: 2; }
  .clb-shop-block.has-img .clb-shop-block__text { order: 1; }
}

/* ---- 設備紹介 ---- */
.clb-shop-equip__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 600px) { .clb-shop-equip__grid { grid-template-columns: repeat(2, 1fr); } }
.clb-shop-equip { background: #fff; border: 1px solid var(--clb-border); border-radius: 10px; padding: 14px; }
.clb-shop-equip__img img { width: 100%; height: auto; border-radius: 8px; display: block; }
.clb-shop-equip__txt { margin: 12px 0 0; font-size: 0.88rem; line-height: 1.7; color: #4a5360; }

/* ---- 主なサービス ---- */
.clb-shop-service__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 768px) { .clb-shop-service__grid { grid-template-columns: 1fr; } }
.clb-shop-service__link { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 18px; border: 1px solid var(--clb-border); border-radius: 8px; background: #fff; text-decoration: none; color: var(--clb-navy); font-weight: 600; transition: border-color 0.3s ease, transform 0.3s ease; }
.clb-shop-service__link:hover { border-color: var(--clb-blue); transform: translateY(-2px); }
.clb-shop-service__link.is-nolink { cursor: default; }
.clb-shop-service__link .fp-ext { color: var(--clb-blue); font-style: normal; font-size: 1.1rem; }

/* ---- 個別ページの地域リンク ---- */
.clb-shop-area-link { display: inline-block; color: var(--clb-blue-deep); text-decoration: none; font-size: 0.92rem; margin: 0 6px; }
.clb-shop-area-link:hover { color: var(--clb-navy); }

/* ---- この施工店の施工事例 ---- */
.clb-case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 768px) { .clb-case-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .clb-case-grid { grid-template-columns: 1fr; } }
.clb-case { display: block; background: #fff; border: 1px solid var(--clb-border); border-radius: 8px; overflow: hidden; text-decoration: none; color: inherit; transition: border-color 0.3s ease, transform 0.3s ease; }
.clb-case:hover { border-color: var(--clb-blue); transform: translateY(-3px); }
.clb-case__thumb { aspect-ratio: 4 / 3; background: var(--clb-mist); overflow: hidden; }
.clb-case__thumb img { width: 100%; height: 100%; object-fit: cover; }
.clb-case__thumb .placeholder-image { min-height: 100%; }
.clb-case__body { padding: 14px 16px 16px; }
.clb-case__title { font-size: 0.92rem; line-height: 1.6; color: var(--clb-navy); font-weight: 600; margin: 0 0 8px; }
.clb-case__date { font-size: 0.78rem; color: var(--clb-muted); margin: 0; text-align: right; }
/* =========================================================================
   / 施工店ページ ここまで
   ========================================================================= */


/* =========================================================================
   お問い合わせフォーム（contact / confirm / thankspage / 管理）
   ========================================================================= */

/* ---- 電話・リード ---- */
.clb-form-tel { text-align: center; background: var(--clb-mist); border-radius: 8px; padding: 24px; margin: 0 0 32px; }
.clb-form-tel__label { font-size: 0.9rem; color: var(--clb-muted); margin: 0 0 6px; letter-spacing: 0.08em; }
.clb-form-tel__num { font-family: var(--clb-en); font-size: clamp(28px, 4vw, 40px); margin: 0 0 4px; }
.clb-form-tel__num a { color: var(--clb-navy); text-decoration: none; letter-spacing: 0.04em; }
.clb-form-tel__hours { font-size: 0.88rem; color: var(--clb-muted); margin: 0; }
.clb-form-lead { font-size: 0.95rem; line-height: 1.9; color: #4a5360; margin: 0 0 28px; }
.clb-form-req-note::before { content: "必須"; display: inline-block; background: var(--clb-blue); color: #fff; font-size: 0.7rem; padding: 2px 8px; border-radius: 3px; margin-right: 6px; }

/* ---- 必須/任意バッジ ---- */
.clb-badge { display: inline-block; font-size: 0.7rem; padding: 3px 8px; border-radius: 3px; margin-right: 8px; vertical-align: middle; letter-spacing: 0.06em; }
.clb-badge--req { background: var(--clb-blue); color: #fff; }
.clb-badge--opt { background: var(--clb-gray); color: var(--clb-muted); border: 1px solid var(--clb-border); }

/* ---- フォーム行 ---- */
.clb-form__row { display: grid; grid-template-columns: 240px 1fr; border-bottom: 1px solid var(--clb-border); }
.clb-form__row:first-of-type { border-top: 1px solid var(--clb-border); }
@media (max-width: 768px) { .clb-form__row { grid-template-columns: 1fr; } }
.clb-form__label { padding: 22px 20px 22px 0; font-weight: 600; color: var(--clb-navy); font-size: 0.95rem; display: flex; align-items: flex-start; flex-wrap: wrap; gap: 4px; }
.clb-form__label small { font-weight: 400; color: var(--clb-muted); font-size: 0.8rem; width: 100%; }
@media (max-width: 768px) { .clb-form__label { padding: 18px 0 6px; } }
.clb-form__field { padding: 18px 0; }
@media (max-width: 768px) { .clb-form__field { padding: 0 0 18px; } }
.clb-form__field input[type="text"], .clb-form__field input[type="email"], .clb-form__field input[type="tel"], .clb-form__field textarea {
  width: 100%; max-width: 440px; padding: 12px 14px; border: 1px solid var(--clb-border); border-radius: 5px; font-size: 1rem; font-family: inherit; background: #fff; color: var(--clb-charcoal); box-sizing: border-box;
}
.clb-form__field textarea { max-width: 100%; line-height: 1.7; }
.clb-form__field input:focus, .clb-form__field textarea:focus { outline: none; border-color: var(--clb-blue); box-shadow: 0 0 0 3px rgba(91,112,136,0.15); }
.clb-form__choice { display: block; padding: 6px 0; font-size: 0.95rem; color: #3c4654; cursor: pointer; }
.clb-form__choice input { margin-right: 8px; }
.clb-form__submit { text-align: center; margin: 36px 0 0; }
.clb-form__submit .fp-btn { border: none; cursor: pointer; font-family: inherit; }

/* ---- 確認テーブル ---- */
.clb-confirm { width: 100%; border-collapse: collapse; margin: 0 0 32px; }
.clb-confirm th, .clb-confirm td { text-align: left; padding: 16px; border-bottom: 1px solid var(--clb-border); font-size: 0.95rem; vertical-align: top; }
.clb-confirm tr:first-child th, .clb-confirm tr:first-child td { border-top: 1px solid var(--clb-border); }
.clb-confirm th { width: 34%; background: var(--clb-gray); color: var(--clb-navy); font-weight: 600; white-space: nowrap; }
.clb-confirm td { color: #4a5360; }
@media (max-width: 600px) { .clb-confirm, .clb-confirm tbody, .clb-confirm tr, .clb-confirm th, .clb-confirm td { display: block; width: 100%; } .clb-confirm th { border-bottom: none; } }
.clb-confirm__btns { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
.clb-confirm__btns .fp-btn { border: none; cursor: pointer; font-family: inherit; }
.clb-confirm__btns .fp-btn--outline { border: 1px solid var(--clb-blue); }

/* ---- エラー ---- */
.clb-form-error { background: #fdf2f2; border: 1px solid #e7b8b8; border-radius: 8px; padding: 22px 26px; margin: 0 0 28px; }
.clb-form-error__head { font-weight: 600; color: #a8332f; margin: 0 0 10px; }
.clb-form-error ul { margin: 0; padding-left: 1.2em; }
.clb-form-error li { color: #a8332f; font-size: 0.92rem; line-height: 1.8; }

/* ---- 完了 ---- */
.clb-thanks { text-align: center; }
.clb-thanks p { line-height: 1.95; color: #4a5360; margin: 0 0 16px; }
.clb-thanks__note { font-size: 0.86rem; color: var(--clb-muted); }
.clb-thanks__note a { color: var(--clb-blue-deep); }
.clb-thanks__home { margin-top: 28px; }

/* ---- 管理画面 ---- */
.clb-admin__notice { background: var(--clb-mist); border-left: 4px solid var(--clb-blue); padding: 12px 16px; margin: 0 0 20px; font-size: 0.9rem; color: var(--clb-navy); border-radius: 0 4px 4px 0; }
.clb-admin__bar { margin: 0 0 16px; }
.clb-admin__count { font-size: 1rem; color: var(--clb-charcoal); }
.clb-admin__history { background: var(--clb-gray); border-radius: 8px; padding: 16px 20px; margin: 0 0 24px; }
.clb-admin__history-head { font-weight: 600; color: var(--clb-navy); margin: 0 0 8px; font-size: 0.9rem; }
.clb-admin__history ul { display: flex; flex-wrap: wrap; gap: 8px 18px; list-style: none; margin: 0; padding: 0; font-size: 0.88rem; }
.clb-admin__history a { color: var(--clb-blue-deep); text-decoration: none; }
.clb-admin__history a.is-current { font-weight: 700; color: var(--clb-navy); text-decoration: underline; }
.clb-admin__tablewrap { overflow-x: auto; }
.clb-admin__table { width: 100%; border-collapse: collapse; font-size: 0.86rem; background: #fff; }
.clb-admin__table th, .clb-admin__table td { border: 1px solid var(--clb-border); padding: 10px 12px; text-align: left; vertical-align: top; }
.clb-admin__table thead th { background: var(--clb-navy); color: #fff; white-space: nowrap; font-weight: 600; }
.clb-admin__sub { color: var(--clb-muted); font-size: 0.8rem; }
.clb-admin__q { min-width: 200px; line-height: 1.6; }
.clb-admin__meta td { background: var(--clb-gray); color: var(--clb-muted); font-size: 0.78rem; word-break: break-all; }
.clb-admin__sit { display: flex; gap: 6px; align-items: center; }
.clb-admin__sit select { padding: 6px 8px; border: 1px solid var(--clb-border); border-radius: 4px; font-size: 0.82rem; }
.clb-admin__btn { padding: 6px 12px; border: 1px solid var(--clb-blue); background: #fff; color: var(--clb-blue-deep); border-radius: 4px; cursor: pointer; font-size: 0.82rem; white-space: nowrap; }
.clb-admin__btn:hover { background: var(--clb-blue); color: #fff; }
.clb-admin__btn--del { border-color: #c98b8b; color: #a8332f; }
.clb-admin__btn--del:hover { background: #a8332f; border-color: #a8332f; color: #fff; }
/* =========================================================================
   / お問い合わせフォーム ここまで
   ========================================================================= */


/* =========================================================================
   SWISSVAX ページ（4つのメリット／料金表）
   ========================================================================= */

/* ---- 写真スロット（未設置時は下地色＋薄ラベル） ---- */
.sv-photo { position: relative; width: 100%; border-radius: 6px; background-color: #e6ebf1; background-size: cover; background-position: center; background-repeat: no-repeat; overflow: hidden; }
.sv-photo--product { aspect-ratio: 16 / 10; }
.sv-photo--tool { aspect-ratio: 4 / 3; }
.sv-photo__hint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--clb-en); font-size: 0.85rem; letter-spacing: 0.24em; color: rgba(91,112,136,0.55); pointer-events: none; }
.sv-photo[style*="url"] .sv-photo__hint { display: none; } /* 画像指定があればラベル非表示（未設置=404でも背景色は残る） */

/* ---- 4つの具体的メリット ---- */
.clb-merit__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 768px) { .clb-merit__grid { grid-template-columns: 1fr; } }
.clb-merit { background: #fff; border: 1px solid var(--clb-border); border-radius: 8px; padding: 30px 30px 26px; }
.clb-merit--photo { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.clb-merit__photo { aspect-ratio: 16 / 8; background-color: #e6ebf1; background-size: cover; background-position: center; background-repeat: no-repeat; }
.clb-merit__body { padding: 26px 30px 26px; }
.clb-merit__num { font-family: var(--clb-en); font-size: 1.6rem; letter-spacing: 0.08em; color: var(--clb-blue); display: block; margin-bottom: 8px; }
.clb-merit__title { font-family: var(--clb-serif); font-size: 1.2rem; letter-spacing: 0.04em; color: var(--clb-navy); margin: 0 0 16px; font-weight: 600; line-height: 1.5; border: none; padding: 0 0 14px; background: transparent; border-bottom: 1px solid var(--clb-border); }
.clb-merit__title::after { display: none; }
.clb-merit__list { list-style: none; margin: 0; padding: 0; }
.clb-merit__list li { position: relative; padding: 6px 0 6px 20px; font-size: 0.92rem; line-height: 1.8; color: #4a5360; }
.clb-merit__list li::before { content: ""; position: absolute; left: 0; top: 0.95em; width: 8px; height: 8px; border-radius: 50%; background: var(--clb-blue); }
.clb-merit__note { max-width: 760px; margin: 42px auto 0; text-align: center; font-size: 0.95rem; line-height: 2; color: #4a5360; }

/* ---- 料金表 ---- */
.clb-price__head { font-size: 1.05rem; color: var(--clb-navy); font-weight: 600; margin: 34px 0 14px; letter-spacing: 0.04em; }
.clb-price__head:first-of-type { margin-top: 0; }
.clb-price-wrap { overflow-x: auto; margin: 0 0 8px; }
.clb-price { width: 100%; border-collapse: collapse; font-size: 0.9rem; background: #fff; min-width: 620px; }
.clb-price th, .clb-price td { border: 1px solid var(--clb-border); padding: 12px 14px; text-align: center; white-space: nowrap; }
.clb-price thead th { background: var(--clb-navy); color: #fff; font-weight: 600; }
.clb-price th.clb-price__plan { text-align: left; }
.clb-price tbody th.clb-price__plan { background: var(--clb-gray); color: var(--clb-navy); font-weight: 600; }
.clb-price__plan small { display: block; font-weight: 400; font-size: 0.76rem; color: var(--clb-muted); margin-top: 3px; white-space: normal; }
.clb-price td { color: var(--clb-charcoal); }
.clb-price__note { font-size: 0.82rem; color: var(--clb-muted); line-height: 1.9; margin: 14px 0 0; }

/* ---- BEFORE / AFTER ---- */
.sv-ba { display: grid; grid-template-columns: 1fr 44px 1fr; gap: 16px; align-items: center; max-width: 960px; margin: 0 auto; }
@media (max-width: 700px) { .sv-ba { grid-template-columns: 1fr; gap: 8px; } }
.sv-ba__item { margin: 0; }
.sv-ba__img { position: relative; aspect-ratio: 4 / 3; border-radius: 8px; background-color: #e6ebf1; background-size: cover; background-position: center; background-repeat: no-repeat; overflow: hidden; }
.sv-ba__label { position: absolute; top: 12px; left: 12px; font-family: var(--clb-en); font-size: 0.74rem; letter-spacing: 0.2em; padding: 5px 14px; border-radius: 20px; color: #fff; }
.sv-ba__label--before { background: rgba(43,49,58,0.85); }
.sv-ba__label--after { background: var(--clb-blue); }
.sv-ba__cap { margin: 10px 4px 0; font-size: 0.86rem; color: var(--clb-muted); line-height: 1.7; }
.sv-ba__arrow { width: 44px; height: 44px; margin: 0 auto; position: relative; }
.sv-ba__arrow::before { content: ""; position: absolute; top: 50%; left: 50%; width: 14px; height: 14px; border-top: 3px solid var(--clb-blue); border-right: 3px solid var(--clb-blue); transform: translate(-70%, -50%) rotate(45deg); }
@media (max-width: 700px) { .sv-ba__arrow { height: 30px; } .sv-ba__arrow::before { transform: translate(-50%, -70%) rotate(135deg); } }

/* ---- 施工の様子ギャラリー ---- */
.sv-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 768px) { .sv-gallery { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; } }
.sv-gallery__item { margin: 0; background: #fff; border: 1px solid var(--clb-border); border-radius: 8px; overflow: hidden; }
.sv-gallery__img { aspect-ratio: 4 / 3; background-color: #e6ebf1; background-size: cover; background-position: center; background-repeat: no-repeat; }
.sv-gallery__item figcaption { display: flex; align-items: baseline; gap: 10px; padding: 14px 18px 16px; font-size: 0.9rem; color: var(--clb-charcoal); line-height: 1.6; }
.sv-gallery__item figcaption span { font-family: var(--clb-en); font-size: 1.1rem; color: var(--clb-blue); letter-spacing: 0.08em; flex-shrink: 0; }

/* ---- 作業工程：動画 ---- */
.sv-video { max-width: 960px; margin: 0 auto 34px; }
.sv-video__el { width: 100%; height: auto; display: block; border-radius: 10px; background: #0d1420; box-shadow: 0 12px 32px rgba(14,20,32,0.16); }
.sv-video__cap { text-align: center; font-size: 0.9rem; color: var(--clb-muted); margin: 12px 0 0; }

/* ---- 作業工程：工程写真（施工後はプレースホルダ） ---- */
.sv-work { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 768px) { .sv-work { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; } }
.sv-work__item { margin: 0; background: #fff; border: 1px solid var(--clb-border); border-radius: 8px; overflow: hidden; }
.sv-work__img { aspect-ratio: 16 / 10; background-color: #e6ebf1; background-size: cover; background-position: center; background-repeat: no-repeat; }
.sv-work__img--coming { display: flex; align-items: center; justify-content: center; background-image: linear-gradient(135deg, #e6ebf1, #d3dce6); }
.sv-work__coming { font-family: var(--clb-en); font-size: 0.82rem; letter-spacing: 0.14em; color: #8a97a6; text-align: center; line-height: 1.8; }
.sv-work__item figcaption { display: flex; align-items: baseline; gap: 10px; padding: 14px 18px 16px; font-size: 0.9rem; color: var(--clb-charcoal); line-height: 1.6; }
.sv-work__item figcaption span { font-family: var(--clb-en); font-size: 1.1rem; color: var(--clb-blue); letter-spacing: 0.08em; flex-shrink: 0; }
/* =========================================================================
   / SWISSVAX ページ ここまで
   ========================================================================= */


/* =========================================================================
   コーティングトップ 追加セクション（性能ハニカム／2層構造／エビデンス）
   ========================================================================= */

/* 各セクション共通のリード文 */
.lst-perf__lead { max-width: 800px; margin: 0 auto 42px; text-align: center; font-size: 0.97rem; line-height: 2.05; color: #4a5360; }
@media (max-width: 600px) { .lst-perf__lead { text-align: left; margin-bottom: 30px; } }

/* ---- 7つの性能（ハニカム） ---- */
/* 4個＋3個の2段。下段を上段の谷にはめ込んで蜂の巣状に密着させる */
.lst-hex {
  --hex-w: 210px;                          /* 六角形の幅 */
  --hex-h: calc(var(--hex-w) * 1.1);       /* 高さ（aspect-ratio 1/1.1 と一致させる） */
  list-style: none; margin: 0 auto; padding: 0; max-width: 860px;
  display: flex; flex-wrap: wrap; justify-content: center;
  column-gap: 0;                           /* 横は密着（下段の半個ズレもこれで正確に揃う） */
  row-gap: 0;
}
.lst-hex__item { flex: 0 0 var(--hex-w); aspect-ratio: 1 / 1.1; }
/* 下段（5個目以降）を尖り分（高さの25%）だけ引き上げる。+10px 分は噛み合わせを浅くした隙間 */
.lst-hex__item:nth-child(n+5) { margin-top: calc(var(--hex-h) * -0.25 + 10px); }
.lst-hex__inner {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 100%; height: 100%; padding: 22px 26px; text-align: center;
  background: linear-gradient(160deg, #ffffff, #eef2f6);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.lst-hex__title { font-family: var(--clb-serif); font-size: 1.12rem; font-weight: 600; color: var(--clb-navy); letter-spacing: 0.06em; margin-bottom: 8px; }
.lst-hex__text { font-size: 0.76rem; line-height: 1.72; color: #57616e; }
/* 4個並ばない幅（840px＋コンテナ余白48px＝888px 未満）では通常カードに切り替え */
@media (max-width: 900px) {
  .lst-hex { column-gap: 10px; row-gap: 10px; }
  .lst-hex__item { flex: 1 1 100%; aspect-ratio: auto; }
  .lst-hex__item:nth-child(n+5) { margin-top: 0; }
  .lst-hex__inner { clip-path: none; border: 1px solid var(--clb-border); border-radius: 8px; padding: 18px 20px; }
  .lst-hex__text { font-size: 0.84rem; }
}

/* ---- 2層構造 ---- */
/* PC：左に断面イメージ図、右に各層の説明の2カラム */
.lst-layer__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 44px; align-items: center; max-width: 1080px; margin: 0 auto; }
@media (max-width: 900px) { .lst-layer__grid { grid-template-columns: 1fr; gap: 30px; } }
/* 断面イメージ図（ラベル入りの画像。枠線・背景は付けない） */
.lst-xsec { margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
/* 親テーマ側の img { display: inline !important } を打ち消すため !important が必要 */
.lst-xsec img { display: block !important; width: 100%; height: auto; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
/* 各層の説明（右カラムに縦積み） */
.lst-layer__list { list-style: none; margin: 0; padding: 0; }
.lst-layer__item { padding: 20px 0; border-top: 1px solid var(--clb-border); }
.lst-layer__item:first-child { border-top: none; padding-top: 0; }
.lst-layer__item:last-child { padding-bottom: 0; }
/* 数字＋和文が混在するバッジ。セリフ体の旧式数字は digit が小さく沈むためサンス体で揃える */
.lst-layer__num { display: inline-block; font-family: var(--clb-sans); font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum" 1, "tnum" 1; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; color: #fff; background: var(--clb-blue); padding: 5px 13px; border-radius: 3px; margin-bottom: 10px; }
.lst-layer__title { font-family: var(--clb-serif); font-size: 1.14rem; color: var(--clb-navy); font-weight: 600; letter-spacing: 0.05em; margin: 0 0 10px; border: none; padding: 0; background: transparent; }
.lst-layer__title::after { display: none; }
.lst-layer__text { font-size: 0.92rem; line-height: 1.95; color: #4a5360; margin: 0; }

/* ---- エビデンス ---- */
.lst-evi-point { list-style: none; margin: 0 auto 44px; padding: 0; max-width: 940px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 780px) { .lst-evi-point { grid-template-columns: 1fr; gap: 12px; } }
.lst-evi-point li { background: #fff; border: 1px solid var(--clb-border); border-top: 3px solid var(--clb-blue); border-radius: 6px; padding: 22px 20px; text-align: center; }
.lst-evi-point__label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--clb-navy); line-height: 1.6; min-height: 2.6em; }
/* 数値は本文サンス体＋等幅・ライニング数字で（セリフ体の旧式数字は桁高が不揃いで読みにくいため） */
.lst-evi-point__value { display: block; font-family: var(--clb-sans); font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum" 1, "tnum" 1; font-size: 2.3rem; line-height: 1.15; color: var(--clb-blue); font-weight: 700; letter-spacing: 0.01em; margin: 8px 0 10px; }
.lst-evi-point__value small { font-size: 1rem; font-weight: 600; letter-spacing: 0.02em; margin-left: 1px; }
/* 数値ではない値（例：1液1回）用 */
.lst-evi-point__value--text { font-size: 1.7rem; letter-spacing: 0.04em; }
.lst-evi-point__note { display: block; font-size: 0.74rem; color: var(--clb-muted); line-height: 1.6; }
@media (max-width: 780px) { .lst-evi-point__label { min-height: 0; } }
/* エビデンス表（料金表スタイルを流用、横幅の下限だけ緩める） */
.lst-evi-table { min-width: 460px; }
.lst-evi-table tbody td { font-family: var(--clb-sans); font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum" 1, "tnum" 1; font-size: 1.1rem; color: var(--clb-navy); font-weight: 700; letter-spacing: 0.01em; }
.clb-price__head small { font-weight: 400; font-size: 0.78rem; color: var(--clb-muted); margin-left: 10px; letter-spacing: 0.04em; }



/* ---- スイスバックス 施工後ギャラリー ---- */
.sv-after { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; max-width: 1060px; margin: 0 auto; }
@media (max-width: 860px) { .sv-after { grid-template-columns: 1fr; gap: 18px; max-width: 560px; } }
.sv-after__item { margin: 0; }
.sv-after__item img { display: block !important; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; }
.sv-after__item figcaption { margin-top: 12px; font-size: 0.84rem; line-height: 1.75; color: var(--clb-muted); text-align: center; }

/* ガレージ店舗写真 */
.lst-garage__photo img { display: block !important; width: 100%; height: 100%; object-fit: cover; }



/* ---- 管理画面：メール設定の診断パネル ---- */
.clb-diag { background: #fff; border: 1px solid var(--clb-border); border-radius: 8px; padding: 22px 24px; margin: 0 0 26px; }
.clb-diag__head { font-family: var(--clb-serif); font-size: 1rem; font-weight: 600; color: var(--clb-navy); margin: 0 0 14px; letter-spacing: 0.04em; }
.clb-diag__table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.clb-diag__table th, .clb-diag__table td { border-top: 1px solid var(--clb-border); padding: 11px 8px; text-align: left; vertical-align: top; line-height: 1.7; }
.clb-diag__table tr:first-child th, .clb-diag__table tr:first-child td { border-top: 0; }
.clb-diag__table th { width: 32%; color: var(--clb-navy); font-weight: 600; }
.clb-diag__table td { color: #4a5360; }
.clb-diag__table small { display: inline-block; font-size: 0.78rem; line-height: 1.7; }
.clb-diag__table code { font-size: 0.78rem; background: var(--clb-mist); border-radius: 3px; padding: 2px 6px; word-break: break-all; }
.clb-diag .is-ok { color: #2f7a45; }
.clb-diag .is-ng { color: #b04a4a; }
.clb-diag__result { margin: 16px 0 0; padding: 12px 16px; border-radius: 5px; font-size: 0.88rem; line-height: 1.8; }
.clb-diag__result.is-ok { background: #f0f7f2; border-left: 3px solid #2f7a45; color: #2f5a3a; }
.clb-diag__result.is-ng { background: #fdf3f3; border-left: 3px solid #b04a4a; color: #7a3a3a; }
.clb-diag__form { margin: 18px 0 0; }

/* =========================================================================
   お問い合わせ 窓口選択（/contact/）
   ========================================================================= */
.clb-contact-gate { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; max-width: 960px; margin: 0 auto; }
@media (max-width: 760px) { .clb-contact-gate { grid-template-columns: 1fr; gap: 18px; max-width: 480px; } }
.clb-contact-gate__card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--clb-border); border-top: 3px solid var(--clb-blue); border-radius: 8px; padding: 32px 30px; text-decoration: none; transition: transform .3s ease, box-shadow .3s ease; }
.clb-contact-gate__card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(20,30,45,0.1); }
.clb-contact-gate__en { font-family: var(--clb-en); font-size: 0.74rem; letter-spacing: 0.22em; color: var(--clb-blue); font-weight: 600; margin-bottom: 8px; }
.clb-contact-gate__title { font-family: var(--clb-serif); font-size: 1.22rem; color: var(--clb-navy); font-weight: 600; letter-spacing: 0.05em; margin-bottom: 14px; line-height: 1.5; }
.clb-contact-gate__desc { font-size: 0.9rem; line-height: 1.9; color: #4a5360; margin-bottom: 16px; }
.clb-contact-gate__list { list-style: none; margin: 0 0 22px; padding: 0; flex: 1; }
.clb-contact-gate__list li { position: relative; padding: 5px 0 5px 20px; font-size: 0.84rem; line-height: 1.7; color: #57616e; }
.clb-contact-gate__list li::before { content: ""; position: absolute; left: 4px; top: 1.05em; width: 7px; height: 7px; border-radius: 50%; background: var(--clb-blue); }
.clb-contact-gate__btn { align-self: stretch; text-align: center; background: var(--clb-navy); color: #fff; border-radius: 4px; padding: 13px 18px; font-size: 0.9rem; letter-spacing: 0.05em; font-weight: 600; }
.clb-contact-gate__card:hover .clb-contact-gate__btn { background: var(--clb-blue); }
/* フォーム上部の切り替えリンク */
.clb-form-switch { text-align: right; margin: 0 0 18px; font-size: 0.86rem; }
.clb-form-switch a { color: var(--clb-blue); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }


/* =========================================================================
   フッター：グループ・関連サイトバナー
   ========================================================================= */
.clb-footer__group { padding: 34px 0 6px; border-top: 1px solid rgba(255,255,255,0.14); margin-top: 38px; }
.clb-group__list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 700px) { .clb-group__list { grid-template-columns: 1fr; gap: 12px; } }
.clb-group__item { display: grid; grid-template-columns: 120px 1fr; gap: 16px; align-items: center; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.14); border-radius: 6px; padding: 14px; text-decoration: none; transition: background .3s ease, border-color .3s ease; }
a.clb-group__item:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.32); }
.clb-group__thumb { border-radius: 4px; overflow: hidden; aspect-ratio: 4 / 3; background: rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center; }
.clb-group__thumb img { display: block !important; width: 100%; height: 100%; object-fit: cover; }
.clb-group__ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 8px; text-align: center; font-size: 0.66rem; color: rgba(255,255,255,0.55); line-height: 1.5; }
.clb-group__ph em { font-style: normal; font-size: 0.58rem; color: rgba(255,255,255,0.4); word-break: break-all; }
.clb-group__body { display: flex; flex-direction: column; gap: 4px; }
.clb-group__en { font-family: var(--clb-en); font-size: 0.66rem; letter-spacing: 0.18em; color: rgba(255,255,255,0.6); }
.clb-group__name { font-size: 0.92rem; font-weight: 600; color: #fff; letter-spacing: 0.03em; }
.clb-group__desc { font-size: 0.74rem; line-height: 1.7; color: rgba(255,255,255,0.7); }
.clb-group__soon { align-self: flex-start; margin-top: 4px; font-size: 0.66rem; letter-spacing: 0.06em; color: rgba(255,255,255,0.6); border: 1px solid rgba(255,255,255,0.24); border-radius: 3px; padding: 3px 10px; }


/* =========================================================================
   CLBブランド体系（コンセプトページ内）
   ========================================================================= */
.clb-brand__lead { max-width: 860px; margin: 0 auto 44px; text-align: center; font-size: 1rem; line-height: 2.1; color: #4a5360; }
.clb-brand__lead strong { color: var(--clb-navy); font-weight: 600; }
@media (max-width: 600px) { .clb-brand__lead { text-align: left; margin-bottom: 32px; font-size: 0.94rem; } .clb-brand__lead br { display: none; } }

/* ---- 階層フロー ---- */
.clb-tier { max-width: 900px; margin: 0 auto; }

/* 各段のボックス */
.clb-tier__box { display: grid; grid-template-columns: 168px 1fr; background: #fff; border: 1px solid var(--clb-border); border-radius: 10px; overflow: hidden; }
@media (max-width: 700px) { .clb-tier__box { grid-template-columns: 1fr; } }

/* 左の見出し帯（STEP番号＋役割） */
.clb-tier__label { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 26px 16px; background: var(--clb-mist); font-family: var(--clb-serif); font-size: 1rem; font-weight: 600; color: var(--clb-navy); letter-spacing: 0.06em; text-align: center; line-height: 1.5; }
.clb-tier__label span { font-family: var(--clb-sans); font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum" 1, "tnum" 1; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; color: #fff; background: var(--clb-blue); border-radius: 3px; padding: 4px 12px; }
@media (max-width: 700px) { .clb-tier__label { flex-direction: row; justify-content: flex-start; padding: 16px 20px; } }
/* 1段目は濃紺で「頂点」を明示 */
.clb-tier__box--head .clb-tier__label { background: var(--clb-navy); color: #fff; }
.clb-tier__box--head .clb-tier__label span { background: rgba(255,255,255,0.2); }
/* 3段目はお客様＝ゴール */
.clb-tier__box--customer { border-color: var(--clb-blue); }
.clb-tier__box--customer .clb-tier__label { background: var(--clb-blue); color: #fff; }
.clb-tier__box--customer .clb-tier__label span { background: rgba(255,255,255,0.22); }

/* 右の内容 */
.clb-tier__body { padding: 26px 30px; }
@media (max-width: 700px) { .clb-tier__body { padding: 20px 20px 24px; } }
.clb-tier__name { font-family: var(--clb-serif); font-size: 1.2rem; color: var(--clb-navy); font-weight: 600; letter-spacing: 0.06em; margin: 0 0 10px; line-height: 1.5; }
.clb-tier__name small { display: block; font-family: var(--clb-sans); font-size: 0.76rem; font-weight: 400; color: var(--clb-muted); letter-spacing: 0.04em; margin-top: 4px; }
.clb-tier__desc { font-size: 0.92rem; line-height: 1.95; color: #4a5360; margin: 0; }

/* 本部の担当領域タグ */
.clb-tier__tags { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.clb-tier__tags li { font-size: 0.78rem; letter-spacing: 0.03em; color: var(--clb-navy); background: var(--clb-mist); border-radius: 3px; padding: 6px 12px; }

/* 段の間の矢印＋そこで何が流れるかのラベル */
.clb-tier__arrow { position: relative; height: 74px; display: flex; align-items: center; justify-content: center; }
.clb-tier__arrow::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: var(--clb-border); transform: translateX(-50%); }
.clb-tier__arrow::after { content: ""; position: absolute; bottom: 0; left: 50%; width: 10px; height: 10px; border-right: 2px solid var(--clb-blue); border-bottom: 2px solid var(--clb-blue); transform: translate(-50%, 1px) rotate(45deg); }
.clb-tier__arrow-text { position: relative; z-index: 2; background: var(--clb-gray); border: 1px solid var(--clb-border); border-radius: 20px; padding: 7px 18px; font-size: 0.82rem; letter-spacing: 0.04em; color: var(--clb-blue); font-weight: 600; }
@media (max-width: 600px) { .clb-tier__arrow { height: 66px; } .clb-tier__arrow-text { font-size: 0.74rem; padding: 6px 14px; } }

/* 3拠点（STEP2の中に入れ子＝同じ階層であることを示す） */
.clb-tier__shops { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 20px; }
@media (max-width: 780px) { .clb-tier__shops { grid-template-columns: 1fr; } }
.clb-shop { position: relative; display: flex; flex-direction: column; gap: 5px; background: var(--clb-gray); border: 1px solid var(--clb-border); border-top: 3px solid var(--clb-blue); border-radius: 6px; padding: 30px 16px 16px; }
.clb-shop--partner { border-top-color: #5b7794; }
.clb-shop--base { border-top-color: #8a9bad; }
/* 「直営／パートナー／ベース」を最も目立たせて取り違えを防ぐ */
.clb-shop__badge { position: absolute; top: -1px; left: 16px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; color: #fff; background: var(--clb-blue); border-radius: 0 0 4px 4px; padding: 3px 10px; }
.clb-shop--partner .clb-shop__badge { background: #5b7794; }
.clb-shop--base .clb-shop__badge { background: #8a9bad; }
.clb-shop__en { font-family: var(--clb-en); font-size: 0.94rem; letter-spacing: 0.1em; color: var(--clb-navy); font-weight: 600; }
.clb-shop__role { font-size: 0.8rem; font-weight: 600; color: var(--clb-blue); letter-spacing: 0.03em; }
.clb-shop__text { font-size: 0.78rem; line-height: 1.8; color: #57616e; }

/* お客様のメリット */
.clb-tier__merit { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.clb-tier__merit li { position: relative; padding: 0 0 0 26px; font-size: 0.86rem; line-height: 1.85; color: #4a5360; }
.clb-tier__merit li::before { content: ""; position: absolute; left: 4px; top: 0.7em; width: 8px; height: 8px; border-radius: 50%; background: var(--clb-blue); }
.clb-tier__merit strong { display: block; font-size: 0.94rem; color: var(--clb-navy); font-weight: 600; letter-spacing: 0.03em; margin-bottom: 2px; }

/* フィードバックの戻り */
.clb-tier__feedback { position: relative; margin-top: 26px; background: var(--clb-mist); border: 1px dashed #a9b6c4; border-radius: 8px; padding: 22px 26px 22px 58px; }
@media (max-width: 600px) { .clb-tier__feedback { padding: 20px 18px 20px 44px; } }
.clb-tier__feedback-arrow { position: absolute; left: 24px; top: 24px; width: 2px; height: 26px; background: #8a9bad; }
.clb-tier__feedback-arrow::after { content: ""; position: absolute; top: 0; left: 50%; width: 9px; height: 9px; border-left: 2px solid #8a9bad; border-top: 2px solid #8a9bad; transform: translate(-50%, -1px) rotate(45deg); }
@media (max-width: 600px) { .clb-tier__feedback-arrow { left: 18px; } }
.clb-tier__feedback p { font-size: 0.88rem; line-height: 1.95; color: #4a5360; margin: 0; }
.clb-tier__feedback strong { color: var(--clb-navy); font-weight: 600; }

.clb-brand__outro { max-width: 900px; margin: 40px auto 0; text-align: center; font-family: var(--clb-serif); font-size: 1rem; line-height: 2; color: var(--clb-navy); letter-spacing: 0.04em; }
@media (max-width: 600px) { .clb-brand__outro { text-align: left; font-size: 0.92rem; } .clb-brand__br { display: none; } }



/* =========================================================================
   会社概要：本社・関連企業（RELATED SITES）
   ========================================================================= */
.clb-related__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; max-width: 980px; margin: 0 auto; }
@media (max-width: 780px) { .clb-related__grid { grid-template-columns: 1fr; gap: 16px; } }
.clb-related__item { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--clb-border); border-top: 3px solid #8a9bad; border-radius: 8px; overflow: hidden; text-decoration: none; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
/* サムネイル */
.clb-related__thumb { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--clb-mist); }
.clb-related__thumb img { display: block !important; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.clb-related__item:hover .clb-related__thumb img { transform: scale(1.04); }
.clb-related__ph { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 12px; text-align: center; font-size: 0.8rem; line-height: 1.6; color: #8a97a6; background: linear-gradient(135deg, #eef2f6, #dfe6ee); }
/* 本文まわり：内側の余白はラッパーの padding で一括指定する。
   各要素に margin-left を配ると、後続の margin 一括指定に上書きされて崩れるため。 */
.clb-related__body { display: flex; flex-direction: column; flex: 1; padding: 22px 26px 24px; }
.clb-related__item:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(20,30,45,0.1); border-color: var(--clb-blue); }
.clb-related__item--main { border-top-color: var(--clb-blue); background: var(--clb-mist); }
.clb-related__en { font-family: var(--clb-en); font-size: 0.72rem; letter-spacing: 0.2em; color: var(--clb-blue); font-weight: 600; margin-bottom: 8px; }
.clb-related__name { font-family: var(--clb-serif); font-size: 1.18rem; color: var(--clb-navy); font-weight: 600; letter-spacing: 0.04em; line-height: 1.5; }
.clb-related__sub { font-size: 0.76rem; color: var(--clb-muted); letter-spacing: 0.03em; margin: 5px 0 14px; }
.clb-related__desc { font-size: 0.88rem; line-height: 1.95; color: #4a5360; flex: 1; margin-bottom: 18px; }
/* 文字と矢印を同じ行ボックスで中央揃えにする（高さのズレ防止） */
.clb-related__more { align-self: flex-start; margin: 0; display: inline-flex; align-items: center; gap: 8px; font-size: 0.82rem; letter-spacing: 0.05em; color: var(--clb-blue); border-bottom: 1px solid currentColor; padding-bottom: 4px; }
.clb-related__more::after { content: ""; flex: none; width: 6px; height: 6px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); position: relative; left: -1px; }

/* =========================================================================
   オプションコーティング（/garage/option/ ＋ 各詳細ページ）
   ========================================================================= */

/* ---- 画像枠／未設置時のプレースホルダー ---- */
.opt-photo { position: relative; overflow: hidden; border-radius: 8px; background: var(--clb-mist); }
.opt-photo img { display: block !important; width: 100%; height: 100%; object-fit: cover; }
.opt-photo--empty { background: linear-gradient(135deg, #eef2f6 0%, #dfe6ee 50%, #eef2f6 100%); }
.opt-photo__ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 18px; text-align: center; }
.opt-photo__ph em { font-style: normal; font-family: var(--clb-en); font-size: 0.78rem; letter-spacing: 0.2em; color: var(--clb-blue); }
.opt-photo__ph code { font-size: 0.7rem; color: #6c7682; background: rgba(255,255,255,0.7); border-radius: 3px; padding: 3px 8px; word-break: break-all; }
.opt-photo__ph i { font-style: normal; font-size: 0.72rem; line-height: 1.6; color: #7a8592; max-width: 30em; }
/* 各アスペクト比 */
.opt-photo { aspect-ratio: 4 / 3; }
.opt-photo--hero { aspect-ratio: auto; height: 100%; border-radius: 0; }
.opt-photo--thumb { aspect-ratio: 4 / 3; border-radius: 0; }

/* ---- ヒーロー ---- */
.opt-hero { position: relative; min-height: 420px; display: flex; align-items: flex-end; background: var(--clb-navy); overflow: hidden; }
@media (max-width: 700px) { .opt-hero { min-height: 320px; } }
.opt-hero__media { position: absolute; inset: 0; }
.opt-hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,30,45,0.25) 0%, rgba(20,30,45,0.55) 55%, rgba(20,30,45,0.82) 100%); }
.opt-hero__inner { position: relative; z-index: 2; padding-top: 90px; padding-bottom: 48px; color: #fff; }
.opt-hero__crumb { font-size: 0.8rem; letter-spacing: 0.06em; margin: 0 0 16px; }
.opt-hero__crumb a { color: rgba(255,255,255,0.82); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.35); padding-bottom: 2px; }
.opt-hero__crumb a:hover { color: #fff; }
.opt-hero__en { font-family: var(--clb-en); font-size: 0.86rem; letter-spacing: 0.28em; color: rgba(255,255,255,0.85); margin: 0 0 10px; font-weight: 600; }
.opt-hero__title { font-family: var(--clb-serif); font-size: clamp(26px, 3.4vw, 42px); letter-spacing: 0.08em; color: #fff; margin: 0 0 18px; font-weight: 600; line-height: 1.4; border: none; padding: 0; background: transparent; }
.opt-hero__title::after { display: none; }
.opt-hero__lead { font-size: 0.95rem; line-height: 1.95; color: rgba(255,255,255,0.9); margin: 0; max-width: 46em; }
/* 耐久・施工時間のメタ表示 */
.opt-meta { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.opt-meta li { display: flex; align-items: baseline; gap: 8px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.24); border-radius: 4px; padding: 8px 14px; }
.opt-meta span { font-size: 0.72rem; letter-spacing: 0.08em; color: rgba(255,255,255,0.75); }
.opt-meta strong { font-size: 0.86rem; font-weight: 600; color: #fff; font-variant-numeric: lining-nums tabular-nums; }

/* ---- こんなお悩みに ---- */
.opt-trouble { list-style: none; margin: 0 auto; padding: 0; max-width: 860px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 700px) { .opt-trouble { grid-template-columns: 1fr; } }
.opt-trouble li { position: relative; background: #fff; border: 1px solid var(--clb-border); border-radius: 6px; padding: 18px 20px 18px 52px; font-size: 0.92rem; line-height: 1.75; color: #4a5360; }
.opt-trouble li::before { content: "✓"; position: absolute; left: 20px; top: 17px; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; background: var(--clb-blue); color: #fff; font-size: 0.7rem; border-radius: 50%; }

/* ---- 特徴 ---- */
.opt-feature__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; max-width: 1060px; margin: 0 auto; }
@media (max-width: 900px) { .opt-feature__grid { grid-template-columns: repeat(2, 1fr); gap: 22px; } }
@media (max-width: 600px) { .opt-feature__grid { grid-template-columns: 1fr; gap: 0; } }
.opt-feature { padding: 24px 0 0; border-top: 2px solid var(--clb-navy); }
@media (max-width: 600px) { .opt-feature { padding-bottom: 24px; } .opt-feature:last-child { padding-bottom: 0; } }
.opt-feature__num { display: block; font-family: var(--clb-sans); font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum" 1, "tnum" 1; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.1em; color: var(--clb-blue); margin-bottom: 10px; }
.opt-feature__title { font-family: var(--clb-serif); font-size: 1.08rem; color: var(--clb-navy); font-weight: 600; letter-spacing: 0.04em; margin: 0 0 10px; line-height: 1.6; border: none; padding: 0; background: transparent; }
.opt-feature__title::after { display: none; }
.opt-feature__text { font-size: 0.9rem; line-height: 1.95; color: #4a5360; margin: 0; }

/* ---- 施工イメージ ---- */
.opt-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; max-width: 1060px; margin: 0 auto; }
@media (max-width: 800px) { .opt-gallery { grid-template-columns: 1fr; gap: 18px; max-width: 480px; } }
.opt-gallery__item { margin: 0; }
.opt-gallery__item figcaption { margin-top: 12px; font-size: 0.82rem; line-height: 1.7; color: var(--clb-muted); text-align: center; }

/* ---- 施工対象 ---- */
.opt-target { list-style: none; margin: 0; padding: 0; }
.opt-target li { position: relative; padding: 14px 0 14px 26px; border-bottom: 1px solid var(--clb-border); font-size: 0.93rem; line-height: 1.8; color: #4a5360; }
.opt-target li:first-child { border-top: 1px solid var(--clb-border); }
.opt-target li::before { content: ""; position: absolute; left: 4px; top: 1.35em; width: 8px; height: 8px; border-radius: 50%; background: var(--clb-blue); }

/* ---- 料金表（料金表スタイルを流用） ---- */
.opt-price { min-width: 520px; }
.opt-price tbody td { font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum" 1, "tnum" 1; font-weight: 600; }

/* ---- ハブ：サービス一覧 ---- */
.opt-intro { font-size: 0.97rem; line-height: 2.05; color: #4a5360; margin: 0 0 20px; }
.opt-intro:last-child { margin-bottom: 0; }
.opt-hub__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; max-width: 1080px; margin: 0 auto 30px; }
@media (max-width: 900px) { .opt-hub__grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
@media (max-width: 620px) { .opt-hub__grid { grid-template-columns: 1fr; max-width: 420px; } }
.opt-hub__card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--clb-border); border-radius: 8px; overflow: hidden; text-decoration: none; transition: transform .3s ease, box-shadow .3s ease; }
.opt-hub__card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(20,30,45,0.1); }
.opt-hub__body { display: flex; flex-direction: column; flex: 1; padding: 22px 22px 24px; }
.opt-hub__en { font-family: var(--clb-en); font-size: 0.74rem; letter-spacing: 0.22em; color: var(--clb-blue); font-weight: 600; margin-bottom: 6px; }
.opt-hub__name { font-family: var(--clb-serif); font-size: 1.1rem; color: var(--clb-navy); font-weight: 600; letter-spacing: 0.04em; margin-bottom: 12px; line-height: 1.5; }
.opt-hub__lead { font-size: 0.86rem; line-height: 1.85; color: #57616e; margin-bottom: 16px; flex: 1; }
.opt-hub__price { font-family: var(--clb-sans); font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum" 1, "tnum" 1; font-size: 1.24rem; font-weight: 700; color: var(--clb-navy); letter-spacing: 0.01em; margin-bottom: 14px; }
.opt-hub__price small { font-size: 0.7rem; font-weight: 400; color: var(--clb-muted); margin-left: 6px; letter-spacing: 0.04em; }
.opt-hub__more { align-self: flex-start; font-size: 0.8rem; letter-spacing: 0.06em; color: var(--clb-blue); border-bottom: 1px solid currentColor; padding-bottom: 2px; }

/* ---- 詳細ページ下部：他のオプション ---- */
.opt-others__list { list-style: none; margin: 0 auto 28px; padding: 0; max-width: 1000px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 860px) { .opt-others__list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .opt-others__list { grid-template-columns: 1fr; } }
.opt-others__list a { display: flex; flex-direction: column; gap: 4px; background: #fff; border: 1px solid var(--clb-border); border-radius: 6px; padding: 16px 18px; text-decoration: none; transition: border-color .3s ease, transform .3s ease; }
.opt-others__list a:hover { border-color: var(--clb-blue); transform: translateY(-2px); }
.opt-others__en { font-family: var(--clb-en); font-size: 0.68rem; letter-spacing: 0.2em; color: var(--clb-blue); font-weight: 600; }
.opt-others__ja { font-size: 0.9rem; color: var(--clb-navy); font-weight: 600; letter-spacing: 0.03em; }
.opt-others__more { text-align: center; margin: 0; }


/* =========================================================================
   ラステラ施工ページ（/garage/lastella/）
   ========================================================================= */

/* 2本ボトルの導入画像 */
.lsv-duo { margin: 0 auto 40px; max-width: 720px; text-align: center; }
.lsv-duo img { width: 100%; height: auto; display: block; border-radius: 10px; }

/* 艶イメージ バンド */
.lsv-band { margin: 0; text-align: center; }
.lsv-band img { width: 100%; height: auto; max-height: 460px; object-fit: cover; display: block; border-radius: 10px; }
.lsv-band figcaption { margin-top: 14px; font-size: 0.95rem; color: var(--clb-muted); letter-spacing: 0.04em; }

/* グレードカードの価格表記 */
.lst-card__price { font-family: var(--clb-serif); font-size: 1.05rem; color: var(--clb-blue); font-weight: 600; margin: 0 0 18px; letter-spacing: 0.02em; }

/* ---- 施工手順（縦フロー） ---- */
.lst-flow { list-style: none; margin: 0 auto; padding: 0; max-width: 900px; counter-reset: none; }
.lst-flow__item { display: grid; grid-template-columns: 260px 1fr; gap: 30px; align-items: center; padding: 24px 0; border-top: 1px solid var(--clb-border); }
.lst-flow__item:first-child { border-top: none; }
@media (max-width: 700px) { .lst-flow__item { grid-template-columns: 1fr; gap: 16px; } }
.lst-flow__figure { position: relative; border-radius: 8px; overflow: hidden; }
.lst-flow__img { aspect-ratio: 16 / 10; background-color: #e6ebf1; background-size: cover; background-position: center; background-repeat: no-repeat; }
.lst-flow__img--coming { display: flex; align-items: center; justify-content: center; background-image: linear-gradient(135deg, #e6ebf1, #d3dce6); }
.lst-flow__img--coming span { font-family: var(--clb-en); font-size: 0.8rem; letter-spacing: 0.18em; color: #8a97a6; }
/* 工程番号のバッジ。小さく表示されるためサンス体＋ライニング数字で読みやすく */
.lst-flow__num { position: absolute; top: 10px; left: 10px; min-width: 42px; height: 30px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; background: var(--clb-navy); color: #fff; font-family: var(--clb-sans); font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum" 1, "tnum" 1; font-size: 0.9rem; font-weight: 700; letter-spacing: 0.04em; border-radius: 4px; }
.lst-flow__body { padding-right: 6px; }
.lst-flow__title { font-family: var(--clb-serif); font-size: 1.2rem; color: var(--clb-navy); margin: 0 0 10px; font-weight: 600; letter-spacing: 0.04em; border: none; padding: 0; background: transparent; }
.lst-flow__title::after { display: none; }
.lst-flow__title::before { content: none; }
.lst-flow__text { font-size: 0.92rem; line-height: 1.95; color: #4a5360; margin: 0; }
/* =========================================================================
   / ラステラ施工ページ ここまで
   ========================================================================= */


/* =========================================================================
   SystemX施工ページ（/garage/systemx/）
   ========================================================================= */

/* 膜厚・硬度の図解（2枚並び） */
.sx-tech__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; max-width: 940px; margin: 0 auto; align-items: start; }
@media (max-width: 760px) { .sx-tech__grid { grid-template-columns: 1fr; gap: 30px; max-width: 480px; } }
.sx-tech__item { margin: 0; text-align: center; }
.sx-tech__item img { display: block !important; width: 100%; max-width: 440px; height: auto; margin: 0 auto; border: 1px solid var(--clb-border); border-radius: 8px; background: #fff; }
.sx-tech__item figcaption { margin-top: 14px; font-size: 0.88rem; line-height: 1.85; color: #4a5360; text-align: left; }
.sx-tech__item figcaption strong { color: var(--clb-navy); font-variant-numeric: lining-nums; }
/* =========================================================================
   / SystemX施工ページ ここまで
   ========================================================================= */