/* ===============================
   コンテンツ下のフッター前余白調整
   =============================== */
.l-content {
  margin-bottom: 0;
}



/* ===============================
   ブロークングリット テキストの背景を半透明
   =============================== */
.has-white-background-color {
background-color: #fff9!important;
}
/* ブロークングリット 画像に丸み */
.wp-block-media-text.is-style-broken .wp-block-media-text__media {
    overflow: hidden;
    border-radius: 12px;
}
.wp-block-media-text.is-style-broken .wp-block-media-text__media img {
    border-radius: 12px;
}
/* ブロークングリット テキストの背景に丸み */
.wp-block-media-text.is-style-broken .wp-block-group.has-background {
    border-radius: 20px;
    overflow: hidden;
}
/* 左カラムを固定表示（sticky）にする */
.sticky-left {
  position: sticky;
  top: 120px; /* ヘッダーの高さに合わせて調整 */
  align-self: flex-start;
}

/* カラムの高さ調整（右側が長くても左が崩れないように） */
.swell-block-columns {
  align-items: flex-start;
}
@media (max-width: 768px) {
  .sticky-left {
    position: static;
  }
}

/* 角を丸める（border04に有効） */
.has-border.-border04 {
  border-radius: 12px;
  padding: 40px 80px;
}

@media (max-width: 768px) {
  .has-border.-border04 {
    padding: 25px 20px;
  }
}
/* ブロークングリットEND */

/* ===============================
   固定される予約ボタンCSS
   =============================== */
.fixed-reserve-btn {
    position: fixed;
    right: 0;
    top: 42%;                 /* ← 見ながら調整 */
    transform: translateY(-50%);
    z-index: 9999;

    writing-mode: vertical-rl;
    text-orientation: upright;

    background: linear-gradient(180deg, #b7a258, #cdac3c);
    color: #fff;
    padding: 20px 12px;
    border-radius: 12px 0 0 12px;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);

    display: flex;
    align-items: center;
    gap: 8px;

    transition: opacity 0.3s ease;
}
/* 予約ボタンEND */

/* ===============================
   近郊スポット紹介CSS
   =============================== */
.spot-info {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

/* 親要素の幅を40pxに固定し、Flexboxによる縮小を防ぐ */
.spot-icon {
  width: 40px !important;
  min-width: 40px;
  flex-shrink: 0;
}

/* 画像は親要素の幅（40px）いっぱいに広げる */
.spot-icon img {
  width: 100% !important;
  height: auto !important;
  display: block;
  max-width: none !important;
}

.spot-text {
  display: flex;
  flex-direction: column;
  flex: 1; /* 画面幅に応じて伸び縮みする */
}

.spot-text .place {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
}

.time-row {
  display: flex;
  justify-content: space-between; /* 左寄せ（20）と右寄せ（分・車） */
  align-items: baseline;
  margin-top: 4px;
}

.time-row .time {
  font-size: 22px;
  color: #aa000e;
  font-weight: 700;
}

.time-row .unit {
  font-size: 12px;
  opacity: 0.8;
}

/* Swell カラム内の alignwide を無効化 */
.swell-block-column .alignwide {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.swell-block-column img {
  width: 100%;
  height: auto;
  display: block;
}
/* 近郊スポットEND */

/* ===============================
   キッチンアニメーション
   =============================== */
.box1 {
    position: relative;
    overflow-x: visible;
    padding: 40px;
    margin-top: clamp(40px, 10vw, 120px);
}

/* イラスト */
.box1 .illust1 {
    position: absolute;
    right: 3vw;
    top: 2vw;
    width: clamp(180px, 30vw, 350px);
    opacity: 0.4;
}

/* テキスト */
.box1 .text {
    margin-bottom: 5rem;
}

/* 画像ブロック */
.box1 .image {
    padding-top: 30px;
    position: relative;
}

.box1 .image img {
    border-radius: 15px;
}

/* 写真（大） */
.box1 .image .img-large {
    width: clamp(200px, 80%, 350px);
}

/* 写真（小） */
.box1 .image .img-small {
    width: clamp(100px, 40%, 180px);
    position: absolute;
    right: 0;
    top: clamp(80px, 15vw, 180px);
}

/* 600px 以上 */
@media screen and (min-width:600px) {
    .box1 {
        display: flex;
        gap: 5vw;
        border-radius: 8vw 0 8vw 0;
    }

    .box1 > * {
        flex: 1;
    }

    .box1 .illust1 {
        left: 220px;
        top: -8vw;
        width: clamp(150px, 24vw, 250px);
        right: auto;
        opacity: 0.4;
    }

    .box1 .text {
        margin-bottom: 0;
    }
}

/* 1000px 以上 */
@media screen and (min-width:1000px) {

    .box1 {
        height: 520px;
        overflow: visible;
        padding-top: 10px;
        border-radius: 100px 0 100px 0;
    }

    .box1 .deco-text {
        font-size: 100px;
    }

    .box1 .illust1 {
        width: 280px;
        top: -100px;
        left: 260px;
        opacity: 0.4;
    }

    .box1 .image .img-large {
        width: 350px;
    }

    .box1 .image .img-small {
        width: 180px;
        top: 180px;
    }
}

/* blur アニメーション */
.blur {
    opacity: 0;
    filter: blur(30px);
    transform: scale(1.1);
}

.blurstyle {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
    transition: 1s 0.5s;
}

/* 調整用ユーティリティ */
.order1 { order: 1; }
.padding0 { padding: 0 !important; }
.padding-bottom0 { padding-bottom: 0 !important; }
.padding-lr0 { padding-left: 0 !important; padding-right: 0 !important; }
.space-small { padding-left: 2vw; padding-right: 2vw; }
/* キッチンセクションEND */

/* ===============================
   横に流れるループスライダー
   =============================== */
.loop-slider {
    display: flex;
    overflow: hidden;
}

.loop-slider .wp-block-group__inner-container,
.loop-slider .swell-block-columns {
    display: contents;
}

.loop-slider .swell-block-columns__inner {
    flex-wrap: nowrap;
    animation: infinity-scroll-left 50s infinite linear; /* アニメーションの時間を指定 */
}

.loop-slider .swell-block-column figure {
    width: 500px; /* 画像の横幅を指定（パソコン） */
    position: relative;
}

.loop-slider .swell-block-column figure::before {
    padding-top: 65%; /* 画像の縦横比を指定 */
    display: block;
    content: "";
}

.loop-slider .swell-block-column figure img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
}

@media screen and (max-width: 959px) {
    .loop-slider .swell-block-column figure {
        width: 200px; /* 画像の横幅を指定（スマホ） */
    }
}

@keyframes infinity-scroll-left {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}
/* 横に流れるループスライダーEND */

/* ===============================
   Contact Form 7カスタムCSS
   =============================== */

/* テキストを太字 */
.wpcf7-form label {
font-weight: bold;
}
/* フォームの下に余白 */
.wpcf7-form p {
margin-bottom: 30px;
}
/* フォームのカスタマイズ */
.wpcf7-text, .wpcf7-email, .wpcf7-tel, .wpcf7-textarea {
width: 100%;
background-color: #fff;
margin-top: 5px;
}
/* ラジオボタンの左の余白 */
.wpcf7-radio span {
margin-left: 0;
}
/* ボタンのカスタマイズ */
.wpcf7-submit, .wpcf7-previous {
display: inline-block;
width: 240px;
padding: 1.2em 1em;
border-radius: 50px;
background: #aa000e;/* ここにメインカラー */
font-size: 16px;
font-weight: 700;
letter-spacing: 0.2em;
line-height: 1;
color: #fff!important;
}
/* 必須マーク */
.required {
color: #fff;
background: #aa000e;/* ここにメインカラー */
font-size: 0.8em;
padding: 0.3em;
border-radius: 0.5em;
}

/* 共通：ボタンの親を中央配置 */
.wpcf7-form .cf7-buttons {
    display: flex;
    justify-content: center;
    gap: 40px; /* ← ボタン間の余白（好きな数値に変更OK） */
    margin-top: 20px;
}

/* スマホ時だけ縦並びにする */
@media (max-width: 768px) {
    .wpcf7-form .cf7-buttons {
        flex-direction: column;
        gap: 15px; /* ← スマホ時の上下余白 */
        align-items: center; /* 中央寄せ */
    }
}
/* Contact Form 7カスタマイズEND */

/* ===============================
  ギャラリーTOP　角丸リンクメニューCSS
   =============================== */
.category-links .swell-block-column img {
    width: 100%;
    height: 120px;          /* 好きな高さに変更OK */
    object-fit: cover;
    object-position: center;
    border-radius: 12px;    /* ← 角丸（好みで 8～20px に変更OK） */
    display: block;
}

/* PC・タブレット：横並び（中央配置） */
.category-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;              /* ← ボタンやカラム間の余白 */
}

/* スマホ：縦並び（中央配置） */
@media (max-width: 768px) {
    .category-links {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }

    .category-links .swell-block-column img {
        height: 100px;      /* スマホ用の高さ */
    }
}

.right-gallery1 {
    gap: 20px;
}
/* ギャラリーTOP　角丸リンクメニューEND */



/* =========================================================
   PHOTO LAYOUT　Airbnb風
   ---------------------------------------------------------
   photo-layout01
   → 左右 50 : 50

   photo-layout02
   → 左右 65 : 35
      ※「photo-layout-double」を付けた側が35%

   photo-layout-double
   → その側を画像2枚の縦積みにする

   photo-layout-top
   → 上段の画像。下段レイアウトと幅を統一

   ※ 画像の高さは画像自体の縦横比を利用
   ※ aspect-ratio は使用しない
   ========================================================= */


/* =========================================================
   1. 共通：上段・下段の外幅を統一
   ========================================================= */

.photo-layout-top,
.photo-layout01,
.photo-layout02 {
    width: 100% !important;
    max-width: none !important;

    margin-left: auto !important;
    margin-right: auto !important;
}


/* =========================================================
   2. 共通：画像を枠いっぱいに表示
   ========================================================= */

.photo-layout01 figure.wp-block-image,
.photo-layout02 figure.wp-block-image {
    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;

    overflow: hidden !important;
}


.photo-layout01 figure.wp-block-image img,
.photo-layout02 figure.wp-block-image img {
    display: block;

    width: 100% !important;
    height: 100% !important;

    object-fit: cover;
}


/* =========================================================
   3. 共通：左右カラムの基本設定
   ========================================================= */

.photo-layout01 > .swell-block-columns__inner > .swell-block-column,
.photo-layout02 > .swell-block-columns__inner > .swell-block-column {
    width: 100% !important;
    max-width: none !important;

    min-width: 0 !important;
    min-height: 0 !important;

    margin: 0 !important;
}


/* =========================================================
   4. photo-layout01
      左右 50 : 50
   ========================================================= */

.photo-layout01 > .swell-block-columns__inner {
    display: grid !important;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr) !important;

    align-items: stretch !important;

    gap: 20px;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
}


/* =========================================================
   5. photo-layout01
      2枚側
   ========================================================= */

.photo-layout01 .photo-layout-double {
    display: flex !important;
    flex-direction: column !important;

    min-height: 0 !important;
}


.photo-layout01 .photo-layout-double
> .swell-block-columns {
    display: flex !important;

    flex: 1 1 auto !important;
    flex-direction: column !important;

    width: 100% !important;
    max-width: 100% !important;

    height: 100% !important;
    min-height: 0 !important;

    margin: 0 !important;
}


.photo-layout01 .photo-layout-double
> .swell-block-columns
> .swell-block-columns__inner {
    display: flex !important;

    flex: 1 1 auto !important;
    flex-direction: column !important;

    width: 100% !important;
    max-width: 100% !important;

    height: 100% !important;
    min-height: 0 !important;

    margin: 0 !important;

    gap: 20px;
}


.photo-layout01 .photo-layout-double
> .swell-block-columns
> .swell-block-columns__inner
> .swell-block-column {
    flex: 1 1 0 !important;

    width: 100% !important;
    max-width: 100% !important;

    min-height: 0 !important;

    margin: 0 !important;
}


/* =========================================================
   6. photo-layout02
      65 : 35
   ========================================================= */

.photo-layout02 > .swell-block-columns__inner {
    display: grid !important;

    align-items: stretch !important;

    gap: 20px;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
}


/* ---------------------------------------------------------
   右側が2枚
   左65% / 右35%
   --------------------------------------------------------- */

.photo-layout02
> .swell-block-columns__inner:has(
    > .swell-block-column.photo-layout-double:last-child
) {
    grid-template-columns:
        minmax(0, 65fr)
        minmax(0, 35fr) !important;
}


/* ---------------------------------------------------------
   左側が2枚
   左35% / 右65%
   --------------------------------------------------------- */

.photo-layout02
> .swell-block-columns__inner:has(
    > .swell-block-column.photo-layout-double:first-child
) {
    grid-template-columns:
        minmax(0, 35fr)
        minmax(0, 65fr) !important;
}


/* =========================================================
   7. photo-layout02
      2枚側
   ========================================================= */

.photo-layout02 .photo-layout-double {
    display: flex !important;
    flex-direction: column !important;

    min-height: 0 !important;
}


.photo-layout02 .photo-layout-double
> .swell-block-columns {
    display: flex !important;

    flex: 1 1 auto !important;
    flex-direction: column !important;

    width: 100% !important;
    max-width: 100% !important;

    height: 100% !important;
    min-height: 0 !important;

    margin: 0 !important;
}


.photo-layout02 .photo-layout-double
> .swell-block-columns
> .swell-block-columns__inner {
    display: flex !important;

    flex: 1 1 auto !important;
    flex-direction: column !important;

    width: 100% !important;
    max-width: 100% !important;

    height: 100% !important;
    min-height: 0 !important;

    margin: 0 !important;

    gap: 20px;
}


.photo-layout02 .photo-layout-double
> .swell-block-columns
> .swell-block-columns__inner
> .swell-block-column {
    flex: 1 1 0 !important;

    width: 100% !important;
    max-width: 100% !important;

    min-height: 0 !important;

    margin: 0 !important;
}


/* =========================================================
   8. 上段 photo-layout-top
   ========================================================= */

.photo-layout-top > .wp-block-column {
    width: 100% !important;
    max-width: none !important;

    flex-basis: 100% !important;

    margin: 0 !important;
}


.photo-layout-top figure.wp-block-image {
    width: 100% !important;

    margin: 0 !important;
}


.photo-layout-top figure.wp-block-image img {
    display: block;

    width: 100% !important;
    max-width: none !important;
}
/* ギャラリーCSSここまで */


/* ===============================
   line-anim（タイトル＋横線）
   =============================== */

/* 見出し横ラインが伸びる仕組み */
.title-line {
    display: flex !important;
    align-items: center;
    width: 100%;
}

.title-line::after {
    content: "";
    flex: 1 1 auto;

    height: 1px;
    margin-left: 15px;
	
	  background: #999;

    transform: scaleX(0);
    transform-origin: left center;

    transition: transform 2.5s ease;
    max-width: 75%;
}

.title-line.is-visible::after {
    transform: scaleX(1);
}