@charset "UTF-8";

:root {
  --contents-width: 100%;
  /* #all_contents_wrap の幅。PC時は style_pc.css で上書きする */
  --globalnavi-height: 5.4rem;
  /* スマホ時に下部固定するグローバルナビの高さ */
  --space-lp: 5rem;
  /* 余白大3：lp用セクション間の余白：75px */
}

/* pc */
.pc {
  display: none !important;
}

.pc_inline {
  display: none !important;
}

.pc_tb {
  display: none !important;
}

/* nazo_ui/css/style_ui.css（スタンプラリー用）の構造系指定を打ち消す
   ※ボタン・吹き出し・スポットカードなど、意図して共用しているパーツはそのまま活かす
====================================================================================================================================== */
/* トップページのヘッダーはメインビジュアルなので、style_ui.css の固定ヘッダー指定を打ち消す。
   下層ページ（.page_in）はラリー側と同じ固定ヘッダーをそのまま使う */
#container:not(.page_in) #header {
  position: static;
  display: block;
  height: auto;
  background: none;
  z-index: auto;
}

/* 「トップに戻る」はラリー側の「マイページ」より1文字長いので、折り返さない幅にする */
#container.page_in #header .header_btn.back {
  width: 4.6667rem;
}

#container {
  margin-top: 0;
}

#conts {
  overflow: visible;
}

#side_fixed_box .top_page {
  position: static;
  right: auto;
  bottom: auto;
  width: 100%;
  background-image: none;
  border-radius: 0;
  text-indent: 0;
  z-index: auto;
}

/* structure
====================================================================================================================================== */
html,
body {
  width: 100%;
}

html {
  scroll-behavior: smooth;
  height: 100%;
}

body {
  color: var(--black);
  overflow-y: scroll;
  overflow-x: hidden;
  width: 100%;
}

#all_contents_wrap {
  padding-bottom: var(--globalnavi-height);
  background: url("../images/bg_pattern.webp") repeat left top, var(--red);
  background-size: 576px auto, auto;
  color: var(--white);
}

.wrapper {
  display: flow-root;
  overflow: visible;
  margin: 0;
  padding-left: var(--space-side);
  padding-right: var(--space-side);
}

h1.page_title {
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
  line-height: 1.5;
  padding-bottom: 0.5em;
  border-bottom: 3px solid var(--black);
  margin-bottom: 1.5rem;
}

h2 {
  font-size: 1.3125rem;
  margin-bottom: 0.6em;
}

h3 {
  font-size: 1.4375rem;
  font-weight: bold;
  color: #fff;
  text-align: center;
  margin: 0 calc((100% - 100vw) / 2) 1.2em;
  padding: 0.49em 0.5em;
  background-color: var(--black);
  position: static;
}

h3:before {
  display: none;
}

h4 {
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--black);
  text-align: left;
  margin-bottom: 0.5rem;
}

.section_box {
  margin-bottom: 5em;
}

#navibar {
  margin-bottom: 1.5rem;
  font-size: 0.8rem;
  text-align: left;
  line-height: 1.7;
}

#navibar p {
  margin-bottom: 0;
}

#navibar a:any-link {
  text-decoration: underline;
}


/* #header（中ページ）
====================================================================================================================================== */
/* top：メインビジュアル
====================================================================================================================================== */
#notice_area {
  background-color: var(--red-shadow);
  padding: var(--space-xs) 0.5333rem;
  text-align: center;
}

#notice_area p {
  margin-bottom: 0;
  line-height: 0;
}

#notice_area img {
  width: 100%;
}

#main_visual {
  margin-bottom: 0;
  line-height: 0;
}

#main_visual img {
  width: 100%;
}

.lead_copy {
  margin-bottom: 0;
  line-height: 0;
}

.lead_copy img {
  width: 100%;
}

/* top：スタート導線
====================================================================================================================================== */
#header {
  position: static;
}

#header .info_box {
  padding: 0 var(--space-side) 3.5rem;
  text-align: center;
}

#header .info_box .lead_text {
  font-size: var(--font-sm);
  font-weight: bold;
  color: var(--yellow-light);
  margin-bottom: 0.2rem;
}

#header .info_box .button_area {
  margin-bottom: 0;
}

#container .btn.bg_color {
  position: relative;
  display: inline-block;
  max-width: 100%;
  margin: 0;
  padding: 1.3rem 3.5rem 1.3rem 2rem;
  background: var(--yellow-light) url("../images/icon/icon_doublearrow_white_r.svg") no-repeat right 1.3rem center;
  background-size: 1.6rem auto;
  color: var(--red-shadow);
  font-size: var(--font-xl2);
  line-height: 1.4;
  border: 0;
  border-bottom: solid 7px var(--red-shadow);
  border-radius: 4rem;
  animation: arrow_moving 0.5s steps(2) infinite alternate;
}

#container .btn.bg_color .sholder_copy {
  color: var(--red-shadow);
  font-size: var(--font-sm);
  opacity: 0.8;
}

@keyframes arrow_moving {
  0% {
    background-position: right 1.3rem center;
  }

  100% {
    background-position: right calc(1.3rem - 3px) center;
  }
}

/* globalnavi
====================================================================================================================================== */
#globalnavi {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 100;
  width: 100%;
  max-width: var(--contents-width);
  translate: -50% 0;
  background-color: var(--white);
  border-top: 2px solid var(--white);
}

#globalnavi ul {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
}

#globalnavi ul li {
  background-color: var(--red02);
}

#globalnavi a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.3333rem;
  height: 100%;
  padding: 0.5333rem 0.2rem;
  text-align: center;
  color: var(--white);
  font-size: var(--font-xs);
  font-weight: bold;
}

#globalnavi a span {
  display: block;
}

#globalnavi a .icon {
  width: 2.2667rem;
  margin-bottom: 0;
}

#globalnavi a .icon img {
  width: 100%;
}

#globalnavi li:nth-child(4) .title {
  font-size: 0.68rem;
  letter-spacing: -0.1em;
}

/* top：写真＋エリアマップ
====================================================================================================================================== */
#photo_area .photo_row {
  display: flex;
}

#photo_area .photo_large {
  width: 56%;
  aspect-ratio: 1/1;
}

#photo_area .photo_col {
  flex: 1;
  display: flex;
  flex-direction: column;
}

#photo_area .photo_col img {
  height: 50%;
}

#photo_area img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#area_map_top {
  position: relative;
  overflow: hidden;
  margin-top: -6.3333rem;
  padding: 0.6667rem var(--space-side) 0;
}

#area_map_top:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 6.3333rem;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.36) 35%, rgba(0, 0, 0, 0.6) 100%);
}

#area_map_top img {
  position: relative;
  display: block;
  width: 132%;
  max-width: none;
}

/* テーブル：点線罫線のスタイルに統一
====================================================================================================================================== */
table {
  width: 100%;
  border: none;
  margin-bottom: var(--space-l);
  line-height: var(--line-height-base);
}

table th,
table td {
  width: auto;
  color: inherit;
  border: none;
  border-bottom: 2px dotted currentColor;
  padding: 1rem 1rem 0.8rem 0;
  vertical-align: top;
}

table tbody th {
  background: none;
}

table tr:first-child th,
table tr:first-child td {
  padding-top: 0;
}

table th {
  font-weight: bold;
  white-space: nowrap;
}

table td {
  padding-right: 0;
}

table thead th,
table thead td {
  font-weight: bold;
  font-size: 0.8rem;
}

/* contents
====================================================================================================================================== */
#conts {
  width: 100%;
  padding: 0 0 1.5em;
}

#conts.in {
  padding: 1em 0 2.5em;
  background: var(--white);
  color: var(--black);
}

#conts.in .section_acc .acc_main {
  font-weight: normal;
}

#conts>section {
  padding-top: var(--space-lp);
}

/* .common_box の clearfix は float レイアウト時代の名残。
   flex で組むと3つ目のフラックスアイテムになり、.text_box が右端まで伸びないので打ち消す
====================================================================================================================================== */
.common_box:after {
  display: none;
}

/* 白いボックス（この中だけ文字色を黒にする）
====================================================================================================================================== */
.white_box {
  background-color: var(--white);
  color: var(--black);
  border-radius: 1.0667rem;
  padding: var(--space-m);
}

.white_box.box_under_bar {
  border-radius: 0 0 1.0667rem 1.0667rem;
}

.white_box.box_s {
  border-radius: var(--radius);
  padding: var(--space-xs);
  height: 100%;
}

/* 行間：ベースは1.8。Figmaで1.5になっている箇所だけここでまとめて指定する
====================================================================================================================================== */
#header .info_box .lead_text,
#globalnavi a,
.text_under_title,
#conts>section>.wrapper>.lead_text,
#present .section_acc .acc_title,
#present .hashtag_text,
#spot .panel_find p,
.section_title_bar,
#summary h3,
#summary table th,
.white_box {
  line-height: var(--line-height-min);
}

/* nazo_ui側で1.8が直接指定されているため、白ボックス内では親の行間を継承させる */
.white_box .spot_comment,
.white_box .address_info {
  line-height: inherit;
}

/* セクション見出し（黄色い帯＋タイトル画像＋リード）
====================================================================================================================================== */
.text_under_title {
  position: relative;
  display: table;
  margin: 0 auto;
  padding: 0.5rem 1.2rem 0.4rem;
  background-color: var(--yellow-light);
  color: var(--red-shadow);
  font-size: 1rem;
  font-weight: bold;
  text-align: center;
  border-radius: 2rem;
}

.text_under_title:after {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  bottom: -0.6rem;
  width: 0;
  height: 0;
  margin-left: -0.4rem;
  border-left: 0.4rem solid transparent;
  border-right: 0.4rem solid transparent;
  border-top: 0.6rem solid var(--yellow-light);
}

.text_under_title .num {
  font-size: var(--font-xl2);
  line-height: 1;
}

.top_section_title {
  text-align: center;
  margin: 0;
  padding: 0.8rem 0 0.4rem;
}

.top_section_title img {
  width: 17rem;
  max-width: 100%;
}

#conts>section>.wrapper>.lead_text {
  font-size: 1rem;
  font-weight: bold;
  text-align: center;
  margin: 0 0 1.6667rem;
}

/* top：豪華賞品
====================================================================================================================================== */
.presents_wrap {
  display: grid;
  gap: 0.8rem;
  margin-bottom: 0.8rem;
}

.presents_wrap.column_count_1 {
  grid-template-columns: 1fr;
}

.presents_wrap.column_count_2 {
  grid-template-columns: repeat(2, 1fr);
}

.presents_wrap li {
  position: relative;
}

.present_box {
  border: 0;
  padding-bottom: 1rem;
  margin-bottom: 0 !important;
  overflow: visible;
  font-weight: bold;
}

.present_box .present_photo {
  aspect-ratio: 1000/666;
  border-radius: 4px;
  overflow: hidden;
  background-color: var(--gray-base-light);
}

.present_box .present_photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.present_box figcaption {
  border: 0;
  padding: 0.8rem 0.2rem 0.2rem;
  margin-top: -1.5rem;
  text-align: center;
}

.present_box .stamp_cond {
  display: inline-block;
  background-color: var(--red);
  color: var(--white);
  font-size: var(--font-xs);
  padding: 0.3rem 0.8rem 0.15rem;
  margin-bottom: 0.6rem;
  border-radius: 4rem;
  line-height: 1.2;
}

.present_box .comment_text {
  color: var(--red02);
  font-size: 1rem;
  margin-bottom: 0;
}

.present_box .present_name {
  font-size: var(--font-s);
  margin-bottom: 0;
}

.presents_wrap li .ninzu {
  position: absolute;
  white-space: nowrap;
  right: -0.6rem;
  top: -0.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.3rem;
  aspect-ratio: 1/1;
  background-color: var(--yellow-light);
  border-radius: 50%;
  font-size: 1.3rem;
  color: var(--red-shadow);
  margin: 0;
}

.presents_wrap li .ninzu .vertical {
  font-size: 0.6em;
}

.presents_wrap.column_count_1 li .ninzu {
  width: 4.5rem;
  font-size: 2rem;
}

.presents_wrap.column_count_1 .present_box .present_name {
  font-size: var(--font-xl);
}

.presents_wrap.column_count_2 .present_box .present_name .font_sm {
  color: var(--red02);
}

#present .section_acc {
  margin-bottom: var(--space-s);
}

#present .present_sample+.present_sample {
  margin-top: var(--space-m);
}

#present .sample_list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6667rem;
}

#present .sample_list li {
  line-height: 0;
}

#present .sample_list img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 4px;
}

#present .link_wrap a {
  display: block;
  margin-bottom: var(--space-m);
}

#present .link_wrap img {
  width: 100%;
  border-radius: 12px;
}

#present .hashtag_text {
  font-size: var(--font-xl);
  font-weight: bold;
  text-align: center;
  margin-bottom: 0;
}

#present .hashtag_text strong {
  color: var(--yellow-light);
  font-size: var(--font-xl2);
}

/* top：参加の流れ
====================================================================================================================================== */
#howto {
  padding-top: var(--space-lp);
  background: none;
}

#howto .flow_list li:last-child {
  border-bottom: 0;
}

#howto .flow_list a {
  text-decoration: underline;
}

.caution_wrap {
  background-color: #fbe9e4;
  border-radius: var(--radius);
  padding: var(--space-m);
  margin: 0 -0.6667rem 2rem;
}

.caution_title {
  background: none;
  color: var(--black);
  font-size: 1rem;
  font-weight: bold;
  text-align: center;
  margin: 0 0 var(--space-s);
  padding: 0 0 0.7rem;
  border-bottom: 1px solid var(--black);
}

.section_howto_bottom {
  font-size: var(--font-s);
  margin-bottom: var(--space-m);
}

.section_howto_bottom:last-child {
  margin-bottom: 0;
}

.section_howto_bottom h3 {
  background: none;
  padding: 0;
  margin: 0 0 0.4rem;
  font-size: 1rem;
  font-weight: bold;
  text-align: left;
  line-height: 1.3;
  color: var(--black);
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.section_howto_bottom h3:before {
  content: "!";
  display: grid;
  place-items: center;
  font-size: 0.9em;
  line-height: 1;
  width: 1.6em;
  height: auto;
  aspect-ratio: 1/1;
  color: #fff;
  background-color: var(--black);
  border-radius: 50%;
  position: static;
  margin-right: 0.4em;
}

.section_howto_bottom p {
  margin-bottom: 0;
}

.section_howto_bottom .flex_wrap {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.6rem;
}

.section_howto_bottom .flex_wrap .image_area {
  flex: 0 0 5rem;
  line-height: 0;
}

.section_howto_bottom .flex_wrap .image_area img {
  width: 100%;
}

.section_howto_bottom .flex_wrap .text_area {
  flex: 1;
}

.button_area {
  margin-bottom: 0;
}

/* top：エリアMAP・スポット
====================================================================================================================================== */
.panel_find {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0.2rem;
  margin-bottom: -1px;
}

.panel_find .image_area {
  flex: 0 0 10rem;
  margin-left: 1.7rem;
  margin-bottom: -5%;
  line-height: 0;
  overflow: hidden;
  aspect-ratio: 1/1;
}

.panel_find p {
  position: relative;
  font-size: 0.9rem;
  font-weight: bold;
  margin: 0.8rem 0 0;
  padding: 1.5rem 0 1.3rem 0.5rem;
  transform: rotate(-5deg);
}

.panel_find p:before,
.panel_find p:after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  height: 0;
  width: 6rem;
  border-top: 2px solid var(--white);
  rotate: -10deg;
}

.panel_find p:before {
  top: 0.2rem;
}

.panel_find p:after {
  bottom: 0.2rem;
  rotate: 10deg;
}

.area_map_wrap {
  margin-bottom: var(--space-m);
}

.map_iframe {
  aspect-ratio: 1/1;
  height: auto;
  margin: 0 0 0.5333rem;
}

.map_iframe iframe {
  width: 100%;
  height: 100%;
  border: solid 2px var(--black);
  border-radius: 16px;
}

.map_legend {
  font-weight: bold;
  margin-bottom: 0;
}

.map_legend img {
  vertical-align: middle;
  border: 1px solid var(--white);
  border-radius: 50%;
}

.section_title_bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  background-color: var(--black);
  color: var(--white);
  font-size: var(--font-xl);
  font-weight: bold;
  text-align: center;
  margin: 0;
  padding: 1.2rem var(--space-m) 1rem;
  border-radius: 16px 16px 0 0;
}

.section_title_bar .icon {
  display: inline-block;
  width: 2.3rem;
  margin-top: -0.5rem;
}

.section_title_bar .icon img {
  width: 100%;
}

/* 施設紹介 */
.spot_card {
  padding-bottom: var(--space-l);
}

.spot_card:last-child {
  padding-bottom: 0;
}

.spot_card .catch_copy {
  font-size: 0.7rem;
  padding: 0.6rem 0.8rem;
  margin-bottom: 1rem;
}

.spot_head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}

.spot_head .num {
  flex: 0 0 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  aspect-ratio: 1/1;
  padding-top: 0.2rem;
  background-color: var(--red);
  color: var(--white);
  font-size: var(--font-xl2);
  font-weight: bold;
  border-radius: 50%;
}

.spot_head .name_box {
  flex: 1;
  min-width: 0;
}

.spot_head .area_name {
  display: block;
  font-size: var(--font-sm);
}

.spot_head .tit {
  display: block;
  font-size: var(--font-xl);
  font-weight: bold;
}

.spot_tag {
  display: flex;
  gap: 0.3333rem;
}

.spot_tag li.tag_food {
  background-color: var(--yellow);
}

.spot_tag li {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1333rem;
  width: 2.3rem;
  height: 2.3rem;
  padding: 0.2rem;
  background-color: var(--blue-light);
  border-radius: 50%;
  font-size: 0.45rem;
  line-height: 1.3;
  letter-spacing: -0.11em;
  white-space: nowrap;
}

.spot_tag li img {
  width: 1.4rem;
}

.spot_card .spot_comment {
  font-size: var(--font-sm);
  margin-bottom: 1rem;
}

.spot_card .address_info {
  font-size: var(--font-sm);
  font-weight: normal;
  padding: 0.7rem 0 0.5rem;
  margin-bottom: 0;
  border-top: 2px dotted var(--gray-line);
  border-bottom: 2px dotted var(--gray-line);
}

/* top：レンタサイクル施設
====================================================================================================================================== */
#rental {
  padding-top: var(--space-l);
}

#rental .rental_lead {
  margin-bottom: var(--space-m);
}

#rental .rental_lead .fukidashi {
  color: var(--black);
  font-size: var(--font-s);
  padding: 0.8rem;
}

#rental .rental_lead .common_box {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  margin-bottom: 0;
}

#rental .rental_lead .img_box {
  flex: 0 0 6.6667rem;
  margin: 0;
  line-height: 0;
}

#rental .rental_lead .img_box img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: var(--radius);
}

#rental .rental_lead .text_box {
  flex: 1;
  display: block;
  min-width: 0;
  margin-bottom: 0;
}

#rental .rental_lead .text_box .font_sm {
  font-weight: normal;
}

/* 一覧はスタンプ施設と同じパーツを使い、差分だけをここで調整する */
.rental_list .spot_card {
  padding-bottom: 1.2rem;
  margin-bottom: 1.4rem;
  border-bottom: dotted 2px var(--gray-line);
}

.rental_list .spot_card:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: 0;
}

.rental_list .spot_head {
  margin-bottom: 0.1rem;
  gap: 0.4rem;
}

.rental_list .spot_head .num {
  flex-basis: 1.7rem;
  width: 1.7rem;
  background-color: var(--black);
  font-size: 1rem;
  margin-top: -0.2rem;
}

.rental_list .address_info {
  padding: 0;
  border: 0;
}

/* top：イベント概要
====================================================================================================================================== */
.section_plane {
  font-size: 1rem;
  padding-bottom: 0;
}

.section_plane p {
  margin-bottom: 0;
}

#summary {
  padding-top: var(--space-lp);
}

#summary h3 {
  background: none;
  color: var(--white);
  font-size: 1.8rem;
  font-weight: bold;
  text-align: center;
  margin: 0 0 var(--space-m);
  padding: 0;
}

#summary h3:before {
  display: none;
}


/* top：バナー
====================================================================================================================================== */
#banner_area {
  padding: var(--space-l) 0 0;
  margin-bottom: 0;
}

#banner_area a:hover {
  opacity: 0.7;
}

#banner_area .banner_large {
  margin-bottom: 0.6667rem;
}

#banner_area .banner_large img {
  width: 100%;
}

#banner_area ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6667rem;
}

#banner_area ul li img {
  width: 100%;
}

/* フッター
====================================================================================================================================== */
#footer {
  background: none;
}

/* side_fixed_box
====================================================================================================================================== */
#side_fixed_box {
  position: fixed;
  right: 0;
  bottom: calc(var(--globalnavi-height) + 0.6667rem);
  width: 2.6667rem;
  aspect-ratio: 1/1;
}

#side_fixed_box .top_page {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--gray-base-light);
  height: 100%;
}

#side_fixed_box .top_page:before {
  content: "";
  display: block;
  width: 35%;
  aspect-ratio: 1/1;
  border: 2px solid var(--black);
  border-right: none;
  border-bottom: none;
  rotate: 45deg;
  translate: 0 20%;
}

#side_fixed_box .top_page:hover {
  opacity: 0.7;
}

.table_form,
.table_form th,
.table_form td {
  border: none;
}

.table_form th {
  background: none;
}

.table_form td ul {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.table_form input[type="text"],
.table_form input[type="email"],
.table_form textarea {
  background: #fcfcfc;
  border: solid 2px #ccc;
  border-radius: 6px;
  padding: 0.5em;
  font-size: 1rem;
  font-weight: normal;
  cursor: default;
}

.table_form input[type="text"]:focus,
.table_form input[type="email"]:focus,
.table_form textarea:focus {
  border-color: var(--black);
  background: #fff;
}

.table_form textarea {
  width: 100%;
  height: 20rem;
  line-height: 1.6;
}

@media screen and (min-width: 541px) {

  /* sp */

  .sp_only {
    display: none !important;
  }

  .pc_tb {
    display: block !important;
  }

  /* structure
====================================================================================================================================== */
  /* header
====================================================================================================================================== */
  /* globalnavi
====================================================================================================================================== */
  /* バナー */
  /* side_fixed_box
====================================================================================================================================== */
  #side_fixed_box {
    width: 47px;
  }
}