@charset "utf-8";

:root {
  --en-font: 'Poppins';
  --ja-font: 'Noto Sans JP';
  --font-color: #2F2F2F;
  --white-color: #fff;
  --base-color: #F9F5EF;
  --yellow-color: #FBD008;
  --lightyellow-color: #ffe364;
  --gray-color: #C4C4C4;
  --lightblack-color: #6A6969;
}

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

  /* ===================================
  共通要素
  ====================================== */
  .title {
    font-size: 6rem;
    letter-spacing: 0.05em;
  }

  /* ===================================
  tbsado
	====================================== */
  .tbsado .title {
    font-size: 4.8rem;
    letter-spacing: 0;
  }
}

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

  /* ===================================
  ヘッダー
	====================================== */
  .header-logo {
    width: 342px;
  }

  /* ===================================
  MV　メインビジュアル
	====================================== */
  .mv {
    margin-top: 90px;
  }

  /* ===================================
  共通要素
	====================================== */
  .common-txt p:nth-child(2) {
    margin-top: 15px;
  }

  .common-box {
    gap: 15px;
  }

  .tbsado .common-box {
    gap: 15px;
  }

  .b-txt p {
    line-height: 1.6;
  }

  .cocmmon-btn a div:first-child {
    font-size: 2rem;
  }

  .cocmmon-btn a div:last-child {
    width: 50px;
  }
}

/* ********タブレット大******** */
@media screen and (max-width: 960px) {

  /* ===================================
  共通要素
	====================================== */
  .common-flex {
    width: 90%;
    display: flex;
    flex-flow: column;
    flex-direction: column-reverse;
    gap: 5rem;
  }

  .common-pic {
    width: 80%;
    margin: 0 auto;
  }

  .common-box {
    width: 100%;
  }

  .deco:empty {
    width: 150px;
    height: 150px;
  }

  /* ===================================
  column-reverseしない共通section
	====================================== */
  .intro .common-flex {
    flex-direction: column;
  }

  .facilities .common-flex {
    flex-direction: column;
  }

  /* ====================================
  facilities
  ====================================== */
  .facilities .common-flex .ja-title {
    text-align: center;
    line-height: 1.4;
  }

  .breakfast .ja-title {
    text-align: center;
  }

  .benefits .ja-title {
    text-align: center;
  }

  .b-txt p {
    font-size: 1.6rem;
    line-height: 1.4;
  }

  .breakfast figure {
    width: calc(100% / 2);
  }


  /* ===================================
  プラン
  ====================================== */
  .plan-detail table th, .plan-detail table td {
    padding: 10px;
  }

  th.room-type {
    font-size: 1.8rem;
  }

  .col-1 {
    width: calc((100% - 30%) / 2);
  }

  .col-2 {
    width: calc((100% - 30%) / 2);
  }

  .col-3 {
    width: 30%;
  }

}

/* ********タブレット中******** */
@media screen and (max-width: 768px) {

  /* ===================================
  header ヘッダー
====================================== */
  header {
    padding: 2rem 0;
  }

  .nav.active {
    top: 51px;
  }

  .mv {
    margin-top: 70px;
    /* ヘッダーの高さ分 */
  }

  /* ===================================
  fixed 予約ボタン
====================================== */
  .fixed-btn {
    padding: 8px 2rem 5px;
  }

  .fixed-btn a {
    gap: 16px;
  }

  .btn-txt {
    font-size: 1.8rem;
  }

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

  .arrow {
    width: 40px;
  }

  /* ===================================
  共通要素
  ====================================== */
  .common-cotainer {
    margin-top: 10rem;
  }

  .title {
    font-size: 4rem;
    letter-spacing: 0.05em;
  }

  .ja-title {
    font-size: 2.6rem;
  }

  .p {
    font-size: 1.6rem;
  }

  .event .deco:empty, .deco:empty {
    top: -20px;
    right: 0;
    width: 120px;
    height: 120px;
  }

  .plan .deco:empty {
    top: 0;
  }

  .cocmmon-btn a {
    gap: 36px;
    padding: 12px 28px;
  }

  .cocmmon-btn a div:first-child {
    font-size: 1.8rem;
  }

  .cocmmon-btn a div:last-child {
    width: 40px;
  }


  /* ===================================
  tbsado
	====================================== */
  .tbsado .title {
    font-size: 3.6rem;
    letter-spacing: 0.05em;
  }

  /* ===================================
  facilities
  ====================================== */
  /* ---------大浴場について----------- */
  .facilities .common-flex {
    gap: 3rem;
  }

  .bath-txt .ja-title span {
    font-size: 1.8rem;
  }

  .bath-txt dl {
    width: 100%;
    background-color: #fbce081e;
    padding: 15px;
    margin-top: 15px;
  }

  /* -----------朝食について---------- */
  .breakfast .restaurant {
    padding: 0;
  }

  .bf-pc {
    display: none;
  }

  .bf-sp {
    width: 100%;
    margin-bottom: 15px;
  }

  .bf-sp:last-child {
    margin-bottom: 0;
  }

  .bf-sp .bf-col {
    width: 100%;
  }

  .bf-sp th {
    width: 30%;
  }

  .bf-sp td {
    width: 70%;
  }

  .breakfast figcaption p {
    font-size: 1.6rem;
  }

  .breakfast figcaption div {
    font-size: 1.4rem;
  }

  .breakfast figcaption small {
    font-size: 1.2rem;
    margin-top: 0;
  }

  /* --------プラン特典について--------- */
  .b-container {
    gap: 5rem 5%;
    margin-top: 3rem;
  }

  .b-item {
    width: 100%;
  }

  .b-txt {
    height: auto;
  }

  .b-txt h3 {
    font-size: 2.2rem;
  }

  .b-txt h3 .icon-1 {
    width: 35px;
  }

  .b-txt h3 .icon-2 {
    width: 25px;
  }

  .b-txt h3 .icon-3 {
    width: 35px;
  }

  .b-txt h3 .icon-4 {
    width: 45px;
  }

  /* ===================================
  プラン
  ====================================== */
  .plan-pc {
    display: none;
  }

  .plan-detail {
    margin: 5rem auto 0;
  }

  .plan-detail .plan-sp {
    width: 100%;
    border-collapse: collapse;
    margin-top: 3rem;
    box-sizing: border-box;
  }

  .plan-detail table th, .plan-detail table td {
    padding: 10px 20px;
  }

  .plan-sp .col-1 {
    width: 100%;
  }

  .plan-sp th {
    width: 30%;
    font-size: 1.8rem;
  }

  .plan-sp td {
    width: 70%;
  }

  .plan-sp .cont {
    font-size: 1.4rem;
  }

  /* ===================================
  注意事項
  ====================================== */
  .attention {
    padding: 8rem 0;
  }

  .a-item {
    margin-top: 4rem;
  }

  .a-title {
    font-size: 2.2rem;
  }

  .send {
    width: 100%;
  }

  /* ==================================
フッター
===================================== */
  .copy {
    padding-bottom: 56px;
  }
}

/* **********タブレット小*********** */
@media screen and (max-width: 600px) {
  .send address {
    flex-direction: column;
    text-align: center;
  }

  /* ==================================
  フッター
  ===================================== */
  .ft-inner {
    flex-direction: column;
    margin: 0 auto;
    gap: 15px;
  }

  .ft-item {
    width: 100%;
  }

  .ft-logo {
    width: 150px;
    margin: 0 auto;
  }

  .ft-item h2 {
    text-align: center;
  }

  .ft-item address {
    text-align: center;
  }

  .ft-item p {
    text-align: center;
  }
}

/* ********スマホ大******** */
@media screen and (max-width: 480px) {

  /* ===================================
  header ヘッダー
  ====================================== */
  header {
    padding: 15px 0;
  }

  .header-logo {
    width: 250px;
    margin-left: 20px;
  }

  .nav.active {
    top: 37px;
    /* ヘッダーの高さに比例 */
  }

  /* ===================================
  MV　メインビジュアル
  ====================================== */
  .mv {
    margin-top: 52px;
    /* ヘッダーの高さ分 */
  }

  .mv picture {
    display: block;
    width: 100%;

  }

  .mv img {
    object-fit: cover;
    object-position: left;
    height: 80vh;
  }

  /* ===================================
  共通要素
  ====================================== */
  .ja-title {
    font-size: 2.2rem;
  }

  .common-cotainer {
    margin-top: 8rem;
  }

  .common-pic {
    width: 100%;
  }

  .cocmmon-btn a {
    gap: 10px;
  }

  .cocmmon-btn a div:last-child {
    width: 30px;
  }

  /* -------------------------
  大浴場について
  ---------------------------- */
  .bath-txt .ja-title span {
    font-size: 1.6rem;
  }

  .bath-txt dt {
    font-size: 1.6rem;
  }

  .bath-txt dd {
    font-size: 1.6rem;
  }

  /* -------------------------
  朝食について
  ---------------------------- */
  .breakfast table th, .breakfast table td {
    font-size: 1.8rem;
  }

  .breakfast .restaurant {
    flex-direction: column;
  }

  .breakfast figure {
    width: 80%;
    margin: 0 auto 15px;
  }

  .breakfast figure:last-child {
    margin-bottom: 0;
  }

  /* ---------------------------
  プラン特典について
  ------------------------------ */
  .b-pic {
    width: 85%;
  }

  .b-txt {
    padding: 2rem 3rem 2.5rem;
  }

  .b-txt h3 {
    font-size: 2rem;
  }

  /* ===================================
  注意事項
  ====================================== */
  .attention {
    padding: 5rem 0;
  }

  .at-inner {
    width: 85%;
  }

  .a-item {
    margin-top: 3rem;
  }

  .a-title {
    font-size: 2rem;
  }

  .a-item h4 {
    font-size: 1.8rem;
    margin-top: 15px;
  }

  .send h5 {
    font-size: 1.8rem;
    margin-top: 0;
  }

  .a-item table th, .a-item table td {
    font-size: 1.8rem;
  }
}