@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* ===========================================
   オープニング（黒幕、白幕ロゴ）
=========================================== */
/* オープニング要素を全ページで一旦「強制非表示」にする */
#opening-splash-black,
#opening-splash-white {
  display: none !important;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 99999;
}

/* ===========================================
   全体共通設定
=========================================== */
/* メインビジュアル画像：寄り → 引き のゆっくりズーム */
#main_visual.p-mainVisual .p-mainVisual__imgLayer.c-filterLayer__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center center;
  animation: mv-zoom-out 20s ease-out forwards;
}

/* 寄り（拡大）→ 引き（等倍） */
@keyframes mv-zoom-out {
  0% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1);
  }
}

/* ===========================================
   ヘッダーメニュー（全ページ共通）
=========================================== */
.c-gnav > .menu-item > a .ttl {
  font-weight: 400;
  letter-spacing: 0.03em;
  font-size: 14px;
  width: 96px;
}

.c-smallNavTitle {
  font-size: 12px;
}

/* -------------------------------------------
   グローバルメニュー
   リンクなしメニューを見出しっぽく
------------------------------------------- */

@media (max-width: 768px) {
  /* メインメニュー（第1階層）のアイコン表示 */
  .c-spnav > .menu-item > a::before {
    content: "\e9d3";
    font-family: "icomoon" !important;
    font-size: 12px;
    margin-right: 8px;
  }

  /* サブメニュー（第2階層）のアイコン表示 */
  .c-spnav .sub-menu .menu-item a::before {
    content: "└";
    font-family: sans-serif;
    color: #999 !important;
    font-size: 14px;
    margin-right: 10px;
    margin-left: 5px;
  }

  /* リンクなし親メニューだけ before 矢印 > を消す */
  .menu-parent-label > a {
    color: #888;
    letter-spacing: 0.05em;
  }
}

/* -------------------------------------------
   フルワイドブロックを縦に広く+白色文字
------------------------------------------- */
.my-fullwide {
  display: flex;
  height: 700px;
  position: relative;
  align-items: center;
}

.my-fullwide,
.my-fullwide * {
  color: #fff !important;
}

/* ===========================================
   見出しカスタマイズ CSS
   
   目次
   -------------------------------------------
   1. カスタムプロパティ（設定値）
   2. H1 - 通常
   3. H1 - 背景画像あり
   4. H2/H3 - 共通リセット
   5. H2/H3 - 通常版
   6. H2 - リバース版 .sr
   7. H2 - キャッチコピー版 .copy
   8. レスポンシブ（959px以下）
=========================================== */

/* -------------------------------------------
   1. カスタムプロパティ（設定値）
   ※ サイズ調整はここで一元管理
------------------------------------------- */
:root {
  /* --- フォント --- */
  --font-gothic: "游ゴシック体", "Yu Gothic", YuGothic,
    "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  --font-serif: "Noto Serif JP", "Hiragino Mincho ProN", serif;
  --font-sans: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN",
    "Hiragino Sans", Meiryo, sans-serif;

  /* --- H1 通常 --- */
  --h1-jp-size-pc: 16px;
  --h1-en-size-pc: 68px;
  --h1-en-size-sp: 36px;
  --h1-margin-top-pc: 40px;
  --h1-margin-bottom-pc: 60px;
  --h1-margin-top-sp: 30px;
  --h1-margin-bottom-sp: 40px;

  /* --- H1 背景画像あり --- */
  --h1-bg-height-pc: 700px;
  --h1-bg-height-sp: 250px;

  /* --- H2 通常版 --- */
  --h2-size-pc: 60px;
  --h2-size-sp: 36px;
  --h2-note-size-pc: 16px;
  --h2-note-size-sp: 14px;

  /* --- H3 通常版 --- */
  --h3-size-pc: 24px;
  --h3-size-sp: 20px;

  /* --- H2 リバース版(.sr) --- */
  --h2-sr-size-pc: 20px;
  --h2-sr-size-sp: 16px;
  --h2-sr-note-size-pc: 60px;
  --h2-sr-note-size-sp: 36px;

  /* --- H2 キャッチコピー版(.copy) --- */
  --h2-copy-size-pc: 32px;
  --h2-copy-size-sp: 24px;

  /* --- H3 キャッチコピー版(.copy) --- */
  --h3-copy-size-pc: 28px;
  --h3-copy-size-sp: 24px;

  /* --- H2/H3 共通余白 --- */
  --heading-margin-top-pc: 100px;
  --heading-margin-bottom-pc: 40px;
  --heading-margin-top-sp: 60px;
  --heading-margin-bottom-sp: 30px;
}

/* -------------------------------------------
   2. H1 - 通常
------------------------------------------- */

.page .c-pageTitle {
  text-align: left !important;
  margin-top: var(--h1-margin-top-pc);
  margin-bottom: var(--h1-margin-bottom-pc);
  padding-bottom: 0 !important;
  border: none !important;
}

.page .c-pageTitle[data-style="b_bottom"] .c-pageTitle__inner {
  border-bottom: none !important;
  padding: 0 !important;
}

.page .c-pageTitle__inner {
  display: flex !important;
  flex-direction: column-reverse; /* 英語を上、日本語を下 */
  align-items: flex-start !important;
  justify-content: flex-start !important;
  line-height: 1.2;
  width: 100%;
  margin: 0 !important;
  font-size: var(--h1-jp-size-pc) !important;
  font-family: var(--font-gothic);
  font-weight: 500;
  color: var(--color_main);
}

.page .c-pageTitle__subTitle {
  display: block !important;
  font-size: var(--h1-en-size-pc) !important;
  font-family: var(--font-sans);
  font-weight: 700;
  font-style: normal !important;
  color: var(--color_text);
  letter-spacing: 0;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 0 !important;
  opacity: 1 !important;
}

/* 背景画像のフィルターを解除 */
.c-filterLayer__img,
.c-pageTitleArea .c-filterLayer__img,
.c-filterLayer .c-filterLayer__img {
  filter: none !important;
  -webkit-filter: none !important;
  opacity: 1 !important;
}

/* -------------------------------------------
   3. H1 - 背景画像あり
------------------------------------------- */
/* 背景画像の高さ */
.l-topTitleArea {
  min-height: var(--h1-bg-height-pc) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* 背景画像の日本語部分（白文字・影付き） */
.page .l-topTitleArea .c-pageTitle__inner {
  color: #fff !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* 背景画像の英語部分（白文字・影付き） */
.page .l-topTitleArea .c-pageTitle__subTitle {
  color: #fff !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.page .l-topTitleArea .c-pageTitle {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.l-topTitleArea__body {
  animation: richFadeUp 1s ease-out 0.8s both;
}

@keyframes richFadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* -------------------------------------------
   4. H2/H3 - 共通リセット
   ※ SWELLデフォルト装飾を無効化
------------------------------------------- */
.page h2.is-style-section_ttl,
.page h3.is-style-section_ttl {
  border: none;
  background: none;
  padding: 0;
  text-align: left;
}

/* 下線装飾を削除 */
.page h2.is-style-section_ttl::after,
.page h3.is-style-section_ttl::after {
  content: none !important;
  display: none !important;
}

/* -------------------------------------------
   5. H2/H3 - 通常版
------------------------------------------- */
.page h2.is-style-section_ttl {
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: 0;
  color: var(--color_text);
  line-height: 1.3;
  margin-top: var(--heading-margin-top-pc);
  margin-bottom: var(--heading-margin-bottom-pc);
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100%;
}

.page h2.is-style-section_ttl {
  font-size: var(--h2-size-pc) !important;
}

.page h3.is-style-section_ttl {
  font-size: var(--h3-size-pc) !important;
  font-family: var(--font-sans);
  font-weight: 600;
}

.page h2.is-style-section_ttl .mininote {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--h2-note-size-pc) !important;
  font-weight: 400;
  font-style: normal;
  color: var(--color_main);
  line-height: 1;
  letter-spacing: 0.05em;
  margin-bottom: 5px;
}

/* -------------------------------------------
   6. H2 - リバース版 .sr（英語大・日本語小）
------------------------------------------- */
.page h2.is-style-section_ttl.sr {
  font-family: var(--font-gothic);
  font-size: var(--h2-sr-size-pc) !important;
  font-weight: 400;
  color: var(--color_main);
}

.page h2.is-style-section_ttl.sr .mininote {
  font-family: var(--font-sans);
  font-size: var(--h2-sr-note-size-pc) !important;
  font-weight: 700;
  letter-spacing: 0;
  color: #000000;
}

/* -------------------------------------------
   7. H2 - キャッチコピー版 .copy
------------------------------------------- */
.page h2.is-style-section_ttl.copy {
  font-family: var(--font-serif);
  font-size: var(--h2-copy-size-pc) !important;
  color: var(--color_text);
  line-height: 1.4;
}

.page h3.is-style-section_ttl.copy {
  font-family: var(--font-serif);
  font-size: var(--h3-copy-size-pc) !important;
  color: var(--color_text);
  line-height: 1.4;
  margin: 1em 0 1em;
}
.page h3.is-style-section_ttl.copy .mininote {
  font-size: 0.7em;
}

/* -------------------------------------------
   8. H2,H3 - キャッチコピーcenter寄せ版 .copy-c
------------------------------------------- */
.page h2.is-style-section_ttl.copy-c,
.page h3.is-style-section_ttl.copy-c {
  font-family: var(--font-serif);
  color: var(--color_text);
  line-height: 1.4;
  text-align: center;
  letter-spacing: 0.1em;
  margin: 1em 0 1em;
}

.page h2.is-style-section_ttl.copy-c {
  font-size: var(--h2-copy-size-pc) !important;
}

.page h3.is-style-section_ttl.copy-c {
  font-size: var(--h3-copy-size-pc) !important;
}

.page h3.is-style-section_ttl.copy-c .mininote {
  font-size: 0.5em;
  margin-bottom: 1em;
}

/* -------------------------------------------
   8. レスポンシブ（959px以下）
------------------------------------------- */
@media screen and (max-width: 959px) {
  /* --- H1 通常 --- */
  .page .c-pageTitle {
    margin-top: var(--h1-margin-top-sp);
    margin-bottom: var(--h1-margin-bottom-sp);
  }
  .page .c-pageTitle__subTitle {
    font-size: var(--h1-en-size-sp) !important;
    line-height: 1;
    margin-top: 1rem;
  }

  .l-topTitleArea {
    min-height: var(--h1-bg-height-sp) !important;
  }

  /* H2/H3 共通余白 */
  .page h2.is-style-section_ttl,
  .page h3.is-style-section_ttl {
    margin-top: var(--heading-margin-top-sp);
    margin-bottom: var(--heading-margin-bottom-sp);
  }
  /* --- H2 通常版 --- */
  .page h2.is-style-section_ttl {
    font-size: var(--h2-size-sp) !important;
  }
  .page h2.is-style-section_ttl .mininote {
    font-size: var(--h2-note-size-sp) !important;
  }
  /* --- H3 通常版 --- */
  .page h3.is-style-section_ttl {
    font-size: var(--h3-size-sp) !important;
  }

  /* --- H2 リバース版 .sr --- */
  .page h2.is-style-section_ttl.sr {
    font-size: var(--h2-sr-size-sp) !important;
  }
  .page h2.is-style-section_ttl.sr .mininote {
    font-size: var(--h2-sr-note-size-sp) !important;
  }

  /* --- H2 キャッチコピー版 .copy --- */
  .page h2.is-style-section_ttl.copy {
    font-size: var(--h2-copy-size-sp) !important;
    line-height: 1.2;
  }
  /* --- H2 キャッチコピー版 .copy-c --- */
  .page h2.is-style-section_ttl.copy-c {
    font-size: var(--h2-copy-size-sp) !important;
    line-height: 1.2;
    text-align: left;
  }
  /* --- H3 キャッチコピー版 .copy --- */
  .page h3.is-style-section_ttl.copy {
    font-size: var(--h3-copy-size-sp) !important;
    line-height: 1.2;
  }
  .page h3.is-style-section_ttl.copy .mininote {
    font-size: 0.85em;
    margin-top: 0.5em;
  }

  /* --- H3 キャッチコピー版 .copy-c --- */
  .page h3.is-style-section_ttl.copy-c {
    font-size: var(--h3-copy-size-sp) !important;
    line-height: 1.2;
    text-align: left;
  }
}

/* ===========================================
   セクションごとの上下スペース（.section-spacing）
=========================================== */
/* -------------------------------------------
   上下たっぷり
------------------------------------------- */
.section-spacing {
  padding-top: 100px !important;
  padding-bottom: 100px !important;
}

/* スマホ用の余白（メディアクエリ） */
@media (max-width: 768px) {
  .section-spacing {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}

/* -------------------------------------------
   上部のみ
------------------------------------------- */
.section-spacing-top {
  padding-top: 100px !important;
}

@media (max-width: 768px) {
  .section-spacing-top {
    padding-top: 60px;
  }
}

/* -------------------------------------------
   下部のみ
------------------------------------------- */
.section-spacing-bottom {
  padding-bottom: 100px !important;
}

@media (max-width: 768px) {
  .section-spacing-bottom {
    padding-bottom: 60px;
  }
}

/* -------------------------------------------
   セクション内部の調整
   ※ セクション自体の余白(padding)があるため、
      見出しの余白(margin)は不要になる
------------------------------------------- */

/* PC・スマホ共通：セクション内の見出し上部を0にする */
.section-spacing > h2.is-style-section_ttl,
.section-spacing > h3.is-style-section_ttl,
/* SWELL等の場合、インナーdivを挟む可能性があるので子孫セレクタも念のため */
.section-spacing .is-style-section_ttl:first-child {
  margin-top: 0 !important;
}

/* ===========================================
   連続するブロックの間隔管理 (.group-gap)
=========================================== */

/* 連続するブロックの間隔管理 (.group-gap) */
.group-gap {
  gap: 80px;
}

/* ===========================================
   pタグ幅固定ボックス
=========================================== */
.text-box {
  line-height: 2rem !important;
}

@media (min-width: 768px) {
  .text-box {
    max-width: 700px;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ===========================================
   アコーディオンタイトルデザイン
=========================================== */
.swell-block-accordion__title {
  font-size: 0.85rem;
  width: 150px;
  margin: 2em 0;
  padding-bottom: 0.4em;

  display: flex;
  justify-content: flex-start;
  align-items: center;
  text-align: left;

  background: none;
  box-shadow: none;
  border-bottom: 1px solid #333;
}

/* ===========================================
   リッチカラム スマホ時逆転（汎用クラス）
=========================================== */
@media screen and (max-width: 959px) {
  .sp-reverse .swell-block-columns__inner {
    flex-direction: column-reverse !important;
  }
  .sp-reverse .swell-block-column:last-child {
    margin-bottom: 2em;
  }
  .sp-reverse .swell-block-column:first-child {
    margin-bottom: 0;
  }
}

/* ===========================================
   スマホでは左寄せ、タブレット以上はセンター寄せ
=========================================== */
@media (min-width: 768px) {
  .res-p {
    text-align: center !important;
  }
}

@media (max-width: 767px) {
  .res-p {
    text-align: left !important;
  }
}

/* ===========================================
   パソコンではセンター70％領域に
=========================================== */
@media screen and (min-width: 1024px) {
  .pc-center-70 {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ===========================================
   BUSINESS FIELDS（タイル並び）リッチカラム表示設定
=========================================== */
/* ----- フォント指定 ----- */
.busi-fields {
  font-family: var(--font-serif) !important;
}

@media (max-width: 767px) {
  .busi-fields .swell-block-column {
    margin: 0 20px 20px;
  }
  .busi-fields .swell-block-column:last-child {
    margin-bottom: 0;
  }

  .busi-fields .wp-block-cover {
    min-height: 320px !important;
  }
}

/* ===========================================
   すりガラス風ボックスのスタイル
=========================================== */
.glass-box {
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
}

/* ===========================================
   背景パターン
=========================================== */
/* -------------------------------------------
   等高線ライン (Topographic Lines)
   クラス名: .bg-topography
------------------------------------------- */
.bg-topography {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600' viewBox='0 0 600 600'%3E%3Cpath d='M0 150 Q 150 100, 300 150 T 600 150 M0 300 Q 150 250, 300 300 T 600 300 M0 450 Q 150 400, 300 450 T 600 450 M150 0 Q 100 150, 150 300 T 150 600 M300 0 Q 250 150, 300 300 T 300 600 M450 0 Q 400 150, 450 300 T 450 600' fill='none' stroke='%2331AE4B' stroke-width='0.8' stroke-opacity='0.1'/%3E%3C/svg%3E");
}

/* -------------------------------------------
   バブル背景パターン
   クラス名: .bg-bubbles-section
   ※ クラスを追加するだけでバブルが表示されます（HTML要素不要）
------------------------------------------- */
/* セクション全体の基本設定 */
.bg-bubbles-section {
  position: relative;
  overflow: hidden; /* バブルがはみ出さないように */
  padding: 120px 20px;
  background-color: #f4f9f5; /* 現在の背景色 */
  z-index: 1;
}

/* バブル1: 親要素の::before */
.bg-bubbles-section::before {
  content: "";
  position: absolute;
  width: 400px;
  height: 400px;
  top: -100px;
  left: -100px;
  background-color: #31ae4b;
  border-radius: 50%;
  filter: blur(50px);
  opacity: 0.15;
  z-index: -1;
  pointer-events: none;
  animation: bubble-float-1 25s infinite ease-in-out;
}

/* バブル2: 親要素の::after */
.bg-bubbles-section::after {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  bottom: -50px;
  right: 5%;
  background-color: #31ae4b;
  border-radius: 50%;
  filter: blur(50px);
  opacity: 0.12;
  z-index: -1;
  pointer-events: none;
  animation: bubble-float-2 20s infinite ease-in-out;
  animation-delay: -5s;
}

/* バブル3: 最初の子要素の::before（親要素を基準に配置） */
.bg-bubbles-section > *:first-child {
  position: relative;
  z-index: 2;
}

.bg-bubbles-section > *:first-child::before {
  content: "";
  position: absolute;
  width: 200px;
  height: 200px;
  top: 20%;
  right: 15%;
  background-color: #31ae4b;
  border-radius: 50%;
  filter: blur(50px);
  opacity: 0.2;
  z-index: -1;
  pointer-events: none;
  animation: bubble-float-3 18s infinite ease-in-out;
  animation-delay: -2s;
}

/* バブル4: 最初の子要素の::after（親要素を基準に配置） */
.bg-bubbles-section > *:first-child::after {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  bottom: 20%;
  left: 10%;
  background-color: #31ae4b;
  border-radius: 50%;
  filter: blur(50px);
  opacity: 0.1;
  z-index: -1;
  pointer-events: none;
  animation: bubble-float-4 22s infinite ease-in-out;
  animation-delay: -10s;
}

/* 浮遊アニメーション（各バブルで異なる動き） */
@keyframes bubble-float-1 {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(40px, 60px) scale(1.05);
  }
  66% {
    transform: translate(-20px, 30px) scale(0.95);
  }
}

@keyframes bubble-float-2 {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(-30px, 50px) scale(1.1);
  }
  66% {
    transform: translate(20px, -20px) scale(0.9);
  }
}

@keyframes bubble-float-3 {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(50px, -40px) scale(1.08);
  }
  66% {
    transform: translate(-30px, 40px) scale(0.92);
  }
}

@keyframes bubble-float-4 {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(-40px, -30px) scale(1.12);
  }
  66% {
    transform: translate(30px, 50px) scale(0.88);
  }
}

/* -------------------------------------------
   グラデーションスペーサー
   クラス名: .gradient-spacer-white-to-gray, .gradient-spacer-gray-to-white
------------------------------------------- */
.gradient-spacer-white-to-gray {
  background: linear-gradient(to bottom, #ffffff 0%, #f8f8f8 100%);
  width: 100%;
  height: 150px;
}

.gradient-spacer-gray-to-white {
  background: linear-gradient(to bottom, #f8f8f8 0%, #ffffff 100%);
  width: 100%;
  height: 150px;
}

/* ===========================================
   メディアとテキストブロックに影とたっぷりの余白
=========================================== */
.deep-float .wp-block-media-text__media img {
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 6px 16px rgba(0, 0, 0, 0.14);
}

.deep-float .wp-block-media-text__content {
  padding: 5rem 4rem !important;
}

@media (max-width: 600px) {
  .deep-float .wp-block-media-text__content {
    padding: 3rem 1.5rem !important;
  }
}

/* ===========================================
   カードコンポーネント
=========================================== */

/* -------------------------------------------
   Company Card Style
   クラス名: .company-card
------------------------------------------- */
/* カードコンポーネントのスタイル */
.company-card .swell-block-column {
  background-color: #fff;
  border-radius: 12px;
  border: 1px solid #f1f5f9;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: box-shadow 0.3s ease, transform 0.3s ease;

  /* 中身を縦並びにしてボタンを下揃えにする必須設定 */
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important; /* SWELL標準のパディングをリセット */
}

.company-card .swell-block-column:hover {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  transform: translateY(-4px);
}

/* 画像エリアの設定 */
.company-card .swell-block-column figure.wp-block-image {
  width: 100%;
  height: 200px; /* ★画像の高さ固定（必要に応じて変更） */
  margin: 0 !important;
  overflow: hidden;
  position: relative; /* アイコンを絶対配置するための基準 */
  cursor: pointer;
  display: block;
}

/* 画像本体の設定（ズームアニメーション用） */
.company-card .swell-block-column figure.wp-block-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  border-radius: 0 !important; /* 画像自体の角丸はオフ */
}

/* ホバー時に画像を拡大 */
.company-card .swell-block-column:hover figure.wp-block-image img {
  transform: scale(1.1);
}

/* テキスト・ボタンエリアの設定 */
.company-card .swell-block-column > .wp-block-group {
  padding: 24px 24px 1px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

/* タイトル（h2, h3等） */
.company-card .swell-block-column h2,
.company-card .swell-block-column h3 {
  margin-top: 0 !important;
  margin-bottom: 12px !important;
  font-size: 1.1rem;
  line-height: 1.4;
}

/* 説明文（pタグ） */
.company-card .swell-block-column p {
  font-size: 0.9rem;
  color: #64748b;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

/* ボタンの下部固定とデザイン */
.company-card .swell-block-button {
  margin-top: auto; /* ボタンを一番下に押し下げる */
  width: 70%;
}

.company-card .swell-block-button .swell-block-button__link {
  width: 70%;
  border-radius: 9999px; /* カプセル型 */
  background-color: #1e293b; /* ボタン色：ダークグレー */
  border: 2px solid #1e293b;
  color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease;
}

/* ボタンホバー時 */
.company-card .swell-block-button .swell-block-button__link:hover {
  background-color: #fff;
  color: #1e293b;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
  transform: none;
}

/* ------------------------------------
   カードポップアップ（モーダル）用スタイル
------------------------------------ */

/* 背景の黒いフィルター */
.company-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}

/* ポップアップ表示時 */
.company-modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

/* ポップアップ本体 */
.company-modal-content {
  background: #fff;
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 16px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  position: relative;
  transform: translateY(20px);
  transition: transform 0.3s ease;
  padding: 40px;
  box-sizing: border-box;
}

.company-modal-overlay.is-open .company-modal-content {
  transform: translateY(0);
}

.company-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  background: #f1f5f9;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 20px;
  color: #64748b;
  transition: all 0.2s;
  border: none;
}
.company-modal-close:hover {
  background: #e2e8f0;
  color: #1e293b;
}

/* モーダル内のテキスト調整 */
.company-modal-content p {
  display: block !important;
  -webkit-line-clamp: unset !important;
  overflow: visible !important;
  font-size: 1rem;
  line-height: 1.8;
  color: #334155;
}

.company-modal-content h2,
.company-modal-content h3 {
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 1rem;
  margin-top: 0;
}

.company-modal-content img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 24px;
}

/* -------------------------------------------
   事業所一覧用カードデザイン
   クラス名: .facility-card
------------------------------------------- */
/* --------------------------------------------------
    メディアとテキストブロック全体 (.facility-card)
    -------------------------------------------------- */
.wp-block-media-text.facility-card {
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  margin-bottom: 2rem;

  /* リッチカラムなどで並べた際に高さを揃えるための指定 */
  height: 100% !important;
  box-sizing: border-box;

  align-items: start !important;

  /* ホバーアニメーション */
  transition: background-color 0.3s ease, border-color 0.3s ease,
    box-shadow 0.3s ease;
}

/* ホバー時の背景色・ボーダー・影の変更 */
.wp-block-media-text.facility-card:hover {
  background-color: #ffffff !important;
  border: 1px solid #31ae4b !important;
  box-shadow: 0 20px 40px rgba(49, 174, 75, 0.12) !important;
}

/* テキストエリアの余白調整 */
.wp-block-media-text.facility-card .wp-block-media-text__content {
  padding: 24px !important; /* 少し広めに確保 */

  /* グリッド／フレックス親に対して、コンテンツ全体を上に揃える */
  align-self: flex-start !important;
}

/* 画像エリアの調整 */
.wp-block-media-text.facility-card .wp-block-media-text__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 200px;
  vertical-align: bottom;
}

/* --------------------------------------------------
    施設名 (自動適用：h2, h3)
    -------------------------------------------------- */
/* 親クラスの中にあり、かつ tag-label ではない見出し */

.wp-block-media-text.facility-card .wp-block-media-text__content h2,
.wp-block-media-text.facility-card .wp-block-media-text__content h3 {
  margin-top: 0 !important;
  margin-bottom: 12px !important;
  font-size: 1.25rem !important; /* PC2列でも崩れにくいサイズ */
  font-weight: 700;
  line-height: 1.4;
  color: #333;
  border: none !important;
  background: none !important;
  padding: 0 !important;
}

.wp-block-media-text.facility-card .wp-block-media-text__content h2::before,
.wp-block-media-text.facility-card .wp-block-media-text__content h3::before,
.wp-block-media-text.facility-card .wp-block-media-text__content h2::after,
.wp-block-media-text.facility-card .wp-block-media-text__content h3::after {
  content: none !important;
  display: none !important;
  border: none !important;
}

/* --------------------------------------------------
    運営会社・住所 (自動適用：p)
    -------------------------------------------------- */
/* 親クラスの中にあり、かつ .tag-label クラスを持たない pタグ */
.wp-block-media-text.facility-card
  .wp-block-media-text__content
  p:not(.tag-label) {
  font-size: 0.85rem;
  color: #666;
  margin-bottom: 16px !important;
  line-height: 1.6;
  border-left: 3px solid #ddd;
  padding-left: 10px;
}

/* --------------------------------------------------
    特徴リスト (自動適用：ul)
    -------------------------------------------------- */
.wp-block-media-text.facility-card .wp-block-media-text__content ul {
  list-style: none !important;
  padding-left: 0 !important;
  margin-bottom: 0 !important;
  margin-top: 0 !important;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.wp-block-media-text.facility-card .wp-block-media-text__content ul li {
  font-size: 0.75rem;
  color: #555;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  padding: 3px 8px;
  border-radius: 4px;
  line-height: 1.3;
  margin: 0;
}

.wp-block-media-text.facility-card .wp-block-media-text__content ul li::before {
  content: "✔";
  color: #2ecc71;
  margin-right: 4px;
  font-weight: bold;
}

.wp-block-media-text.facility-card {
  align-items: stretch !important;
}

.wp-block-media-text.facility-card .wp-block-media-text__media {
  height: 100%;
  align-self: stretch; /* 親が grid / flex どちらでも縦方向いっぱいに */
  display: flex; /* 中の画像を伸ばしやすくするため */
}

.wp-block-media-text.facility-card .wp-block-media-text__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* -------------------------------------------
   行政連携カード - 2段構成
   クラス名: .govern-card
------------------------------------------- */
.govern-card {
  position: relative;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  border: 1px solid #e5e7eb;
  border-top: 4px solid #e5e7eb;
  transition: box-shadow 0.3s ease, background-color 0.3s ease;
  padding: 0 !important;
}

.govern-card.swell-block-column:hover {
  background-color: #ffffff !important;
  border: 1px solid #31ae4b !important;
  border-top: 4px solid #31ae4b !important;
  box-shadow: 0 20px 40px rgba(49, 174, 75, 0.12) !important;
}

/* カテゴリ別カラー */
.govern-card.fc-red {
  border-top-color: #c62828;
}

.govern-card.fc-blue {
  border-top-color: #1565c0;
}

.govern-card.fc-green {
  border-top-color: #2e7d32;
}

.govern-card.fc-yellow {
  border-top-color: #f57c00;
}

.govern-card.fc-purple {
  border-top-color: #6a1b9a;
}

/* ヘッダー部分（自治体名 + カテゴリ） */
.govern-card-header {
  background: #f8fafc;
  padding: 0.875rem 1.25rem;
  border-bottom: 1px solid #e5e7eb;
  margin: 0 !important;
  width: 100% !important;
  justify-content: space-between;
  border-radius: 12px 12px 0 0;
}

.govern-card-header p {
  margin: 0;
}

/* 自治体名 */
.govern-card-header p:first-child {
  font-weight: 600;
  font-size: 0.95rem;
  color: #1f2937;
}

/* 都道府県部分を薄く */
.govern-card-pref {
  font-weight: 400;
  color: #6b7280;
  font-size: 0.85rem;
}

/* ボディ部分 */
.govern-card-body {
  padding: 1.25rem;
}

.govern-card-body p {
  margin: 0;
}

/* 施設名 */
.govern-card-name {
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  color: #1f2937;
  line-height: 1.3;
  margin-bottom: 1rem !important;
  text-decoration: none !important;
  border-bottom: none !important;
}

.govern-card-name a {
  text-decoration: none !important;
  border-bottom: none !important;
  color: inherit;
}

/* ----- 詳細情報エリア ----- */
.govern-card-meta {
  padding-top: 0;
  gap: 2.5rem;
}

/* 詳細情報の各項目 */
.govern-card-meta-item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.govern-card-meta-item p {
  margin: 0;
  line-height: 1.4;
}

/* ラベル（委託形態、運営開始など） */
.govern-card-meta-item p:first-child {
  font-size: 0.75rem;
  color: #6b7280;
}

/* 値（指定管理、2017年など） */
.govern-card-meta-item p:last-child {
  font-size: 0.9rem;
  font-weight: 500;
  color: #1f2937;
}

/* リンクをカード全体に覆いかぶせる設定 */
.govern-card-link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  text-decoration: none;
  opacity: 0;
}

/* -----------------------------------
   レスポンシブ対応
----------------------------------- */
@media (max-width: 599px) {
  .govern-card-header {
    flex-direction: column;
    align-items: flex-start;
    padding: 0.75rem;
    gap: 0.5rem;
  }

  .govern-card-body {
    padding: 0.75rem;
  }

  .govern-card-meta {
    flex-direction: row;
    gap: 1.5rem;
  }
}

/* -------------------------------------------
   上部にカラーライン付きカードデザイン
   クラス名: .color-card
------------------------------------------- */
.color-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  border: 1px solid #e5e7eb;
  border-top: 4px solid #e5e7eb !important;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.color-card:hover {
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12) !important;
  transform: translateY(-6px) !important;
}

/* カテゴリ別カラー */
.color-card.fc-red {
  border-top-color: #c62828 !important;
}

.color-card.fc-blue {
  border-top-color: #1565c0 !important;
}

.color-card.fc-green {
  border-top-color: #2e7d32 !important;
}

.color-card.fc-yellow {
  border-top-color: #f57c00 !important;
}

.color-card.fc-purple {
  border-top-color: #6a1b9a !important;
}

/* -------------------------------------------
   color-card-icon
   クラス名: .color-card-icon
------------------------------------------- */

/* カード本体：外側の余白（パディング）を強制確保 */
.color-card-icon {
  padding: 40px 30px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  background-color: #fff !important;
  box-sizing: border-box !important;
  border-top: 4px solid #2e7d32 !important;
  border-radius: 8px;
}

/* アイコン背景：サイズを固定し、広がるのを防ぐ */
.color-card-icon .wp-block-image {
  width: 60px !important;
  height: 60px !important;
  min-width: 60px !important;
  min-height: 60px !important;

  margin: 0 0 20px 0 !important;
  background: #f0f9f1;
  border-radius: 12px;

  /* 中のアイコン画像を真ん中に置く */
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  overflow: hidden !important;
}

/* 3. 画像自体のリセット：親ボックスを突き破らないように */
.color-card-icon .wp-block-image img,
.color-card-icon .wp-block-image figure,
.color-card-icon .wp-block-image a {
  width: 30px !important; /* アイコン自体のサイズ */
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}

/* 4. 見出しの下線を消し、余白を整える */
.color-card-icon h3 {
  margin-top: 0 !important;
  margin-bottom: 12px !important;
  font-size: 1.2rem !important;
  border: none !important;
  padding: 0 !important;
}
.color-card-icon h3::after,
.color-card-icon h3::before {
  content: none !important; /* SWELLの線を消す */
}

/* 5. 説明文（P）の調整 */
.color-card-icon p {
  margin: 0 !important;
  font-size: 0.9rem !important;
  line-height: 1.7 !important;
  color: #555 !important;
}

/* -------------------------------------------
   カテゴリー色に応じたアクセント（fc-greenの場合）
------------------------------------------- */
.color-card-icon.fc-green .wp-block-image {
  background: #f0f9f1; /* アイコンの背景を薄い緑に */
}

/* ホバー時にアイコンが少し動く演出 */
.color-card-icon:hover .wp-block-image {
  transform: scale(1.1);
  background: #31ae4b; /* ホバーでアイコン背景を緑に */
}
.color-card-icon:hover .wp-block-image img {
  filter: brightness(0) invert(1); /* 中のアイコンを白抜きに */
}

/* -------------------------------------------
   アイコンカード付きカードデザイン
   クラス名: .ic-card, .iconcard-grid
------------------------------------------- */
/* -----------------------------------
   リッチカラムの高さを合わせる
----------------------------------- */
.iconcard-grid,
.icon-card-grid {
  height: 100% !important;
}

.ic-card {
  height: 100% !important;
  display: flex; /* 中身の配置を整えるために追加 */
  flex-direction: column;
}

.ic-desc {
  flex-grow: 1;
}

/* -----------------------------------
   アイコン付きカードのデザイン
----------------------------------- */
.iconcard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 60px 30px; /* アイコンが飛び出す分、縦の隙間を広めに取る */
  margin-top: 60px; /* 1行目のアイコンが見切れないよう、上の余白も確保 */
}

.ic-card {
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  position: relative;
  overflow: visible;
  transition: transform 0.3s, box-shadow 0.3s;
  margin-top: 30px;
  padding-top: 55px;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 30px;
}

/* ホバー時の動き（少し浮き上がる） */
.ic-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
  border-color: #31ae4b;
}

.ic-icon {
  width: 80px;
  height: 80px;
  background: radial-gradient(circle at 30% 30%, #4bc865, #31ae4b);
  color: white;
  border-radius: 50%;
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 20px rgba(49, 174, 75, 0.3),
    inset 0 2px 5px rgba(255, 255, 255, 0.4),
    inset 0 -2px 5px rgba(0, 0, 0, 0.1);

  z-index: 2;
}

/* アイコン内の画像やSVGのサイズ調整 */
.ic-icon img,
.ic-icon svg {
  width: 40px;
  height: 40px;
  fill: white;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.2));
}

.ic-title {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  word-break: auto-phrase;
  line-break: strict;
  overflow-wrap: anywhere;
  margin-top: 0 !important;
  padding-top: 0 !important;
  margin-bottom: 10px !important;
  position: relative;
  padding-bottom: 15px !important;
}

/* デフォルト線を消す */
.ic-title::before,
.ic-title::after {
  content: none !important;
  display: none !important;
}

.ic-title::after {
  content: "" !important;
  display: block !important;
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: #eee;
  transform: none;
}

.ic-desc {
  font-size: 0.9rem;
  color: #666;
  line-height: 1.6;
}

/* ===========================================
   ●ボタン付きカラータグ
=========================================== */
/* タグベース */
.tag-label {
  display: inline-flex;
  align-items: center;
  padding: 0.25em 0.6em 0.25em 0.4em;
  background-color: #f0f0f0;
  border-radius: 999px;
  font-size: 0.9em;
  line-height: 1;
}

.tag-label::before {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  margin-right: 0.4em;
  border-radius: 50%;
}

/* カラー1：赤 */
.tag-red {
  background-color: #ffebee;
  color: #c62828;
}
.tag-red::before {
  background-color: #c62828;
}

/* カラー2：青 */
.tag-blue {
  background-color: #e3f2fd;
  color: #1565c0;
}
.tag-blue::before {
  background-color: #1565c0;
}

/* カラー3：緑 */
.tag-green {
  background-color: #e8f5e9;
  color: #2e7d32;
}
.tag-green::before {
  background-color: #2e7d32;
}

/* カラー4：黄 */
.tag-yellow {
  background-color: #fff8e1;
  color: #f57c00;
}
.tag-yellow::before {
  background-color: #f57c00;
}

/* カラー5：紫 */
.tag-purple {
  background-color: #f3e5f5;
  color: #6a1b9a;
}
.tag-purple::before {
  background-color: #6a1b9a;
}

/* ===========================================
   カバーブロック、カラーグラデーション
=========================================== */

/* --- ベースのカードスタイル --- */
.card-overlay-base {
  position: relative;
  overflow: hidden;
  min-height: 400px;
}

/* --- グラデーション層（擬似要素で作成） --- */
.card-overlay-base::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 40%;
  z-index: 1;
  pointer-events: none;
  transition: background 0.3s ease;
}

/* --- テキストエリアのスタイル --- */
.card-text-area {
  position: relative;
  z-index: 2;
  color: #fff;
  text-align: left;
  width: 100%;
  display: block;
}

/* 英語タイトル */
.card-title-en {
  font-family: var(--font-sans);
  font-size: 36px !important;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0.05em;
  margin-bottom: 5px;
  text-transform: uppercase;
}

/* 日本語サブタイトル */
.card-subtitle-jp {
  font-family: var(--font-sans);
  font-size: 20px !important;
  font-weight: 400;
  line-height: 1.5;
  opacity: 0.9;
}

/* --- 5種類のカラーグラデーション --- */

/* 1. レッド */
.grad-red::before {
  background: linear-gradient(
    to bottom,
    rgba(200, 20, 20, 0.9) 0%,
    rgba(200, 20, 20, 0) 100%
  );
}

/* 2. グリーン */
.grad-green::before {
  background: linear-gradient(
    to bottom,
    rgba(40, 140, 20, 0.9) 0%,
    rgba(40, 140, 20, 0) 100%
  );
}

/* 3. ブルー */
.grad-blue::before {
  background: linear-gradient(
    to bottom,
    rgba(20, 80, 160, 0.9) 0%,
    rgba(20, 80, 160, 0) 100%
  );
}

/* 4. パープル */
.grad-purple::before {
  background: linear-gradient(
    to bottom,
    rgba(120, 40, 180, 0.9) 0%,
    rgba(120, 40, 180, 0) 100%
  );
}

/* 5. ダーク/ブラック */
.grad-dark::before {
  background: linear-gradient(
    to bottom,
    rgba(30, 30, 30, 0.95) 0%,
    rgba(30, 30, 30, 0) 100%
  );
}

/* --- スマホ用（画面幅768px以下）のスタイル調整 --- */
@media screen and (max-width: 768px) {
  .card-overlay-base {
    min-height: 400px;
  }
  /* 英語タイトルのスマホサイズ */
  .card-title-en {
    font-size: 28px !important;
    line-height: 1.2;
    margin-bottom: 5px;
  }

  /* 日本語サブタイトルのスマホサイズ */
  .card-subtitle-jp {
    font-size: 16px !important;
    line-height: 1.4;
  }
}

/* ===========================================
   データセクション（数字の実績）
=========================================== */
/* 項目名のデザイン */
.num-data-grid p:first-child {
  font-size: 14px;
  letter-spacing: 0.1em;
  opacity: 0.8; /* 少し薄くして上品に */
}

/* 数字のデザイン */
.num-data-grid p:last-child {
  font-size: 60px; /* 特大サイズ */
  font-family: "Yu Mincho", "YuMincho", serif;
  line-height: 1;
  font-weight: bold;
  position: relative;
  margin-bottom: 0 !important;
}

/* ★アンダーライン */
.num-data-grid p:last-child::after {
  content: "";
  display: block;
  width: 50px; /* 線の長さ */
  height: 2px; /* 線の太さ */
  background-color: var(--color_main); /* 線の色 */
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%); /* 真ん中に寄せる */
}

/* スマホ調整 */
@media (max-width: 600px) {
  .num-data-grid p:last-child {
    font-size: 40px; /* スマホでは少し小さく */
  }

  .num-data-grid .swell-block-column:last-child {
    border-bottom: none;
    margin-bottom: 0;
  }
}

/* ===========================================
   フッター
=========================================== */
.l-footer {
  font-size: 0.8rem;
}

/* ===========================================
   フッターバナー（.footer-banner）
=========================================== */

/* 1. カバーブロック自体の余白を完全にゼロにする */
.footer-banner {
  padding: 0 !important;
}

/* 2. インナーコンテナのパディングと配置の調整 */
.footer-banner .wp-block-cover__inner-container {
  padding-top: 0 !important; /* 上の隙間をゼロに */
  margin-top: 0 !important; /* マージンも念のためゼロに */
  display: flex;
  justify-content: center;
  align-items: flex-start; /* 上端揃え */
  width: 100%;
  height: 100%;
}

/* 3. 縦書きの黒帯（グラデーション）の設定 */
.footer-banner .wp-block-cover__inner-container p {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  /* 上から下へ、黒(0.8)から透明へ */
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.8) 0%,
    rgba(0, 0, 0, 0.4) 70%,
    rgba(0, 0, 0, 0) 100%
  );
  color: #fff;
  margin: 0 !important;
  padding: 30px 35px 60px; /* 上・左右・下 */
  font-family: var(--font-sans);
  font-size: 1.5rem !important;
  line-height: 2;
  display: flex;
  flex-direction: column;
  align-items: start;
  position: relative;
  top: 0;
}

/* フッターバナーのミニノート */
.footer-banner .wp-block-cover__inner-container p .mininote {
  display: block;
  font-family: var(--font-serif);
  font-size: 0.65em;
  margin-bottom: 1.2em;
  letter-spacing: 0.2em;
  opacity: 0.9;
}

/* -------------------------------------------
   ホバーでズームアウト
------------------------------------------- */
.footer-banner .wp-block-cover__image-background {
  transition: transform 0.6s ease-out !important;
  transform: scale(1.1);
  will-change: transform;
}

.footer-banner:hover .wp-block-cover__image-background {
  transform: scale(1) !important;
}

.footer-banner {
  overflow: hidden !important;
}

/* ===========================================
   アニメーション
=========================================== */

/* -------------------------------------------
   ホバーアニメーション
------------------------------------------- */
/* -------------------------------------------
   カバーブロックにホバーでズーム
   クラス名: .hover-zoom
------------------------------------------- */
.wp-block-cover.hover-zoom {
  overflow: hidden;
}

.wp-block-cover.hover-zoom .wp-block-cover__image-background {
  transform: scale(1.1);
  transition: transform 0.4s ease;
}

.wp-block-cover.hover-zoom:hover .wp-block-cover__image-background {
  transform: scale(1);
}

/* -------------------------------------------
   ホバーで画像が「フェードイン ＋ ズームアウト」（PC）
   スマホではオーバーレイ＋文字を白に
   クラス名: .hover-fade-reveal
------------------------------------------- */
.wp-block-cover.hover-fade-reveal {
  overflow: hidden;
  position: relative;
}

.wp-block-cover.hover-fade-reveal .wp-block-cover__image-background {
  opacity: 0;
  transform: scale(1.2);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

@media (hover: hover) and (pointer: fine) {
  .wp-block-cover.hover-fade-reveal:hover .wp-block-cover__image-background {
    opacity: 1;
    transform: scale(1);
  }

  .wp-block-cover.hover-fade-reveal:hover .wp-block-cover__inner-container,
  .wp-block-cover.hover-fade-reveal:hover .wp-block-cover__inner-container * {
    color: #ffffff !important;
  }
}

@media (hover: none) {
  .wp-block-cover.hover-fade-reveal .wp-block-cover__image-background {
    opacity: 1;
    transform: scale(1);
  }

  .wp-block-cover.hover-fade-reveal::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1;
  }

  .wp-block-cover.hover-fade-reveal .wp-block-cover__inner-container,
  .wp-block-cover.hover-fade-reveal .wp-block-cover__inner-container * {
    position: relative;
    z-index: 2;
    color: #ffffff !important;
  }
}

/* -------------------------------------------
   ホバーフロートアニメーション
   クラス名: .hover-float
------------------------------------------- */
.hover-float {
  transition: transform 0.4s ease-out, box-shadow 0.4s ease-out;
}

.hover-float:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.1), 0 6px 10px rgba(0, 0, 0, 0.06);
}

/* ===========================================
   zipadrr-jp 郵便番号ガイダンスを非表示
=========================================== */
#autozip {
  display: none !important;
}

/* -------------------------------------------
   スクロールアニメーション
   クラス名: .fade, .fadeInUp, .fadeInDown, .fadeInLeft, .fadeInRight, .forceWipe
------------------------------------------- */
.fade {
  opacity: 0;
  transition: opacity 0.8s ease-out, transform 0.8s ease-out,
    clip-path 0.8s ease-out;
  will-change: opacity, transform, clip-path;
}

.fadeInUp {
  transform: translateY(30px);
}
.fadeInDown {
  transform: translateY(-30px);
}
.fadeInLeft {
  transform: translateX(-30px);
}
.fadeInRight {
  transform: translateX(30px);
}

.forceWipe {
  -webkit-clip-path: inset(0 100% 0 0);
  clip-path: inset(0 100% 0 0);
}

/* --- 表示状態（JSで .is-show が付いた時のゴール） --- */
.fade.is-show {
  opacity: 1;
  transform: translate(0, 0) !important;
  clip-path: none !important; /* 解放！ */
  -webkit-clip-path: none !important;
}

/* ディレイ（時間差）用設定 */
.delay-200 {
  transition-delay: 0.2s !important;
}
.delay-400 {
  transition-delay: 0.4s !important;
}

@media (min-width: 768px) {
  /* 2列：各行 1→2 の順でディレイ */
  .two-columns-group > .swell-block-columns__inner > .swell-block-column {
    transition-delay: 0s !important;
  }
  .two-columns-group
    > .swell-block-columns__inner
    > .swell-block-column:nth-child(2n) {
    transition-delay: 0.2s !important;
  }

  /* 3列：各行 1→2→3 の順でディレイ */
  .three-columns-group > .swell-block-columns__inner > .swell-block-column {
    transition-delay: 0s !important;
  }
  .three-columns-group
    > .swell-block-columns__inner
    > .swell-block-column:nth-child(3n + 2) {
    transition-delay: 0.2s !important;
  }
  .three-columns-group
    > .swell-block-columns__inner
    > .swell-block-column:nth-child(3n + 3) {
    transition-delay: 0.4s !important;
  }
}

/* スマホ時のみ fade を解除する */
@media (max-width: 767px) {
  .sp-show-all .fade,
  .sp-show-all.fade {
    opacity: 1 !important;
    transform: translate(0, 0) !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
    visibility: visible !important;
  }
}

/* -------------------------------------------
   リリピール（ぬるりと現れる）アニメーション
   クラス名: .reveal, .reveal-inn
------------------------------------------- */
.reveal {
  overflow: hidden !important;
  opacity: 0;
  transition: opacity 0.8s ease-out;
}

.reveal-inn {
  display: block;
  opacity: 0;
  transform: translateY(105%);
  transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
}

.reveal.is-show {
  opacity: 1;
}

.reveal.is-show .reveal-inn {
  opacity: 1;
  transform: translateY(0);
}

/* -------------------------------------------
   スタッキングエフェクト
   クラス名: .sticky-header, .stacking-card
------------------------------------------- */
@media (min-width: 960px) {
  .sticky-header {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 140px;
    z-index: 100;
    height: auto;
  }

  .stacking-card {
    position: -webkit-sticky;
    position: sticky;
    top: 300px;
    z-index: 10;
    border-radius: 4px;
    margin-bottom: 60px;
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.6s ease, opacity 0.6s ease;
    transform-origin: top center;
  }

  .stacking-card:last-child {
    margin-bottom: 0;
  }
}

/* --- （参考）特殊なキーフレームアニメーションが必要な場合 --- */
@keyframes forceWipeAnim {
  0% {
    clip-path: inset(0 100% 0 0);
  }
  100% {
    clip-path: inset(0 0 0 0);
  }
}

/* ====================================
   Snow Monkey Forms: 説明文を「必須マーク」化
   ==================================== */
/* ラベルと説明文（必須マーク）を横並びにする */
.smf-item__col--label {
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.smf-item__description {
  background-color: #dd3234;
  color: #fff;
  font-size: 11px; /* 文字サイズ */
  font-weight: bold; /* 太字 */
  line-height: 1; /* 行間を詰める */
  padding: 4px 8px; /* 内側の余白 */
  border-radius: 4px; /* 角丸 */

  /* デフォルトの余白を打ち消し */
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* ===========================================
   リッチカラム専用・ループスライダー
   クラス名: js-loop-slider
=========================================== */
/* 1. 横一列に並べる（段落ち防止） */
.js-loop-slider .swell-block-columns__inner,
.js-loop-slider .swiper-wrapper {
  display: flex !important;
  flex-wrap: nowrap !important;
  transition-timing-function: linear !important;
}

/* タッチ操作中だけ ease-out にする */
.js-loop-slider.is-touching .swiper-wrapper {
  transition-timing-function: ease-out !important;
}

/* 2. カード（カラム）のサイズ固定 & 高さ揃え */
.js-loop-slider .swell-block-column,
.js-loop-slider .swiper-slide {
  width: 400px !important;
  min-width: 400px !important;
  flex: 0 0 auto !important;
  margin-bottom: 0 !important;

  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  background-color: #fff;
}

/* 3. カードの中身調整 */
.js-loop-slider .swell-block-column figure {
  width: 100%;
  margin: 0;
}

.js-loop-slider .swell-block-column > .wp-block-group {
  flex-grow: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}

.js-loop-slider .swell-block-column .swell-block-button {
  margin-top: auto !important;
  width: 100% !important;
  padding-bottom: 20px;
  display: block !important;
}

.js-loop-slider .swell-block-column .swell-block-button__link {
  margin-left: auto !important;
  margin-right: 0 !important;
}

/* 4. スマホでの幅調整 */
@media screen and (max-width: 959px) {
  .js-loop-slider .swell-block-column,
  .js-loop-slider .swiper-slide {
    width: 300px !important;
    min-width: 300px !important;
  }
}