@charset "utf-8";

:root {
  --header-h-sp: 73.2px;
  --header-h-pc: 66.4px;
}

/* *****************************************
共通
******************************************** */
@media screen and (max-width:1080px) {

  /* ----------固定予約ボタン--------- */
  .fixed-btn a {
    gap: 20px;
    width: 230px;
    height: 68px;
  }

  /* -------footer------- */
  footer {
    padding-top: 3rem;
    padding-bottom: 10rem;
  }

  footer .ft-flex {
    justify-content: center;
  }
}

@media screen and (max-width:768px) {

  /* -------footer------- */
  footer .inner {
    width: 90%;
  }

  footer .ft-flex {
    justify-content: flex-end;
    align-items: flex-end;
    flex-direction: column-reverse;
  }

  footer .info {
    width: 100%;
  }

  footer .ft-tl a {
    font-size: 2rem;
    text-align: end;
    margin-right: 0;
    margin-left: auto;
  }

  footer .info address {
    width: fit-content;
    margin-right: 0;
    margin-left: auto;
  }

  footer .info ul {
    width: 100%;
    margin-right: 0;
    margin-left: auto;
  }

  /* ナビ */
  footer .nav__list {
    width: 280px;
  }

  footer .nav__link {
    width: auto;
  }

  /* その他規約など */
  .notice {
    padding: 5rem 0;
    justify-content: flex-end;
  }
}

@media screen and (max-width:572px) {

  /* -------固定予約ボタン------- */
  .fixed-btn {
    width: 100%;
  }

  .fixed-btn a {
    width: 100%;
    height: 60px;
    border-left: none;
    margin: auto;
  }

  .fixed-btn .txt {
    font-size: 1.6rem;
  }

  .fixed-btn .txt span {
    font-size: 1.2rem;
  }

}

/* *****************************************
トップページ
******************************************** */

@media screen and (max-width:1080px) {

  /* -------top intro------- */
  .top-intro .cont {
    width: 60%;
  }

  /* -------top about------- */
  .about .inner {
    width: 95%;
  }

  .about .card {
    flex-basis: calc((100% - 5%) / 2);
  }

  /* -------top-facilities------- */
  .top-facilities .card {
    flex: 0 0 50%;
    aspect-ratio: 4 / 5;
  }
}

@media screen and (max-width:768px) {

  /* -------------mv------------- */
  .mv-tl {
    top: 50%;
    left: 3rem;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
  }

  .mv-tl img {
    width: 130px;
  }

  .illust-mv {
    width: 230px;
    left: 5%;
    right: -10%;
    left: auto;
    bottom: 0;
    transform: none;
  }

  /* -------top intro------- */
  .top-intro .cont {
    width: 80%;
    margin-right: auto;
    margin-left: auto;
  }

  .top-intro .illust-box {
    margin-top: 0;
  }

  .top-intro .illust-box div {
    transform: scale(0.8);
  }

  /* -------top about------- */
  .about .inner {
    width: calc(100% - 20px);
  }

  .about .illust {
    position: absolute;
    right: 0;
    bottom: auto;
    top: -8rem;
    width: 130px;
  }


  .about .card-box {
    padding: 0 0 8rem 0;
  }

  .about .card {
    flex-basis: 95%;
  }

  /* -------cta-box------- */
  .cta-box .pic {
    width: 200px;
  }

  /* -------top-facilities------- */
  .top-facilities .hd::before {
    top: 15px;
    left: 15px;
    width: 130px;
    height: 130px;
  }

  .top-facilities .hd::after {
    position: absolute;
    right: -60px;
    bottom: -10rem;
    transform: scale(0.6);
  }

  .top-facilities .card-box {
    gap: 30px 0;
  }

  .top-facilities .card {
    flex: 0 0 100%;
    aspect-ratio: 1 / 1;
  }


  /* -------アクセス共通------- */
  .route .cont {
    flex-flow: column;
  }

  .route .more-button {
    margin-right: 0;
    margin-left: auto;
  }

  /* -------top-news------- */
  .news-mordal {
    margin-top: 5rem;
  }

  .top-news .inner {
    display: block;
  }
}

@media screen and (max-width:572px) {

  /* -------top intro------- */
  .top-intro .sub-catch {
    font-size: 1.4rem;
  }

  .top-intro .tl {
    font-size: 2rem;
  }

  .top-intro .illust-box {
    width: 90%;
  }

  /* -------top about------- */
  .about .inner::before {
    top: -20px;
    left: -20px;
    transform: scale(0.7);
  }

  .about .inner-hd {
    padding: 8rem 20px 0 8rem;
  }

  .about .tl {
    font-size: 2.4rem;
  }

  /* -------cta-box------- */
  .cta-box .tl {
    font-size: 2.8rem;
  }

  /* -------top-facilities------- */
  .top-facilities .tl span {
    font-size: 1.6rem;
  }

  .top-facilities .tl {
    font-size: 2.4rem;
  }

}

/* *****************************************
下層共通
******************************************** */

@media (max-width: 768px) {

  /* 共通intro  */
  .c-mv {
    aspect-ratio: 3 / 2;
  }

  .c-tl h2 {
    font-size: 3.2rem;
    font-weight: 700;
  }

  .c-tl span {
    font-size: 1.6rem;
  }

  .c-catch {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.6;
    margin-top: 5rem;
  }

  .c-desc {
    font-size: 1.6rem;
    line-height: 2.4;
    margin-top: 5rem;
  }

  /* 画像の真下のキャプション */
  .caption-slider .swiper-slide figcaption {
    font-size: 1.8rem;
  }
}

/* *****************************************
page bath
******************************************** */


@media (max-width: 768px) {

  /* 温泉セクション上部 */
  .onsen .upper .cont h4 {
    font-size: 2.8rem;
    letter-spacing: 0.5em;
  }

  .onsen .upper .cont p {
    font-size: 1.6rem;
  }

  /* 温泉セクション下部 */
  .onsen .under h4 {
    font-size: 2.8rem;
    letter-spacing: 0.5em;
  }

  /* sauna text */
  .sauna .cont h4 {
    font-size: 2.8rem;
  }

  .sauna .cont p {
    font-size: 1.6rem;
  }

  .sauna .cont figcaption h5 {
    font-size: 2rem;
  }

  .sauna .cont figcaption span {
    font-size: 1.6rem;
  }

  /* ===== 営業時間 ===== */
  .price {
    padding: 10rem 0;
  }

  .price__title {
    font-size: 2.2rem;
  }

  .price-section__heading {
    font-size: 1.8rem;
  }

  .price-table {
    font-size: 1.4rem;
  }

  .price-table th,
  .price-table td {
    padding: 10px 0;
  }

  .amenity {
    padding: 10rem 0;
  }

  .amenity h3 {
    font-size: 2.8rem;
    text-align: center;
  }

}

@media screen and (max-width:572px) {

  /* -------ポイント------ */
  .pointWrap {
    flex-flow: column;
    flex-direction: column-reverse;
  }

  .pointWrap img {
    width: 130px;
    height: auto;
    margin-right: 0;
    margin-left: auto;
  }

  /* 詳細 */
  .onsen .detail {
    display: block;
  }

  .onsen .detail div:not(:last-child) {
    margin-bottom: 20px;
  }

  .onsen .detail dt {
    width: 130px;
    font-size: 1.8rem;
    margin-right: 0;
    margin-left: 0;
  }

  .onsen .detail dd {
    text-align: start;
  }
}


/* *****************************************
page room
******************************************** */
@media (max-width: 768px) {
  .room .c-txt::after {
    right: 5%;
    top: -80px;
    width: 80px;
    height: 142px;
  }

  .room .card {
    flex: 0 0 100%;
    aspect-ratio: 16 / 9;
  }

  .room .card .cont {
    width: 90%;
  }

  .room .card h3 {
    font-size: 2rem;
  }
}

@media (max-width: 572px) {
  .room-amenitiy {
    display: block;
  }

  .room-amenitiy .tl {
    margin-bottom: 3rem;
  }
}

/* *****************************************
page facilities
******************************************** */

@media (max-width: 768px) {

  /* -----------フロアマップ---------- */
  .fc-map .iconBox {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(4, auto);
    gap: 10px 0;
  }

  .fc-map .iconBox li {
    width: auto;
    font-size: 1.6rem;
    gap: 10px;
  }

  /* ホール */
  .fc-hall .info {
    display: block;
    font-size: 1.8rem;
  }

  .fc-hall .info span {
    display: block;
  }

  .rental-cv p {
    font-size: 1.6rem;
  }

}

/* *****************************************
page sightseeing
******************************************** */
@media (max-width:900px) {
  .local {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 40px 20px;
  }

  .local__head {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .local__stripes {
    /* width: 96px; */
    height: 30px;
  }

  .local__connector {
    flex-direction: row;
    justify-content: flex-end;
    padding-top: 16px;
  }

  .local__line {
    display: block;
    flex: 1;
    width: auto;
    min-height: 0;
    height: 1px;
    margin-bottom: 0;
  }

  .local__badge {
    padding: 7px 22px;
    background: transparent;
    color: var(--dull-green);
    border: 1px solid var(--dull-green);
  }

  .local__main {
    gap: 40px;
  }
}

@media (max-width: 768px) {
  .sightseeing .c-txt img {
    width: 60px;
  }

  .sightseeing .c-intro .illustBox img:nth-child(1) {
    top: calc(var(--header-h-sp) + 31px);
    width: 80px;
  }

  .sightseeing .c-intro .illustBox img:nth-child(2) {
    width: 260px;
  }

  .local__lead {
    font-size: 2.8rem;
  }

  .local__title {
    font-size: 2.4rem;
  }
}