@charset "utf-8";
/* CSS Document */
.alegria-box {
  .r1 {
    background-image: url("https://p-c.pw/alegria/img/room/r1.png");
    background-size: cover;
    aspect-ratio: 1920 / 737;
  }
  .r2 {
    background-image: url("https://p-c.pw/alegria/img/room/r2.png");
    background-size: cover;
    aspect-ratio: 1920 / 490;
  }
  .r3 {
    background-image: url("https://p-c.pw/alegria/img/room/r3.png");
    background-size: cover;
    aspect-ratio: 1920 / 1511;
  }
  .r4 {
    background-image: url("https://p-c.pw/alegria/img/room/r4.png");
    background-size: cover;
    aspect-ratio: 1920 / 1572;
  }
  .r5 {
    background-image: url("https://p-c.pw/alegria/img/room/r5.png");
    background-size: cover;
    aspect-ratio: 1920 / 1511;
  }
  .r6 {
    background-image: url("https://p-c.pw/alegria/img/room/r6.png");
    background-size: cover;
    aspect-ratio: 1920 / 1557;
  }
  .r7 {
    background-image: url("https://p-c.pw/alegria/img/room/r7.png");
    background-size: cover;
    aspect-ratio: 1920 / 1893;
  }
  .rt-nav {
    display: flex;
    max-width: 1300px;
    width: 67.7%;
    margin: auto;
    justify-content: space-between;
    padding-top: 11%;
  }
  .rt {
    background-size: cover;
    aspect-ratio: 290 / 131;
    width: 22.3%;
    display: block;
  }
  .rtn1 {
    background-image: url("https://p-c.pw/alegria/img/room/rn1.png");
  }
  .rtn2 {
    background-image: url("https://p-c.pw/alegria/img/room/rn2.png");
  }
  .rtn3 {
    background-image: url("https://p-c.pw/alegria/img/room/rn3.png");
  }
  .rtn4 {
    background-image: url("https://p-c.pw/alegria/img/room/rn4.png");
  }
  /*スライダー用*/
  /* ===== スライダー共通 ===== */
  /* === CSS-only slider with dots === */
  .slider-box {
    width: 67.7%;
    margin: auto;
  }
  /* 各部屋のslider位置調整 */
  .slider-box1 {
    padding-top: 12vw;
  }
  .slider-box2 {
    padding-top: 14vw;
  }
  .slider-box3 {
    padding-top: 12vw;
  }
  .slider-box4 {
    padding-top: 12vw;
  }
  .css-slider {
    position: relative;
    width: 100%;
    margin: auto;
    aspect-ratio: 16/9; /* スライダー全体の比率を固定 */
    overflow: hidden;
    background: #f3f3f3;
  }
  .css-slider img {
    vertical-align: bottom;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 全画像を同じ見え方に統一 */
    opacity: 0;
    transform: scale(1.02);
    transition: opacity .45s ease, transform .45s ease;
    pointer-events: none;
  }
  /* --- dots --- */
  .dot {
    position: relative;
    bottom: 3vw;
    right: -81%;
    width: 20%;
    z-index: 10;
    display: flex;
    justify-content: center;
    gap: 10%;
    margin: 12px 0 0;
    user-select: none;
  }
  /* ダイヤ型ドット */
  .dot a {
    width: 9px;
    height: 9px;
    display: inline-block;
    text-indent: -9999px;
    background: #fff;
    transform: rotate(45deg); /* ダイヤ形 */
    transition: background .3s ease, box-shadow .3s ease;
    border: none;
  }
  /* アクセシビリティ */
  .dot a:focus-visible {
    outline: 2px solid #25b9ca;
    outline-offset: 4px;
  }
  /* ===== 1つ目スライダー（s11〜s14）をこの .slider-box 内で完結 ===== */
  /* 初期（この箱に #s11〜#s14 の :target が無い時）は s11 を表示 */
  .slider-box:has(#s11, #s12, #s13, #s14):not(:has(#s11:target, #s12:target, #s13:target, #s14:target)) .css-slider img#s11 {
    opacity: 1;
    transform: scale(1);
    z-index: 1;
  }
  /* ハッシュで該当のみ表示（この箱の中だけ） */
  .slider-box:has(#s11:target) .css-slider img#s11, .slider-box:has(#s12:target) .css-slider img#s12, .slider-box:has(#s13:target) .css-slider img#s13, .slider-box:has(#s14:target) .css-slider img#s14 {
    opacity: 1;
    transform: scale(1);
    z-index: 1;
  }
  /* ドットのアクティブ（この箱の中だけ） */
  .slider-box:has(#s11:target) .dot a[href="#s11"], .slider-box:has(#s12:target) .dot a[href="#s12"], .slider-box:has(#s13:target) .dot a[href="#s13"], .slider-box:has(#s14:target) .dot a[href="#s14"] {
    background: #25b9ca;
  }
  /* 初期アクティブ（ハッシュ無し時は1番目） */
  .slider-box:has(#s11, #s12, #s13, #s14):not(:has(#s11:target, #s12:target, #s13:target, #s14:target)) .dot a[href="#s11"] {
    background: #25b9ca;
  }
  /* ===== 2つ目スライダー（s21〜s24）をこの .slider-box 内で完結 ===== */
  .slider-box:has(#s21, #s22, #s23, #s24):not(:has(#s21:target, #s22:target, #s23:target, #s24:target)) .css-slider img#s21 {
    opacity: 1;
    transform: scale(1);
    z-index: 1;
  }
  .slider-box:has(#s21:target) .css-slider img#s21, .slider-box:has(#s22:target) .css-slider img#s22, .slider-box:has(#s23:target) .css-slider img#s23, .slider-box:has(#s24:target) .css-slider img#s24 {
    opacity: 1;
    transform: scale(1);
    z-index: 1;
  }
  .slider-box:has(#s21:target) .dot a[href="#s21"], .slider-box:has(#s22:target) .dot a[href="#s22"], .slider-box:has(#s23:target) .dot a[href="#s23"], .slider-box:has(#s24:target) .dot a[href="#s24"] {
    background: #25b9ca;
  }
  .slider-box:has(#s21, #s22, #s23, #s24):not(:has(#s21:target, #s22:target, #s23:target, #s24:target)) .dot a[href="#s21"] {
    background: #25b9ca;
  }
  /* ===== 重要：旧ルールは使わない（衝突の元） ===== */
  /* .css-slider img:first-of-type { ... } は使わない */
  /* .css-slider img:target { ... } は使わない */
  /* ===== 3つ目スライダー（s31〜s34） ===== */
  .slider-box:has(#s31, #s32, #s33, #s34):not(:has(#s31:target, #s32:target, #s33:target, #s34:target)) .css-slider img#s31 {
    opacity: 1;
    transform: scale(1);
    z-index: 1;
  }
  .slider-box:has(#s31:target) .css-slider img#s31, .slider-box:has(#s32:target) .css-slider img#s32, .slider-box:has(#s33:target) .css-slider img#s33, .slider-box:has(#s34:target) .css-slider img#s34 {
    opacity: 1;
    transform: scale(1);
    z-index: 1;
  }
  .slider-box:has(#s31:target) .dot a[href="#s31"], .slider-box:has(#s32:target) .dot a[href="#s32"], .slider-box:has(#s33:target) .dot a[href="#s33"], .slider-box:has(#s34:target) .dot a[href="#s34"] {
    background: #25b9ca;
  }
  .slider-box:has(#s31, #s32, #s33, #s34):not(:has(#s31:target, #s32:target, #s33:target, #s34:target)) .dot a[href="#s31"] {
    background: #25b9ca;
  }
  /* ===== 4つ目スライダー（s41〜s44） ===== */
  .slider-box:has(#s41, #s42, #s43, #s44):not(:has(#s41:target, #s42:target, #s43:target, #s44:target)) .css-slider img#s41 {
    opacity: 1;
    transform: scale(1);
    z-index: 1;
  }
  .slider-box:has(#s41:target) .css-slider img#s41, .slider-box:has(#s42:target) .css-slider img#s42, .slider-box:has(#s43:target) .css-slider img#s43, .slider-box:has(#s44:target) .css-slider img#s44 {
    opacity: 1;
    transform: scale(1);
    z-index: 1;
  }
  .slider-box:has(#s41:target) .dot a[href="#s41"], .slider-box:has(#s42:target) .dot a[href="#s42"], .slider-box:has(#s43:target) .dot a[href="#s43"], .slider-box:has(#s44:target) .dot a[href="#s44"] {
    background: #25b9ca;
  }
  .slider-box:has(#s41, #s42, #s43, #s44):not(:has(#s41:target, #s42:target, #s43:target, #s44:target)) .dot a[href="#s41"] {
    background: #25b9ca;
  }
    #sakura,#fuji,#hagi,#tsubaki {
  scroll-margin-top: 140px; /* ←固定ヘッダー高さ分に調整 */
}
    #s11,#s12,#s13,#s14,
    #s21,#s22,#s23,#s24,
    #s31,#s32,#s33,#s34,
    #s41,#s42,#s43,#s44{
        display: block;
  /*scroll-margin-top: 130px;*/ /* ←固定ヘッダー高さ分に調整 */
}
}

.single-column .travel__tab {
    position: static!important;
}
.fw-nav {
        position: static!important;
    }