@charset "utf-8";
/* CSS Document */


.alegria-box{
    .h-1{
        background-image: url("https://p-c.pw/alegria/img/honkan/h-1.png");
        background-size: cover;
        aspect-ratio: 1920 / 741;
    }
    .h0{
        background-image: url("https://p-c.pw/alegria/img/honkan/h0.png");
        background-size: cover;
        aspect-ratio: 1920 / 627;
    }
    .h1{
        background-image: url("https://p-c.pw/alegria/img/honkan/h1.png");
        background-size: cover;
        aspect-ratio: 1920 / 1479;
    }
    .h2{
        background-image: url("https://p-c.pw/alegria/img/honkan/h2.png");
        background-size: cover;
        aspect-ratio: 1920 / 1552;
    }
    .h3{
        background-image: url("https://p-c.pw/alegria/img/honkan/h3.png");
        background-size: cover;
        aspect-ratio: 1920 / 1483;
    }
    .h4{
        background-image: url("https://p-c.pw/alegria/img/honkan/h4.png");
        background-size: cover;
        aspect-ratio: 1920 / 625;
    }
    .h5{
        background-image: url("https://p-c.pw/alegria/img/honkan/h5.png");
        background-size: cover;
        aspect-ratio: 1920 / 537;
    }
    .h6{
        background-image: url("https://p-c.pw/alegria/img/honkan/h6.png");
        background-size: cover;
        aspect-ratio: 1920 / 549;
    }
    .h7{
        background-image: url("https://p-c.pw/alegria/img/honkan/h7.png");
        background-size: cover;
        aspect-ratio: 1920 / 543;
    }
    .h8{
        background-image: url("https://p-c.pw/alegria/img/honkan/h8.png");
        background-size: cover;
        aspect-ratio: 1920 / 553;
    }
    .h9{
        background-image: url("https://p-c.pw/alegria/img/honkan/h9.png");
        background-size: cover;
        aspect-ratio: 1920 / 615;
    }
    .h10{
        background-image: url("https://p-c.pw/alegria/img/honkan/h10.png");
        background-size: cover;
        aspect-ratio: 1920 / 1906;
    }
    
    .rt-nav-1{
        display: flex;
        max-width: 1300px;
        width: 67.7%;
        margin: auto;
        justify-content: space-between;
        /*height: 2%;*/
        /*padding-top: 11%;*/
        aspect-ratio: 1300 / 131;
        margin-bottom: 0.6%;
        padding-top: 10.2vw
    }
    .rt-nav-2{
        display: flex;
        max-width: 1073px;
        width: 56.692%;
        margin: auto;
        justify-content: space-between;
        /*padding-top: 11%;*/
        aspect-ratio:1073 / 131;
    }
/*    .rt-nav a{
        width: 49%;
    }*/
    .rt{background-size: cover;
        aspect-ratio: 250 / 131;
        
        display: block;
        background-repeat: no-repeat;
    }
    .rt-nav-1 .rt{width: 19%;}
    .rt-nav-2 .rt{width: 24.0%;}
    
    .rnh1{background-image: url("https://p-c.pw/alegria/img/honkan/rnh1.png");}
    .rnh2{background-image: url("https://p-c.pw/alegria/img/honkan/rnh2.png");}
    .rnh3{background-image: url("https://p-c.pw/alegria/img/honkan/rnh3.png");}
    .rnh4{background-image: url("https://p-c.pw/alegria/img/honkan/rnh4.png");}
    .rnh5{background-image: url("https://p-c.pw/alegria/img/honkan/rnh5.png");}
    .rnh6{background-image: url("https://p-c.pw/alegria/img/honkan/rnh6.png");}
    .rnh7{background-image: url("https://p-c.pw/alegria/img/honkan/rnh7.png");}
    .rnh8{background-image: url("https://p-c.pw/alegria/img/honkan/rnh8.png");}
    .rnh9{background-image: url("https://p-c.pw/alegria/img/honkan/rnh9.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;
}

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