@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;
}


/* ==============================
   元の設定
============================== */

.inner_area {
  max-width: 74%;
  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 {
  background-color: #E5006E;
  margin: 0 auto;
  text-align: center;
  padding-top: 5%;
}

header img {
  width: 70%;
}


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

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

.fv_area img {
  width: 100%;
}

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


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

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


/*
  64.pngを画面幅いっぱいに表示
*/
.main_visual {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
}


/*
  新しい64.png
*/
.main_image {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
}


/* ==============================
   83.png
   64.pngの緑ボタンの上に重ねる
============================== */

.afterparty_btn {
  position: absolute;

  left: 8.8%;
  bottom: 0.4%;
  width: 82.4%;

  display: block;
  margin: 0;
  padding: 0;

  z-index: 10;
}


/*
  83.png
*/
.afterparty_btn img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
}


/* ==============================
   以下、元のCSS
============================== */

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

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

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

.arrow_animation {
  width: 20%;
}

.tour_list {
  margin: 0 auto;
  width: 96%;
  border-radius: 20px;
  margin-top: 0px;
}

.tour_list img {
  width: 100%;
}

.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%;
  transition: 0.3s;
  box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.25);
  background-image: linear-gradient(
    180deg,
    #00A0CA,
    #e0f3ff 56%,
    #00A0CA
  );
  margin: 0 auto;
}

.schedule_area .btn_area:hover {
  transform: translateY(-3px);
}

.schedule_area .btn_area {
  padding-bottom: 10px;
  padding-top: 10px;
}

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

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

.day_first img {
  width: 100%;
}

.day_first2 {
  background-color: #ffffff;
  margin-bottom: 10px;
  padding-bottom: 10px;
}

.day_first2 img {
  width: 100%;
}

.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;
  padding-top: 20px;
  padding-bottom: 5px;
}

footer a {
  display: block;
  width: 60%;
  margin: 0 auto 20px;
}

footer a img {
  display: block;
  width: 100%;
  height: auto;
}

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

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

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

  /*
    元のピンクヘッダー
  */
  header {
    padding-top: 9%;
  }


  /*
    64.pngはスマホでも
    画面幅いっぱいに表示
  */
  .main_visual {
    width: 100%;
    margin: 0;
    padding: 0;
  }

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


  /*
    83.pngも64.pngに合わせて
    同じ位置関係で縮小
  */
  .afterparty_btn {
    left: 8.8%;
    bottom: 0.4%;
    width: 82.4%;
  }


  /* ロゴとメイン画像の間 */

  header h2 {
    margin-bottom: 5px;
  }


  .fv_area {
    padding-top: 5px;
  }


  .fv_area p {
    margin-top: 0;
  }


  body > .main_area {
    margin-bottom: 0;
  }

}