@charset "utf-8";

/*========= common ===============*/
html{
  font-size: 62.5%;
}
body {
  font-family: 'Shippori Mincho', "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  letter-spacing: 0.1rem;
  background: #f1f1ed;
  color: #111;
  overflow: hidden;
}
p {
  margin: 0;
  font-size: calc( 13 / var(--root-font-size) * 1rem );
}

.object-fit-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sd{display: block;}
.sd_none {
  display: none;
}
.ef-fade01 {
  opacity: 0;
  transition: 1s;
}
.fade01 {
  opacity: 1.0;
}
.ef-fade02 {
  opacity: 0;
  transform: translate(0, 100px);
  -webkit-transform: translate(0, 100px);
  transition: 0.5s;
}
.fade02 {
  opacity: 1.0;
  transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
}
.ef-zoom {
  transform: scale(.7, .7);
  -webkit-transform: scale(.7, .7);
  transition: s;
}
.zoom {
  transform: scale(1, 1);
  -webkit-transform: scale(1, 1);
}
.move01 {
  animation: fade 6s;
  animation-fill-mode: forwards;
  opacity: 1;
}
.move04 {
  animation: bottom-to-top 2s;
  animation-fill-mode: forwards;
  opacity: 1;
}

/* bottom-to-top */

@keyframes bottom-to-top {
  0% {
    opacity: 0;
    transform: translateY(50px);
    /* Y軸方向に50px */
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    /* Y軸方向に0px */
  }
}

/* fade */

@keyframes fade {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}



/* ------------header------------- */

header {
  display: flex;
  align-content: center;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  position: relative;
  width: 100%;
  height: 100vh;
}
header::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  margin: auto;
  background: rgba(0, 0, 0, 0.05);
  content: "";
  z-index: 99;
}
header h1 {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100vh; 
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  line-height: 1.2;
  text-align: center;
  z-index: 9999;
  animation: fadeout-anim 1.5s linear forwards;
  color: #000;
  font-size: 1.0rem;
}
@keyframes fadeout-anim {
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
header h1 img {
  width: 50vw;
  height: auto;
  padding-bottom: 10vh;
  padding-left: 10vw;
 }
 header h2.fade{
   opacity: 0;
 }
 header h2{
  position: absolute;
  margin: 0 auto;
  color: #fff;
  font-size: 1.6rem;
  line-height: 1.6;
  bottom: 35vh;
  text-align: center;
  width: 100%;
  padding: 0 3vh;
  left: 0vw;
  z-index: 999;
  text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
  font-weight: normal;
}
 
 header .logo-ikyu.fade {
  opacity: 0;
}

header .logo-ikyu {
  position: absolute;
  display: block;
  top: 0px;
  right: 0px;
  z-index: 999;
  filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.5));
}
header .logo-ikyu img {
  width: 70%;
  height: auto;
}
header .logo-ikyu .fade {
  opacity: 0;
}
header .plan-link {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 9999;
 top:0;
 right:0;
  filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.5));
}
header .plan-link.bottom-to-top {
  opacity: 0;
}

header .plan-link img {
  display: block;
  width: 40%;
  margin: 20px;
}
header .plan-link .nav{

}
header .plan-link .nav ul {
  display: none;
}
header .logo-ikyu a{

  width: 80px;
  z-index: 999;
  filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.5));
}

header .logo-ikyu a img {
  width: 60%;
  height: 100%;
  object-fit: cover;
}
header .plan-link a:hover img {
  opacity: 0.8;
}
header .htl_logo{
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  width: 50vw;
  padding-bottom: 10vh;
  filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.5));
}
header .htl_logo img{
width: 100%;
height: 100%;
object-fit: cover;
}



header .ss-slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;

}
header .ss-slider .swiper-slide {
  position: relative;
  overflow: hidden;
}
header .ss-slider .swiper-slide.swiper-slide-00 {
  background: url(https://www.img-ikyu.com/contents/dg/special/2024/00001837/image/contents-bg.jpg?auto=compress,format&lossless=0&q=75)repeat;

}
header .ss-slider .swiper-slide .caption {
  position: absolute;
  right: 20px;
  bottom: 10px;
  color: #ffffff;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1;
  z-index: 999;
}
header .ss-slider .swiper-slide img {
  width: 100%;
  height: 110vh;
  object-fit: cover;
  object-position: 50% 50%;
  font-family: 'object-fit: cover;'
}
header .fade {
  opacity: 0;
}
.move01 {
  animation: fade 2s;
  animation-fill-mode: forwards;
  opacity: 1;
}
.move04 {
  animation: bottom-to-top 4s;
  animation-fill-mode: forwards;
  opacity: 1;
}

/* bottom-to-top */

@keyframes bottom-to-top {
  0% {
    opacity: 0;
    transform: translateY(50px);
    /* Y軸方向に50px */
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    /* Y軸方向に0px */
  }
}

/* fade */

@keyframes fade {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
a {
  color: #fff;
}
a:hover, a:active {
  text-decoration: none;
}
.header .logo_hotel {
  position: absolute;
  top: 60px;
  left: 50%;
  transform: translate(-50%, 0);
  width: 180px;
  z-index: 99;
  filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.5));
}
.header .logo_ikyu img {
  position: absolute;
  top: 20px;
  right: 80px;
  width: 40px;
  margin: 0 auto;
  display: block;
  z-index: 99;
  filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.5));
}
.container{
  background: url(https://www.img-ikyu.com/contents/dg/special/2024/00001837/image/contents-bg.jpg?auto=compress,format&lossless=0&q=75)repeat;
}
/* ----------------- about ------------------ */

#about {
  width: 100%;
  margin: 0 auto;
  padding: 60px 0 0;
  position: relative;
}
#about .about-inner{
  width: 100%;
  background: rgb(0, 0, 0);
  background: linear-gradient(0deg, rgba(6, 0, 0, 1) 0%, rgba(6, 0, 0, 0.804359243697479) 50%, rgba(6, 0, 0, 0.6699054621848739) 70%, rgba(6, 0, 0, 0.4598214285714286) 85%, rgba(6, 0, 0, 0) 100%);
  background-size: 100% 75%;
  background-repeat: no-repeat;
  background-position: bottom center;
  
}
#about .about-inner .about-img {
  width: 100%;
  padding: 0 5%;
  height: 40vh;
  position: relative;
}
#about .about-img .about-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40%;
  height: auto;
}
#about .about-img .bgimg {
  width: 100%;
  min-height: 40vh;
  height: 100%;
  object-fit: cover;
  object-position: 50% 70%;
}
#about .about-inner .about-txt{
  width: 100%;  
 display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin-bottom: 40px;
}
#about .about-inner .about-txt h3 {
  height: 27vh;
  padding: 5%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}

#about .about-inner .about-txt p {
  width: 100%;
  padding: 30px 5%;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: 1.2rem;
  line-height: 2.4;
  color: #fff;
 display: flex;
 justify-content: center;
 align-items: center;
}


#about .about-inner .about-img{
  width: 100%;

}
#about .about-inner .about-txt{
  width: 100%;
  padding: 10% 7%;
}

  #about .htlinfo{
    width: 100%;
    text-align: left;
    letter-spacing: 0.1rem;
    padding: 0;
    
  }
  #about .htlinfo .about-img{
    position: relative;
  }
  #about .htlinfo .about-img .catchtxt{
   /* position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    transform: translate(-50%, -50%);
    font-size: 16px;
    letter-spacing: 0.2rem;
    color: #fff;
    z-index: 999;
    text-align: center;*/
    display: none;
  }
  #about .htlinfo .about-img .about-slider img {
    width: 100%;
    height: 300px;
    object-fit: cover;
  }
  #about .htlinfo p {
    font-size: 1.4rem;
    line-height: 1.8;
    padding: 0 0 30px;
    }

    #about .swiper-container-horizontal>.swiper-pagination-bullets, #about .swiper-pagination-custom, .swiper-pagination-fraction {
      bottom: 20px;
    }
    
    #about .about-slider .swiper-pagination-bullet {
      background: #ffffff;
      opacity: 0.5;
      outline: none;
      width: 8px;
      height: 8px;
      border-radius: 50%;
     
    }
    
    #about .about-slider .swiper-pagination-bullet.swiper-pagination-bullet-active {
      opacity: 1;
    }
    #about .about-slider .swiper-slide{
      position: relative;
      width: 100%;
      height: 300px;
    }
    #about .about-slider .swiper-slide .caption {
      position: absolute;
      top:10px;
      right: 10px;
      color: #FFF;
      font-size: 8px;
      z-index: 9999;
    }
    #about .about-slider .swiper-slide .caption p{
    font-size: 10px;
    }

    #about .htlinfo .about-txt{
      width: 100%;
      padding: 10% 5%;
    }

    #about .htlinfo .sec-title {
      line-height: 1.8;
      font-size: 12px;
      color: #9e9d9b;
      font-family: "minion-pro", serif;
      font-weight: 400;
      font-style: normal;
      padding-bottom: 0.4rem;
    }
    .htlinfo .htlintro .ttl h2{
      font-size: 24px;
    }  
/* ----------------- topics ------------------ */

#topics {
  width: 100vw;
  margin: 0 auto;
  padding:0;
  }
  #topics .topics-inner .topicimg01{
    background-color: #111;
  }
  #topics .topics-inner .topicimg01 .topic-slider{
    width: 100%;

 
  }
  #topics .topics-inner .topicimg01 .topic-slider img{
    width: 100%;
    height: 50vh;

 
  }

  #topics .topics-inner .topicimg01 img {
    width: 100%;
    height: 100%;
  object-fit: cover;
  object-position: bottom;
  }
  #topics .topics-inner .topicimg01 .topic-slider .ttl{
    background-color: #060000;
    width: 100%;
    padding: 5% 5% 0;
    color: #fff;
  }

  
      #topics .ttl h2{

        font-size: 16px;
        line-height: 2.2;
   
    
        }
        #topics .ttl .sec-title{
          line-height: 1.8;
          font-size: 12px;
          color: #9e9d9b;
          font-family: "minion-pro", serif;
          font-weight: 400;
          font-style: normal;
          padding-bottom: 0.4rem;
        }
        #topics .topics-inner .topicimg01 .ttl h2 span {
          color: #e08c59;
          font-size: 14px;
        }
        #topics .topics-inner .topictxt{
          width: 100%;
          padding: 5% 5% 60px;
          background-color: #060000;
          color: #fff;
        }
        #topics .topics-inner .topictxt h3{
          padding:3vh 0 3vh;
          border-top: 1px solid #312929;
          font-size: 16px;
          color: #9b8357;
         
        }
        #topics .topics-inner .topictxt p{
          font-size: 14px;
          line-height: 2;
         
        }

        #topics .topics-inner .topicimg02{
          width: 100%;
          padding: 0 7.25vw 60px;
          display: flex;
          flex-direction: column;
          background-color: #060000;
        }
        #topics .topics-inner .topicimg02 img{
          width: 100%;
        height: 180px;
        object-fit: cover;
        object-position: center;
        }
/* ----------------- plan ------------------ */

/* hotels
 ----------------------------------------------- */

 #plan {
	position: relative;
	width: 100%;
	margin: 0 auto ;
  padding: 40px 0 0;
  background: #fff;
}
#plan .ttl h2 {
padding: 0 0 40px 5%;
  font-size: 16px;
  line-height: 2.2;
}
#plan .sec-title {
  line-height: 1.8;
  font-size: 12px;
  color: #9e9d9b;
  font-family: "minion-pro", serif;
  font-weight: 400;
  font-style: normal;
  padding-bottom: 0.4rem;
  padding-left: 5%;
}

#plan .plan-inner {
  width: 100%;
  padding-bottom: 30px;
  display: flex;
  flex-direction: column;

}
#plan .plan-inner .plan-img{
  width: 100%;
  height: 220px;
}
#plan .plan-inner .plan-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#plan .plan-inner .planbox{
  width: 100%;
  padding: 5%;
}
#plan .plan-inner .planbox h3{
  font-size: 16px;
  letter-spacing: 0.1rem;
  margin-bottom: 20px;
  }
  #plan .planbox h3 span{
    font-size: 14px;
    display: inline-block;
    color: #9e9d9b;
    font-family: "minion-pro", serif;
    margin-bottom: 10px;
  }
  #plan .plan-inner .planbox p{
    margin: 0 0 20px;
    font-size: 13px;
    letter-spacing: 0;
    line-height: 1.8;
    }
  

/* 料金BOX */
.btn {
	width: 100%;
	padding: 0;
	letter-spacing: 0;
	line-height: 1.5;
}

.btn a {
	display: block;
	width: 100%;
	padding: 8px 0 10px;
	background: #423527;
	color: #ffffff;
  font-size: 1.2rem;
	text-align: center;
	-webkit-transition: all .5s;
	transition: all .5s;
  text-decoration: none;
  line-height: 1.4;
}
.btn a:hover {
	
	opacity: 0.8;
}

.btn b {
	font-size: 1.5rem;
	letter-spacing: 0.104vw;
}

.off {
	display: block;
	font-size: 1.0rem !important;
}

.off strong {
	font-size: 1.0rem !important;
	display: block;
}

.shousai {
	font-size: 1.0rem !important;
	display: block;
}

.shousai .ll {
	display: none !important;
}

.shousai .s {
  font-size: .875rem;
}

.after_point_rate {
	font-size: 1.5rem !important;
}
/* ----------------- photogallery ------------------ */
#pg  {
	position: relative;
	width: 100%;
	margin: 0 auto ;
  padding: 40px 0 80px;
  background: #060000;
  color: #fff;
}

#pg .ttl h2 {
  padding: 0 0 40px 5%;
    font-size: 16px;
    line-height: 2.2;

  }
  #pg .sec-title {
    line-height: 1.8;
    font-size: 12px;
    color: #9e9d9b;
    font-family: "minion-pro", serif;
    font-weight: 400;
    font-style: normal;
    padding-bottom: 0.4rem;
    padding-left: 5%;
  }






#pg .pg-slider {
	width: 100%;
}

#pg .pg-main {
	position: relative;
	cursor: move;
}

#pg .pg-main .swiper-slide {
	position: relative;
	height: 55vw;
}

#pg .pg-main .swiper-slide .caption {
	position: absolute;
	right: 5px;
	bottom: 5px;
	font-size: 1.2rem;
	letter-spacing: 0;
	font-family: 'Noto Sans JP', sans-serif;
	text-shadow: 0 0 10px #000, 0 0 5px #000;
	z-index: 99;
}

#pg .pg-thumbs {
	margin: 5px 0 0;
	cursor: pointer;
}

#pg .pg-thumbs .swiper-wrapper {
	display: flex;
	justify-content: center;
}

#pg .pg-thumbs .swiper-slide {
	height: 10vw;
}

#pg .pg-slider .swiper-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
	font-family: 'object-fit: cover;';
}

#pg .pg-slider .swiper-button-next {
	transform: translateY(-50%);
}

#pg .pg-slider .swiper-button-prev {
	transform: translateY(-50%);
}

#pg .pg-swiper-controller{
  display: none;
}


/* ----------------- access ------------------ */

#access  {
	position: relative;
	width: 100%;
	margin: 0 auto ;
  padding: 40px 0 60px;

}

#access .ttl h2 {
  padding: 0 0 40px 5%;
    font-size: 16px;
    line-height: 2.2;

  }
  #access .sec-title {
    line-height: 1.8;
    font-size: 12px;
    color: #9e9d9b;
    font-family: "minion-pro", serif;
    font-weight: 400;
    font-style: normal;
    padding-bottom: 0.4rem;
    padding-left: 5%;
  }


#access .map_bg {
  width: 100%;
  padding: 0 5%;
  margin: 0 auto;
  text-align: center;
}
#access .map_in {
  width: 100%;
  margin: 0 auto;
}
#access .map {
  width: 100%;
  height: 300px;
  clear: both;
  border: 1px solid #fff;
}
#access .map_txt {
  width: 100%;
  padding: 40px 5% 0;
}

.map_txt .htlintro .ttl2 h2 {
  font-size: 18px;

}
.map_txt .htlintro .toguide a {
  color: #333;
  display: inline-block;
  margin:5% auto 5% 0;
  padding: 1% 3%;
  background-color: rgba(0, 0, 0,0.05);
  text-decoration: none;
  font-size: 10px;
}
#access .map_txt a {
  text-decoration: none;
}
.map_txt .htlintro  p {
  font-size: 14px;
  line-height: 1.6;
}
.map_txt .htlintro .intro-body .lead {
  font-size: 16px;
  font-weight: bold;
  line-height: 1.6;
  margin-bottom: 1.4em;
}
.map_txt .htlintro .roomlist {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
}
.map_txt .htlintro .roomlist > div {
  margin-bottom: 1em;
}
.map_txt .htlintro .roomlist dt {
  font-weight: bold;
}
.map_txt .htlintro .roomlist dd {
  margin: 0;
}
.map_txt .htlintro .roomlist dd::before {
  content: "";
}
.map_txt .htlintro .intro-body .outro {
  font-size: 14px;
  line-height: 1.7;
  margin-top: 1.4em;
}
.map_txt .htlintro  span {
  display: inline-block;
  color: #000;
  margin-top: 40px;
  margin-right: auto;
  padding: 0.3% 1%;
  border: 1px solid #9e9898;
  /*background-color: rgba(0, 0, 0,0.05);*/
  text-decoration: none;
  letter-spacing: 0;
  font-size: 12px;
}
.fukid {
  font-size: 12px;
  text-align: left;
  color: #333;
  width: 350px;
  height: 100px;

}
.fukid a {
  color: #333;
}
.map_photo {
  width: 100px;
  height: 75px;
  float: left;
  margin: 0 10px 0 0;
  border: 0px;
}
.guide_link {
  border: 1px solid #ddd;
  background:#fff;
  color: #3e3c38;
  padding: 7px 50px;
  display: inline-block;
  text-align: center;
  margin: 40px 0 0;
  font-size: 15px;
  transition: 0.7s;
}
.guide_link:hover {
  background: rgba(255, 255, 255, 0.3);
  text-decoration: none;
}

/* ----------------- footer ------------------ */

#footer {
  padding: 40px 0;
  background: #3e3c38;
}
#footer a img{
  width: 25%;
  margin-bottom: 10px;
  height: auto;
  display: block;
}


address {
  font-style: normal;
  font-size: 8px;
  color: #a2a2a2;
  font-family: helvetica, sans-serif, verdana;
  padding: 5px 0 15px 0;
  text-align: center;
}

/* ----------------- Page Top ------------------ */

#toPageTop {
  position: fixed;
  bottom: 10px;
  right: 20px;
  z-index: 9999;
}
#toPageTop a {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 20px;
  height: 20px;
  border-right: 3px solid #a6a931;
  border-top: 3px solid #a6a931;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  box-sizing: border-box;
}