@charset "utf-8";


/* ==============================
   基本設定
============================== */

html {
  scroll-behavior: smooth;
}

body {
  background-color: #fff;
  font-weight: 300;
  font-size: 90%;
  line-height: 1.2;
  letter-spacing: 0.1em;
  color: #000;

  font-family: "Noto Sans JP", serif;
  font-optical-sizing: auto;
  font-style: normal;

  margin: 0;
  padding: 0;
}


/* ==============================
   共通 inner
   通常コンテンツ幅：82%
============================== */

.inner_area {
  max-width: 82%;
  margin: 0 auto;
}


/* ==============================
   見出し
============================== */

h1 {
  width: 88%;
  margin: 0 auto;
  margin-bottom: 20px;
}

h2 {
  width: 100%;
  margin: 0 auto;
  margin-bottom: 15px;
}

h3 {
  color: #E5006E;
  text-align: center;
  font-weight: 900;
  font-size: 5vw;
}

h3 img {
  width: 100%;
}

h4 {
  width: 100%;
  margin: 0 auto;
}

h5 {
  color: #fff;
  font-size: 3vw;
  font-weight: 600;
}

h6 {
  color: #fff;
  font-size: 3vw;
  font-weight: 600;
  margin-bottom: 10px;
}


/* ==============================
   HEADER
============================== */

header {
  margin: 0 auto;
  text-align: center;
  padding-top: 24px;
}


/*
  上部NAPSロゴ
  ロゴ画像部分だけクリック可能
*/
.naps_top_link {
  display: block;
  width: 70%;
  margin: 0 auto;
}

.naps_top_link img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
}


/* ==============================
   FV
============================== */

.fv_area {
  background-color: #E5006E;
  padding-top: 30px;
  padding-bottom: 0;
}


/* ==============================
   上部タイトル部分
   82%
============================== */

.fv_title_area {
  max-width: 82%;
  margin: 0 auto;
}


.fv_title_area h1 {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}


.fv_title_area img {
  display: block;
  width: 100%;
  height: auto;
}


.fv_area p {
  margin-top: 20px;
}


/* ==============================
   64.png
   完全フルワイド
============================== */

.fv_full_image {
  width: 100%;
  margin: 0;
  padding: 0;
}


.fv_full_image img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
}


/* ==============================
   MAIN
============================== */

.main_area {
  width: 100%;
  margin-bottom: 20px;
  margin-top: 10px;
}


.main_area p img {
  width: 100%;
  margin-bottom: 10px;
}


.main_bike {
  width: 100%;
  margin-top: 5px;
  margin-bottom: 10px;
}


/* ==============================
   FLEX 共通
============================== */

.flex_area {
  display: flex;
  justify-content: space-between;
  text-align: center;
}


/*
  通常のflex_area用

  ※tour_buttonsについては
  後ろで専用指定を上書きします
*/
.flex_area > div {
  width: 50%;
}


/* ==============================
   矢印
============================== */

.arrow_animation {
  width: 20%;
  display: block;
  margin: 0 auto;
}


/* ==============================
   緑ボタン
   82.png・83.png

   ★中央の隙間は
   column-gapだけで調整
============================== */

.tour_buttons {
  display: flex;

  width: 100%;

  justify-content: flex-start;
  align-items: flex-start;

  /*
    ★ここだけ変更すれば
    中央の隙間を調整できます。

    小さくする → 1%
    現在 → 2%
    広くする → 3%、4%など
  */
  column-gap: 2%;

  margin: 0;
  padding: 0;
}


/*
  共通の
  .flex_area > div { width:50%; }
  をここで上書き。

  残った横幅を2つのボタンで
  自動的に半分ずつ使用します。
*/
.flex_area.tour_buttons > div {
  width: auto;
  flex: 1 1 0;
  min-width: 0;
}


/*
  画像は各ボタンエリアを
  100%使用。

  左ボタンの左端と
  右ボタンの右端が
  82%のinner_areaに揃います。
*/
.tour_list {
  width: 100%;
  margin: 0;
  padding: 0;
  border-radius: 20px;
}


.tour_list a {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
}


.tour_list img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
}


/* ==============================
   SCHEDULE
============================== */

.schedule_area {
  width: 100%;
}


.schedule_area ul {
  margin-top: 10px;
}


.schedule_area ul li {
  width: 80%;
  margin: 5px auto;
}


.schedule_area ul .arrow img {
  width: 30%;
  margin: 0 auto;
  display: block;
}


.schedule_area ul .goal img {
  width: 78%;
  margin: 5px auto;
  display: block;
}


.schedule_area ul .goal_toyohashi img {
  width: 94%;
  margin: 5px auto;
  display: block;
}


.schedule_area h3 {
  padding: 0 10px;
}


.schedule_area .map {
  margin-top: 6px;
  margin-bottom: 6px;
  padding: 0 10px;
}


.schedule_area .fee {
  padding: 0 10px;
}


.schedule_area .fff_text img {
  width: 80%;
  margin: 0 auto;
  display: block;
}


.schedule_area .must_text img {
  width: 80%;
  margin: 5px auto;
  display: block;
}


.schedule_area .btn_area a img {
  width: 62%;
  margin: 0 auto;
  display: block;
}


.schedule_area .btn_area {
  align-items: center;
  border-radius: 10px;

  width: 80%;

  box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.25);

  background-image:
    linear-gradient(
      180deg,
      #00A0CA,
      #e0f3ff 56%,
      #00A0CA
    );

  margin: 0 auto;

  padding-bottom: 10px;
  padding-top: 10px;
}


.schedule_area .food {
  width: 64%;
  margin: 8px auto 10px;
  display: block;
}


/* ==============================
   DAY FIRST
============================== */

.day_first {
  background-color: #FADCE4;
  margin-bottom: 10px;
  padding-bottom: 0;
}


.day_first img {
  width: 100%;
  display: block;
}


/* ==============================
   73.png
============================== */

.day_first2 {
  background-color: #ffffff;
  margin: 0;
  padding: 0;
}


.day_first2 img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
}


/* ==============================
   73.png → ボタン部分
   余計な上下余白を作らない
============================== */

.content_block {
  width: 100%;
  margin: 0;
  padding: 0;
}


.buttons_block {
  margin: 0;
  padding: 0;
}


/* ==============================
   84.png
============================== */

.notice_image {
  margin: 4px 0 0;
  padding: 0;
}


.notice_image img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
}


/* ==============================
   問い合わせ部分
============================== */

.contact_area {
  margin: 0;
  padding: 0;
}


.contact_area a {
  display: block;
  margin: 0;
  padding: 0;
}


.contact_area img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
}


/* ==============================
   その他
============================== */

.day_second {
  background-color: #FADCE4;
  margin-bottom: 20px;
  padding-bottom: 10px;
}


.day_second img {
  width: 100%;
}


.day_second p {
  color: #E5006E;
}


.announce_area {
  width: 80%;
  margin: 0 auto;
  display: block;
}


.announce_area img {
  width: 100%;
  padding-bottom: 8px;
}


.btn_center {
  display: block;
  width: 100%;
  max-width: 50%;
  margin: 0 auto;
  text-align: center;
}


.btn_center img {
  width: 100%;
  height: auto;
  display: block;
}


/* ==============================
   FOOTER
============================== */

footer {
  background-color: #4b4949;

  /*
    上側の余白は
    NAPSロゴのクリック範囲外
  */
  padding-top: 14px;

  /*
    下側を少し広めに
  */
  padding-bottom: 12px;
}


/*
  NAPSロゴ画像部分だけ
  クリック可能
*/
.naps_footer_link {
  display: block;
  width: 60%;
  margin: 0 auto 20px;
  padding: 0;
}


.naps_footer_link img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
}


/* ==============================
   スマートフォン
============================== */

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


  /*
    スマホも通常コンテンツ82%
  */
  .inner_area {
    max-width: 82%;
    margin: 0 auto;
  }


  /*
    上部タイトルも82%
  */
  .fv_title_area {
    max-width: 82%;
    margin: 0 auto;
  }


  .fv_title_area h1 {
    width: 100%;
  }


  .fv_title_area img {
    display: block;
    width: 100%;
    height: auto;
  }


  /*
    64.pngはスマホでも
    100%フルワイド
  */
  .fv_full_image {
    width: 100%;
    margin: 0;
    padding: 0;
  }


  .fv_full_image img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
  }


  /*
    73.png周辺
  */
  .content_block {
    margin: 0;
    padding: 0;
  }


  .day_first2 {
    margin: 0;
    padding: 0;
  }


  /*
    緑ボタンについては
    スマホ専用のgap指定をしません。

    上で設定した
    column-gap: 2%;
    がそのまま適用されます。

    そのため今後は
    PC・スマホ共通で
    1か所だけ変更すればOKです。
  */


  .notice_image {
    margin-top: 4px;
  }


  /*
    フッター
  */
  footer {
    padding-top: 12px;
    padding-bottom: 12px;
  }


  .naps_footer_link {
    width: 60%;
    margin: 0 auto 20px;
  }

}