@charset "UTF-8";
html {
  scroll-behavior: smooth;
}

/* common
============================*/
.sp_br {
  display: none;
}

@media only screen and (max-width: 768px) {
  .sp_br {
    display: block;
  }
}
.center {
  text-align: center;
}

.right {
  text-align: right;
}

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

img {
  line-height: 0;
  padding: 0;
  margin: 0;
  width: 100%;
}

.container {
  max-width: 1140px;
  margin-right: auto;
  margin-left: auto;
}
@media screen and (max-width: 999px) {
  .container {
    max-width: 960px;
  }
}
@media screen and (max-width: 767px) {
  .container {
    max-width: 720px;
  }
}

.textbox {
  width: 75%;
  margin: 0 auto;
  z-index: 2000;
  position: relative;
}
@media screen and (max-width: 767px) {
  .textbox {
    width: 80%;
  }
}
.textbox p {
  padding: 40px 5px;
  background: #fff;
  margin-top: -8vw;
  opacity: 0.9;
  line-height: 1.7;
  font-size: 2.2rem;
}
@media screen and (max-width: 767px) {
  .textbox p {
    line-height: 1.7;
    padding: 25px 5px;
    margin-top: -13vw;
    font-size: 1.563rem;
  }
}

.imgbox {
  padding: 4% 0 35% 0;
  z-index: 1000;
  position: relative;
}
@media screen and (max-width: 767px) {
  .imgbox {
    padding: 9% 0px 60%;
  }
}

/* color
============================*/
.bg-gray {
  background: #7d7c73;
}

.bg-gray02 {
  background: #8b8a80;
}

.bg-dkgreen {
  background: #d9d8cc;
}

.white {
  color: #fff;
}

.bg-dkgreen02 {
  background: #1f3a45;
}

/* CV
============================*/
.cta-button01 {
  width: 50%;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .cta-button01 {
    width: 80%;
  }
}

.cta-button02 {
  width: 50%;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .cta-button02 {
    width: 80%;
  }
}

/* top
============================*/
.hero {
  background: url(../images/Minenohana-hero.jpg) center center/cover no-repeat;
  position: relative;
  height: 93vh;
}
@media screen and (max-width: 767px) {
  .hero {
    height: 70vh;
  }
}
.hero:before {
  content: "";
  display: inline-block;
  background-repeat: no-repeat;
  background-image: url(../images/Minenohana-topcopy.png);
  background-size: contain;
  position: absolute;
  width: 36%;
  padding-top: 6.5699326851%;
  z-index: 100;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  top: 10%;
}
@media screen and (max-width: 767px) {
  .hero:before {
    width: 73%;
    padding-top: 13.3223635004%;
    top: 8%;
  }
}
.hero::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: url(../images/Minenohana-dot.png) left top;
  background-size: 3px 3px;
}

.top-logo {
  width: 23%;
  display: block;
  margin: 0 auto;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 1000;
}
@media screen and (max-width: 767px) {
  .top-logo {
    width: 42%;
  }
}

.sub-copy {
  background: #1f3a45;
}
.sub-copy_img {
  width: 45%;
  margin: 0 auto;
  padding: 25px 0;
}
@media screen and (max-width: 767px) {
  .sub-copy_img {
    width: 90%;
    padding: 20px 0;
  }
}

/* news
============================*/
.news {
  margin: 45px auto;
}
@media screen and (max-width: 767px) {
  .news {
    margin: 35px auto;
  }
}
.news-contents {
  width: 80%;
  margin: 0 auto;
  background: #fff;
  padding: 35px 0;
}
@media screen and (max-width: 767px) {
  .news-contents {
    width: 90%;
    padding: 15px 10px;
  }
}
@media screen and (max-width: 767px) {
  .news-copy {
    margin-bottom: 10px;
    line-height: 1.2;
  }
}
.news-img {
  width: 80%;
  margin: 0 auto;
  margin-bottom: 35px;
  -webkit-box-shadow: 4px 4px 4px -2px #d4d4d4;
          box-shadow: 4px 4px 4px -2px #d4d4d4;
}
@media screen and (max-width: 767px) {
  .news-img {
    width: 100%;
    margin-bottom: 20px;
  }
}
.news-sub {
  font-size: 2.441rem;
  text-align: center;
  font-weight: 400;
  margin-bottom: 35px;
}
@media screen and (max-width: 767px) {
  .news-sub {
    font-size: 1.75rem;
    margin-bottom: 20px;
  }
}
.news-txt {
  margin-bottom: 40px;
}
@media screen and (max-width: 767px) {
  .news-txt {
    margin-bottom: 25px;
  }
}
.news-media_ttl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 60%;
  margin: 0 auto;
  margin-bottom: 20px;
}
@media screen and (max-width: 767px) {
  .news-media_ttl {
    width: 90%;
    margin-bottom: 10px;
  }
}
.news-media_ttl:before, .news-media_ttl:after {
  content: "";
  height: 1px;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  background-color: #14323d;
}
.news-media_ttl:before {
  margin-right: 3rem;
}
@media screen and (max-width: 767px) {
  .news-media_ttl:before {
    margin-right: 1rem;
  }
}
.news-media_ttl:after {
  margin-left: 3rem;
}
@media screen and (max-width: 767px) {
  .news-media_ttl:after {
    margin-left: 1rem;
  }
}
.news-media_txt {
  margin-bottom: 20px;
}
.news-media_img {
  width: 65%;
  margin: 0 auto;
  margin-bottom: 35px;
}
@media screen and (max-width: 767px) {
  .news-media_img {
    width: 90%;
    margin-bottom: 10px;
  }
}
.news p {
  text-align: center;
}

/* glamping
============================*/
.glamping {
  margin-bottom: 80px;
  position: relative;
}
@media screen and (max-width: 767px) {
  .glamping {
    margin-bottom: 35px;
  }
  .glamping:before {
    content: "";
    display: inline-block;
    background-repeat: no-repeat;
    background: url(../images/shadow-left.png);
    background-size: contain;
    position: absolute;
    width: 80%;
    padding-top: 74.9542961609%;
    z-index: 100;
    left: 0;
    top: 47%;
    z-index: 0;
  }
}
.glamping-imgbox {
  background: url(../images/Minenohana-img02.jpg);
  background-size: cover;
  background-position: 60%;
  padding: 6% 0 44% 0;
}
.glamping-copy {
  font-family: "Cormorant Garamond", serif;
  color: #fff;
  margin-bottom: 37px;
  text-shadow: 0 0 8px #1e69a9, 0 0 8px #1e69a9;
}
@media screen and (max-width: 767px) {
  .glamping-copy {
    margin-bottom: 18px;
  }
}
.glamping-sub {
  color: #fff;
  text-shadow: 0 0 8px #1e69a9, 0 0 8px #1e69a9;
  letter-spacing: 0.4rem;
}

/* view
============================*/
.view {
  margin-bottom: 80px;
}
@media screen and (max-width: 767px) {
  .view {
    margin-bottom: 35px;
  }
}
.view-imgbox {
  background: url(../images/Minenohana-img03.jpeg);
  background-size: cover;
  background-position: 60%;
}
.view-copy {
  font-family: "Cormorant Garamond", serif;
  color: #fff;
  margin-bottom: 0px;
  text-shadow: 0 0 8px #1e69a9, 0 0 8px #1e69a9;
  margin-bottom: 8px;
}
@media screen and (max-width: 767px) {
  .view-copy {
    margin-bottom: 3px;
  }
}
.view-sub {
  color: #fff;
  text-shadow: 0 0 8px #1e69a9, 0 0 8px #1e69a9;
}

/* private
============================*/
.private {
  margin-bottom: 80px;
}
@media screen and (max-width: 767px) {
  .private {
    margin-bottom: 35px;
  }
}
.private-imgbox {
  background: url(../images/Minenohana-img04.jpeg);
  background-size: cover;
  background-position: 60%;
}
.private-copy {
  font-family: "Cormorant Garamond", serif;
  color: #fff;
  margin-bottom: 0px;
  text-shadow: 0 0 8px #223a5c, 0 0 8px #223a5c;
  margin-bottom: 8px;
}
@media screen and (max-width: 767px) {
  .private-copy {
    margin-bottom: 3px;
  }
}
.private-sub {
  color: #fff;
  text-shadow: 0 0 8px #223a5c, 0 0 8px #223a5c;
}

/* tent
============================*/
.tent {
  margin-bottom: 20%;
  position: relative;
}
@media screen and (max-width: 767px) {
  .tent:after {
    content: "";
    display: inline-block;
    background-repeat: no-repeat;
    background: url(../images/shadow-right.png);
    background-size: contain;
    position: absolute;
    width: 80%;
    padding-top: 74.9542961609%;
    z-index: 100;
    right: 0;
    top: 47%;
    z-index: 0;
  }
}
.tent-imgbox {
  background: url(../images/Minenohana-img05.jpg);
  background-size: cover;
  background-position: 60%;
  padding: 4% 0 45% 0;
}
.tent-copy {
  color: #fff;
  margin-bottom: 20px;
  line-height: 1.5 !important;
  text-shadow: 0 0 4px #563e26, 0 0 5px #563e26;
}
@media screen and (max-width: 767px) {
  .tent-copy {
    margin-bottom: 3px;
    line-height: 1.7 !important;
  }
}
.tent-sub {
  color: #fff;
}

/* experience
============================*/
.experience {
  position: relative;
  padding-bottom: 16%;
  position: relative;
}
.experience::before {
  content: "";
  background-image: url(../images/bg_gray.png);
  background-position: center;
  background-size: 100% auto;
  background-repeat: no-repeat;
  width: 100%;
  position: absolute;
  top: -11vw;
  left: 0;
  right: 0;
  padding-top: 11.4369501466%;
}
@media screen and (max-width: 767px) {
  .experience:after {
    content: "";
    display: inline-block;
    background-repeat: no-repeat;
    background: url(../images/shadow-left.png);
    background-size: contain;
    position: absolute;
    width: 80%;
    padding-top: 74.9542961609%;
    z-index: 100;
    left: 0;
    top: 58%;
    z-index: 0;
    opacity: 0.8;
  }
}
.experience-ttl {
  margin-bottom: 120px;
}
@media screen and (max-width: 767px) {
  .experience-ttl {
    margin-bottom: 12%;
  }
}
.experience-ttl p {
  margin-bottom: 3px;
  padding-top: 13px;
}
.experience-sub {
  font-size: 3.052rem;
}
@media screen and (max-width: 767px) {
  .experience-sub {
    font-size: 1.953rem;
  }
}
.experience-sec_img01 {
  width: 65%;
  margin-left: 10%;
  position: relative;
  z-index: 2000;
}
@media screen and (max-width: 767px) {
  .experience-sec_img01 {
    width: 70%;
    margin-left: 7%;
  }
}
.experience-sec_img01:before {
  content: "";
  display: inline-block;
  background-repeat: no-repeat;
  background-image: url(../images/Minenohana-img08.png);
  background-size: contain;
  position: absolute;
  width: 18%;
  padding-top: 66.4779661017%;
  z-index: 100;
  right: -13%;
  top: -15%;
}
@media screen and (max-width: 767px) {
  .experience-sec_img01:before {
    width: 25%;
    padding-top: 92.3305084746%;
    right: -18%;
  }
}
.experience-sec_img02 {
  width: 50%;
  margin: 0 auto;
  margin-right: 10%;
  margin-top: -3%;
  margin-bottom: 7%;
}
@media screen and (max-width: 767px) {
  .experience-sec_img02 {
    margin-right: 7%;
    width: 60%;
  }
}
.experience-sec-gal {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  width: 75%;
  margin: 0 auto;
  margin-bottom: 40px;
  z-index: 2000;
  position: relative;
}
@media screen and (max-width: 767px) {
  .experience-sec-gal {
    width: 85%;
  }
}
.experience img {
  -webkit-box-shadow: 4px 4px 4px -2px #505050;
          box-shadow: 4px 4px 4px -2px #505050;
}

/* experience02
============================*/
.experience02 {
  position: relative;
  padding-bottom: 16%;
}
.experience02::before {
  content: "";
  background-image: url(../images/bg_gray02.png);
  background-position: center;
  background-size: 100% auto;
  background-repeat: no-repeat;
  width: 100%;
  position: absolute;
  top: -11vw;
  left: 0;
  right: 0;
  padding-top: 11.4369501466%;
}
.experience02-sec {
  position: relative;
}
@media screen and (max-width: 767px) {
  .experience02-sec:after {
    content: "";
    display: inline-block;
    background-repeat: no-repeat;
    background: url(../images/shadow-right.png);
    background-size: contain;
    position: absolute;
    width: 80%;
    padding-top: 74.9542961609%;
    z-index: 100;
    right: 0;
    top: 47%;
    z-index: 0;
    opacity: 0.8;
  }
}
.experience02-sec_img01 {
  width: 50%;
  margin-right: 10%;
  position: relative;
  margin-left: auto;
  position: relative;
  z-index: 2000;
}
@media screen and (max-width: 767px) {
  .experience02-sec_img01 {
    width: 55%;
    margin-right: 7%;
  }
}
.experience02-sec_img01:before {
  content: "";
  display: inline-block;
  background-repeat: no-repeat;
  background-image: url(../images/Minenohana-img15.png);
  background-size: contain;
  position: absolute;
  width: 24%;
  padding-top: 88.6372881356%;
  z-index: 100;
  left: -17%;
  top: -15%;
}
@media screen and (max-width: 767px) {
  .experience02-sec_img01:before {
    width: 34%;
    padding-top: 125.5694915254%;
    left: -20%;
  }
}
.experience02-sec_img02 {
  width: 50%;
  margin: 0 auto;
  margin-left: 10%;
  margin-top: -3%;
  margin-bottom: 7%;
}
@media screen and (max-width: 767px) {
  .experience02-sec_img02 {
    margin-left: 7%;
    width: 63%;
  }
}
.experience02 img {
  -webkit-box-shadow: 4px 4px 4px -2px #505050;
          box-shadow: 4px 4px 4px -2px #505050;
}

/* experience03
============================*/
.experience03 {
  position: relative;
  padding-bottom: 16%;
}
@media screen and (max-width: 767px) {
  .experience03 {
    padding-bottom: 18%;
  }
}
.experience03::before {
  content: "";
  background-image: url(../images/bg_gray.png);
  background-position: center;
  background-size: 100% auto;
  background-repeat: no-repeat;
  width: 100%;
  position: absolute;
  top: -11vw;
  left: 0;
  right: 0;
  padding-top: 11.4369501466%;
}
.experience03-sec {
  position: relative;
}
@media screen and (max-width: 767px) {
  .experience03-sec:before {
    content: "";
    display: inline-block;
    background-repeat: no-repeat;
    background: url(../images/shadow-left.png);
    background-size: contain;
    position: absolute;
    width: 80%;
    padding-top: 74.9542961609%;
    z-index: 100;
    left: 0;
    top: 17%;
    z-index: 0;
    opacity: 0.8;
  }
}
.experience03-sec_img01 {
  width: 65%;
  margin-left: 10%;
  position: relative;
  z-index: 2000;
}
@media screen and (max-width: 767px) {
  .experience03-sec_img01 {
    width: 70%;
    margin-left: 7%;
  }
}
.experience03-sec_img01:before {
  content: "";
  display: inline-block;
  background-repeat: no-repeat;
  background-image: url(../images/Minenohana-img20.png);
  background-size: contain;
  position: absolute;
  width: 18%;
  padding-top: 66.4779661017%;
  z-index: 2000;
  right: -13%;
  top: -15%;
}
@media screen and (max-width: 767px) {
  .experience03-sec_img01:before {
    width: 27%;
    padding-top: 99.7169491525%;
    right: -20%;
  }
}
.experience03-sec_img02 {
  width: 45%;
  margin: 0 auto;
  margin-right: 10%;
  margin-top: -3%;
  position: relative;
  z-index: 200;
}
@media screen and (max-width: 767px) {
  .experience03-sec_img02 {
    margin-right: 7%;
    width: 55%;
    margin-top: -2%;
  }
}
.experience03-sec_img03 {
  width: 45%;
  margin-left: 15%;
  margin-top: -10%;
  position: relative;
  z-index: 100;
}
@media screen and (max-width: 767px) {
  .experience03-sec_img03 {
    width: 60%;
    margin-left: 9%;
  }
}
.experience03-sec_img04 {
  width: 45%;
  margin: 0 auto;
  margin-right: 10%;
  margin-top: -10%;
  margin-bottom: 7%;
}
@media screen and (max-width: 767px) {
  .experience03-sec_img04 {
    margin-right: 9%;
    width: 55%;
    margin-top: -12%;
  }
}
.experience03-sec-gal {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  width: 75%;
  margin: 0 auto;
  margin-bottom: 40px;
}
.experience03 img {
  -webkit-box-shadow: 4px 4px 4px -2px #505050;
          box-shadow: 4px 4px 4px -2px #505050;
}

/* line
============================*/
.line {
  position: relative;
  padding-bottom: 16%;
  padding-top: 3%;
}
@media screen and (max-width: 767px) {
  .line {
    padding-bottom: 18%;
  }
}
.line::before {
  content: "";
  background-image: url(../images/bg_green01.png);
  background-position: center;
  background-size: 100% auto;
  background-repeat: no-repeat;
  width: 100%;
  position: absolute;
  top: -11vw;
  left: 0;
  right: 0;
  padding-top: 11.4369501466%;
}
.line_img01 {
  width: 55%;
  margin: 0 auto;
  margin-bottom: 45px;
}
@media screen and (max-width: 767px) {
  .line_img01 {
    width: 85%;
    margin-bottom: 8px;
  }
}
.line_txt {
  width: 55%;
  margin: 0 auto;
  margin-bottom: 15px;
}
@media screen and (max-width: 767px) {
  .line_txt {
    width: 85%;
    margin-bottom: 13px;
  }
}

/* room
============================*/
.room {
  position: relative;
  padding-bottom: 16%;
}
.room::before {
  content: "";
  background-image: url(../images/bg_green02.png);
  background-position: center;
  background-size: 100% auto;
  background-repeat: no-repeat;
  width: 100%;
  position: absolute;
  top: -11vw;
  left: 0;
  right: 0;
  padding-top: 11.4369501466%;
}
.room-container {
  width: 75%;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .room-container {
    width: 90%;
  }
}
.room .main-bg-en {
  margin-bottom: 8px;
}
.room-txt {
  margin-bottom: 30px;
}
.room-name {
  font-family: "Cormorant Garamond", serif;
  line-height: 1;
}
.room-details {
  padding: 10px 30px;
}
@media screen and (max-width: 767px) {
  .room-details {
    padding: 13px 5px;
  }
}
.room-img {
  margin-bottom: 10px;
}
.room-sub {
  margin-bottom: 15px;
}
.room .action {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 5px;
}
.room-img {
  height: 300px;
  position: relative;
  overflow: hidden;
  padding-top: 60%;
}
.room-img img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* map
============================*/
.map {
  position: relative;
  padding-bottom: 16%;
}
.map::before {
  content: "";
  background-image: url(../images/bg_green03.png);
  background-position: center;
  background-size: 100% auto;
  background-repeat: no-repeat;
  width: 100%;
  position: absolute;
  top: -11vw;
  left: 0;
  right: 0;
  padding-top: 11.4369501466%;
}
.map-container {
  padding-top: 10px;
  padding-bottom: 10px;
}
.map .main-bg-en {
  letter-spacing: 0.3rem;
  margin-bottom: 40px;
}
.map_img01 {
  width: 70%;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .map_img01 {
    width: 90%;
  }
}

/* food
============================*/
.food {
  position: relative;
  padding-bottom: 16%;
}
.food::before {
  content: "";
  background-image: url(../images/bg_green02.png);
  background-position: center;
  background-size: 100% auto;
  background-repeat: no-repeat;
  width: 100%;
  position: absolute;
  top: -11vw;
  left: 0;
  right: 0;
  padding-top: 11.4369501466%;
}
.food-container {
  width: 75%;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .food-container {
    width: 90%;
  }
}
.food-txt {
  margin-bottom: 30px;
}
.food .main-bg-en {
  margin-bottom: 8px;
}
.food-details {
  padding: 10px 30px;
}
@media screen and (max-width: 767px) {
  .food-details {
    padding: 10px 5px;
  }
}
.food .action {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 10px;
}
.food-img {
  height: 300px;
  position: relative;
  overflow: hidden;
  padding-top: 60%;
}
.food-img img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* voice
============================*/
.voice {
  position: relative;
  padding-bottom: 5%;
}
.voice::before {
  content: "";
  background-image: url(../images/bg_green02.png);
  background-position: center;
  background-size: 100% auto;
  background-repeat: no-repeat;
  width: 100%;
  position: absolute;
  top: -11vw;
  left: 0;
  right: 0;
  padding-top: 11.4369501466%;
}
.voice-container {
  width: 75%;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .voice-container {
    width: 90%;
  }
}
.voice .main-bg-en {
  margin-bottom: 35px;
}
@media screen and (max-width: 767px) {
  .voice .main-bg-en {
    margin-bottom: 15px;
  }
}
.voice-title {
  border-left: 12px solid #ccc29e;
}
.voice-title h3 {
  background: #14323d;
  text-align: left;
  color: #fff;
  padding: 6px 10px;
  font-size: 2.4rem;
}
@media screen and (max-width: 767px) {
  .voice-title h3 {
    font-size: 1.8rem;
  }
}
.voice-txt {
  padding: 15px 25px;
  background: #fff;
}
.voice-box {
  margin-bottom: 25px;
}

/* faq
============================*/
.faq {
  position: relative;
  padding-bottom: 5%;
}
.faq-container {
  width: 75%;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .faq-container {
    width: 90%;
  }
}
.faq .sub {
  margin-bottom: 30px;
}
.faq-category {
  margin-bottom: 20px;
}
.faq-category h3 {
  color: #65645c;
  text-align: left;
}
.faq-box {
  margin-bottom: 25px;
}
.faq-title h4 {
  background: #7d7c73;
  text-align: left;
  color: #fff;
  padding: 6px 10px;
  font-size: 2.441rem;
}
@media screen and (max-width: 767px) {
  .faq-title h4 {
    font-size: 1.8rem;
  }
}
.faq-txt {
  padding: 15px 25px;
  background: #fff;
  color: #65645c;
}

.flex-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.flex-item {
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
}

.image-wrap {
  position: relative;
  overflow: hidden;
  padding-top: 95%;
  margin: 10px 5px;
}

.image-wrap img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* access
============================*/
.access {
  padding-top: 5%;
  padding-bottom: 4%;
}
@media screen and (max-width: 767px) {
  .access {
    padding-top: 7%;
    padding-bottom: 5%;
  }
}
.access .sub {
  margin-bottom: 35px;
}
@media screen and (max-width: 767px) {
  .access .sub {
    margin-bottom: 23px;
  }
}
.access-map {
  margin-bottom: 25px;
}
.access iframe {
  width: 100%;
  aspect-ratio: 16/9;
}
.access-detail {
  width: 75%;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .access-detail {
    width: 90%;
  }
}
.access-name {
  margin-bottom: 10px !important;
}
.access-address {
  margin-bottom: 35px;
}
.access-box {
  margin-bottom: 25px;
}

/* cta
============================*/
.cta {
  padding-top: 4%;
  padding-bottom: 4%;
}
@media screen and (max-width: 767px) {
  .cta {
    padding-bottom: 10%;
    padding-top: 8%;
  }
}
.cta-copy {
  font-size: 3.052rem;
}
@media screen and (max-width: 767px) {
  .cta-copy {
    font-size: 1.953rem;
  }
}
.cta-txt {
  width: 50%;
  margin: 0 auto;
  margin-top: 25px;
  padding: 0 25px;
}
@media screen and (max-width: 767px) {
  .cta-txt {
    width: 85%;
    margin-top: 10px;
  }
}

/* Reservation
============================*/
.reservation .main-bg-en {
  margin-bottom: 30px;
  font-size: 3.815rem;
}
@media screen and (max-width: 767px) {
  .reservation .main-bg-en {
    margin-bottom: 20px;
    font-size: 3.052rem;
    letter-spacing: 0.2rem;
  }
}

/* footer
============================*/
.footer {
  padding-top: 3%;
  padding-bottom: 5%;
}
@media screen and (max-width: 767px) {
  .footer {
    padding-top: 7%;
    padding-bottom: 5%;
  }
}
.footer-logo {
  width: 23%;
  margin: 0 auto;
  margin-bottom: 25px;
}
@media screen and (max-width: 767px) {
  .footer-logo {
    width: 50%;
  }
}

@-webkit-keyframes headShake {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  6.5% {
    -webkit-transform: translateY(-4px) rotateY(-9deg);
            transform: translateY(-4px) rotateY(-9deg);
  }
  18.5% {
    -webkit-transform: translateY(5px) rotateY(7deg);
            transform: translateY(5px) rotateY(7deg);
  }
  31.5% {
    -webkit-transform: translateY(-3px) rotateY(-5deg);
            transform: translateY(-3px) rotateY(-5deg);
  }
  43.5% {
    -webkit-transform: translateY(2px) rotateY(3deg);
            transform: translateY(2px) rotateY(3deg);
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes headShake {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  6.5% {
    -webkit-transform: translateY(-4px) rotateY(-9deg);
            transform: translateY(-4px) rotateY(-9deg);
  }
  18.5% {
    -webkit-transform: translateY(5px) rotateY(7deg);
            transform: translateY(5px) rotateY(7deg);
  }
  31.5% {
    -webkit-transform: translateY(-3px) rotateY(-5deg);
            transform: translateY(-3px) rotateY(-5deg);
  }
  43.5% {
    -webkit-transform: translateY(2px) rotateY(3deg);
            transform: translateY(2px) rotateY(3deg);
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
.fixed-icon {
  width: 146px;
  position: fixed;
  bottom: 25px;
  left: auto;
  right: 20px;
  z-index: 999999;
  -webkit-animation-name: headShake;
          animation-name: headShake;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}
@media screen and (max-width: 767px) {
  .fixed-icon {
    width: 110px;
  }
}

.is-hidden {
  visibility: hidden;
  opacity: 0;
}

/* calender
============================*/
.searchCalWidget {
  width: 90%;
  margin: 0 auto;
  margin-bottom: 35px;
}

.searchCalWidget * {
  margin: 0;
  padding: 0;
  color: #333;
  text-decoration: none;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.searchCalWidget select {
  padding: 0.25em 1em;
  font-size: 16px;
  outline: none;
  border: 1px solid #999;
  border-radius: 3px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
}

.searchCalWidget select::-ms-expand {
  display: none;
}

.searchCalElement > ul {
  list-style: none;
  margin: 0 0 1em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.searchCalElement > ul > li {
  width: 48%;
}

.searchCalElement > ul > li li {
  list-style: none;
  margin: 0 0 0.5em;
  padding: 0 0.5em 0.5em;
  border-bottom: 1px solid #ddd;
}

.searchCalElement > ul > li li dl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.searchCalElement > ul > li li dl dt {
  font-size: 14px;
}

.searchCalElement > ul > li li dl dt span {
  margin-left: 0.25em;
  font-size: 11px;
}

.searchCalElement > ul > li li dl dd {
  margin-left: auto;
}

.searchCalButton {
  padding: 0 0 2em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.searchCalButton input {
  padding: 0.4em 2em;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: #333;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.searchCalSelectBox {
  padding: 0 0 0.5em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.searchCalSelectBox > div > ol > li button {
  width: 28px;
  height: 27px;
}

.searchCalNote {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 1em 0 1em;
}

.searchCalNote ol {
  list-style: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.searchCalNote li {
  margin-right: 1.5em;
  font-size: 13px;
  line-height: 16px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.searchCalNote li svg {
  margin-right: 5px;
  width: 16px;
  height: 16px;
  fill: #333;
}

.searchCalNote p {
  font-size: 13px;
  line-height: 16px;
}

.searchCalSelect {
  margin-left: auto;
  padding: 0 0 1em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}

.searchCalSelect ol {
  list-style: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}

.searchCalSelect ol li {
  margin-left: 5px;
}

.searchCalSelect ol li button {
  padding: 5px 5px 4px;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 28px;
  border: 1px solid #999;
  border-radius: 3px;
  background: transparent;
  cursor: pointer;
}

.searchCalSelect ol li button:disabled {
  opacity: 0.5;
}

.searchCalSelect ol li svg {
  width: 16px;
  height: 16px;
  fill: #666;
  pointer-events: none;
}

.searchCalAdult dt > span {
  color: #666666;
  margin-left: 1em;
}

.searchCalChildren {
  font-size: 14px;
}

.searchCalChildren dt > span {
  color: #666666;
  margin-left: 1em;
}

.searchCalChildren dd > span {
  margin: 0 2px;
}

#searchCal > dl > dt {
  padding: 0 0 0.5em;
  font-size: 16px;
  font-weight: 700;
}

#searchCal > dl > dd ul {
  list-style: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

#searchCal > dl > dd ul li {
  padding: 0.25em;
  font-size: 11px;
  text-align: center;
  background: #eee;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

#searchCal > dl > dd ul li:first-child {
  color: #ff4d4d;
}

#searchCal > dl > dd ul li:last-child {
  color: #006dd9;
}

#searchCal > dl > dd ol {
  list-style: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  border: solid #ddd;
  border-width: 1px 0 0 1px;
}

#searchCal > dl > dd ol li {
  width: 14.28571%;
  min-height: 70px;
  position: relative;
  border: solid #ddd;
  border-width: 0 1px 1px 0;
}

#searchCal > dl > dd ol li dl {
  padding-bottom: 1.25em;
}

#searchCal > dl > dd ol li dt {
  padding-top: 0.25em;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
}

#searchCal > dl > dd ol li:nth-child(7n) dt {
  color: #006dd9;
}

#searchCal > dl > dd ol li:nth-child(7n-6) dt {
  color: #ff4d4d;
}

#searchCal > dl > dd ol li.none dl {
  opacity: 0.25;
  cursor: not-allowed;
}

#searchCal > dl > dd ol li dl dd {
  padding: 0.25em 0 0.5em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

#searchCal > dl > dd ol li dl dd svg {
  width: 20px;
  height: 20px;
  fill: #333;
}

#searchCal > dl > dd ol li dd p {
  font-size: 10px;
  font-weight: 700;
  text-align: center;
  text-indent: -0.4em;
  width: 100%;
  position: absolute;
  bottom: 5px;
  left: 0;
}

@media screen and (max-width: 640px) {
  .searchCalElement > ul > li li dl dt {
    font-size: 12px;
  }
  .searchCalElement > ul > li li dl dt span {
    font-size: 10px;
  }
  #searchCal > dl > dd ol li dd p {
    -webkit-transform: scaleX(0.75);
            transform: scaleX(0.75);
  }
}
/* slide
============================*/
/*-----------矢印表示----------*/
.slick-next {
  right: 0 !important;
}
@media screen and (max-width: 767px) {
  .slick-next {
    right: -10px !important;
  }
}

.slick-prev {
  left: 0 !important;
}
@media screen and (max-width: 767px) {
  .slick-prev {
    left: -10px !important;
  }
}

.slick-arrow {
  z-index: 2 !important;
}

.slick-prev, .slick-next {
  font-size: 0;
  line-height: 0;
  position: absolute;
  top: 50%;
  display: block;
  width: 20px;
  height: 20px;
  padding: 0;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
  cursor: pointer;
  color: transparent;
  border: none;
  outline: none;
  background: transparent;
}
@media screen and (max-width: 767px) {
  .slick-prev, .slick-next {
    top: 27%;
  }
}

.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
  background-color: #1f3a45; /*デフォルトがtransparentなので消えないように*/
}

/*表示する文字周りの設定*/
.slick-prev:before {
  content: "PREV";
  color: #fff;
  opacity: 1;
  font-size: 14px;
}
@media screen and (max-width: 767px) {
  .slick-prev:before {
    font-size: 13px;
  }
}

.slick-next:before {
  content: "NEXT";
  color: #fff;
  opacity: 1;
  font-size: 14px;
}
@media screen and (max-width: 767px) {
  .slick-next:before {
    font-size: 13px;
  }
}

/*背景や位置の調整*/
.slick-prev {
  left: 0;
  z-index: 1;
  width: auto;
  height: auto;
  padding: 13px;
  color: #fff;
  background-color: #1f3a45;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.slick-next {
  right: 0;
  width: auto;
  height: auto;
  padding: 13px;
  background-color: #1f3a45;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.action {
  display: block;
  width: 100%;
  text-align: center;
  margin-bottom: 30px;
}
.action a {
  display: inline-block;
  padding: 5px 10px;
  background: #fff;
  color: #1f3a45;
  text-decoration: none;
  border: 1px solid #1f3a45;
}
.action a:hover {
  background: #1f3a45;
  color: #fff;
}
.action .active {
  background: #1f3a45;
  color: #fff;
}

.slick-slide {
  margin: 0 10px;
}
@media screen and (max-width: 767px) {
  .slick-slide {
    margin: 0;
  }
}

@media screen and (max-width: 767px) {
  .slick-list {
    padding: 0 !important;
  }
}

/* toggle
============================*/
#acMenu dt {
  display: block;
  width: 100%;
  border: #fff 1px solid;
  cursor: pointer;
  padding: 10px 20px;
  position: relative;
}
#acMenu dt::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 0;
  display: block;
  width: 3em;
  height: 3em;
  line-height: 3;
  text-align: center;
  -webkit-transition: all 0.35s;
  transition: all 0.35s;
}
#acMenu dt.active::after {
  -webkit-transform: rotate(315deg);
          transform: rotate(315deg);
}

#acMenu dd {
  background: #f2f2f2;
  width: 100%;
  line-height: 1.7;
  text-align: left;
  border: #666 1px solid;
  display: none;
  color: #14323d;
  padding: 20px 25px;
}
@media screen and (max-width: 767px) {
  #acMenu dd {
    padding: 15px 15px 20px 15px;
  }
}

html {
  font-size: 62.5%; /* -> 10px */
}

body {
  font-family: "Shippori Mincho", serif;
  color: #14323d;
  line-height: 1.7;
  font-size: 1.953rem;
  background: #f8f3ec;
  letter-spacing: 0.01rem;
}
@media screen and (max-width: 767px) {
  body {
    font-size: 1.6rem;
    line-height: 1.5;
  }
}

h2 {
  font-size: 3.052rem;
  text-align: center;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
}
@media screen and (max-width: 767px) {
  h2 {
    font-size: 2.2rem;
  }
}

h3 {
  font-size: 2.441rem;
  text-align: center;
  font-weight: 400;
}
@media screen and (max-width: 767px) {
  h3 {
    font-size: 2rem;
  }
}

.main-bg {
  font-size: 4.768rem;
}
@media screen and (max-width: 767px) {
  .main-bg {
    font-size: 3.052rem;
  }
}

.main-bg-en {
  font-family: "Cormorant Garamond", serif;
  font-size: 7.451rem;
  letter-spacing: 0.3rem;
  line-height: 1;
}
@media screen and (max-width: 767px) {
  .main-bg-en {
    font-size: 4.768rem;
  }
}

.main-jp {
  font-size: 3.815rem;
}
@media screen and (max-width: 767px) {
  .main-jp {
    font-size: 2.2rem;
    line-height: 1.3;
  }
}

.main-en {
  font-family: "Cormorant Garamond", serif;
  font-size: 3.815rem;
  letter-spacing: 0.4rem;
}
@media screen and (max-width: 767px) {
  .main-en {
    font-size: 2.441rem;
    letter-spacing: 0.2rem;
  }
}

.sub {
  font-size: 2.441rem;
  letter-spacing: 0.2rem;
}
@media screen and (max-width: 767px) {
  .sub {
    font-size: 1.6rem;
  }
}

.sec-txt {
  font-size: 2.2rem;
}
@media screen and (max-width: 767px) {
  .sec-txt {
    font-size: 1.6rem;
  }
}

@-webkit-keyframes anime_cvbtn01 {
  from {
    -webkit-transform: translateX(-50%) scale(0.9, 0.9);
            transform: translateX(-50%) scale(0.9, 0.9);
  }
  to {
    -webkit-transform: translateX(-50%) scale(1, 1);
            transform: translateX(-50%) scale(1, 1);
  }
}

@keyframes anime_cvbtn01 {
  from {
    -webkit-transform: translateX(-50%) scale(0.9, 0.9);
            transform: translateX(-50%) scale(0.9, 0.9);
  }
  to {
    -webkit-transform: translateX(-50%) scale(1, 1);
            transform: translateX(-50%) scale(1, 1);
  }
}
@-webkit-keyframes anime_cvbtn02 {
  from {
    -webkit-transform: scale(0.9, 0.9);
            transform: scale(0.9, 0.9);
  }
  to {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
}
@keyframes anime_cvbtn02 {
  from {
    -webkit-transform: scale(0.9, 0.9);
            transform: scale(0.9, 0.9);
  }
  to {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
}
.fadeUpTrigger {
  opacity: 0;
}

.fadeUp {
  -webkit-animation-name: fadeUpAnime;
          animation-name: fadeUpAnime;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  opacity: 0;
}

@-webkit-keyframes fadeUpAnime {
  from {
    opacity: 0;
    -webkit-transform: translateY(30px);
            transform: translateY(30px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes fadeUpAnime {
  from {
    opacity: 0;
    -webkit-transform: translateY(30px);
            transform: translateY(30px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}