@charset "utf-8";

:root {
  --default-font: "Noto Sans JP", serif;
  --font-color: #4A4A4A;
  --white-color: #fbfffe;
  --blue-color: #61C1BE;
  --green-color: #8CC66D;
  --pink-color: #F29B87;
  --lightgray-color: #F5F5F5;
}

/* *****************************************
                1280px以下
******************************************* */
@media screen and (max-width: 1280px) {

  /* --------------------------------------
        プラン・お部屋について
----------------------------------------- */
  /* ---------テーブル---------- */
  .table-flex {
    display: block;
  }

  .table-flex div {
    width: 70%;
    margin: 0 auto 5rem;
  }

  .table-flex div:last-child {
    margin-bottom: 0;
  }

  /* --------------------------------------
        大浴場について
----------------------------------------- */
  .about-bath ul {
    width: 100%;
    display: block;
    margin: 0 auto;
  }

  .about-bath ul li {
    text-align: center;
  }
}

/* *****************************************
                960px以下
******************************************* */
@media screen and (max-width: 960px) {

  /* --------------------------------------
        予約
----------------------------------------- */
  .reserve-inner {
    width: 90%;
  }

  /* --------------------------------------
        プラン特典について
----------------------------------------- */
  .planWrap {
    flex-wrap: wrap;
    gap: 0;
  }

  .plan-item {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 0 2rem;
    margin: 0 auto 5rem;
  }

  .plan-item:last-child {
    margin-bottom: 0;
  }

  /* --------バイク事前配送について------- */
  .at-delivery-inner address {
    font-size: 1.6rem;
    padding: 3rem 2rem;
  }

  .at-delivery-inner .delivery-note {
    flex-wrap: wrap;
  }

  .at-delivery-inner .delivery-note p {
    margin-bottom: 2rem;
  }

  .at-delivery-inner .delivery-note p:last-child {
    margin-bottom: 0;
  }

  /* -----------キャンセルについて----------- */
  .at-cancel ul {
    margin-top: 1rem;
  }

  .at-cancel ul li {
    font-size: 1.6rem;
  }
}

/* *****************************************
                768px以下
******************************************* */
@media screen and (max-width: 768px) {
  .sp-br {
    display: block;
  }

  /* ----------------------
境界線
------------------------ */
  .border-top {
    width: 100%;
    height: 100px;
    display: block;
  }

  .border-bottom {
    width: 100%;
    height: 100px;
    display: block;
  }

  /* -----------------------------------------
              イントロ .intro
-------------------------------------------- */
  .intro {
    padding-top: 10rem;
    display: block;
  }

  .intro_pic {
    width: 100%;
  }

  .intro_txt {
    margin-top: 3rem;
    width: 100%;
  }

  /* --------------------------------------
        たびのホテル佐渡について
----------------------------------------- */
  .tbsado {
    padding-top: 5rem;
  }

  /* --------------------------------------
        ホテルについて
----------------------------------------- */
  .about-hotel {
    margin: 5rem auto 0;
  }

  .about-hotel-inner {
    display: block;
  }

  .about-hotel-inner img {
    display: block;
    width: 70%;
    margin: 2rem auto 0;
  }

  /* --------------------------------------
        プラン・お部屋について
----------------------------------------- */
  /* ---------テーブル---------- */
  .table-flex div {
    width: 90%;
  }

  /* --------------------------------------
        大浴場について
----------------------------------------- */
  .about-bath h5 {
    width: 100%;
    margin: 3rem auto 1rem;
    padding: 15px 0;
  }

  .about-bath div p {
    font-size: 1.8rem;
  }

  /* --------------------------------------
        プラン特典について
----------------------------------------- */
  .planWrap {
    width: 100%;
    margin: 3rem auto 0;
  }

  /* --------------------------------------
        朝食について
----------------------------------------- */
  .bf-flex {
    max-width: 1360px;
    width: 75%;
    display: block;
    justify-content: space-between;
    gap: 3%;
    margin: 5rem auto 0;
  }

  .bf-flex figure {
    width: 100%;
    padding-bottom: 2rem;
  }

  .bf-flex figure img {
    width: 70%;
    height: auto;
    margin: 0 auto;
    border-radius: 5px;
  }

  .bf-flex figure small {
    font-size: 1.4rem;
    text-align: center;
  }

  /* --------------------------------------
        バイク組み立て
----------------------------------------- */
  .bicycle {
    margin-top: 10rem;
  }

  .bicycle div {
    width: 90%;
  }



  /* --------------------------------------
        注意事項
----------------------------------------- */
  .attention {
    width: 95%;
  }

  .attention-inner {
    padding: 5rem 0;
  }

  .attention-inner h3 {
    font-size: 2.4rem;
  }

  .at-box {
    margin-top: 3rem;
    width: 80%;
    margin-right: auto;
    margin-left: auto;
  }

  .at-subtitle {
    font-size: 2rem;
    margin-bottom: 1rem;
  }

  .at-box p {
    font-size: 1.6rem;
  }

  /* ----------プランについて--------- */
  .at-plan-inner h5 {
    font-size: 1.8rem;
    margin-bottom: 1rem;

  }

  .at-plan-inner ul li {
    font-size: 1.6rem;
  }

  .at-plan-inner p {
    margin-top: 2rem;
  }

  .at-plan-inner .eco {
    font-size: 1.4rem;
    padding: 1.5rem 3rem;
  }

  /* --------バイク事前配送について------- */
  .at-delivery-inner .address-wrap {
    flex-wrap: wrap;
    margin: 3rem 0;
  }

  .at-delivery-inner address {
    margin-bottom: 2rem;
  }

  .at-delivery-inner address:last-child {
    margin-bottom: 0;
  }

  /* --------------------------------------
        フッター
----------------------------------------- */
  footer {
    margin-top: 5rem;
  }

  .ft-inner {
    max-width: 1360px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end;
    margin: 0 auto 3rem;
    gap: 10%;
  }

  .ft-inner div a img {
    max-width: 150px;
    height: auto;
  }

}

/* ************************************************
        600px以下 フォントや余白をSPように調整
*************************************************** */
@media screen and (max-width: 600px) {
  p {
    line-height: 1.7;
  }
  :target {
    scroll-margin-top: var(--headerHeight, 50px);
    /* ヘッダーの高さ分の余白を確保 */
  }

  /* ----------------------
境界線
------------------------ */
  .border-top {
    height: 80px;
  }

  .border-bottom {
    height: 80px;
  }

  /* -----------------------------------------
              ヘッダー　header
-------------------------------------------- */
  header {
    top: auto;
    bottom: 0;
  }

  .header-inner {
    flex-flow: column;
    align-items: flex-end;
    width: 100%;
    margin: 0 auto;
    padding: 10px 1rem;
  }

  .header-inner div {
    width: 80px;
  }

  .header-inner a {
    font-size: 1.4rem;
    font-weight: bold;
    padding: 5px 20px;
  }

  /* -----------------------------------------
              イントロ .intro
-------------------------------------------- */
  .intro {
    padding-top: 5rem;
    padding-bottom: 2rem;
  }

  /* --------------------------------------
        たびのホテル佐渡について
----------------------------------------- */
  .tbsado {
    padding-top: 3rem;
  }

  .common_img {
    width: 80%;
    margin: 2rem auto;
  }

  /* --------------------------------------
        ホテルについて
----------------------------------------- */
  .about-hotel {
    margin: 3rem auto 0;
  }

  .about-hotel-inner img {
    width: 100%;
  }

  /* --------------------------------------
        プラン・お部屋について
----------------------------------------- */
  /* ---------テーブル---------- */
  .table-flex {
    margin: 3rem auto 0;
  }

  .table-flex div {
    margin: 0 auto 2rem;
  }

  tr .persons {
    width: 65px;
    padding: 0;
  }

  /* --------------------------------------
        朝食について
----------------------------------------- */
  .bf-attention {
    margin-top: 3rem;
  }

  .about-bf ul li {
    width: 100%;
    padding: 10px 3rem;
  }

  .bf-flex {
    width: 80%;
  }

  .order_note {
    margin-top: 3px;
  }

  /* --------------------------------------
        バイク組み立て
----------------------------------------- */
  .bicycle {
    margin-top: 5rem;
  }

  .bicycle div {
    width: 80%;
    flex-direction: column;
  }

  .bicycle div figure {
    width: 50%;
    margin: 2rem;
  }

  .bicycle div p {
    width: 100%;
  }

  /* --------------------------------------
        予約
----------------------------------------- */
  .reserve-inner {
    display: block;
  }

  .book-item {
    margin-bottom: 5rem;
  }

  .book-item:last-child {
    margin-bottom: 0;
  }

  .book-item .book-txt {
    width: 100%;
  }

  .book {
    margin-bottom: 5px;
  }

  .at-delivery-inner address {
    width: 80%;
  }

  .at-delivery-inner address span {
    text-align: center;
  }
}

/* *****************************************
                480px以下
******************************************* */
@media screen and (max-width: 480px) {
  .sp480-br {
    display: block;
  }

  /* -----------------------------------------
              イントロ .intro
-------------------------------------------- */
  .intro_txt h2 {
    line-height: 1.2;
  }

  /* --------------------------------------
        たびのホテル佐渡について
----------------------------------------- */
  .subtitle {
    font-size: 2rem;
    color: var(--font-color);
    text-align: center;
    font-weight: 900;
  }

  /* --------------------------------------
        プラン・お部屋について
----------------------------------------- */
  .table-flex div {
    width: 100%;
  }

  /* --------------------------------------
        大浴場について
----------------------------------------- */
  .about-bath h5 {
    font-size: 1.8rem;
  }

  .about-bath div p {
    margin: 0 auto;
    line-height: 1.4;
  }

  /* --------------------------------------
        プラン特典について
----------------------------------------- */
  .about-plan {
    margin-top: 10rem;
  }

  .planWrap {
    flex-direction: column;
  }

  .plan-item {
    width: 90%;
  }

  .plan-txt {
    text-align: justify;
  }

  /* --------------------------------------
        朝食について
----------------------------------------- */
  .bf-attention {
    width: 80%;
    margin: 2rem auto;
  }

  .about-bf ul li {
    flex-direction: column;
  }

  .about-bf ul li div {
    font-size: 1.6rem;
    width: 100%;
    text-align: center;
  }

  .bf-flex figure figcaption {
    font-size: 1.8rem;
  }

  .order_note {
    font-size: 1.4rem;
  }
/* --------バイク事前配送について------- */
  .at-delivery-inner address {
    width: 100%;
  }

}