/* 共通 */
.l-header,
.l-fixHeader,
.disnon {
  display: none;
}
.toggle__wrapper {
  display: none !important;
}
.l-header__inner {
  background: linear-gradient(
    162.08deg,
    rgba(255, 255, 255, 0.85) 0%,
    rgba(255, 255, 255, 0.75) 100%
  );
  backdrop-filter: blur(6px);
  max-width: 95% !important;
  margin: 24px auto 0;
  border-radius: 12px;
}

.page-id-9 #content {
  padding-top: 0;
  margin-bottom: 0;
}
.page-id-9 h2 {
  font-weight: 500 !important;
}
.page-id-9 .h2Title {
  font-size: 28px !important;
  margin-bottom: 40px !important;
}
.normalTxt {
  line-height: 2.5;
}
@media (max-width: 959px) {
  .l-header {
    display: block;
  }
  .page-id-9 .h2Title {
    font-size: 24px !important;
  }
}
@media (max-width: 599px) {
  .normalTxt {
    font-size: 16px;
  }
}

/* 共通テキストリンクボタン（.sakukomo-link-btn / .mediaRight_btnTxt / --white）は
   全ページで使うため style.css に移動しました。 */

/* 口コミバブル領域の右端と揃える位置調整
   使い方: 「一覧でみる」段落の追加CSSクラスに、
     sakukomo-link-btn sakukomo-link-btn--white hitoVoice-more-align
   の3つ全部を入れる。
   仕様: バブルコンテナと同じ max-width 1400px に揃え、item--3 の right: 4% にあわせて
        右側に余白を作ってから右寄せ。 */
.hitoVoice-more-align {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  padding-right: 4%;
  text-align: right;
}

/*
メインビジュアル内、縦並びデザイン -----------------------------------------------------------------------------------------------*/
.vertical-text-container {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 80px;
  font-family: "Noto Sans JP", sans-serif;
}

.vertical-text-item {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 28px;
  line-height: 1.8;
  color: #333;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  padding: 15px 10px;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 12px;
}

.vertical-text-container .mv_leftWrapper {
  display: flex;
  gap: 40px;
}
.vertical-text-container .mv_leftWrapper .vertical-text-item {
  font-size: 22px;
}

/* === キャッチコピーのアニメーション ===
   mv-catch-anim.js が 1 行目に .is-charsplit を付与して各文字を <span> に分割。
   各 span は staggered な animation-delay 付きで「ひらり」とフェードイン。
   .mv_leftWrapper の 2 行は JS が文字数に応じた delay を設定して「ふわっ」と表示。
   JS が動かない場合のフォールバックで CSS にも delay: 3s を入れてある。
   仕上がりは 文字アニメーションテスト.html を踏襲。 */
/* キャッチコピー本体（.vertical-text-container 直下の .vertical-text-item）は
   JS が走る前にテキストが見えないよう初期 opacity 0。JS が .is-charsplit を
   付けたタイミングで opacity 1 にゆっくりフェード（白い背景も「ふわっと」浮き出る）。
   この間に各 span が自分の animation-delay で順番にひらりとフェードインする。
   ※ .mv_leftWrapper 内の .vertical-text-item は子セレクタ「>」では拾わないので、
      ここでは隠さない（.mv_leftWrapper 親の opacity アニメに任せる）。 */
.vertical-text-container > .vertical-text-item {
  opacity: 0;
  transition: opacity 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.vertical-text-container > .vertical-text-item.is-charsplit {
  opacity: 1;
}
.vertical-text-container .vertical-text-item.is-charsplit span {
  display: inline-block;
  opacity: 0;
  animation: mv-hirari 1.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* mv-intro-gsap.js が生成する char span。
   textContent ではなく data-char 属性を ::before で描画することで、
   Swiper のスライド切替などで外部スクリプトに textContent をクリアされても
   表示が維持される（attr() 由来の content は DOM の textContent から独立）。 */
[data-mv-char]::before {
  content: attr(data-char);
}
@keyframes mv-hirari {
  0%   { opacity: 0; transform: translateY(-20px) rotate(-8deg); }
  100% { opacity: 1; transform: translateY(0) rotate(0); }
}
/* CSS デフォルトでは animation を一切持たせない（環境ブレ防止）。
   ページロード時点で animation がスケジュールされていると、JS が後から
   animation-delay を上書きしても、ブラウザによって挙動が違って
   「キャッチコピー終わる前に mv_leftWrapper が出る」ケースが発生していた。
   JS（mv-catch-anim.js）が文字数に応じた delay 計算後、setTimeout で
   .mv-fuwat-go クラスを付与したタイミングで初めて animation が始まる。 */
.vertical-text-container .mv_leftWrapper {
  opacity: 0;
}
.vertical-text-container .mv_leftWrapper.mv-fuwat-go {
  animation: mv-fuwat 1.8s ease-out both;
}
@keyframes mv-fuwat {
  0%   { opacity: 0; transform: translateX(20px); }
  100% { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .vertical-text-container > .vertical-text-item,
  .vertical-text-container .vertical-text-item.is-charsplit span,
  .vertical-text-container .mv_leftWrapper {
    opacity: 1 !important;
    transform: none;
    transition: none;
    animation: none !important;
  }
}

/* MV intro: header.php のインラインスクリプトが <html> に .mv-intro-pending を
   付けた段階で、キャッチコピー / サイドメニュー / ピヨマル擬似要素を初期非表示にする。
   これでページの最初の paint から要素が見えない状態でスタートできる
   （window.load まで待つ GSAP の発火タイミングのチラつきを防ぐ）。
   GSAP は inline opacity で 0 → 1 にアニメするので、CSS で !important を付けると
   inline style を上書きしてしまって animation が効かなくなる。
   このセレクタはすでに既存の opacity:0 ルールより specificity が高いので、
   !important なしで意図通り効く。 */
html.mv-intro-pending .vertical-text-container > .vertical-text-item,
html.mv-intro-pending .vertical-text-container .mv_leftWrapper,
html.mv-intro-pending .gNav_group {
  opacity: 0;
  transition: none;
  animation: none;
}

/* ピヨマル（.p-mainVisual::before 擬似要素）と GO‼（.p-mainVisual::after 擬似要素）は
   JS から直接いじれないので、.mv-intro-pending が付いてる間は擬似要素 opacity 0 で
   待機させる。JS が timeline の最後に .mv-piyo-shown を .p-mainVisual に付与すると、
   ::before だけ CSS transition でふわっと opacity 0 → 1 に出現。
   ::after（GO‼）は .mv-piyo-shown 付与後も既存ルールに任せる
   （default opacity:0、.is-rest 付与＝最初のスクロールで opacity:1 にフェード）。 */
html.mv-intro-pending .p-mainVisual:not(.mv-piyo-shown)::before,
html.mv-intro-pending .p-mainVisual:not(.mv-piyo-shown)::after {
  opacity: 0;
}
html.mv-intro-pending .p-mainVisual.mv-piyo-shown::before {
  opacity: 1;
  transition: opacity 0.9s cubic-bezier(0.34, 1.56, 0.64, 1),
              bottom 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 1.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ピヨマル本体（::before）と GO‼ 文字（::after）
   状態遷移（シンプル版・ジャンプなし）:
     初期        ピヨマルは bottom: 0 / 傾きなし、GO‼ は不可視。
     .is-rest    最初のスクロールで付与。CSS transition で滑らかに peek
                 （bottom: -30px, rotate 15deg）まで動き、同時に GO‼ がフェードイン。
     .is-hidden  .is-rest と併用。MV が画面上部に去る直前で付与し、上にスクロール
                 して戻ったら外す。transition でピヨマル ↔ GO‼ が滑らかに行き来。 */
.p-mainVisual::before {
    content: "";
    position: absolute;
    width: 64px;
    height: 64px;
    background-image: url(../img/logo_symbol-natsu.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom center;
    z-index: 3;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) rotate(0deg);
}
.p-mainVisual::after {
    content: "GO‼";
    position: absolute;
    bottom: 58px;            /* 立ちピヨマルの頭のすぐ上（重ならない範囲） */
    left: 50%;
    font-size: 20px;
    font-weight: normal;
    color: white;
    font-family: 'Kiwi Maru', sans-serif;
    z-index: 4;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.5s ease;
}

/* イントロ完了（.mv-piyo-shown）で、ピヨマルが立った状態のまま GO‼ を表示。
   ＝スクロール開始の合図。ピヨマル本体は既定の bottom:0（立ち）のまま。 */
.p-mainVisual.mv-piyo-shown::after {
    opacity: 1;
    transition: opacity 0.6s ease 0.3s;
}

/* スクロールすると（mv-rise-up.js が .mv-piyo-away を付与）ピヨマル＋GO‼ を下へ隠す。
   最上部に戻すとクラスが外れて再表示（トグル）。 */
/* スクロール開始 → まず半分だけ顔を出して止まる（GO‼ は消える）。斜めに傾ける。ゆっくり。 */
.p-mainVisual.mv-piyo-peek::before {
    bottom: -32px;
    transform: translateX(-50%) rotate(15deg);
    transition: bottom 1.0s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 1.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.p-mainVisual.mv-piyo-peek::after {
    opacity: 0;
    transition: opacity 0.4s ease;
}
/* さらに半分くらいスクロール → もっと下へ、さらに斜めに沈める。ゆっくり。 */
.p-mainVisual.mv-piyo-down::before {
    bottom: -120px;
    transform: translateX(-50%) rotate(24deg);
    transition: bottom 1.1s cubic-bezier(0.4, 0, 0.6, 1),
                transform 1.2s cubic-bezier(0.4, 0, 0.6, 1);
}

@media (prefers-reduced-motion: reduce) {
    .p-mainVisual::before,
    .p-mainVisual::after,
    .p-mainVisual.mv-piyo-peek::before,
    .p-mainVisual.mv-piyo-peek::after,
    .p-mainVisual.mv-piyo-down::before {
        transition: none;
    }
}
.p-mainVisual__slideText {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  height: 100%;
  padding-right: 12vw;
}
@media (max-width: 1499px) {
  .p-mainVisual__slideText {
    padding-right: 4vw;
  }
  .vertical-text-item {
    font-size: 24px;
  }
  .vertical-text-container .mv_leftWrapper .vertical-text-item {
    font-size: 20px;
  }
}
@media (max-width: 599px) {
  .vertical-text-container {
    gap: 40px;
  }
  .vertical-text-container .mv_leftWrapper {
    gap: 24px;
  }
  .vertical-text-item {
    font-size: 20px;
  }
  .vertical-text-container .mv_leftWrapper .vertical-text-item {
    font-size: 16px;
  }
}

/* === MV → 深呼吸 ピンスクロール（mv-intro-crossfade.js とセット）===
   JS が body 内に .mv-intro-stage を動的生成し、MV と .intro_container を
   stage 内の sticky な inner に move する。両方を absolute inset:0 で重ねて
   位置を一致させ、スクロール量に応じて opacity を crossfade する。
   元に戻すときはこのブロック + JS + functions.php の enqueue を削除。 */
.mv-intro-stage {
    position: relative;
    height: 300vh; /* crossfade(約180vh) + 100%到達後の余裕(約120vh)。
                      余裕の量は JS の CROSSFADE_END と合わせて調整する。 */
}
.mv-intro-stage__inner {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
}
.mv-intro-stage__inner > .p-mainVisual,
.mv-intro-stage__inner > .intro_container {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100vh;
    margin: 0;
}
/* intro_container 内の文字コンテンツを縦中央に寄せる。
   leaf-particle は absolute なので flex の影響を受けず、自由配置のまま。 */
.mv-intro-stage__inner > .intro_container {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* WP 管理バー対応：sticky top と height を管理バー分（PC:32px / SP:46px）ずらして、
   ピン留めしたシーンが管理バーの下に潜らないようにする。
   tsushin-single.css と同じ判定（.admin-bar クラス + html:has(#wpadminbar)）。 */
.admin-bar .mv-intro-stage__inner,
html:has(#wpadminbar) .mv-intro-stage__inner {
    top: 32px;
    height: calc(100vh - 32px);
}
.admin-bar .mv-intro-stage__inner > .p-mainVisual,
.admin-bar .mv-intro-stage__inner > .intro_container,
html:has(#wpadminbar) .mv-intro-stage__inner > .p-mainVisual,
html:has(#wpadminbar) .mv-intro-stage__inner > .intro_container {
    height: calc(100vh - 32px);
}
@media (max-width: 782px) {
    .admin-bar .mv-intro-stage__inner,
    html:has(#wpadminbar) .mv-intro-stage__inner {
        top: 46px;
        height: calc(100vh - 46px);
    }
    .admin-bar .mv-intro-stage__inner > .p-mainVisual,
    .admin-bar .mv-intro-stage__inner > .intro_container,
    html:has(#wpadminbar) .mv-intro-stage__inner > .p-mainVisual,
    html:has(#wpadminbar) .mv-intro-stage__inner > .intro_container {
        height: calc(100vh - 46px);
    }
}

/* 次のいずれかではピンスクロールを無効化して通常フローに戻す（スクロールしながら見る形）。
     - スマホ（≤ 599px）
     - 画面高さが低い（≤ 860px：タブレット横向き・低解像度ノート等）
   100vh に収まらず要素が重なる／上が見切れるのを防ぐ。
   JS 側 mv-intro-crossfade.js の gsap.matchMedia 条件（min-height: 861px）と必ず揃える。 */
@media (max-width: 599px), (max-height: 860px) {
    .mv-intro-stage {
        height: auto;
    }
    .mv-intro-stage__inner {
        position: static;
        height: auto;
        overflow: visible;
    }
    .mv-intro-stage__inner > .p-mainVisual,
    .mv-intro-stage__inner > .intro_container {
        position: static;
        width: auto;
        height: auto;
        opacity: 1 !important;
        visibility: visible !important;
    }
    .mv-intro-stage__inner > .intro_container {
        display: block;
    }
    /* ログイン中（管理バー）の 100vh 強制も打ち消して通常フローに揃える */
    .admin-bar .mv-intro-stage__inner,
    html:has(#wpadminbar) .mv-intro-stage__inner {
        top: 0;
        height: auto;
    }
    .admin-bar .mv-intro-stage__inner > .p-mainVisual,
    .admin-bar .mv-intro-stage__inner > .intro_container,
    html:has(#wpadminbar) .mv-intro-stage__inner > .p-mainVisual,
    html:has(#wpadminbar) .mv-intro-stage__inner > .intro_container {
        height: auto;
    }
}

/* MV を 100vh に押し込めず高さを確保して、縦スクロールで全体（サイドメニュー・キャッチコピー・
   バナー）を見せる。対象（いずれもスマホ ≤599px は除外＝100vh のまま）:
     - タブレット幅 600〜959px（縦持ち）
     - 幅 600px 以上で画面高さが低い ≤860px（タブレット横持ちは幅 1024px 等で 959 超になるため、
       高さ条件で拾う。低解像度ノート等も含む）
   #main_visual の height: calc(var(--swl-mv-height,100vh) - …) が参照する変数を上書き。
   インライン指定に負けないよう !important。値は内容に合わせて調整可。 */
@media (min-width: 600px) and (max-width: 959px),
       (min-width: 600px) and (max-height: 860px) {
    .p-mainVisual {
        --swl-mv-height: 820px !important;
    }
}

/*
ちょっと、深呼吸したくなったら -----------------------------------------------------------------------------------------------*/

.intro_container {
  /* leaf-particle の絶対配置の基準として position: relative は維持 */
  position: relative;
}

.intro_container .h2Title {
  font-weight: 500;
}
.intro_container .introTxt {
  line-height: 2.75;
  letter-spacing: 0.05em;
}

/* 葉っぱ要素の基本スタイル
   通常時は透明で待機。.intro_container.is-windy が付くと、セクション上方から
   舞い落ちる演出が発動。trigger は intro-wind.js（IntersectionObserver）。 */
.intro_container .leaf-particle {
  position: absolute !important;
  pointer-events: none !important;
  z-index: 1 !important;
  width: 80px !important;
  height: 80px !important;
  background-image: url("https://web.ailesys.co.jp/sakukomo/wp-content/uploads/2025/08/summerLeaf.png") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15)) !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  animation: none !important;
}
/* 待機中（演出前）のみ透明にする。.is-windy が付いたら animation の keyframe が opacity を動かすので、ここで !important を付けると CSS仕様で keyframe が無効化されてしまうため :not() でスコープする */
.intro_container:not(.is-windy) .leaf-particle {
  opacity: 0 !important;
}

/* === 右上から左下に流れる風の演出 ===
   .is-windy で 5 枚の葉っぱが画面右上のあたりに出現 → 左下方向に流れて画面外へ抜けていく。
   - 待機中の固定位置 (left/right) を上書きして、画面右上エリアに再配置
   - 各葉ごとに --leaf-target-x/y を負の x（左方向）と正の y（下方向）で指定
   - 個性のためスタート位置と移動量を微妙にバラつかせる */
.intro_container.is-windy .leaf-particle {
  /* 演出開始時の位置（前景・画面内の見える位置）*/
  top: var(--leaf-y, 10%) !important;
  left: var(--leaf-x, 80%) !important;
  right: auto !important;
  /* 22秒かけてじっくり左下へ流れていく */
  animation: leaf-blow 22s cubic-bezier(0.4, 0, 0.6, 1) forwards !important;
  will-change: transform, opacity;
  /* 3D 回転で葉っぱが裏返るタイミングがあるので、裏面も表示する
     （hidden だと rotateX/Y で 90deg を超えた瞬間に葉が消える） */
  backface-visibility: visible;
  transform-style: preserve-3d;
}
/* 5枚を右上エリアに配置。
   target は「次セクションの『サ』のちょい左」（だいたい viewport の left:30%, 下端付近）に
   収束するよう、各葉の最終位置がそのあたりに来るよう調整。
   --leaf-rx/ry/rz は 3D 回転量。各葉でバラつかせて自然なタンブリング感を出す。
   - rx: 葉の上下反転（葉脈方向に裏返り）= 落ち葉のひらひら感のメイン
   - ry: 葉の左右反転 = 平面で見たときの揺らぎ
   - rz: 平面回転（旧 2D rotate と同じ）= 葉柄を軸にした回転 */
.intro_container.is-windy .leaf-particle:nth-child(3) {
  --leaf-x: 78%;  --leaf-y:  8%;
  --leaf-target-x: -48vw; --leaf-target-y:  88vh;
  --leaf-rx:  720deg; --leaf-ry:  540deg; --leaf-rz: -360deg;
}
.intro_container.is-windy .leaf-particle:nth-child(4) {
  --leaf-x: 90%;  --leaf-y:  3%;
  --leaf-target-x: -57vw; --leaf-target-y:  95vh;
  --leaf-rx: 1080deg; --leaf-ry:  360deg; --leaf-rz: -540deg;
}
.intro_container.is-windy .leaf-particle:nth-child(5) {
  --leaf-x: 72%;  --leaf-y: 18%;
  --leaf-target-x: -42vw; --leaf-target-y:  72vh;
  --leaf-rx:  540deg; --leaf-ry:  720deg; --leaf-rz: -270deg;
}
.intro_container.is-windy .leaf-particle:nth-child(6) {
  --leaf-x: 92%;  --leaf-y: 12%;
  --leaf-target-x: -60vw; --leaf-target-y:  83vh;
  --leaf-rx:  900deg; --leaf-ry:  450deg; --leaf-rz: -450deg;
}
.intro_container.is-windy .leaf-particle:nth-child(7) {
  --leaf-x: 82%;  --leaf-y: 25%;
  --leaf-target-x: -52vw; --leaf-target-y:  70vh;
  --leaf-rx:  630deg; --leaf-ry:  630deg; --leaf-rz: -360deg;
}

/* 共通アニメ：3D で葉っぱがタンブリング（ひらひら裏返り）しながら左下へ流れる。
   - perspective(1200px) で 3D 空間を作る → rotateX / rotateY が立体的に効く
   - 各葉ごとに rx/ry/rz の量が違うので、それぞれ独自のタンブリングパターンに
   - scale3d で X/Y を交互にちょっと縮めて「葉先がカールしてる」フェイク表現
     （実画像は flat な PNG なので形状自体は変えられないが、scale で見た目の
      圧縮を入れると人間の目には「反ってる」と感じる）
   - 中間 keyframe（33% / 66%）の rotation 値は最終値の途中地点 + 微オフセットで
     リニア補間に揺らぎを加え、滑らかな葉のパターンに */
@keyframes leaf-blow {
  0% {
    transform: perspective(1200px)
               translate3d(0, 0, 0)
               rotateX(0deg)
               rotateY(0deg)
               rotateZ(0deg)
               scale3d(1, 1, 1);
    opacity: 0;
  }
  8% {
    opacity: 0.85;
  }
  /* 1/3 地点: 横にちょっと縮める → 葉の左右が curl したように見える */
  33% {
    transform: perspective(1200px)
               translate3d(calc(var(--leaf-target-x, 0) * 0.3),
                           calc(var(--leaf-target-y, 0) * 0.28), 0)
               rotateX(calc(var(--leaf-rx, 720deg) * 0.3 + 20deg))
               rotateY(calc(var(--leaf-ry, 540deg) * 0.3 - 15deg))
               rotateZ(calc(var(--leaf-rz, -360deg) * 0.3))
               scale3d(0.85, 0.96, 1);
  }
  /* 2/3 地点: 縦にちょっと縮める → 葉の上下が curl したように見える */
  66% {
    transform: perspective(1200px)
               translate3d(calc(var(--leaf-target-x, 0) * 0.66),
                           calc(var(--leaf-target-y, 0) * 0.6), 0)
               rotateX(calc(var(--leaf-rx, 720deg) * 0.66 - 15deg))
               rotateY(calc(var(--leaf-ry, 540deg) * 0.66 + 20deg))
               rotateZ(calc(var(--leaf-rz, -360deg) * 0.66))
               scale3d(0.96, 0.85, 1);
  }
  80% {
    opacity: 0.55;
  }
  100% {
    transform: perspective(1200px)
               translate3d(var(--leaf-target-x, 0), var(--leaf-target-y, 0), 0)
               rotateX(var(--leaf-rx, 720deg))
               rotateY(var(--leaf-ry, 540deg))
               rotateZ(var(--leaf-rz, -360deg))
               scale3d(0.7, 0.7, 1);
    opacity: 0;
  }
}

/* === iPhone / モバイル向け簡易版アニメ ===
   iOS Safari は perspective() + rotateX/Y + filter: drop-shadow() + 中間 keyframe の
   calc(var() ± offset) を組み合わせると frame rate が落ちて「かくかく」する。
   モバイルでは 2D 回転のみ + filter なし + シンプルな 2 keyframe に切り替える。 */
@media (max-width: 599px) {
    .intro_container .leaf-particle {
        filter: none !important;
    }
    .intro_container.is-windy .leaf-particle {
        animation-duration: 14s !important;
        backface-visibility: visible;
        transform-style: flat; /* preserve-3d は iOS で重いので flat に戻す */
    }
    /* 同名 keyframe を media query 内で再定義 → モバイルでは 2D 版が使われる。
       3D の rotateX/Y / perspective / scale3d / 中間 calc keyframe を全部撤去。 */
    @keyframes leaf-blow {
        0% {
            transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
            opacity: 0;
        }
        10% { opacity: 0.85; }
        85% { opacity: 0.5; }
        100% {
            transform: translate3d(var(--leaf-target-x, 0), var(--leaf-target-y, 0), 0)
                       rotate(-540deg)
                       scale(0.65);
            opacity: 0;
        }
    }
}

.intro_container .wp-block-heading,
.intro_container .introTxt {
  position: relative !important;
  z-index: 10 !important;
}

.intro_container .leaf-particle:nth-child(3) {
  left: -24% !important;
  top: 27% !important;
}

.intro_container .leaf-particle:nth-child(4) {
  right: -15% !important;
  top: 5% !important;
}

.intro_container .leaf-particle:nth-child(5) {
  left: -26% !important;
  top: 60% !important;
}

.intro_container .leaf-particle:nth-child(6) {
  right: -20% !important;
  top: 46% !important;
}

.intro_container .leaf-particle:nth-child(7) {
  right: -5% !important;
  top: 90% !important;
}

@media (max-width: 959px) {
  .intro_container .leaf-particle:nth-child(3) {
    left: -10% !important;
  }

  .intro_container .leaf-particle:nth-child(4) {
    right: -12% !important;
  }

  .intro_container .leaf-particle:nth-child(5) {
    left: -11% !important;
  }

  .intro_container .leaf-particle:nth-child(6) {
    right: -10% !important;
  }

  .intro_container .leaf-particle:nth-child(7) {
    right: -5% !important;
  }
}
@media (max-width: 729px) {
  .intro_container .leaf-particle:nth-child(3) {
    left: -5% !important;
  }

  .intro_container .leaf-particle:nth-child(4) {
    right: 2% !important;
  }

  .intro_container .leaf-particle:nth-child(5) {
    left: -4% !important;
  }

  .intro_container .leaf-particle:nth-child(6) {
    right: -2% !important;
  }

  .intro_container .leaf-particle:nth-child(7) {
    right: 5% !important;
  }
}

/* スマートフォン対応 */
@media (max-width: 599px) {
  .intro_container .leaf-particle:nth-child(3) {
    left: 5% !important;
  }

  .intro_container .leaf-particle:nth-child(4) {
    right: 2% !important;
  }

  .intro_container .leaf-particle:nth-child(5) {
    left: 0% !important;
  }

  .intro_container .leaf-particle:nth-child(6) {
    right: 10% !important;
  }

  .intro_container .leaf-particle:nth-child(7) {
    right: 15% !important;
  }
  .intro_container .introTxt {
    font-size: 16px;
  }
}
/*
サクとコモロのいいトコ -----------------------------------------------------------------------------------------------*/
.goodPoint_container {
  color: var(--color-beige);
  position: relative; /* 桜の花びらレイヤーの基準 */
}

/* === カーソル追従 桜の花びら演出 (sakura-cursor.js が生成) ===
   レイヤーは absolute inset:0 で container を覆う。overflow:hidden で
   既存の mediaTxt_wrapper（左に -50vw 飛び出す）を巻き込まないよう、
   container 本体ではなくレイヤー側で切る。 */
.goodPoint_container .sakura-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 50;
}
.sakura-petal {
  position: absolute;
  pointer-events: none;
  width: 14px;
  height: 18px;
  margin-left: -7px; /* カーソルにセンタリング */
  margin-top: -9px;
  /* 桜の花びらSVG（淡いピンク + 薄い縁取り） */
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 32'%3E%3Cpath d='M12 1 C 18 5 22 13 14 27 L12 30 L10 27 C 2 13 6 5 12 1 Z' fill='%23fce4ec' stroke='%23f4b8d3' stroke-width='0.6' stroke-opacity='0.7'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  filter: drop-shadow(0 1px 2px rgba(244, 184, 211, 0.35));
  opacity: 0;
  animation: sakura-fall var(--sakura-duration, 4s) ease-out forwards;
  will-change: transform, opacity;
}
@keyframes sakura-fall {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(var(--sakura-size, 1));
    opacity: 0;
  }
  10% {
    opacity: 0.95;
  }
  100% {
    transform:
      translate(var(--sakura-drift-x, 30px), var(--sakura-drift-y, 150px))
      rotate(var(--sakura-spin, 360deg))
      scale(calc(var(--sakura-size, 1) * 0.55));
    opacity: 0;
  }
}
.goodPoint_container .h2Title {
  font-weight: 400;
  margin-bottom: 24px !important;
}
.goodPoint_container .h2Title,
.goodPoint_container .good_topTxt {
  font-family: "HannariMincho", serif;
}
.goodPoint_container .good_topTxt {
  font-size: 20px;
}

/* === セクション h2 → 本文 時間差ふわっと表示（共通）===
   section-reveal.js が IntersectionObserver でセクションが画面に入ったら
   .is-revealed を付与。h2 → 本文 を 200ms ずらしてふわっと表示する。
   対象: intro / goodPoint / movie / winter / homeImg / insta / media / voice / game。
   homeImga は独自の char-by-char アニメ + sticky 構造の都合で対象外。
   本文クラスはセクションによって .introTxt / .good_topTxt / .topTxt / .normalTxt が
   混在しているのでセレクタを全部列挙する。 */
.intro_container .h2Title,
.intro_container .introTxt,
.goodPoint_container .h2Title,
.goodPoint_container .good_topTxt,
.movie_container .h2Title,
.movie_container .topTxt,
.winter_container .h2Title,
.winter_container .normalTxt,
.homeImg_container .h2Title,
.insta_container .h2Title,
.insta_container .normalTxt,
.media_container .h2Title,
.media_container .normalTxt,
.voice_container .h2Title,
.voice_container .normalTxt,
.game_container .h2Title,
.game_container .normalTxt {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
/* h2 を先に表示 */
.intro_container.is-revealed .h2Title,
.goodPoint_container.is-revealed .h2Title,
.movie_container.is-revealed .h2Title,
.winter_container.is-revealed .h2Title,
.homeImg_container.is-revealed .h2Title,
.insta_container.is-revealed .h2Title,
.media_container.is-revealed .h2Title,
.voice_container.is-revealed .h2Title,
.game_container.is-revealed .h2Title {
  opacity: 1;
  transform: translateY(0);
}
/* 本文を 200ms 遅らせて表示 */
.intro_container.is-revealed .introTxt,
.goodPoint_container.is-revealed .good_topTxt,
.movie_container.is-revealed .topTxt,
.winter_container.is-revealed .normalTxt,
.insta_container.is-revealed .normalTxt,
.media_container.is-revealed .normalTxt,
.voice_container.is-revealed .normalTxt,
.game_container.is-revealed .normalTxt {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.2s;
}
@media (prefers-reduced-motion: reduce) {
  .intro_container .h2Title,
  .intro_container .introTxt,
  .goodPoint_container .h2Title,
  .goodPoint_container .good_topTxt,
  .movie_container .h2Title,
  .movie_container .topTxt,
  .winter_container .h2Title,
  .winter_container .normalTxt,
  .homeImg_container .h2Title,
  .insta_container .h2Title,
  .insta_container .normalTxt,
  .media_container .h2Title,
  .media_container .normalTxt,
  .voice_container .h2Title,
  .voice_container .normalTxt,
  .game_container .h2Title,
  .game_container .normalTxt {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
.goodPoint_container .mediaTxt_wrapper {
  gap: 24px;
}
.goodPoint_container .mediaTxt_wrapper .wp-block-media-text__content {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding-bottom: 0;
}
.goodPoint_container .mediaTxt_wrapper .mediaRight_txt {
  margin-bottom: 0;
}
/* mediaRight_btnTxt のスタイルは共通の sakukomo-link-btn 側で定義
   色は .goodPoint_container { color: var(--color-beige) } から自動継承 */
.goodPoint_container .mediaTxt_wrapper img {
  border-radius: 12px;
}

@media (max-width: 1499px) {
  .goodPoint_container .mediaTxt_wrapper {
    margin-left: calc(50% - 50vw);
  }
  .goodPoint_container .mediaTxt_wrapper img {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
}
@media (max-width: 959px) {
  .goodPoint_container .good_topTxt {
    font-size: 16px;
  }
  .goodPoint_container .mediaTxt_wrapper {
    display: flex;
    flex-direction: column;
  }
  .goodPoint_container .mediaTxt_wrapper .wp-block-media-text__content {
    padding-left: 15px;
  }
}
/*
動画で恋する、サクとコモロ。 -----------------------------------------------------------------------------------------------*/
.movie_container {
  color: var(--color-orange);
  position: relative;
  isolation: isolate; /* ::before / ::after オーバーレイ用のスタッキングコンテキスト */
}
/* === 深まる秋 → 戻る → また深まる、を繰り返すゆったり呼吸グラデ ===
   2 レイヤー構成:
     ::before = 最終状態（深まる秋のグラデ）。常駐。
     ::after  = 明るいフィルター。ここの opacity を keyframe で 1↔0 に往復させて
                「明 → 深まる秋 → 明 → 深まる秋…」をループさせる。
   トリガーは autumn-deepen.js が IntersectionObserver でセクション入場時に
   .is-deepening を付与 → そこからアニメ開始（無限ループ）。 */

/* ::before: 最終状態の秋グラデーション（上クリーム → 下オレンジ寄り）*/
.movie_container::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(255, 250, 246, 0.30) 0%,
    rgba(255, 250, 246, 0.10) 35%,
    rgba(217, 134, 102, 0.08) 70%,
    rgba(217, 134, 102, 0.30) 100%
  );
}

/* ::after: 明るさのフィルター。
   未発火時は opacity:1（明るい状態で待機）。
   .is-deepening が付いたら autumn-breathe で 1↔0 をループする。 */
.movie_container::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: rgba(255, 250, 246, 0.55);
  opacity: 1;
}
/* 20秒で 1 → 0（じわっと暗くなる）、alternate で 0 → 1（じわっと明るくなる）、
   ease-in-out で折り返しが滑らか、infinite で永遠に呼吸する。 */
.movie_container.is-deepening::after {
  animation: autumn-breathe 20s ease-in-out infinite alternate;
}
@keyframes autumn-breathe {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}
/* prefers-reduced-motion: アニメ停止、最終（暗）状態で固定 */
@media (prefers-reduced-motion: reduce) {
  .movie_container.is-deepening::after {
    animation: none;
    opacity: 0;
  }
}
.movie_container .h2Title,
.movie_container .topTxt {
  font-family: "Shippori Mincho", serif;
}
.movie_container .h2Title {
  font-weight: bold;
}
.movie_container .topTxt {
  font-weight: 500;
  margin-bottom: 160px;
}
.movie_container .movie_columns .left_column {
  padding-top: 40px !important;
}
.movie_container .movie_columns .movie {
  position: relative;
  z-index: 2;
}
.movie_container .movie_columns .movie video {
  border-radius: 24px;
  margin-bottom: 8px;
}
.movie_container .movie_columns .movie::before,
.movie_container .movie_columns .movie::after {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: -10;
}
.movie_container .movie_columns .left_column .movie::before {
  content: url(https://web.ailesys.co.jp/sakukomo/wp-content/uploads/2025/08/リスとクルミ（黒左向き）-1.png);
  top: -110px;
}
.movie_container .movie_columns .right_column .movie::before {
  content: url(https://web.ailesys.co.jp/sakukomo/wp-content/uploads/2025/08/リスとクルミ（黒右向き）-1.png);
  top: -220px;
}
.movie_container .movie_columns .movie figcaption {
  font-size: 18px;
  font-family: kiwi maru, serif;
  font-weight: 500;
  margin-top: 0;
}
@media (max-width: 599px) {
  .movie_container .topTxt {
    margin-bottom: 120px;
  }
  .movie_container .movie_columns .movie::before,
  .movie_container .movie_columns .movie::after {
    transform: unset;
  }
  .movie_container .movie_columns .left_column .movie::before {
    left: 0;
  }
  .movie_container .movie_columns .left_column .movie::after {
    content: url(https://web.ailesys.co.jp/sakukomo/wp-content/uploads/2025/08/リスとクルミ（黒右向き）-2.png);
    top: -140px;
    right: -20px;
    left: unset;
  }
  .movie_container .movie_columns .right_column .movie::before {
    content: none;
  }
}
/* もみじ関連 */
/* もみじ要素の基本スタイル。ふわっと現れて数秒揺れながら降りたらふわっと消える、
   を momiji-random.js がランダムなタイミングで1回ずつ再生する（CSSのループだと
   一定周期になってしまうため、発生タイミングの乱数化はJS側で行う）。
   終了後は opacity:0（このルールの初期値と同じ）に戻るだけなので、
   アニメ終了の切り替えで見た目が変わらず、フリッカーの心配もない。 */
/* 縦の落下(--momiji-y)と横の揺れ・回転(--momiji-x/--momiji-rot)を別アニメーションに
   分離するための登録。分けることで、縦は常にlinear（一定速度で落ちる）、
   横の揺れだけease-in-out（切り返しが滑らか）と、別々のタイミング関数を使える。 */
@property --momiji-y {
  syntax: '<length>';
  inherits: false;
  initial-value: -18vh;
}
@property --momiji-x {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}
@property --momiji-rot {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
.movie_container .momiji-particle {
  position: absolute !important;
  pointer-events: none !important;
  z-index: 1 !important;
  width: 80px !important;
  height: 80px !important;
  background-image: url("https://web.ailesys.co.jp/sakukomo/wp-content/uploads/2025/08/もみじの葉っぱ-1.png") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  opacity: 0;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15)) !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translate3d(var(--momiji-x), var(--momiji-y), 0) rotate(var(--momiji-rot));
  will-change: transform, opacity;
}
.movie_container .momiji-particle.is-falling {
  animation:
    momiji-fall-y 12s linear 1 forwards,
    momiji-sway 12s ease-in-out 1 forwards,
    momiji-fade 12s linear 1 forwards;
}
/* 縦方向は0%→100%までずっと一定速度で降りる（等速）。 */
@keyframes momiji-fall-y {
  0% { --momiji-y: -18vh; }
  100% { --momiji-y: 22vh; }
}
/* 横の揺れ・回転はease-in-out（下のanimation指定）で、切り返しが滑らかになる。 */
@keyframes momiji-sway {
  0% { --momiji-x: 0px; --momiji-rot: 0deg; }
  25% { --momiji-x: 18px; --momiji-rot: 20deg; }
  50% { --momiji-x: -16px; --momiji-rot: -15deg; }
  75% { --momiji-x: 14px; --momiji-rot: 25deg; }
  100% { --momiji-x: -4px; --momiji-rot: 5deg; }
}
/* 現れて数秒ふわふわ揺れながら少し降りたら、そのままふわっと透明になって消える。
   アニメーションの長さ＝表示されている時間そのもの（次に現れるまでの間隔は
   JS側のscheduleFallで管理する）。 */
@keyframes momiji-fade {
  0% { opacity: 0; }
  10% { opacity: 0.7; }
  75% { opacity: 0.7; }
  100% { opacity: 0; }
}

.movie_container .wp-block-heading,
.movie_container .introTxt {
  position: relative !important;
  z-index: 10 !important;
}

.movie_container .momiji-particle:nth-child(4) {
  left: -7% !important;
  top: 27% !important;
}

.movie_container .momiji-particle:nth-child(5) {
  right: -2% !important;
  top: 5% !important;
}

.movie_container .momiji-particle:nth-child(6) {
  left: -10% !important;
  top: 60% !important;
}

.movie_container .momiji-particle:nth-child(7) {
  right: -5% !important;
  top: 46% !important;
}

.movie_container .momiji-particle:nth-child(8) {
  right: 5% !important;
  top: 90% !important;
}
@media (max-width: 1299px) {
  .movie_container .momiji-particle:nth-child(4) {
    left: -3% !important;
  }

  .movie_container .momiji-particle:nth-child(5) {
    right: 1% !important;
  }

  .movie_container .momiji-particle:nth-child(6) {
    left: -6% !important;
  }

  .movie_container .momiji-particle:nth-child(7) {
    right: -2% !important;
  }

  .movie_container .momiji-particle:nth-child(8) {
    right: -5% !important;
  }
}

@media (max-width: 959px) {
  .movie_container .momiji-particle:nth-child(4) {
    left: -4% !important;
  }

  .movie_container .momiji-particle:nth-child(5) {
    right: -4% !important;
  }

  .movie_container .momiji-particle:nth-child(6) {
    left: -1% !important;
  }

  .movie_container .momiji-particle:nth-child(7) {
    right: 0% !important;
  }

  .movie_container .momiji-particle:nth-child(8) {
    right: 8% !important;
  }
}

@media (max-width: 599px) {
  .movie_container .momiji-particle:nth-child(4) {
    left: -6% !important;
  }

  .movie_container .momiji-particle:nth-child(5) {
    right: -6% !important;
  }

  .movie_container .momiji-particle:nth-child(6) {
    left: -5% !important;
  }

  .movie_container .momiji-particle:nth-child(7) {
    right: -1% !important;
    top: 39% !important;
  }
}
/* くり関連 - 上のリスが落としたイメージで上から落下 → 着地後コロコロ転がる
   .movie_container.is-revealed が付くまでは停止（section-reveal.js 流用） */
.movie_container .kuri-particle {
  position: absolute !important;
  pointer-events: none !important;
  z-index: -1 !important;
  width: 80px !important;
  height: 80px !important;
  background-image: url("https://web.ailesys.co.jp/sakukomo/wp-content/uploads/2025/08/くり-2.png") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  opacity: 0;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15)) !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  will-change: transform, opacity;
}
/* animation-play-state のトグルではなく、is-revealed が付いた時に
   初めて animation を割り当てる方式。
   さらに、一発アニメ(iteration-count:1 + forwards)だと「アニメが終わった瞬間」に
   保持のすき間フレームができて一瞬消えて見える環境があったため、
   実際の動き（最初の約5秒）のあとは同じ姿勢のまま15分間保持し続ける
   超ロングループにして、「終了の切り替え」自体が発生しないようにしている。 */
.movie_container.is-revealed .kuri-particle {
  animation: kuri-drop 900s linear infinite;
}
.movie_container .kuri-particle.kuria {
  left: 0 !important;
  bottom: -150px;
  --kuri-rot: 45deg;
  --kuri-roll: 34px;
  animation-delay: 0s;
}
.movie_container .kuri-particle.kurib {
  /* 中央寄せは transform ではなく left の calc で行う
     （transform はアニメーションで丸ごと上書きされるため） */
  left: calc(50% - 40px) !important;
  bottom: -150px;
  --kuri-rot: 20deg;
  --kuri-roll: -30px;
  animation-delay: 1s;
}
.movie_container .kuri-particle.kuric {
  right: 0 !important;
  bottom: -150px;
  --kuri-rot: -8deg;
  --kuri-roll: 26px;
  animation-delay: 2s;
}
/* 落下は一直線に linear（等速）。着地の瞬間だけバックイーズで弾ませ、
   その後は ease-out で転がりながら減速して止まる。
   1%（900s換算で約9秒）で最終姿勢になったら、100%までずっと同じ値で保持。 */
@keyframes kuri-drop {
  0% {
    /* リスの手元からこぼれ落ちる想定の高さ（vh ではなく固定px：
       画面サイズに左右されず「その場から少し上」に留める） */
    transform: translate(0, -300px) rotate(0deg);
    opacity: 0;
  }
  0.03% {
    opacity: 0.7;
  }
  0.43% {
    transform: translate(0, 0) rotate(calc(var(--kuri-rot) + 380deg));
    animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  0.55% {
    transform: translate(calc(var(--kuri-roll) * 0.4), -6px) rotate(calc(var(--kuri-rot) + 470deg));
    animation-timing-function: ease-out;
  }
  0.78%,
  100% {
    transform: translate(var(--kuri-roll), 0) rotate(calc(var(--kuri-rot) + 600deg));
  }
}
@media (max-width: 959px) {
  .movie_container .kuri-particle {
    bottom: -120px !important;
  }
}
@media (max-width: 599px) {
  .movie_container .kuri-particle {
    bottom: -30vw !important;
  }
}
/* 動きを減らしたいユーザー設定への配慮：落下・回転を止めて静止した装飾に戻す */
@media (prefers-reduced-motion: reduce) {
  .movie_container .momiji-particle,
  .movie_container .kuri-particle {
    animation: none !important;
    opacity: 0.7 !important;
  }
  .movie_container .momiji-particle {
    transform: none !important;
  }
  .movie_container .kuri-particle {
    transform: translate(var(--kuri-roll), 0) rotate(var(--kuri-rot)) !important;
  }
}
/*
あなたを迎える、まちへのトビラ -----------------------------------------------------------------------------------------------*/
.winter_container {
  color: var(--color-blue);
  margin-bottom: 0 !important;
  z-index: 99;
  position: relative; /* 雪の絶対配置の基準 */
  text-shadow: 1px 1px 2px rgba(33, 59, 86, 0.8);
} 
/* ====== しんしんと降る雪 (snow-fall.js が生成) ======
   container 内に絶対配置で 40 個の雪粒を降らせる。
   各粒は --snow-* カスタムプロパティで位置・速度・サイズ・透明度・横ドリフトを個別化。
   .snow-fall.is-active のときだけアニメ動作（IntersectionObserver 連動）。 */
.winter_container .snow-fall {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  overflow: hidden; /* 粒がコンテナ外に出ないようクリップ */
}
.winter_container .snow-fall__flake {
  position: absolute;
  top: 0;
  left: var(--snow-left, 50%);
  width: var(--snow-size, 6px);
  height: var(--snow-size, 6px);
  /* 淡い白：純白より少し青みがかった半透明、グローも控えめに */
  background: rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  box-shadow: 0 0 3px rgba(255, 255, 255, 0.3);
  opacity: 0;
  animation: snow-fall var(--snow-duration, 18s) linear var(--snow-delay, 0s) infinite;
  animation-play-state: paused;
  will-change: transform, opacity;
}
.winter_container .snow-fall.is-active .snow-fall__flake {
  animation-play-state: running;
}
@keyframes snow-fall {
  0% {
    transform: translate3d(0, -10vh, 0);
    opacity: 0;
  }
  10% {
    opacity: var(--snow-opacity, 0.6);
  }
  90% {
    opacity: var(--snow-opacity, 0.6);
  }
  100% {
    transform: translate3d(var(--snow-drift, 0), 110vh, 0);
    opacity: 0;
  }
}
/* 動きを減らしたいユーザー設定への配慮 */
@media (prefers-reduced-motion: reduce) {
  .winter_container .snow-fall__flake {
    animation: none !important;
    opacity: var(--snow-opacity, 0.4);
  }
}
.winter_container .normalTxt {
  margin-bottom: 80px;
}
.winter_container .hukei_columns {
  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);
}
.winter_container .hukei_columns.bottomHukei {
  text-align: right;
}
.winter_container .swell-block-columns__inner {
  justify-content: center;
  align-items: center;
}
.winter_container .swell-block-columns .swell-block-column {
  /* width: 50% !important; */
  flex-grow: 1;
}
.winter_container .swell-block-columns__inner,
.winter_container .swell-block-columns .swell-block-column {
  margin-left: 0;
}
.winter_container .hukei_columns .img_column figure {
  width: 100%;
  margin: 0;
  clip-path: polygon(0 0, 50% 0, 100% 100%, 0% 100%);
}
.winter_container .hukei_columns .img_column figure img {
  width: 100%;
  height: auto;
  display: block;
}
.winter_container .hukei_columns.bottomHukei .img_column figure {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 54% 100%);
}
.winter_container .hukei_columns.topHukei .txt_column {
  padding-right: 15px;
}
.winter_container .hukei_columns.bottomHukei .txt_column {
  padding-left: 15px;
}
.winter_container .txtGroup {
  display: inline-block;
  text-align: left;
  font-size: 16px;
  padding: 16px;
  max-width: 510px;
  background: linear-gradient(
    275.11deg,
    rgba(129, 166, 198, 0.1) 0%,
    rgba(84, 126, 164, 0.3) 100%
  );
  backdrop-filter: blur(3px);
  border-radius: 12px;
}
.winter_container .h3Title {
  font-size: 24px;
  font-weight: 500;
  margin-bottom: 16px !important;
}
@media (max-width: 959px) {
  .winter_container .hukei_columns.bottomHukei .swell-block-columns__inner {
    flex-direction: column-reverse;
  }
  .winter_container .hukei_columns.topHukei {
    margin-bottom: 80px !important;
  }
  .winter_container .swell-block-columns .swell-block-column {
    width: 100%;
  }
  .winter_container .hukei_columns .txt_column {
    padding: 0 15px;
  }
  .winter_container .swell-block-columns .swell-block-column {
    text-align: center;
  }
}
/* === 「あなたを迎える、まちへのトビラ」ペア演出（B: 出会う + D: 共通フロート）===
   section-reveal.js が各 .hukei_columns を独立に観察し、画面に入ると .is-revealed を付与。
   - B: 画像と文字が外側から斜めの境界へ向かってスライドインし「出会う」
   - D: スライド完了後、ペアで同じ周期の上下フロートを継続（呼吸感）
   トランジションは translateX、フロートは translateY を使うので transform 系が衝突せず
   アニメ開始時点で transition による translateX(0) と animation 0% の translateY(0) が
   同じ視覚位置になり、ジャンプしない。 */
.winter_container .hukei_columns .img_column,
.winter_container .hukei_columns .txt_column {
  opacity: 0;
  transition: opacity 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform, opacity;
}
.winter_container .hukei_columns.topHukei .img_column {
  transform: translateX(-40px);
}
.winter_container .hukei_columns.topHukei .txt_column {
  transform: translateX(40px);
}
.winter_container .hukei_columns.bottomHukei .img_column {
  transform: translateX(40px);
}
.winter_container .hukei_columns.bottomHukei .txt_column {
  transform: translateX(-40px);
}
.winter_container .hukei_columns.is-revealed .img_column,
.winter_container .hukei_columns.is-revealed .txt_column {
  opacity: 1;
  transform: translateX(0);
  animation: winterPairFloat 6.5s ease-in-out 0.9s infinite;
}
@keyframes winterPairFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
/* モバイルは縦積みなので「左右で出会う」が成立しない → 縦のふわっと出現に切り替え */
@media (max-width: 959px) {
  .winter_container .hukei_columns.topHukei .img_column,
  .winter_container .hukei_columns.topHukei .txt_column,
  .winter_container .hukei_columns.bottomHukei .img_column,
  .winter_container .hukei_columns.bottomHukei .txt_column {
    transform: translateY(24px);
  }
  .winter_container .hukei_columns.is-revealed .img_column,
  .winter_container .hukei_columns.is-revealed .txt_column {
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .winter_container .hukei_columns .img_column,
  .winter_container .hukei_columns .txt_column,
  .winter_container .hukei_columns.is-revealed .img_column,
  .winter_container .hukei_columns.is-revealed .txt_column {
    opacity: 1;
    transform: none;
    transition: none;
    animation: none;
  }
}
/* 雪の結晶 */
.winter_container .snowFlake-particle {
  position: absolute !important;
  pointer-events: none !important;
  z-index: 1 !important;
  width: 80px !important;
  height: 80px !important;
  background-image: url("https://web.ailesys.co.jp/sakukomo/wp-content/uploads/2025/08/冬の結晶.png") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  opacity: 0.7 !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15)) !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  animation: none !important;
}

.winter_container .wp-block-heading,
.winter_container .introTxt {
  position: relative !important;
  z-index: 10 !important;
}

.winter_container .snowFlake-particle:nth-child(5) {
  right: -2% !important;
  top: 5% !important;
}

.winter_container .snowFlake-particle:nth-child(6) {
  left: -10% !important;
  top: 60% !important;
}

.winter_container .snowFlake-particle:nth-child(7) {
  right: -5% !important;
  top: 46% !important;
}

.winter_container .snowFlake-particle:nth-child(8) {
  right: 5% !important;
  top: 90% !important;
}
@media (max-width: 1299px) {
  .winter_container .snowFlake-particle:nth-child(5) {
    right: 1% !important;
  }

  .winter_container .snowFlake-particle:nth-child(6) {
    left: -6% !important;
  }

  .winter_container .snowFlake-particle:nth-child(7) {
    right: -2% !important;
  }

  .winter_container .snowFlake-particle:nth-child(8) {
    right: -5% !important;
  }
}

@media (max-width: 959px) {
  .winter_container .snowFlake-particle:nth-child(5) {
    right: -4% !important;
  }

  .winter_container .snowFlake-particle:nth-child(6) {
    left: -1% !important;
  }

  .winter_container .snowFlake-particle:nth-child(7) {
    right: 0% !important;
  }

  .winter_container .snowFlake-particle:nth-child(8) {
    right: 8% !important;
  }
}

@media (max-width: 599px) {
  .winter_container .snowFlake-particle:nth-child(5) {
    right: -6% !important;
  }

  .winter_container .snowFlake-particle:nth-child(6) {
    left: -5% !important;
  }

  .winter_container .snowFlake-particle:nth-child(7) {
    right: -1% !important;
    top: 39% !important;
  }
}
/* 
ここ、いいな。 -----------------------------------------------------------------------------------------------*/
.homeImg_container {
  position: relative;
}
.homeImg_container.demo {
  display: none;
}
.homeImg_container .swell-block-fullWide__inner {
  position: static;
  display: flex;
  justify-content: center;
  align-items: center;
}
.homeImg_container .h2Title {
  font-family: "Kiwi Maru", serif;
  font-weight: 500;
  font-size: 24px !important;
  writing-mode: vertical-rl;
  line-height: 2.4;
  letter-spacing: 0.2em;
  text-align: justify;
  color: var(--color-orange);
}
.homeImg_container .h2Title:before {
  content: none;
}
.homeImg_container
  h2:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title)) {
  background: unset !important;
}
.homeImg_container .fourImg {
  position: absolute;
}
.homeImg_container .fourImg:nth-of-type(1) {
  top: 160px;
  right: 0;
}
.homeImg_container .fourImg:nth-of-type(2) {
  top: 25%;
  left: 0;
}
.homeImg_container .fourImg:nth-of-type(3) {
  right: 96px;
  bottom: 196px;
}
.homeImg_container .fourImg:last-child {
  bottom: 160px;
  left: 258px;
}
@media (max-width: 1299px) {
  .homeImg_container .fourImg:nth-of-type(1) {
    top: 160px;
    right: -12vw;
  }
  .homeImg_container .fourImg:nth-of-type(2) {
    top: 29%;
    left: -6vw;
  }
  .homeImg_container .fourImg:nth-of-type(3) {
    right: 4vw;
    bottom: 196px;
  }
  .homeImg_container .fourImg:last-child {
    bottom: 160px;
    left: 14vw;
  }
}
@media (max-width: 959px) {
  .homeImg_container .swell-block-fullWide__inner {
    min-height: 600px;
  }
  .homeImg_container .fourImg {
    width: 50%;
    height: 50%;
  }
  .homeImg_container .fourImg:nth-of-type(1) {
    top: 40px;
    right: -12vw;
  }
  .homeImg_container .fourImg:nth-of-type(2) {
    top: 9%;
    left: -23vw;
  }
  .homeImg_container .fourImg:nth-of-type(3) {
    right: -16vw;
    bottom: -114px;
  }
  .homeImg_container .fourImg:last-child {
    bottom: -140px;
    left: -6vw;
  }
}
@media (max-width: 599px) {
  .homeImg_container .swell-block-fullWide__inner {
    min-height: 480px;
  }
  .homeImg_container .fourImg {
    display: none;
  }
}

/* 横並び用 */
/* .homeImga_container 配下のみに適用 */
.homeImga_container {
  position: relative !important;
  height: 220vh !important; /* 内側 sticky 100vh × ピン1画面ぶん */
  margin: 0 !important;
  padding: 120px 0 !important;
}

.homeImga_container .swell-block-fullWide__inner {
  position: sticky !important;
  top: 0 !important;
  height: 100vh !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  z-index: 30 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* テキスト部分のスタイル（縦書き和風デザイン） */
.homeImga_container .h2Title {
  position: relative !important;
  z-index: 30 !important;
  font-family: "Kiwi Maru", serif !important;
  font-weight: 500 !important;
  font-size: 24px !important;
  writing-mode: vertical-rl !important;
  line-height: 2.4 !important;
  letter-spacing: 0.2em !important;
  text-align: justify !important;
  color: var(--color-orange) !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
  display: block !important;

  /* 文字アニメーション中も縦書きを保持 */
  overflow: visible !important;
}

/* 1文字ずつアニメーション用のスタイル */
.homeImga_container .h2Title .char {
  display: inline-block !important;
  opacity: 0 !important;
  transform: translateY(30px) !important;
  transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* アニメーション完了後の状態 */
.homeImga_container .h2Title .char.animated {
  opacity: 1 !important;
  transform: translateY(0px) !important;
}

/* 既存のカラムレイアウトを無効化 */
.homeImga_container .swell-block-columns {
  display: contents !important;
}

.homeImga_container .swell-block-columns__inner {
  display: contents !important;
}

.homeImga_container .left_column,
.homeImga_container .right_column {
  position: static !important;
  width: auto !important;
  height: auto !important;
  display: contents !important;
}

/* 画像を絶対配置で背景に配置 */
.homeImga_container .fourImg {
  position: absolute !important;
  z-index: 10 !important;
  opacity: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translateY(100px) !important;
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  display: block !important;

  /* 4:3のアスペクト比を設定 */
  aspect-ratio: 4/3 !important;
}

.homeImga_container .fourImg img {
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
  display: block !important;
}

/* 13個の画像の配置 - バランスよく配置 */
.homeImga_container .fourImg:nth-of-type(1) {
  top: 5% !important;
  right: 28% !important;
  width: 220px !important;
}

.homeImga_container .fourImg:nth-of-type(2) {
  top: 20% !important;
  left: 10% !important;
  width: 180px !important;
}

.homeImga_container .fourImg:nth-of-type(3) {
  top: 27% !important;
  right: 5% !important;
  width: 160px !important;
}

.homeImga_container .fourImg:nth-of-type(4) {
  top: 32% !important;
  left: 14% !important;
  width: 200px !important;
}

.homeImga_container .fourImg:nth-of-type(5) {
  top: 60% !important;
  right: 16% !important;
  width: 240px !important;
}

.homeImga_container .fourImg:nth-of-type(6) {
  top: 70% !important;
  left: 30% !important;
  width: 190px !important;
}

.homeImga_container .fourImg:nth-of-type(7) {
  top: -6% !important;
  left: 20% !important;
}

.homeImga_container .fourImg:nth-of-type(8) {
  top: 10% !important;
  left: 42% !important;
}

.homeImga_container .fourImg:nth-of-type(9) {
  top: 13% !important;
  right: 7% !important;
}

.homeImga_container .fourImg:nth-of-type(10) {
  top: 16% !important;
  left: 24% !important;
}

.homeImga_container .fourImg:nth-of-type(11) {
  top: 39% !important;
  right: 8% !important;
}

.homeImga_container .fourImg:nth-of-type(12) {
  top: 60% !important;
  left: 16% !important;
}

.homeImga_container .fourImg:nth-of-type(13) {
  top: 58% !important;
  right: 32% !important;
}

/* レスポンシブ対応 */
@media (max-width: 959px) {
  .homeImga_container .swell-block-fullWide__inner {
    height: 100vh !important;
  }

  .homeImga_container .h2Title {
    font-size: 20px !important;
  }

  .homeImga_container .fourImg:nth-of-type(1) {
    top: 5% !important;
    right: 10% !important;
    width: 220px !important;
  }

  .homeImga_container .fourImg:nth-of-type(2) {
    top: 16% !important;
    left: 0% !important;
    width: 180px !important;
  }

  .homeImga_container .fourImg:nth-of-type(3) {
    top: 32% !important;
    right: -1% !important;
    width: 190px !important;
  }

  .homeImga_container .fourImg:nth-of-type(4) {
    top: 40% !important;
    left: 2% !important;
    width: 240px !important;
  }

  .homeImga_container .fourImg:nth-of-type(5) {
    top: 60% !important;
    right: 3% !important;
    width: 240px !important;
  }

  .homeImga_container .fourImg:nth-of-type(6) {
    top: 70% !important;
    left: 17% !important;
    width: 190px !important;
  }

  /* .homeImga_container .fourImg:nth-of-type(7) {
    top: 52% !important;
    right: 20% !important;
  }

  .homeImga_container .fourImg:nth-of-type(8) {
    top: 60% !important;
    left: 8% !important;
  }

  .homeImga_container .fourImg:nth-of-type(9) {
    top: 68% !important;
    right: 8% !important;
  } */

  .homeImga_container .fourImg:nth-of-type(10) {
    top: 27% !important;
    left: 10% !important;
  }

  .homeImga_container .fourImg:nth-of-type(11) {
    top: 51% !important;
    right: 6% !important;
    width: 160px;
  }

  .homeImga_container .fourImg:nth-of-type(12) {
    top: 88% !important;
    left: 15% !important;
  }

  .homeImga_container .fourImg:nth-of-type(13) {
    top: 78% !important;
    right: 20% !important;
    width: 120px;
  }
}

@media (max-width: 699px) {
  .homeImga_container .fourImg:nth-of-type(1) {
    width: 160px !important;
  }

  .homeImga_container .fourImg:nth-of-type(2) {
    left: -1% !important;
  }
  .homeImga_container .fourImg:nth-of-type(4) {
    width: 160px !important;
  }

  .homeImga_container .fourImg:nth-of-type(5) {
    top: 67% !important;
    right: 1% !important;
    width: 200px !important;
  }

  .homeImga_container .fourImg:nth-of-type(6) {
    top: 64% !important;
    left: 7% !important;
  }
}
@media (max-width: 599px) {
  .homeImga_container .fourImg:nth-of-type(1) {
    width: 160px !important;
  }

  .homeImga_container .fourImg:nth-of-type(2) {
    width: 140px !important;
  }
  .homeImga_container .fourImg:nth-of-type(3) {
    right: -1% !important;
    width: 110px !important;
  }
  .homeImga_container .fourImg:nth-of-type(4) {
    width: 100px !important;
  }

  .homeImga_container .fourImg:nth-of-type(5) {
    top: 62% !important;
    right: 1% !important;
    width: 140px !important;
  }

  .homeImga_container .fourImg:nth-of-type(6) {
    top: 66% !important;
    left: 5% !important;
    width: 130px !important;
  }
}

@media (min-width: 1440px) {
  .homeImga_container .fourImg:nth-of-type(1) {
    width: 260px !important;
  }

  .homeImga_container .fourImg:nth-of-type(2) {
    width: 220px !important;
  }

  .homeImga_container .fourImg:nth-of-type(3) {
    width: 200px !important;
  }

  .homeImga_container .fourImg:nth-of-type(4) {
    width: 320px !important;
  }

  .homeImga_container .fourImg:nth-of-type(5) {
    width: 320px !important;
  }

  .homeImga_container .fourImg:nth-of-type(6) {
    width: 230px !important;
  }
}
.homeImga_container .fourImg:nth-of-type(7),
.homeImga_container .fourImg:nth-of-type(8),
.homeImga_container .fourImg:nth-of-type(9),
.homeImga_container .fourImg:nth-of-type(10),
.homeImga_container .fourImg:nth-of-type(11),
.homeImga_container .fourImg:nth-of-type(12),
.homeImga_container .fourImg:nth-of-type(13) {
  aspect-ratio: unset !important;
  z-index: -999 !important;
}
.homeImga_container .fourImg:nth-of-type(7) img,
.homeImga_container .fourImg:nth-of-type(8) img,
.homeImga_container .fourImg:nth-of-type(9) img,
.homeImga_container .fourImg:nth-of-type(10) img,
.homeImga_container .fourImg:nth-of-type(11) img,
.homeImga_container .fourImg:nth-of-type(12) img,
.homeImga_container .fourImg:nth-of-type(13) img {
  box-shadow: unset !important;
}
/*
サクコモ日和（インスタ表示） -----------------------------------------------------------------------------------------------*/
/* Smash Balloon Instagram Feed の #sbi_images を画面いっぱい一列横並びに
   .insta_container 内の .l-container は max-width で制約されているので、
   #sbi_images だけビューポート幅にbreakoutする */
#insta .l-container {
  perspective: 1000px;
}
/* base 状態に display と回転軸を確定させる。ホバー時に display を切り替えると
   レイアウトが揺れて hover 判定がチラつき、アニメーションが再起動 → 位置ずれ
   → また hover 解除…のループで「がくがく」する原因になっていた。 */
.insta_img {
  display: inline-block;
  transform-origin: center;
  cursor: pointer;
  margin-bottom: 0;
}
/* DOM: <div.insta_img>（inline-block・回らない）> <figure>（回す）> <a> > <img>
   回転を内側の <figure> に当て、ホバー判定は回らない <div.insta_img> に残すのがキモ。
   理由: 回転している要素自身をホバー対象にすると、rotateY 90°付近で要素が真横を
   向いて当たり判定が細くなり、ポインタが端寄りだと一瞬枠外に出て hover が外れる
   → 回転リセット → 再 hover → 最初から…を繰り返して「かくっ」となる
   （ホバー位置で症状が変わるのはこのため）。
   div は inline-block でフロートの figure を内包し実体サイズを持つので、回らない
   安定したホバー領域になり、どこをホバーしても滑らかに 1 回転する。 */
.insta_img > figure {
  transform-origin: center;
}
.insta_img:hover > figure {
  animation: rotation-y 2.5s linear 1;
}
/* リンク＋ライトボックスで SWELL が内側の <a>/<img> に付けるホバー拡大(scale)・透過・
   transition を打ち消す（rotateY との競合防止）。クリック遷移は有効なまま。
   ★回転する <figure> には transform の !important を当てない（!important は animation を
     上書きして回転を止めるため）。拡大が乗るのは <a>/<img> なのでそちらだけ無効化。 */
.insta_img a,
.insta_img img {
  transition: none !important;
  transform: none !important;
  opacity: 1 !important;
}

@keyframes rotation-y {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}

.sb_instagram_header.sbi_medium,
#sbi_load {
  display: none;
}
.insta_container {
  padding-bottom: 0 !important;
  margin-bottom: 1em;
} 
/* 表示窓：ビューポート幅 */
.insta_container #sbi_images {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  position: relative !important;
  width: 100vw !important;
  max-width: 100vw !important;
  left: 50% !important;
  margin-left: -50vw !important;
  margin-right: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}
#sbi_images::-webkit-scrollbar {
  height: 6px;
}
#sbi_images::-webkit-scrollbar-track {
  background: transparent;
}
#sbi_images::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

/* === 流れるアニメーション ===
   insta-marquee.js が #sbi_images 内のアイテムを .sbi-marquee-track でラップ＋複製。
   ここでは display を flex から block に上書きして、track 側に流すレイアウトを当てる。 */
.insta_container #sbi_images {
  display: block !important;
  overflow: hidden !important;
}
.insta_container #sbi_images .sbi-marquee-track {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  width: max-content !important;
  gap: 0 !important;
  animation: sbi-marquee 60s linear infinite;
  /* 画像が揃うまでアニメを止めておく（insta-marquee.js が完了後に .is-ready を付与）。
     これで「ロード中の画像が空白で流れていく」現象を防ぐ。 */
  animation-play-state: paused;
  will-change: transform;
}
.insta_container #sbi_images .sbi-marquee-track.is-ready {
  animation-play-state: running;
}
/* ホバー時は ID 込みで specificity が高いので、ここで paused に上書きされる */
.insta_container #sbi_images:hover .sbi-marquee-track {
  animation-play-state: paused;
}
@keyframes sbi-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* 各投稿アイテム：固定サイズの正方形（JS実行前に直接子の場合も両方カバー） */
.insta_container #sbi_images .sbi_item {
  flex: 0 0 240px !important;
  width: 240px !important;
  height: 240px !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important; /* ぴよまる（.sbi-piyo-rider）の絶対配置の基準 */
}

/* ぴよまるが（ランダムに 1 つだけ選ばれたアイテムに）「乗って流れる」演出。
   insta-marquee.js が clone の後に追加するので 1 サイクル＝1 出現＝数秒見える程度。
   #sbi_images 側の padding-top でアイテムから上にはみ出すぶんを確保。 */
.sbi-piyo-rider {
  position: absolute !important;
  top: -40px !important;             /* アイテム上端から 40px 飛び出す */
  left: 50% !important;
  width: 64px !important;
  height: 64px !important;
  transform: translateX(-50%);
  background-image: url(https://web.ailesys.co.jp/sakukomo/wp-content/uploads/2025/08/piyimaru1.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom center;
  pointer-events: none;
  z-index: 20 !important;
  /* 1: 下に流れる画像から「ぴょんっ」と上に飛び出す入場（1 回だけ）
     2: その後ろで、流れに揺られる左右ロッキング（無限ループ）
     pop が終わってから ride が始まるよう ride 側に delay を入れる。 */
  animation:
    insta-piyo-pop  0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both,
    insta-piyo-ride 1.6s ease-in-out 0.6s infinite alternate;
}
/* 「画像の裏からぴょんと出てくる」アニメ。
   開始: translateY(64px) で piyo の見た目位置はちょうど画像の中（top:-64 + 64 = 0）→
         画像と完全に重なる。piyo は z-index:-1 で画像の裏にいるので、ユーザーには見えない。
   終了: translateY(0) で piyo は画像の上端より上にせり出す → 画像の裏から徐々に
         頭を出して、最後に画像の上にちょこんと乗っかる絵になる。
   translateX(-50%) は中心揃え用（element 直書きと同値）を毎フレーム維持。 */
@keyframes insta-piyo-pop {
  0%   { transform: translateX(-50%) translateY(64px); }
  100% { transform: translateX(-50%) translateY(0); }
}
@keyframes insta-piyo-ride {
  from { rotate: -5deg; translate: 0 0; }
  to   { rotate: 5deg;  translate: 0 -3px; }
}
@media (prefers-reduced-motion: reduce) {
  .sbi-piyo-rider { animation: none; }
}
.insta_container #sbi_images .sbi_item .sbi_photo_wrap {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
.insta_container #sbi_images .sbi_item .sbi_photo {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  overflow: hidden !important;
  position: relative !important;
  /* 画像が瞬間的にロード抜けしても真っ白にならないよう、温かみのある placeholder を敷く */
  background: linear-gradient(135deg, #f5e8e0, #e8d5cb) !important;
}
.insta_container #sbi_images .sbi_item .sbi_photo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform var(--hover-duration) var(--hover-ease);
}
.insta_container #sbi_images .sbi_item .sbi_photo:hover img {
  transform: scale(1.04);
}

@media (max-width: 599px) {
  .insta_container #sbi_images .sbi_item {
    flex: 0 0 220px !important;
    width: 220px !important;
    height: 220px !important;
  }
}

/*
サクとコモロのヒトの声（口コミバブル） -----------------------------------------------------------------------------------------------*/
/* [random_bubbles] ショートコードの出力スタイル
   3件ランダムの口コミ投稿（review CPT）を写真+バブルで表示
   親要素はSWELLのフルワイドブロック（背景画像はブロック設定）想定 */
.voice_container .normalTxt {
  margin-bottom: 4em;
}
.hitoVoice_container {
  position: relative;
  width: 100%;
  max-width: 1600px; /* 幅広画面でアイテムが間延びしないよう上限 */
  min-height: 600px;
  margin: 0 auto;
}

/* 装飾：気球 */
.hitoVoice__balloon {
  position: absolute;
  pointer-events: none;
  z-index: 1;
}
.hitoVoice__balloon img {
  width: 100%;
  height: auto;
  display: block;
}
.hitoVoice__balloon--1 {
  top: -25%;
  left: 14%;
  width: 80px;
}
.hitoVoice__balloon--2 {
  top: -35%;
  right: 20%;
  width: 132px;
}
.hitoVoice__balloon--3 {
  bottom: 0%;
  right: -4%;
  width: 256px;
}

/* === 構造の方針 ===
   item 自体を position: absolute（=コンテナ内の配置基準）にし、サイズはバブルと同じ。
   バブルは item を埋める。写真は item に対する絶対配置で、--photo-cx/cy で「写真の中心が
   バブル内のどこに来るか」を %指定する。
   - 0%   = バブル左端 / 上端
   - 50%  = バブル中央
   - 100% = バブル右端 / 下端
   - 0%以下 / 100%超でバブルの外にはみ出す
   サイズは clamp() でビューポート幅に応じてスムーズにスケール → 重なり比率は維持される。
*/
.hitoVoice__items {
  position: relative;
  width: 100%;
  height: 100%;
}

.hitoVoice__item {
  position: absolute;
  width: var(--bubble-size);
  height: var(--bubble-size);
}

/* バブル：itemを丸ごと埋める */
.hitoVoice__item .hitoVoice__bubble {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 2;
  background: linear-gradient(
    135deg,
    rgba(195, 225, 230, 0.55),
    rgba(140, 195, 215, 0.65)
  );
  border-radius: 50%;
  padding: 14% 12%;
  box-sizing: border-box;
  color: var(--color-white);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  box-shadow: inset 0 0 40px rgba(255, 255, 255, 0.35),
    0 4px 16px rgba(0, 0, 0, 0.1);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

/* バブル下のひも（SVGで描画、全バブル共通）
   位置: バブル真下中央から下に伸びる
   z-index: バブルと同じ(2) */
.hitoVoice__item::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 31px;
  height: 96px;
  z-index: 2;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='31' height='96' viewBox='0 0 31 96' fill='none'%3E%3Cpath d='M28.5968 0.308178C14.922 17.7422 -27.8793 49.7275 29.9586 95.487' stroke='%23AD7763'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}

/* 写真：item（=バブル）に対する絶対配置、中心を --photo-cx/cy へ */
.hitoVoice__item .hitoVoice__photo {
  position: absolute;
  width: var(--photo-size);
  height: var(--photo-size);
  left: calc(var(--photo-cx) - var(--photo-size) / 2);
  top: calc(var(--photo-cy) - var(--photo-size) / 2);
  margin: 0;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  background: var(--color-white);
  z-index: 3;
  border: 1px solid #fff;
}
.hitoVoice__item .hitoVoice__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* テキスト */
.hitoVoice__text {
  font-size: 14px;
  line-height: 1.85;
  margin: 0 0 16px;
  letter-spacing: 0.02em;
  display: -webkit-box;
  -webkit-line-clamp: 8;
  line-clamp: 8;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hitoVoice__meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: clamp(12px, 0.9vw, 14px);
  line-height: 1.6;
}
.hitoVoice__name { font-weight: 500; }
.hitoVoice__years { opacity: 0.9; }

/* === 各 item の配置 ===
   サイズは clamp(min, vw値, max) でビューポートにスムーズ追従するので、
   ブレイクポイントごとにサイズを書き換える必要なし。
   --photo-cx, --photo-cy は写真の重なり位置（バブルに対する%）。 */

/* item 1: 左 — 写真がバブルの左上にはみ出す */
.hitoVoice__item--1 {
  --bubble-size: clamp(280px, 24vw, 400px);
  --photo-size: clamp(140px, 14vw, 220px);
  --photo-cx: 15%;
  --photo-cy: 10%;
  top: 22%;
  left: 6%;
  transform: rotate(6deg);
}

/* item 2: 中央 — 写真がバブルの下にはみ出す */
.hitoVoice__item--2 {
  --bubble-size: clamp(280px, 24vw, 400px);
  --photo-size: clamp(120px, 12vw, 200px);
  --photo-cx: 85%;
  --photo-cy: 105%;
  top: 5%;
  left: 38%;
  transform: rotate(-2deg);
}

/* item 3: 右 — 写真がバブルの右上にはみ出す */
.hitoVoice__item--3 {
  --bubble-size: clamp(280px, 24vw, 400px);
  --photo-size: clamp(110px, 11vw, 180px);
  --photo-cx: 80%;
  --photo-cy: -5%;
  top: 5%;
  right: 4%;
  transform: rotate(-4deg);
}

/* === バブルふわふわ floating ===
   3つの item を少しずつ違うタイミング・速度で上下にゆったり浮かす。
   各 item は元々 rotate を持つので、keyframe で rotate を保ったまま translateY だけ動かす。
   negative delay で初期位相をずらして「全部同期して動く」のを回避。
   prefers-reduced-motion 時はアニメ停止（rest 位置の rotate 静止状態に戻る）。 */
.hitoVoice__item--1 {
  animation: voice-float-1 4.5s ease-in-out infinite alternate;
}
.hitoVoice__item--2 {
  animation: voice-float-2 5s ease-in-out infinite alternate;
  animation-delay: -1.5s;
}
.hitoVoice__item--3 {
  animation: voice-float-3 4s ease-in-out infinite alternate;
  animation-delay: -3s;
}
/* 控えめな ふわふわ。translateY ±5〜6px 程度、回転も ±1deg 揺らす。
   静止時の rotate（6/-2/-4deg）を中心に微妙にゆらぐ。 */
@keyframes voice-float-1 {
  0%   { transform: rotate(5deg)  translateY(4px); }
  100% { transform: rotate(7deg)  translateY(-10px); }
}
@keyframes voice-float-2 {
  0%   { transform: rotate(-3deg) translateY(5px); }
  100% { transform: rotate(-1deg) translateY(-12px); }
}
@keyframes voice-float-3 {
  0%   { transform: rotate(-5deg) translateY(3px); }
  100% { transform: rotate(-3deg) translateY(-9px); }
}
@media (prefers-reduced-motion: reduce) {
  .hitoVoice__item--1,
  .hitoVoice__item--2,
  .hitoVoice__item--3 {
    animation: none;
  }
}

/* === レスポンシブ === */
/* 1200px以下：固定サイズに切替（clamp の上限/下限を超える調整が必要なため） */
@media (max-width: 1200px) {
  .hitoVoice_container {
    min-height: 400px;
  }
  .hitoVoice__item--1 {
    --bubble-size: 280px;
    --photo-size: 160px;
    top: 16%;
    left: 7vw;
  }
  .hitoVoice__item--2 {
    --bubble-size: 280px;
    --photo-size: 140px;
    top: 0%;
    left: 37vw;
  }
  .hitoVoice__item--3 {
    --bubble-size: 280px;
    --photo-size: 120px;
    top: 12%;
    right: 4vw;
  }
  .hitoVoice__balloon--1 { 
    width: 80px;
    top: -56%;
  }
  .hitoVoice__balloon--2 { 
    width: 120px;
    top: -70%;
    right: 17%;
  }
  .hitoVoice__balloon--3 { 
    width: 160px; 
  }
}

@media (min-width: 960px) {
  .hitoVoice__item.hitoVoice__item--1 .hitoVoice__photo,
  .hitoVoice__item.hitoVoice__item--3 .hitoVoice__photo {
    z-index: -1;
  }
}

/* 959px以下：縦並び＋写真は全 item 共通で「上中央、半分バブルに重ねる」(Dパターン) */
/* タブレット以下：100vh の sticky な「窓」+ スクロール位置をトリガーにした
   state ベースのバブル切替。実際のモーションは CSS transition が担当するので、
   スクロール量に直接連動せず「きっかけ → ふわ〜っと」のアニメになる。
   状態:
     初期        B1 中央  / B2 下に隠れ / B3 下に隠れ
     .show-2     B1 上に消える / B2 中央 / B3 下に隠れ
     .show-3     B1 上に消える / B2 上に消える / B3 中央
   トリガーは hito-voice-stack.js が scroll 進行度に応じてクラスを付け替える。 */
@media (max-width: 959px) {
  /* === Scroll snap: バブル中央で強制停止 ===
     hito-voice-stack.js が container 内に 3 つの不可視 .hitoVoice__snap を挿入。
     html.voice-snap-active は bubble セクションが viewport にいる間だけ付くので、
     他セクションのスクロールは邪魔しない。
     scroll-snap-stop: always で「フリックで通り過ぎようとしても各 target で停止」する。 */
  html.voice-snap-active {
    scroll-snap-type: y proximity;
  }
  .hitoVoice__snap {
    position: absolute;
    left: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .voice_container .normalTxt.text-orange {
    margin-bottom: 0;
  }
  .hitoVoice_container {
    /* 500vh = 各バブル state に ~167vh のスクロール予算を割り当てる。
       300vh だと iOS フリックで一気に通り過ぎてしまう問題への対策。 */
    height: 500vh;
    min-height: 0;
    padding: 0;
    margin: 0 auto;
  }
  .hitoVoice__items {
    position: sticky;
    top: 0;
    height: 100vh;
    display: block;            /* flex をリセット */
    align-items: unset;
    flex-direction: unset;
    gap: 0;
    overflow: visible;
  }
  .hitoVoice__item {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    margin: 0 !important;
    /* バブルが中央に届くまでの時間。5s → 2.5s に短縮して、フリックで進んでも
       読みたい瞬間に既に中央に来ているようにする。 */
    transition: transform 2.5s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 1.2s ease-out,
                translate 0.6s ease-out;
    /* 既存の voice-float-* アニメ（ふわふわ）は state ベースに切り替えるため無効化 */
    animation: none !important;
    will-change: transform, opacity, translate;
  }
  /* 中央に居るバブルだけ ふわふわさせる。translate プロパティを使うので
     transform による state 駆動の移動とは干渉せず、両方を同時に走らせられる。
     .is-centered は JS 側で state 切替と同時に付与される（バブルが上がってくる
     途中からふわふわスタート）。 */
  .hitoVoice__item.is-centered {
    /* 2 キーフレーム + alternate：両端のみ速度ゼロで、中間はサイン波に近い
       連続したモーションになる（多キーフレームの境目で発生する カクつきを回避）。 */
    animation: voice-bob 4.5s ease-in-out infinite alternate !important;
  }
  @keyframes voice-bob {
    from { translate: 0 0; }
    to   { translate: 0 -14px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .hitoVoice__item.is-centered {
      animation: none !important;
    }
  }
  /* 初期状態：B1 だけ中央表示、B2/B3 は下に隠れて待機。
     section が viewport に入ってきた瞬間からすでに B1 が見える状態にすることで
     「最初のバブルが出るまで空白」を回避。B1 から B2 への切替は state thresholds が決める。 */
  .hitoVoice__item--1 {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  .hitoVoice__item--2,
  .hitoVoice__item--3 {
    transform: translate(-50%, calc(-50% + 80vh));
    opacity: 0;
  }
  /* state-2: B1 が上に去る、B2 が中央へ */
  .hitoVoice_container.show-2 .hitoVoice__item--1,
  .hitoVoice_container.show-3 .hitoVoice__item--1 {
    transform: translate(-50%, calc(-50% - 80vh));
    opacity: 0;
  }
  .hitoVoice_container.show-2 .hitoVoice__item--2 {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  /* state-3: B2 も上に去り、B3 が中央へ */
  .hitoVoice_container.show-3 .hitoVoice__item--2 {
    transform: translate(-50%, calc(-50% - 80vh));
    opacity: 0;
  }
  .hitoVoice_container.show-3 .hitoVoice__item--3 {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  /* 全 item 共通：バブル中央 + 写真上中央 */
  .hitoVoice__item--1,
  .hitoVoice__item--2,
  .hitoVoice__item--3 {
    --bubble-size: clamp(280px, 60vw, 400px);
    --photo-size: 130px;
    --photo-cx: 50%;
    --photo-cy: 0%;
  }
  .hitoVoice__item .hitoVoice__bubble {
    padding: calc(var(--photo-size) / 2) 8% 7%;
  }
  /* 装飾の気球：300vh コンテナ内の異なる高さに分散配置。
     スクロールに合わせて違う気球が次々と視界に流れてくる演出になる。
     ※ WordPress カスタマイザー側で .hitoVoice__balloon { display:none } が
        注入されている可能性があるので、selector の specificity を高めて
        !important で確実に上書きする。 */
  body .voice_container .hitoVoice_container .hitoVoice__balloon {
    display: block !important;
  }
  body .voice_container .hitoVoice_container .hitoVoice__balloon--1 {
    top: 10vh;
    left: 5%;
    right: auto;
    width: 100px;
  }
  body .voice_container .hitoVoice_container .hitoVoice__balloon--2 {
    top: 100vh;
    left: auto;
    right: 5%;
    width: 140px;
  }
  body .voice_container .hitoVoice_container .hitoVoice__balloon--3 {
    top: 200vh;
    left: auto;
    right: 0;
    bottom: auto;
    width: 160px;
  }
  /* prefers-reduced-motion 対応 */
  @media (prefers-reduced-motion: reduce) {
    .hitoVoice__item {
      transition: none;
    }
  }
}

@media (max-width: 599px) {
  .hitoVoice__item--1,
  .hitoVoice__item--2,
  .hitoVoice__item--3 {
    --bubble-size: 280px;
    --photo-size: 120px;
  }
}

/*
暮らし体験型ブラウザゲーム -----------------------------------------------------------------------------------------------*/
.game_container {
  margin-bottom: 0;
}
.game_container .h2Title,
.game_container .normalTxt {
  font-family: "Kiwi Maru", serif;
  font-weight: 400;
  font-style: medium;
}
.game_container .btn_piyomaru {
  display: flex;
  justify-content: center;
}
.game_container .btn_piyomaru a {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  color: var(--color-white);
  background-color: var(--color-orange);
  padding: 1em;
  width: 240px;
  border-radius: 12px;
  transition: color var(--hover-duration) var(--hover-ease),
              background-color var(--hover-duration) var(--hover-ease);
}
.game_container .btn_piyomaru a::after {
  content: url(https://web.ailesys.co.jp/sakukomo/wp-content/uploads/2025/08/piyimaru1.png);
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
}
.game_container .btn_piyomaru a:hover {
  color: var(--color-orange);
  background-color: var(--color-white);
}

/* ぴよまる歩行アニメ（piyomaru-walk.js が .game_container 末尾に挿入）
   セクション下端を左→右→左で往復、折返しで左右反転。
   親の .game_container は SWELL のフルワイドブロックで relative になる想定だが、
   保険として明示しておく。 */
.game_container {
  position: relative;
  overflow: hidden; /* 画面外に出るピヨマルが横スクロールを生まないように */
}
.piyomaru-walk {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 64px;
  /* 重ねた img を絶対配置で収めるための高さ確保（歩行画像が概ね正方形なので 1:1）。
     width=64px × aspect-ratio 1:1 で見かけの高さも 64px。 */
  aspect-ratio: 1 / 1;
  z-index: 2;
  /* button のデフォルトスタイルを打ち消し */
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  animation: piyomaru-walk-move 45s linear infinite;
  will-change: transform, left;
}
/* クリック停止中（正面画像）は大きくなりすぎないよう縮小。
   中央アピールは横向き（歩行画像）のままなので縮小せず歩行サイズを維持する。 */
.piyomaru-walk.is-stopped {
  width: 64px;
  bottom: 6px;
}
.piyomaru-walk:focus-visible {
  outline: 2px solid var(--color-orange, #ff8a3d);
  outline-offset: 4px;
  border-radius: 8px;
}
/* クリック停止中だけ横移動アニメを現在地で一時停止。
   中央アピール（前方への弧ジャンプ）中は横移動を止めない。
   その横進行＋縦の弧が合成されて「弧を描いて前に進む」軌道になる。 */
.piyomaru-walk.is-stopped {
  animation-play-state: paused;
}
/* 全フレームを同じ場所に絶対配置で重ね、opacity だけで切替（src 変更なし → 点滅しない）。
   bottom: 0 で「キャラの足が wrap の下端に揃う」レイアウト。 */
.piyomaru-walk__img {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none; /* クリック判定は親 button に集約 */
  opacity: 0;
  transform-origin: bottom center;
}
.piyomaru-walk__img.is-active {
  opacity: 1;
}
/* 中央アピール時のジャンプ：横向き（歩行画像）のまま縦の弧を2回。
   横移動アニメは止めていないので、この縦の弧＋横進行が合成されて
   「弧を描いて前に進む」ホップになる。0.55s × 2 = 1.1s
   （JS側 APPEAL_JUMP_MS は余裕を持って 1200ms）。
   ※translateY は img にだけ効く。前進方向（左右）は親 button の横移動＋scaleX が
     担当するので、向きに関係なく進行方向へ素直に跳ねる。 */
.piyomaru-walk.is-appealing.is-jumping .piyomaru-walk__img {
  animation: piyomaru-jump 0.55s 2 both;
}
/* 重力っぽい弧：上りは速→緩、頂点で間を持たせ、下りは緩→速。 */
@keyframes piyomaru-jump {
  0%   { transform: translateY(0);     animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1); }
  50%  { transform: translateY(-52px); animation-timing-function: cubic-bezier(0.8, 0, 0.7, 1); }
  100% { transform: translateY(0); }
}
/* 折返し区間（45%→50% と 95%→100%）は linear だと scaleX が 1 → 0 → -1 を
   滑らかに補間してしまい、途中で scaleX(0)＝キャラが消える瞬間が生まれて
   点滅して見える。該当区間のみ steps(1, end) で瞬時に反転させる。 */
@keyframes piyomaru-walk-move {
  0%   { left: -120px; transform: scaleX(-1); animation-timing-function: linear; }
  45%  { left: 100%;   transform: scaleX(-1); animation-timing-function: steps(1, end); }
  50%  { left: 100%;   transform: scaleX(1);  animation-timing-function: linear; }
  95%  { left: -120px; transform: scaleX(1);  animation-timing-function: steps(1, end); }
  100% { left: -120px; transform: scaleX(-1); }
}
@media (prefers-reduced-motion: reduce) {
  .piyomaru-walk { animation: none; left: 16px; }
}

/* トップの投稿リスト（SWELL post-list）のサムネに 8px の角丸。
   .p-postList__thumb をクリップ枠にして、中の figure / img を丸める。
   top.css はフロントページのみ読み込まれるのでトップ限定で効く。 */
.p-postList__thumb {
  border-radius: 8px;
  overflow: hidden;
}
.p-postList.-type-card, .p-postList.-type-thumb {
  gap: 2rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.-type-card .p-postList__item {
  padding: 0;
  width: 100% !important;
}

/* トップの投稿リストの記事タイトルのフォント */
.p-postList__title {
  font-family: var(--font-kiwi);
}

/* トップ投稿リストのメタ（日付・カテゴリ）を、サクコモDays の
   カード/一覧（.skd-card__* / .skd-row__*）と同じ見た目に揃える。
   ・カテゴリ＝淡いピル（フォルダアイコンは消す）。左寄せ。
   ・日付＝Poppins・薄色・アイコン無し。右寄せ。 */
/* メタ（日付・カテゴリ）をタイトルの上へ。
   .p-postList__body を縦フレックスにして、メタを先頭(order:-1)に送る。 */
.p-postList .p-postList__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.p-postList .p-postList__body .p-postList__meta {
  order: -1;
  margin-top: 0;
}
#sidebar .-type-list .p-postList__title, .-type-card .p-postList__excerpt {
  margin-top: 0;
}
.p-postList .p-postList__meta {
  display: flex !important;
  align-items: center;
  justify-content: flex-start !important;
  flex-wrap: wrap;
  gap: 8px;
}
/* カテゴリ chip（.skd-card__cat と同じスタイル）。左側 */
.p-postList .p-postList__meta .c-postThumb__cat {
  order: 1 !important;
  margin: 0 !important;
  /* SWELL は .c-postThumb__cat を画像オーバーレイ用に position:absolute にしている。
     メタ内では static に戻して、重なり解消＋フレックスで横並び（左寄せ）にする。 */
  position: static !important;
  inset: auto !important;
  display: inline-block;
  font-size: 11px;
  color: var(--color-orange);
  background: var(--skd-orange);
  padding: 4px 12px;
  border-radius: 999px;
  letter-spacing: 0.04em;
  line-height: 1.6;
}
.p-postList__meta .c-postThumb__cat.icon-folder::before {
  content: none; /* フォルダアイコンを消す */
}
/* 日付（.skd-card__date と同じスタイル）。右端へ */
.p-postList .p-postList__meta .p-postList__times {
  order: 2 !important;
  margin-left: auto !important;
}
.p-postList__meta .c-postTimes__posted,
.p-postList__meta .c-postTimes__modified {
  font-size: 0.75rem;
  color: #8a6a60;
  font-family: "Poppins", var(--font-noto, sans-serif);
  letter-spacing: 0.04em;
}
.p-postList__meta .c-postTimes__posted.icon-posted::before,
.p-postList__meta .c-postTimes__modified.icon-modified::before {
  content: none; /* 公開日/更新日アイコンを消す */
}

/* ============================================================
   MV 新着バナー（サクコモDays 最新記事）。.p-mainVisual 内・右下に表示。
   PHP が wp_footer に出力した #skd-ntc を mv-new-banner.js が MV 内へ移動する。
   ============================================================ */
.p-mainVisual { position: relative; } /* 絶対配置の基準（SWELL既定でも relative だが保険） */

.skd-ntc {
  position: absolute;
  right: 28px;
  bottom: 28px;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 420px;
  max-width: calc(100vw - 56px);
  padding: 14px 40px 14px 14px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(80, 60, 55, 0.22);
  text-decoration: none;
  color: var(--skd-ink, #4a2f2a);
  /* MV のイントロ後に出す（少し遅延してふわっと） */
  animation: skdNtcIn 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 1.2s both;
}
@keyframes skdNtcIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.skd-ntc.is-closing {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.skd-ntc[hidden] { display: none; }

.skd-ntc__thumb {
  flex: none;
  width: 78px;
  height: 78px;
  border-radius: 8px;
  background-color: var(--skd-chip-bg, #f3e3df);
  background-size: cover;
  background-position: center;
}
.skd-ntc__body { flex: 1 1 auto; min-width: 0; }
.skd-ntc__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.skd-ntc__label {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-orange, #d98666);
  border: 1px solid var(--color-orange, #d98666);
  border-radius: 999px;
  padding: 3px 12px;
  white-space: nowrap;
}
.skd-ntc__new {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #fff;
  background: var(--color-orange, #d98666);
  padding: 2px 8px;
  border-radius: 4px;
}
.skd-ntc__date {
  font-size: 12px;
  color: var(--skd-sub, #8a6a60);
  letter-spacing: 0.04em;
  font-family: "Poppins", var(--font-noto, sans-serif);
}
.skd-ntc__title {
  display: block;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.02em;
  font-family: var(--font-kiwi);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.skd-ntc__close {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 22px;
  height: 22px;
  border: none;
  background: transparent;
  color: var(--skd-sub, #8a6a60);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.skd-ntc__close:hover { color: var(--skd-ink, #4a2f2a); }

/* 959px 以下（SWELL の基準ブレークポイント）では PC 用の「右下・420px 固定」をやめ、
   「左右 14px の全幅・下部に表示」にする。PC（960px〜）は従来どおり右下に 420px で表示。
   ピヨマルはバナーがある時だけバナー左から顔だけのぞく（下記 ::before ルール）ので、
   バナーは下部いっぱいに低く置く。 */
@media (max-width: 959px) {
  .skd-ntc {
    left: 14px;
    right: 14px;
    bottom: 16px; /* 下部いっぱい */
    width: auto;
    max-width: none; /* left/right で幅を決めるので上限解除（全幅に） */
    z-index: 50;    /* 取りこぼし防止に少し上げる */
  }

  /* バナーがある時だけ、ピヨマルを「バナー左端から顔だけのぞく」位置へ。
     バナー（z-index:50）がピヨマル（z-index:3）より前面なので、ピヨマルを低めに置くと
     下半身はバナーに隠れて頭（顔）だけ上端からのぞく。MV を高くしてスクロールさせる設定
     （--swl-mv-height）と併用するので、バナー位置ではサイドメニューは上へ流れていて衝突しない。
     mv-rise-up.js のスクロール状態（.is-rest / .is-hidden）でも飛ばさないよう上書きする。 */
  .p-mainVisual:has(.skd-ntc:not([hidden]))::before {
    left: 36px;
    bottom: 116px;             /* バナー（高さ約106px）の上端から頭だけのぞく */
    transform: rotate(0deg);
  }
  .p-mainVisual.is-rest:has(.skd-ntc:not([hidden]))::before {
    left: 36px;
    bottom: 94px;             /* スクロールでひょこっと少し顔を上げる */
    transform: rotate(6deg);
    transition: bottom 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 1.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .p-mainVisual.is-rest.is-hidden:has(.skd-ntc:not([hidden]))::before {
    left: 36px;
    bottom: 172px;
    transform: rotate(0deg);
  }
  /* GO‼（::after）も残す。ピヨマル（left:36px・幅64px＝中心 68px）の真上に配置。 */
  .p-mainVisual:has(.skd-ntc:not([hidden]))::after {
    left: 68px;
    bottom: 170px;            /* ピヨマルの頭の上 */
    transform: translateX(-50%);
  }
  .p-mainVisual.is-rest:has(.skd-ntc:not([hidden]))::after {
    transform: translateX(-50%);
  }
}

@media (max-width: 600px) {
  .skd-ntc__title {
    font-size: 14px;
  }
  .media_container #sidebar .-type-list .p-postList__title, .-type-card .p-postList__excerpt {
    font-size: 16px;
  }
  .media_container .c-postTimes__posted.icon-posted {
    font-size: 14px;
  }
  .media_container .p-postList.-type-card, .p-postList.-type-thumb {
    display: flex;
    gap: 1rem;
    margin: 0;
  }
}