/*
Theme Name: SWELL CHILD
Template: swell
*/

/* ============================================
   KANS Modern CTA/HUB – 2026 Redesign
   Glassmorphism + Portrait Cards
   ============================================ */

/* ============================================
   Design Tokens（統合版・サイト全体で共有）
   ・CTA / HUB は --kans-radius-cta（大きめ角丸）を使用
   ・通常カードは --kans-radius（控えめ角丸）を使用
   ============================================ */
:root {
  /* カラー（サイトメイン #2ea7e0 ／ アクセント緑 #6bc9b3 に統一） */
  --kans-accent:        #2ea7e0;
  --kans-accent-light:  #6bc9b3;
  --kans-overlay:       rgba(3, 20, 33, 0.44);
  --kans-overlay-hover: rgba(3, 20, 33, 0.32);
  --kans-glass-bg:      rgba(255, 255, 255, 0.10);
  --kans-glass-border:  rgba(255, 255, 255, 0.18);
  --kans-white:         #fff;
  --kans-pale-blue:     #cce0f1;
  --kans-pale-green:    #e3eedf;
  --kans-text-soft:     rgba(62, 58, 57, 0.7);
  --kans-border:        rgba(0, 0, 0, 0.08);

  /* 角丸 */
  --kans-radius:        8px;     /* 通常カード（latest-posts / columns / Instagram） */
  --kans-radius-sm:     6px;     /* 小要素 */
  --kans-radius-cta:    20px;    /* CTA / HUB バナー専用（大きめ） */
  --kans-radius-cta-sm: 14px;    /* CTA 内のサブ要素 */
  --kans-pill:          999px;

  /* 影 */
  --kans-shadow:       0 4px 20px rgba(0, 0, 0, 0.12);
  --kans-shadow-hover: 0 12px 36px rgba(0, 0, 0, 0.22);
  --kans-shadow-glass: 0 4px 24px rgba(0, 0, 0, 0.08),
                       inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --kans-shadow-card:  0 1px 3px rgba(3, 20, 33, 0.04);
  --kans-shadow-card-hover: 0 14px 32px rgba(3, 20, 33, 0.10);

  /* 動き */
  --kans-ease:     cubic-bezier(0.22, 1, 0.36, 1);
  --kans-duration: 280ms;

  /* レイアウト */
  --kans-section-y: clamp(40px, 5vw, 72px);
  --kans-block-y:   clamp(16px, 2.5vw, 28px);
}

/* --- Base Reset --- */
.kans-cta,
.kans-hub,
.kans-hub__item {
  box-sizing: border-box;
}

/* --- SWELL h3 Decoration Reset (scoped) --- */
.kans-cta .kans-cta__title,
.kans-hub .kans-hub__title {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
}

.kans-cta .kans-cta__title::before,
.kans-cta .kans-cta__title::after,
.kans-hub .kans-hub__title::before,
.kans-hub .kans-hub__title::after {
  content: none !important;
  display: none !important;
}

/* ============================================
   CTA BANNER
   ============================================ */
.kans-cta {
  margin: 24px 0;
  border-radius: var(--kans-radius);
  overflow: hidden;
  box-shadow: var(--kans-shadow);
  transition: box-shadow var(--kans-duration) var(--kans-ease);
}

.kans-cta__link {
  display: block;
  text-decoration: none !important;
  color: var(--kans-white) !important;
  transition: transform var(--kans-duration) var(--kans-ease);
}

/* --- CTA Inner (background image container) --- */
.kans-cta__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  aspect-ratio: 16 / 9;
  padding: 32px 20px;
  background-image: var(--kans-bg-img);
  background-size: cover;
  background-position: center 55%;
  background-color: #0c2e3f;
}

/* --- CTA Dark Overlay (::before) --- */
.kans-cta__inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--kans-overlay);
  z-index: 1;
  transition: background var(--kans-duration) var(--kans-ease);
}

/* --- CTA Glass Text Box --- */
.kans-cta__box {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 600px;
  padding: 24px 32px;
  border-radius: var(--kans-radius-sm);
  background: var(--kans-glass-bg);
  border: 1px solid var(--kans-glass-border);
  box-shadow: var(--kans-shadow-glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition:
    background var(--kans-duration) var(--kans-ease),
    border-color var(--kans-duration) var(--kans-ease);
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .kans-cta__box {
    background: rgba(3, 20, 33, 0.65);
  }
}

/* --- CTA Label --- */
.kans-cta__label {
  display: inline-block;
  margin: 0 0 10px !important;
  padding: 4px 14px !important;
  border-radius: var(--kans-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--kans-accent-light);
  background: rgba(14, 116, 144, 0.25);
  border: 1px solid rgba(34, 211, 238, 0.28);
}

.kans-cta__label::after {
  content: none;
}

/* --- CTA Title --- */
.kans-cta__title {
  color: var(--kans-white) !important;
  font-size: clamp(22px, 4vw, 36px) !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: 0.03em;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
}

/* --- CTA Hover --- */
.kans-cta:hover {
  box-shadow: var(--kans-shadow-hover);
}

.kans-cta:hover .kans-cta__link,
.kans-cta:focus-within .kans-cta__link {
  transform: scale(1.012);
}

.kans-cta:hover .kans-cta__inner::before,
.kans-cta:focus-within .kans-cta__inner::before {
  background: var(--kans-overlay-hover);
}

.kans-cta:hover .kans-cta__box,
.kans-cta:focus-within .kans-cta__box {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.26);
}

/* --- CTA Variants --- */
.kans-cta--strong .kans-cta__inner {
  min-height: 260px;
}

.kans-cta--strong .kans-cta__title {
  font-size: clamp(24px, 4.4vw, 42px) !important;
}

/* Strong accent bar on glass box */
.kans-cta--strong .kans-cta__box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 3px;
  border-radius: var(--kans-pill);
  background: linear-gradient(90deg, var(--kans-accent), var(--kans-accent-light));
}

.kans-cta--strong .kans-cta__box {
  padding-top: 30px;
}

.kans-cta--light .kans-cta__title {
  font-size: clamp(20px, 3.5vw, 30px) !important;
  font-weight: 600 !important;
}

/* --- CTA Theme Colors --- */
.kans-cta--sabani .kans-cta__label {
  color: #2dd4bf;
  background: rgba(6, 164, 174, 0.22);
  border-color: rgba(45, 212, 191, 0.28);
}

.kans-cta--sabani .kans-cta--strong .kans-cta__box::before,
.kans-cta--sabani.kans-cta--strong .kans-cta__box::before {
  background: linear-gradient(90deg, #06a4ae, #2dd4bf);
}

/* ============================================
   HUB CARDS
   ============================================ */
.kans-hub {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 20px 0 28px;
}

.kans-hub__item {
  position: relative;
  border-radius: var(--kans-radius);
  overflow: hidden;
  box-shadow: var(--kans-shadow);
  transition:
    transform var(--kans-duration) var(--kans-ease),
    box-shadow var(--kans-duration) var(--kans-ease);
}

.kans-hub__link {
  display: block;
  text-decoration: none !important;
  color: var(--kans-white) !important;
}

/* --- HUB Card Box (background + layout) --- */
.kans-hub__box {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 180px;
  aspect-ratio: 16 / 10;
  padding: 20px;
  background-image: var(--kans-bg-img);
  background-size: cover;
  background-position: center;
  background-color: #0c2e3f;
}

/* --- HUB Gradient Overlay --- */
.kans-hub__box::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(3, 20, 33, 0.78) 0%,
    rgba(3, 20, 33, 0.30) 50%,
    rgba(3, 20, 33, 0.04) 100%
  );
  z-index: 1;
  transition: background var(--kans-duration) var(--kans-ease);
}

/* --- HUB Accent Bar (top) --- */
.kans-hub__box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 3;
  background: linear-gradient(90deg, var(--kans-accent), var(--kans-accent-light));
  opacity: 0.85;
  transition: opacity var(--kans-duration) var(--kans-ease);
}

/* --- HUB Text --- */
.kans-hub__label,
.kans-hub__title {
  position: relative;
  z-index: 2;
  margin: 0 !important;
  padding: 0 !important;
}

.kans-hub__label {
  display: inline-block;
  width: fit-content;
  margin-bottom: 6px !important;
  padding: 3px 10px !important;
  border-radius: var(--kans-pill);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--kans-accent-light);
  background: rgba(14, 116, 144, 0.30);
  border: 1px solid rgba(34, 211, 238, 0.22);
}

.kans-hub__title {
  color: var(--kans-white) !important;
  font-size: clamp(16px, 2.2vw, 22px) !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  border: none !important;
}

.kans-hub__title::before,
.kans-hub__title::after {
  content: none !important;
  display: none !important;
}

/* --- HUB Theme Colors --- */
.kans-hub__link--dive2 .kans-hub__box::before {
  background: linear-gradient(90deg, #2563eb, #60a5fa);
}

.kans-hub__link--sabani .kans-hub__box::before {
  background: linear-gradient(90deg, #06a4ae, #2dd4bf);
}

.kans-hub__link--dive2 .kans-hub__label {
  color: #60a5fa;
  background: rgba(37, 99, 235, 0.22);
  border-color: rgba(96, 165, 250, 0.25);
}

.kans-hub__link--sabani .kans-hub__label {
  color: #2dd4bf;
  background: rgba(6, 164, 174, 0.22);
  border-color: rgba(45, 212, 191, 0.25);
}

/* --- HUB Hover --- */
.kans-hub__item:hover,
.kans-hub__item:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--kans-shadow-hover);
}

.kans-hub__item:hover .kans-hub__box::after,
.kans-hub__item:focus-within .kans-hub__box::after {
  background: linear-gradient(
    to top,
    rgba(3, 20, 33, 0.65) 0%,
    rgba(3, 20, 33, 0.18) 50%,
    rgba(3, 20, 33, 0.0) 100%
  );
}

.kans-hub__item:hover .kans-hub__box::before,
.kans-hub__item:focus-within .kans-hub__box::before {
  opacity: 1;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (min-width: 600px) {
  .kans-hub {
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }

  .kans-hub__box {
    aspect-ratio: 3 / 4;
    min-height: 280px;
    padding: 24px 18px;
  }

  .kans-hub__title {
    font-size: clamp(16px, 1.6vw, 21px) !important;
  }
}

@media (min-width: 768px) {
  .kans-cta__inner {
    aspect-ratio: 5 / 2;
    min-height: 280px;
    padding: 40px 32px;
  }

  .kans-cta--strong .kans-cta__inner {
    min-height: 320px;
  }

  .kans-cta__box {
    padding: 28px 40px;
  }

  .kans-cta--strong .kans-cta__box {
    padding-top: 36px;
  }
}

@media (min-width: 1024px) {
  .kans-hub__box {
    min-height: 320px;
  }

  .kans-hub {
    gap: 22px;
  }
}

@media (max-width: 599px) {
  .kans-cta {
    margin: 18px 0;
    border-radius: 16px;
  }

  .kans-cta__inner {
    min-height: 200px;
    padding: 28px 16px;
  }

  .kans-cta--strong .kans-cta__inner {
    min-height: 230px;
  }

  .kans-cta__box {
    padding: 20px 18px;
    border-radius: 12px;
  }

  .kans-cta--strong .kans-cta__box {
    padding-top: 26px;
  }

  .kans-hub {
    margin: 16px 0 22px;
    gap: 12px;
  }

  .kans-hub__box {
    min-height: 160px;
  }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */
/* prefers-reduced-motion はファイル末尾の単一ブロックに統合 */

@media (prefers-contrast: high) {
  .kans-cta__inner::before {
    background: rgba(0, 0, 0, 0.65);
  }
  .kans-cta__box {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .kans-hub__box::after {
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 60%, rgba(0,0,0,0.15) 100%);
  }
}

.kans-cta__link:focus-visible {
  /* WCAG 1.4.11 を満たすコントラストにメインカラー（青）を使用 */
  outline: 3px solid var(--kans-accent);
  outline-offset: 4px;
}

.kans-hub__link:focus-visible {
  outline: 3px solid var(--kans-accent);
  outline-offset: 2px;
}

/* ============================================
   BACKGROUND IMAGES (theme-bundled)
   ============================================ */
.kans-cta--dive .kans-cta__inner {
  --kans-bg-img: url("images/dive3.jpg");
}

.kans-cta--sabani .kans-cta__inner {
  --kans-bg-img: url("images/sabani.jpg");
}

.kans-hub__link--dive .kans-hub__box {
  --kans-bg-img: url("images/dive.jpg");
}

.kans-hub__link--dive2 .kans-hub__box {
  --kans-bg-img: url("images/dive2.jpg");
}

.kans-hub__link--sabani .kans-hub__box {
  --kans-bg-img: url("images/dive4.jpg");
}

/* ============================================
   FIXED WEB RESERVATION BUTTON
   旧サイト c_fix_res の継承（PC/SP両対応・常時表示）
   ============================================ */
.kans-fix-reserve {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 90;
  pointer-events: none;
  margin: 0;
}

.kans-fix-reserve__link {
  display: inline-flex;
  /* PC アイコン + ラベルを縦方向に並べる */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  pointer-events: auto;
  background: linear-gradient(135deg, var(--color_main, #2ea7e0), #6bc9b3);
  color: #fff !important;
  /* 視認性UP: padding を増やしてボタン本体を大きく */
  padding: 22px 16px;
  /* 角丸も拡大して右端から「タブが生えている」印象を強める */
  border-radius: 16px 0 0 16px;
  text-decoration: none !important;
  /* 影を強化して浮遊感を増す（左側にも軽く青の発光） */
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.28),
              -2px 0 8px rgba(46, 167, 224, 0.20);
  transition: transform var(--kans-duration, 280ms) var(--kans-ease),
              box-shadow var(--kans-duration, 280ms) var(--kans-ease);
  font-weight: 700;
  letter-spacing: 0.18em;
  /* フォントサイズも一段アップ */
  font-size: 14px;
  /* 常時の微妙な脈動アニメで右端の存在を主張 */
  animation: kans-fix-reserve-nudge 2.6s var(--kans-ease) infinite;
}

/* PC アイコン (Lucide monitor) のスタイル */
.kans-fix-reserve__svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.kans-fix-reserve__label {
  /* WEB予約 のラベルは縦書きに */
  writing-mode: vertical-rl;
  text-orientation: mixed;
  display: inline-block;
}

/* 右端からほんの少し顔を出すように 0 → -5px → 0 を循環 */
@keyframes kans-fix-reserve-nudge {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(-5px); }
}

.kans-fix-reserve__link:hover,
.kans-fix-reserve__link:focus-visible {
  /* hover/focus 中はアニメを停止して安定した張り出し位置に固定 */
  animation-play-state: paused;
  transform: translateX(-10px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.34),
              -3px 0 12px rgba(46, 167, 224, 0.28);
  color: #fff !important;
}

.kans-fix-reserve__link:focus-visible {
  outline: 3px solid var(--kans-accent, #2ea7e0);
  outline-offset: 4px;
}

/* （旧 .kans-fix-reserve__label の単独定義は上の縦書き版に統合） */

/* SP では fix_bottom_menu（TEL/LINE/予約/MENU）に「予約」アイコンが含まれているため、
   .kans-fix-reserve は SP で非表示にして二重表示を防ぐ。PC（>599px）では引き続き表示。 */
@media (max-width: 599px) {
  .kans-fix-reserve {
    display: none !important;
  }
}

/* reduced-motion: 脈動アニメを停止し、静的に少し張り出した位置で固定 */
@media (prefers-reduced-motion: reduce) {
  .kans-fix-reserve__link {
    animation: none !important;
    transform: translateX(-4px) !important;
  }
}

/* reduced-motion: 脈動アニメを停止し、静的に少し張り出した位置で固定 */
@media (prefers-reduced-motion: reduce) {
  .kans-fix-reserve__link {
    animation: none !important;
    transform: translateX(-4px);
  }
}

/* prefers-reduced-motion はファイル末尾の単一ブロックに統合 */

/* ============================================
   KANS STYLE ─ 現行サイト寄せ（シンプル路線）
   過度な装飾を控え、画像とテキストを主役に
   ※ デザイントークンは先頭の :root に統合済み
   ============================================ */

/* --- post_content のブロック間 --- */
.post_content > h2 {
  margin-top: var(--kans-section-y) !important;
  margin-bottom: 0.7em !important;
}

.post_content > h3 {
  margin-top: calc(var(--kans-section-y) * 0.5) !important;
  margin-bottom: 0.5em !important;
}

.post_content > p,
.post_content > ul,
.post_content > ol,
.post_content > .wp-block-table,
.post_content > .wp-block-columns,
.post_content > .wp-block-buttons,
.post_content > .wp-block-latest-posts {
  margin-top: var(--kans-block-y);
  margin-bottom: var(--kans-block-y);
}

/* ============================================
   見出し h2 ─ 旧サイト風シンプル中央寄せ
   ============================================ */
.post_content h2:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title)) {
  border: none !important;
  padding: 0.3em 0 0.5em !important;
  margin: var(--kans-section-y) auto 0.8em !important;
  text-align: center !important;
  /* 日本語見出しの可読性を優先して字間を控えめに（旧 0.08em は分割視認の原因） */
  letter-spacing: 0.04em;
  font-weight: 700 !important;
  font-size: clamp(22px, 3vw, 30px) !important;
  line-height: 1.4 !important;
  color: var(--color_text) !important;
  background: none !important;
}

.post_content h2:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title))::before {
  content: none !important;
  display: none !important;
}

.post_content h2:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title))::after {
  content: "" !important;
  display: block !important;
  width: 40px;
  height: 2px;
  background: var(--color_main) !important;
  margin: 12px auto 0 !important;
  position: static !important;
  border-radius: 0;
  opacity: 1;
}

/* h2 直下のリード文 */
.post_content h2:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title)) + p.has-text-align-center,
.post_content > .wp-block-group.has-background > h2 + p.has-text-align-center {
  letter-spacing: 0.04em;
  color: var(--kans-text-soft);
  font-size: 14px;
  margin-top: 0.4em !important;
  margin-bottom: 1.4em !important;
}

/* 背景色付きグループ内の h2 はマージン縮小 */
.post_content .wp-block-group.has-background > h2:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title)):first-child {
  margin-top: 0 !important;
}

/* ============================================
   見出し h3 ─ 控えめな左縦線
   ============================================ */
.post_content h3:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title)) {
  border: none !important;
  border-left: 3px solid var(--color_main) !important;
  padding: 0.1em 0 0.1em 12px !important;
  font-weight: 700 !important;
  font-size: clamp(17px, 2vw, 20px) !important;
  letter-spacing: 0.04em;
  line-height: 1.5 !important;
  color: var(--color_text) !important;
  background: none !important;
}

.post_content h3:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title))::before,
.post_content h3:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title))::after {
  content: none !important;
  display: none !important;
}

/* 中央寄せ h3（カラム内・MENU/RANKING カード等）はシンプルに */
.post_content h3.has-text-align-center:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title)) {
  border: none !important;
  padding: 0.2em 0 0.4em !important;
  text-align: center !important;
}

/* ============================================
   段落・リスト・注記
   ============================================ */
.post_content p {
  line-height: 1.85;
  letter-spacing: 0.04em;
}

.post_content .u-fz-18 {
  font-size: clamp(15px, 1.6vw, 17px) !important;
  line-height: 1.9;
}

.post_content .is-style-note {
  color: var(--kans-text-soft);
  font-size: 13px;
  letter-spacing: 0.04em;
  background: #f7f8f8;
  border-left: 3px solid var(--color_main);
  padding: 10px 14px;
}

.post_content > ul:not(.wp-block-latest-posts) li {
  margin: 4px 0;
  line-height: 1.8;
  letter-spacing: 0.04em;
}

/* ============================================
   ボタン (wp-block-button) ─ シンプル単色
   ============================================ */
.wp-block-button .wp-block-button__link {
  background: var(--color_main) !important;
  color: #fff !important;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 12px 28px !important;
  border: none !important;
  box-shadow: 0 1px 3px rgba(46, 167, 224, 0.12);
  transition:
    transform var(--kans-duration) var(--kans-ease),
    background-color 200ms ease,
    box-shadow var(--kans-duration) var(--kans-ease) !important;
}

.wp-block-button .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link:focus-visible {
  background: #1f8fc7 !important;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(46, 167, 224, 0.25);
}

.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent !important;
  color: var(--color_main) !important;
  border: 1px solid var(--color_main) !important;
  box-shadow: none;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--color_main) !important;
  color: #fff !important;
}

/* ============================================
   テーブル (wp-block-table) ─ シンプル罫線
   ============================================ */
.wp-block-table {
  margin: var(--kans-block-y) 0;
}

.wp-block-table table {
  border-collapse: collapse;
  width: 100%;
  border-radius: 0;
  box-shadow: none;
  border: none;
}

.wp-block-table thead th {
  background: var(--color_main);
  color: #fff;
  font-weight: 700;
  padding: 10px 14px;
  text-align: left;
  letter-spacing: 0.06em;
  font-size: 14px;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.wp-block-table tbody th {
  background: #f7f8f8;
  color: var(--color_text);
  font-weight: 600;
  padding: 10px 14px;
  text-align: left;
  width: 32%;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.wp-block-table tbody td {
  padding: 10px 14px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.wp-block-table tbody tr:nth-child(even) td {
  background: #fff;
}

.wp-block-table tbody tr:hover td {
  background: #f7f8f8;
}

@media (max-width: 599px) {
  .wp-block-table thead {
    display: none;
  }
  .wp-block-table tbody tr {
    display: block;
    margin-bottom: 12px;
    border: 1px solid var(--kans-border);
  }
  .wp-block-table tbody th,
  .wp-block-table tbody td {
    display: block;
    width: 100%;
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    padding: 10px 14px;
  }
  .wp-block-table tbody th {
    background: var(--color_main);
    color: #fff;
    font-size: 12px;
    letter-spacing: 0.08em;
  }
  .wp-block-table tbody tr:last-child td {
    border-bottom: none;
  }
}

/* ============================================
   カラム (wp-block-columns) ─ シンプルカード
   ============================================ */
.post_content .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
  /* padding を更に拡大（クライアント要望「もう少し大きく」） */
  padding: 32px 28px;
  background: #fff;
  border-radius: 14px;
  border: 1px solid var(--kans-border);
  box-shadow: 0 1px 3px rgba(3, 20, 33, 0.04);
  position: relative;
  isolation: isolate;
  /* 初期表示(opacity/transform)と animation はファイル末尾のスクロール連動セクションで .kans-sr-ready 配下に移譲 */
  transition:
    transform 360ms var(--kans-ease),
    box-shadow 360ms var(--kans-ease),
    border-color 360ms var(--kans-ease);
  /* 高さを揃え、内側要素を上下で押し広げてボタンを最下部へ */
  display: flex !important;
  flex-direction: column;
  /* gap は 0 にして要素ごとの margin で制御（不自然な余白防止） */
  gap: 0;
}

/* カード内の要素間 margin を厳密制御 ─ 不自然な余白を解消 */
.post_content .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.post_content .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column > h3 {
  /* 画像直下の h3 は 16px 開ける */
  margin-top: 18px !important;
  margin-bottom: 10px !important;
}

.post_content .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column > p {
  /* 段落間は呼吸感 */
  margin-top: 4px !important;
  margin-bottom: 4px !important;
}

.post_content .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column > .wp-block-buttons {
  /* ボタンとその上要素の間に少し余白 */
  margin-top: 16px !important;
}

/* カラム内の最後のボタン（CTA）を必ずカード底辺へ */
.post_content .wp-block-columns > .wp-block-column > .wp-block-buttons:last-child {
  margin-top: auto !important;
  padding-top: 8px;
}

/* 価格・サブテキストの字間調整（white-space: nowrap は将来の長文化で破綻するため削除） */
.post_content .wp-block-columns > .wp-block-column > p[style*="color:#2ea7e0"],
.post_content .wp-block-columns > .wp-block-column > p[style*="font-weight:700"] {
  font-size: clamp(14px, 1.4vw, 17px) !important;
  letter-spacing: 0.02em;
  margin: 4px 0 6px !important;
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* h3 と価格の間を詰める */
.post_content .wp-block-columns > .wp-block-column > h3 + p {
  margin-top: 6px !important;
}

/* 本文 p（説明文）と次のボタンの間に呼吸 */
.post_content .wp-block-columns > .wp-block-column > p:not(.has-text-align-center) {
  margin-top: 8px;
  flex-grow: 1;
}

/* カラム内の順次 fade-up 遅延（スクロール連動: .kans-sr-ready + .is-in-view 配下） */

.post_content .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column:hover,
.post_content .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column:focus-within {
  transform: translateY(-6px);
  box-shadow: 0 14px 32px rgba(3, 20, 33, 0.10);
  border-color: rgba(46, 167, 224, 0.25);
}

.post_content .wp-block-columns > .wp-block-column > h3:first-child {
  margin-top: 0 !important;
}

/* MENU カード: 画像をカード上端に張り付ける + ホバーズーム
   ※ ネガティブマージンはカード padding (32px 28px) と一致させる */
.post_content .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column > .wp-block-image:first-child {
  margin: -32px -28px 0 !important;
  overflow: hidden;
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.post_content .wp-block-columns > .wp-block-column > .wp-block-image:first-child img {
  width: 100%;
  /* 16:9 → 4:3 で縦長く（画像が大きく見える） */
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  transition: transform 700ms var(--kans-ease);
  will-change: transform;
}

.post_content .wp-block-columns > .wp-block-column:hover > .wp-block-image:first-child img,
.post_content .wp-block-columns > .wp-block-column:focus-within > .wp-block-image:first-child img {
  transform: scale(1.06);
}

/* ============================================
   最新投稿 (latest-posts) ─ シンプルグリッド
   ============================================ */
.wp-block-latest-posts.is-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  list-style: none !important;
  padding: 0;
  margin-top: var(--kans-block-y);
}

/* ============================================
   LATEST POSTS CARD ─ 2026 マイクロインタラクション
   - 順次 fade-in (.kans-anim-fade-up)
   - ホバーで lift + soft shadow
   - 画像はホバーで slow zoom
   - タイトル下のアクセント線が広がる
   ============================================ */
.wp-block-latest-posts.is-grid li {
  background: #fff;
  border: 1px solid var(--kans-border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(3, 20, 33, 0.04);
  padding: 0 !important;
  margin: 0 !important;
  /* WP 標準の .columns-N li の width 指定を打ち消し */
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  position: relative;
  isolation: isolate;
  /* 初期表示と animation はファイル末尾のスクロール連動セクション（.kans-sr-ready 配下）に移譲 */
  /* ホバートランジション */
  transition:
    transform 360ms var(--kans-ease),
    box-shadow 360ms var(--kans-ease),
    border-color 360ms var(--kans-ease);
}

/* 順次表示遅延 (3カラム×2行) はスクロール連動セクション側で .is-in-view 付きに移譲 */

@keyframes kans-card-fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.wp-block-latest-posts.is-grid li:hover,
.wp-block-latest-posts.is-grid li:focus-within {
  transform: translateY(-6px);
  box-shadow: 0 14px 32px rgba(3, 20, 33, 0.10);
  border-color: rgba(46, 167, 224, 0.25);
}

/* 画像 */
.wp-block-latest-posts__featured-image {
  margin: 0 !important;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--kans-pale-blue);
}

.wp-block-latest-posts__featured-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
  transition: transform 700ms var(--kans-ease);
  will-change: transform;
}

.wp-block-latest-posts.is-grid li:hover .wp-block-latest-posts__featured-image img,
.wp-block-latest-posts.is-grid li:focus-within .wp-block-latest-posts__featured-image img {
  transform: scale(1.06);
}

/* タイトルリンク（余白を旧 32/28/16+16/28/28 から圧縮し、カードの縦長傾向を緩和）
   ※ li の最初の子は <div class="featured-image"> なので、:first-child は使わない。
      確実にマッチするよう .wp-block-latest-posts__post-title をセレクタに使用。 */
.wp-block-latest-posts.is-grid > li > a.wp-block-latest-posts__post-title {
  display: block;
  padding: 20px 22px 10px;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.7;
  letter-spacing: 0.02em;
  color: var(--color_text);
  text-decoration: none;
  position: relative;
}

/* タイトル下の短いアクセント線（ホバーで広がる） */
.wp-block-latest-posts.is-grid > li > a.wp-block-latest-posts__post-title::after {
  content: "";
  display: block;
  width: 24px;
  height: 2px;
  margin-top: 14px;
  background: linear-gradient(90deg, var(--color_main), #6bc9b3);
  border-radius: 999px;
  transition: width 360ms var(--kans-ease);
}

.wp-block-latest-posts.is-grid li:hover > a.wp-block-latest-posts__post-title::after,
.wp-block-latest-posts.is-grid li:focus-within > a.wp-block-latest-posts__post-title::after {
  width: 56px;
}

/* 日付 */
.wp-block-latest-posts__post-date {
  display: block;
  padding: 10px 22px 20px;
  font-size: 11px;
  color: var(--kans-text-soft);
  letter-spacing: 0.12em;
  font-family: -apple-system, 'Helvetica Neue', Arial, sans-serif;
}

/* prefers-reduced-motion はファイル末尾の単一ブロックに統合 */

/* ============================================
   MV（静止画 slider）─ SWELL のカスタマイザー設定 (mv_slide_size + mv_slide_height_pc/sp)
   を尊重するため、子テーマ側の上書きは廃止。
   画像比率に合わせた高さは loos_customizer.mv_slide_height_pc/sp で制御。
   ============================================ */

/* ============================================
   MV（動画）─ 装飾オーバーレイは消す、文字は控えめに残す
   ============================================ */
.p-mainVisual.-type-single .p-mainVisual__inner::after {
  display: none !important;
}

.p-mainVisual__slideTitle {
  font-size: clamp(18px, 3vw, 30px) !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em;
  line-height: 1.5 !important;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  margin-bottom: 0.5em !important;
}

.p-mainVisual__slideText {
  font-size: clamp(12px, 1.5vw, 15px) !important;
  letter-spacing: 0.04em;
  line-height: 1.7 !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  margin-bottom: 1.4em !important;
}

.c-mvBtn .c-mvBtn__btn,
.c-mvBtn__btn {
  padding: 12px 28px !important;
  border-radius: 4px !important;
  letter-spacing: 0.1em !important;
  font-weight: 700;
  background: var(--color_main) !important;
  color: #fff !important;
  box-shadow: none !important;
  transition: background-color 200ms ease !important;
  border: none !important;
}

.c-mvBtn__btn:hover,
.c-mvBtn__btn:focus-visible {
  transform: none !important;
  background: #1f8fc7 !important;
  box-shadow: none !important;
}

/* ============================================
   フッター ─ シンプル
   ============================================ */
.l-footer {
  padding-top: 48px;
}

.l-footer__widgetArea .c-widget__title,
.l-footer__widgetArea .c-widget h3 {
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  color: var(--color_text) !important;
  border-bottom: 1px solid var(--kans-border) !important;
  border-left: none !important;
  padding: 0 0 8px !important;
  margin: 0 0 12px !important;
  background: none !important;
}

.l-footer__widgetArea .c-widget__title::before,
.l-footer__widgetArea .c-widget__title::after,
.l-footer__widgetArea .c-widget h3::before,
.l-footer__widgetArea .c-widget h3::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

.l-footer__widgetArea .c-widget a {
  color: var(--color_footer_text);
  text-decoration: none;
  transition: color 200ms ease;
  border: none;
}

.l-footer__widgetArea .c-widget a:hover {
  color: var(--color_main);
}

.l-footer__widgetArea .c-widget p {
  font-size: 13px;
  line-height: 1.7;
  letter-spacing: 0.04em;
  margin: 0 0 6px;
}

.l-footer__nav {
  letter-spacing: 0.06em !important;
  gap: 8px 20px !important;
  font-size: 12px;
}

.copyright {
  font-size: 11px !important;
  letter-spacing: 0.08em;
  color: var(--kans-text-soft) !important;
}

/* ============================================
   リンク (post_content) シンプル下線
   ─ latest-posts のタイトルリンクは通常テキスト色で除外
   ============================================ */
.post_content a:not(.wp-block-button__link):not([class*="kans-"]):not([class*="c-mv"]):not(.wp-block-latest-posts__post-title) {
  color: var(--color_link);
  text-decoration: underline;
  text-decoration-color: rgba(46, 167, 224, 0.4);
  text-underline-offset: 3px;
  transition: text-decoration-color 200ms ease;
  background: none !important;
}

.post_content a:not(.wp-block-button__link):not([class*="kans-"]):not([class*="c-mv"]):not(.wp-block-latest-posts__post-title):hover {
  text-decoration-color: var(--color_link);
}

/* latest-posts のタイトルリンクは通常テキスト色 + 下線なし + ホバーで色変化のみ */
.post_content a.wp-block-latest-posts__post-title,
.wp-block-latest-posts.is-grid > li > a.wp-block-latest-posts__post-title {
  color: var(--color_text) !important;
  text-decoration: none !important;
  background: none !important;
  transition: color 200ms ease;
}

.post_content a.wp-block-latest-posts__post-title:hover,
.wp-block-latest-posts.is-grid > li > a.wp-block-latest-posts__post-title:hover {
  color: var(--color_main) !important;
  text-decoration: none !important;
}

/* ============================================
   RANKING ─ シンプル番号バッジ（青単色）
   ============================================ */
.post_content .kans-rank-card {
  position: relative;
  background: #fff !important;
  padding-top: 32px !important;
  overflow: visible !important;
}

.kans-rank-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 18px;
  font-family: Arial, sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  z-index: 3;
  white-space: nowrap;
  background: var(--color_main);
  color: #fff;
  /* ピル型に変更（4px の角丸はカード radius 14px とアンバランスだった） */
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(46, 167, 224, 0.28);
}

/* RANKING カード内画像も上端張り付き
   ※ カードの padding は MENU と統一 (32px 28px) + padding-top 40px (バッジ分) */
.post_content .kans-rank-card {
  padding-top: 40px !important;
}

.post_content .kans-rank-card > .wp-block-image:first-of-type {
  margin: -40px -28px 0 !important;
  overflow: hidden;
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.post_content .kans-rank-card > .wp-block-image:first-of-type img {
  width: 100%;
  /* MENU と同じ 4:3 に統一 */
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

/* ============================================
   INSTAGRAM グリッド（4 枚画像、各画像が IG リンク）
   ============================================ */
.kans-insta-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: var(--kans-block-y) auto;
  max-width: 920px;
}

.kans-insta-grid__item {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--kans-radius);
  border: 1px solid var(--kans-border);
  box-shadow: var(--kans-shadow-card);
  text-decoration: none !important;
  transition:
    transform var(--kans-duration) var(--kans-ease),
    box-shadow var(--kans-duration) var(--kans-ease);
}

.kans-insta-grid__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms var(--kans-ease);
}

.kans-insta-grid__item:hover,
.kans-insta-grid__item:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--kans-shadow-card-hover);
}

.kans-insta-grid__item:hover img,
.kans-insta-grid__item:focus-visible img {
  transform: scale(1.05);
}

@media (max-width: 599px) {
  .kans-insta-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kans-insta-grid__item,
  .kans-insta-grid__item img {
    transition: none !important;
  }
  .kans-insta-grid__item:hover,
  .kans-insta-grid__item:hover img {
    transform: none !important;
  }
}

/* ============================================
   INSTAGRAM プレースホルダー（旧、未使用だが残存スタイル）
   ============================================ */
.kans-instagram-placeholder {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: var(--kans-block-y) auto;
  max-width: 920px;
}

.kans-instagram-placeholder__item {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #f7f8f8;
  border: 1px solid var(--kans-border);
  border-radius: 14px;
  text-decoration: none !important;
  color: var(--kans-text-soft) !important;
  font-size: 12px;
  letter-spacing: 0.06em;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(3, 20, 33, 0.04);
  /* 初期表示・animation・順次遅延はスクロール連動セクション（.kans-sr-ready 配下）に移譲 */
  transition:
    transform 360ms var(--kans-ease),
    box-shadow 360ms var(--kans-ease),
    border-color 360ms var(--kans-ease),
    color 200ms ease,
    background-color 200ms ease;
}

.kans-instagram-placeholder__item::before {
  content: none !important;
}

.kans-instagram-placeholder__item:hover,
.kans-instagram-placeholder__item:focus-visible {
  background: #fff;
  color: var(--color_main) !important;
  transform: translateY(-6px);
  box-shadow: 0 14px 32px rgba(3, 20, 33, 0.10);
  border-color: rgba(46, 167, 224, 0.25);
}

.kans-instagram-placeholder__icon {
  font-size: 22px;
  opacity: 0.5;
}

@media (max-width: 599px) {
  .kans-instagram-placeholder {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
}

/* ============================================
   背景付きグループ（RANKING の薄緑帯）─ 画面いっぱい
   ============================================ */
.post_content > .wp-block-group.has-background {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: 16px;
  padding-right: 16px;
}

.post_content > .wp-block-group.has-background > * {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 1100px) {
  .post_content > .wp-block-group.has-background {
    margin-left: 0;
    margin-right: 0;
  }
}

/* ============================================
   レスポンシブ
   ============================================ */
@media (max-width: 599px) {
  .post_content .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
    padding: 22px 18px;
  }

  /* SP も padding と画像 margin を一致させる */
  .post_content .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column > .wp-block-image:first-child {
    margin: -22px -18px 0 !important;
  }

  .post_content .kans-rank-card {
    padding-top: 32px !important;
  }

  .post_content .kans-rank-card > .wp-block-image:first-of-type {
    margin: -32px -18px 0 !important;
  }

  .wp-block-latest-posts.is-grid {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
  }
}

/* ============================================
   サイト共通：H2 / FV cover のロード時 fade-up
   ============================================ */

/* h2 見出しの fade-up はスクロール連動セクション（.kans-sr-ready 配下）に移譲 */

/* サブページ FV cover のテキストもふわっと出現 */
.wp-block-cover.alignfull .wp-block-cover__inner-container > * {
  opacity: 0;
  transform: translateY(16px);
  animation: kans-card-fade-up 800ms var(--kans-ease) forwards;
}

.wp-block-cover.alignfull .wp-block-cover__inner-container > *:nth-child(1) { animation-delay: 100ms; }
.wp-block-cover.alignfull .wp-block-cover__inner-container > *:nth-child(2) { animation-delay: 220ms; }

/* （ボタンの lift 演出は前方の .wp-block-button .wp-block-button__link ルールに統合済み） */

/* ============================================
   トップ追加要素の fade-up アニメ
   ─ MV テキスト / ABOUT US ブロック / フッターウィジェット
   ============================================ */

/* MV キャッチコピー・サブコピー・ボタンの順次 fade-up */
.p-mainVisual__slideTitle,
.p-mainVisual__slideText,
.p-mainVisual__slideBtn {
  opacity: 0;
  transform: translateY(20px);
  animation: kans-card-fade-up 800ms var(--kans-ease) forwards;
}

.p-mainVisual__slideTitle { animation-delay: 200ms; }
.p-mainVisual__slideText  { animation-delay: 350ms; }
.p-mainVisual__slideBtn   { animation-delay: 500ms; }

/* ABOUT US ブロック / フッターウィジェットの fade-up は
   スクロール連動セクション（.kans-sr-ready 配下）に移譲 */

/* ============================================
   prefers-reduced-motion 対応（全アニメ無効化・統合版）
   旧 :hover transform / animation / transition をすべて無効化
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  /* fade-up / 順次表示の無効化 */
  .post_content > h2,
  .wp-block-cover.alignfull .wp-block-cover__inner-container > *,
  .post_content .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column,
  .kans-instagram-placeholder__item,
  .wp-block-latest-posts.is-grid li,
  .p-mainVisual__slideTitle,
  .p-mainVisual__slideText,
  .p-mainVisual__slideBtn,
  .post_content > .wp-block-group.has-background:first-of-type > *,
  .l-footer__widgetArea .c-widget {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* 全 transition 無効化（細かいものまで）*/
  .post_content a,
  .wp-block-button .wp-block-button__link,
  .c-mvBtn__btn,
  .kans-instagram-placeholder__item,
  .post_content .wp-block-columns > .wp-block-column,
  .wp-block-latest-posts.is-grid li,
  .post_content .wp-block-columns > .wp-block-column > .wp-block-image:first-child img,
  .wp-block-latest-posts__featured-image img,
  .kans-cta,
  .kans-cta__link,
  .kans-cta__inner::before,
  .kans-cta__box,
  .kans-hub__item,
  .kans-hub__box::after,
  .kans-hub__box::before,
  .kans-fix-reserve__link,
  .wp-block-latest-posts.is-grid > li > a.wp-block-latest-posts__post-title::after {
    transition: none !important;
  }

  /* :hover の transform 無効化（全カード+ボタン+CTA）*/
  .post_content .wp-block-columns > .wp-block-column:hover,
  .kans-instagram-placeholder__item:hover,
  .wp-block-latest-posts.is-grid li:hover,
  .wp-block-button .wp-block-button__link:hover,
  .kans-cta:hover .kans-cta__link,
  .kans-hub__item:hover,
  .kans-fix-reserve__link:hover,
  .post_content .wp-block-columns > .wp-block-column:hover > .wp-block-image:first-child img,
  .wp-block-latest-posts.is-grid li:hover .wp-block-latest-posts__featured-image img {
    transform: none !important;
  }
}

/* ============================================
   fade-up フォールバック
   ─ animation 非対応・JS 無効環境で opacity:0 のまま固着するのを防ぐ
   ============================================ */
@supports not (animation: kans-card-fade-up 1ms linear) {
  .post_content > h2,
  .wp-block-cover.alignfull .wp-block-cover__inner-container > *,
  .post_content .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column,
  .kans-instagram-placeholder__item,
  .wp-block-latest-posts.is-grid li,
  .p-mainVisual__slideTitle,
  .p-mainVisual__slideText,
  .p-mainVisual__slideBtn,
  .post_content > .wp-block-group.has-background:first-of-type > *,
  .l-footer__widgetArea .c-widget {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ============================================
   ホーム連絡導線ブロック ─ LINE / Instagram / Facebook / TEL
   ABOUT US ブロックの直下に配置する想定
   ============================================ */
.kans-contact-bar {
  display: grid;
  /* Facebook 削除に伴い 3 カラム化（LINE / Instagram / TEL） */
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  max-width: 720px;
  margin: 0 auto var(--kans-section-y);
  padding: 0 16px;
}

.kans-contact-bar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 18px 12px;
  background: #fff;
  border: 1px solid var(--kans-border);
  border-radius: var(--kans-radius);
  text-decoration: none !important;
  color: var(--color_text) !important;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  box-shadow: var(--kans-shadow-card);
  transition:
    transform var(--kans-duration) var(--kans-ease),
    box-shadow var(--kans-duration) var(--kans-ease),
    border-color var(--kans-duration) var(--kans-ease);
}

.kans-contact-bar__item:hover,
.kans-contact-bar__item:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--kans-shadow-card-hover);
  border-color: rgba(46, 167, 224, 0.3);
}

.kans-contact-bar__icon {
  width: 28px;
  height: 28px;
  line-height: 1;
  margin-bottom: 6px;
  color: var(--color_main, #2ea7e0);
}

.kans-contact-bar__icon svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.kans-contact-bar__item:hover .kans-contact-bar__icon,
.kans-contact-bar__item:focus-visible .kans-contact-bar__icon {
  color: var(--color_main, #2ea7e0);
}

.kans-contact-bar__label {
  font-size: 11px;
  letter-spacing: 0.1em;
}

@media (max-width: 599px) {
  .kans-contact-bar {
    /* 3 カラムなので SP でも 1 行に収まる */
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    max-width: 100%;
  }
  .kans-contact-bar__item {
    padding: 14px 8px;
  }
  .kans-contact-bar__icon {
    font-size: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kans-contact-bar__item {
    transition: none !important;
  }
  .kans-contact-bar__item:hover,
  .kans-contact-bar__item:focus-visible {
    transform: none !important;
  }
}

/* ============================================
   スクロール連動 fade-up（IntersectionObserver 発火）
   ─ JS が <html> に .kans-sr-ready クラスを付与する。
   ─ JS 無効 / IntersectionObserver 非対応 / prefers-reduced-motion 時は
     .kans-sr-ready が付かないため、要素は常時表示のまま（フォールバック）。
   ─ 各要素が画面に入ると .is-in-view が JS から付与されて fade-up が発火。
   ============================================ */

/* 初期状態（.kans-sr-ready 配下のみ非表示） */
.kans-sr-ready .post_content .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column,
.kans-sr-ready .wp-block-latest-posts.is-grid > li,
.kans-sr-ready .kans-instagram-placeholder__item,
.kans-sr-ready .kans-contact-bar__item,
.kans-sr-ready .l-footer__widgetArea .c-widget {
  opacity: 0;
  transform: translateY(20px);
  will-change: opacity, transform;
}

/* h2 と ABOUT US ブロック内は控えめな translateY(16px) */
.kans-sr-ready .post_content > h2,
.kans-sr-ready .post_content > .wp-block-group.has-background:first-of-type > * {
  opacity: 0;
  transform: translateY(16px);
  will-change: opacity, transform;
}

/* .is-in-view が JS から付与されたら fade-up animation 発火 */
.kans-sr-ready .post_content .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column.is-in-view,
.kans-sr-ready .wp-block-latest-posts.is-grid > li.is-in-view,
.kans-sr-ready .kans-instagram-placeholder__item.is-in-view,
.kans-sr-ready .kans-contact-bar__item.is-in-view,
.kans-sr-ready .l-footer__widgetArea .c-widget.is-in-view {
  animation: kans-card-fade-up 700ms var(--kans-ease) forwards;
}

.kans-sr-ready .post_content > h2.is-in-view,
.kans-sr-ready .post_content > .wp-block-group.has-background:first-of-type > *.is-in-view {
  animation: kans-card-fade-up 800ms var(--kans-ease) forwards;
}

/* セクション内の順次表示遅延（隣接 N カードを少しずつずらす） */
.kans-sr-ready .post_content .wp-block-columns > .wp-block-column.is-in-view:nth-child(1) { animation-delay:   0ms; }
.kans-sr-ready .post_content .wp-block-columns > .wp-block-column.is-in-view:nth-child(2) { animation-delay:  90ms; }
.kans-sr-ready .post_content .wp-block-columns > .wp-block-column.is-in-view:nth-child(3) { animation-delay: 180ms; }
.kans-sr-ready .post_content .wp-block-columns > .wp-block-column.is-in-view:nth-child(4) { animation-delay: 270ms; }

.kans-sr-ready .wp-block-latest-posts.is-grid > li.is-in-view:nth-child(1) { animation-delay:   0ms; }
.kans-sr-ready .wp-block-latest-posts.is-grid > li.is-in-view:nth-child(2) { animation-delay:  90ms; }
.kans-sr-ready .wp-block-latest-posts.is-grid > li.is-in-view:nth-child(3) { animation-delay: 180ms; }
.kans-sr-ready .wp-block-latest-posts.is-grid > li.is-in-view:nth-child(4) { animation-delay: 270ms; }
.kans-sr-ready .wp-block-latest-posts.is-grid > li.is-in-view:nth-child(5) { animation-delay: 360ms; }
.kans-sr-ready .wp-block-latest-posts.is-grid > li.is-in-view:nth-child(6) { animation-delay: 450ms; }

.kans-sr-ready .kans-instagram-placeholder__item.is-in-view:nth-child(1) { animation-delay:   0ms; }
.kans-sr-ready .kans-instagram-placeholder__item.is-in-view:nth-child(2) { animation-delay:  90ms; }
.kans-sr-ready .kans-instagram-placeholder__item.is-in-view:nth-child(3) { animation-delay: 180ms; }
.kans-sr-ready .kans-instagram-placeholder__item.is-in-view:nth-child(4) { animation-delay: 270ms; }

.kans-sr-ready .kans-contact-bar__item.is-in-view:nth-child(1) { animation-delay:   0ms; }
.kans-sr-ready .kans-contact-bar__item.is-in-view:nth-child(2) { animation-delay:  80ms; }
.kans-sr-ready .kans-contact-bar__item.is-in-view:nth-child(3) { animation-delay: 160ms; }
.kans-sr-ready .kans-contact-bar__item.is-in-view:nth-child(4) { animation-delay: 240ms; }

.kans-sr-ready .post_content > h2.is-in-view:nth-of-type(1) { animation-delay:  50ms; }
.kans-sr-ready .post_content > h2.is-in-view:nth-of-type(2) { animation-delay: 100ms; }
.kans-sr-ready .post_content > h2.is-in-view:nth-of-type(3) { animation-delay: 150ms; }
.kans-sr-ready .post_content > h2.is-in-view:nth-of-type(4) { animation-delay: 200ms; }
.kans-sr-ready .post_content > h2.is-in-view:nth-of-type(5) { animation-delay: 250ms; }
.kans-sr-ready .post_content > h2.is-in-view:nth-of-type(6) { animation-delay: 300ms; }

.kans-sr-ready .post_content > .wp-block-group.has-background:first-of-type > *.is-in-view:nth-child(1) { animation-delay: 100ms; }
.kans-sr-ready .post_content > .wp-block-group.has-background:first-of-type > *.is-in-view:nth-child(2) { animation-delay: 200ms; }
.kans-sr-ready .post_content > .wp-block-group.has-background:first-of-type > *.is-in-view:nth-child(3) { animation-delay: 300ms; }
.kans-sr-ready .post_content > .wp-block-group.has-background:first-of-type > *.is-in-view:nth-child(4) { animation-delay: 400ms; }

.kans-sr-ready .l-footer__widgetArea .c-widget.is-in-view:nth-child(1) { animation-delay: 100ms; }
.kans-sr-ready .l-footer__widgetArea .c-widget.is-in-view:nth-child(2) { animation-delay: 220ms; }
.kans-sr-ready .l-footer__widgetArea .c-widget.is-in-view:nth-child(3) { animation-delay: 340ms; }
.kans-sr-ready .l-footer__widgetArea .c-widget.is-in-view:nth-child(4) { animation-delay: 460ms; }