/* CSS Document */



/*slider*/
/* RK-MIKI: CSS-only crossfade slider（1枚目を完全表示で起動） */
.rk-miki-fadeslider {
  --ratio: 1920/1008;
  --dur: 16s; /* 4枚 × 4s */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --pad: 16px;
  --start-offset: 0; /* 1枚目の開始を全体進行の5%ぶん前倒し（=完全表示域から開始） */
  position: relative;
  max-width: 100%;
  margin: 0 auto;
}
.rk-miki-fadeslider__frame {
  position: relative;
  width: 100%;
  aspect-ratio: var(--ratio);
  /*overflow:hidden;border-radius:14px;border:1px solid #e7e1d8;background:transparent;*/
  isolation: isolate;
}
.rk-miki-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: rkCross var(--dur) var(--ease) infinite both;
  margin: 0;
  will-change: opacity;
  backface-visibility: hidden;
  transform: translateZ(0);
}
.rk-miki-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}
/* 各スライドは負のdelayで「起動時から適切な位相」にいる */
.rk-miki-slide:nth-child(1) {
  animation-delay: calc(-0 * var(--dur) * var(--start-offset));
} /* ←ココだけ修正 */
.rk-miki-slide:nth-child(2) {
  animation-delay: -4s
}
.rk-miki-slide:nth-child(3) {
  animation-delay: -8s
}
.rk-miki-slide:nth-child(4) {
  animation-delay: -12s
}
/* クロスフェード：0-5%でIN、5-25%保持、25-30%でOUT、残りは非表示 */
/*@keyframes rkCross{
  0%{opacity:0}
  5%{opacity:1}
  25%{opacity:1}
  30%{opacity:0}
  100%{opacity:0}
}*/
@keyframes rkCross {
  0% {
    opacity: 1
  }
  5% {
    opacity: 1
  }
  20% {
    opacity: 1
  }
  25% {
    opacity: 0
  }
  95% {
    opacity: 0
  }
  100% {
    opacity: 1
  }
}


.rk-miki{
/* ロゴ（左・縦中央） */
.rk-miki-logo {
  position: absolute;
  left: 9.3%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: block;
  line-height: 0; /*filter:drop-shadow(0 2px 6px rgba(0,0,0,.25))*/
}
.rk-miki-logo img {
  max-width: min(28vw, 260px);
  height: auto
}
/* 任意：PCでホバー中は一時停止 */
.rk-miki-fadeslider:hover .rk-miki-slide {
  animation-play-state: paused
}
@media (prefers-reduced-motion: reduce) {
  .rk-miki-slide {
    animation: none
  }
  .rk-miki-slide:not(:first-child) {
    display: none
  }
}

/* ===== top2 ===== */
.top2{
    overflow: hidden;
}
.top2 img {
  width: 100%;
}
.vertical-line {
  width: 1px;
  height: clamp(100px, 9.32vw, 179px);
  background-color: #fff;
  margin: clamp(33px, 2.6vw, 50px) auto;
}

/* ===== top3（温泉・料理・客室の帯） ===== */
.top3 {
  padding-bottom: 45px;
    overflow: hidden;
}
#onsen .top3-inner {
  background-image: url("https://m-ine.net/ryokan-miki/img/top/top3.jpg");
}
#ryouri .top3-inner {
  background-image: url("https://m-ine.net/ryokan-miki/img/top/top4.jpg");
}
#room .top3-inner {
  background-image: url("https://m-ine.net/ryokan-miki/img/top/top5.jpg");
}
.top3-inner {
  background-repeat: no-repeat;
  background-size: cover;
  aspect-ratio: 1920 / 658;
  display: flex;
  width: 100%;
}
.top3-inner .spacer {
  width: 48%;
}
.top3-inner-txbox {
  width: 42%;
  text-align: center;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.top3-inner-img1 {
  width: 58.1%;
  max-width: 481px;
  margin: 30px auto 0;
  /*filter: drop-shadow(0 0 3px rgba(0, 0, 0, 1));*/
}
    #ryouri .top3-inner{
                justify-content: flex-end;
    }
    
.top3-inner-img2 {
  max-width: 242px;
  width: 28.3%;
  margin: 30px auto;
}
.top3-inner-img2 img{
    width: 100%;
}
/* ===== top4（アクセス・観光 2カラム） ===== */
.top4-inner1-img1 {
  max-width: 321px;
}
.top4-inner {
  display: grid;
  max-width: 1532px;
  width: 79%;
  margin: auto;
  gap: 45px;
  grid-template-columns: 1fr 1fr;
  padding-bottom: 120px;
}
.top4-inner img {
  margin: auto;
    width: 43%;
}
    
.top4-inner1 .top4-inner1-img2 {
    padding-bottom: 14%;
    width: 35%;
}
.top4-inner2 .top4-inner2-img2 {
  padding-bottom: 14%;
    width: 30.1%;
}
    .top4-inner1-img1,.top4-inner2-img1{
        padding-top: 12%;
    }
.top4-inner1 {
  background-image: url("https://m-ine.net/ryokan-miki/img/top/top6.png");
}
.top4-inner2 {
  background-image: url("https://m-ine.net/ryokan-miki/img/top/top7.png");
}
.top4-inner1,
.top4-inner2 {
  background-repeat: no-repeat;
  background-size: contain;
  display: flex;
  aspect-ratio: 1101 / 657;
  flex-direction: column;
}
    
    

    
}