@charset "utf-8";

.font-en {
  font-family: var(--font-en);
}

/* ファーストビュー設定 */
.title {
  width: 90%;
  height: calc(100vh - 55px);
  background-image: url(../img/optional/04.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

h1 {
  color: #fff;
  letter-spacing: 5px;
}

.title p {
  color: #fff;
  font-size: clamp(1.5rem, 2vw, 2.3rem);
}


/* 旅館紹介 */

.english-container {
  width: 90%;
  max-width: 1300px;
  margin: 0 auto;
  margin-bottom: 15rem;
}

.content {
  text-align: center;
  margin-bottom: 20rem;

}

.content h3::after {
  content: "";
  display: block;
  width: 200px;
  height: 1px;
  background-color: #b2b2b2;
  margin: 2rem auto;
}

.content img {
  width: 45%;
  height: auto;
  margin: 3rem auto 2rem;
}


/* 客室紹介 */
.rooms {
  text-align: center;
  margin-bottom: 20rem;
}

.rooms h2::after {
  content: "";
  display: block;
  width: 200px;
  height: 1px;
  background-color: #b2b2b2;
  margin: 2rem auto;
}

.rooms h3 {
  line-height: 1.5;
}

.rooms p {
  margin: 3rem 0 5rem;
}

.en-rooms-flex {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3rem;
}

.en-rooms-flex img {
  width: 30%;
  height: auto;
  object-fit: cover;
  box-shadow: 0 0 12px #555;
}


/* 料理紹介 */
.cuisine {
  text-align: center;
  margin-bottom: 20rem;
}

.cuisine h2::after {
  content: "";
  display: block;
  width: 200px;
  height: 1px;
  background-color: #b2b2b2;
  margin: 2rem auto;
}

.cuisine p {
  margin: 3rem 0 5rem;
}

.cuisine img {
  width: 60%;
  height: auto;
  margin: 2rem auto;
  object-fit: cover;
  box-shadow: 0 0 12px #555;
}


/* 温泉紹介 */
.onsen {
  width: 90%;
  height: 120vh;
  margin: 0 auto 200px;
  text-align: center;
  position: relative;
}

.onsen h2::after {
  content: "";
  display: block;
  width: 200px;
  height: 1px;
  background-color: #b2b2b2;
  margin: 2rem auto;
}

.onsen h3 {
  line-height: 1.5;
}

.onsen .txt {
  text-align: left;
}

.onsen p {
  margin: 3rem 0;
}

.en-onsen-flex-one {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin: 8rem 0 10rem;
}

.en-onsen-flex-one img {
  width: 35%;
  height: auto;
  box-shadow: 0 0 12px #555;
}

.en-onsen-flex-two {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  gap: 3rem;
}

.imgOne {
  width: 60%;
  height: auto;
  object-fit: cover;
  border: 1px solid #444444;
  padding: .7rem;
  margin-bottom: 8rem;
}

.imgTwo {
  width: 35%;
  height: auto;
  object-fit: cover;
  border: 1px solid #444444;
  padding: .7rem;
  align-self: flex-end;
}


/* 交通案内 */
.access {
  text-align: center;
  margin-bottom: 20rem;
}

.access h2::after {
  content: "";
  display: block;
  width: 200px;
  height: 1px;
  background-color: #b2b2b2;
  margin: 2rem auto;
}

.access p {
  margin: 30px 0;
}

.access img {
  width: 80%;
  height: auto;
  object-fit: cover;
  border: 1px solid #e5e5e5;
  padding: .7rem;
  margin: 0 auto;
}

.address {
  width: 80%;
  margin: 0 auto;
  display: flex;
  justify-content: space-evenly;
  text-align: left;
}

.address li:nth-of-type(1) span {
  font-size: clamp(1.5rem, 2vw, 2.5rem);
}

.address li:nth-of-type(2) {
  flex-grow: 1;
  margin-left: 50px;
}

.address li:nth-of-type(3) {
  transition: .3s;
  -webkit-transform: scale(1);
  transform: scale(1);
}

.address li:nth-of-type(3):hover {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}


/* 問い合わせ */
.contact {
  text-align: center;
  margin-bottom: 20rem;
}

.contact h2::after {
  content: "";
  display: block;
  width: 200px;
  height: 1px;
  background-color: #b2b2b2;
  margin: 2rem auto;
}

.contactflex {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4rem;
  margin-top: 2rem;
}

.phone,
.mail {
  flex: 1 1 25%;
  max-width: 25%;
  padding: 1rem;
  border: 1px solid #505050;
  border-radius: 10px;
  transition: .5s;
}

.phone:hover,
.mail:hover {
  background-color: #e5e5e5;
  box-shadow: 2px 2px 2px gray;
  transition: .5s;
}

.phone p:first-of-type,
.mail p:first-of-type {
  font-weight: bold;
}



/* 予約 */
.onlineBooking {
  text-align: center;
}

.onlineBooking h2::after {
  content: "";
  display: block;
  width: 200px;
  height: 1px;
  background-color: #b2b2b2;
  margin: 2rem auto;
}

.bookingbtn {
  width: 30%;
  padding: 2rem;
  border: 1px solid #505050;
  border-radius: 100vh;
  display: inline-block;
  justify-content: center;
  font-weight: bold;
  transition: .5s;
}

.bookingbtn:hover {
  background-color: #e5e5e5;
  box-shadow: 2px 2px 2px gray;
  transition: .5s;
}

.onlineBooking h3 {
  margin: 3rem 0;
}

.cancelDetails {
  display: inline-block;
  justify-content: center;
  text-align: left;
  margin-top: 2rem;
}



@media (max-width: 800px) {
  .english-container {
    width: 85%;
    margin: 0 auto 5rem;
  }

  .title {
    width: 100%;
    border: none;
    margin: 0 auto 5rem;
    height: 80vh;
    background-image: url(../img/smartphone/06.jpg);
    opacity: 0.8;
  }

  .title h1 {
    line-height: 1.3;
  }

  .content {
    margin-bottom: 8rem;
  }

  .content img {
    width: 80%;
    height: auto;
  }

  .content h3 {
    line-height: 1.5;
  }

  .rooms h3,
  .cuisine h3,
  .onsen h3,
  .access h3 {
    text-align: left;
    line-height: 1.5;
  }

  .content p,
  .rooms p,
  .cuisine p,
  .onsen p,
  .access p {
    text-align: left;
    line-height: 1.5;
    margin: 2rem 0 3rem;
  }

  .content h3::after {
    width: 100px;
  }

  .rooms,
  .cuisine,
  .onsen {
    margin-bottom: 8rem;
  }

  .rooms img,
  .cuisine img {
    width: 100%;
    border: 1px solid #b2b2b2;
    padding: 3px;
  }

  .rooms img:nth-of-type(2),
  .rooms img:nth-of-type(3) {
    display: none;
  }

  .en-onsen-flex-one {
    margin: 3rem 0 0;
    flex-direction: column-reverse;
    align-items: center;
  }

  .onsen img {
    padding: 3px;
    width: 100%;
    height: auto;
    margin-bottom: 2rem;
  }

  .imgOne {
    width: 100%;
    height: auto;
    position: static;
  }

  .flex img,
  .imgTwo {
    display: none;
  }

  .access img {
    width: 100%;
    height: auto;
    padding: .5rem;
  }

  .address {
    display: block;
    width: 100%;
    line-height: 1.5;
  }

  .address li:nth-of-type(2) {
    margin-left: 0;
  }

  .address li:nth-of-type(3) {
    text-align: right;
  }

  .access,
  .contact {
    margin-bottom: 8rem;
  }

  .contactflex {
    flex-direction: column;
    gap: 1rem
  }

  .contact p {
    text-align: left;
    line-height: 1.5;
  }

  .onlneBooking {
    margin-bottom: 5rem;
  }

  .onlineBooking h3 {
    margin: 2rem 0 0;
  }


  .onlineBooking p:first-of-type {
    text-align: center;
  }

  .onlineBooking p {
    text-align: left;
  }

  .contactflex .phone,
  .contactflex .mail {
    width: 100%;
    max-width: 100%;
    padding: 5px 3px;
    text-align: center;
  }

  .contactflex .phone p,
  .contactflex .mail p {
    text-align: center;
  }

  .bookingbtn {
    width: 100%;
  }

  .cancelDetails {
    line-height: 1.5;
  }
}