@charset "UTF-8";
.mainImgArea {
  position: relative;
}
.mainImgArea .logo {
  position: absolute;
  right: 10vw;
  top: 70px;
  width: 430px;
  z-index: -1;
}
@media screen and (max-width: 960px) {
  .mainImgArea .logo {
    width: 300px;
  }
}
@media screen and (max-width: 668px) {
  .mainImgArea .logo {
    right: 5vw;
    top: 20px;
  }
}
.mainImgArea .logo span {
  display: block;
  width: 100%;
  height: 0;
  padding-top: 100%;
  background: url(../../common/images/bg_logo.svg) no-repeat center/contain;
}
.mainImgArea .copy {
  font-size: clamp(40px, 6.25vw, 75px);
  line-height: 130%;
  letter-spacing: 10px;
  padding: 70px 5vw 100px;
}
@media screen and (max-width: 960px) {
  .mainImgArea .copy {
    padding: 50px 5vw 70px;
  }
}
@media screen and (max-width: 668px) {
  .mainImgArea .copy {
    letter-spacing: 3px;
    padding: 40px 5vw;
    line-height: 150%;
  }
}
.mainImgArea .photo {
  width: 100%;
  height: 0;
  padding-top: 59%;
  background: url(../images/mainimg.jpg) no-repeat center/cover;
  border-radius: 100px 100px 0 0;
}
@media screen and (max-width: 960px) {
  .mainImgArea .photo {
    border-radius: 50px 50px 0 0;
  }
}
@media screen and (max-width: 668px) {
  .mainImgArea .photo {
    padding-top: 70%;
  }
}

.conceptArea {
  padding: 100px 5vw 50px 12vw;
}
@media screen and (max-width: 1367px) {
  .conceptArea {
    padding: 100px 5vw 30px;
  }
}
@media screen and (max-width: 960px) {
  .conceptArea {
    padding: 50px 5vw 30px;
  }
}
.conceptArea h3 {
  font-size: clamp(40px, 6.25vw, 75px);
  line-height: 130%;
  font-family: "EB Garamond", serif;
  font-weight: 500;
  margin-bottom: 15px;
}
.conceptArea .ja {
  font-size: clamp(17px, 2.0833333333vw, 25px);
  line-height: 130%;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  margin-bottom: 6vw;
}
.conceptArea .box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: max(8vw, 40px);
}
.conceptArea .box > div .text {
  line-height: 250%;
}
@media screen and (max-width: 960px) {
  .conceptArea .box > div .text {
    line-height: 200%;
  }
}
.conceptArea .box.c01 {
  align-items: flex-end;
}
.conceptArea .box.c01 > div {
  width: 52%;
}
@media screen and (max-width: 668px) and (orientation: portrait) {
  .conceptArea .box.c01 > div {
    width: 100%;
  }
}
.conceptArea .box.c01 > div .read {
  font-size: clamp(40px, 6.25vw, 75px);
  line-height: 130%;
  letter-spacing: 3px;
  margin-bottom: max(5vw, 30px);
}
@media screen and (max-width: 960px) {
  .conceptArea .box.c01 > div .read {
    letter-spacing: 0;
  }
}
.conceptArea .box.c01 > div .text {
  margin-left: 5vw;
}
@media screen and (max-width: 960px) {
  .conceptArea .box.c01 > div .text {
    margin-left: 0;
  }
}
.conceptArea .box.c01 .photo {
  width: 44%;
}
@media screen and (max-width: 668px) and (orientation: portrait) {
  .conceptArea .box.c01 .photo {
    width: 80%;
    margin: 20px auto 0;
  }
}
.conceptArea .box.c02 {
  flex-direction: row-reverse;
  align-items: center;
}
.conceptArea .box.c02 > div {
  width: 55%;
}
@media screen and (max-width: 960px) {
  .conceptArea .box.c02 > div {
    width: 62%;
  }
}
@media screen and (max-width: 668px) and (orientation: portrait) {
  .conceptArea .box.c02 > div {
    width: 100%;
  }
}
.conceptArea .box.c02 .photo {
  width: 25%;
  margin-left: 5vw;
}
@media screen and (max-width: 668px) and (orientation: portrait) {
  .conceptArea .box.c02 .photo {
    width: 60%;
    margin: 20px auto 0;
  }
}

.meritArea .photo {
  width: calc(100% - 5vw);
  margin: 0 0 0 auto;
  position: relative;
  z-index: 1;
}
.meritArea .photo span {
  display: block;
  width: 100%;
  height: 0;
  padding-top: 35%;
  background: url(../images/photo_merit.jpg) no-repeat center/cover;
}
@media screen and (max-width: 960px) {
  .meritArea .photo span {
    padding-top: 40%;
  }
}
@media screen and (max-width: 668px) and (orientation: portrait) {
  .meritArea .photo span {
    padding-top: 60%;
  }
}
.meritArea > section {
  background-color: #F9F8F5;
  width: calc(100% - 5vw);
  padding: 300px 5vw 100px 10vw;
  margin-top: -200px;
}
@media screen and (max-width: 960px) {
  .meritArea > section {
    padding: 150px 5vw 70px 10vw;
    margin-top: -100px;
  }
}
@media screen and (max-width: 668px) {
  .meritArea > section {
    padding: 150px 5vw 50px;
  }
}
.meritArea > section h3 {
  font-size: clamp(40px, 6.25vw, 75px);
  line-height: 130%;
  font-family: "EB Garamond", serif;
  font-weight: 500;
  text-align: center;
  margin-bottom: 15px;
}
.meritArea > section .ja {
  font-size: clamp(17px, 2.0833333333vw, 25px);
  line-height: 130%;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  text-align: center;
  margin-bottom: 3vw;
}
.meritArea > section .main {
  max-width: 900px;
  margin: 0 auto;
}
.meritArea > section .main section {
  border-bottom: 1px dotted rgba(34, 34, 34, 0.4);
  padding: 30px 0;
}
.meritArea > section .main section h4 {
  font-size: clamp(17px, 2.0833333333vw, 25px);
  line-height: 130%;
  margin-bottom: 20px;
}
.meritArea > section .main section p {
  font-size: clamp(13px, 1.3333333333vw, 16px);
}

.roomArea .title {
  padding: 100px 10vw 50px;
}
@media screen and (max-width: 960px) {
  .roomArea .title {
    padding: 50px 10vw 30px;
  }
}
.roomArea .title h3 {
  font-size: clamp(40px, 6.25vw, 75px);
  line-height: 130%;
  font-family: "EB Garamond", serif;
  font-weight: 500;
  margin-bottom: 15px;
}
.roomArea .title .ja {
  font-size: clamp(17px, 2.0833333333vw, 25px);
  line-height: 130%;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  writing-mode: vertical-rl;
  letter-spacing: 10px;
}
.roomArea .room {
  padding: 0 5vw;
  position: relative;
}
.roomArea .room .main {
  max-width: 1200px;
  margin: 0 auto;
  background-color: #F9F8F5;
}
.roomArea .room .main .detail {
  padding: 80px 5vw;
  position: relative;
}
@media screen and (max-width: 668px) and (orientation: portrait) {
  .roomArea .room .main .detail {
    padding: 80px 5vw 40px;
  }
}
.roomArea .room .main .detail .type {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  text-align: center;
}
.roomArea .room .main .detail h4 {
  font-family: "Zen Old Mincho", serif;
  font-weight: 700;
  font-size: clamp(50px, 7.5vw, 90px);
  text-align: center;
}
.roomArea .room .main .detail .en {
  font-size: clamp(16px, 1.6666666667vw, 20px);
  font-family: "EB Garamond", serif;
  font-weight: 500;
  text-align: center;
  letter-spacing: 2px;
  margin-bottom: 50px;
}
@media screen and (max-width: 668px) and (orientation: portrait) {
  .roomArea .room .main .detail .en {
    margin-bottom: 25px;
  }
}
.roomArea .room .main .detail .madori {
  position: absolute;
  right: 20px;
  top: 25px;
}
@media screen and (max-width: 960px) {
  .roomArea .room .main .detail .madori {
    top: 20px;
  }
}
.roomArea .room .main .detail .madori a {
  font-size: clamp(13px, 1.3333333333vw, 16px);
  display: block;
  border-bottom: 2px solid #222;
  line-height: 100%;
}
.roomArea .room .main .detail .madori a span {
  display: inline-block;
  width: 20px;
  margin: 0 10px 8px 0;
  vertical-align: middle;
}
@media screen and (max-width: 960px) {
  .roomArea .room .main .detail .madori a span {
    width: 15px;
    margin: 0 7px 5px 0;
  }
}
.roomArea .room .main .detail .about {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.roomArea .room .main .detail .about .photo {
  width: 27%;
}
@media screen and (max-width: 668px) and (orientation: portrait) {
  .roomArea .room .main .detail .about .photo {
    width: 60%;
    margin: 0 auto 20px;
  }
}
.roomArea .room .main .detail .about > div {
  width: 66%;
}
@media screen and (max-width: 668px) and (orientation: portrait) {
  .roomArea .room .main .detail .about > div {
    width: 100%;
  }
}
.roomArea .room .main .detail .about > div > p {
  line-height: 180%;
}
.roomArea .room .main .detail .about > div table {
  margin-top: 20px;
  border-collapse: collapse;
}
.roomArea .room .main .detail .about > div table tr th, .roomArea .room .main .detail .about > div table tr td {
  text-align: left;
  vertical-align: top;
  font-size: clamp(13px, 1.3333333333vw, 16px);
  padding-top: 10px;
}
.roomArea .room .main .detail .about > div table tr th {
  white-space: nowrap;
  padding-right: 20px;
}
.roomArea .room .bg {
  position: absolute;
  z-index: -1;
  width: 100%;
  height: calc(100% - 150px);
  left: 0;
  bottom: 0;
}
.roomArea .room .bg::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
}
.roomArea .room#rin {
  margin-bottom: 130px;
}
@media screen and (max-width: 960px) {
  .roomArea .room#rin {
    margin-bottom: 70px;
  }
}
@media screen and (max-width: 668px) and (orientation: portrait) {
  .roomArea .room#rin {
    margin-bottom: 40px;
  }
}
.roomArea .room#rin .bg {
  background-color: #b4874d;
  background: url(../images/photo_rin01.jpg) no-repeat center/cover;
}
.roomArea .room#rin .bg::after {
  background-color: rgba(180, 135, 77, 0.8);
}
.roomArea .room#kyou .bg {
  background-color: #03376c;
  background: url(../images/photo_kyou01.jpg) no-repeat center/cover;
}
.roomArea .room#kyou .bg::after {
  background-color: rgba(3, 55, 108, 0.8);
}

.publicArea {
  padding: 100px 5vw;
  position: relative;
}
@media screen and (max-width: 960px) {
  .publicArea {
    padding: 50px 5vw;
  }
}
.publicArea .logo {
  position: absolute;
  right: 3vw;
  top: 40px;
  width: 430px;
  z-index: 2;
  mix-blend-mode: multiply;
}
@media screen and (max-width: 960px) {
  .publicArea .logo {
    right: 2vw;
    top: 20px;
    width: 270px;
  }
}
@media screen and (max-width: 668px) {
  .publicArea .logo {
    width: 200px;
    right: 0;
    top: 20px;
  }
}
.publicArea .logo span {
  display: block;
  width: 100%;
  height: 0;
  padding-top: 100%;
  background: url(../../common/images/bg_logo.svg) no-repeat center/contain;
}
.publicArea > section {
  background-color: #F9F8F5;
  padding: 5vw;
  max-width: 1200px;
  margin: 0 auto;
}
.publicArea > section h3 {
  font-size: clamp(40px, 6.25vw, 75px);
  line-height: 130%;
  font-family: "EB Garamond", serif;
  font-weight: 500;
  margin-bottom: 10px;
  text-align: center;
}
.publicArea > section .ja {
  font-size: clamp(17px, 2.0833333333vw, 25px);
  line-height: 130%;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  text-align: center;
}
.publicArea > section .main {
  margin-top: 50px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: center;
}
.publicArea > section .main:nth-of-type(2n) {
  flex-direction: row;
}
.publicArea > section .main .photo {
  width: 45%;
}
@media screen and (max-width: 668px) and (orientation: portrait) {
  .publicArea > section .main .photo {
    width: 100%;
    margin-bottom: 20px;
  }
}
.publicArea > section .main > section {
  width: 47%;
}
@media screen and (max-width: 668px) and (orientation: portrait) {
  .publicArea > section .main > section {
    width: 100%;
  }
}
.publicArea > section .main > section h5 {
  font-size: clamp(17px, 2.0833333333vw, 25px);
  line-height: 130%;
  margin-bottom: 25px;
}
@media screen and (max-width: 668px) and (orientation: portrait) {
  .publicArea > section .main > section h5 {
    margin-bottom: 15px;
  }
}
.publicArea > section .main > section p {
  line-height: 180%;
}
.publicArea > section .main > section .madori {
  margin-top: 20px;
}
.publicArea > section .main > section .madori a {
  font-size: clamp(13px, 1.3333333333vw, 16px);
  display: inline-block;
  border-bottom: 2px solid #222;
  line-height: 100%;
}
.publicArea > section .main > section .madori a span {
  display: inline-block;
  width: 20px;
  margin: 0 10px 8px 0;
  vertical-align: middle;
}
@media screen and (max-width: 960px) {
  .publicArea > section .main > section .madori a span {
    width: 15px;
    margin: 0 7px 5px 0;
  }
}

.restaurantArea {
  background-color: #222;
  color: #fff;
  display: flex;
  flex-wrap: wrap;
}
.restaurantArea .photo {
  width: 60%;
  display: flex;
  flex-wrap: wrap;
}
@media screen and (max-width: 960px) {
  .restaurantArea .photo {
    width: 100%;
    height: 400px;
  }
}
@media screen and (max-width: 668px) {
  .restaurantArea .photo {
    height: 300px;
  }
}
@media screen and (max-width: 668px) and (orientation: portrait) {
  .restaurantArea .photo {
    height: 350px;
  }
}
.restaurantArea .photo > p {
  width: 70%;
  background: url(../images/photo_restaurant01.jpg) no-repeat center/cover;
}
@media screen and (max-width: 668px) and (orientation: portrait) {
  .restaurantArea .photo > p {
    width: 100%;
    height: 210px;
  }
}
.restaurantArea .photo > ul {
  width: 30%;
}
@media screen and (max-width: 668px) and (orientation: portrait) {
  .restaurantArea .photo > ul {
    width: 100%;
    height: 140px;
    display: flex;
  }
}
.restaurantArea .photo > ul li {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  height: 50%;
}
.restaurantArea .photo > ul li:nth-child(1) {
  background-image: url(../images/photo_restaurant02.jpg);
}
.restaurantArea .photo > ul li:nth-child(2) {
  background-image: url(../images/photo_restaurant03.jpg);
}
@media screen and (max-width: 668px) and (orientation: portrait) {
  .restaurantArea .photo > ul li {
    width: 50%;
    height: 100%;
  }
}
.restaurantArea > section {
  width: 40%;
  padding: 5vw;
}
@media screen and (max-width: 960px) {
  .restaurantArea > section {
    width: 100%;
  }
}
.restaurantArea > section h3 {
  font-size: clamp(40px, 6.25vw, 75px);
  line-height: 130%;
  font-family: "EB Garamond", serif;
  font-weight: 500;
  margin-bottom: 10px;
}
.restaurantArea > section .ja {
  font-size: clamp(17px, 2.0833333333vw, 25px);
  line-height: 130%;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  margin-bottom: 3vw;
}
.restaurantArea > section p {
  line-height: 180%;
}
.restaurantArea > section .kome {
  margin-top: 20px;
}

.feeArea {
  padding-top: 100px;
}
@media screen and (max-width: 960px) {
  .feeArea {
    padding-top: 50px;
  }
}
.feeArea .about {
  padding: 0 5vw 50px;
}
.feeArea .about .houjin {
  text-align: center;
  font-size: clamp(17px, 2.0833333333vw, 25px);
  line-height: 130%;
}
.feeArea .about .houjin::after {
  content: "";
  display: block;
  width: 120px;
  height: 3px;
  background-color: #222;
  margin: 25px auto 40px;
}
.feeArea .about h3 {
  text-align: center;
  margin-bottom: 50px;
  font-size: clamp(40px, 6.25vw, 75px);
  line-height: 130%;
}
@media screen and (max-width: 668px) and (orientation: portrait) {
  .feeArea .about h3 {
    font-size: 2.7rem;
  }
}
.feeArea .about .box {
  max-width: 1200px;
  margin: 0 auto 70px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
@media screen and (max-width: 668px) {
  .feeArea .about .box {
    margin-bottom: 40px;
  }
}
.feeArea .about .box > div {
  width: 48%;
}
@media screen and (max-width: 960px) {
  .feeArea .about .box > div {
    width: calc(100% - 330px);
  }
}
@media screen and (max-width: 668px) {
  .feeArea .about .box > div {
    width: 100%;
    margin-bottom: 20px;
  }
}
.feeArea .about .box > div > p {
  font-size: clamp(17px, 2.0833333333vw, 25px);
  line-height: 130%;
  margin-bottom: 20px;
}
.feeArea .about .box > div > p strong {
  font-size: 1.5em;
}
.feeArea .about .box > div > div {
  background-color: #F9F8F5;
  padding: 20px;
}
@media screen and (max-width: 668px) and (orientation: portrait) {
  .feeArea .about .box > div > div {
    padding: 20px 15px;
  }
}
.feeArea .about .box > div > div ul.list {
  margin-bottom: 10px;
}
.feeArea .about .box > div > div ul.list li {
  display: inline-block;
  background-color: #03376c;
  color: #fff;
  font-size: clamp(13px, 1.3333333333vw, 16px);
  line-height: 100%;
  padding: 10px;
  margin-bottom: 10px;
}
@media screen and (max-width: 668px) and (orientation: portrait) {
  .feeArea .about .box > div > div ul.list li {
    padding: 7px;
    margin-bottom: 7px;
  }
}
.feeArea .about .box > div > div ul.list li:not(:last-child) {
  margin-right: 5px;
}
@media screen and (max-width: 668px) and (orientation: portrait) {
  .feeArea .about .box > div > div ul.list li:not(:last-child) {
    margin-right: 3px;
  }
}
.feeArea .about .box > div > div > p {
  font-size: clamp(17px, 2.0833333333vw, 25px);
  line-height: 130%;
  margin-bottom: 20px;
}
.feeArea .about .box .service {
  width: 45%;
}
@media screen and (max-width: 960px) {
  .feeArea .about .box .service {
    width: 320px;
  }
}
@media screen and (max-width: 668px) {
  .feeArea .about .box .service {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
  }
}
.feeArea .about .end > p {
  text-align: center;
  font-size: clamp(17px, 2.0833333333vw, 25px);
  line-height: 130%;
  margin-bottom: 50px;
  line-height: 200%;
}
.feeArea .about .end > p strong {
  font-size: 1.3em;
  display: block;
}
.feeArea .about .end > section h4 {
  text-align: center;
  margin-bottom: 20px;
  font-size: clamp(16px, 1.6666666667vw, 20px);
}
.feeArea .about .end > section table {
  width: auto;
  margin: 0 auto;
  border-collapse: separate;
  border-spacing: 5px;
}
@media screen and (max-width: 668px) and (orientation: portrait) {
  .feeArea .about .end > section table {
    border-spacing: 3px;
  }
}
.feeArea .about .end > section table tr th, .feeArea .about .end > section table tr td {
  padding: 15px;
  font-size: clamp(13px, 1.3333333333vw, 16px);
}
.feeArea .about .end > section table tr th {
  background-color: #03376c;
  color: #fff;
}
.feeArea .about .end > section table tr td {
  background-color: #F9F8F5;
}
.feeArea .about .end > section table tr td span {
  color: #b4874d;
  margin-left: 20px;
  line-height: 120%;
}
@media screen and (max-width: 668px) and (orientation: portrait) {
  .feeArea .about .end > section table tr td span {
    display: block;
    margin-left: 0;
    margin-top: 5px;
  }
}
.feeArea .about .end > section table tr td span::before {
  content: "◀";
  margin-right: 5px;
}
@media screen and (max-width: 668px) and (orientation: portrait) {
  .feeArea .about .end > section table tr td span::before {
    content: "▲";
  }
}
.feeArea .fee {
  background-color: #F9F8F5;
  padding: 80px 5vw;
}
@media screen and (max-width: 960px) {
  .feeArea .fee {
    padding: 50px 5vw;
  }
}
.feeArea .fee h3 {
  font-size: clamp(20px, 2.5vw, 30px);
  text-align: center;
  margin-bottom: 30px;
}
.feeArea .fee > div {
  max-width: 1000px;
  margin: 0 auto;
}
.feeArea .fee > div table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 10px;
  margin-bottom: 30px;
}
@media screen and (max-width: 668px) and (orientation: portrait) {
  .feeArea .fee > div table {
    border-spacing: 3px;
  }
}
.feeArea .fee > div table tr th, .feeArea .fee > div table tr td {
  font-size: clamp(13px, 1.3333333333vw, 16px);
  padding: 15px 5px;
  text-align: center;
  line-height: 130%;
}
.feeArea .fee > div table tr th {
  background-color: #EFEEEC;
}
.feeArea .fee > div table tr td {
  background-color: #fff;
}
.feeArea .fee > div table tr td strong {
  font-size: 1.3em;
}
.feeArea .fee > div table tr td small {
  font-size: 0.85em;
}
.feeArea .fee > div table tr:first-child td {
  color: #fff;
  width: 40%;
}
.feeArea .fee > div table tr:first-child td:nth-of-type(1) {
  background-color: #b4874d;
}
.feeArea .fee > div table tr:first-child td:nth-of-type(2) {
  background-color: #03376c;
}
.feeArea .fee > div > p {
  font-size: clamp(17px, 2.0833333333vw, 25px);
  line-height: 130%;
  margin-left: 10px;
  margin-bottom: 20px;
}
.feeArea .fee > div > ul {
  margin-left: 10px;
}
.feeArea .detail {
  padding: 100px 7vw;
  background: url(../images/bg_fee.jpg) no-repeat center/cover;
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
@media screen and (max-width: 1367px) {
  .feeArea .detail {
    padding: 100px 4vw;
  }
}
@media screen and (max-width: 960px) {
  .feeArea .detail {
    padding: 60px 4vw;
  }
}
.feeArea .detail > div.left {
  width: 48%;
}
@media screen and (max-width: 960px) {
  .feeArea .detail > div.left {
    width: calc(100% - 20px);
    margin: 0 auto 20px;
  }
}
.feeArea .detail > div.left h3 {
  font-size: clamp(17px, 2.0833333333vw, 25px);
  line-height: 130%;
  margin-bottom: 50px;
  line-height: 200%;
}
@media screen and (max-width: 960px) {
  .feeArea .detail > div.left h3 {
    margin-bottom: 20px;
  }
}
.feeArea .detail > div.left h3 strong {
  font-size: 1.5em;
  margin: 0 10px;
}
@media screen and (max-width: 1600px) {
  .feeArea .detail > div.left h3 br.pcL {
    display: none;
  }
}
.feeArea .detail > div.left > ul {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 50px;
}
@media screen and (max-width: 960px) {
  .feeArea .detail > div.left > ul {
    margin-bottom: 20px;
  }
}
.feeArea .detail > div.left > ul li {
  width: 48%;
  border-bottom: 1px dotted rgba(255, 255, 255, 0.5);
  padding: 15px 0;
  letter-spacing: 1px;
}
@media screen and (max-width: 668px) and (orientation: portrait) {
  .feeArea .detail > div.left > ul li {
    width: 100%;
    padding: 10px 0;
  }
}
.feeArea .detail > div.left > ul li:nth-child(2n) {
  margin-left: 4%;
}
@media screen and (max-width: 668px) and (orientation: portrait) {
  .feeArea .detail > div.left > ul li:nth-child(2n) {
    margin-left: 0;
  }
}
.feeArea .detail > div.left > ul li::before {
  content: "";
  display: inline-block;
  width: 17px;
  height: 13px;
  margin-right: 10px;
  background: url(../images/icon_check.svg) no-repeat center/contain;
}
.feeArea .detail > div.left > p {
  font-size: clamp(12px, 1.1666666667vw, 14px);
}
.feeArea .detail > div.right {
  width: 50%;
}
@media screen and (max-width: 960px) {
  .feeArea .detail > div.right {
    width: 100%;
  }
}
.feeArea .detail > div.right table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 10px;
  margin-bottom: 30px;
}
@media screen and (max-width: 960px) {
  .feeArea .detail > div.right table {
    margin-bottom: 10px;
  }
}
@media screen and (max-width: 668px) and (orientation: portrait) {
  .feeArea .detail > div.right table {
    border-spacing: 3px;
  }
}
.feeArea .detail > div.right table tr th, .feeArea .detail > div.right table tr td {
  padding: 15px 5px;
  text-align: center;
  color: #222;
  font-size: clamp(13px, 1.3333333333vw, 16px);
}
.feeArea .detail > div.right table tr th {
  background-color: #EFEEEC;
}
.feeArea .detail > div.right table tr td {
  background-color: #fff;
}
.feeArea .detail > div.right table tr td strong {
  font-size: 1.3em;
}
.feeArea .detail > div.right table tr:first-child td {
  color: #fff;
  width: 40%;
}
.feeArea .detail > div.right table tr:first-child td:nth-of-type(1) {
  background-color: #b4874d;
}
.feeArea .detail > div.right table tr:first-child td:nth-of-type(2) {
  background-color: #03376c;
}
.feeArea .detail > div.right ul {
  margin-left: 10px;
}

.accessArea .map {
  filter: grayscale(10);
}
.accessArea .map iframe {
  width: 100%;
  height: 700px;
}
@media screen and (max-width: 960px) {
  .accessArea .map iframe {
    height: 400px;
  }
}
.accessArea .text {
  padding: max(4vw, 30px) max(5vw, 20px) max(7vw, 50px);
}
.accessArea .text > section {
  max-width: 1000px;
  margin: 0 auto;
}
.accessArea .text > section h3 {
  font-size: clamp(40px, 6.25vw, 75px);
  line-height: 130%;
  font-family: "EB Garamond", serif;
  font-weight: 500;
  margin-bottom: 15px;
}
.accessArea .text > section .ja {
  font-size: clamp(17px, 2.0833333333vw, 25px);
  line-height: 130%;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  margin-bottom: max(4vw, 35px);
}
.accessArea .text > section address {
  font-size: clamp(16px, 1.6666666667vw, 20px);
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  margin-bottom: 30px;
}

.faqArea {
  background-color: #F9F8F5;
  padding: max(8vw, 50px) max(5vw, 20px);
}
.faqArea h3 {
  font-size: clamp(40px, 6.25vw, 75px);
  line-height: 130%;
  font-family: "EB Garamond", serif;
  font-weight: 500;
  text-align: center;
  margin-bottom: 15px;
}
.faqArea .ja {
  font-size: clamp(17px, 2.0833333333vw, 25px);
  line-height: 130%;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  text-align: center;
  margin-bottom: 6vw;
}
.faqArea .main {
  max-width: 1100px;
  margin: 0 auto;
}
.faqArea .main > section:not(:last-child) {
  margin-bottom: 30px;
}
.faqArea .main > section h4 {
  background-color: #fff;
  border-radius: 40px;
  padding: 20px 50px;
  display: flex;
}
@media screen and (max-width: 668px) {
  .faqArea .main > section h4 {
    border-radius: 30px;
    padding: 15px 20px;
  }
}
.faqArea .main > section h4 .q {
  font-size: clamp(17px, 2.0833333333vw, 25px);
  line-height: 130%;
  width: 1.5em;
}
.faqArea .main > section h4 .text {
  font-size: clamp(17px, 2.0833333333vw, 25px);
  line-height: 130%;
  width: calc(100% - 1.5em);
}
.faqArea .main > section > div {
  display: flex;
  padding: 20px 50px;
}
@media screen and (max-width: 668px) {
  .faqArea .main > section > div {
    padding: 20px 20px 0;
  }
}
.faqArea .main > section > div .a {
  font-size: clamp(17px, 2.0833333333vw, 25px);
  line-height: 130%;
  width: 1.5em;
}
.faqArea .main > section > div .text {
  font-size: clamp(13px, 1.3333333333vw, 16px);
  width: calc(100% - 1.5em);
  margin-top: 5px;
}/*# sourceMappingURL=index.css.map */