@charset "utf-8";
/* CSS Document */

/*==================================================
 common
==================================================*/
:root {
  --height_header: 0px;
  --height_fix_footer: 0px;

  --base_width: 375px;
  --base_color: "設定";
  --base_bg: var(--white);

  --font_jp: "M PLUS Rounded 1c", sans-serif;
  --font_en: "Fuzzy Bubbles", sans-serif;
  --icons: "Material Symbols Rounded";

  --transition: 0.3s;

  --black: #1e1e1e;
  --gray: #706f6f;
  --white: #ffffff;

  --LightPink: #fc90b1;
  --RedOrange: #dd423d;
  --PalePink: #f5ccd6;
  --skyblue: #baf0f0;
  --Teal: #5dc2d0;
  --brown: #863c17;
  --yellow: #fdee21;
  --green: #83ab67;
  --beige: color-mix(in srgb, var(--brown) 10%, white 40%);
}
@media (max-width: 520px) {
  :root {
    --base_width: 100%;
    --base_width: min(100%, 520px);
  }
}

/*==================================================
 main
==================================================*/

body {
  padding-top: var(--height_header);
  background: url(../images/pc_bg.webp) no-repeat left bottom / cover;
  background-color: var(--skyblue);
  background-attachment: fixed;
}

@media screen and (max-width: 1400px) {
  body {
    background-size: 100% auto;
  }
}

@media (max-width: 520px) {
  body {
    padding-bottom: var(--height_fix_footer);
  }
}

main {
  position: relative;
  z-index: 5;
  overflow: visible;
  width: var(--base_width);
  min-height: 100vh;
  padding: 1px 0;
  margin: 0 auto;
  background: var(--base_bg) url(../images/sp_bg.webp) repeat-y top left / 100% auto;
  z-index: 2;
  color: var(--base_color);
  box-shadow: 4px 0 0 0 var(--PalePink), -4px 0 0 0 var(--PalePink);
  transform: rotate(0.03deg);
}

section {
  width: 95%;
  margin: 1px auto;
}

strong {
  font-weight: 700;
}

/*----------------------------------------
  base control
----------------------------------------*/

/* objedt-fit */
img {
  object-fit: cover;
}
.of_cont img,
img.of_cont {
  object-fit: contain;
}

/* opacity */
@keyframes opacity {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/*----------------------------------------
  box control
----------------------------------------*/

/* [class*="grid_"] 等分 */
[class*="grid_"] {
  --grid: 3;
  --gap: 50px;
  display: grid;
  grid-template-columns: repeat(var(--grid), 1fr);
  gap: var(--gap);
}
@media (max-width: 520px) {
  [class*="grid_"] {
    --gap: 30px;
    --grid: 1;
  }
}

/* [class*="grid_"] 等分 auto-fit*/
[class*="gridfit_"] {
  --grid: 3;
  --gap: 50px;
  --width: calc((100% - var(--gap) * (var(--grid) - 1)) / var(--grid));
  display: grid;
  grid-template-columns: repeat(auto-fit, var(--width));
  justify-content: center;
  gap: var(--gap);
}

/* [class*="flexnum_"] 等分 */
[class*="flexnum_"] {
  --num: 3;
  --gap: 60px;
  --width: calc((100% - var(--gap) * (var(--num) - 1)) / var(--num));
  display: flex;
  flex-flow: wrap;
  gap: var(--gap);
}

[class*="flexnum_"] > * {
  width: var(--width);
}

@media screen and (max-width: 520px) {
  [class*="flexnum_"] {
    --num: 1;
    --gap: 20px;
  }
}

/*==================================================
 this site specific
==================================================*/

/*----------------------------------------
  title
----------------------------------------*/
[class*="tit_"] {
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0;
  margin: 0 0 30px;
  border: none;
  border-radius: 0;
  background: none;
  color: var(--base_color);
  font-size: 4rem;
  font-weight: bold;
  line-height: 1.5;
  text-align: left;
}

/*
  _Modifier
----------------------------------------*/
.tit_A {
  --c: var(--LightPink);
  --cc: var(--white);
  margin: 20px auto;
  padding: 8px;
  border-radius: 8px;
  background: var(--c);
  color: var(--cc);
  font-size: 2rem;
}

.tit_B {
  flex-flow: row;
  justify-content: flex-start;
  gap: 5px;
  margin: 0 0 15px;
  padding: 5px;
  border-bottom: 2px dashed var(--brown);
  color: var(--RedOrange);
  font-size: 2rem;
  font-weight: 700;
}
.tit_B:before {
  content: "";
  display: block;
  aspect-ratio: 140/161;
  width: 30px;
  height: auto;
  background: url(../images/img_06.webp) no-repeat center / contain;
}

.tit_C {
  align-items: flex-start;
  margin: 0 0 10px;
  color: var(--c);
  font-size: 2rem;
}

.tit_D {
  flex-flow: row;
  justify-content: flex-start;
  gap: 5px;
  font-size: 2.2rem;
  font-weight: 700;
  margin: 15px auto;
}
.tit_D:before {
  content: "festival";
  font-family: var(--icons);
  color: var(--Teal);
  font-size: 1.5em;
  font-weight: normal;
}

/*----------------------------------------
  button
----------------------------------------*/
[class*="btn_"],
[class*="btnico_"],
[class*="icobtn_"] {
  align-items: center;
  gap: 5px;
  width: fit-content;
  min-height: 60px;
  padding: 10px 20px;
  border-radius: 0;
  border: var(--gray);
  background-color: var(--gray);
  color: var(--white);
  font-size: 2rem;
  text-align: center;
  font-weight: 900;
  transition: var(--transition);
}

[class*="btn_"] {
  -webkit-appearance: none;
  display: flex;
  justify-content: center;
}

[class*="btnico_"],
[class*="icobtn_"] {
  display: grid;
}
[class*="btnico_"],
[class*="icobtn_"] {
  --size: 1.6rem;
  grid-template-columns: 2rem 1fr 2rem;
}

[class*="btnico_"]:after,
[class*="icobtn_"]:before {
  content: "chevron_right";
  font-family: var(--icons);
  font-size: var(--size);
  color: currentColor;
}

[class*="btnico_"]:before,
[class*="icobtn_"]:after {
  content: "";
}

/*
  A～
----------------------------------------*/
.btn_A {
  width: 90%;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  margin: 0 auto 7px;
  border-radius: 25px;
  background: var(--LightPink);
  line-height: 1.3;
  box-shadow: 0 7px 0 0 var(--RedOrange);
}

.btn_A strong {
  font-size: 4rem;
}
.btn_A em {
  width: 100%;
  padding: 5px;
  border-radius: 50px;
  background: var(--white);
  color: var(--RedOrange);
  font-size: 2.4rem;
  text-align: center;
}

.btn_A:hover {
  box-shadow: 0 1px 0 0 var(--RedOrange);
  transform: translateY(7px);
}

.btn_B {
  width: 100%;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  padding: 10px;
  border-radius: 15px;
  background: var(--white);
  color: var(--RedOrange);
  line-height: 1.3;
}

.btn_B strong {
  font-size: 2rem;
}
.btn_B em {
  width: 100%;
  padding: 5px 0;
  border-radius: 50px;
  background: var(--PalePink);
  color: var(--RedOrange);
  font-size: 1.3rem;
  text-align: center;
}

.btnico_C {
  --c: var(--LightPink);
  width: 100%;
  margin: 0 0 15px;
  padding: 15px 5px;
  border-radius: 50px;
  border: 3px solid var(--c);
  background: color-mix(in srgb, var(--c) 10%, var(--white) 50%);
  color: var(--c);
  font-weight: 700;
  font-size: 2.2rem;
}
.btnico_C:after {
  content: "arrow_forward";
}
.btnico_C:hover {
  opacity: 1;
  background: var(--c);
  color: var(--white);
}

.btnico_D {
  width: 90%;
  margin: 20px auto;
  padding: 20px 5px;
  border-radius: 50px;
  background: var(--RedOrange);
}
.btnico_D:after {
  content: "arrow_forward";
}

.btnico_E {
  border-radius: 50px;
  border: 1px solid color-mix(in srgb, var(--c) 40%, var(--gray) 20%);
  background: var(--white);
  color: var(--c);
}
.btnico_E:after {
  content: "arrow_forward";
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--size) + 0.5em);
  height: calc(var(--size) + 0.5em);
  border-radius: 50px;
  background: var(--c);
  color: var(--white);
  text-align: center;
}
.btnico_E:hover {
  opacity: 1;
  background: var(--c);
  color: var(--white);
}
.btnico_E:hover:after {
  background: var(--white);
  color: var(--c);
}

.btn_F {
  position: relative;
  flex-flow: column;
  gap: 5px;
  width: 90%;
  margin: 30px auto 40px;
  padding: 20px 15px 15px;
  border-radius: 10px;
  background: url(../images/img_04.webp) no-repeat top left / 50px auto,
    url(../images/img_05.webp) no-repeat top right / 50px auto;
  background-color: var(--yellow);
  color: var(--RedOrange);
  font-size: 2.6rem;
}
.btn_F p {
  color: var(--black);
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.3;
}
.btn_F small {
  display: block;
  width: 100%;
  padding: 3px 10px;
  border-radius: 50px;
  background: var(--RedOrange);
  color: var(--white);
  font-weight: 700;
}

.btn_F span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin: 5px auto 0;
  color: var(--brown);
  font-size: 1.4rem;
  border-bottom: 1px dashed currentColor;
}
.btn_F span:after {
  content: "arrow_forward";
  font-family: var(--icons);
}
.btn_F:hover span {
  border-bottom: 1px solid var(--yellow);
}

.btn_F img {
  position: absolute;
  right: -5%;
  bottom: -30px;
  width: 100px;
  height: auto;
}

.btn_F:nth-of-type(odd) img {
  right: auto;
  left: -5%;
  transform: scale(-1, 1);
}

/*==================================================
header
==================================================*/
header {
  width: 100%;
  min-width: var(--base_width);
  padding: 1px 0;
}

header .logo {
  width: 95%;
  margin: 15px auto;
  text-align: center;
}

header .logo a {
  display: block;
  width: 100%;
}

header .logo img {
  width: 100%;
  height: auto;
}

@media screen and (max-width: 520px) {
  header .logo {
    width: 80%;
    margin: 15px auto 0;
  }
}

/*==================================================
 footer
==================================================*/
footer {
  margin: 15px 0 0;
  padding: 30px 5%;
  background: var(--RedOrange);
  color: var(--white);
  font-size: 1.4rem;
  text-align: center;
}

footer p a {
  text-decoration: underline;
}
footer p a:hover {
  text-decoration: none;
}

.foot_btn-list {
  --num: 2;
  --gap: 8px;
  display: flex;
  flex-flow: wrap;
  gap: 8px;
  margin: 30px auto;
}

/*==================================================
 TOP
==================================================*/

.top_btn-list {
  display: flex;
  flex-flow: column;
  gap: 25px;
  margin: 20px auto;
}

@media screen and (max-width: 520px) {
  .top_seal {
    width: 90%;
    margin: 15px auto;
  }
}

/*==================================================
 イベント詳細
==================================================*/
.sec-mv {
  text-align: center;
}

.sec-mv .ill {
  position: absolute;
  top: -55px;
  left: 0;
  width: 100%;
}

.sec-mv h2 {
  width: fit-content;
  margin: 0 auto 10px;
  padding: 5px 20px;
  border-radius: 50px;
  background: var(--Teal);
  color: var(--white);
  letter-spacing: 0.1em;
  font-size: 2.4rem;
  text-align: center;
}
.sec-mv i {
  display: block;
  color: var(--gray);
  font-family: var(--font_en);
  font-size: 2.2rem;
}
.sec-mv i span {
  color: var(--RedOrange);
}

.sec-mv em {
  display: block;
  color: var(--Teal);
  font-size: 4.5rem;
  font-weight: 900;
  line-height: 1.3;
}
.sec-mv b {
  display: block;
  color: var(--Teal);
  font-size: 2.2rem;
  font-weight: 700;
}

.sec-mv .p {
  margin: 0.5em auto;
}

/*----------------------------------------
  出店
----------------------------------------*/
.sec-shop strong {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  margin: 0 0 15px;
  color: var(--RedOrange);
  font-size: 4.2rem;
  font-weight: 900;
  letter-spacing: 0.03em;
}
.sec-shop strong:before,
.sec-shop strong:after {
  content: "";
  display: block;
  aspect-ratio: 1/1;
  width: 0.8em;
  height: auto;
  background: url(../images/img_02.webp) no-repeat center / contain;
}

.shop-bnr {
  width: 90%;
  margin: 15px auto 40px;
}

/*----------------------------------------
  会場
----------------------------------------*/
:is(.sec-place, .page-detail) dl {
  display: flex;
  justify-content: center;
  align-items: start;
  gap: 10px;
  margin: 10px 0 20px;
  color: var(--brown);
  font-size: 1.8rem;
  font-weight: bold;
}
:is(.sec-place, .page-detail) dl dt {
  white-space: nowrap;
  margin: 3px 0 0;
  padding: 3px 8px;
  border: 1px solid var(--brown);
  background: var(--beige);
  box-shadow: 3px -3px 0 0 var(--white) inset, 3px -3px 0 0 var(--beige);
}

:is(.sec-place, .page-detail) dl dd {
  flex: 1;
  font-size: 2.5rem;
  font-weight: 900;
  text-align: left;
}

:is(.sec-place, .page-detail) dl dd small {
  display: block;
  font-size: 2rem;
}

:is(.sec-place, .page-detail) .map {
  aspect-ratio: 4/3;
  width: 100%;
  height: auto;
  margin: 15px auto;
  border: 2px solid var(--beige);
}
:is(.sec-place, .page-detail) .map iframe {
  display: block;
  width: 100%;
  height: 100%;
}

:is(.sec-place, .page-detail) dd p {
  margin: 0.5em 0;
  color: var(--black);
  font-size: 1.7rem;
  font-weight: normal;
}

/*----------------------------------------
  概要テキスト
----------------------------------------*/
.sec-outline {
  width: 100%;
  padding: 15px 5%;
  background: var(--white);
  color: var(--brown);
  font-size: 1.8rem;
  text-align: left;
  font-weight: 900;
}
.sec-outline .text {
  background-color: #fff; /* 背景色 */
  background-image: linear-gradient(90deg, transparent 0%, transparent 50%, #fff 50%, #fff 100%),
    /* 点線1の色 */ linear-gradient(180deg, var(--PalePink) 1px, transparent 1px); /* 点線2の色と太さ */
  background-size: 8px 100%, /* 点線1のサイズ */ 100% 2.5em; /* 点線2のサイズ */
  line-height: 2.5em; /* 文字の高さ */
  padding: 0 3% 1px;
}

/*----------------------------------------
  エリア
----------------------------------------*/
.wrap-area {
  width: 100%;
  background: url(../images/img_03.webp) no-repeat top left / 100% auto;
  padding: 80px 0 1px;
}
.area-list {
  padding: 20px 5%;
  background: var(--green);
}

.area-list .btnico_E {
  width: 100%;
  margin: 0 0 15px;
}

/*----------------------------------------
  フリー
----------------------------------------*/
.sec-event [class^="event-block"] {
  margin: 40px auto 60px;
}

.sec-event [class^="event-block"] h2 {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0 0 15px;
  padding: 5px;
  border-bottom: 2px dashed var(--brown);
  color: var(--RedOrange);
  font-size: 2rem;
  font-weight: 700;
}
.sec-event [class^="event-block"] h2:before {
  content: "";
  display: block;
  aspect-ratio: 140/161;
  width: 30px;
  height: auto;
  background: url(../images/img_06.webp) no-repeat center / contain;
}

.sec-event [class^="event-block"] picture {
  display: block;
  margin: 15px auto;
  text-align: center;
}

.sec-event [class^="event-block"] .youtube {
  margin: 15px auto;
}

.sec-event [class^="event-block"] h3 {
  position: relative;
  margin: 5px 0 25px;
  padding: 10px;
  border-radius: 15px;
  background: var(--yellow);
  color: var(--RedOrange);
  font-size: 2.4rem;
  font-weight: 900;
  text-align: center;
}
.sec-event [class^="event-block"] h3:after {
  position: absolute;
  top: 99%;
  left: 50%;
  transform: translateX(-50%);
  content: "";
  --hen: 20px;
  background: var(--yellow);
  height: calc(tan(60deg) * var(--hen) / 2);
  width: var(--hen);
  clip-path: polygon(0 0, 100% 0, 50% 100%); /*下*/
}

.sec-event [class^="event-block"] :is(.text, .hosoku, .note) {
  display: block;
  padding: 0 3%;
  color: var(--brown);
  font-size: 1.9rem;
  line-height: 1.8;
  font-weight: 700;
}

.sec-event [class^="event-block"] .hosoku {
  background: var(--PalePink);
  margin: 10px auto;
  padding: 15px;
  border-radius: 15px;
}

.sec-event [class^="event-block"] .hosoku strong {
  display: block;
  color: var(--RedOrange);
  font-size: 1.5em;
  line-height: 1.3;
  font-weight: 900;
}

.sec-event [class^="event-block"] .note {
  font-size: 1.4rem;
  color: var(--black);
}

/*==================================================
 固定ページ
==================================================*/
.pages {
  width: 95%;
  margin: 20px auto;
}
.pages > h2 {
  width: fit-content;
  margin: 0 auto 30px;
  padding: 5px 20px;
  border-radius: 50px;
  background: var(--Teal);
  color: var(--white);
  font-size: 2.4rem;
  text-align: center;
}
.pages > p {
  margin: 1em 0;
}

/*==================================================
 ショップ
==================================================*/

/*
  親
----------------------------------------*/
.shop-parent {
  width: 100%;
  padding: 20px 0;
  background: var(--white);
}

.shop-parent h3,
.shop-child h2 {
  width: 90%;
  min-height: 60px;
  margin: 20px auto;
  padding: 10px 20px;
  border-radius: 50px;
  border: 2px solid var(--c);
  background: var(--white);
  color: var(--c);
  font-size: 2rem;
  text-align: center;
  font-weight: 900;
}

.shop-parent .content {
  width: 95%;
  margin: 0 auto;
}

.shop-parent .content img {
  margin: 0.3em 0;
}

.shop-list {
  margin: 15px auto 0;
}

.shop-list li {
}

.shop-list li a {
  display: grid;
  grid-template-columns: 35% 1fr;
  grid-template-areas:
    "fig h4"
    "p p";
  align-items: center;
  gap: 5px 10px;
  padding: 15px 3%;
}
.shop-list li a:hover {
  opacity: 1;
  background: color-mix(in srgb, var(--Teal) 10%, white);
}

.shop-list li figure {
  position: relative;
  grid-area: fig;
  aspect-ratio: 4/3;
}

.shop-list li figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.shop-list li figure figcaption {
  position: absolute;
  top: 5px;
  left: 5px;
  padding: 1px 5px;
  background: color-mix(in srgb, var(--brown) 50%, var(--black) 20%);
  color: var(--white);
  font-size: 1rem;
  border: 1px solid var(--white);
}

.shop-list li .p {
  grid-area: p;
  color: var(--gray);
  font-size: 1.4rem;
}
.shop-list li h4 {
  grid-area: h4;
  font-weight: 700;
}

/*
  子
----------------------------------------*/
.shop-child {
  width: 100%;
  padding: 20px 3%;
  background: var(--white);
}

.shop-child figure {
  position: relative;
  width: 100%;
  margin: 0 auto 15px;
}

.shop-child figure img {
  width: 100%;
  height: auto;
}

.shop-child figure figcaption {
  position: absolute;
  top: 5px;
  left: 5px;
  padding: 1px 5px;
  background: color-mix(in srgb, var(--brown) 50%, var(--black) 20%);
  color: var(--white);
  font-size: 1.4rem;
  border: 1px solid var(--white);
}