@charset "UTF-8";
/*
サイズ用関数
$pixelsVw:フォントサイズ
$baseWidth:ベースとなる画面横幅
*/
/*
SAMPLE
font-size: vw(30,375);
*/
/*------------------------------------------------------------------------------
  reset
------------------------------------------------------------------------------*/
*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

/* モダン: アニメーション無効設定を尊重（アクセシビリティ） */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    -webkit-animation-duration: 0.01ms !important;
            animation-duration: 0.01ms !important;
    -webkit-animation-iteration-count: 1 !important;
            animation-iteration-count: 1 !important;
    -webkit-transition-duration: 0.01ms !important;
            transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
html {
  color: #000;
  word-break: normal;
  line-break: strict;
  height: 100%;
  margin: 0 auto;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
       text-size-adjust: 100%; /* モダン: 標準プロパティ追加 */
  -webkit-tap-highlight-color: transparent; /* モダン: タップ時ハイライト除去 */
  -webkit-appearance: none;
}

body {
  margin: 0;
  min-height: 100%; /* height:100% → min-height に（コンテンツ伸長対応） */
  position: relative; /* SPブロックから統合 */
  overflow-wrap: break-word; /* 継承プロパティ。全要素の長い文字列の折り返しを担保 */
  -webkit-font-smoothing: antialiased; /* モダン: 文字描画調整（任意） */
  -moz-osx-font-smoothing: grayscale;
}

img {
  border: 0;
  margin: 0;
  display: block;
  width: 100%;
  height: auto;
}

/* モダン: メディア要素も同様に扱う */
picture,
video,
canvas,
svg {
  display: block;
  width: 100%;
}

p {
  margin: 0;
  padding: 0;
}

a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

figure {
  margin: 0;
  padding: 0;
}

/* モダン: フォーム要素はフォント・色を継承させる */
input,
select,
textarea,
button {
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  border-radius: 0;
  outline: none;
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
}

select::-ms-expand {
  display: none;
}

textarea {
  resize: none;
}

button {
  border: none;
  cursor: pointer;
}

table {
  border-collapse: collapse;
  table-layout: auto;
  border-spacing: 0;
}

th,
td {
  border: none;
  padding: 0;
  margin: 0;
}

ul,
ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: 500;
  margin: 0;
  padding: 0;
}

main {
  display: block;
}

dl,
dt,
dd {
  padding: 0;
  margin: 0;
}

address {
  font-style: normal;
}

/* SVGスプライトリセット */
.c-svg {
  display: inline-block;
  fill: currentColor;
  vertical-align: top;
}

/*------------------------------------------------------------------------------
  responsive
------------------------------------------------------------------------------*/
@media only screen and (min-width: 768px) {
  a[href^="tel:"] {
    pointer-events: none; /* PCでは電話リンク無効 */
  }
}
@media only screen and (max-width: 767px) {
  body {
    font-size: 14px;
  }
  /* iOS Safari のフォーカス時自動ズーム防止（16px未満で発火） */
  input,
  select,
  textarea {
    font-size: 16px;
  }
}
/*------------------------------------------------------------------------------
  base
------------------------------------------------------------------------------*/
html {
  font-size: 10px;
}
@media only screen and (min-width: 768px) {
  html {
    font-size: calc(10 / 1160 * 100vw);
  }
}
@media (min-width: 1160px) {
  html {
    font-size: 10px;
  }
}
@media (max-width: 375px) {
  html {
    font-size: calc(10 / 375 * 100vw);
  }
}

body {
  color: #020202;
  font-family: "M PLUS 1p", sans-serif;
  font-size: 1.7rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
  background-color: #FAF7F3;
}

.no_scroll {
  overflow: hidden;
}

/* -----------------------------------------------
* layout エントリーポイント
-------------------------------------------------- */
/* ------------------------------------------------
l-header
--------------------------------------------------- */
.l-header {
  position: fixed;
  z-index: 900;
  top: 0;
  left: 0;
  width: 100%;
}

/* ------------------------------------------------
l-footer
--------------------------------------------------- */
.l-footer {
  width: 100%;
}

/* --------------------------------
l-inner
----------------------------------- */
.l-inner {
  max-width: 1160px;
  margin-inline: auto;
  width: 100%;
  padding-inline: 20px;
}
@media only screen and (min-width: 768px) {
  .l-inner {
    padding-inline: 30px;
  }
}

.l-inner--1260 {
  max-width: 1260px;
}

.l-inner--1340 {
  max-width: 1340px;
}

.l-inner--1360 {
  max-width: 1360px;
}

/* --------------------------------
l-wrapper
----------------------------------- */
/* 画面の外へはみ出す装飾（右へ抜ける汽車・左へ見切れる円など）の横方向の切り取りは、
   セクションごとではなくページ全体のここで1回だけ行う。

   セクション側に overflow-x: clip を置くと、Safari はそれを縦にも効かせてしまい、
   セクションの上へはみ出す絵（雲・月・泳ぐ人）が丸ごと消える。
   ここなら中身は全部この箱の中なので、縦に切られて困るものが無い。 */
.l-wrapper {
  overflow-x: clip;
}

/* --------------------------------
l-main
----------------------------------- */
.l-main {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  position: relative;
}

/* -----------------------------------------------
* component エントリーポイント
-------------------------------------------------- */
/* ------------------------------------------------
c-hamburger
--------------------------------------------------- */
.c-hamburger {
  position: relative;
  z-index: 999;
  width: 8rem;
  height: 8rem;
  color: #fff;
  pointer-events: auto;
}
.c-hamburger span {
  position: absolute;
  left: 56%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  display: block;
  width: 3rem;
  height: 0.4rem;
  background-color: currentColor;
  -webkit-transition: top 0.4s, -webkit-transform 0.4s;
  transition: top 0.4s, -webkit-transform 0.4s;
  transition: top 0.4s, transform 0.4s;
  transition: top 0.4s, transform 0.4s, -webkit-transform 0.4s;
}
.c-hamburger span:nth-child(1) {
  top: 38%;
}
.c-hamburger span:nth-child(2) {
  top: 54%;
}
.c-hamburger::before {
  position: absolute;
  content: "";
  top: 40%;
  right: -2rem;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 10rem;
  height: 10rem;
  background-image: url(../img/common/circle_hamburger.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100%;
}

.c-hamburger.is-open span {
  top: 54%;
  width: 4rem;
}
.c-hamburger.is-open span:nth-child(1) {
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
          transform: translate(-50%, -50%) rotate(45deg);
}
.c-hamburger.is-open span:nth-child(2) {
  -webkit-transform: translate(-50%, -50%) rotate(-45deg);
          transform: translate(-50%, -50%) rotate(-45deg);
}

/* ------------------------------------------------
c-btn
--------------------------------------------------- */
.c-btn {
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  overflow: hidden;
  width: 24rem;
  height: 5rem;
  padding-block: 1.5rem;
  padding-inline: 3rem;
  color: #ef5a07;
  font-family: "M PLUS 1p", sans-serif;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0;
  background: #fff;
  border: 0.2rem solid #ef5a07;
  border-radius: 3.5rem;
  cursor: pointer;
  -webkit-transition: color 0.4s ease;
  transition: color 0.4s ease;
}
@media only screen and (min-width: 768px) {
  .c-btn {
    width: 30rem;
    height: 6.6rem;
    padding-inline: 3rem;
    font-size: 1.7rem;
    line-height: 1.5;
    letter-spacing: 0.05em;
    border: 0.3rem solid #ef5a07;
  }
}
.c-btn span {
  position: relative;
  z-index: 1;
}
.c-btn::before {
  position: absolute;
  inset: 0;
  content: "";
  background: -webkit-gradient(linear, left top, right top, from(#fc8b10), to(#ef5a07));
  background: linear-gradient(90deg, #fc8b10 0%, #ef5a07 100%);
  border-radius: inherit;
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
  -webkit-transform-origin: left center;
          transform-origin: left center;
  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transition: -webkit-transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.c-btn::after {
  position: absolute;
  z-index: 1;
  top: 50%;
  right: 1.5rem;
  width: 0.6rem;
  height: 1rem;
  content: "";
  background-color: #ef5a07;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  -webkit-mask-image: url(../img/common/arrow.svg);
          mask-image: url(../img/common/arrow.svg);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-transition: background-color 0.4s ease;
  transition: background-color 0.4s ease;
}
@media only screen and (min-width: 768px) {
  .c-btn::after {
    right: 2rem;
    width: 1rem;
    height: 1.7rem;
  }
}

.c-btn--border {
  width: 100%;
  max-width: 30rem;
  color: #fff;
  background-color: transparent;
  border-color: #fff;
}
@media only screen and (min-width: 768px) {
  .c-btn--border {
    font-size: 1.7rem;
  }
}
.c-btn--border::before {
  background-image: none;
  background-color: #fff;
}
.c-btn--border::after {
  background-color: #fff;
}

.c-btn--orange {
  color: #fff;
  background-color: #ef5a07;
}
.c-btn--orange::before {
  background-image: none;
  background-color: #fff;
}
.c-btn--orange::after {
  background-color: #fff;
}

.c-btn--no-arrow {
  padding-inline: 2rem;
}
.c-btn--no-arrow::after {
  content: none;
}

@media (any-hover: hover) {
  .c-btn:hover {
    color: #fff;
  }
  .c-btn:hover::before {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
  .c-btn:hover::after {
    background-color: #fff;
  }
  .c-btn--border:hover {
    color: #ef5a07;
  }
  .c-btn--border:hover::after {
    background-color: #ef5a07;
  }
  .c-btn--orange:hover {
    color: #ef5a07;
  }
  .c-btn--orange:hover::after {
    background-color: #ef5a07;
  }
}
/* ------------------------------------------------
c-frame
--------------------------------------------------- */
/* 四隅の黄色い丸は要素を足さずに背景で置く。
   背景の起点は枠線の内側（padding box）なので、枠線からの距離をそのまま書ける */
.c-frame {
  padding-block: 3rem;
  padding-inline: 1.6rem;
  background-color: #fff;
  background-image: url(../img/common/deco_dot-yellow.svg), url(../img/common/deco_dot-yellow.svg), url(../img/common/deco_dot-yellow.svg), url(../img/common/deco_dot-yellow.svg);
  background-repeat: no-repeat;
  background-position: left 0.8rem top 0.8rem, right 0.8rem top 0.8rem, left 0.8rem bottom 0.8rem, right 0.8rem bottom 0.8rem;
  background-size: 0.8rem 0.8rem;
  border: 0.5rem solid #ffde38;
  border-radius: 1.2rem;
}
@media only screen and (min-width: 768px) {
  .c-frame {
    padding-block: 5rem 6rem;
    padding-inline: 4rem;
    background-position: left 1.2rem top 1.2rem, right 1.2rem top 1.2rem, left 1.2rem bottom 1.2rem, right 1.2rem bottom 1.2rem;
    background-size: 1.2rem 1.2rem;
    border-width: 0.8rem;
    border-radius: 2rem;
  }
}

.c-frame--even {
  padding: 2rem;
}
@media only screen and (min-width: 768px) {
  .c-frame--even {
    padding: 6rem;
  }
}

/* ------------------------------------------------
c-section-title
--------------------------------------------------- */
/* ------------------------------------------------
c-heading-bar
--------------------------------------------------- */
/* 左の縦棒は要素を足さずに擬似要素で作る。棒の高さは文字1行ぶんに合わせてある */
.c-heading-bar {
  position: relative;
  padding-left: 1.6rem;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.05em;
}
@media only screen and (min-width: 768px) {
  .c-heading-bar {
    padding-left: 2.6rem;
    font-size: 2.4rem;
  }
}
.c-heading-bar::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 0.4rem;
  height: 100%;
  content: "";
  background-color: #ffde38;
  border-radius: 1rem;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
@media only screen and (min-width: 768px) {
  .c-heading-bar::before {
    width: 0.6rem;
  }
}

.c-heading-bar--white {
  color: #fff;
}

.c-heading-bar--bar-white::before {
  background-color: #fff;
}

/* ------------------------------------------------
パンくず
--------------------------------------------------- */
/* パンくずリストの親要素 */
.c-breadcrumbs {
  position: relative;
  z-index: 1; /* 下層FVのモニュメントが下へ重なってきても、文字を前に出して読めるようにする */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.4rem;
  padding-inline: 2rem;
}
@media only screen and (min-width: 768px) {
  .c-breadcrumbs {
    gap: 0.8rem;
    padding-inline: 6rem;
  }
}

/* パンくずリンクとテキスト */
.c-breadcrumbs a,
.c-breadcrumbs span {
  display: inline-block;
  vertical-align: middle;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1;
}
@media only screen and (min-width: 768px) {
  .c-breadcrumbs a,
  .c-breadcrumbs span {
    font-size: 1.2rem;
  }
}

.c-breadcrumbs a {
  cursor: pointer;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
  padding: 0.6rem 0.4rem;
}
@media only screen and (min-width: 768px) {
  .c-breadcrumbs a {
    padding-block: 1rem;
    padding-inline: 0;
  }
}

.c-breadcrumbs span:not(:last-of-type) {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
}

.c-breadcrumbs span:last-of-type {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1; /* 最後の要素が余分に広がらないよう調整 */
  max-width: 100%; /* 必ず幅を制限 */
  min-width: 0;
}

.c-breadcrumbs span.current-item {
  width: 100%;
  display: block;
  padding: 0.6rem 0.4rem;
  overflow: hidden; /* はみ出し部分を隠す */
  white-space: nowrap; /* テキストを1行に制限 */
  text-overflow: ellipsis;
  overflow: hidden;
}
@media only screen and (min-width: 768px) {
  .c-breadcrumbs span.current-item {
    padding: 0;
  }
}

.c-breadcrumbs .breadcrumb-icon {
  display: block;
  width: 0.6rem;
  height: 0.1rem;
  background-color: #020202;
  margin-top: 0.1rem;
}
@media only screen and (min-width: 768px) {
  .c-breadcrumbs .breadcrumb-icon {
    width: 0.8rem;
    margin-top: 0.2rem;
  }
}

.c-breadcrumbs a:hover {
  opacity: 0.5;
}

/* ------------------------------------------------
c-text
--------------------------------------------------- */
.c-text {
  font-size: 1.4rem;
  line-height: 1.7;
}
@media only screen and (min-width: 768px) {
  .c-text {
    font-size: 1.7rem;
    line-height: 1.8;
  }
}

@media only screen and (min-width: 768px) {
  .c-text--center {
    text-align: center;
  }
}

/* ------------------------------------------------
c-label
--------------------------------------------------- */
.c-label {
  display: grid;
  place-content: center;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  min-width: 8.8rem;
  height: 2.4rem;
  padding-inline: 1rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  border: 0.2rem solid #41c4ba;
  background-color: #41c4ba;
  border-radius: 0.8rem;
  color: #fff;
  font-size: 1.3rem;
}
@media only screen and (min-width: 768px) {
  .c-label {
    min-width: 10rem;
    height: 2.8rem;
    font-size: 1.6rem;
  }
}

.c-label--white {
  color: #41c4ba;
  background-color: transparent;
}

.c-label--accent {
  border-color: #ef5a07;
  background-color: #ef5a07;
}

/* ------------------------------------------------
c-yellow-label
--------------------------------------------------- */
.c-yellow-label {
  min-width: 9.4rem;
  padding-block: 0.4rem 0.5rem;
  padding-inline: 1.6rem;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.02em;
  text-align: center;
  background-color: #ffde38;
  border-radius: 5rem;
}
@media only screen and (min-width: 768px) {
  .c-yellow-label {
    min-width: 12.2rem;
    padding-block: 0.6rem 0.5rem;
    padding-inline: 2.4rem;
    font-size: 1.7rem;
  }
}

/* ------------------------------------------------
c-page-top
--------------------------------------------------- */
.c-page-top {
  position: fixed;
  right: 2rem;
  bottom: 2rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 700;
  -webkit-transition: opacity 0.3s, visibility 0.3s;
  transition: opacity 0.3s, visibility 0.3s;
}

.c-page-top.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* -----------------------------------------------
* project エントリーポイント
-------------------------------------------------- */
/* common */
/* ------------------------------------------------
p-loading
--------------------------------------------------- */
.p-loading {
  --hole: 0%;
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  overflow: hidden;
  /* OK: 上に「下の余白＋カエルの高さ」を空けると、余りが上下均等になってロゴが画面の高さの中央にくる。
     画面が低いときは空けきれないので、カエルがはみ出さない範囲までに抑える */
  padding-block: clamp(0rem, 100dvh - 32.2rem, 21.4rem) 3.1rem;
  background-color: #fc8b10;
  /* 中央に丸い穴をあけて、その穴を広げながら幕を消す。
     末尾の「#000 100%」は Safari 対策。これが無いと、穴が 0 のときに停止点が全部 0 に集まって
     半径 0 のグラデーションになり、Safari は幕を丸ごと透明にしてしまう。
     ぼかし（.3%）は穴の内側に取る。外側に取ると穴が 0 のときも中央に数pxの点が見えてしまう */
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 0, transparent calc(var(--hole) - 0.3%), #000 var(--hole), #000 100%);
          mask-image: radial-gradient(circle at 50% 50%, transparent 0, transparent calc(var(--hole) - 0.3%), #000 var(--hole), #000 100%);
}
@media only screen and (min-width: 768px) {
  .p-loading {
    padding-block: clamp(0rem, 100dvh - 47.9rem, 27.7rem) 2rem;
  }
}

.p-loading__balloon,
.p-loading__character {
  opacity: 0;
}

.p-loading__logo {
  width: 21.3rem;
  aspect-ratio: 160/81;
  margin-block: auto;
  margin-inline: auto;
}
@media only screen and (min-width: 768px) {
  .p-loading__logo {
    width: 30rem;
  }
}
.p-loading__logo img {
  opacity: 0;
}

.p-loading__talk {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -ms-flex-item-align: end;
      align-self: flex-end;
  gap: 1rem;
  padding-right: 2rem;
}
@media only screen and (min-width: 768px) {
  .p-loading__talk {
    gap: 0.4rem;
    padding-right: 8rem;
  }
}

.p-loading__balloon {
  display: grid;
  place-content: center;
  gap: 0.7rem;
  width: 21.5rem;
  aspect-ratio: 290/183;
  margin-top: 0.5rem;
  text-align: center;
  background-image: url(../img/common/deco_balloon.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  -webkit-transform-origin: 95% 85%;
          transform-origin: 95% 85%;
}
@media only screen and (min-width: 768px) {
  .p-loading__balloon {
    padding-top: 1rem;
    gap: 1rem;
    width: 29rem;
    margin-top: 2.7rem;
  }
}

.p-loading__label {
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.5;
}
@media only screen and (min-width: 768px) {
  .p-loading__label {
    font-size: 2.6rem;
  }
}

.p-loading__time {
  font-family: "Oswald", sans-serif;
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1.2;
}
@media only screen and (min-width: 768px) {
  .p-loading__time {
    font-size: 3.6rem;
  }
}

/* 休館日は日本語なので、開館時間の英数字用フォントから切り替える */
.p-loading__time--closed {
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 700;
}

.p-loading__character {
  width: 11.4rem;
  aspect-ratio: 542/870;
}
@media only screen and (min-width: 768px) {
  .p-loading__character {
    width: 16rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .p-loading {
    display: none;
  }
}
/* ------------------------------------------------
p-header
--------------------------------------------------- */
.p-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  height: 8rem;
  padding-inline: 2rem 0;
  pointer-events: none;
}
@media only screen and (min-width: 768px) {
  .p-header {
    height: 11rem;
    padding-inline: 3rem;
  }
}

.p-header__logo {
  height: inherit;
}
.p-header__logo a {
  height: inherit;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 12rem;
  pointer-events: auto;
}
@media only screen and (min-width: 768px) {
  .p-header__logo a {
    width: 16rem;
  }
}
.p-header__logo {
  /* ロゴは単色なので、白にするときは画像を差し替えず filter で白へ寄せる。
     白版の logo-white.svg を重ねる方法は、同じ絵でもSVG内の座標が数px違うため、
     縁に元のターコイズが残ってずれて見える */
}
.p-header__logo img {
  -webkit-transition: -webkit-filter 0.3s ease;
  transition: -webkit-filter 0.3s ease;
  transition: filter 0.3s ease;
  transition: filter 0.3s ease, -webkit-filter 0.3s ease;
}

/* 濃い地（ターコイズ・水色）に重なっている間だけ白にする。
   付け外しは common.js の is-logo-white。どの箱を濃い地とみなすかは HTML の data-logo="white" で決める */
.p-header.is-logo-white .p-header__logo img {
  -webkit-filter: brightness(0) invert(1);
          filter: brightness(0) invert(1);
}

.p-header__nav-wrap {
  height: inherit;
  padding-block: 1rem;
}

.p-header__nav {
  height: 100%;
  background-color: #FAF7F3;
  padding-inline: 3rem;
  border-radius: 5rem;
  pointer-events: auto;
}

.p-header-nav__items {
  height: inherit;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 3rem;
}

.p-header-nav__item {
  height: inherit;
}
.p-header-nav__item a {
  height: inherit;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 1rem;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.05em;
  white-space: nowrap;
  padding-top: 0.6rem;
}
.p-header-nav__item a span {
  display: block;
  width: auto;
  height: 3.2rem;
  -webkit-transition: scale 0.3s ease;
  transition: scale 0.3s ease;
}
.p-header-nav__item a span img {
  height: 100%;
  width: auto;
}

.p-header-nav__item:last-child a span {
  height: 2.9rem;
}

@media (any-hover: hover) {
  .p-header-nav__item a:hover span {
    scale: 1.25;
  }
}
/* ------------------------------------------------
p-drawer
--------------------------------------------------- */
.p-drawer {
  position: fixed;
  inset: 0;
  z-index: 900;
  width: 100%;
  height: 100dvh;
  overflow-y: auto;
  visibility: hidden;
  background-color: #fc8b10;
  clip-path: circle(0 at calc(100% - 3.55rem) 3.5rem);
  -webkit-transition: clip-path 0.35s ease, visibility 0.35s;
  transition: clip-path 0.35s ease, visibility 0.35s;
}
@media only screen and (min-width: 768px) {
  .p-drawer {
    display: none;
  }
}

.p-drawer.is-open {
  visibility: visible;
  pointer-events: auto;
  clip-path: circle(150vmax at calc(100% - 3.55rem) 3.5rem);
}

.p-drawer.is-open {
  -webkit-transition-duration: 0.6s;
          transition-duration: 0.6s;
}

/* 左端から見切れさせ、円のおよそ半分だけを見せる */
.p-drawer__circle {
  position: absolute;
  top: 50%;
  left: -33rem;
  width: 66rem;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: multiply;
}

.p-drawer__inner {
  position: relative;
  z-index: 1;
  padding-block: 10rem 6rem;
}

.p-drawer__item {
  border-bottom: 0.3rem solid #fff;
}
.p-drawer__item a {
  position: relative;
  display: block;
  padding-block: 2rem;
  padding-inline: 7rem 4.6rem;
  color: #fff;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.6666666667;
  letter-spacing: 0.05em;
}
.p-drawer__item a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 1.6rem;
  translate: 0 -50%;
  width: 4.2rem;
  height: 3.3rem;
  background-color: #fff;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center center;
          mask-position: center center;
  -webkit-mask-size: contain;
          mask-size: contain;
}
.p-drawer__item a::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1.6rem;
  translate: 0 -50%;
  width: 1rem;
  height: 1.8rem;
  background-color: #fff;
  -webkit-mask-image: url(../img/common/arrow.svg);
          mask-image: url(../img/common/arrow.svg);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center center;
          mask-position: center center;
  -webkit-mask-size: 100%;
          mask-size: 100%;
}

.p-drawer__item--home a::before {
  left: 2rem;
  width: 3.4rem;
  height: 3.6rem;
  -webkit-mask-image: url(../img/common/icon_home.svg);
          mask-image: url(../img/common/icon_home.svg);
}

.p-drawer__item--guide a::before {
  width: 4.4rem;
  height: 3.5rem;
  -webkit-mask-image: url(../img/common/icon-guide.svg);
          mask-image: url(../img/common/icon-guide.svg);
}

.p-drawer__item--about a::before {
  -webkit-mask-image: url(../img/common/icon-about.svg);
          mask-image: url(../img/common/icon-about.svg);
}

.p-drawer__item--event a::before {
  -webkit-mask-image: url(../img/common/icon-event.svg);
          mask-image: url(../img/common/icon-event.svg);
}

.p-drawer__item--map a::before {
  -webkit-mask-image: url(../img/common/icon-map.svg);
          mask-image: url(../img/common/icon-map.svg);
}

.p-drawer__item--faq a::before {
  -webkit-mask-image: url(../img/common/icon-faq.svg);
          mask-image: url(../img/common/icon-faq.svg);
}

.p-drawer__item--access a::before {
  -webkit-mask-image: url(../img/common/icon-access.svg);
          mask-image: url(../img/common/icon-access.svg);
}

.p-drawer__item--contact a::before {
  width: 3.7rem;
  left: 1.9rem;
  -webkit-mask-image: url(../img/common/icon-contact.svg);
          mask-image: url(../img/common/icon-contact.svg);
}

/* ------------------------------------------------
p-overlay
--------------------------------------------------- */
.p-overlay {
  position: fixed;
  inset: 0;
  z-index: 850;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  -webkit-transition: opacity 0.3s, visibility 0.3s;
  transition: opacity 0.3s, visibility 0.3s;
}
@media only screen and (min-width: 768px) {
  .p-overlay {
    display: none;
  }
}

.p-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* ------------------------------------------------
p-footer
--------------------------------------------------- */
.p-footer {
  position: relative;
  z-index: 1;
  padding-block: 6rem 6rem;
}
@media only screen and (min-width: 768px) {
  .p-footer {
    padding-block: 8rem 6rem;
  }
}
.p-footer::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background-color: #41c4ba;
}
.p-footer::before {
  content: "";
  position: absolute;
  bottom: calc(100% - 1px);
  left: 0;
  width: 100%;
  height: 7.6rem;
  /* 同じ絵を2枚敷き、2枚目を 6px ずらしてある。
     Safari は絵を「指定した枠より左右それぞれ約2.5px内側」にしか描かないので、
     1枚だけ繰り返すと継ぎ目に隙間（下地の色の縦線）が出る。
     2枚目をずらしておくと、その隙間を2枚目の本体が塞ぐ。
     ずらし量は実測で決めた（4px以下だと隙間が残り、5px以上で消える）。
     位置を変えたいときは background-position ではなく --cloud-x を書き換えること */
  --cloud-w: 72.96rem;
  --cloud-x: calc(50% + 17.73rem);
  background-image: url(../img/common/cloud_primary.svg), url(../img/common/cloud_primary.svg);
  background-repeat: repeat-x;
  background-size: var(--cloud-w) 100%;
  background-position: var(--cloud-x) bottom, calc(var(--cloud-x) + 6px) bottom;
}
@media only screen and (min-width: 768px) {
  .p-footer::before {
    height: 18rem;
    --cloud-w: 172.8rem;
    --cloud-x: calc(50% + 36rem);
  }
}
@media only screen and (min-width: 768px) {
  .p-footer::before {
    --cloud-x: calc(100% + 72rem);
  }
}

.p-footer__deco {
  position: absolute;
  z-index: -2;
  top: -19rem;
  right: 3rem;
  width: 12rem;
}
@media only screen and (min-width: 768px) {
  .p-footer__deco {
    top: -40rem;
    right: 6.9444444444vw;
    width: 24rem;
  }
}

.p-footer__contents {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 5rem;
}
@media only screen and (min-width: 768px) {
  .p-footer__contents {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    padding-inline: 12rem;
  }
}
@media (max-width: 1400px) {
  .p-footer__contents {
    padding-inline: 5.1428571429vw;
    gap: 4rem;
  }
}

.p-footer__info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 4rem;
}
@media only screen and (min-width: 768px) {
  .p-footer__info {
    gap: 0;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}

.p-footer__logo {
  width: 27rem;
}
@media only screen and (min-width: 768px) {
  .p-footer__logo {
    width: 32.4rem;
  }
}
.p-footer__logo a {
  display: block;
}
.p-footer__logo img {
  -webkit-transition: -webkit-filter 0.3s ease;
  transition: -webkit-filter 0.3s ease;
  transition: filter 0.3s ease;
  transition: filter 0.3s ease, -webkit-filter 0.3s ease;
}

@media (any-hover: hover) {
  .p-footer__logo a:hover img {
    -webkit-filter: brightness(0) invert(1);
            filter: brightness(0) invert(1);
  }
}
.p-footer__address {
  margin-top: 1.6rem;
  font-size: 1.4rem;
  line-height: 1.8;
}
@media only screen and (min-width: 768px) {
  .p-footer__address {
    margin-top: 1.6rem;
    font-size: 1.5rem;
    line-height: 1.7;
  }
}

.p-footer__label {
  width: 12rem;
  padding-inline: 1rem;
  border: 0.2rem solid #fff;
  border-radius: 0.5rem;
  color: #fff;
  font-size: 1.6rem;
  line-height: 1.7;
  letter-spacing: 0.08em;
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .p-footer__label {
    width: 16rem;
    font-size: 1.9rem;
    line-height: 1.7;
  }
}

.p-footer__time {
  margin-top: 0.5rem;
  font-family: "Oswald", sans-serif;
  font-size: 1.7rem;
  letter-spacing: 0.04em;
  font-weight: 600;
  line-height: 1.7;
}
@media only screen and (min-width: 768px) {
  .p-footer__time {
    font-size: 2.2rem;
    font-weight: 500;
    line-height: 1.7;
  }
}

.p-footer__closed {
  margin-top: 3rem;
}

.p-footer__days {
  margin-top: 0.8rem;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.7;
  white-space: nowrap;
}
@media only screen and (min-width: 768px) {
  .p-footer__days {
    font-size: 1.9rem;
    line-height: 1.7;
  }
}

.p-footer__note {
  margin-top: 0.5rem;
  font-size: 1.2rem;
  line-height: 1.7;
}
@media only screen and (min-width: 768px) {
  .p-footer__note {
    margin-top: 0.2rem;
    font-size: 1.3rem;
    line-height: 1.7;
    white-space: nowrap;
  }
}

.p-footer__links {
  display: grid;
  grid-template-rows: repeat(7, auto);
  grid-auto-flow: column;
  grid-auto-columns: -webkit-max-content;
  grid-auto-columns: max-content;
  gap: 1.5rem 3rem;
}
@media only screen and (min-width: 768px) {
  .p-footer__links {
    grid-template-rows: repeat(5, auto);
    gap: 2rem 4rem;
  }
}
.p-footer__links li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
}
.p-footer__links a {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0.05em;
  white-space: nowrap;
  position: relative;
  padding-left: 1.2em;
}
@media only screen and (min-width: 768px) {
  .p-footer__links a {
    font-size: 1.7rem;
    line-height: 1.7;
    -webkit-transition: color 0.3s ease;
    transition: color 0.3s ease;
  }
}
.p-footer__links a::before {
  position: absolute;
  content: "";
  top: 52%;
  left: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 0.7rem;
  height: 0.7rem;
  content: "";
  background-color: #fff;
  border-radius: 50%;
}
@media only screen and (min-width: 768px) {
  .p-footer__links a::before {
    width: 1rem;
    height: 1rem;
  }
}

@media (any-hover: hover) {
  .p-footer__links a:hover {
    color: #fff;
  }
}
.p-footer__sub {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 3rem;
  margin-top: 5rem;
}
@media only screen and (min-width: 768px) {
  .p-footer__sub {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    gap: 3.2rem;
    margin-top: 8rem;
  }
}

.p-footer__sns {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 2rem;
}
@media only screen and (min-width: 768px) {
  .p-footer__sns {
    gap: 2.4rem;
  }
}
.p-footer__sns a {
  display: grid;
  place-content: center;
  width: 3.6rem;
  height: 3.6rem;
}
@media only screen and (min-width: 768px) {
  .p-footer__sns a {
    width: 4rem;
    height: 4rem;
    -webkit-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
  }
}

@media (any-hover: hover) {
  .p-footer__sns a:hover {
    opacity: 0.7;
  }
}
.p-footer__sns li:nth-child(1) a {
  width: 3.7rem;
}
@media only screen and (min-width: 768px) {
  .p-footer__sns li:nth-child(1) a {
    width: 4.1rem;
  }
}

.p-footer__sns li:nth-child(2) a {
  width: 3.5rem;
}
@media only screen and (min-width: 768px) {
  .p-footer__sns li:nth-child(2) a {
    width: 4rem;
  }
}

.p-footer__btn {
  width: 100%;
}
@media only screen and (min-width: 768px) {
  .p-footer__btn {
    width: 33.5rem;
  }
}
.p-footer__btn a {
  border-radius: 2rem;
  background-color: #fff;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: #000;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.485;
  letter-spacing: 0.05em;
  height: 6.2rem;
}
@media only screen and (min-width: 768px) {
  .p-footer__btn a {
    height: 7.5rem;
    font-size: 1.7rem;
    line-height: 1.485;
    -webkit-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
  }
}
.p-footer__btn a::before {
  position: absolute;
  content: "";
  top: 50%;
  right: 3rem;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 0.8rem;
  height: 1.4rem;
  background-image: url(../img/common/icon-arrow.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100%;
}

@media (any-hover: hover) {
  .p-footer__btn a:hover {
    opacity: 0.7;
  }
}
.p-footer__copyright {
  margin-top: 6rem;
  color: #f4f3f3;
  font-size: 1.1rem;
  line-height: 1.485;
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .p-footer__copyright {
    margin-top: 10rem;
    color: #f2f0ed;
    font-size: 1.4rem;
    line-height: 1.485;
  }
}

/* ------------------------------------------------
p-loop-text
--------------------------------------------------- */
.p-loop-text {
  position: absolute;
  left: 0;
  width: 100%;
  pointer-events: none;
}

.p-loop-text--today {
  bottom: 26.4rem;
}
@media only screen and (min-width: 768px) {
  .p-loop-text--today {
    bottom: 51.6rem;
  }
}

.p-loop-text--recommend {
  bottom: 22.5rem;
}
@media only screen and (min-width: 768px) {
  .p-loop-text--recommend {
    bottom: 37.7rem;
  }
}

.p-loop-text--upcoming {
  bottom: 0;
}

.p-loop-text__track {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  -webkit-animation: p-loop-text-marquee 50s linear infinite;
          animation: p-loop-text-marquee 50s linear infinite;
}

.p-loop-text__group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.p-loop-text__group span {
  margin-right: 2rem;
  color: rgba(255, 255, 255, 0.5);
  font-family: "Comfortaa", sans-serif;
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: 0.1rem;
  white-space: nowrap;
}
@media only screen and (min-width: 768px) {
  .p-loop-text__group span {
    margin-right: 4rem;
    font-size: 4.8rem;
    letter-spacing: 0.3rem;
  }
}

@-webkit-keyframes p-loop-text-marquee {
  from {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}

@keyframes p-loop-text-marquee {
  from {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}
/* ------------------------------------------------
p-guide-btn
--------------------------------------------------- */
.p-guide-btn {
  width: 22rem;
}
@media only screen and (min-width: 768px) {
  .p-guide-btn {
    width: 40rem;
  }
}
.p-guide-btn a {
  position: relative;
  display: block;
  overflow: visible;
  width: 100%;
  aspect-ratio: 1/1;
  text-decoration: none;
}
.p-guide-btn a::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  content: "";
  background: url(../img/common/btn_circle.svg) center/100% 100% no-repeat;
  clip-path: url(#btn-circle-clip);
  pointer-events: auto;
  -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition: -webkit-transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), -webkit-transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.p-guide-btn__title {
  position: absolute;
  z-index: 1;
  top: 12.5%;
  right: 5%;
  width: 80%;
  pointer-events: none;
}

.p-guide-btn__go {
  position: absolute;
  z-index: 1;
  right: 20%;
  bottom: 22.5%;
  width: 17.5%;
  pointer-events: none;
  -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition: -webkit-transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), -webkit-transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.p-guide-btn__character {
  position: absolute;
  z-index: 1;
  bottom: -6%;
  left: 12.5%;
  width: 42.5%;
  pointer-events: none;
}

/* 横位置の持ち主が right から left へ移るので right は手放す */
.p-guide-btn__title--goriyo {
  right: auto;
  left: 50%;
  width: 60%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

.p-guide-btn__title--dayori {
  top: 6.5%;
  right: auto;
  left: 54%;
  width: 88%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

.p-guide-btn--sm {
  width: 18rem;
}
@media only screen and (min-width: 768px) {
  .p-guide-btn--sm {
    width: 30rem;
  }
}

@media (any-hover: hover) {
  .p-guide-btn a:hover .p-guide-btn__go {
    -webkit-transform: translateX(2rem) scale(1.15);
            transform: translateX(2rem) scale(1.15);
  }
  .p-guide-btn a:hover::before {
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
  }
}
/* ------------------------------------------------
p-anchor-menu
--------------------------------------------------- */
.p-anchor-menu {
  padding-block: 3rem;
  background-color: #41c4ba;
}
@media only screen and (min-width: 768px) {
  .p-anchor-menu {
    padding-block: 7rem;
  }
}

.p-anchor-menu__items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 1.6rem 2.4rem;
}
@media only screen and (min-width: 768px) {
  .p-anchor-menu__items {
    gap: 6rem;
  }
}

.p-anchor-menu__btn {
  position: relative;
  display: block;
  padding-block: 0.6rem;
  padding-left: 2.6rem;
  color: #fff;
  font-size: 1.6rem;
  line-height: 1.5;
  letter-spacing: 0.02em;
  white-space: nowrap;
  border-bottom: 0.2rem dashed #fff;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
@media only screen and (min-width: 768px) {
  .p-anchor-menu__btn {
    padding-block: 1rem;
    padding-left: 3.7rem;
    font-size: 2.2rem;
  }
}
.p-anchor-menu__btn::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 2rem;
  height: 2rem;
  content: "";
  background-color: #fff;
  border-radius: 100%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
@media only screen and (min-width: 768px) {
  .p-anchor-menu__btn::before {
    width: 2.7rem;
    height: 2.7rem;
  }
}
.p-anchor-menu__btn::after {
  position: absolute;
  top: 50%;
  left: 1rem;
  width: 1.2rem;
  height: 0.9rem;
  content: "";
  background-image: url(../img/common/icon_arrow-menu.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  -webkit-transform: translate(-50%, -50%) rotate(90deg);
          transform: translate(-50%, -50%) rotate(90deg);
}
@media only screen and (min-width: 768px) {
  .p-anchor-menu__btn::after {
    left: 1.35rem;
    width: 1.6rem;
    height: 1.2rem;
  }
}

@media (any-hover: hover) {
  .p-anchor-menu__btn:hover {
    opacity: 0.7;
  }
}
/* ------------------------------------------------
p-calendar-content
--------------------------------------------------- */
.p-calendar-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

@media only screen and (min-width: 768px) {
  .p-calendar-content__title {
    width: 29.7rem;
  }
}

.p-calendar-content__body {
  position: relative;
  margin-top: 2rem;
  width: 100%;
}
@media only screen and (min-width: 768px) {
  .p-calendar-content__body {
    margin-top: 5.4rem;
    margin-inline: auto;
    max-width: 90rem;
  }
}

/* ------------------------------------------------
p-calendar
--------------------------------------------------- */
/* 館カレンダー（Event Organiser の [eo_fullcalendar]）の見た目。
   中身のマークアップはプラグインが作るため、ここだけは BEM ではなく
   プラグインのクラス（.fc-*）を子孫で指定して上書きしている。
   カンプの色は既存の変数と同じ値だったので、変数をそのまま使う。
   プラグインのCSSはテーマのCSSより後ろで読み込まれるため、
   同じ強さの指定では負ける。カレンダー本体の .eo-fullcalendar を挟んで1段強くしている */
.p-calendar .eo-fullcalendar {
  /* この中だけで使う色。カンプから採った値 */
  --cal-line: #41c4ba; /* マスの区切り線 */
  --cal-band: #e0f3f0; /* 日付の帯 */
  --cal-closed: #f4f3f3; /* 休館日のマス */
  --cal-sat: #2794eb; /* 土曜の日付 */
  font-family: "M PLUS 1p", sans-serif;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
}

/* ---- 見出しの行（前月ボタン・年月・翌月ボタン） ---- */
/* 中身は 左 → 右 → 中央 の順に出てくるので、order で並べ直す */
.p-calendar .eo-fullcalendar .fc-toolbar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  /* 下の余白はカレンダー本体（.fc-view-container）が持つので、プラグインの分は手放す */
  margin-bottom: 0;
}
@media only screen and (min-width: 768px) {
  .p-calendar .eo-fullcalendar .fc-toolbar {
    padding-inline: 3rem;
  }
}

.p-calendar .eo-fullcalendar .fc-toolbar .fc-left {
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
}

.p-calendar .eo-fullcalendar .fc-toolbar .fc-center {
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
  /* 月の数字を左右のちょうど中央に置きたいので、中央の領域を目いっぱい広げる */
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.p-calendar .eo-fullcalendar .fc-toolbar .fc-right {
  -webkit-box-ordinal-group: 4;
      -ms-flex-order: 3;
          order: 3;
}

.p-calendar .eo-fullcalendar .fc-toolbar .fc-clear {
  display: none;
}

.p-calendar .eo-fullcalendar .fc-toolbar h2 {
  /* 年と英語の月名が左右で同じ幅を取るので、月の数字が中央にそろう。
     プラグインが float を掛けていて幅が中身なりに縮むため、float を外して幅いっぱいに広げる */
  float: none;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  /* 月を送った直後の一瞬だけ、プラグインが素の文字（「2026年9月」）に戻す。
     そのままだと見出しの高さが縮んでカレンダー全体が跳ねるので、
     大きい数字が入ったときの高さを常に確保しておく */
  min-height: 7.3rem;
  font-size: 2rem;
  font-weight: 900;
  line-height: 1.4;
}
@media only screen and (min-width: 768px) {
  .p-calendar .eo-fullcalendar .fc-toolbar h2 {
    min-height: 10.4rem;
    font-size: 2.4rem;
  }
}

/* 見出しの数字。年と月の数字だけ大きくする（span は front-calendar.js が付ける） */
/* 見出しは「2026 / 8 / August」の3つで組む（span は front-calendar.js が付ける） */
.p-calendar__num {
  /* 下端は年・英語の月名とそろっているが、数字が大きいぶん上に浮いて見えるので、
     見た目だけ少し下げる（文字の下端をわずかに下へずらす目の補正） */
  position: relative;
  top: 0.3rem;
  margin-inline: 0.8rem;
  font-size: 7rem;
  font-weight: 900;
  line-height: 1;
  color: #41c4ba;
}
@media only screen and (min-width: 768px) {
  .p-calendar__num {
    top: 0.4rem;
    font-size: 10rem;
  }
}

.p-calendar__year,
.p-calendar__en {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  /* 月の数字との比率は元のまま（約1.9倍）にそろえている */
  font-size: 2.3rem;
}
@media only screen and (min-width: 768px) {
  .p-calendar__year,
  .p-calendar__en {
    font-size: 2.9rem;
  }
}

/* ---- 前月・翌月ボタン ---- */
.p-calendar .eo-fullcalendar .fc-toolbar .fc-button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0.6rem;
  height: 2rem;
  min-width: 6rem;
  margin: 0;
  padding-inline: 1.2rem;
  border: 0;
  border-radius: 999px;
  background-color: #41c4ba;
  background-image: none;
  -webkit-box-shadow: none;
          box-shadow: none;
  color: #fff;
  font-size: 1.2rem;
  font-weight: 500;
  text-shadow: none;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
@media only screen and (min-width: 768px) {
  .p-calendar .eo-fullcalendar .fc-toolbar .fc-button {
    font-size: 2rem;
    min-width: 8rem;
    height: 3rem;
  }
}

/* 押したあとは、指がボタンの上に残っていても元の濃さに戻す。
   :hover だけだと、月を送ったあともボタンが薄いままに見える */
.p-calendar .eo-fullcalendar .fc-toolbar .fc-button:hover:not(:focus) {
  opacity: 0.7;
}

/* 月名はJS（assets/js/front-calendar.js）が data-month に入れる */
.p-calendar .eo-fullcalendar .fc-prev-button::after,
.p-calendar .eo-fullcalendar .fc-next-button::before {
  content: attr(data-month);
}

/* 矢印。プラグインの文字アイコンは大きさが揃わないので、線で山形を描き直す */
.p-calendar .eo-fullcalendar .fc-toolbar .fc-icon {
  width: 0.7rem;
  height: 0.7rem;
  margin: 0;
  border-top: 0.2rem solid #fff;
  border-right: 0.2rem solid #fff;
  font-size: 0;
  line-height: 1;
  top: 0;
}

.p-calendar .eo-fullcalendar .fc-toolbar .fc-icon::after {
  content: none;
}

.p-calendar .eo-fullcalendar .fc-toolbar .fc-icon-left-single-arrow {
  -webkit-transform: rotate(-135deg);
          transform: rotate(-135deg);
}

.p-calendar .eo-fullcalendar .fc-toolbar .fc-icon-right-single-arrow {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

/* ---- カレンダー本体 ---- */
/* スマホでは表を 80rem の幅のまま作り、この中だけ横に送って見せる
   （見出しや月送りボタンは動かさない） */
.p-calendar .eo-fullcalendar .fc-view-container {
  margin-top: 2.6rem;
}
@media only screen and (max-width: 767px) {
  .p-calendar .eo-fullcalendar .fc-view-container {
    margin-top: 1.6rem;
    margin-right: -2rem;
    /* auto ではなく scroll。macOS などで「動かしたときだけ出す」設定でも常に出す */
    overflow-x: scroll;
  }
}

/* 横に送るためのバー。表から少し離して置く */
@media only screen and (max-width: 767px) {
  .p-calendar .eo-fullcalendar .fc-view {
    margin-right: 2rem;
    margin-bottom: 1.2rem;
  }
}

@media only screen and (max-width: 767px) {
  .p-calendar .eo-fullcalendar .fc-view-container::-webkit-scrollbar {
    height: 0.8rem;
  }
}

@media only screen and (max-width: 767px) {
  .p-calendar .eo-fullcalendar .fc-view-container::-webkit-scrollbar-track {
    margin-right: 2rem;
    border-radius: 0.4rem;
    background-color: var(--cal-band);
  }
}

@media only screen and (max-width: 767px) {
  .p-calendar .eo-fullcalendar .fc-view-container::-webkit-scrollbar-thumb {
    border-radius: 0.4rem;
    background-color: #41c4ba;
  }
}

.p-calendar .eo-fullcalendar th,
.p-calendar .eo-fullcalendar td {
  /* プラグインは content-box を強制しているので border-box に戻す。
     こうしないと、背景のマスと日付・イベントの層で列の位置がずれ、
     線が二重に見えたり白く抜けたりする */
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-color: var(--cal-line);
  /* 縦線は各マスの「右」だけが持つ。左右どちらも持つと、隣り合うマスで
     どちらの線を描くか競合して、線が割れて見える。
     週の区切り（横線）は日付の帯の上線が担う */
  border-width: 0 0.15rem 0.15rem 0;
}

/* 表のふち。月送りボタンや見出しは含まず、表だけを囲む要素に付ける。
   角を丸く切るので、はみ出すマスはここで切る */
.p-calendar .eo-fullcalendar .fc-view {
  overflow: hidden;
  border: 0.4rem solid #41c4ba;
  border-radius: 2rem;
}
@media only screen and (max-width: 767px) {
  .p-calendar .eo-fullcalendar .fc-view {
    width: 80rem;
  }
}
@media only screen and (min-width: 768px) {
  .p-calendar .eo-fullcalendar .fc-view {
    border-radius: 4rem;
  }
}

/* 日付・イベントの層も、背景のマスと同じ列幅で並べる。
   ここが揃っていないと、境目で線が白く割れて見える */
.p-calendar .eo-fullcalendar .fc-content-skeleton table,
.p-calendar .eo-fullcalendar .fc-bg table {
  table-layout: fixed;
}

/* 表全体を包んでいる外側のセル。ここにも線が付くと、ふちと重なって二重になる */
.p-calendar .eo-fullcalendar .fc-view > table > thead > tr > td,
.p-calendar .eo-fullcalendar .fc-view > table > tbody > tr > td {
  border-width: 0;
}

.p-calendar .eo-fullcalendar .fc-view > table {
  /* プラグインは表の幅を px で計算するため、ふちの内側との間に数pxの隙間ができる。
     幅いっぱいに広げて隙間をなくす */
  width: 100%;
  border: 0;
}

.p-calendar .eo-fullcalendar .fc-row .fc-bg table,
.p-calendar .eo-fullcalendar .fc-row .fc-content-skeleton table {
  border: 0;
}

/* 1日ぶんの幅。プラグインのJSは px で割り振るため端数が最後の列だけに寄る。
   7等分の % を指定して、どの画面幅でも同じ幅にする。
   イベントの行（tbody）は複数日にまたがる td が colspan を持つので触らない
   （表は table-layout: fixed なので、上の行の幅がそのまま列幅になる） */
.p-calendar .eo-fullcalendar .fc-day-header,
.p-calendar .eo-fullcalendar .fc-bg td,
.p-calendar .eo-fullcalendar .fc-content-skeleton thead td {
  width: 14.2857142857%;
}

/* 曜日の帯 */
.p-calendar .eo-fullcalendar .fc-day-header {
  height: 4.8rem;
  /* プラグインが表の中の td/th すべてに padding: 0 !important を当てているため、
     ここだけ !important で上書きしないと余白が入らない */
  padding: 0 0 0.6rem !important;
  border-color: #fff;
  background-color: #41c4ba;
  color: #fff;
  font-size: 1.7rem;
  font-weight: 600;
  vertical-align: middle;
}
@media only screen and (min-width: 768px) {
  .p-calendar .eo-fullcalendar .fc-day-header {
    height: 4.8rem;
    font-size: 2rem;
  }
}

.p-calendar .eo-fullcalendar .fc-day-header:first-child {
  border-left-color: #41c4ba;
}

.p-calendar .eo-fullcalendar .fc-day-header:last-child {
  border-right-color: #41c4ba;
}

/* 日付の帯。数字は右上ではなく中央に置く */
.p-calendar .eo-fullcalendar .fc-basic-view .fc-day-number {
  height: 3.6rem;
  /* 数字の上下の余白をそろえるための指定。
     セルの上端から行を始め（vertical-align: top）、行の高さで文字の位置を決める。
     フォントの字形の都合で、行の高さ＝セルの高さにすると数字が少し沈むため、
     その分だけ行を低くしている */
  line-height: 3.35rem;
  vertical-align: top;
  padding: 0;
  /* 帯ではなく、数字だけ丸い背景にする（背景は .p-calendar__date が持つ） */
  background-color: transparent;
  /* 日付どうしの区切りも、マスの線と同じ薄い緑にそろえる */
  border-color: var(--cal-line);
  border-top: 0;
  border-bottom: 0;
  color: #020202;
  font-size: 1.5rem;
  font-weight: 600;
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .p-calendar .eo-fullcalendar .fc-basic-view .fc-day-number {
    font-size: 1.7rem;
  }
}

.p-calendar .eo-fullcalendar .fc-basic-view .fc-day-number.fc-sat {
  color: var(--cal-sat);
}

.p-calendar .eo-fullcalendar .fc-basic-view .fc-day-number.fc-sun {
  color: #e43030;
}

/* 前後の月の日付は出さない。帯は月をまたいでも続くので、数字だけ消す。
   プラグインは前後の月のマスを薄く（opacity .3）するが、カンプは同じ濃さなので戻す */
.p-calendar .eo-fullcalendar .fc-basic-view .fc-other-month {
  opacity: 1;
}

.p-calendar .eo-fullcalendar .fc-basic-view .fc-day-number.fc-other-month {
  color: transparent;
}

/* マスの高さ。イベントが増えた週はそのぶん伸びる */
.p-calendar .eo-fullcalendar .fc-day-grid .fc-row {
  min-height: 8rem;
}
@media only screen and (min-width: 768px) {
  .p-calendar .eo-fullcalendar .fc-day-grid .fc-row {
    min-height: 10rem;
  }
}

.p-calendar .eo-fullcalendar .fc-day-grid .fc-row .fc-content-skeleton {
  padding-bottom: 1.2rem;
}

/* 線は背景のマス（.fc-bg）が持つ。イベントの行はその上に重なるだけなので、
   線を持たせない（両方が持つと二重になる）。
   なお、この枠に padding は効かない（プラグインが 0 で固定している）ため、
   予定まわりの余白は予定側の margin で作っている */
.p-calendar .eo-fullcalendar .fc-content-skeleton tbody td {
  border-width: 0;
}

/* 日付の数字。丸い背景を持たせる（span は front-calendar.js が付ける） */
.p-calendar__date {
  display: inline-block;
  /* プラグインが content-box を強制していて、padding のぶんだけ縦に伸びて
     楕円になるため、border-box に戻す */
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  /* 数字がマスの一番上に付かないよう、上に余白を取る */
  margin-top: 0.8rem;
  width: 3.2rem;
  aspect-ratio: 1/1;
  border-radius: 100%;
  background-color: var(--cal-band);
  font-size: 1.6rem;
  /* 行の高さが丸の直径より大きいと、その分だけ縦に伸びて楕円になる。
     直径（padding を除いた分）に合わせる */
  line-height: 3rem;
}
@media only screen and (min-width: 768px) {
  .p-calendar__date {
    width: 3.4rem;
    font-size: 2rem;
    line-height: 3.2rem;
  }
}

/* 年は数字の左に寄せ、英語の月名は右に流す */
.p-calendar__year {
  text-align: right;
}

.p-calendar__en {
  text-align: left;
}

/* 土曜と日曜は、丸そのものに色を付けて数字を白抜きにする */
.p-calendar .eo-fullcalendar .fc-sat .p-calendar__date {
  background-color: var(--cal-sat);
  color: #fff;
}

.p-calendar .eo-fullcalendar .fc-sun .p-calendar__date {
  background-color: #e43030;
  color: #fff;
}

/* 祝日・振替休日も日曜と同じ赤。土曜が祝日のときは赤が勝つよう、土日のあとに書く */
.p-calendar .eo-fullcalendar .fc-day-number.is-holiday .p-calendar__date {
  background-color: #e43030;
  color: #fff;
}

/* 前後の月は数字も丸も出さない */
.p-calendar .eo-fullcalendar .fc-other-month .p-calendar__date {
  background-color: transparent;
}

/* ---- イベント ---- */
.p-calendar .eo-fullcalendar .fc-day-grid-event {
  /* 予定のまわりの余白。上は日付の帯（および前の予定）との間隔 */
  margin: 0.8rem 1.2rem 0;
  padding: 0.3rem 0.6rem;
  border: 0;
  border-radius: 0.3rem;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
}
@media only screen and (min-width: 768px) {
  .p-calendar .eo-fullcalendar .fc-day-grid-event {
    font-size: 1.2rem;
  }
}

/* 名前が長いときは1行におさめ、末尾に「…」を出す */
.p-calendar .eo-fullcalendar .fc-day-grid-event .fc-content {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.p-calendar .eo-fullcalendar .fc-day-grid-event .fc-time {
  display: none;
}

.p-calendar .eo-fullcalendar .fc-event {
  color: #fff;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

@media (any-hover: hover) {
  .p-calendar .eo-fullcalendar .fc-event:hover {
    opacity: 0.7;
  }
}
/* 背景色のあるマスは、背景が線の上に重なって線が細く見えるため、
   背景を線の内側だけに収める */
.p-calendar .eo-fullcalendar .fc-bg td {
  background-clip: padding-box;
}

/* マスの上の線は「ひとつ上のマスの下線」なので、背景色のマスでは
   その線まで背景が広がって線が消えてしまう。
   同じ線を自分でも持たせて、背景を線の内側に押し下げる */
.p-calendar .eo-fullcalendar .fc-bg td.is-closed,
.p-calendar .eo-fullcalendar .fc-bg td.fc-today,
.p-calendar .eo-fullcalendar .fc-bg td.fc-state-highlight {
  border-top: 0.15rem solid var(--cal-line);
}

/* 1週目の上は表のふちがあるので、この線は出さない */
.p-calendar .eo-fullcalendar .fc-day-grid .fc-row:first-child .fc-bg td {
  border-top-width: 0;
}

/* ---- 休館日 ---- */
/* クラスとラベルは assets/js/front-calendar.js が付ける */
.p-calendar .eo-fullcalendar .fc-bg td.is-closed {
  position: relative;
  background-color: var(--cal-closed);
}

.p-calendar__closed {
  position: absolute;
  /* マスの中央ではなく、日付の帯を除いた部分の中央に置く
     （帯の高さ 2.8rem の半分だけ下げる） */
  top: calc(50% + 1.4rem);
  left: 0;
  width: 100%;
  color: #e43030;
  font-size: 1.4rem;
  text-align: center;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
@media only screen and (min-width: 768px) {
  .p-calendar__closed {
    font-size: 1.6rem;
  }
}

/* 「今日」のマス。
   プラグインは「今日」のマスに別の枠指定を当てていて、そのままだと
   このマスの右の線だけ細く割れて見えるので、線もここで指定し直す */
.p-calendar .eo-fullcalendar td.fc-today,
.p-calendar .eo-fullcalendar td.fc-state-highlight {
  background-color: #fff4d1;
  background-color: var(--cal-band);
  border-color: var(--cal-line);
  border-width: 0 0.15rem 0.15rem 0;
  border-style: solid;
}

/* 外枠は出さない（マスの区切り線だけ残す） */
.p-calendar .eo-fullcalendar .fc-row td:first-child,
.p-calendar .eo-fullcalendar .fc-row th:first-child {
  border-left: 0;
}

.p-calendar .eo-fullcalendar .fc-row td:last-child,
.p-calendar .eo-fullcalendar .fc-row th:last-child {
  border-right: 0;
}

.p-calendar .eo-fullcalendar .fc-row:last-child td {
  border-bottom: 0;
}

.polite {
  letter-spacing: 0.02em;
}

@media only screen and (max-width: 767px) {
  .fc .fc-toolbar > * > * {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
}

/* ------------------------------------------------
p-page-top
--------------------------------------------------- */
.p-page-top {
  position: absolute;
  z-index: 100;
  width: 9rem;
  height: 100%;
  left: 2rem;
  bottom: 0;
  pointer-events: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}
@media only screen and (min-width: 768px) {
  .p-page-top {
    left: 3rem;
    width: 16rem;
  }
}
@media (max-width: 1400px) {
  .p-page-top {
    left: 4.2857142857vw;
  }
}
.p-page-top button {
  position: sticky;
  bottom: 2rem;
  top: calc(100% - 36rem);
  width: 9rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  pointer-events: auto;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 0.5s ease, visibility 0.5s ease;
  transition: opacity 0.5s ease, visibility 0.5s ease;
  cursor: pointer;
}
@media only screen and (min-width: 768px) {
  .p-page-top button {
    bottom: 4rem;
    width: 16rem;
  }
}
.p-page-top button span {
  display: block;
}
.p-page-top.is-visible button {
  opacity: 1;
  visibility: visible;
}
.p-page-top .p-page-top__text {
  width: 100%;
}
.p-page-top .p-page-top__base {
  position: relative;
  margin-top: 1rem;
  width: 7rem;
}
@media only screen and (min-width: 768px) {
  .p-page-top .p-page-top__base {
    margin-top: 1.6rem;
    width: 11rem;
  }
}
.p-page-top {
  /* 赤いボタンは、同じ1枚の絵（幅39.5 × 高さ43.25）を3つの窓からのぞいている。
     真ん中の窓の高さを 0 にすると押し込んだ形になる。
     切り分けた画像を3枚並べる作り方だと、Safari は小さいサイズのときに
     切り分け画像を正しく描けず、輪郭が左右にずれて継ぎ目が見える。
     同じ絵の別の場所を見せるだけなら、どの窓もまったく同じ描画結果になるのでずれない */
}
.p-page-top .p-page-top__btn {
  --btn-w: 2.63rem;
  --btn-h-top: calc(var(--btn-w) * 19.75 / 39.5);
  --btn-h-middle: calc(var(--btn-w) * 13.5 / 39.5);
  --btn-h-bottom: calc(var(--btn-w) * 10 / 39.5);
  position: absolute;
  bottom: 3.5rem;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  white-space: nowrap;
  width: var(--btn-w);
}
@media only screen and (min-width: 768px) {
  .p-page-top .p-page-top__btn {
    --btn-w: 4.13rem;
    bottom: 5.5rem;
  }
}
.p-page-top .p-page-top__top,
.p-page-top .p-page-top__middle,
.p-page-top .p-page-top__bottom {
  position: relative;
  overflow: hidden;
}
.p-page-top .p-page-top__top img,
.p-page-top .p-page-top__middle img,
.p-page-top .p-page-top__bottom img {
  position: absolute;
  left: 0;
  width: 100%;
}
.p-page-top .p-page-top__top {
  height: var(--btn-h-top);
}
.p-page-top .p-page-top__top img {
  top: 0;
}
.p-page-top .p-page-top__middle {
  height: var(--btn-h-middle);
}
.p-page-top .p-page-top__middle img {
  top: calc(var(--btn-h-top) * -1);
}
.p-page-top .p-page-top__bottom {
  height: var(--btn-h-bottom);
}
.p-page-top .p-page-top__bottom img {
  top: calc((var(--btn-h-top) + var(--btn-h-middle)) * -1);
}
.p-page-top button.is-pressed .p-page-top__middle {
  height: 0;
}

/* ------------------------------------------------
p-pagination
--------------------------------------------------- */
.p-pagination__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0.8rem;
}

.p-pagination__link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 4rem;
  height: 4rem;
  color: #ef5a07;
  font-family: "Comfortaa", sans-serif;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.02em;
  text-align: center;
  background-color: #fff;
  border: 0.2rem solid #ef5a07;
  border-radius: 50%;
  -webkit-transition: color 0.3s ease, background-color 0.3s ease;
  transition: color 0.3s ease, background-color 0.3s ease;
  padding-top: 0.3rem;
}

.p-pagination__link--current {
  color: #fff;
  background-color: #ef5a07;
}

/* 「…」は枠を持たない */
.p-pagination__dots {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 4rem;
  color: #ef5a07;
  font-family: "Comfortaa", sans-serif;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.8;
  padding-bottom: 0.6rem;
}

.p-pagination__arrow {
  width: 0.7rem;
  height: 1.2rem;
  background-color: #ef5a07;
  -webkit-mask-image: url(../img/common/arrow.svg);
          mask-image: url(../img/common/arrow.svg);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-transition: background-color 0.3s ease;
  transition: background-color 0.3s ease;
}

.p-pagination__arrow--prev {
  -webkit-transform: scaleX(-1);
          transform: scaleX(-1);
}

@media (any-hover: hover) {
  a.p-pagination__link:hover {
    color: #fff;
    background-color: #ef5a07;
  }
  a.p-pagination__link:hover .p-pagination__arrow {
    background-color: #fff;
  }
}
.p-pagination__link--next {
  padding-left: 0.3rem;
  padding-top: 0;
}

.p-pagination__link--prev {
  padding-right: 0.3rem;
}

/* ------------------------------------------------
p-tabs
--------------------------------------------------- */
.p-tabs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0.8rem;
}
@media only screen and (min-width: 768px) {
  .p-tabs {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin-inline: auto;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    gap: 2rem;
    border-bottom: 0.8rem solid #ffde38;
  }
}

.p-tabs__item {
  width: calc(50% - 0.4rem);
  background-color: #fff;
  background-color: #d9d9d9;
  border-radius: 1rem;
}
@media only screen and (min-width: 768px) {
  .p-tabs__item {
    width: 26rem;
    border-radius: 1.5rem 1.5rem 0 0;
  }
}
.p-tabs__item a,
.p-tabs__item button {
  display: grid;
  place-content: center;
  width: 100%;
  padding-block: 1.4rem;
  padding-inline: 1rem;
  color: #000;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
@media only screen and (min-width: 768px) {
  .p-tabs__item a,
  .p-tabs__item button {
    padding-block: 1.6rem 1.2rem;
    font-size: 2.2rem;
  }
}
.p-tabs__item button {
  font-family: "M PLUS 1p", sans-serif;
  background-color: transparent;
  border: none;
  cursor: pointer;
}

@media only screen and (min-width: 768px) {
  .p-tabs--wide .p-tabs__item {
    width: 39rem;
  }
}

.p-tabs__item.is-current {
  background-color: #ffde38;
}
.p-tabs__item.is-current a,
.p-tabs__item.is-current button {
  cursor: default;
}

@media (any-hover: hover) {
  .p-tabs__item:not(.is-current) a:hover,
  .p-tabs__item:not(.is-current) button:hover {
    opacity: 0.7;
  }
}
/* ------------------------------------------------
p-lower-fv
--------------------------------------------------- */
.p-lower-fv {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 18rem;
  padding-top: 6rem;
  padding-inline: 2rem;
  /* 横へはみ出すモニュメントの切り取りは .l-wrapper 側でまとめて行う。
     ここに overflow を置くと、回転するモニュメントの下側（パンくずに重なるあたり）まで切れてしまう
     （overflow-x: clip も Safari は縦に効かせるので使わない） */
}
@media only screen and (min-width: 768px) {
  .p-lower-fv {
    height: 50rem;
    padding-inline: 11.3rem;
  }
}

.p-lower-fv__monument {
  opacity: 0.85;
  mix-blend-mode: multiply;
  position: absolute;
  right: -29.3333333333vw;
  bottom: 2.5rem;
  width: 90.6666666667vw;
}
@media only screen and (min-width: 768px) {
  .p-lower-fv__monument {
    right: max(-5.4861111111vw, -7.9rem);
    width: min(79.9305555556vw, 115.1rem);
  }
}

.p-lower-fv__title {
  position: relative;
  font-size: 3.2rem;
  font-weight: 700;
}
@media only screen and (min-width: 768px) {
  .p-lower-fv__title {
    font-size: 4.8rem;
  }
}
.p-lower-fv__title img {
  width: auto;
  height: 2.4rem;
}
@media only screen and (min-width: 768px) {
  .p-lower-fv__title img {
    height: 4.7rem;
  }
}

.p-lower-fv__title--information img {
  height: 2.9rem;
}
@media only screen and (min-width: 768px) {
  .p-lower-fv__title--information img {
    height: 5.6rem;
  }
}

.p-lower-fv__title--seminar img {
  height: 2.7rem;
}
@media only screen and (min-width: 768px) {
  .p-lower-fv__title--seminar img {
    height: 5.2rem;
  }
}

.p-lower-fv__title--haken img {
  height: 2.8rem;
}
@media only screen and (min-width: 768px) {
  .p-lower-fv__title--haken img {
    height: 5.5rem;
  }
}

.p-lower-fv__title--thanks img {
  height: 3rem;
}
@media only screen and (min-width: 768px) {
  .p-lower-fv__title--thanks img {
    height: 5.9rem;
  }
}

.p-img-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 3rem;
}
@media only screen and (min-width: 768px) {
  .p-img-title {
    height: auto;
  }
}
.p-img-title > img,
.p-img-title > picture > img {
  width: auto;
  height: 100%;
}
@media only screen and (min-width: 768px) {
  .p-img-title > img,
  .p-img-title > picture > img {
    width: 100%;
    height: auto;
  }
}
.p-img-title > picture {
  display: contents;
}

.p-img-title--center {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media only screen and (min-width: 768px) {
  .p-img-title--center {
    margin-inline: auto;
  }
}

.p-img-title--2line {
  height: 6.2rem;
}
@media only screen and (min-width: 768px) {
  .p-img-title--2line {
    height: auto;
  }
}

/* ------------------------------------------------
p-news-item
--------------------------------------------------- */
.p-news-item {
  border-bottom: none;
  background-image: repeating-linear-gradient(90deg, #666 0, #666 0.3rem, transparent 0.3rem, transparent 0.6rem);
  background-repeat: repeat-x;
  background-position: left bottom;
  background-size: auto 0.1rem;
  min-width: 0;
}
@media only screen and (min-width: 768px) {
  .p-news-item {
    background-image: repeating-linear-gradient(90deg, #666 0, #666 0.4rem, transparent 0.4rem, transparent 0.8rem);
    background-size: auto 0.2rem;
  }
}
.p-news-item a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
  padding-block: 1.2rem;
  padding-left: 0.4rem;
  padding-right: 3rem;
  position: relative;
}
@media only screen and (min-width: 768px) {
  .p-news-item a {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 2.4rem;
    padding-block: 1.8rem 2rem;
    padding-right: 4rem;
    padding-left: 1rem;
  }
}
.p-news-item a::before {
  position: absolute;
  content: "";
  top: 50%;
  right: 0.4rem;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 1rem;
  height: 1.8rem;
  background-image: url(../img/common/arrow.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100%;
}
@media only screen and (min-width: 768px) {
  .p-news-item a::before {
    right: 1rem;
  }
}

.p-news-item__meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
}
@media only screen and (min-width: 768px) {
  .p-news-item__meta {
    gap: 2rem;
  }
}

.p-news-item__date {
  font-size: 1.4rem;
}
@media only screen and (min-width: 768px) {
  .p-news-item__date {
    font-size: 1.6rem;
    width: 10rem;
  }
}

.p-news-item__cat {
  background-color: #9F9F95;
  background-color: #41c4ba;
  border-radius: 0.5rem;
  display: grid;
  place-content: center;
  min-width: 11rem;
  height: 3.2rem;
  color: #fff;
}

.p-news-item__title {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  display: -webkit-box;
  overflow: hidden;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
@media only screen and (min-width: 768px) {
  .p-news-item__title {
    font-size: 1.7rem;
    -webkit-transition: color 0.3s ease;
    transition: color 0.3s ease;
  }
}

@media (any-hover: hover) {
  .p-news-item a:hover .p-news-item__title {
    color: #41c4ba;
  }
}
/* ------------------------------------------------
p-cta
--------------------------------------------------- */
.p-cta {
  margin-top: 11rem;
  padding-bottom: 16rem;
  position: relative;
}
@media only screen and (min-width: 768px) {
  .p-cta {
    margin-top: 16rem;
    padding-bottom: 36rem;
  }
}

.p-cta__btn {
  position: absolute;
  top: -20rem;
  right: 3rem;
}
@media only screen and (min-width: 768px) {
  .p-cta__btn {
    top: -34rem;
    right: 8rem;
  }
}

.p-cta__contents {
  position: relative;
  margin-inline: auto;
  padding-block: 4.8rem;
  padding-inline: 2rem;
  background-color: #ef5a07;
  border-radius: 2rem;
}
@media only screen and (min-width: 768px) {
  .p-cta__contents {
    max-width: 100rem;
    padding-block: 6rem 7rem;
    padding-inline: 2rem;
    border-radius: 4rem;
  }
}

/* カードの左上に立つキャラクター。絵はページごとに差し替える（既定は恐竜） */
.p-cta__character {
  position: absolute;
  top: -9.7rem;
  left: 0;
  width: 12rem;
}
@media only screen and (min-width: 768px) {
  .p-cta__character {
    top: -15.5rem;
    left: 0;
    width: 19.5rem;
  }
}

/* よくある質問ページはかえるおじさん。恐竜より縦に長く、カードの上に立たせる */
.p-cta--faq .p-cta__character {
  top: -10.5rem;
  left: 1rem;
  width: 9rem;
}
@media only screen and (min-width: 768px) {
  .p-cta--faq .p-cta__character {
    top: -7.7rem;
    left: 5rem;
    width: 18rem;
  }
}

.p-cta__title {
  width: 17.3rem;
  margin-inline: auto;
}
@media only screen and (min-width: 768px) {
  .p-cta__title {
    width: 29.8rem;
  }
}

/* よくある質問ページの見出しだけ黒塗りのSVGなので、白に置き換えて使う */
.p-cta--faq .p-cta__title {
  width: 28rem;
}
@media only screen and (min-width: 768px) {
  .p-cta--faq .p-cta__title {
    width: 48rem;
  }
}
.p-cta--faq .p-cta__title img {
  -webkit-filter: brightness(0) invert(1);
          filter: brightness(0) invert(1);
}

.p-cta__lead {
  margin-top: 3rem;
  color: #fff;
  font-size: 1.4rem;
  line-height: 1.7;
  letter-spacing: 0.02em;
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .p-cta__lead {
    margin-top: 5rem;
    font-size: 1.7rem;
  }
}

.p-cta--faq .p-cta__lead {
  margin-top: 2rem;
}
@media only screen and (min-width: 768px) {
  .p-cta--faq .p-cta__lead {
    margin-top: 5rem;
  }
}

.p-cta__body {
  margin-top: 4rem;
  display: grid;
  grid-template-columns: 1fr;
  margin-inline: auto;
  gap: 4rem;
}
@media only screen and (min-width: 768px) {
  .p-cta__body {
    margin-top: 5rem;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
  }
}

.p-contact-item {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #fff;
}
@media only screen and (min-width: 768px) {
  .p-contact-item:not(:first-child) {
    border-left: 0.2rem solid #fff;
  }
}

.p-contact-item__label {
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0.05em;
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .p-contact-item__label {
    font-size: 2.4rem;
  }
}

.p-contact-item__tel {
  margin-top: 0.4rem;
  font-family: "Oswald", sans-serif;
  font-size: 2.4rem;
  line-height: 1.7;
  letter-spacing: 0;
}
@media only screen and (min-width: 768px) {
  .p-contact-item__tel {
    margin-top: 3.1rem;
    font-size: 3.2rem;
  }
}
.p-contact-item__tel span {
  position: relative;
  display: inline-block;
  padding-left: 3rem;
  white-space: nowrap;
}
@media only screen and (min-width: 768px) {
  .p-contact-item__tel span {
    padding-left: 4rem;
  }
}
.p-contact-item__tel span::before {
  position: absolute;
  top: 54%;
  left: 0;
  width: 2.4rem;
  height: 2.4rem;
  content: "";
  background-color: #fff;
  -webkit-mask-image: url(../img/common/icon_tel.svg);
          mask-image: url(../img/common/icon_tel.svg);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center center;
          mask-position: center center;
  -webkit-mask-size: contain;
          mask-size: contain;
  translate: 0 -50%;
  -webkit-transition: background-color 0.4s ease;
  transition: background-color 0.4s ease;
}
@media only screen and (min-width: 768px) {
  .p-contact-item__tel span::before {
    width: 3.6rem;
    height: 3.6rem;
  }
}

@media (any-hover: hover) {
  .p-contact-item__tel:hover {
    color: #fff;
  }
  .p-contact-item__tel:hover::before {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
}
.p-contact-item .c-btn {
  margin-top: 0.4rem;
}
@media only screen and (min-width: 768px) {
  .p-contact-item .c-btn {
    margin-top: 3rem;
  }
}

/* ------------------------------------------------
p-recommend-slider
おすすめイベントのスライダー一式（トップ・イベント詳細で共用）。
外側の余白は付けない。使う側の親要素（例: .p-top-recommend__slider）で付ける
--------------------------------------------------- */
.p-recommend-slider {
  position: relative;
}
@media only screen and (min-width: 768px) {
  .p-recommend-slider {
    --recommend-card-width: calc((min(89.552238806vw, 1200px) - 6rem) / 3);
    --recommend-slider-width: calc(var(--recommend-card-width) * 3 + 40px);
  }
}

.p-recommend-slider__body {
  position: relative;
  width: 100%;
  overflow: visible;
}

/* 動き始めの粘りをなくす（矢印を押した手応えを出す） */
.p-recommend-slider__body .swiper-wrapper {
  -webkit-transition-timing-function: ease-out;
          transition-timing-function: ease-out;
}

.p-recommend-slider__items {
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  -webkit-transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
          transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

.p-recommend-slider__prev,
.p-recommend-slider__next {
  position: absolute;
  display: grid;
  place-content: center;
  z-index: 2;
  width: 4rem;
  height: 4rem;
  margin-top: 0;
  background-color: #ef5a07;
  border-radius: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
@media only screen and (min-width: 768px) {
  .p-recommend-slider__prev,
  .p-recommend-slider__next {
    width: 8rem;
    height: 8rem;
  }
}

/* SPは slidesPerView: 1.4 / spaceBetween: 20px。
   中央カードの幅は (スライダー幅 - 20px * 0.4) / 1.4 なので、
   カードの左右端は 50% ± (100% - 8px) / 2.8。
   このボタンは translate(-50%, -50%) が効くので left の値＝丸の中心になる */
.p-recommend-slider__prev {
  left: max(4rem, 50% - (100% - 8px) / 2.8);
  padding-right: 0.4rem;
}

.p-recommend-slider__next {
  right: auto;
  left: min(100% - 4rem, 50% + (100% - 8px) / 2.8);
  padding-left: 0.4rem;
}

/* PCはカード3枚ぶんの左右端に置く（イベントのスライダーと同じ関係） */
@media (min-width: 768px) {
  .p-recommend-slider__prev {
    left: calc(50% - var(--recommend-slider-width) / 2 - 0.4rem);
  }
  .p-recommend-slider__next {
    left: calc(50% + var(--recommend-slider-width) / 2 + 0.4rem);
  }
}
.p-recommend-slider__prev::after,
.p-recommend-slider__next::after {
  content: none !important;
}

.p-recommend-slider__prev span,
.p-recommend-slider__next span {
  display: block;
  width: 0.9rem;
  height: 1.5rem;
  -webkit-mask-image: url(../img/common/arrow.svg);
          mask-image: url(../img/common/arrow.svg);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center center;
          mask-position: center center;
  -webkit-mask-size: contain;
          mask-size: contain;
  background-color: #fff;
}
@media only screen and (min-width: 768px) {
  .p-recommend-slider__prev span,
  .p-recommend-slider__next span {
    width: 1.8rem;
    height: 3rem;
  }
}

.p-recommend-slider__prev span {
  -webkit-transform: scaleX(-1);
          transform: scaleX(-1);
}

/* ------------------------------------------------
p-recommend-card
--------------------------------------------------- */
.p-recommend-card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: auto;
}
@media only screen and (min-width: 768px) {
  .p-recommend-card {
    width: var(--recommend-card-width);
  }
}

.p-recommend-card a {
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100%;
  background-color: #fff;
  border-radius: 2rem;
}
@media only screen and (min-width: 768px) {
  .p-recommend-card a {
    border-radius: 6rem;
  }
}

.p-recommend-card__img {
  overflow: hidden;
}

.p-recommend-card__img img {
  width: 100%;
  height: auto;
  aspect-ratio: 380/220;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: top center;
     object-position: top center;
}
@media only screen and (min-width: 768px) {
  .p-recommend-card__img img {
    -webkit-transition: -webkit-transform 0.3s ease;
    transition: -webkit-transform 0.3s ease;
    transition: transform 0.3s ease;
    transition: transform 0.3s ease, -webkit-transform 0.3s ease;
  }
}

.p-recommend-card__body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
  padding: 2rem 1.6rem;
}
@media only screen and (min-width: 768px) {
  .p-recommend-card__body {
    gap: 1.6rem;
    padding: 2.4rem 3.2rem 3rem;
  }
}

.p-recommend-card__block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 0.6rem;
}
@media only screen and (min-width: 768px) {
  .p-recommend-card__block {
    gap: 0.8rem;
  }
}

.p-recommend-card__title {
  display: -webkit-box;
  overflow: hidden;
  min-height: 5.1rem;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
@media only screen and (min-width: 768px) {
  .p-recommend-card__title {
    font-size: 2rem;
    min-height: 6rem;
    -webkit-transition: color 0.3s ease;
    transition: color 0.3s ease;
  }
}

@media (any-hover: hover) {
  .p-recommend-card a:hover .p-recommend-card__img img {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
  .p-recommend-card a:hover .p-recommend-card__title {
    color: #41c4ba;
  }
}
.p-recommend-card__daytime {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.3rem;
}
@media only screen and (min-width: 768px) {
  .p-recommend-card__daytime {
    gap: 0.5rem;
  }
}

.p-recommend-card__day {
  font-size: 1.6rem;
  line-height: 1.5;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
@media only screen and (min-width: 768px) {
  .p-recommend-card__day {
    font-size: 1.7rem;
  }
}

/* 繰り返し開催のイベントは、直近1回＋残りの数だけ出す（カードの高さを変えないため） */
.p-recommend-card__more {
  font-size: 1.2rem;
  line-height: 1.5;
  letter-spacing: 0.05em;
}
@media only screen and (min-width: 768px) {
  .p-recommend-card__more {
    font-size: 1.3rem;
  }
}

.p-recommend-card__time {
  font-family: "Comfortaa", sans-serif;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.05em;
}
@media only screen and (min-width: 768px) {
  .p-recommend-card__time {
    font-size: 1.7rem;
  }
}

/* ------------------------------------------------
inview
--------------------------------------------------- */
.js-fadeUp {
  opacity: 0;
  -webkit-transform: translateY(3rem);
          transform: translateY(3rem);
  -webkit-transition: opacity 1.5s, -webkit-transform 1.5s;
  transition: opacity 1.5s, -webkit-transform 1.5s;
  transition: opacity 1.5s, transform 1.5s;
  transition: opacity 1.5s, transform 1.5s, -webkit-transform 1.5s;
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}

.js-fadeUp.is-inview {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

/* ------------------------------------------------
FVタイトル（読み込み直後に出す。JSが動く前の一瞬の表示を防ぐ）
--------------------------------------------------- */
.js-fv-catch {
  opacity: 0;
}

/* JSが動いた後はGSAPのインラインスタイルに任せる。JS無し・動きを減らす設定のときはそのまま表示 */
.js-fv-catch.is-shown {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .js-fv-catch {
    opacity: 1;
  }
}
/* ------------------------------------------------
ガイドボタン（FVの「たんけんしよう」とご利用案内。全体が画面に入り切ってから出す。JSが動く前の一瞬の表示を防ぐ）
--------------------------------------------------- */
.js-guide-btn {
  opacity: 0;
}

.js-guide-btn.is-shown {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .js-guide-btn {
    opacity: 1;
  }
}
/* page */
/* ------------------------------------------------
p-top
--------------------------------------------------- */
.p-top {
  padding-top: 8rem;
}
@media only screen and (min-width: 768px) {
  .p-top {
    padding-top: 11rem;
  }
}

/* ------------------------------------------------
p-top-fv
--------------------------------------------------- */
.p-top-fv {
  position: relative;
  padding-block: 6.4rem 8rem;
  height: calc(89.5rem + (100vw - 37.5rem) * 0.775);
}
@media only screen and (min-width: 768px) {
  .p-top-fv {
    /* 下余白。サークル（.p-top-fv__monument）は幅が min(vw(1760,1440), 200rem) で
       画面幅に比例して縮むため、狭くなるほど絵の下端が上がり、おしらせ見出しとの空白が広がる。
       実測（回転1周の平均）では 1440px の 230px に対し 1160px で 518px と2倍以上になっていた。
       目標は 1024px での 40rem。狭い画面ほど rem も縮む（768px で 6.62px）ため、
       px ではなく rem 換算でそろえないと、狭い画面だけ相対的に広く見える。
       サークルは FV の高さの 44% に置かれているため下余白を削るとサークルも上がる。
       打ち消し合いを含めてブラウザ上で実測し、必要値に合わせた3直線が下の式。
         1490px 以上 …… 30rem（公開時と同じ）
         1490→1180px … 300px → 0 へ落とす（156vw - 1847px）
         1160→1100px … 0（ここが一番サークルが上がる）
         1100→1010px … 0 → 66px へ戻す（803px - 73vw）
         1010→768px … 66px → 135px へゆるやかに戻す（354px - 28.5vw） */
    padding-block: 6rem min(30rem, max(0px, min(803px - 73vw, 354px - 28.5vw), 156vw - 1847px));
    height: auto;
  }
}

.p-top-fv__hours {
  position: relative;
  z-index: 3;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
  padding-inline: 2rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
  border-left: 0.4rem solid #41c4ba;
  border-right: 0.4rem solid #41c4ba;
}
@media only screen and (min-width: 768px) {
  .p-top-fv__hours {
    gap: 1.6rem;
    margin-right: initial;
    margin-left: auto;
    padding-inline: 2rem 6rem;
    border-right: none;
    border-left: 0.8rem solid #41c4ba;
  }
}

.p-top-fv__label {
  font-size: 1.7rem;
  font-weight: 700;
}
@media only screen and (min-width: 768px) {
  .p-top-fv__label {
    font-size: 2.4rem;
  }
}

.p-top-fv__time {
  font-family: "Oswald", sans-serif;
  color: #41c4ba;
  padding-left: 0.3rem;
  font-size: 1.9rem;
}
@media only screen and (min-width: 768px) {
  .p-top-fv__time {
    font-size: 3.2rem;
  }
}

/* 休館日は日本語なので、開館時間の英数字用フォントから切り替える */
.p-top-fv__time--closed {
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 700;
}

.p-top-fv__contents {
  position: relative;
  width: 100%;
  margin-inline: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  /* OK: 下の余白が下端のボタンの位置を決める。SPは画面の高さで動かさないので、リード文との間隔もどの端末でも変わらない */
  padding-block: 6rem 47rem;
  /* OK: 影は中の見出しとリード文に個別で持たせる。箱ごとぼかすと中身を丸ごと焼き直すので重い。
     ここに filter / isolation を置くと重なりの基準ができて、中にいる deco を枠側のモニュメントより下へ回せなくなるので置かない */
}
@media only screen and (min-width: 768px) {
  .p-top-fv__contents {
    padding-block: 12rem;
    max-width: 144rem;
    padding-bottom: 60rem;
  }
}

.p-top-fv__monument {
  position: absolute;
  z-index: -1;
  /* OK: 見出しの下、リード文の左に置く位置 */
  top: 52rem;
  left: -4rem;
  width: calc(50rem + (100vw - 37.5rem) * 1.55);
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  opacity: 0.9;
}
@media only screen and (min-width: 768px) {
  .p-top-fv__monument {
    bottom: -38rem;
    /* サークルの縦位置。小さくすると上へ上がる（52% が公開時の値） */
    top: 44%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    /* サークルの横位置。上げると人形の顔が見出しの後ろに来るので、その分だけ左へ逃がす。
       絵の濃さは変えずに見出しの背後を空ける（-90rem が公開時の値）。
       rem は 1160px で 10px に頭打ちになるのに絵の幅は画面幅に比例するため、
       -104rem だけで置くと狭い画面ほど絵が左へ流れる（768px で右端が画面の33%まで後退していた）。
       1440px での位置を vw に直したものと大きいほうを取り、どの幅でも右端が画面の55%あたりに来るようにする */
    left: max(-66.6666666667vw, -96rem);
    width: min(122.2222222222vw, 200rem);
  }
}

.p-top-fv__catch {
  position: relative;
  z-index: 5;
  text-align: center;
  /* OK: 30rem / 51rem の 0.9 倍。少し小さくして絵とのバランスをとる */
  width: 27rem;
  /* OK: 背景色と同じ影を重ねて文字のまわりを抜く。0 0 は全方向、0 .4rem は下側を厚くする分 */
}
@media only screen and (min-width: 768px) {
  .p-top-fv__catch {
    width: 45.9rem;
    /* OK: 45.65rem は上端からこの見出しの中心までの距離。引くと中心が画面の高さの中央に来る（周りの位置は動かさない）。
       さらに 5rem 足して、中央よりその分だけ上に置く。
       見出しを 0.9 倍にして中心が 1.05rem 上がったので、その分もここで引いてある。
       画面がとても高いときはリード文に近づきすぎるので、下げる量は 6.6rem までにする */
    top: min(6.6rem, 50dvh - 50.65rem);
  }
}

.p-top-fv__lead {
  position: relative;
  margin-top: 4rem;
  -ms-flex-item-align: end;
      align-self: flex-end;
  padding-right: 1.6rem;
}
@media only screen and (min-width: 768px) {
  .p-top-fv__lead {
    margin-top: 20rem;
    padding-right: 15rem;
  }
}
.p-top-fv__lead p {
  position: relative;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.6;
}
@media only screen and (min-width: 768px) {
  .p-top-fv__lead p {
    font-size: 1.9rem;
    line-height: 1.8;
  }
}

.p-top-fv__deco {
  position: absolute;
  /* OK: モニュメント（-1）より下。ストライプはコラージュの下に潜る */
  z-index: -2;
  bottom: -11rem;
  right: -20rem;
  width: 40rem;
}
@media only screen and (min-width: 768px) {
  .p-top-fv__deco {
    bottom: -16rem;
    right: -20rem;
    width: 80rem;
  }
}

.p-top-fv__circle {
  /* OK: リード文の後ろに敷くグレーの面。三角の装飾と、リード文の文字と、どちらとも中心をずらして重ねる。
     位置は三角（.p-top-fv__deco）の左上を基準にした値。三角もリード文も同じ枠の右端をたよりに置いているので、
     画面幅が変わっても三者の重なりかたは変わらない */
  position: absolute;
  display: block;
  top: 9.4rem;
  left: -2.5rem;
  width: 21rem;
  /* OK: 下にあるものと掛け合わせて濃くする。白い部分は素通しになるので、面で塗りつぶしたようにならない */
  mix-blend-mode: multiply;
  opacity: 0.3;
}
@media only screen and (min-width: 768px) {
  .p-top-fv__circle {
    top: 28.1rem;
    left: 7.5rem;
    width: 50rem;
  }
}

.p-top-fv__btn {
  position: absolute;
  bottom: 0;
  right: 1rem;
}
@media only screen and (min-width: 768px) {
  .p-top-fv__btn {
    right: 10rem;
  }
}

/* ------------------------------------------------
p-top-news
--------------------------------------------------- */
.p-top-news {
  padding-block: 4rem 15rem;
  /* 上の余白。FVのサークルは画面幅に比例して大きくなり、そのぶん絵の下端が下がってくる。
     絵の下端から「Information」までの空きがどの画面幅でも同じくらいになるよう、
     画面が広くなるほど上の余白を足していく。
     ある幅で「空きが広い」と思ったら、その幅が入る段の rem を小さくすれば見出しが上がる */
}
@media only screen and (min-width: 768px) {
  .p-top-news {
    padding-block: 0 30rem;
    /* 768px〜 */
  }
}
@media (min-width: 900px) {
  .p-top-news {
    padding-top: 6rem;
  }
}
@media (min-width: 1024px) {
  .p-top-news {
    padding-top: 16rem;
  }
}
@media (min-width: 1100px) {
  .p-top-news {
    padding-top: 16rem;
  }
}
@media (min-width: 1280px) {
  .p-top-news {
    padding-top: 14rem;
  }
}
@media (min-width: 1440px) {
  .p-top-news {
    padding-top: 20rem;
  }
}
@media (min-width: 1600px) {
  .p-top-news {
    padding-top: 40rem;
  }
}

.p-top-news__contents {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  margin-inline: auto;
}
@media only screen and (min-width: 768px) {
  .p-top-news__contents {
    max-width: 80rem;
  }
}

@media only screen and (min-width: 768px) {
  .p-top-news__title {
    width: 39.4rem;
  }
}

.p-top-emergency {
  width: 100%;
  margin-top: 4rem;
}
@media only screen and (min-width: 768px) {
  .p-top-emergency {
    margin-top: 6.4rem;
  }
}

.p-top-emergency__title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 1rem;
  min-height: 4.4rem;
  padding-inline: 1.6rem;
  background-color: #e43030;
  border-radius: 1.2rem 1.2rem 0 0;
}
@media only screen and (min-width: 768px) {
  .p-top-emergency__title {
    gap: 1.5rem;
    min-height: 5.4rem;
    padding-inline: 2rem;
    border-radius: 2rem 2rem 0 0;
  }
}

.p-top-emergency__icon {
  width: 2.4rem;
  height: auto;
}
@media only screen and (min-width: 768px) {
  .p-top-emergency__icon {
    width: 4rem;
  }
}

.p-top-emergency__text {
  width: 13rem;
  height: auto;
}
@media only screen and (min-width: 768px) {
  .p-top-emergency__text {
    width: 21.6rem;
  }
}

.p-top-emergency__list {
  padding: 1.6rem;
  background-color: #fff;
  border-right: 0.5rem solid #e43030;
  border-bottom: 0.5rem solid #e43030;
  border-left: 0.5rem solid #e43030;
  border-radius: 0 0 1.2rem 1.2rem;
}
@media only screen and (min-width: 768px) {
  .p-top-emergency__list {
    padding: 2rem 4rem;
    border-right-width: 0.8rem;
    border-bottom-width: 0.8rem;
    border-left-width: 0.8rem;
    border-radius: 0 0 2rem 2rem;
  }
}

.p-top-emergency__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.8rem;
  font-size: 1.4rem;
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: #020202;
}
@media only screen and (min-width: 768px) {
  .p-top-emergency__item {
    gap: 1rem;
    font-size: 1.7rem;
  }
}
.p-top-emergency__item span {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
}

.p-top-emergency__item + .p-top-emergency__item {
  margin-top: 1rem;
}

.p-top-emergency__item::before {
  content: "";
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 0.8rem;
  height: 0.8rem;
  margin-top: 0.8rem;
  background-color: #e43030;
  border-radius: 100%;
}
@media only screen and (min-width: 768px) {
  .p-top-emergency__item::before {
    width: 1.2rem;
    height: 1.2rem;
    margin-top: 1rem;
  }
}

.p-top-news__items {
  margin-top: 4rem;
  width: 100%;
}
@media only screen and (min-width: 768px) {
  .p-top-news__items {
    margin-top: 6.4rem;
  }
}

.p-top-news__btn {
  margin-top: 5rem;
}
@media only screen and (min-width: 768px) {
  .p-top-news__btn {
    margin-top: 6rem;
  }
}

/* ------------------------------------------------
p-top-event
--------------------------------------------------- */
.p-top-event {
  position: relative;
  padding-block: 10rem 22rem;
  background-color: #ffde38;
}
@media only screen and (min-width: 768px) {
  .p-top-event {
    padding-block: 16rem 42rem;
  }
}
.p-top-event::before {
  content: "";
  position: absolute;
  bottom: calc(100% - 1px);
  left: 0;
  width: 100%;
  height: 7rem;
  /* 同じ絵を2枚敷き、2枚目を 6px ずらしてある。
     Safari は絵を「指定した枠より左右それぞれ約2.5px内側」にしか描かないので、
     1枚だけ繰り返すと継ぎ目に隙間（下地の色の縦線）が出る。
     2枚目をずらしておくと、その隙間を2枚目の本体が塞ぐ。
     ずらし量は実測で決めた（4px以下だと隙間が残り、5px以上で消える）。
     位置を変えたいときは background-position ではなく --cloud-x を書き換えること */
  --cloud-w: 67.2rem;
  --cloud-x: calc(50% + 2rem);
  background-image: url(../img/common/cloud_yellow.svg), url(../img/common/cloud_yellow.svg);
  background-repeat: repeat-x;
  background-size: var(--cloud-w) 100%;
  background-position: var(--cloud-x) bottom, calc(var(--cloud-x) + 6px) bottom;
}
@media only screen and (min-width: 768px) {
  .p-top-event::before {
    height: 18rem;
    --cloud-w: 172.8rem;
    --cloud-x: 50%;
  }
}

.p-top-event__lamp {
  position: absolute;
  z-index: 0;
  top: -9rem;
  left: 50%;
  width: 8rem;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  pointer-events: none;
}
@media only screen and (min-width: 768px) {
  .p-top-event__lamp {
    top: -13rem;
    width: 11rem;
  }
}

.p-top-event__shine {
  position: absolute;
  z-index: 0;
  top: 7rem;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 20rem;
  pointer-events: none;
  opacity: 0;
}
@media only screen and (min-width: 768px) {
  .p-top-event__shine {
    top: 9rem;
    width: 32rem;
  }
}

.p-top-event__shine.is-shown {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .p-top-event__shine {
    opacity: 1;
  }
}
/* 蛇口のモニュメント（セクション左下・左端は画面外へはみ出す）
   位置の基準は下端。青い波（.p-top-recommend::before）の下端＝セクション境界からの距離で置く */
.p-top-event__water {
  position: absolute;
  z-index: 0;
  bottom: 5rem;
  left: -3.8rem;
  width: 15.6rem;
  pointer-events: none;
}
@media only screen and (min-width: 768px) {
  .p-top-event__water {
    bottom: 16rem;
    left: -3.7rem;
    width: 30rem;
  }
}

/* 水滴（蛇口の吐水口＝画像の左上から幅90% / 高さ59.7% の位置に置く） */
.p-top-event__drops {
  position: absolute;
  top: 60.2%;
  left: 90.7%;
  --drop-fall: 4.5rem;
}
@media only screen and (min-width: 768px) {
  .p-top-event__drops {
    top: 59.7%;
    left: 90%;
    --drop-fall: 11rem;
  }
}
.p-top-event__drops span {
  position: absolute;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  opacity: 0;
  -webkit-transform-origin: 50% 0;
          transform-origin: 50% 0;
  -webkit-animation: water-drop 1.5s linear infinite;
          animation: water-drop 1.5s linear infinite;
}
.p-top-event__drops span:nth-child(1) {
  top: 0;
  left: 0;
  width: 1.27rem;
  height: 2.45rem;
  background-image: url(../img/top/deco_mizu03.svg);
  --drop-drift: 0;
}
@media only screen and (min-width: 768px) {
  .p-top-event__drops span:nth-child(1) {
    left: 0.5rem;
    width: 1.87rem;
    height: 3.6rem;
  }
}
.p-top-event__drops span:nth-child(2) {
  top: 0.34rem;
  left: 0;
  width: 1.32rem;
  height: 1.94rem;
  background-image: url(../img/top/deco_mizu03.svg);
  --drop-scale: .8;
  --drop-drift: .12;
  -webkit-animation-delay: 0.7s;
          animation-delay: 0.7s;
}
@media only screen and (min-width: 768px) {
  .p-top-event__drops span:nth-child(2) {
    top: 0.5rem;
    left: 0.5rem;
    width: 1.94rem;
    height: 2.85rem;
  }
}

@-webkit-keyframes water-drop {
  /* 蛇口の先でふくらむ */
  0% {
    opacity: 0;
    -webkit-transform: translate(0, 0) scale(0.4);
            transform: translate(0, 0) scale(0.4);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  6% {
    opacity: 1;
    -webkit-transform: translate(0, 0) scale(1);
            transform: translate(0, 0) scale(1);
  }
  /* 少し留まってから落ちる（落下は加速させる） */
  12% {
    opacity: 1;
    -webkit-transform: translate(0, 0) scale(1);
            transform: translate(0, 0) scale(1);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  /* 落ちている時間は1周期の63%＝0.945秒。周期を縮めても落下の速さは変わらない */
  75% {
    opacity: 1;
    -webkit-transform: translate(calc(var(--drop-fall) * var(--drop-drift, 0)), calc(var(--drop-fall) * var(--drop-scale, 1))) scale(1);
            transform: translate(calc(var(--drop-fall) * var(--drop-drift, 0)), calc(var(--drop-fall) * var(--drop-scale, 1))) scale(1);
  }
  /* 落ち切った瞬間に消す（じわっと薄くならないよう、ほぼ一瞬で0にする）。
     そのあとは次の滴が出るまで待つ（0.375秒） */
  75.5% {
    opacity: 0;
    -webkit-transform: translate(calc(var(--drop-fall) * var(--drop-drift, 0)), calc(var(--drop-fall) * var(--drop-scale, 1))) scale(1);
            transform: translate(calc(var(--drop-fall) * var(--drop-drift, 0)), calc(var(--drop-fall) * var(--drop-scale, 1))) scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate(calc(var(--drop-fall) * var(--drop-drift, 0)), calc(var(--drop-fall) * var(--drop-scale, 1))) scale(1);
            transform: translate(calc(var(--drop-fall) * var(--drop-drift, 0)), calc(var(--drop-fall) * var(--drop-scale, 1))) scale(1);
  }
}

@keyframes water-drop {
  /* 蛇口の先でふくらむ */
  0% {
    opacity: 0;
    -webkit-transform: translate(0, 0) scale(0.4);
            transform: translate(0, 0) scale(0.4);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  6% {
    opacity: 1;
    -webkit-transform: translate(0, 0) scale(1);
            transform: translate(0, 0) scale(1);
  }
  /* 少し留まってから落ちる（落下は加速させる） */
  12% {
    opacity: 1;
    -webkit-transform: translate(0, 0) scale(1);
            transform: translate(0, 0) scale(1);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  /* 落ちている時間は1周期の63%＝0.945秒。周期を縮めても落下の速さは変わらない */
  75% {
    opacity: 1;
    -webkit-transform: translate(calc(var(--drop-fall) * var(--drop-drift, 0)), calc(var(--drop-fall) * var(--drop-scale, 1))) scale(1);
            transform: translate(calc(var(--drop-fall) * var(--drop-drift, 0)), calc(var(--drop-fall) * var(--drop-scale, 1))) scale(1);
  }
  /* 落ち切った瞬間に消す（じわっと薄くならないよう、ほぼ一瞬で0にする）。
     そのあとは次の滴が出るまで待つ（0.375秒） */
  75.5% {
    opacity: 0;
    -webkit-transform: translate(calc(var(--drop-fall) * var(--drop-drift, 0)), calc(var(--drop-fall) * var(--drop-scale, 1))) scale(1);
            transform: translate(calc(var(--drop-fall) * var(--drop-drift, 0)), calc(var(--drop-fall) * var(--drop-scale, 1))) scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate(calc(var(--drop-fall) * var(--drop-drift, 0)), calc(var(--drop-fall) * var(--drop-scale, 1))) scale(1);
            transform: translate(calc(var(--drop-fall) * var(--drop-drift, 0)), calc(var(--drop-fall) * var(--drop-scale, 1))) scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .p-top-event__drops span {
    -webkit-animation: none;
            animation: none;
  }
  .p-top-event__drops span:nth-child(1) {
    opacity: 1;
  }
}
/* 泳ぐこどもたち（黄色背景の下の階層に隠し、JSで斜め右上へ移動させる） */
.p-top-event__swim {
  position: absolute;
  z-index: -2;
  top: -50.1rem;
  left: -20%;
  width: 30rem;
  pointer-events: none;
  will-change: transform;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  /* 泳ぎ出すまでは見せない。静止位置は画面内にあるため、隠さないと一度見えてしまう */
  visibility: hidden;
}
@media only screen and (min-width: 768px) {
  .p-top-event__swim {
    /* 上下位置。top を動かすと始点と終点が同じだけずれるので、泳ぐ角度は変わらない。
       おしらせの帯は狭い画面ほど縮むのに、min(...) の式は逆に上へ押し上げるため、
       帯の中での泳ぎ出し位置が 1024px で33%、768px で0%まで上がってしまう。
       1024px の位置（帯の33%）を下限として、それ以下でも同じ高さを保つ。
       1024px 超は min(...) がそのまま採用されるので、公開時と同じ値のまま。 */
    top: max(min(-55.7rem, -55.7rem - (1440px - 100vw) * 0.45), 165px - 82.4vw);
    width: min(38.8888888889vw, 56rem);
  }
}
.p-top-event__swim img {
  rotate: -10deg;
}
@media only screen and (min-width: 768px) {
  .p-top-event__swim img {
    rotate: 4deg;
  }
}

.p-top-event__swim.is-swimming {
  /* 泳ぎ出す瞬間には画面左外（0%の位置）にいるので、ここで見せて問題ない */
  visibility: visible;
  /* 壁を蹴って伏し浮きで進むイメージ。蹴った瞬間に一気に伸び、あとは惰性ですーっと滑る。
     画面外へ抜けるので終点で止める必要がなく、抜ける瞬間まで勢いを残したカーブにしている */
  -webkit-animation: swim var(--swim-duration, 9s) cubic-bezier(0.08, 0.7, 0.6, 0.85) infinite;
          animation: swim var(--swim-duration, 9s) cubic-bezier(0.08, 0.7, 0.6, 0.85) infinite;
}
@media only screen and (min-width: 768px) {
  .p-top-event__swim.is-swimming {
    /* 泳ぎ出しの一蹴り。立ち上がりを急にしすぎると画面に入った瞬間だけ極端に速くなり、
       見るタイミングで速さの印象が変わってしまうので、1つ目の数値で立ち上がりを鈍らせている */
    -webkit-animation-timing-function: cubic-bezier(0.08, 0.7, 0.6, 0.8);
            animation-timing-function: cubic-bezier(0.08, 0.7, 0.6, 0.8);
  }
}

@-webkit-keyframes swim {
  0% {
    -webkit-transform: translate3d(var(--swim-from-x, 0), var(--swim-from-y, 0), 0);
            transform: translate3d(var(--swim-from-x, 0), var(--swim-from-y, 0), 0);
  }
  /* 画面の右外へ抜けきる。この 45% は JS の swimMoveShare と揃える
     （ずらすと泳ぐ速さが変わる） */
  45% {
    -webkit-transform: translate3d(var(--swim-to-x, 0), var(--swim-to-y, 0), 0);
            transform: translate3d(var(--swim-to-x, 0), var(--swim-to-y, 0), 0);
  }
  /* 次の周まで画面の外で待つ。巻き戻しも画面外で起きるので不自然に見えない */
  100% {
    -webkit-transform: translate3d(var(--swim-to-x, 0), var(--swim-to-y, 0), 0);
            transform: translate3d(var(--swim-to-x, 0), var(--swim-to-y, 0), 0);
  }
}

@keyframes swim {
  0% {
    -webkit-transform: translate3d(var(--swim-from-x, 0), var(--swim-from-y, 0), 0);
            transform: translate3d(var(--swim-from-x, 0), var(--swim-from-y, 0), 0);
  }
  /* 画面の右外へ抜けきる。この 45% は JS の swimMoveShare と揃える
     （ずらすと泳ぐ速さが変わる） */
  45% {
    -webkit-transform: translate3d(var(--swim-to-x, 0), var(--swim-to-y, 0), 0);
            transform: translate3d(var(--swim-to-x, 0), var(--swim-to-y, 0), 0);
  }
  /* 次の周まで画面の外で待つ。巻き戻しも画面外で起きるので不自然に見えない */
  100% {
    -webkit-transform: translate3d(var(--swim-to-x, 0), var(--swim-to-y, 0), 0);
            transform: translate3d(var(--swim-to-x, 0), var(--swim-to-y, 0), 0);
  }
}
.p-top-event__inner {
  position: relative;
  z-index: 1;
}

.p-top-event__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-inline: auto;
  gap: 3rem;
}
@media only screen and (min-width: 768px) {
  .p-top-event__head {
    max-width: 110rem;
    gap: 4rem;
  }
}

.p-top-event__title {
  position: relative;
}
@media only screen and (min-width: 768px) {
  .p-top-event__title {
    width: 43rem;
  }
}

.p-top-event__ageha {
  display: block;
  position: absolute;
  top: -3.2rem;
  left: -2rem;
  width: 4rem;
  pointer-events: none;
}
@media only screen and (min-width: 768px) {
  .p-top-event__ageha {
    top: -6.5rem;
    left: -4rem;
    width: 6.8rem;
  }
}

/* ジャコウアゲハ｜羽を閉じたコマ（ageha01）と広げたコマ（ageha02）を交互に出して羽ばたかせる。
   2枚は中心をそろえて重ね、箱を正方形にすることで開閉しても胴体の位置がずれないようにする */
.p-ageha__inner {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 1/1;
}

.p-ageha__img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

/* 羽を広げたコマは、同じ蝶に見えるよう羽の分だけ大きく出す */
.p-ageha__img--down {
  width: 132%;
  opacity: 0;
}

.p-ageha.is-flying .p-ageha__img--up {
  -webkit-animation: ageha-flap-up 0.6s linear infinite;
          animation: ageha-flap-up 0.6s linear infinite;
}

.p-ageha.is-flying .p-ageha__img--down {
  -webkit-animation: ageha-flap-down 0.6s linear infinite;
          animation: ageha-flap-down 0.6s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .p-ageha.is-flying .p-ageha__img--up,
  .p-ageha.is-flying .p-ageha__img--down {
    -webkit-animation: none;
            animation: none;
  }
}
/* 2枚をパッと入れ替える（中間の半透明を出さないよう、切り替わる位置で値を持たせる）。
   羽を広げたコマを長めに見せて、ゆっくり打ち下ろして滑空しているように見せる */
@-webkit-keyframes ageha-flap-up {
  0%, 41.99% {
    opacity: 1;
  }
  42%, 100% {
    opacity: 0;
  }
}
@keyframes ageha-flap-up {
  0%, 41.99% {
    opacity: 1;
  }
  42%, 100% {
    opacity: 0;
  }
}
@-webkit-keyframes ageha-flap-down {
  0%, 41.99% {
    opacity: 0;
  }
  42%, 100% {
    opacity: 1;
  }
}
@keyframes ageha-flap-down {
  0%, 41.99% {
    opacity: 0;
  }
  42%, 100% {
    opacity: 1;
  }
}
.p-top-event__body {
  position: relative;
  margin-top: 3rem;
}
@media only screen and (min-width: 768px) {
  .p-top-event__body {
    margin-top: 5.6rem;
    --event-slider-width: min(89.552238806vw, 1200px);
  }
}

.p-top-event__closed {
  font-size: 2rem;
  text-align: center;
  color: #fff;
}
@media only screen and (min-width: 768px) {
  .p-top-event__closed {
    font-size: 2.4rem;
  }
}

.p-top-event__items {
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}

.p-top-event__items .p-event-card {
  height: auto;
}

.p-event-card {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100%;
  overflow: hidden;
  background-color: #FAF7F3;
  border-radius: 2rem;
}
@media only screen and (min-width: 768px) {
  .p-event-card {
    border-radius: 6rem;
  }
}

.p-event-card__info {
  margin-top: auto;
  padding-top: 0.2rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.4rem;
}

.p-event-card__time {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 1rem;
}
.p-event-card__time span:nth-child(1) {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  line-height: 1.5;
}
.p-event-card__time span:nth-child(2) {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
}
@media only screen and (min-width: 768px) {
  .p-event-card__time span:nth-child(2) {
    font-size: 1.7rem;
  }
}

.p-event-card__place {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 1rem;
}
.p-event-card__place span:nth-child(1) {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  line-height: 1.5;
}
.p-event-card__place span:nth-child(2) {
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.5;
}
@media only screen and (min-width: 768px) {
  .p-event-card__place span:nth-child(2) {
    font-size: 1.7rem;
  }
}
.p-event-card__place a {
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.5;
  position: relative;
  color: #41c4ba;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
@media only screen and (min-width: 768px) {
  .p-event-card__place a {
    font-size: 1.7rem;
  }
}
@media (any-hover: hover) {
  .p-event-card__place a:hover {
    opacity: 0.7;
  }
}

.p-event-card__img {
  overflow: hidden;
}

.p-event-card__img img {
  width: 100%;
  height: auto;
  aspect-ratio: 380/220;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: top center;
     object-position: top center;
}
@media only screen and (min-width: 768px) {
  .p-event-card__img img {
    -webkit-transition: -webkit-transform 0.3s ease;
    transition: -webkit-transform 0.3s ease;
    transition: transform 0.3s ease;
    transition: transform 0.3s ease, -webkit-transform 0.3s ease;
  }
}

.p-event-card__body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.6rem;
  padding: 2rem 1.6rem;
}
@media only screen and (min-width: 768px) {
  .p-event-card__body {
    gap: 0.8rem;
    padding: 2rem 3.2rem 2.4rem;
  }
}

.p-event-card__title {
  display: -webkit-box;
  overflow: hidden;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
@media only screen and (min-width: 768px) {
  .p-event-card__title {
    font-size: 2rem;
  }
}

.p-event-card--standing .p-event-card__title {
  -webkit-line-clamp: 2;
}

/* 説明文（常設のカードだけに出る） */
.p-event-card__desc {
  font-size: 1.4rem;
  line-height: 1.4;
}
@media only screen and (min-width: 768px) {
  .p-event-card__desc {
    font-size: 1.7rem;
  }
}

@media only screen and (min-width: 768px) {
  .p-event-card__title a {
    -webkit-transition: color 0.3s ease;
    transition: color 0.3s ease;
  }
}

@media (any-hover: hover) {
  .p-event-card:has(.p-event-card__img a:hover, .p-event-card__title a:hover) .p-event-card__img img {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
  .p-event-card:has(.p-event-card__img a:hover, .p-event-card__title a:hover) .p-event-card__title a {
    color: #41c4ba;
  }
}
.p-top-event__btn {
  margin-top: 6rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media only screen and (min-width: 768px) {
  .p-top-event__btn {
    margin-top: 12rem;
  }
}

.p-top-event__slider {
  overflow: hidden;
  margin-inline: auto;
}
@media only screen and (min-width: 768px) {
  .p-top-event__slider {
    width: var(--event-slider-width);
  }
}

.p-top-event__slider:not(.swiper-initialized) {
  overflow: visible;
}

/* 動き始めの粘りをなくす。ease だと押しても最初の0.2秒ほぼ動かず、
   矢印を押した手応えがないため */
.p-top-event__slider .swiper-wrapper {
  -webkit-transition-timing-function: ease-out;
          transition-timing-function: ease-out;
}

.p-top-event__slider:not(.swiper-initialized) .p-top-event__items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 2rem;
}

.p-top-event__slider:not(.swiper-initialized) .p-event-card {
  width: 100%;
}

@media (min-width: 768px) {
  .p-top-event__slider:not(.swiper-initialized) .p-top-event__items {
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    gap: 3rem;
  }
  .p-top-event__slider:not(.swiper-initialized) .p-event-card {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 0px;
            flex: 1 1 0;
    min-width: 0;
    max-width: 38rem;
  }
}
.p-top-event__body .swiper-button-prev,
.p-top-event__body .swiper-button-next {
  position: absolute;
  display: none;
  place-content: center;
  z-index: 2;
  width: 4rem;
  height: 4rem;
  margin-top: 0;
  background-color: #ef5a07;
  border-radius: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  top: 50%;
}
@media only screen and (min-width: 768px) {
  .p-top-event__body .swiper-button-prev,
  .p-top-event__body .swiper-button-next {
    width: 8rem;
    height: 8rem;
  }
}

.p-top-event__body.is-slider-active .swiper-button-prev,
.p-top-event__body.is-slider-active .swiper-button-next {
  display: grid;
}

.p-top-event__body .swiper-button-prev {
  left: -0.4rem;
  padding-right: 0.4rem;
}
@media only screen and (min-width: 768px) {
  .p-top-event__body .swiper-button-prev {
    left: calc(50% - var(--event-slider-width) / 2 - 0.4rem);
  }
}

.p-top-event__body .swiper-button-next {
  left: calc(100% + 0.4rem);
  right: auto;
  padding-left: 0.4rem;
}
@media only screen and (min-width: 768px) {
  .p-top-event__body .swiper-button-next {
    left: calc(50% + var(--event-slider-width) / 2 + 0.4rem);
  }
}

.p-top-event__body .swiper-button-prev::after,
.p-top-event__body .swiper-button-next::after {
  content: none !important;
}

.p-top-event__body .swiper-button-prev span,
.p-top-event__body .swiper-button-next span {
  display: block;
  width: 0.9rem;
  height: 1.5rem;
  -webkit-mask-image: url(../img/common/arrow.svg);
          mask-image: url(../img/common/arrow.svg);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center center;
          mask-position: center center;
  -webkit-mask-size: contain;
          mask-size: contain;
  background-color: #fff;
}
@media only screen and (min-width: 768px) {
  .p-top-event__body .swiper-button-prev span,
  .p-top-event__body .swiper-button-next span {
    width: 1.8rem;
    height: 3rem;
  }
}

.p-top-event__body .swiper-button-prev span {
  -webkit-transform: scaleX(-1);
          transform: scaleX(-1);
}

/* ------------------------------------------------
p-top-recommend
--------------------------------------------------- */
.p-top-recommend {
  position: relative;
  background-color: #0dbaf7;
  padding-block: 5rem 16rem;
}
.p-top-recommend::before {
  content: "";
  position: absolute;
  bottom: calc(100% - 1px);
  left: 0;
  width: 100%;
  height: 9rem;
  /* 同じ絵を2枚敷き、2枚目を 6px ずらしてある。
     Safari は絵を「指定した枠より左右それぞれ約2.5px内側」にしか描かないので、
     1枚だけ繰り返すと継ぎ目に隙間（下地の色の縦線）が出る。
     2枚目をずらしておくと、その隙間を2枚目の本体が塞ぐ。
     ずらし量は実測で決めた（4px以下だと隙間が残り、5px以上で消える）。
     位置を変えたいときは background-position ではなく --cloud-x を書き換えること */
  --cloud-w: 63rem;
  --cloud-x: 0px;
  background-image: url(../img/common/cloud_blue.svg), url(../img/common/cloud_blue.svg);
  background-repeat: repeat-x;
  background-size: var(--cloud-w) 100%;
  background-position: var(--cloud-x) bottom, calc(var(--cloud-x) + 6px) bottom;
}
@media only screen and (min-width: 768px) {
  .p-top-recommend::before {
    height: 24.72rem;
    --cloud-w: 173.04rem;
    --cloud-x: -20rem;
  }
}
@media only screen and (min-width: 768px) {
  .p-top-recommend {
    padding-block: 5rem 28rem;
  }
}

.p-top-recommend__dots {
  position: absolute;
  top: -20rem;
  right: -4rem;
  width: 20rem;
}
@media only screen and (min-width: 768px) {
  .p-top-recommend__dots {
    top: -43rem;
    right: 18rem;
    width: 38rem;
  }
}

.p-top-recommend__frog {
  position: absolute;
  /* SP は画面の右端から体の 1/3 ほど見切れる位置に置く */
  top: -13rem;
  right: -3.6rem;
  width: 10.7rem;
  pointer-events: none;
}
@media only screen and (min-width: 768px) {
  .p-top-recommend__frog {
    top: -31rem;
    right: 6rem;
    width: 16rem;
  }
}

/* カエルが飛び込む窓。下端が水面で、そこから下へ入ったカエルは隠れて見えなくなる。
   跳ぶ範囲に広げる余白と、水面までの深さは JS が測って決める */
.p-top-recommend__dive {
  position: relative;
  overflow: hidden;
}
.p-top-recommend__dive img + img {
  /* 跳んでいる絵は座っている絵の真上に重ねておき、飛んでいる途中で入れ替える */
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

/* 着水したときの波紋。手で切った紙のような、ゆらぎのある輪。
   落ちる先は高さが変わるので、位置は JS が着水地点に合わせて動かす */
.p-top-recommend__ripple {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 85%;
  margin-left: -42.5%;
  aspect-ratio: 2.5/1;
  background-image: url(../img/common/deco_ripple01.svg?v=2);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  opacity: 0;
}

/* 2枚目・3枚目は形の違う輪にして、同心円に重なったときに同じ絵の拡大に見えないようにする */
.p-top-recommend__ripple + .p-top-recommend__ripple {
  background-image: url(../img/common/deco_ripple02.svg?v=2);
}

.p-top-recommend__ripple + .p-top-recommend__ripple + .p-top-recommend__ripple {
  background-image: url(../img/common/deco_ripple03.svg?v=2);
}

/* 着水のしぶき。波紋と同じく、跳ねる向きと位置は JS が決める */
.p-top-recommend__drop {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0.8rem;
  margin-left: -0.4rem;
  aspect-ratio: 1;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  opacity: 0;
}
@media only screen and (min-width: 768px) {
  .p-top-recommend__drop {
    width: 1.2rem;
    margin-left: -0.6rem;
  }
}

.p-top-recommend__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 3rem;
  color: #fff;
}
@media only screen and (min-width: 768px) {
  .p-top-recommend__head {
    gap: 4rem;
  }
}

@media only screen and (min-width: 768px) {
  .p-top-recommend__title {
    width: 35rem;
  }
}

.p-top-recommend__slider {
  margin-top: 4rem;
}
@media only screen and (min-width: 768px) {
  .p-top-recommend__slider {
    margin-top: 7.2rem;
  }
}

.p-top-recommend__btn {
  margin-top: 6rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media only screen and (min-width: 768px) {
  .p-top-recommend__btn {
    margin-top: 12rem;
  }
}

/* ------------------------------------------------
p-top-calendar
--------------------------------------------------- */
.p-top-calendar {
  position: relative;
  padding-top: 12rem;
}
@media only screen and (min-width: 768px) {
  .p-top-calendar {
    padding-block: 24rem 12rem;
  }
}
.p-top-calendar::before {
  content: "";
  position: absolute;
  bottom: calc(100% - 1px);
  left: 0;
  width: 100%;
  height: 7.6rem;
  /* 同じ絵を2枚敷き、2枚目を 6px ずらしてある。
     Safari は絵を「指定した枠より左右それぞれ約2.5px内側」にしか描かないので、
     1枚だけ繰り返すと継ぎ目に隙間（下地の色の縦線）が出る。
     2枚目をずらしておくと、その隙間を2枚目の本体が塞ぐ。
     ずらし量は実測で決めた（4px以下だと隙間が残り、5px以上で消える）。
     位置を変えたいときは background-position ではなく --cloud-x を書き換えること */
  --cloud-w: 72.96rem;
  --cloud-x: calc(50% + 5.57rem);
  background-image: url(../img/common/cloud_gray.svg), url(../img/common/cloud_gray.svg);
  background-repeat: repeat-x;
  background-size: var(--cloud-w) 100%;
  background-position: var(--cloud-x) bottom, calc(var(--cloud-x) + 6px) bottom;
}
@media only screen and (min-width: 768px) {
  .p-top-calendar::before {
    height: 18rem;
    --cloud-w: 172.8rem;
    --cloud-x: 50%;
  }
}

.p-top-calendar__tree {
  position: absolute;
  top: -24rem;
  left: 0;
  width: 12rem;
}
@media only screen and (min-width: 768px) {
  .p-top-calendar__tree {
    top: -21rem;
    width: 29rem;
  }
}

/* 装飾（赤い円・線路・フルーツ列車）。3点まとめて画面の右端に寄せる。
   位置の基準は「セクションの上端（top）」と「画面の右端（right）」の2つだけ。
   right がマイナス＝その分だけ右へはみ出す（.l-wrapper の overflow-x: clip で画面の外が切れる）。
   数値は PC 1440px / SP 375px 時の実寸をそのまま rem にしたもの */
.p-top-calendar__deco {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  pointer-events: none;
}

/* FVで使っている三角のデコ。カレンダー表の箱（.p-top-calendar__body）の左上に置き、
   2/3 を表の下へ潜らせる。位置の基準を画面ではなく表の箱にしてあるので、
   画面がどれだけ広くなっても隠れる割合は変わらない。
   left / top は「自分の大きさの 1/3 だけ外へ出す」値（幅80rem の 1/3 ＝ 26.7rem）。
   大きさは FV のものと同じ */
.p-top-calendar__triangle {
  position: absolute;
  z-index: -1;
  left: -13.3rem;
  top: -11.3rem;
  width: 40rem;
  pointer-events: none;
}
@media only screen and (min-width: 768px) {
  .p-top-calendar__triangle {
    left: -40rem;
    top: -22.5rem;
    width: 70rem;
  }
}

.p-top-calendar__circle {
  position: absolute;
  top: -10rem;
  right: -6.9rem;
  width: 16.9rem;
}
@media only screen and (min-width: 768px) {
  .p-top-calendar__circle {
    top: -29.4rem;
    right: -22.5rem;
    width: 46rem;
  }
}

/* 右端は画面の外へ見切れさせる */
.p-top-calendar__rail {
  position: absolute;
  top: -1rem;
  right: -3rem;
  width: 28.5rem;
}
@media only screen and (min-width: 768px) {
  .p-top-calendar__rail {
    top: -3rem;
    right: -12rem;
    width: 74rem;
  }
}

/* 待機位置は線路（手前レール）の左端。ここから右へ走って画面外へ抜ける。
   線路の上に載せるため、左右の位置に対して線路の高さ（傾き0.1904）から top を逆算してある。
   上下・左右のどちらか片方だけを動かさない */
.p-top-calendar__train {
  position: absolute;
  top: -4rem;
  right: 8.2rem;
  width: 15.8rem;
  will-change: transform;
}
@media only screen and (min-width: 768px) {
  .p-top-calendar__train {
    top: -8rem;
    right: 24rem;
    width: 38rem;
  }
}

.p-top-calendar__contents {
  position: relative;
}

/* ------------------------------------------------
p-top-guide
--------------------------------------------------- */
.p-top-guide {
  position: relative;
  padding-block: 6rem 4rem;
}
@media only screen and (min-width: 768px) {
  .p-top-guide {
    padding-block: 12rem;
  }
}

.p-top-guide__deco {
  position: absolute;
  z-index: -1;
  top: 50%;
  right: 0;
  left: 0;
  width: 100%;
  max-width: 144rem;
  height: 0;
  margin-inline: auto;
  pointer-events: none;
}

.p-top-guide__monument {
  position: absolute;
  top: 3rem;
  left: 50%;
  width: 125%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
@media only screen and (min-width: 768px) {
  .p-top-guide__monument {
    top: -16rem;
    left: 54%;
    width: 105%;
  }
}

/* ------------------------------------------------
p-related
--------------------------------------------------- */
/* カード列をスライダーの装飾（緑の円）より前に出すため、装飾より高い層に置く */
.p-related {
  position: relative;
  z-index: 2;
  padding-block: 10rem 6rem;
}
@media only screen and (min-width: 768px) {
  .p-related {
    padding-block: 10rem;
  }
}

.p-related__contents {
  max-width: 110rem;
  margin-inline: auto;
}

.p-related__title {
  width: 27.4rem;
  margin-inline: auto;
}
@media only screen and (min-width: 768px) {
  .p-related__title {
    width: 47.1rem;
  }
}

.p-related__body {
  margin-top: 4rem;
  position: relative;
}
@media only screen and (min-width: 768px) {
  .p-related__body {
    margin-top: 8rem;
  }
}

.p-related__items {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}
@media only screen and (min-width: 768px) {
  .p-related__items {
    grid-template-columns: repeat(2, 1fr);
    gap: 4rem;
  }
}

.p-related-card {
  overflow: hidden;
  background-color: #fff;
  border-radius: 4rem;
}
@media only screen and (min-width: 768px) {
  .p-related-card {
    border-radius: 6rem;
  }
}
.p-related-card a {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100%;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
.p-related-card a::after {
  position: absolute;
  right: 3.6rem;
  bottom: 3.6rem;
  width: 1.4rem;
  height: 2.8rem;
  content: "";
  background-color: #ef5a07;
  -webkit-mask-image: url(../img/common/arrow.svg);
          mask-image: url(../img/common/arrow.svg);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center center;
          mask-position: center center;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
}
@media only screen and (min-width: 768px) {
  .p-related-card a::after {
    right: 3rem;
    bottom: 3rem;
    width: 1.9rem;
    height: 4rem;
  }
}

.p-related-card__image img {
  width: 100%;
  height: auto;
  aspect-ratio: 335/200;
  -o-object-fit: cover;
     object-fit: cover;
}
@media only screen and (min-width: 768px) {
  .p-related-card__image img {
    aspect-ratio: 535/300;
  }
}

.p-related-card__body {
  position: relative;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding-block: 2rem 6rem;
  padding-inline: 2rem 1.6rem;
}
@media only screen and (min-width: 768px) {
  .p-related-card__body {
    padding-block: 3rem 6rem;
    padding-inline: 3rem 2.4rem;
  }
}

.p-related-card__label {
  display: block;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  padding-block: 0.5rem;
  padding-inline: 1.5rem;
  color: #fff;
  font-size: 1.4rem;
  line-height: 1.5;
  letter-spacing: 0.05em;
  background-color: #41c4ba;
  border-radius: 1rem;
}
@media only screen and (min-width: 768px) {
  .p-related-card__label {
    font-size: 1.7rem;
  }
}

.p-related-card__title {
  margin-top: 0.4rem;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
}
@media only screen and (min-width: 768px) {
  .p-related-card__title {
    font-size: 2.8rem;
    white-space: nowrap;
  }
}

.p-related-card__text {
  margin-top: 1rem;
  font-size: 1.4rem;
  line-height: 1.8;
  letter-spacing: 0;
}
@media only screen and (min-width: 768px) {
  .p-related-card__text {
    margin-top: 1.6rem;
    font-size: 1.7rem;
    line-height: 1.8;
  }
}

@media (any-hover: hover) {
  .p-related-card a:hover {
    opacity: 0.7;
  }
}
/* ------------------------------------------------
p-top-deco
--------------------------------------------------- */
/* 装飾（緑の円・動く・こどもの館号）。
   デザイン基準幅 1440px の座標を保つため、幅 144rem の箱を作り、子の left を % で置く。
   箱は高さ 0 で、上端をスライダーの上端（＝スライダーの margin-top ぶん下）に合わせ、装飾はそこから上へ伸びる。
   箱は 1440px 幅で中央寄せにする。1440px 以下では画面いっぱい＝左端に張り付き（＝デザイン通り）、
   1440px を超えると左に余白が生まれ、左へ見切れていた緑の円が少しずつ姿を現す。
   写真帯（.p-top-slider__items も中央基準）と同じ中心で動くので、広い画面でも位置関係が崩れない。
   写真帯より前・カード列（p-related の z-index: 2）より後ろの層に入れる */
.p-top-deco {
  position: relative;
  top: 6rem;
  width: 100%;
  max-width: 144rem;
  height: 0;
  margin-inline: auto;
  pointer-events: none;
}
@media only screen and (min-width: 768px) {
  .p-top-deco {
    top: 18.9rem;
    z-index: 1;
  }
}

/* SPは % ではなく rem で置く。375〜767px は rem が 10px 固定なので、
   画面が広がっても装飾が育たず、車がカード列に食い込まない（375px 以下は rem が流体で一緒に縮む） */
.p-top-deco__circle {
  position: absolute;
  top: -18rem;
  left: -6rem;
  z-index: 1;
  width: 21rem;
}
@media only screen and (min-width: 768px) {
  .p-top-deco__circle {
    top: -50rem;
    left: -17rem;
    width: 56rem;
  }
}

/* 円の左上のふちにまたがる木。円（.p-top-deco__circle）と同じ rem 基準で置く。
   親の円も rem 幅なので、rem が縮む幅では木も同じ割合で縮み、円の同じ場所に載り続ける
   （円幅に対して 上13% / 左-3% / 幅23% にあたる値）。
   円の左側は 1440px 以下では .l-wrapper に切られていて、画面が 1440px を超えたぶんだけ姿を現す。
   木はその切られている側に置いてあるので、結果として広い画面でだけ見える装飾になる
   （実測: 1600px で右の木の先が覗き、1700px で右の木が出そろい、1800px で2本とも全部見える） */
.p-top-deco__tree {
  position: absolute;
  top: 2.75rem;
  left: -0.63rem;
  width: 4.83rem;
}
@media only screen and (min-width: 768px) {
  .p-top-deco__tree {
    top: 7.34rem;
    left: -1.68rem;
    width: 12.88rem;
  }
}

/* 横は円と同じ % で置いて円の同じ場所に載せ、縦は rem で置いてタイヤと写真帯の間を 32px に保つ */
.p-top-deco__car {
  position: absolute;
  top: -9rem;
  left: 2.6rem;
  z-index: 3;
  width: 9rem;
  will-change: transform;
}
@media only screen and (min-width: 768px) {
  .p-top-deco__car {
    top: -20.7rem;
    left: 6.944%;
    width: 18rem;
  }
}

/* ------------------------------------------------
p-top-slider
--------------------------------------------------- */
.p-top-slider {
  --slide-width: 14rem;
  --track-width: 140rem;
  --loop-width: 280rem;
  --slider-height: 18.702rem;
  --wave-height: 1.832rem;
  --track-shift: 0rem;
  position: relative;
  margin-top: 6rem;
  /* 緑の円の左はみ出しと、右へ走り去る車は .l-wrapper 側でまとめて切る
     （ここに overflow-x: clip を置くと Safari が縦にも効かせて、上へ抜ける装飾が消える） */
}
@media only screen and (min-width: 768px) {
  .p-top-slider {
    --slide-width: 26.2rem;
    --track-width: 262rem;
    --loop-width: 524rem;
    --slider-height: 35.068rem;
    --wave-height: 4.816rem;
    --track-shift: 1.5rem;
    margin-top: 18.9rem;
  }
}

/* z-index: 0 で自前の重ね順を作り、波（::before / ::after の z-index: 2）を帯の内側に閉じ込める。
   これが無いと波がページ全体の重ね順へ出てしまい、装飾（緑の円）より前に来る */
.p-top-slider__band {
  position: relative;
  z-index: 0;
  height: var(--slider-height);
  overflow: hidden;
}
.p-top-slider__band::before, .p-top-slider__band::after {
  position: absolute;
  left: 0;
  z-index: 2;
  width: 100%;
  content: "";
  pointer-events: none;
}
.p-top-slider__band {
  /* 波は同じ絵を2枚敷き、2枚目を 6px ずらしてある。
     Safari は絵を「指定した枠より左右それぞれ約2.5px内側」にしか描かないので、
     1枚だけだと繰り返しの継ぎ目に隙間（下地の色の縦線）が出る。
     2枚目をずらしておくと、その隙間を2枚目の本体が塞ぐ。
     ずらし量は実測で決めた（4px以下だと隙間が残り、5px以上で消える）。

     縦は「要素の高さ＝絵の高さ」にすること。
     この絵は波の谷が絵の下端、山が上端まで届いていて余白が無いので、
     要素を絵より小さくすると谷や山が平らに切れる。
     縦に1pxずらしているのは、Safari が絵の上端を0.5pxほど内側から描く分を
     帯の外へ逃がすため（ここを 0 にすると帯の上端に写真の細い線が出る）。
     係数はSVGのviewBox比（幅 / 高さ48.16） */
}
.p-top-slider__band::before {
  top: -1px;
  height: calc(var(--wave-height) + 1px);
  --wave-w: calc((var(--wave-height) + 1px) * 13.496678);
  background-image: url(../img/top/deco_weve-slider-top.svg), url(../img/top/deco_weve-slider-top.svg);
  background-repeat: repeat-x;
  background-size: var(--wave-w) 100%;
  background-position: 0 top, 6px top;
}
.p-top-slider__band::after {
  bottom: -1px;
  height: calc(var(--wave-height) + 1px);
  --wave-w: calc((var(--wave-height) + 1px) * 13.514535);
  background-image: url(../img/top/deco_weve-slider-bottom.svg), url(../img/top/deco_weve-slider-bottom.svg);
  background-repeat: repeat-x;
  background-size: var(--wave-w) 100%;
  background-position: 0 bottom, 6px bottom;
}

.p-top-slider__items {
  position: absolute;
  top: 0;
  left: calc(50% - var(--track-width) / 2 + var(--track-shift));
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: var(--loop-width);
  will-change: transform;
}

.p-top-slider__items.is-flowing {
  -webkit-animation: p-top-slider-flow 50s linear infinite;
          animation: p-top-slider-flow 50s linear infinite;
}

.p-top-slider__item {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 var(--slide-width);
          flex: 0 0 var(--slide-width);
  overflow: hidden;
}

@-webkit-keyframes p-top-slider-flow {
  from {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: translate3d(calc(0rem - var(--track-width)), 0, 0);
            transform: translate3d(calc(0rem - var(--track-width)), 0, 0);
  }
}

@keyframes p-top-slider-flow {
  from {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: translate3d(calc(0rem - var(--track-width)), 0, 0);
            transform: translate3d(calc(0rem - var(--track-width)), 0, 0);
  }
}
/* ------------------------------------------------
p-event
--------------------------------------------------- */
/* イベント詳細の下地（水色の帯）。中のブロックの背景はここでは決めない */
.p-event__body {
  position: relative;
  padding-block: 6rem 12rem;
  background-color: #0dbaf7;
}
@media only screen and (min-width: 768px) {
  .p-event__body {
    padding-block: 14rem 25.5rem;
  }
}

/* 帯の下端の波。ページ下地色（cloud_gray）に切り替える。フッターの波とは別物 */
.p-event__body::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 7.6rem;
  background-image: url("../img/common/cloud_gray.svg");
  background-repeat: repeat-x;
  background-position: center bottom;
  background-size: auto 100%;
  pointer-events: none;
}
@media only screen and (min-width: 768px) {
  .p-event__body::after {
    height: 18rem;
  }
}

/* 帯の中身の縦並び */
.p-event__body .l-inner {
  position: relative;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 5rem;
}
@media only screen and (min-width: 768px) {
  .p-event__body .l-inner {
    gap: 8rem;
  }
}

/* 申込フォームを乗せる白いカード。p-form 自体は背景を持たない */
.p-event__form {
  padding-block: 2.4rem 3rem;
  padding-inline: 2rem;
  background-color: #fff;
  border-radius: 2rem;
}
@media only screen and (min-width: 768px) {
  .p-event__form {
    padding-block: 4rem;
    padding-inline: 4rem;
  }
}

/* ------------------------------------------------
p-event-detail（白いカード）
--------------------------------------------------- */
/* 直近のおすすめのスライダーを置く枠。水色帯（p-event__body）の中に置くので、
   上だけ空けて、帯の下端の波より前に出しておく */
.p-event__recommend {
  position: relative;
  z-index: 1;
  margin-top: 8rem;
  padding-bottom: 6rem;
}
@media only screen and (min-width: 768px) {
  .p-event__recommend {
    margin-top: 16rem;
    padding-bottom: 8rem;
  }
}

.p-event-detail {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 3rem;
  padding-block: 2.4rem;
  padding-inline: 1.6rem;
  background-color: #fff;
  border-radius: 2rem;
  border: 0.4rem solid #ffde38;
  position: relative;
}
@media only screen and (min-width: 768px) {
  .p-event-detail {
    gap: 4.8rem;
    padding-block: 4rem 5.6rem;
    padding-inline: 6rem;
    border-radius: 6rem;
    border: 0.8rem solid #ffde38;
  }
}

.p-event-detail__title {
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.02em;
}
@media only screen and (min-width: 768px) {
  .p-event-detail__title {
    font-size: 4rem;
  }
}

.p-event-detail__contents {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 3rem;
}
@media only screen and (min-width: 768px) {
  .p-event-detail__contents {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    gap: 4rem;
  }
}

/* 画像どうしの間隔は画像側に持たせる（gapだと注釈まで同じ間隔が空いてしまう） */
.p-event-detail__images {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
@media only screen and (min-width: 768px) {
  .p-event-detail__images {
    width: 40rem;
  }
}

.p-event-detail__img + .p-event-detail__img {
  margin-top: 2rem;
}
@media only screen and (min-width: 768px) {
  .p-event-detail__img + .p-event-detail__img {
    margin-top: 4.1rem;
  }
}

/* 画像はPCだけクリックで拡大できる（スマホは指で広げて見てもらう） */
.p-event-detail__zoom {
  display: block;
  width: 100%;
  padding: 0;
  background-color: transparent;
  border: none;
}
@media only screen and (min-width: 768px) {
  .p-event-detail__zoom {
    cursor: -webkit-zoom-in;
    cursor: zoom-in;
  }
}
.p-event-detail__zoom img {
  display: block;
  width: 100%;
}

/* 注釈もPCだけ。画像のすぐ下に小さく出す */
.p-event-detail__note {
  display: none;
}
@media only screen and (min-width: 768px) {
  .p-event-detail__note {
    display: block;
    margin-top: 0.8rem;
    font-size: 1.2rem;
    line-height: 1.6;
    letter-spacing: 0.02em;
    color: #222222;
  }
}

.p-event-detail__info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2rem;
}
@media only screen and (min-width: 768px) {
  .p-event-detail__info {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    gap: 2.4rem;
  }
}

.p-event-detail__labels {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem 1.5rem;
}

.p-event-detail__full {
  color: #e43030;
  font-size: 1.5rem;
  line-height: 1.5;
  letter-spacing: 0.02em;
}
@media only screen and (min-width: 768px) {
  .p-event-detail__full {
    font-size: 1.7rem;
  }
}

.p-event-detail__text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1.6rem;
  font-size: 1.5rem;
  line-height: 1.8;
  letter-spacing: 0.02em;
}
@media only screen and (min-width: 768px) {
  .p-event-detail__text {
    font-size: 1.7rem;
  }
}

/* 繰り返し開催のイベントは、開催日を縦に並べる */
.p-event-detail__day {
  display: block;
}

/* 角丸で表の四隅を切るため、外枠は包む側が持つ */
.p-event-detail__table {
  overflow: hidden;
  border: 0.2rem solid #ffde38;
  border-radius: 1.5rem;
}
.p-event-detail__table table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.p-event-detail__table th,
.p-event-detail__table td {
  padding-block: 1.4rem;
  padding-inline: 1.4rem;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.02em;
  text-align: left;
  vertical-align: top;
  border-top: 0.2rem solid #ffde38;
}
@media only screen and (min-width: 768px) {
  .p-event-detail__table th,
  .p-event-detail__table td {
    padding-block: 2rem;
    padding-inline: 1.6rem;
    font-size: 1.7rem;
  }
}
.p-event-detail__table tr:first-child th,
.p-event-detail__table tr:first-child td {
  border-top: 0;
}
.p-event-detail__table th {
  width: 9rem;
  background-color: #fff4d1;
  border-right: 0.2rem solid #ffde38;
}
@media only screen and (min-width: 768px) {
  .p-event-detail__table th {
    width: 16rem;
  }
}
.p-event-detail__table td {
  background-color: #fff;
}

.p-event__btn {
  margin-top: 8rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media only screen and (min-width: 768px) {
  .p-event__btn {
    margin-top: 10rem;
  }
}

/* ------------------------------------------------
p-event-modal（イベント画像の拡大表示・PCのみ動く）
---------------------------------------------------- */
.p-event-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding-block: 4rem;
  padding-inline: 7rem;
}
.p-event-modal.is-open {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.p-event-modal__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(2, 2, 2, 0.8);
  cursor: pointer;
}

.p-event-modal__inner {
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 80rem;
}

.p-event-modal__img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: calc(100vh - 10rem);
  margin-inline: auto;
}

/* 閉じるボタンは画像の右外、上端に揃える */
.p-event-modal__close {
  position: absolute;
  top: 0;
  right: -4rem;
  width: 3rem;
  height: 3rem;
  padding: 0;
  background-color: transparent;
  border: none;
  cursor: pointer;
}
.p-event-modal__close::before, .p-event-modal__close::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 0.2rem;
  content: "";
  background-color: #fff;
}
.p-event-modal__close::before {
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
          transform: translate(-50%, -50%) rotate(45deg);
}
.p-event-modal__close::after {
  -webkit-transform: translate(-50%, -50%) rotate(-45deg);
          transform: translate(-50%, -50%) rotate(-45deg);
}

/* ------------------------------------------------
p-event-list
--------------------------------------------------- */
.p-event-list__body {
  position: relative;
  padding-block: 6rem 12rem;
  background-color: #0dbaf7;
}
@media only screen and (min-width: 768px) {
  .p-event-list__body {
    padding-block: 10rem 25.5rem;
  }
}

/* 帯の下端の波。ページ下地色（cloud_gray）に切り替える。フッターの波とは別物 */
.p-event-list__body::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 7.6rem;
  background-image: url("../img/common/cloud_gray.svg");
  background-repeat: repeat-x;
  background-position: center bottom;
  background-size: auto 100%;
  pointer-events: none;
}
@media only screen and (min-width: 768px) {
  .p-event-list__body::after {
    height: 18rem;
  }
}

.p-event-list__body .l-inner {
  position: relative;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 4rem;
}
@media only screen and (min-width: 768px) {
  .p-event-list__body .l-inner {
    gap: 12rem;
  }
}

@media only screen and (min-width: 768px) {
  .p-event-list__title {
    width: 28.8rem;
  }
}

.p-event-list__contents {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 4rem;
}
@media only screen and (min-width: 768px) {
  .p-event-list__contents {
    gap: 10rem;
  }
}

.p-event-list__tabs .p-tabs__item:not(.is-current) {
  background-color: #FAF7F3;
}

.p-event-list__result {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 4rem;
}
@media only screen and (min-width: 768px) {
  .p-event-list__result {
    gap: 6rem;
  }
}

.p-event-list__items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 3rem;
}
@media only screen and (min-width: 768px) {
  .p-event-list__items {
    gap: 6rem;
  }
}

.p-event-list__btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.p-event-list__empty,
.p-event-list__closed {
  color: #fff;
  font-size: 1.5rem;
  line-height: 1.5;
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .p-event-list__empty,
  .p-event-list__closed {
    font-size: 1.7rem;
  }
}

/* ------------------------------------------------
p-event-item
--------------------------------------------------- */
.p-event-item {
  overflow: hidden;
  background-color: #fff;
  border-radius: 2rem;
}

.p-event-item a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100%;
}
@media only screen and (min-width: 768px) {
  .p-event-item a {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
  }
}

.p-event-item__img {
  overflow: hidden;
}
@media only screen and (min-width: 768px) {
  .p-event-item__img {
    width: 41.6rem;
  }
}
.p-event-item__img img {
  width: 100%;
  height: 100%;
  aspect-ratio: 416/312;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: top center;
     object-position: top center;
}
@media only screen and (min-width: 768px) {
  .p-event-item__img img {
    -webkit-transition: -webkit-transform 0.3s ease;
    transition: -webkit-transform 0.3s ease;
    transition: transform 0.3s ease;
    transition: transform 0.3s ease, -webkit-transform 0.3s ease;
  }
}

.p-event-item__body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0.8rem;
  padding-block: 2rem;
  padding-inline: 1.6rem;
}
@media only screen and (min-width: 768px) {
  .p-event-item__body {
    gap: 2rem;
    padding-block: 2rem;
    padding-inline: 4rem;
  }
}

.p-event-item__labels {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
}

.p-event-item__full {
  color: #e43030;
  font-size: 1.4rem;
  line-height: 1.5;
}
@media only screen and (min-width: 768px) {
  .p-event-item__full {
    font-size: 1.7rem;
  }
}

.p-event-item__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.5rem;
}

.p-event-item__title {
  display: -webkit-box;
  overflow: hidden;
  color: #222222;
  -webkit-transition: color 0.3s ease;
  transition: color 0.3s ease;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
@media only screen and (min-width: 768px) {
  .p-event-item__title {
    font-size: 2.4rem;
  }
}
@media only screen and (min-width: 768px) {
  .p-event-item__title {
    -webkit-transition: color 0.3s ease;
    transition: color 0.3s ease;
  }
}

.p-event-item__text {
  display: -webkit-box;
  overflow: hidden;
  font-size: 1.4rem;
  line-height: 1.6;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
@media only screen and (min-width: 768px) {
  .p-event-item__text {
    font-size: 1.7rem;
  }
}

.p-event-item__schedule {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 1rem;
}
@media only screen and (min-width: 768px) {
  .p-event-item__schedule {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    gap: 2rem;
  }
}

.p-event-item__daytime {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
}

.p-event-item__day {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem 2rem;
  color: #222222;
  font-size: 1.4rem;
  line-height: 1.5;
}
@media only screen and (min-width: 768px) {
  .p-event-item__day {
    font-size: 1.7rem;
  }
}

.p-event-item__time {
  color: #222222;
  font-family: "Comfortaa", sans-serif;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.5;
}
@media only screen and (min-width: 768px) {
  .p-event-item__time {
    font-size: 1.7rem;
  }
}

@media (any-hover: hover) {
  .p-event-item a:hover .p-event-item__img img {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
  .p-event-item a:hover .p-event-item__title {
    color: #41c4ba;
  }
}
/* ------------------------------------------------
p-information
--------------------------------------------------- */
.p-information__body {
  padding-block: 6rem 8rem;
}
@media only screen and (min-width: 768px) {
  .p-information__body {
    padding-block: 10rem 8rem;
  }
}

.p-information__body .l-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 4rem;
}
@media only screen and (min-width: 768px) {
  .p-information__body .l-inner {
    gap: 6rem;
  }
}

.p-information__contents {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 4rem;
  margin-inline: auto;
  width: 100%;
}
@media only screen and (min-width: 768px) {
  .p-information__contents {
    max-width: 90rem;
    gap: 6rem;
  }
}

.p-information__empty {
  font-size: 1.5rem;
  line-height: 1.5;
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .p-information__empty {
    font-size: 1.7rem;
  }
}

@media only screen and (min-width: 768px) {
  .p-information__nav {
    margin-top: 4rem;
  }
}

/* ------------------------------------------------
p-information-detail
--------------------------------------------------- */
.p-information-detail {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 3rem;
}
@media only screen and (min-width: 768px) {
  .p-information-detail {
    gap: 6rem;
  }
}

.p-information-detail__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2rem;
}
@media only screen and (min-width: 768px) {
  .p-information-detail__head {
    gap: 4rem;
  }
}

.p-information-detail__meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
}
@media only screen and (min-width: 768px) {
  .p-information-detail__meta {
    gap: 2rem;
  }
}

.p-information-detail__date {
  font-size: 1.4rem;
  line-height: 1.5;
}
@media only screen and (min-width: 768px) {
  .p-information-detail__date {
    font-size: 1.8rem;
  }
}

.p-information-detail__title {
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.02em;
}
@media only screen and (min-width: 768px) {
  .p-information-detail__title {
    font-size: 4rem;
  }
}

.p-information-detail__body {
  font-size: 1.5rem;
  line-height: 1.8;
  letter-spacing: 0.02em;
}
@media only screen and (min-width: 768px) {
  .p-information-detail__body {
    font-size: 1.7rem;
  }
}
.p-information-detail__body > :first-child {
  margin-top: 0;
}
.p-information-detail__body > :last-child {
  margin-bottom: 0;
}
.p-information-detail__body h2 {
  margin-top: 2.4rem;
  margin-bottom: 1.6rem;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.5;
}
@media only screen and (min-width: 768px) {
  .p-information-detail__body h2 {
    margin-top: 4rem;
    margin-bottom: 2rem;
    font-size: 2.8rem;
  }
}
.p-information-detail__body h3 {
  margin-top: 3rem;
  margin-bottom: 1.6rem;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.5;
}
@media only screen and (min-width: 768px) {
  .p-information-detail__body h3 {
    margin-top: 4rem;
    margin-bottom: 2rem;
    font-size: 2.2rem;
  }
}
.p-information-detail__body p {
  margin-top: 1.6rem;
  margin-bottom: 1.6rem;
  line-height: 1.6;
}
@media only screen and (min-width: 768px) {
  .p-information-detail__body p {
    margin-top: 2rem;
    margin-bottom: 2rem;
  }
}
.p-information-detail__body ul,
.p-information-detail__body ol {
  margin-top: 1.6rem;
  margin-bottom: 1.6rem;
  padding-left: 2.4rem;
}
@media only screen and (min-width: 768px) {
  .p-information-detail__body ul,
  .p-information-detail__body ol {
    margin-top: 2rem;
    margin-bottom: 2rem;
  }
}
.p-information-detail__body ul {
  list-style: disc;
}
.p-information-detail__body ol {
  list-style: decimal;
}
.p-information-detail__body li {
  line-height: 1.6;
}
.p-information-detail__body li + li {
  margin-top: 0.6rem;
}
.p-information-detail__body img {
  max-width: 100%;
  width: auto;
  height: auto;
  margin-top: 2rem;
  margin-bottom: 2rem;
}
@media only screen and (min-width: 768px) {
  .p-information-detail__body img {
    margin-top: 4rem;
    margin-bottom: 4rem;
  }
}
.p-information-detail__body a {
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}
@media only screen and (min-width: 768px) {
  .p-information-detail__body a {
    -webkit-transition: color 0.3s ease;
    transition: color 0.3s ease;
  }
}

@media (any-hover: hover) {
  .p-information-detail__body a:hover {
    color: #ef5a07;
  }
}
/* ------------------------------------------------
p-information-nav
--------------------------------------------------- */
.p-information-nav {
  display: grid;
  grid-template-areas: "prev next" "back back";
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 2rem;
}
@media only screen and (min-width: 768px) {
  .p-information-nav {
    grid-template-areas: "prev back next";
    grid-template-columns: 1fr auto 1fr;
  }
}

.p-information-nav__prev,
.p-information-nav__next {
  position: relative;
  font-size: 1.4rem;
  line-height: 1.5;
}
@media only screen and (min-width: 768px) {
  .p-information-nav__prev,
  .p-information-nav__next {
    font-size: 1.8rem;
    -webkit-transition: color 0.3s ease;
    transition: color 0.3s ease;
  }
}
.p-information-nav__prev::before,
.p-information-nav__next::before {
  content: "";
  position: absolute;
  top: 50%;
  width: 0.8rem;
  height: 1.4rem;
  background-color: #ef5a07;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  -webkit-mask-image: url(../img/common/arrow.svg);
          mask-image: url(../img/common/arrow.svg);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
}
@media only screen and (min-width: 768px) {
  .p-information-nav__prev::before,
  .p-information-nav__next::before {
    width: 1rem;
    height: 1.7rem;
  }
}

.p-information-nav__prev {
  grid-area: prev;
  justify-self: start;
  padding-left: 1.8rem;
}
@media only screen and (min-width: 768px) {
  .p-information-nav__prev {
    padding-left: 2rem;
  }
}
.p-information-nav__prev::before {
  left: 0;
  -webkit-transform: translateY(-50%) scaleX(-1);
          transform: translateY(-50%) scaleX(-1);
}

.p-information-nav__next {
  grid-area: next;
  justify-self: end;
  padding-right: 1.8rem;
}
@media only screen and (min-width: 768px) {
  .p-information-nav__next {
    padding-right: 2rem;
  }
}
.p-information-nav__next::before {
  right: 0;
}

.p-information-nav__back {
  grid-area: back;
  justify-self: center;
}

@media (any-hover: hover) {
  .p-information-nav__prev:hover,
  .p-information-nav__next:hover {
    color: #ef5a07;
  }
}
/* ------------------------------------------------
p-page（固定ページ共通）
--------------------------------------------------- */
.p-page {
  /* clip なら中身を切りつつ、中の position: sticky（トップへ戻るボタン）が生きる。
     hidden だとここがスクロールの箱になってしまい、ボタンが貼り付かない */
  overflow: clip;
}

/* 固定ページの下地（水色の帯）。中のブロックの背景はここでは決めない */
.p-page__body {
  position: relative;
  padding-block: 6rem 20rem;
  background-color: #0dbaf7;
}
@media only screen and (min-width: 768px) {
  .p-page__body {
    padding-block: 14rem 25.5rem;
  }
}

/* 帯の下端の波。ページ下地色（cloud_gray）に切り替える。フッターの波とは別物 */
.p-page__body::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 7.6rem;
  background-image: url("../img/common/cloud_gray.svg");
  background-repeat: repeat-x;
  background-position: center bottom;
  background-size: auto 100%;
  pointer-events: none;
}
@media only screen and (min-width: 768px) {
  .p-page__body::after {
    height: 18rem;
  }
}

/* 帯の中身の縦並び */
.p-page__body .l-inner {
  position: relative;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 5rem;
}
@media only screen and (min-width: 768px) {
  .p-page__body .l-inner {
    gap: 8rem;
  }
}

/* 本文・フォームを乗せる白いカード。p-form 自体は背景を持たない */
.p-page__form {
  padding-block: 2.4rem 3rem;
  padding-inline: 2rem;
  background-color: #fff;
  border-radius: 2rem;
}
@media only screen and (min-width: 768px) {
  .p-page__form {
    padding-block: 4rem;
    padding-inline: 4rem;
  }
}

/* ------------------------------------------------
p-about
--------------------------------------------------- */
/* 帯の下端の波。次のセクションの色で塗って、色の切り替わりを雲の形にする。
   画面幅によっては波の下端と次のセクションの間に下地色の線が1本出るので、1pxだけ下に重ねる */
.p-about-greeting::after,
.p-about-media--building::after,
.p-about-media--art::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 7.6rem;
  background-repeat: repeat-x;
  background-position: center bottom;
  background-size: auto 100%;
  pointer-events: none;
}
@media only screen and (min-width: 768px) {
  .p-about-greeting::after,
  .p-about-media--building::after,
  .p-about-media--art::after {
    height: 18rem;
  }
}

/* ------------------------------------------------
p-philosophy（当館の理念）
--------------------------------------------------- */
.p-philosophy {
  position: relative;
  padding-block: 12rem 42.6666666667vw;
}
@media only screen and (min-width: 768px) {
  .p-philosophy {
    padding-block: 20rem 32rem;
  }
}

/* 装飾はまとめてこの箱の中に置く。切り取りは .l-wrapper 側でまとめて行う */
.p-philosophy__deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.p-philosophy__monument {
  position: absolute;
  width: 74.6666666667vw;
}
@media only screen and (min-width: 768px) {
  .p-philosophy__monument {
    width: min(38.1944444444vw, 55rem);
  }
}

.p-philosophy__monument--right {
  top: -8vw;
  right: -53.3333333333vw;
}
@media only screen and (min-width: 768px) {
  .p-philosophy__monument--right {
    top: -2rem;
    right: -16.1rem;
  }
}

.p-philosophy__monument--left {
  bottom: -32vw;
  left: -37.3333333333vw;
}
@media only screen and (min-width: 768px) {
  .p-philosophy__monument--left {
    bottom: -2.7777777778vw;
    left: -20.8rem;
  }
}

.p-philosophy__contents {
  width: 100%;
  margin-inline: auto;
  position: relative;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding-inline: 40px;
  gap: 4rem;
}
@media only screen and (min-width: 768px) {
  .p-philosophy__contents {
    max-width: 1440px;
    margin-inline: auto;
    gap: 8rem;
  }
}

.p-philosophy__photo {
  position: absolute;
  width: 26.6666666667vw;
}
@media only screen and (min-width: 768px) {
  .p-philosophy__photo {
    width: 25rem;
  }
}

.p-philosophy__photo--left {
  top: -13.3333333333vw;
  left: -4.2666666667vw;
}
@media only screen and (min-width: 768px) {
  .p-philosophy__photo--left {
    top: -10rem;
    left: 11rem;
  }
}

.p-philosophy__photo--right {
  bottom: -29.3333333333vw;
  right: -4.2666666667vw;
}
@media only screen and (min-width: 768px) {
  .p-philosophy__photo--right {
    bottom: -13rem;
    right: 5rem;
  }
}

@media only screen and (min-width: 768px) {
  .p-philosophy__title {
    width: 26.7rem;
  }
}

.p-philosophy__lead {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .p-philosophy__lead {
    font-size: 3.2rem;
  }
}

.p-philosophy__text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 3rem;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.8;
  letter-spacing: 0.02em;
  text-align: justify;
}
@media only screen and (min-width: 768px) {
  .p-philosophy__text {
    text-align: center;
    gap: 3.4rem;
    font-size: 1.8rem;
    line-height: 2;
  }
}

/* ------------------------------------------------
p-about__intro
--------------------------------------------------- */
.p-about__intro {
  padding-block: 6rem 8rem;
  background-color: #ffde38;
  position: relative;
}
@media only screen and (min-width: 768px) {
  .p-about__intro {
    padding-block: 7rem min(16.6666666667vw, 32rem);
  }
}

.p-about-intro__deco {
  position: absolute;
  top: -7.6388888889vw;
  left: 0;
  width: 100%;
}

/* ------------------------------------------------
p-about-media　共通
--------------------------------------------------- */
.p-about-media {
  position: relative;
}

.p-about-media__contents {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2.4rem;
}
@media only screen and (min-width: 768px) {
  .p-about-media__contents {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 8.8rem;
  }
}

.p-about-media__wrap {
  position: relative;
  height: 24rem;
}
@media only screen and (min-width: 768px) {
  .p-about-media__wrap {
    width: 39.8rem;
    height: 56.8rem;
  }
}

.p-about-media__img {
  position: absolute;
  top: 0;
  right: 0;
  left: calc((min(100vw, 1160px) - 100vw) / 2 - 20px);
  overflow: hidden;
  height: 100%;
  border-radius: 0 2rem 2rem 0;
}
@media only screen and (min-width: 768px) {
  .p-about-media__img {
    left: calc((min(100vw, 1160px) - 100vw) / 2 - 30px);
    border-radius: 0 6rem 6rem 0;
  }
}
.p-about-media__img img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.p-about-media__body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2.4rem;
}
@media only screen and (min-width: 768px) {
  .p-about-media__body {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    gap: 8rem;
  }
}

@media only screen and (min-width: 768px) {
  .p-about-media__title--intro {
    width: 43.6rem;
  }
}

@media only screen and (min-width: 768px) {
  .p-about-media__title--building {
    width: 30.5rem;
  }
}

@media only screen and (min-width: 768px) {
  .p-about-media__title--art {
    width: 30.1rem;
  }
}

.p-about-media__text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2.7rem;
  font-size: 1.5rem;
  line-height: 1.8;
  text-align: justify;
  letter-spacing: 0;
}
@media only screen and (min-width: 768px) {
  .p-about-media__text {
    gap: 3.1rem;
    font-size: 1.7rem;
    letter-spacing: 0.02em;
  }
}

.p-about-media__banner {
  position: relative;
  z-index: 1;
}
.p-about-media__banner a {
  display: block;
  max-width: 88rem;
  margin-inline: auto;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}

/* ------------------------------------------------
p-about-media--intro（こどもの館について）
--------------------------------------------------- */
.p-about-media--intro::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 50%;
  width: 105%;
  height: 7.7777777778vw;
  background-color: #FAF7F3;
  border-radius: 50% 50% 0 0/93.59% 93.59% 0 0;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  pointer-events: none;
}

@media only screen and (min-width: 768px) {
  .p-about-media--intro .p-about-media__body {
    gap: 6rem;
  }
}

.p-about-media--intro .p-about-media__title img {
  height: 2.9rem;
}
@media only screen and (min-width: 768px) {
  .p-about-media--intro .p-about-media__title img {
    height: 4.9rem;
  }
}

/* ------------------------------------------------
p-about-media--building（建物について）
--------------------------------------------------- */
.p-about-media--building {
  padding-block: 5rem 12rem;
  background-color: #0dbaf7;
}
@media only screen and (min-width: 768px) {
  .p-about-media--building {
    padding-block: 10rem 30rem;
  }
}

.p-about-media--building::after {
  background-image: url("../img/common/cloud_yellow.svg");
}

.p-about-media--building .p-about-media__title img {
  height: 3.1rem;
}
@media only screen and (min-width: 768px) {
  .p-about-media--building .p-about-media__title img {
    height: 5.1rem;
  }
}

.p-about-media--building .p-about-media__text {
  gap: 3rem;
  line-height: 1.8;
}
@media only screen and (min-width: 768px) {
  .p-about-media--building .p-about-media__text {
    gap: 3.4rem;
  }
}

/* ------------------------------------------------
p-about-media--art（彫刻について。写真が右側）
--------------------------------------------------- */
.p-about-media--art {
  padding-block: 5rem 12rem;
  background-color: #ffde38;
}
@media only screen and (min-width: 768px) {
  .p-about-media--art {
    padding-block: 10rem 30rem;
  }
}

.p-about-media--art::after {
  background-image: url("../img/common/cloud_gray.svg");
}

.p-about-media--building .p-about-media__body {
  position: relative;
}

.p-about-media__dangomushi {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 1;
  pointer-events: none;
}

.p-about-media__dangomushi img {
  position: absolute;
  bottom: 3.1rem;
  left: -19.25rem;
  width: 6rem;
}
@media only screen and (min-width: 768px) {
  .p-about-media__dangomushi img {
    bottom: 8.7rem;
    left: -63rem;
    width: 12rem;
  }
}

.p-about-media__dangomushi img:nth-child(2) {
  bottom: 2.4rem;
  left: -10.3rem;
  width: 4.5rem;
}
@media only screen and (min-width: 768px) {
  .p-about-media__dangomushi img:nth-child(2) {
    bottom: 8.2rem;
    left: -42.5rem;
    width: 9rem;
  }
}

.p-about-media__dangomushi img:nth-child(3) {
  bottom: 2.1rem;
  left: -1.9rem;
  width: 3.25rem;
}
@media only screen and (min-width: 768px) {
  .p-about-media__dangomushi img:nth-child(3) {
    bottom: 5.7rem;
    left: -21.8rem;
    width: 6.5rem;
  }
}

.p-about-media__turtle {
  position: absolute;
  top: -0.5rem;
  right: 0;
  z-index: 1;
  width: 6.6rem;
  pointer-events: none;
}
@media only screen and (min-width: 768px) {
  .p-about-media__turtle {
    top: -1.6rem;
    width: 13.2rem;
  }
}

.p-about-media__turtle img {
  width: 100%;
}

.p-about-media--art .l-inner {
  position: relative;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 6rem;
}
@media only screen and (min-width: 768px) {
  .p-about-media--art .l-inner {
    gap: 10rem;
  }
}

.p-about-media--art .p-about-media__img {
  right: calc((min(100vw, 1160px) - 100vw) / 2 - 20px);
  left: 0;
  border-radius: 2rem 0 0 2rem;
}
@media only screen and (min-width: 768px) {
  .p-about-media--art .p-about-media__img {
    right: calc((min(100vw, 1160px) - 100vw) / 2 - 30px);
    border-radius: 6rem 0 0 6rem;
  }
}

.p-about-media--art .p-about-media__title img {
  height: 3rem;
}
@media only screen and (min-width: 768px) {
  .p-about-media--art .p-about-media__title img {
    height: 5rem;
  }
}

/* ------------------------------------------------
p-about-greeting（ごあいさつ）
--------------------------------------------------- */
.p-about-greeting {
  position: relative;
  padding-block: 4rem 10rem;
}
@media only screen and (min-width: 768px) {
  .p-about-greeting {
    padding-block: 4rem 24rem;
  }
}

.p-about-greeting::after {
  background-image: url("../img/common/cloud_light-blue.svg");
}

.p-about-greeting__suzumushi {
  position: absolute;
  top: calc(-5.8333333333vw - 3.5rem);
  left: calc(13.8888888889vw - 3rem);
  z-index: 1;
  width: 6rem;
  pointer-events: none;
}
@media only screen and (min-width: 768px) {
  .p-about-greeting__suzumushi {
    top: calc(-5.8333333333vw - 6.9rem);
    left: calc(13.8888888889vw - 6rem);
    width: 12rem;
  }
}

.p-about-greeting__suzumushi img {
  width: 100%;
  -webkit-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
  -webkit-animation: suzumushi-shake 2.4s linear infinite;
          animation: suzumushi-shake 2.4s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .p-about-greeting__suzumushi img {
    -webkit-animation: none;
            animation: none;
  }
}
@-webkit-keyframes suzumushi-shake {
  0%, 100% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  4%, 12%, 20%, 28% {
    -webkit-transform: rotate(-3deg);
            transform: rotate(-3deg);
  }
  8%, 16%, 24% {
    -webkit-transform: rotate(3deg);
            transform: rotate(3deg);
  }
  32% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  50% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  54%, 62% {
    -webkit-transform: rotate(-3deg);
            transform: rotate(-3deg);
  }
  58%, 66% {
    -webkit-transform: rotate(3deg);
            transform: rotate(3deg);
  }
  70% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
}
@keyframes suzumushi-shake {
  0%, 100% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  4%, 12%, 20%, 28% {
    -webkit-transform: rotate(-3deg);
            transform: rotate(-3deg);
  }
  8%, 16%, 24% {
    -webkit-transform: rotate(3deg);
            transform: rotate(3deg);
  }
  32% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  50% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  54%, 62% {
    -webkit-transform: rotate(-3deg);
            transform: rotate(-3deg);
  }
  58%, 66% {
    -webkit-transform: rotate(3deg);
            transform: rotate(3deg);
  }
  70% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
}
.p-about-greeting__contents {
  position: relative;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 4rem;
}
@media only screen and (min-width: 768px) {
  .p-about-greeting__contents {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 8.8rem;
  }
}

.p-about-greeting__body {
  display: contents;
}
@media only screen and (min-width: 768px) {
  .p-about-greeting__body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 3rem;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    gap: 6rem;
  }
}

.p-about-greeting__title {
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
}
@media only screen and (min-width: 768px) {
  .p-about-greeting__title {
    -webkit-box-ordinal-group: initial;
        -ms-flex-order: initial;
            order: initial;
    width: 25.7rem;
  }
}

.p-about-greeting__group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 3rem;
  -webkit-box-ordinal-group: 4;
      -ms-flex-order: 3;
          order: 3;
}
@media only screen and (min-width: 768px) {
  .p-about-greeting__group {
    -webkit-box-ordinal-group: initial;
        -ms-flex-order: initial;
            order: initial;
  }
}

.p-about-greeting__text {
  font-size: 1.5rem;
  line-height: 1.8;
  letter-spacing: 0.02em;
  text-align: justify;
}
@media only screen and (min-width: 768px) {
  .p-about-greeting__text {
    font-size: 1.7rem;
  }
}

.p-about-greeting__name {
  font-size: 1.5rem;
  line-height: 1.8;
  letter-spacing: 0.02em;
  text-align: right;
}
@media only screen and (min-width: 768px) {
  .p-about-greeting__name {
    font-size: 1.7rem;
  }
}

.p-about-greeting__img {
  -ms-flex-item-align: center;
      align-self: center;
  overflow: hidden;
  max-width: 400px;
  margin-inline: auto;
  width: 100%;
  aspect-ratio: 500/400;
  border-radius: 4rem;
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
}
@media only screen and (min-width: 768px) {
  .p-about-greeting__img {
    max-width: initial;
    aspect-ratio: 400/400;
    width: 40rem;
    border-radius: 6rem;
    -webkit-box-ordinal-group: initial;
        -ms-flex-order: initial;
            order: initial;
  }
}
.p-about-greeting__img img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

@media (any-hover: hover) {
  .p-about-media__banner a:hover {
    opacity: 0.7;
  }
}
/* ------------------------------------------------
p-access
--------------------------------------------------- */
.p-access__wrapper {
  background-color: #0dbaf7;
  position: relative;
}
.p-access__wrapper::before {
  content: "";
  position: absolute;
  bottom: calc(100% - 1px);
  left: 0;
  width: 100%;
  height: 7.6rem;
  /* 同じ絵を2枚敷き、2枚目を 6px ずらしてある。
     Safari は絵を「指定した枠より左右それぞれ約2.5px内側」にしか描かないので、
     1枚だけ繰り返すと継ぎ目に隙間（下地の色の縦線）が出る。
     2枚目をずらしておくと、その隙間を2枚目の本体が塞ぐ。
     ずらし量は実測で決めた（4px以下だと隙間が残り、5px以上で消える）。
     位置を変えたいときは background-position ではなく --cloud-x を書き換えること */
  --cloud-w: 72.96rem;
  --cloud-x: 50%;
  background-image: url(../img/common/cloud_light-blue.svg), url(../img/common/cloud_light-blue.svg);
  background-repeat: repeat-x;
  background-size: var(--cloud-w) 100%;
  background-position: var(--cloud-x) bottom, calc(var(--cloud-x) + 6px) bottom;
}
@media only screen and (min-width: 768px) {
  .p-access__wrapper::before {
    height: 18rem;
    --cloud-w: 172.8rem;
    --cloud-x: 50%;
  }
}

/* ------------------------------------------------
p-access-location（所在地）
--------------------------------------------------- */
.p-access-location {
  padding-block: 5rem 12rem;
}
@media only screen and (min-width: 768px) {
  .p-access-location {
    padding-block: 10rem 30rem;
  }
}

.p-access-location__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 3rem;
}
@media only screen and (min-width: 768px) {
  .p-access-location__inner {
    gap: 8rem;
  }
}

@media only screen and (min-width: 768px) {
  .p-access-location__title {
    width: 17.3rem;
  }
}

.p-access-location__map {
  overflow: hidden;
  aspect-ratio: 1100/600;
  background-color: #d9d9d9;
  border-radius: 1rem;
}
@media only screen and (min-width: 768px) {
  .p-access-location__map {
    border-radius: 2rem;
  }
}
.p-access-location__map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.p-access-location__tables {
  display: grid;
  gap: 2rem;
}
@media only screen and (min-width: 768px) {
  .p-access-location__tables {
    grid-template-columns: repeat(2, 1fr);
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    gap: 3rem;
  }
}

/* ------------------------------------------------
p-access-heading
--------------------------------------------------- */
.p-access-heading {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 1.5rem;
}
@media only screen and (min-width: 768px) {
  .p-access-heading {
    gap: 3rem;
  }
}
.p-access-heading > img {
  width: auto;
  height: 2.8rem;
  -webkit-filter: brightness(0) invert(1);
          filter: brightness(0) invert(1);
}
@media only screen and (min-width: 768px) {
  .p-access-heading > img {
    height: 5.2rem;
  }
}

.p-access-heading__icon--bus {
  width: 4rem;
}
@media only screen and (min-width: 768px) {
  .p-access-heading__icon--bus {
    width: 7.6rem;
  }
}

.p-access-heading__icon--car {
  width: 6rem;
}
@media only screen and (min-width: 768px) {
  .p-access-heading__icon--car {
    width: 11.5rem;
  }
}

.p-access-box {
  padding-block: 3rem;
  padding-inline: 2rem;
  color: #222222;
  background-color: #fff;
  border: 0.4rem solid #ffde38;
  border-radius: 1.2rem;
}
@media only screen and (min-width: 768px) {
  .p-access-box {
    padding-block: 6rem;
    padding-inline: 6rem;
    border-width: 0.8rem;
    border-radius: 2rem;
  }
}

/* ------------------------------------------------
p-access-bus
--------------------------------------------------- */
.p-access-bus {
  position: relative;
  padding-block: 5rem;
  color: #fff;
}
@media only screen and (min-width: 768px) {
  .p-access-bus {
    padding-block: 10rem;
  }
}

.p-access-bus__contents {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 4rem;
}
@media only screen and (min-width: 768px) {
  .p-access-bus__contents {
    max-width: 98rem;
    margin-inline: auto;
    gap: 8rem;
  }
}

.p-access-bus__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2rem;
}
@media only screen and (min-width: 768px) {
  .p-access-bus__head {
    gap: 6rem;
  }
}

.p-access-bus__lead {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 2;
  letter-spacing: 0.02em;
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .p-access-bus__lead {
    font-size: 1.7rem;
  }
}

.p-access-bus__body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 4rem;
}
@media only screen and (min-width: 768px) {
  .p-access-bus__body {
    gap: 6rem;
  }
}

.p-access-bus__block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 2rem;
}
@media only screen and (min-width: 768px) {
  .p-access-bus__block {
    gap: 3rem;
  }
}

.p-access-bus__stop {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 2rem;
}

.p-access-bus__name {
  padding-bottom: 0.3rem;
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.02em;
  border-bottom: 0.2rem solid #ffde38;
}
@media only screen and (min-width: 768px) {
  .p-access-bus__name {
    font-size: 3rem;
    border-bottom: 0.4rem solid #ffde38;
  }
}

.p-access-bus__texts {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1.5rem;
}
@media only screen and (min-width: 768px) {
  .p-access-bus__texts {
    gap: 2rem;
  }
}

.p-access-bus__btn {
  -ms-flex-item-align: center;
      align-self: center;
}

.p-access-bus__note a {
  text-decoration: underline;
  text-underline-offset: 0.3em;
  -webkit-transition: color 0.3s ease;
  transition: color 0.3s ease;
}
@media (any-hover: hover) {
  .p-access-bus__note a:hover {
    color: #ef5a07;
  }
}

/* ------------------------------------------------
p-access-car
--------------------------------------------------- */
.p-access-car {
  position: relative;
  padding-block: 5rem 13rem;
}
@media only screen and (min-width: 768px) {
  .p-access-car {
    padding-block: 10rem 30rem;
  }
}
.p-access-car::after {
  content: "";
  position: absolute;
  bottom: calc(100% - 1px);
  left: 0;
  width: 100%;
  height: 7.6rem;
  /* 同じ絵を2枚敷き、2枚目を 6px ずらしてある。
     Safari は絵を「指定した枠より左右それぞれ約2.5px内側」にしか描かないので、
     1枚だけ繰り返すと継ぎ目に隙間（下地の色の縦線）が出る。
     2枚目をずらしておくと、その隙間を2枚目の本体が塞ぐ。
     ずらし量は実測で決めた（4px以下だと隙間が残り、5px以上で消える）。
     位置を変えたいときは background-position ではなく --cloud-x を書き換えること */
  --cloud-w: 72.96rem;
  --cloud-x: 50%;
  background-image: url(../img/common/cloud_gray.svg), url(../img/common/cloud_gray.svg);
  background-repeat: repeat-x;
  background-size: var(--cloud-w) 100%;
  background-position: var(--cloud-x) bottom, calc(var(--cloud-x) + 6px) bottom;
}
@media only screen and (min-width: 768px) {
  .p-access-car::after {
    height: 18rem;
    --cloud-w: 172.8rem;
    --cloud-x: 50%;
  }
}
.p-access-car::after {
  bottom: -1px;
}

.p-access-car__contents {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 4rem;
}
@media only screen and (min-width: 768px) {
  .p-access-car__contents {
    max-width: 98rem;
    margin-inline: auto;
    gap: 8rem;
  }
}

.p-access-car__block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2rem;
}
@media only screen and (min-width: 768px) {
  .p-access-car__block {
    gap: 3rem;
  }
}

.p-access-car__items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2rem;
}
@media only screen and (min-width: 768px) {
  .p-access-car__items {
    gap: 3rem;
  }
}

.p-access-car__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 1.5rem;
}
@media only screen and (min-width: 768px) {
  .p-access-car__item {
    gap: 2rem;
  }
}

.p-access-car__item + .p-access-car__item {
  padding-top: 2rem;
  border-top: 0.2rem dashed #ffde38;
}
@media only screen and (min-width: 768px) {
  .p-access-car__item + .p-access-car__item {
    padding-top: 3rem;
  }
}

/* ------------------------------------------------
p-faq-list（よくいただくご質問）
--------------------------------------------------- */
.p-faq-list {
  padding-block: 6rem 2rem;
}
@media only screen and (min-width: 768px) {
  .p-faq-list {
    padding-block: 10rem;
  }
}

.p-faq-list__contents {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 5rem;
  max-width: 90rem;
  margin-inline: auto;
}
@media only screen and (min-width: 768px) {
  .p-faq-list__contents {
    gap: 10rem;
  }
}

@media only screen and (min-width: 768px) {
  .p-faq-list__title {
    width: 28rem;
  }
}

.p-faq-list__items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 4rem;
}
@media only screen and (min-width: 768px) {
  .p-faq-list__items {
    gap: 8rem;
  }
}

/* ------------------------------------------------
p-faq-menu（カテゴリの絞り込み）
--------------------------------------------------- */
.p-faq-menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 1.6rem 2.4rem;
  max-width: 63.5rem;
  margin-inline: auto;
}
@media only screen and (min-width: 768px) {
  .p-faq-menu {
    gap: 3rem 6rem;
  }
}

/* 丸バッジの中の矢印は、共通のシェブロンを90度倒して下向きにしている */
.p-faq-menu__btn {
  position: relative;
  padding-block: 0.6rem;
  padding-left: 2.6rem;
  color: #020202;
  font-family: "M PLUS 1p", sans-serif;
  font-size: 1.5rem;
  line-height: 1.5;
  letter-spacing: 0.02em;
  white-space: nowrap;
  background-color: transparent;
  border: none;
  border-bottom: 0.2rem dashed var(--faq-color);
  cursor: pointer;
  opacity: 0.5;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
@media only screen and (min-width: 768px) {
  .p-faq-menu__btn {
    padding-block: 1rem;
    padding-left: 3.7rem;
    font-size: 2.2rem;
  }
}
.p-faq-menu__btn::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 2rem;
  height: 2rem;
  content: "";
  background-color: var(--faq-color);
  border-radius: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
@media only screen and (min-width: 768px) {
  .p-faq-menu__btn::before {
    width: 2.7rem;
    height: 2.7rem;
  }
}
.p-faq-menu__btn::after {
  position: absolute;
  top: 50%;
  left: 1rem;
  width: 0.6rem;
  height: 1rem;
  content: "";
  background-color: #fff;
  -webkit-mask-image: url(../img/common/arrow.svg);
          mask-image: url(../img/common/arrow.svg);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center center;
          mask-position: center center;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-transform: translate(-50%, -50%) rotate(90deg);
          transform: translate(-50%, -50%) rotate(90deg);
}
@media only screen and (min-width: 768px) {
  .p-faq-menu__btn::after {
    left: 1.35rem;
    width: 0.8rem;
    height: 1.4rem;
  }
}

.p-faq-menu__btn.is-active {
  cursor: default;
  opacity: 1;
}

.p-faq-menu__btn--all {
  --faq-color: #ffde38;
}

.p-faq-menu__btn--use,
.p-faq-item--use {
  --faq-color: #ef5a07;
}

.p-faq-menu__btn--access,
.p-faq-item--access {
  --faq-color: #41c4ba;
}

.p-faq-menu__btn--event,
.p-faq-item--event {
  --faq-color: #18a000;
}

.p-faq-menu__btn--facility,
.p-faq-item--facility {
  --faq-color: #0dbaf7;
}

.p-faq-menu__btn--other,
.p-faq-item--other {
  --faq-color: #e43030;
}

/* ------------------------------------------------
p-faq-item（Q&Aのカード）
--------------------------------------------------- */
.p-faq-item__question {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
  padding-block: 1.4rem;
  padding-inline: 1.2rem;
  color: #fff;
  background-color: var(--faq-color);
  border-radius: 1.2rem 1.2rem 0 0;
}
@media only screen and (min-width: 768px) {
  .p-faq-item__question {
    gap: 2rem;
    padding-block: 1.95rem;
    padding-inline: 2rem;
    border-radius: 2rem 2rem 0 0;
  }
}

.p-faq-item__question .p-faq-item__text {
  font-size: 1.5rem;
  line-height: 1.5;
  letter-spacing: 0.02em;
}
@media only screen and (min-width: 768px) {
  .p-faq-item__question .p-faq-item__text {
    font-size: 2.2rem;
  }
}

/* 枠線は上辺だけ持たない。Q行の下端とそのままつながって1枚のカードに見える */
.p-faq-item__answer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 1rem;
  padding: 1.4rem;
  background-color: #fff;
  border: 0.4rem solid var(--faq-color);
  border-top: none;
  border-radius: 0 0 1.2rem 1.2rem;
}
@media only screen and (min-width: 768px) {
  .p-faq-item__answer {
    gap: 2rem;
    padding: 2rem;
    border-width: 0.8rem;
    border-radius: 0 0 2rem 2rem;
  }
}

.p-faq-item__mark {
  width: 2.4rem;
  color: #fff;
  font-family: "Comfortaa", sans-serif;
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.02em;
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .p-faq-item__mark {
    width: 3.9rem;
    font-size: 4.4rem;
  }
}

.p-faq-item__mark--a {
  width: 2.2rem;
  color: var(--faq-color);
  line-height: 1;
}
@media only screen and (min-width: 768px) {
  .p-faq-item__mark--a {
    width: 3.7rem;
  }
}

.p-faq-item__body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  gap: 2.5rem;
  padding-top: 0.4rem;
  font-size: 1.4rem;
  line-height: 1.8;
  letter-spacing: 0.02em;
}
@media only screen and (min-width: 768px) {
  .p-faq-item__body {
    gap: 3rem;
    padding-top: 0.8rem;
    font-size: 1.7rem;
  }
}

.p-faq-item__text strong {
  margin-left: -0.5em;
  font-weight: 700;
}
.p-faq-item__text a {
  color: inherit;
  text-decoration: underline;
  -webkit-transition: color 0.3s ease;
  transition: color 0.3s ease;
}

@media (any-hover: hover) {
  .p-faq-menu__btn:hover {
    opacity: 1;
  }
  .p-faq-item__text a:not([href^="tel:"]):hover {
    color: #ef5a07;
  }
}
/* ------------------------------------------------
p-guide-info（ご利用案内）
--------------------------------------------------- */
.p-guide-info {
  position: relative;
  overflow-x: clip;
  padding-block: 6rem 2rem;
}
@media only screen and (min-width: 768px) {
  .p-guide-info {
    padding-block: 10rem;
  }
}

.p-guide-info__deco {
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 100%;
  height: 100%;
  margin-inline: auto;
  pointer-events: none;
}
@media only screen and (min-width: 768px) {
  .p-guide-info__deco {
    width: 144rem;
  }
}

.p-guide-info__circle {
  position: absolute;
}

.p-guide-info__circle--left {
  top: 58.6666666667vw;
  left: -13rem;
  width: 22rem;
}
@media only screen and (min-width: 768px) {
  .p-guide-info__circle--left {
    top: 41rem;
    left: -3.4rem;
    width: 44rem;
  }
}

.p-guide-info__circle--right {
  top: 8rem;
  right: -11rem;
  width: 18rem;
}
@media only screen and (min-width: 768px) {
  .p-guide-info__circle--right {
    top: 16.3rem;
    right: -12rem;
    width: 40rem;
  }
}

/* カンプでは上下反転＋回転＋わずかな傾きが掛かっている。
   書き出したSVGには変換が入っていないので、外接矩形の中心が
   カンプと同じ位置に来るように置いてから CSS 側で変換する */
.p-guide-info__border {
  z-index: -1;
  position: absolute;
  top: 11rem;
  right: -8rem;
  width: 32.6rem;
  -webkit-transform: rotate(150deg) skewX(2.13deg) scaleY(-1);
          transform: rotate(150deg) skewX(2.13deg) scaleY(-1);
}
@media only screen and (min-width: 768px) {
  .p-guide-info__border {
    top: 22rem;
    right: -16rem;
    width: 65rem;
  }
}

.p-guide-info__tree {
  position: absolute;
}

.p-guide-info__tree--01 {
  bottom: -2.6rem;
  left: -1rem;
  width: 6rem;
}
@media only screen and (min-width: 768px) {
  .p-guide-info__tree--01 {
    bottom: 6.5rem;
    left: -19rem;
    width: 14rem;
  }
}

.p-guide-info__tree--02 {
  top: -7rem;
  right: -1rem;
  width: 5rem;
}
@media only screen and (min-width: 768px) {
  .p-guide-info__tree--02 {
    top: 10.6rem;
    right: -18.7rem;
    width: 14rem;
  }
}

.p-guide-info__tree--03 {
  bottom: 0;
  left: 0;
  width: 9.5rem;
}
@media only screen and (min-width: 768px) {
  .p-guide-info__tree--03 {
    bottom: -1.5rem;
    left: -8rem;
    width: 13.8rem;
  }
}

.p-guide-info__contents {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 4rem;
}
@media only screen and (min-width: 768px) {
  .p-guide-info__contents {
    gap: 8rem;
  }
}

@media only screen and (min-width: 768px) {
  .p-guide-info__title {
    width: 26.8rem;
  }
}

.p-guide-info__img {
  position: relative;
  margin-inline: auto;
  width: 100%;
  padding-inline: 2rem;
}
@media only screen and (min-width: 768px) {
  .p-guide-info__img {
    width: 72rem;
    padding-inline: 0;
  }
}
.p-guide-info__img img {
  border-radius: 2.4rem;
}
@media only screen and (min-width: 768px) {
  .p-guide-info__img img {
    border-radius: 4rem;
  }
}

.p-guide-info__tables {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2rem;
}
@media only screen and (min-width: 768px) {
  .p-guide-info__tables {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
  }
}

/* ------------------------------------------------
p-guide-calendar
--------------------------------------------------- */
.p-guide-calendar {
  padding-block: 6rem 12rem;
}
@media only screen and (min-width: 768px) {
  .p-guide-calendar {
    padding-block: 10rem 28rem;
  }
}

@media only screen and (min-width: 768px) {
  .p-guide-calendar .p-calendar-content__body {
    max-width: 98rem;
  }
}

/* ------------------------------------------------
p-guide-qa（施設のご利用にあたって）
--------------------------------------------------- */
.p-guide-qa {
  position: relative;
  padding-block: 7rem 8rem;
  background-color: #ffde38;
}
@media only screen and (min-width: 768px) {
  .p-guide-qa {
    padding-block: 10rem 16rem;
  }
}
.p-guide-qa::before {
  content: "";
  position: absolute;
  bottom: calc(100% - 1px);
  left: 0;
  width: 100%;
  height: 7rem;
  /* 同じ絵を2枚敷き、2枚目を 6px ずらしてある。
     Safari は絵を「指定した枠より左右それぞれ約2.5px内側」にしか描かないので、
     1枚だけ繰り返すと継ぎ目に隙間（下地の色の縦線）が出る。
     2枚目をずらしておくと、その隙間を2枚目の本体が塞ぐ。
     ずらし量は実測で決めた（4px以下だと隙間が残り、5px以上で消える）。
     位置を変えたいときは background-position ではなく --cloud-x を書き換えること */
  --cloud-w: 67.2rem;
  --cloud-x: calc(50% + 2rem);
  background-image: url(../img/common/cloud_yellow.svg), url(../img/common/cloud_yellow.svg);
  background-repeat: repeat-x;
  background-size: var(--cloud-w) 100%;
  background-position: var(--cloud-x) bottom, calc(var(--cloud-x) + 6px) bottom;
}
@media only screen and (min-width: 768px) {
  .p-guide-qa::before {
    height: 18rem;
    --cloud-w: 172.8rem;
    --cloud-x: 50%;
  }
}

.p-guide-qa__deco {
  position: absolute;
  top: 0;
  right: -4rem;
  width: 18rem;
  pointer-events: none;
}
@media only screen and (min-width: 768px) {
  .p-guide-qa__deco {
    top: -3.8rem;
    right: -6.3rem;
    width: 43.5rem;
  }
}

.p-guide-qa__contents {
  position: relative;
  z-index: 2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  max-width: 98rem;
  margin-inline: auto;
}
.p-guide-qa__title {
  height: 2.9rem;
}
@media only screen and (min-width: 768px) {
  .p-guide-qa__title {
    height: auto;
    width: 60.9rem;
  }
}

.p-guide-qa__lead {
  margin-top: 2.4rem;
}
@media only screen and (min-width: 768px) {
  .p-guide-qa__lead {
    margin-top: 4rem;
  }
}

.p-guide-qa__items {
  margin-top: 3rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2rem;
}
@media only screen and (min-width: 768px) {
  .p-guide-qa__items {
    margin-top: 7.7rem;
    gap: 4rem;
  }
}

/* ------------------------------------------------
p-guide-acc（開いて読む項目）
--------------------------------------------------- */
.p-guide-acc {
  background-color: #fff;
  border-radius: 1.5rem;
}

.p-guide-acc__head {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
  width: 100%;
  padding: 1.5rem 4.5rem 1.5rem 1.5rem;
  color: #020202;
  font-family: "M PLUS 1p", sans-serif;
  text-align: left;
  background-color: transparent;
  border: none;
  cursor: pointer;
}
@media only screen and (min-width: 768px) {
  .p-guide-acc__head {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 2rem;
    padding: 2rem 6.5rem 2rem 2rem;
  }
}
.p-guide-acc__head::after {
  position: absolute;
  top: 53%;
  right: 1.5rem;
  width: 1.8rem;
  height: 1rem;
  content: "";
  background-image: url(../img/guide/icon_accordion.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}
@media only screen and (min-width: 768px) {
  .p-guide-acc__head::after {
    top: 52%;
    right: 2rem;
    width: 2.5rem;
    height: 1.4rem;
  }
}

.p-guide-acc__title {
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.02em;
}
@media only screen and (min-width: 768px) {
  .p-guide-acc__title {
    font-size: 2.2rem;
  }
}

.p-guide-acc__body {
  display: none;
  padding: 0 1.5rem 1.5rem;
}
@media only screen and (min-width: 768px) {
  .p-guide-acc__body {
    padding: 0 2rem 2rem;
  }
}

.p-guide-acc__list {
  padding-top: 1.5rem;
  font-size: 1.5rem;
  line-height: 1.6;
  letter-spacing: 0.02em;
  border-top: 0.2rem dashed #ffde38;
}
@media only screen and (min-width: 768px) {
  .p-guide-acc__list {
    padding-top: 2rem;
    padding-inline: 2rem;
    font-size: 1.7rem;
    line-height: 1.8;
  }
}

.p-guide-acc__note {
  margin-top: 3rem;
  font-size: 1.7rem;
  padding-left: 1em;
  padding-bottom: 1rem;
  color: #e43030;
}

.p-guide-acc.is-open .p-guide-acc__head::after {
  -webkit-transform: translateY(-50%) rotate(180deg);
          transform: translateY(-50%) rotate(180deg);
}

/* ------------------------------------------------
p-guide-group（団体利用案内）
--------------------------------------------------- */
.p-guide-group {
  position: relative;
  overflow-x: clip;
  padding-block: 8rem 10rem;
}
@media only screen and (min-width: 768px) {
  .p-guide-group {
    padding-block: 16rem 24rem;
  }
}
.p-guide-group::before {
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 11.7333333333vw;
  content: "";
  background-image: url(../img/common/deco_book-yellow.svg);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: auto 100%;
  pointer-events: none;
}
@media only screen and (min-width: 768px) {
  .p-guide-group::before {
    height: 6.0857538036vw;
  }
}
.p-guide-group::after {
  position: absolute;
  bottom: -1px;
  left: 50%;
  width: 105%;
  height: 7.7777777778vw;
  content: "";
  background-color: #0dbaf7;
  border-radius: 50% 50% 0 0/93.59% 93.59% 0 0;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  pointer-events: none;
}

.p-guide-group__ladybug {
  position: absolute;
  top: -1.8rem;
  left: calc(100% - 6.2rem);
  z-index: 1;
  width: 3.2rem;
  pointer-events: none;
}
@media only screen and (min-width: 768px) {
  .p-guide-group__ladybug {
    top: -3.6rem;
    left: min(50% + 47.8rem, 100% - 9rem);
    width: 6.4rem;
  }
}

.p-guide-group__ladybug img {
  width: 100%;
}

.p-ladybug__img {
  display: block;
}

.p-ladybug__under {
  position: absolute;
  top: 0;
  left: 0;
  -webkit-filter: brightness(0.35);
          filter: brightness(0.35);
  clip-path: ellipse(37% 34% at 49% 54%);
}

.p-ladybug__wing {
  position: absolute;
  top: 32%;
  width: 48%;
  height: 66%;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.45);
  opacity: 0;
}

.p-ladybug__wing--left {
  right: 52%;
  -webkit-transform-origin: 100% 0;
          transform-origin: 100% 0;
}

.p-ladybug__wing--right {
  left: 48%;
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
}

.p-ladybug__shell {
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform-origin: 45% 25%;
          transform-origin: 45% 25%;
}

.p-ladybug__shell--left {
  clip-path: polygon(43% 21%, 31% 25%, 21% 32%, 14% 42%, 12% 54%, 14% 66%, 21% 76%, 30% 83%, 43% 87%, 55% 87%);
}

.p-ladybug__shell--right {
  clip-path: polygon(43% 21%, 55% 21%, 68% 25%, 77% 32%, 84% 42%, 86% 54%, 84% 66%, 77% 76%, 68% 83%, 55% 87%);
}

.p-guide-group__deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.p-guide-group__monument {
  position: absolute;
  top: 8rem;
  left: 2rem;
  width: 7rem;
}
@media only screen and (min-width: 768px) {
  .p-guide-group__monument {
    top: 16.4rem;
    left: 20.2rem;
    width: 14rem;
  }
}

.p-guide-group__star {
  position: absolute;
}

.p-guide-group__star--01 {
  top: 5.9rem;
  left: 0.6rem;
  width: 2.5rem;
}
@media only screen and (min-width: 768px) {
  .p-guide-group__star--01 {
    top: 11.8rem;
    left: 16.19rem;
    width: 4.91rem;
  }
}

.p-guide-group__star--02 {
  top: 8.3rem;
  left: 0;
  width: 1rem;
}
@media only screen and (min-width: 768px) {
  .p-guide-group__star--02 {
    top: 16.65rem;
    left: 14.1rem;
    width: 2.09rem;
  }
}

.p-guide-group__contents {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 4rem;
}
@media only screen and (min-width: 768px) {
  .p-guide-group__contents {
    gap: 8rem;
  }
}

@media only screen and (min-width: 768px) {
  .p-guide-group__title {
    width: 33.6rem;
  }
}

/* 四隅の点は飾り用の要素を足さず、背景の円4枚で描く */
.p-guide-group__announce {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1.5rem;
  padding-block: 3rem;
  padding-inline: 1.6rem;
  color: #ef5a07;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.02em;
  text-align: center;
  background-color: #fff;
  background-image: radial-gradient(circle, #ffde38 50%, transparent 51%), radial-gradient(circle, #ffde38 50%, transparent 51%), radial-gradient(circle, #ffde38 50%, transparent 51%), radial-gradient(circle, #ffde38 50%, transparent 51%);
  background-repeat: no-repeat;
  background-position: 1.2rem 1.2rem, calc(100% - 1.2rem) 1.2rem, 1.2rem calc(100% - 1.2rem), calc(100% - 1.2rem) calc(100% - 1.2rem);
  background-size: 1.2rem 1.2rem;
  border: 0.4rem solid #ffde38;
  border-radius: 1.2rem;
}
@media only screen and (min-width: 768px) {
  .p-guide-group__announce {
    gap: 2rem;
    padding-block: 6rem;
    padding-inline: 4rem;
    font-size: 2.2rem;
    border-width: 0.8rem;
    border-radius: 2rem;
  }
}

.p-guide-group__message {
  font-size: 1.8rem;
  text-align: left;
}
@media only screen and (min-width: 768px) {
  .p-guide-group__message {
    font-size: 2.4rem;
    text-align: center;
  }
}

.p-guide-group__tel {
  color: #020202;
  font-size: 1.5rem;
}
@media only screen and (min-width: 768px) {
  .p-guide-group__tel {
    font-size: 1.8rem;
  }
}

.p-guide-group__body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 3rem;
}
@media only screen and (min-width: 768px) {
  .p-guide-group__body {
    gap: 6rem;
  }
}

.p-guide-group__items {
  display: grid;
  gap: 4rem;
}
@media only screen and (min-width: 768px) {
  .p-guide-group__items {
    grid-template-columns: repeat(2, 1fr);
    gap: 6rem 8rem;
  }
}

.p-guide-group__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 1.5rem;
}
@media only screen and (min-width: 768px) {
  .p-guide-group__item {
    gap: 2rem;
  }
}

/* 段落の間隔はカンプの空行1行ぶん（本文の行送りと同じ） */
.p-guide-group__text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1.6rem;
  font-size: 1.4rem;
  line-height: 1.8;
  letter-spacing: 0.02em;
  padding-left: 0.8rem;
  text-align: justify;
}
@media only screen and (min-width: 768px) {
  .p-guide-group__text {
    gap: 3rem;
    font-size: 1.7rem;
  }
}

/* ------------------------------------------------
p-guide-osusume（団体向けおすすめメニュー）
--------------------------------------------------- */
.p-guide-osusume {
  position: relative;
  padding-block: 6rem 14rem;
  background-color: #0dbaf7;
}
@media only screen and (min-width: 768px) {
  .p-guide-osusume {
    padding-block: 6rem 22rem;
  }
}

.p-guide-osusume__deco {
  position: absolute;
  top: 3rem;
  left: -4rem;
  width: 21rem;
  opacity: 0.5;
  pointer-events: none;
}
@media only screen and (min-width: 768px) {
  .p-guide-osusume__deco {
    top: 5.5rem;
    left: -7.9rem;
    width: 42.2rem;
  }
}

.p-guide-osusume__inner {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 6rem;
}
@media only screen and (min-width: 768px) {
  .p-guide-osusume__inner {
    gap: 10rem;
  }
}

.p-guide-osusume__title {
  height: 2.8rem;
}
@media only screen and (min-width: 768px) {
  .p-guide-osusume__title {
    height: auto;
    width: 63.5rem;
  }
}

.p-guide-osusume__cards {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 5rem;
}
@media only screen and (min-width: 768px) {
  .p-guide-osusume__cards {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 3.3rem;
  }
}

.p-guide-osusume__visit {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 3rem;
}
@media only screen and (min-width: 768px) {
  .p-guide-osusume__visit {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    padding-inline: 5rem;
  }
}

.p-guide-osusume__body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2rem;
}
@media only screen and (min-width: 768px) {
  .p-guide-osusume__body {
    gap: 4rem;
    width: 52rem;
  }
}

.p-guide-osusume__text {
  color: #fff;
  font-size: 1.5rem;
  line-height: 1.8;
  letter-spacing: 0.02em;
}
@media only screen and (min-width: 768px) {
  .p-guide-osusume__text {
    font-size: 1.7rem;
  }
}

.p-guide-osusume__photo {
  width: 100%;
}
@media only screen and (min-width: 768px) {
  .p-guide-osusume__photo {
    width: 54rem;
  }
}

/* ------------------------------------------------
p-guide-card（おすすめメニューのカード）
--------------------------------------------------- */
/* PCではカンプどおり3枚を段違いに置く。段差はカードの margin-top だけで作る */
.p-guide-card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1.6rem;
}
@media only screen and (min-width: 768px) {
  .p-guide-card {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
  }
}

@media only screen and (min-width: 768px) {
  .p-guide-card--01 {
    margin-top: 8.4rem;
  }
}

@media only screen and (min-width: 768px) {
  .p-guide-card--03 {
    margin-top: 10rem;
  }
}

.p-guide-card__img {
  position: relative;
  display: block;
  width: calc(100% - 4rem);
  max-width: 33.8rem;
  aspect-ratio: 378/382;
}
@media only screen and (min-width: 768px) {
  .p-guide-card__img {
    width: 100%;
    max-width: 37.8rem;
  }
}

.p-guide-card__ring {
  position: absolute;
  inset: 0;
}

.p-guide-card__photo {
  position: absolute;
  top: 3.33%;
  left: 3.17%;
  width: 92.59%;
  height: 93.33%;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-mask-image: url(../img/haken/circle_mask01.svg);
          mask-image: url(../img/haken/circle_mask01.svg);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center center;
          mask-position: center center;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
}

.p-guide-card__title {
  color: #fff;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.02em;
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .p-guide-card__title {
    font-size: 2.4rem;
  }
}
.p-guide-card__title span {
  font-size: 1.6rem;
}
@media only screen and (min-width: 768px) {
  .p-guide-card__title span {
    font-size: 2.2rem;
  }
}

.p-guide-card__text {
  width: 100%;
  color: #fff;
  font-size: 1.5rem;
  line-height: 1.8;
  letter-spacing: 0.02em;
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .p-guide-card__text {
    font-size: 1.7rem;
  }
}

.p-guide-card__balloon {
  position: absolute;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
  top: 1rem;
  right: -2rem;
  width: 13rem;
}
@media only screen and (min-width: 768px) {
  .p-guide-card__balloon {
    opacity: 0;
    top: -5.4rem;
    right: -2.5rem;
    width: 20rem;
  }
}

.p-guide-modal {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  padding: 0;
  overflow-y: auto;
  color: inherit;
  -ms-scroll-chaining: none;
      overscroll-behavior: contain;
  background-color: rgba(2, 2, 2, 0.5);
  border: none;
}
.p-guide-modal::-ms-backdrop {
  background-color: transparent;
}
.p-guide-modal::backdrop {
  background-color: transparent;
}

.p-guide-modal__container {
  display: grid;
  place-items: center;
  min-height: 100%;
  padding-block: 11.2rem 4rem;
  padding-inline: 2.4rem;
}
@media only screen and (min-width: 768px) {
  .p-guide-modal__container {
    padding-block: 7.3rem;
    padding-inline: 7rem;
  }
}

.p-guide-modal__box {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2.4rem;
  width: 100%;
  max-width: 110rem;
  padding: 2.4rem 2rem 3.2rem;
  background-color: #fff;
}
@media only screen and (min-width: 768px) {
  .p-guide-modal__box {
    gap: 4rem;
    padding: 3rem 5rem 5rem;
  }
}

.p-guide-modal__close {
  position: absolute;
  bottom: calc(100% + 1.4rem);
  right: 0;
  width: 2.2rem;
  aspect-ratio: 1/1;
}
@media only screen and (min-width: 768px) {
  .p-guide-modal__close {
    top: 0;
    bottom: auto;
    right: -4.5rem;
  }
}
.p-guide-modal__close::before, .p-guide-modal__close::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3rem;
  height: 0.2rem;
  content: "";
  background-color: #fff;
}
.p-guide-modal__close::before {
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
          transform: translate(-50%, -50%) rotate(45deg);
}
.p-guide-modal__close::after {
  -webkit-transform: translate(-50%, -50%) rotate(-45deg);
          transform: translate(-50%, -50%) rotate(-45deg);
}

.p-guide-modal__title {
  padding-bottom: 1.2rem;
  color: #000;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.5;
  border-bottom: 0.5rem solid #ffde38;
}
@media only screen and (min-width: 768px) {
  .p-guide-modal__title {
    padding-bottom: 1rem;
    font-size: 4rem;
  }
}
.p-guide-modal__title span {
  font-size: 2rem;
}
@media only screen and (min-width: 768px) {
  .p-guide-modal__title span {
    font-size: 3.2rem;
  }
}

.p-guide-modal__contents {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 4rem;
}
@media only screen and (min-width: 768px) {
  .p-guide-modal__contents {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 5rem;
  }
}

.p-guide-modal__info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2.4rem;
}
@media only screen and (min-width: 768px) {
  .p-guide-modal__info {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    gap: 4rem;
  }
}
.p-guide-modal__info dd {
  font-size: 1.6rem;
  line-height: 1.8;
}
@media only screen and (min-width: 768px) {
  .p-guide-modal__info dd {
    font-size: 1.8rem;
  }
}
.p-guide-modal__info li {
  padding-left: 1em;
  text-indent: -1em;
}
.p-guide-modal__info a {
  text-decoration: underline;
  -webkit-transition: color 0.3s ease;
  transition: color 0.3s ease;
}
@media (any-hover: hover) {
  .p-guide-modal__info a:hover {
    color: #ef5a07;
  }
}

.p-guide-modal__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 1rem;
}

.p-guide-modal__note {
  margin-top: 0.4rem;
  font-size: 1.4rem;
  line-height: 1.5;
}
@media only screen and (min-width: 768px) {
  .p-guide-modal__note {
    font-size: 1.6rem;
  }
}

@media only screen and (min-width: 768px) {
  .p-guide-modal__info--full {
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
    width: 100%;
  }
}

.p-guide-modal__body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 4rem;
}
@media only screen and (min-width: 768px) {
  .p-guide-modal__body {
    width: 58rem;
  }
}

.p-guide-modal__link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media only screen and (min-width: 768px) {
  .p-guide-modal__link {
    width: 100%;
  }
}

.p-guide-modal__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1.8em;
}

.p-guide-modal__crafts {
  display: grid;
  gap: 3.2rem;
}
@media only screen and (min-width: 768px) {
  .p-guide-modal__crafts {
    grid-template-columns: repeat(3, 1fr);
  }
}

.p-guide-modal__photo {
  aspect-ratio: 580/400;
}
.p-guide-modal__photo img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.p-guide-craft {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1.5rem;
}

.p-guide-craft__img {
  width: 17.2rem;
  aspect-ratio: 1/1;
  background-color: #d9d9d9;
}
@media only screen and (min-width: 768px) {
  .p-guide-craft__img {
    width: 100%;
  }
}

.p-guide-craft__img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.p-guide-craft__name {
  font-size: 1.6rem;
  line-height: 1.8;
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .p-guide-craft__name {
    font-size: 1.8rem;
  }
}

.p-guide-craft__note {
  width: 100%;
  font-size: 1.4rem;
  line-height: 1.5;
}
@media only screen and (min-width: 768px) {
  .p-guide-craft__note {
    font-size: 1.6rem;
  }
}

/* ------------------------------------------------
p-guide-kashikan（貸館利用案内）
--------------------------------------------------- */
.p-guide-kashikan {
  position: relative;
  padding-block: 6rem;
}
@media only screen and (min-width: 768px) {
  .p-guide-kashikan {
    padding-block: 10rem;
  }
}
.p-guide-kashikan::before {
  content: "";
  position: absolute;
  bottom: calc(100% - 1px);
  left: 0;
  width: 100%;
  height: 7.6rem;
  /* 同じ絵を2枚敷き、2枚目を 6px ずらしてある。
     Safari は絵を「指定した枠より左右それぞれ約2.5px内側」にしか描かないので、
     1枚だけ繰り返すと継ぎ目に隙間（下地の色の縦線）が出る。
     2枚目をずらしておくと、その隙間を2枚目の本体が塞ぐ。
     ずらし量は実測で決めた（4px以下だと隙間が残り、5px以上で消える）。
     位置を変えたいときは background-position ではなく --cloud-x を書き換えること */
  --cloud-w: 72.96rem;
  --cloud-x: calc(50% + 5.57rem);
  background-image: url(../img/common/cloud_gray.svg), url(../img/common/cloud_gray.svg);
  background-repeat: repeat-x;
  background-size: var(--cloud-w) 100%;
  background-position: var(--cloud-x) bottom, calc(var(--cloud-x) + 6px) bottom;
}
@media only screen and (min-width: 768px) {
  .p-guide-kashikan::before {
    height: 18rem;
    --cloud-w: 172.8rem;
    --cloud-x: 50%;
  }
}

.p-guide-kashikan__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 4rem;
}
@media only screen and (min-width: 768px) {
  .p-guide-kashikan__inner {
    gap: 8rem;
  }
}

@media only screen and (min-width: 768px) {
  .p-guide-kashikan__title {
    width: 61.1rem;
  }
}

.p-guide-kashikan__contents {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 6rem;
}
@media only screen and (min-width: 768px) {
  .p-guide-kashikan__contents {
    gap: 10rem;
  }
}

.p-guide-kashikan__block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2.5rem;
}
@media only screen and (min-width: 768px) {
  .p-guide-kashikan__block {
    gap: 4rem;
  }
}

@media only screen and (min-width: 768px) {
  .p-guide-kashikan__block--wide {
    gap: 6rem;
  }
}

.p-guide-kashikan__rooms {
  display: grid;
  gap: 1.6rem;
}
@media only screen and (min-width: 768px) {
  .p-guide-kashikan__rooms {
    grid-template-columns: repeat(3, 1fr);
  }
}

.p-guide-kashikan__map {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media only screen and (min-width: 768px) {
  .p-guide-kashikan__map {
    margin-top: 2rem;
  }
}

.p-guide-kashikan__prices {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 3rem;
}
@media only screen and (min-width: 768px) {
  .p-guide-kashikan__prices {
    gap: 4rem;
  }
}

.p-guide-kashikan__flows {
  display: grid;
  gap: 2rem;
}
@media only screen and (min-width: 768px) {
  .p-guide-kashikan__flows {
    grid-template-columns: repeat(4, 1fr);
    gap: 4rem;
  }
}

.p-guide-kashikan__btns {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 3rem;
}
@media only screen and (min-width: 768px) {
  .p-guide-kashikan__btns {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 8rem;
    margin-top: 4rem;
  }
}

.p-guide-kashikan__btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1.2rem;
}
@media only screen and (min-width: 768px) {
  .p-guide-kashikan__btn {
    gap: 1.6rem;
  }
}

/* 文字の左右に置く飾りは要素を足さずに擬似要素で作る */
.p-guide-kashikan__lead {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
  font-size: 1.5rem;
  line-height: 1.7;
  letter-spacing: 0.02em;
}
@media only screen and (min-width: 768px) {
  .p-guide-kashikan__lead {
    gap: 1.5rem;
    font-size: 1.7rem;
  }
}
.p-guide-kashikan__lead::before, .p-guide-kashikan__lead::after {
  width: 1rem;
  height: 2.1rem;
  content: "";
  background-image: url(../img/guide/icon_accent.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}
@media only screen and (min-width: 768px) {
  .p-guide-kashikan__lead::before, .p-guide-kashikan__lead::after {
    width: 1.2rem;
    height: 2.52rem;
  }
}
.p-guide-kashikan__lead::after {
  -webkit-transform: scaleX(-1);
          transform: scaleX(-1);
}

.p-guide-kashikan__text {
  font-size: 1.5rem;
  line-height: 1.8;
  letter-spacing: 0.02em;
}
@media only screen and (min-width: 768px) {
  .p-guide-kashikan__text {
    font-size: 1.7rem;
  }
}

/* ------------------------------------------------
p-guide-room（貸館の部屋カード）
--------------------------------------------------- */
.p-guide-room {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 1.5rem;
  padding: 2rem;
  border-radius: 2rem;
}
@media only screen and (min-width: 768px) {
  .p-guide-room {
    padding: 2.8rem;
  }
}

.p-guide-room--hall {
  background-color: #e43030;
}

.p-guide-room--theater {
  background-color: #18a000;
}

.p-guide-room--seminar {
  background-color: #0dbaf7;
}

.p-guide-room__floor {
  display: grid;
  place-content: center;
  width: 8rem;
  padding-block: 0.3rem;
  font-size: 1.5rem;
  line-height: 1.5;
  letter-spacing: 0.02em;
  background-color: #fff;
  border-radius: 0.5rem;
}
@media only screen and (min-width: 768px) {
  .p-guide-room__floor {
    font-size: 1.7rem;
  }
}

.p-guide-room__name {
  color: #fff;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.02em;
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .p-guide-room__name {
    font-size: 2.2rem;
  }
}

/* 部屋名との間だけカンプが広いので、その差分をこちらが持つ */
.p-guide-room__img {
  width: 100%;
  max-width: 30rem;
}
@media only screen and (min-width: 768px) {
  .p-guide-room__img {
    margin-top: 1rem;
  }
}
.p-guide-room__img img {
  aspect-ratio: 5/3;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 2rem;
}

/* ------------------------------------------------
p-guide-price（利用料金の表）
--------------------------------------------------- */
.p-guide-price {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 1.6rem;
}
@media only screen and (min-width: 768px) {
  .p-guide-price {
    gap: 2rem;
  }
}

.p-guide-price__label {
  padding-block: 0.2rem;
  padding-inline: 2rem;
  color: #fff;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.8;
  letter-spacing: 0.02em;
  border-radius: 5rem;
}
@media only screen and (min-width: 768px) {
  .p-guide-price__label {
    padding-inline: 2.4rem;
    font-size: 1.7rem;
  }
}

.p-guide-price__label--hall {
  background-color: #e43030;
}

.p-guide-price__label--theater {
  background-color: #18a000;
}

.p-guide-price__label--seminar {
  background-color: #0dbaf7;
}

/* 4列の表は狭い画面で潰すと読めないので、この箱の中だけ横に送る */
.p-guide-price__scroll {
  width: 100%;
  overflow-x: auto;
}

.p-guide-price__table {
  width: 100%;
  min-width: 60rem;
  overflow: hidden;
  background-color: #ffde38;
  border: 0.2rem solid #ffde38;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 1.5rem;
  table-layout: fixed;
}
@media only screen and (min-width: 768px) {
  .p-guide-price__table {
    min-width: 0;
  }
}
.p-guide-price__table th {
  padding-block: 1rem;
  padding-inline: 1.5rem;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.02em;
  text-align: center;
  vertical-align: middle;
  background-color: #ffde38;
}
@media only screen and (min-width: 768px) {
  .p-guide-price__table th {
    padding-block: 1.5rem;
    padding-inline: 2rem;
    font-size: 1.7rem;
  }
}
.p-guide-price__table td {
  padding-block: 1rem;
  padding-inline: 1.5rem;
  font-family: "Comfortaa", sans-serif;
  font-size: 1.5rem;
  line-height: 1.5;
  letter-spacing: 0.02em;
  text-align: center;
  vertical-align: middle;
  background-color: #fff;
  border-right: 0.1rem dashed #ffde38;
}
@media only screen and (min-width: 768px) {
  .p-guide-price__table td {
    padding-block: 1.5rem;
    padding-inline: 2rem;
    font-size: 1.7rem;
    border-right: 0.2rem dashed #ffde38;
  }
}
.p-guide-price__table thead th {
  height: 3rem;
  padding-block: 0;
  line-height: 1.7;
  border-right: 0.1rem dashed #fff;
}
@media only screen and (min-width: 768px) {
  .p-guide-price__table thead th {
    height: 3.4rem;
    border-right: 0.2rem dashed #fff;
  }
}
.p-guide-price__table thead th:last-child {
  border-right: none;
}
.p-guide-price__table thead tr:first-child th:nth-child(1) {
  width: 14.5%;
}
.p-guide-price__table thead tr:first-child th:nth-child(2) {
  width: 32.7%;
}
.p-guide-price__table tbody th {
  border-top: 0.1rem dashed #fff;
}
@media only screen and (min-width: 768px) {
  .p-guide-price__table tbody th {
    border-top: 0.2rem dashed #fff;
  }
}
.p-guide-price__table tbody tr:nth-child(even) td {
  background-color: #fff4d1;
}
.p-guide-price__table td:last-child {
  border-right: none;
}

.p-guide-price__table .p-guide-price__holiday {
  background-color: #f36b6b;
  border-right: none;
  border-radius: 1.5rem 1.5rem 0 0;
}

.p-guide-price__table .p-guide-price__weekday {
  background-color: #6ad4f9;
  border-radius: 1.5rem 1.5rem 0 0;
}

/* ------------------------------------------------
p-guide-flow（利用申込みの流れ）
--------------------------------------------------- */
.p-guide-flow {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 2rem;
  padding-block: 2rem;
  padding-inline: 2rem;
  background-color: #fff;
  border: 0.2rem solid #ffde38;
  border-radius: 2rem;
}
@media only screen and (min-width: 768px) {
  .p-guide-flow {
    padding-block: 2.4rem;
  }
}

.p-guide-flow:not(:last-child) {
  position: relative;
}
.p-guide-flow:not(:last-child)::before {
  position: absolute;
  content: "";
  bottom: -2rem;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 2.4rem;
  height: 2rem;
  background-color: #ffde38;
  clip-path: polygon(0 0, 50% 100%, 100% 0);
}
@media only screen and (min-width: 768px) {
  .p-guide-flow:not(:last-child)::before {
    bottom: initial;
    left: initial;
    top: 50%;
    right: -3.5rem;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    width: 2.4rem;
    height: 3rem;
    clip-path: polygon(0 0, 0% 100%, 100% 50%);
  }
}

.p-guide-flow__step img {
  width: auto;
  height: 1.8rem;
}
@media only screen and (min-width: 768px) {
  .p-guide-flow__step img {
    height: 2.2rem;
  }
}

.p-guide-flow__body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1.5rem;
  width: 100%;
  padding-top: 2rem;
  border-top: 0.2rem solid #ffde38;
}
@media only screen and (min-width: 768px) {
  .p-guide-flow__body {
    gap: 2rem;
    padding-top: 3rem;
  }
}

.p-guide-flow__title {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0.05em;
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .p-guide-flow__title {
    font-size: 2.2rem;
  }
}

.p-guide-flow__text {
  font-size: 1.5rem;
  line-height: 1.7;
  letter-spacing: 0.02em;
}
@media only screen and (min-width: 768px) {
  .p-guide-flow__text {
    font-size: 1.7rem;
  }
}

@media only screen and (min-width: 768px) {
  .p-guide-card__img:hover .p-guide-card__balloon {
    opacity: 1;
  }
}
/* ------------------------------------------------
p-yellow-table
--------------------------------------------------- */
.p-yellow-table {
  display: grid;
  grid-template-columns: 9rem 1fr;
  grid-template-rows: auto 1fr;
  width: 100%;
  overflow: hidden;
  border: 0.2rem solid #ffde38;
  border-radius: 1.5rem;
}
@media only screen and (min-width: 768px) {
  .p-yellow-table {
    grid-template-columns: 12rem 1fr;
    height: 100%;
    border: 0.4rem solid #ffde38;
  }
}
.p-yellow-table:has(tr:nth-child(3)) {
  grid-template-rows: auto auto 1fr;
}
.p-yellow-table tbody,
.p-yellow-table tr {
  display: contents;
}
.p-yellow-table th {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 1rem;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.02em;
  text-align: center;
  background-color: #ffde38;
  border-bottom: 0.2rem dashed #fff;
}
@media only screen and (min-width: 768px) {
  .p-yellow-table th {
    padding: 2rem;
    font-size: 1.7rem;
  }
}
.p-yellow-table td {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 1.5rem;
  font-size: 1.5rem;
  line-height: 1.5;
  letter-spacing: 0.02em;
  background-color: #fff;
  font-weight: 600;
}
@media only screen and (min-width: 768px) {
  .p-yellow-table td {
    padding: 2rem;
    font-size: 1.7rem;
  }
}
.p-yellow-table tr:last-child th {
  border-bottom: none;
}
.p-yellow-table tr:nth-child(even) td {
  background-color: #fff4d1;
}
.p-yellow-table p + p {
  margin-top: 1.5rem;
}
.p-yellow-table a {
  color: inherit;
  text-decoration: underline;
  -webkit-transition: color 0.3s ease;
  transition: color 0.3s ease;
}

.p-yellow-table__note {
  font-size: 1.3rem;
  font-weight: 400;
}
@media only screen and (min-width: 768px) {
  .p-yellow-table__note {
    font-size: 1.5rem;
  }
}

@media (any-hover: hover) {
  .p-yellow-table a:not([href^="tel:"]):hover {
    color: #ef5a07;
  }
}
/* ------------------------------------------------
p-library-about（児童図書室について）
--------------------------------------------------- */
.p-library-about {
  position: relative;
  padding-block: 4rem 6rem;
}
@media only screen and (min-width: 768px) {
  .p-library-about {
    padding-block: 8rem 10rem;
  }
}

.p-library-about__contents {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 3rem;
}
@media only screen and (min-width: 768px) {
  .p-library-about__contents {
    gap: 6rem;
  }
}

.p-library-about__title {
  position: relative;
  width: 100%;
  max-width: 67.7rem;
  margin-inline: auto;
  aspect-ratio: 677/229;
}
.p-library-about__title > img {
  position: absolute;
  bottom: 6.55%;
  left: 8.55%;
  width: 81.39%;
}

.p-library-about__title-deco {
  position: absolute;
  pointer-events: none;
}

.p-library-about__title-deco--open {
  top: 0;
  left: 0;
  width: 17.28%;
}

.p-library-about__title-deco--stack {
  right: -4.65%;
  bottom: -11.1%;
  width: 14.77%;
}

.p-library-about__text {
  font-size: 1.5rem;
  line-height: 1.8;
  letter-spacing: 0.02em;
}
@media only screen and (min-width: 768px) {
  .p-library-about__text {
    font-size: 1.7rem;
    text-align: center;
  }
}

/* ------------------------------------------------
p-library-guide（児童図書室のご利用について）
--------------------------------------------------- */
.p-library-guide {
  position: relative;
  padding-block: 8rem 14rem;
  background-color: #0dbaf7;
}
@media only screen and (min-width: 768px) {
  .p-library-guide {
    padding-block: 16rem 30rem;
  }
}
.p-library-guide::before {
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 11.7333333333vw;
  content: "";
  background-image: url(../img/common/deco_book-beige.svg);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: auto 100%;
  pointer-events: none;
}
@media only screen and (min-width: 768px) {
  .p-library-guide::before {
    height: 6.0857538036vw;
  }
}

.p-library-guide__contents {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 4rem;
}
@media only screen and (min-width: 768px) {
  .p-library-guide__contents {
    gap: 8rem;
  }
}

.p-library-guide__title {
  height: 2.8rem;
}
@media only screen and (min-width: 768px) {
  .p-library-guide__title {
    height: auto;
    width: 65.3rem;
  }
}
.p-library-guide__title img {
  -webkit-filter: brightness(0) invert(1);
          filter: brightness(0) invert(1);
}

.p-library-guide__body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 3rem;
}
@media only screen and (min-width: 768px) {
  .p-library-guide__body {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 10rem;
  }
}

.p-library-guide__table {
  grid-template-columns: 10rem 1fr;
}
@media only screen and (min-width: 768px) {
  .p-library-guide__table {
    grid-template-columns: 18.7rem 1fr;
    width: 60.2rem;
  }
}

.p-library-guide__wrap {
  position: relative;
  height: 24rem;
}
@media only screen and (min-width: 768px) {
  .p-library-guide__wrap {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    height: 56.8rem;
  }
}

.p-library-guide__img {
  position: absolute;
  top: 0;
  right: calc((min(100vw, 1160px) - 100vw) / 2 - 20px);
  left: 0;
  overflow: hidden;
  height: 100%;
  border-radius: 3rem 0 0 3rem;
}
@media only screen and (min-width: 768px) {
  .p-library-guide__img {
    right: calc((min(100vw, 1160px) - 100vw) / 2 - 30px);
    border-radius: 6rem 0 0 6rem;
  }
}
.p-library-guide__img img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* ------------------------------------------------
p-library-appeal（児童図書室の魅力）
--------------------------------------------------- */
.p-library-appeal {
  position: relative;
  padding-block: 7rem 14rem;
  background-color: #ffde38;
}
@media only screen and (min-width: 768px) {
  .p-library-appeal {
    padding-block: 10rem 30rem;
  }
}
.p-library-appeal::before {
  content: "";
  position: absolute;
  bottom: calc(100% - 1px);
  left: 0;
  width: 100%;
  height: 7rem;
  /* 同じ絵を2枚敷き、2枚目を 6px ずらしてある。
     Safari は絵を「指定した枠より左右それぞれ約2.5px内側」にしか描かないので、
     1枚だけ繰り返すと継ぎ目に隙間（下地の色の縦線）が出る。
     2枚目をずらしておくと、その隙間を2枚目の本体が塞ぐ。
     ずらし量は実測で決めた（4px以下だと隙間が残り、5px以上で消える）。
     位置を変えたいときは background-position ではなく --cloud-x を書き換えること */
  --cloud-w: 67.2rem;
  --cloud-x: calc(50% + 2rem);
  background-image: url(../img/common/cloud_yellow.svg), url(../img/common/cloud_yellow.svg);
  background-repeat: repeat-x;
  background-size: var(--cloud-w) 100%;
  background-position: var(--cloud-x) bottom, calc(var(--cloud-x) + 6px) bottom;
}
@media only screen and (min-width: 768px) {
  .p-library-appeal::before {
    height: 18rem;
    --cloud-w: 172.8rem;
    --cloud-x: 50%;
  }
}

.p-library-appeal__contents {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 4rem;
}
@media only screen and (min-width: 768px) {
  .p-library-appeal__contents {
    gap: 8rem;
  }
}

@media only screen and (min-width: 768px) {
  .p-library-appeal__title {
    width: 40.6rem;
  }
}

.p-library-appeal__body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 4rem;
}
@media only screen and (min-width: 768px) {
  .p-library-appeal__body {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 6rem;
  }
}

.p-library-appeal__items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 4rem;
}
@media only screen and (min-width: 768px) {
  .p-library-appeal__items {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    gap: 6rem;
  }
}

.p-library-appeal__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
}

.p-library-appeal__text {
  font-size: 1.5rem;
  line-height: 1.8;
  letter-spacing: 0;
}
@media only screen and (min-width: 768px) {
  .p-library-appeal__text {
    font-size: 1.7rem;
  }
}
.p-library-appeal__text a {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.4rem;
  -webkit-transition: color 0.3s ease;
  transition: color 0.3s ease;
}

.p-library-appeal__imgs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 3rem;
}
@media only screen and (min-width: 768px) {
  .p-library-appeal__imgs {
    width: 38%;
    gap: 4rem;
  }
}

.p-library-appeal__img {
  padding-block: 1.35% 1.49%;
  padding-inline: 1.92%;
  background-image: url(../img/library/deco_blob-white.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
}
.p-library-appeal__img img {
  aspect-ratio: 1000/737;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-mask-image: url(../img/library/deco_blob-white.svg);
          mask-image: url(../img/library/deco_blob-white.svg);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center center;
          mask-position: center center;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
}

/* ------------------------------------------------
p-library-letter（図書だより・日程）
--------------------------------------------------- */
.p-library-letter {
  position: relative;
  padding-block: 7rem 0;
}
@media only screen and (min-width: 768px) {
  .p-library-letter {
    padding-block: 10rem;
  }
}
.p-library-letter::before {
  content: "";
  position: absolute;
  bottom: calc(100% - 1px);
  left: 0;
  width: 100%;
  height: 7.6rem;
  /* 同じ絵を2枚敷き、2枚目を 6px ずらしてある。
     Safari は絵を「指定した枠より左右それぞれ約2.5px内側」にしか描かないので、
     1枚だけ繰り返すと継ぎ目に隙間（下地の色の縦線）が出る。
     2枚目をずらしておくと、その隙間を2枚目の本体が塞ぐ。
     ずらし量は実測で決めた（4px以下だと隙間が残り、5px以上で消える）。
     位置を変えたいときは background-position ではなく --cloud-x を書き換えること */
  --cloud-w: 72.96rem;
  --cloud-x: calc(50% + 5.57rem);
  background-image: url(../img/common/cloud_gray.svg), url(../img/common/cloud_gray.svg);
  background-repeat: repeat-x;
  background-size: var(--cloud-w) 100%;
  background-position: var(--cloud-x) bottom, calc(var(--cloud-x) + 6px) bottom;
}
@media only screen and (min-width: 768px) {
  .p-library-letter::before {
    height: 18rem;
    --cloud-w: 172.8rem;
    --cloud-x: 50%;
  }
}

.p-library-letter--schedule {
  padding-block: 8rem 6rem;
}
@media only screen and (min-width: 768px) {
  .p-library-letter--schedule {
    padding-block: 10rem;
  }
}
.p-library-letter--schedule::before {
  content: none;
}

.p-library-letter--first {
  padding-top: 7rem;
}
.p-library-letter--first::before {
  content: "";
}

@media only screen and (min-width: 768px) {
  .p-library-letter--schedule .p-library-letter__title img {
    height: 5rem;
  }
}

.p-library-letter__contents {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 4rem;
}
@media only screen and (min-width: 768px) {
  .p-library-letter__contents {
    gap: 8rem;
    max-width: 98rem;
    margin-inline: auto;
  }
}

@media only screen and (min-width: 768px) {
  .p-library-letter__title {
    width: 23.7rem;
  }
}

@media only screen and (min-width: 768px) {
  .p-library-letter__title--schedule {
    width: 74rem;
  }
}

.p-library-letter__body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2rem;
}
@media only screen and (min-width: 768px) {
  .p-library-letter__body {
    gap: 4rem;
  }
}

.p-library-letter__subtitle {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.02em;
}
@media only screen and (min-width: 768px) {
  .p-library-letter__subtitle {
    font-size: 3.2rem;
  }
}

@media (any-hover: hover) {
  .p-library-appeal__text a:hover {
    color: #ef5a07;
  }
}
/* ------------------------------------------------
p-map-site（敷地マップ）
--------------------------------------------------- */
.p-map-site {
  padding-block: 5rem 12rem;
  background-color: #0dbaf7;
}
@media only screen and (min-width: 768px) {
  .p-map-site {
    padding-block: 10rem 30rem;
  }
}

.p-map-site__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 3rem;
}
@media only screen and (min-width: 768px) {
  .p-map-site__inner {
    gap: 5rem;
  }
}

@media only screen and (min-width: 768px) {
  .p-map-site__title {
    width: 48.7rem;
  }
}

.p-map-site__lead {
  color: #fff;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.8;
}
@media only screen and (min-width: 768px) {
  .p-map-site__lead {
    text-align: center;
    margin-top: 1rem;
    font-size: 1.7rem;
  }
}

.p-map-site__map {
  position: relative;
  width: 100%;
}

/* 円ボタンはマップ画像の右下に食い込む配置。位置・大きさはマップ幅（1200）基準の % */
.p-map-site__btn {
  position: absolute;
  bottom: 2rem;
  right: 2rem;
  display: block;
  width: 30%;
  aspect-ratio: 280/285;
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}
@media only screen and (min-width: 768px) {
  .p-map-site__btn {
    bottom: 18rem;
    right: 10rem;
    width: 24rem;
  }
}

.p-map-site__circle {
  position: absolute;
  inset: 0;
}

.p-map-site__label {
  position: absolute;
  top: 23.86%;
  left: 9.46%;
  width: 81.07%;
}

.p-map-site__go {
  position: absolute;
  top: 60.88%;
  left: 37.5%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.3rem;
  width: 25%;
}
@media only screen and (min-width: 768px) {
  .p-map-site__go {
    gap: 0.5rem;
  }
}
.p-map-site__go img:nth-child(1) {
  width: 91.4%;
}
.p-map-site__go img:nth-child(2) {
  width: 85.7%;
}

.p-map-site__monument {
  position: absolute;
  top: 61%;
  left: -28.57%;
  width: 50%;
}

/* ------------------------------------------------
p-map-floor（館内マップ）
--------------------------------------------------- */
.p-map-floor {
  position: relative;
  padding-block: 6rem 4rem;
}
@media only screen and (min-width: 768px) {
  .p-map-floor {
    padding-block: 12rem 10rem;
  }
}
.p-map-floor::before {
  content: "";
  position: absolute;
  bottom: calc(100% - 1px);
  left: 0;
  width: 100%;
  height: 7.6rem;
  /* 同じ絵を2枚敷き、2枚目を 6px ずらしてある。
     Safari は絵を「指定した枠より左右それぞれ約2.5px内側」にしか描かないので、
     1枚だけ繰り返すと継ぎ目に隙間（下地の色の縦線）が出る。
     2枚目をずらしておくと、その隙間を2枚目の本体が塞ぐ。
     ずらし量は実測で決めた（4px以下だと隙間が残り、5px以上で消える）。
     位置を変えたいときは background-position ではなく --cloud-x を書き換えること */
  --cloud-w: 72.96rem;
  --cloud-x: 50%;
  background-image: url(../img/common/cloud_gray.svg), url(../img/common/cloud_gray.svg);
  background-repeat: repeat-x;
  background-size: var(--cloud-w) 100%;
  background-position: var(--cloud-x) bottom, calc(var(--cloud-x) + 6px) bottom;
}
@media only screen and (min-width: 768px) {
  .p-map-floor::before {
    height: 18rem;
    --cloud-w: 172.8rem;
    --cloud-x: 50%;
  }
}

.p-map-floor__tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}
@media only screen and (min-width: 768px) {
  .p-map-floor__tabs {
    grid-template-columns: repeat(6, 1fr);
    gap: 1.8rem;
  }
}

.p-map-floor__tab {
  display: grid;
  place-content: center;
  width: 100%;
  height: 4rem;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  text-align: center;
  background-color: #d9d9d9;
  border-radius: 1rem 1rem 0 0;
  padding-top: 0.2rem;
  cursor: pointer;
  -webkit-transition: background-color 0.3s ease;
  transition: background-color 0.3s ease;
}
@media only screen and (min-width: 768px) {
  .p-map-floor__tab {
    height: 6rem;
    font-size: 2.2rem;
    border-radius: 1.5rem 1.5rem 0 0;
    padding-top: 0.8rem;
  }
}

@media only screen and (max-width: 767px) {
  .p-map-floor__item:nth-child(-n+3) .p-map-floor__tab {
    height: 4.4rem;
  }
}

.p-map-floor__tab.is-active {
  background-color: #ffde38;
  cursor: default;
}

.p-map-floor__panel {
  display: none;
}

.p-map-floor__panel.is-active {
  display: block;
}

/* ------------------------------------------------
p-map-index（館内マップタブ・フロア一覧）
--------------------------------------------------- */
.p-map-index {
  position: relative;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding-block: 2rem 4rem;
  padding-inline: 2rem;
  background-color: #fff4d1;
  border-top: 0.7rem solid #ffde38;
  border-radius: 0 0 2rem 2rem;
}
@media only screen and (min-width: 768px) {
  .p-map-index {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    gap: 6rem;
    padding-block: 10rem;
    padding-inline: 5rem;
  }
}

.p-map-index.is-active {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.p-map-index__deco {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  gap: 1rem;
}
@media only screen and (min-width: 768px) {
  .p-map-index__deco {
    position: absolute;
    inset: 0;
    display: block;
    pointer-events: none;
  }
}

.p-map-index__balloon {
  position: relative;
  width: 12rem;
  aspect-ratio: 170/140;
}
@media only screen and (min-width: 768px) {
  .p-map-index__balloon {
    position: absolute;
    top: 8rem;
    left: 72.5%;
    width: 17rem;
  }
}
.p-map-index__balloon img:nth-child(1) {
  position: absolute;
  top: 10.7%;
  left: 0;
  width: 98.8%;
}
.p-map-index__balloon img:nth-child(2) {
  position: absolute;
  top: 31.4%;
  left: 17.6%;
  width: 64.7%;
}

.p-map-index__monument {
  width: 7rem;
}
@media only screen and (min-width: 768px) {
  .p-map-index__monument {
    position: absolute;
    top: 11.4rem;
    left: 87.5%;
    width: 10rem;
  }
}

.p-map-index__block {
  margin-top: 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 2rem;
}
@media only screen and (min-width: 768px) {
  .p-map-index__block {
    margin-top: 0;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    gap: 4rem;
  }
}
.p-map-index__block + .p-map-index__block {
  margin-top: 4rem;
}

@media only screen and (min-width: 768px) {
  .p-map-index__block--bekkann {
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
    width: 36rem;
  }
}

@media only screen and (min-width: 768px) {
  .p-map-index__title {
    width: 14.8rem;
  }
}

.p-map-index__items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 100%;
  gap: 1.6rem;
}

.p-map-index__item a {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1.5rem;
  padding-block: 1.6rem;
  padding-inline: 2rem 4.5rem;
  color: #fff;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
  border-radius: 1rem;
}
@media only screen and (min-width: 768px) {
  .p-map-index__item a {
    gap: 2rem;
    min-height: 10.4rem;
    padding-block: 2.4rem;
    padding-inline: 3rem 6rem;
    border-radius: 2rem;
  }
}
.p-map-index__item a::after {
  position: absolute;
  top: 50%;
  right: 2rem;
  width: 1rem;
  height: 1.6rem;
  content: "";
  background-image: url(../img/map/icon_arrow-floor.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
@media only screen and (min-width: 768px) {
  .p-map-index__item a::after {
    right: 3rem;
    width: 1.2rem;
    height: 2rem;
  }
}

.p-map-index__item--3f a,
.p-map-index__item--1f a {
  background-color: #0dbaf7;
}

.p-map-index__item--2f a,
.p-map-index__item--b1f a {
  background-color: #fc8b10;
}

.p-map-index__item--bekkann a {
  background-color: #18a000;
}

.p-map-index__floor {
  width: 5rem;
}
@media only screen and (min-width: 768px) {
  .p-map-index__floor {
    width: 6rem;
  }
}
.p-map-index__floor img {
  width: auto;
  height: 1.8rem;
  -webkit-filter: brightness(0) invert(1);
          filter: brightness(0) invert(1);
}
@media only screen and (min-width: 768px) {
  .p-map-index__floor img {
    height: 2.3rem;
  }
}

.p-map-index__text {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.4;
}
@media only screen and (min-width: 768px) {
  .p-map-index__text {
    font-size: 2rem;
  }
}

/* ------------------------------------------------
p-map-view（各フロアの表示）
--------------------------------------------------- */
.p-map-view__panel {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding-block: 3rem;
  padding-inline: 2rem;
  background-color: #fff4d1;
  border-top: 0.7rem solid #ffde38;
  border-radius: 0 0 2rem 2rem;
}
@media only screen and (min-width: 768px) {
  .p-map-view__panel {
    gap: 4rem;
    padding-block: 4rem;
    padding-inline: 4rem;
  }
}

/* PC ではカンプどおり平面図の右上に重ねる。SP は横スクロールで流れないよう通常フローで上に置く */
.p-map-view__title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 1.2rem;
}
@media only screen and (min-width: 768px) {
  .p-map-view__title {
    position: absolute;
    top: 4.3rem;
    right: 18.33%;
    gap: 2rem;
  }
}
.p-map-view__title::before, .p-map-view__title::after {
  width: 1.6rem;
  height: 3.4rem;
  content: "";
  background-image: url(../img/map/icon_accent-left.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}
@media only screen and (min-width: 768px) {
  .p-map-view__title::before, .p-map-view__title::after {
    width: 2.4rem;
    height: 5rem;
  }
}
.p-map-view__title::after {
  background-image: url(../img/map/icon_accent-right.svg);
}
.p-map-view__title img {
  width: auto;
  height: 2.6rem;
}
@media only screen and (min-width: 768px) {
  .p-map-view__title img {
    height: 3.9rem;
  }
}

.p-map-view__scroll {
  margin-inline: -2rem;
  padding-inline: 2rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
@supports not selector(::-webkit-scrollbar) {
  .p-map-view__scroll {
    scrollbar-width: thin;
    scrollbar-color: #ffde38 rgba(0, 0, 0, 0.08);
  }
}
@media only screen and (min-width: 768px) {
  .p-map-view__scroll {
    margin-inline: 0;
    padding-inline: 0;
    overflow: visible;
  }
}
.p-map-view__scroll::-webkit-scrollbar {
  height: 0.6rem;
}
.p-map-view__scroll::-webkit-scrollbar-track {
  margin-inline: 2rem;
  background-color: rgba(0, 0, 0, 0.08);
  border-radius: 0.3rem;
}
.p-map-view__scroll::-webkit-scrollbar-thumb {
  background-color: #ffde38;
  border-radius: 0.3rem;
}

.p-map-view__stage {
  margin-top: 2rem;
  position: relative;
  width: 60rem;
  aspect-ratio: 1200/528;
}
@media only screen and (min-width: 768px) {
  .p-map-view__stage {
    margin-top: 0;
    width: 100%;
    aspect-ratio: 1200/568;
  }
}

.p-map-view--bekkann .p-map-view__stage {
  width: 54rem;
}
@media only screen and (min-width: 768px) {
  .p-map-view--bekkann .p-map-view__stage {
    width: 100%;
  }
}

.p-map-view__plan,
.p-map-view__marker,
.p-map-view__label,
.p-map-view__icon {
  position: absolute;
  top: calc((var(--y) * 1.2 - 48) / 5.28 * 1%);
  left: calc((var(--x) * 1.2 - 120) / 12 * 1%);
}
@media only screen and (min-width: 768px) {
  .p-map-view__plan,
  .p-map-view__marker,
  .p-map-view__label,
  .p-map-view__icon {
    top: calc(var(--y) * 1.2 / 5.68 * 1%);
  }
}

.p-map-view__plan {
  width: calc(var(--w) * 1.2 / 12 * 1%);
}

.p-map-view__label {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}
@media only screen and (min-width: 768px) {
  .p-map-view__label {
    font-size: 1.7rem;
  }
}

.p-map-view__icon {
  width: 4.5%;
}

.p-map-view__legend {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.8rem 2rem;
  margin-top: 2.4rem;
  padding: 1.2rem;
  border: 0.2rem solid #8b5825;
  border-radius: 1.6rem;
}
@media only screen and (min-width: 768px) {
  .p-map-view__legend {
    display: grid;
    grid-template-columns: repeat(4, auto);
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin-top: 0;
    margin-left: auto;
    border-radius: 2rem;
    padding: 1.6rem 2rem;
    border: 0.3rem solid #8b5825;
  }
}
.p-map-view__legend li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.8rem;
  font-size: 1.1rem;
  line-height: 1.2;
}
@media only screen and (min-width: 768px) {
  .p-map-view__legend li {
    width: 14.4rem;
    font-size: 1.5rem;
  }
}

.p-map-view__mark {
  width: 2.4rem;
}
@media only screen and (min-width: 768px) {
  .p-map-view__mark {
    width: 4rem;
  }
}

.p-map-view__lead {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: 4rem;
}
@media only screen and (min-width: 768px) {
  .p-map-view__lead {
    margin-top: 10rem;
  }
}
.p-map-view__lead img {
  width: auto;
  height: 2.8rem;
}
@media only screen and (min-width: 768px) {
  .p-map-view__lead img {
    height: 3.5rem;
  }
}

.p-map-view__desc {
  padding-top: 4rem;
}
@media only screen and (min-width: 768px) {
  .p-map-view__desc {
    padding-top: 8rem;
  }
}

.p-map-view__cards {
  display: grid;
  gap: 3rem;
}
@media only screen and (min-width: 768px) {
  .p-map-view__cards {
    grid-template-columns: repeat(3, 1fr);
    gap: 6rem 3rem;
  }
}

/* ------------------------------------------------
p-map-marker（平面図の番号）
--------------------------------------------------- */
.p-map-marker {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.3rem;
  color: #020202;
}
@media only screen and (min-width: 768px) {
  .p-map-marker {
    gap: 0.5rem;
  }
}

.p-map-marker--row {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

.p-map-marker__no,
.p-map-card__no {
  display: grid;
  place-content: center;
  width: 4rem;
  height: 4rem;
  padding-top: 0.4rem;
  font-family: "Comfortaa", sans-serif;
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  background-color: #ffde38;
  border-radius: 100%;
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}

.p-map-marker__no {
  width: 2.7rem;
  height: 2.7rem;
  padding-top: 0.3rem;
  font-size: 1.6rem;
}
@media only screen and (min-width: 768px) {
  .p-map-marker__no {
    width: 4rem;
    height: 4rem;
    padding-top: 0.4rem;
    font-size: 2.4rem;
  }
}

.p-map-marker__name {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .p-map-marker__name {
    font-size: 1.7rem;
  }
}

/* ------------------------------------------------
p-map-card（部屋の説明カード）
--------------------------------------------------- */
.p-map-card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2rem;
  min-width: 0;
  padding: 2rem;
  background-color: #fff;
  border: 0.5rem solid #ffde38;
  border-radius: 2rem;
}
@media only screen and (min-width: 768px) {
  .p-map-card {
    gap: 2.4rem;
    padding: 2.4rem;
  }
}

/* 写真は jpg の矩形。角丸は img ではなく枠側で付ける */
.p-map-card__img {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4/3;
  border-radius: 1.5rem;
}
.p-map-card__img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.p-map-card__img .swiper {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 1.5rem;
}
.p-map-card__img .swiper-slide {
  position: relative;
}

.p-map-card__img--slider {
  overflow: visible;
}

/* 矢印はトップの「本日のイベント」と同じ作りを 24px に縮めたもの */
.p-map-card__prev,
.p-map-card__next {
  position: absolute;
  z-index: 2;
  top: 50%;
  display: grid;
  place-content: center;
  width: 2.4rem;
  height: 2.4rem;
  background-color: #ef5a07;
  border-radius: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  cursor: pointer;
}
.p-map-card__prev span,
.p-map-card__next span {
  display: block;
  width: 0.6rem;
  height: 1rem;
  background-color: #fff;
  -webkit-mask-image: url(../img/common/arrow.svg);
          mask-image: url(../img/common/arrow.svg);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center center;
          mask-position: center center;
  -webkit-mask-size: contain;
          mask-size: contain;
}

.p-map-card__prev {
  left: 0;
  padding-right: 0.2rem;
}
.p-map-card__prev span {
  -webkit-transform: scaleX(-1);
          transform: scaleX(-1);
}

.p-map-card__next {
  left: 100%;
  padding-left: 0.2rem;
}

.p-map-card__body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.p-map-card__title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
  padding-bottom: 1rem;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.02em;
  border-bottom: 0.5rem solid #ffde38;
}
@media only screen and (min-width: 768px) {
  .p-map-card__title {
    font-size: 2.4rem;
  }
}

.p-map-card__staff {
  width: 3.6rem;
  margin-left: auto;
}
@media only screen and (min-width: 768px) {
  .p-map-card__staff {
    width: 4.4rem;
  }
}

.p-map-card__text {
  margin-top: 1.6rem;
  font-size: 1.5rem;
  line-height: 1.6;
}
@media only screen and (min-width: 768px) {
  .p-map-card__text {
    font-size: 1.7rem;
  }
}
.p-map-card__text a {
  color: inherit;
  text-decoration: underline;
  -webkit-transition: color 0.3s ease;
  transition: color 0.3s ease;
}

@media (any-hover: hover) {
  .p-map-site__btn:hover {
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
  }
  .p-map-floor__tab:not(.is-active):hover {
    background-color: #ffde38;
  }
  .p-map-index__item a:hover {
    opacity: 0.8;
  }
  .p-map-marker:hover .p-map-marker__no {
    -webkit-transform: scale(1.15);
            transform: scale(1.15);
  }
  .p-map-card__text a:hover {
    color: #ef5a07;
  }
}
/* ------------------------------------------------
p-seminar（セミナー）
--------------------------------------------------- */
.p-seminar__content {
  padding-block: 5rem;
}
@media only screen and (min-width: 768px) {
  .p-seminar__content {
    padding-block: 10rem;
  }
}

/* 見出しブロックとカードの縦並び。コンテンツ幅は l-inner（1160 − 30×2 = 1100）がそのまま持つ */
.p-seminar__content .l-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 4rem;
}
@media only screen and (min-width: 768px) {
  .p-seminar__content .l-inner {
    gap: 8rem;
  }
}

/* リード文が2行で折り返す幅。l-inner より狭いので、l-inner の子に max-width を置く */
.p-seminar__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 3rem;
  margin-inline: auto;
}
@media only screen and (min-width: 768px) {
  .p-seminar__head {
    gap: 6rem;
    text-align: center;
  }
}

/* SPは reset の width:100% のまま。PCは見出し側で高さ（629×54）を持たせる */
.p-seminar__title {
  height: 2.8rem;
}
@media only screen and (min-width: 768px) {
  .p-seminar__title {
    height: auto;
    width: 62.9rem;
  }
}

.p-seminar__lead {
  font-size: 1.5rem;
  line-height: 1.8;
  letter-spacing: 0.02em;
  text-align: left;
}
@media only screen and (min-width: 768px) {
  .p-seminar__lead {
    font-size: 1.7rem;
    text-align: center;
  }
}

.p-seminar__items {
  display: grid;
  gap: 2.4rem;
}
@media only screen and (min-width: 768px) {
  .p-seminar__items {
    grid-template-columns: repeat(2, 1fr);
    gap: 6rem;
  }
}

/* ------------------------------------------------
p-seminar-card（4色のカード）
--------------------------------------------------- */
.p-seminar-card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.p-seminar-card a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1.6rem;
  padding-block: 2rem;
  padding-inline: 2rem;
  border-radius: 2rem;
}
@media only screen and (min-width: 768px) {
  .p-seminar-card a {
    gap: 2rem;
    padding-block: 3rem;
    padding-inline: 3rem;
    border-radius: 6rem;
  }
}

.p-seminar-card--red a {
  background-color: #e43030;
}

.p-seminar-card--green a {
  background-color: #18a000;
}

.p-seminar-card--blue a {
  background-color: #0dbaf7;
}

.p-seminar-card--orange a {
  background-color: #fc8b10;
}

/* 行数の違うタイトルを上下中央に置き、残りの高さを吸収させる（写真の上端が4枚とも揃う） */
.p-seminar-card__title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: #fff;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.02em;
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .p-seminar-card__title {
    font-size: 2.8rem;
  }
}

.p-seminar-card__img {
  overflow: hidden;
  aspect-ratio: 2/1;
  border-radius: 1.2rem;
}
@media only screen and (min-width: 768px) {
  .p-seminar-card__img {
    border-radius: 2rem;
  }
}
.p-seminar-card__img img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
@media only screen and (min-width: 768px) {
  .p-seminar-card__img img {
    -webkit-transition: -webkit-transform 0.3s ease;
    transition: -webkit-transform 0.3s ease;
    transition: transform 0.3s ease;
    transition: transform 0.3s ease, -webkit-transform 0.3s ease;
  }
}

@media (any-hover: hover) {
  .p-seminar-card a:hover .p-seminar-card__img img {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
}
.p-seminar-detail__body {
  padding-block: 6rem 8rem;
}
@media only screen and (min-width: 768px) {
  .p-seminar-detail__body {
    padding-block: 10rem 8rem;
  }
}

.p-seminar-detail__contents {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 4rem;
  margin-inline: auto;
  width: 100%;
}
@media only screen and (min-width: 768px) {
  .p-seminar-detail__contents {
    max-width: 90rem;
    gap: 6rem;
  }
}

.p-seminar-detail__article {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 3rem;
}
@media only screen and (min-width: 768px) {
  .p-seminar-detail__article {
    gap: 6rem;
  }
}

.p-seminar-detail__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2rem;
}
@media only screen and (min-width: 768px) {
  .p-seminar-detail__head {
    gap: 4rem;
  }
}

.p-seminar-detail__title {
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.02em;
}
@media only screen and (min-width: 768px) {
  .p-seminar-detail__title {
    font-size: 4rem;
  }
}

.p-seminar-detail__content {
  font-size: 1.5rem;
  line-height: 1.8;
  letter-spacing: 0.02em;
}
@media only screen and (min-width: 768px) {
  .p-seminar-detail__content {
    font-size: 1.7rem;
  }
}
.p-seminar-detail__content > * {
  margin: 0;
}
.p-seminar-detail__content > * + * {
  margin-top: 4rem;
}
@media only screen and (min-width: 768px) {
  .p-seminar-detail__content > * + * {
    margin-top: 6rem;
  }
}
.p-seminar-detail__content > h2 + * {
  margin-top: 1.6rem;
}
@media only screen and (min-width: 768px) {
  .p-seminar-detail__content > h2 + * {
    margin-top: 2.4rem;
  }
}
.p-seminar-detail__content em {
  font-style: normal;
}
.p-seminar-detail__content img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}
.p-seminar-detail__content a {
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}
@media only screen and (min-width: 768px) {
  .p-seminar-detail__content a {
    -webkit-transition: color 0.3s ease;
    transition: color 0.3s ease;
  }
}

@media (any-hover: hover) {
  .p-seminar-detail__content a:hover {
    color: #ef5a07;
  }
}
.p-seminar-detail__nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media only screen and (min-width: 768px) {
  .p-seminar-detail__nav {
    margin-top: 4rem;
  }
}

.is-style-heading-bar {
  position: relative;
  padding-left: 1.6rem;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.05em;
}
@media only screen and (min-width: 768px) {
  .is-style-heading-bar {
    padding-left: 2.6rem;
    font-size: 2.4rem;
  }
}
.is-style-heading-bar::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 0.4rem;
  height: 100%;
  content: "";
  background-color: #ffde38;
  border-radius: 1rem;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
@media only screen and (min-width: 768px) {
  .is-style-heading-bar::before {
    width: 0.6rem;
  }
}

.wp-block-table.is-style-yellow-label table,
.wp-block-table.is-style-yellow-label tbody {
  display: block;
  width: 100%;
}

.wp-block-table.is-style-yellow-label tbody {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2rem;
}
@media only screen and (min-width: 768px) {
  .wp-block-table.is-style-yellow-label tbody {
    gap: 2.4rem;
  }
}

.wp-block-table.is-style-yellow-label tr {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 1rem;
}
@media only screen and (min-width: 768px) {
  .wp-block-table.is-style-yellow-label tr {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    gap: 2rem;
  }
}

.wp-block-table.is-style-yellow-label td {
  padding: 0;
  border: none;
}

.wp-block-table.is-style-yellow-label td:first-child {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  min-width: 9.4rem;
  padding-block: 0.4rem 0.5rem;
  padding-inline: 1.6rem;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.02em;
  text-align: center;
  background-color: #ffde38;
  border-radius: 5rem;
}
@media only screen and (min-width: 768px) {
  .wp-block-table.is-style-yellow-label td:first-child {
    min-width: 12.2rem;
    padding-block: 0.6rem 0.5rem;
    padding-inline: 2.4rem;
    font-size: 1.7rem;
  }
}

@media only screen and (min-width: 768px) {
  .wp-block-table.is-style-yellow-label td:last-child {
    padding-top: 0.3rem;
  }
}

.is-style-indent {
  padding-left: 1em;
  text-indent: -1em;
}

.is-style-indent-2 {
  padding-left: 2em;
  text-indent: -2em;
}

.wp-block-group.is-style-tight {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
}
@media only screen and (min-width: 768px) {
  .wp-block-group.is-style-tight {
    gap: 1.2rem;
  }
}

.p-council__heading {
  position: relative;
  font-size: 2.4rem;
  font-weight: 700;
}
@media only screen and (min-width: 768px) {
  .p-council__heading {
    font-size: 4.8rem;
  }
}

.p-council__body {
  padding-block: 6rem 8rem;
}
@media only screen and (min-width: 768px) {
  .p-council__body {
    padding-block: 10rem 8rem;
  }
}

.p-council__contents {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 4rem;
  margin-inline: auto;
  width: 100%;
}
@media only screen and (min-width: 768px) {
  .p-council__contents {
    max-width: 90rem;
    gap: 6rem;
  }
}

.p-council__article {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 3rem;
}
@media only screen and (min-width: 768px) {
  .p-council__article {
    gap: 6rem;
  }
}

.p-council__title {
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.02em;
}
@media only screen and (min-width: 768px) {
  .p-council__title {
    font-size: 4rem;
  }
}

.p-council__content {
  font-size: 1.5rem;
  line-height: 1.8;
  letter-spacing: 0.02em;
}
@media only screen and (min-width: 768px) {
  .p-council__content {
    font-size: 1.7rem;
  }
}
.p-council__content > * {
  margin: 0;
}
.p-council__content > * + * {
  margin-top: 4rem;
}
@media only screen and (min-width: 768px) {
  .p-council__content > * + * {
    margin-top: 6rem;
  }
}
.p-council__content > h2 + * {
  margin-top: 1.6rem;
}
@media only screen and (min-width: 768px) {
  .p-council__content > h2 + * {
    margin-top: 2.4rem;
  }
}

.p-council__marker {
  padding-left: 2em;
  text-indent: -2em;
}

.p-council__nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media only screen and (min-width: 768px) {
  .p-council__nav {
    margin-top: 4rem;
  }
}

.p-council__back {
  width: auto;
  padding-left: 3rem;
  padding-right: 4rem;
}
@media only screen and (min-width: 768px) {
  .p-council__back {
    padding-left: 5rem;
    padding-right: 6rem;
  }
}

.p-council__links {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1.6rem;
}
@media only screen and (min-width: 768px) {
  .p-council__links {
    gap: 2.4rem;
  }
}

.p-council__links .c-btn {
  width: 100%;
  max-width: 34rem;
  padding-left: 3rem;
  padding-right: 4rem;
}
@media only screen and (min-width: 768px) {
  .p-council__links .c-btn {
    max-width: 56rem;
  }
}

/* ------------------------------------------------
p-workshop-guide
--------------------------------------------------- */
.p-workshop-guide {
  container-type: inline-size;
  padding-block: 4rem 6rem;
  overflow-x: clip;
}
@media only screen and (min-width: 768px) {
  .p-workshop-guide {
    padding-block: 8rem 10rem;
  }
}

.p-workshop-guide__contents {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 4rem;
}
@media only screen and (min-width: 768px) {
  .p-workshop-guide__contents {
    gap: 8rem;
  }
}

.p-workshop-guide__title {
  position: relative;
  width: 100%;
  max-width: 71.2rem;
  margin-inline: auto;
  aspect-ratio: 712/224;
}
.p-workshop-guide__title > img {
  position: absolute;
  top: 10.27%;
  left: 11.1%;
  width: 78.65%;
}

.p-workshop-guide__deco {
  position: absolute;
  pointer-events: none;
}

.p-workshop-guide__deco--tape {
  top: 0;
  left: 0;
  width: 15.45%;
}

.p-workshop-guide__deco--scissors {
  top: 42.41%;
  left: 84.55%;
  width: 15.45%;
}

.p-workshop-guide__body {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 4rem;
}
@media only screen and (min-width: 768px) {
  .p-workshop-guide__body {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 10rem;
  }
}

.p-workshop-guide__text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 3rem;
}
@media only screen and (min-width: 768px) {
  .p-workshop-guide__text {
    width: 60.2rem;
    gap: 6rem;
  }
}

.p-workshop-guide__time {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 1.5rem;
}
@media only screen and (min-width: 768px) {
  .p-workshop-guide__time {
    gap: 2rem;
  }
}

.p-workshop-guide__hours {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.02em;
}
@media only screen and (min-width: 768px) {
  .p-workshop-guide__hours {
    font-size: 2.4rem;
  }
}

.p-workshop-guide__note {
  margin-top: 0.8rem;
  font-size: 1.4rem;
  line-height: 1.5;
}
@media only screen and (min-width: 768px) {
  .p-workshop-guide__note {
    margin-top: 1rem;
    font-size: 1.6rem;
  }
}

.p-workshop-guide__lead {
  font-size: 1.5rem;
  line-height: 1.8;
  letter-spacing: 0.02em;
}
@media only screen and (min-width: 768px) {
  .p-workshop-guide__lead {
    font-size: 1.7rem;
  }
}

.p-workshop-guide__wrap {
  position: relative;
  height: 28rem;
}
@media only screen and (min-width: 768px) {
  .p-workshop-guide__wrap {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    height: 56.8rem;
  }
}

.p-workshop-guide__img {
  position: absolute;
  top: 0;
  right: calc((min(100cqw, 1160px) - 100cqw) / 2 - 20px);
  left: 0;
  overflow: hidden;
  height: 100%;
  border-radius: 1.5rem 0 0 1.5rem;
}
@media only screen and (min-width: 768px) {
  .p-workshop-guide__img {
    right: calc((min(100cqw, 1160px) - 100cqw) / 2 - 30px);
    border-radius: 2rem 0 0 2rem;
  }
}
.p-workshop-guide__img img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.p-workshop-guide__deco--stationery {
  bottom: -4.8rem;
  right: 0;
  width: 10.3rem;
}
@media only screen and (min-width: 768px) {
  .p-workshop-guide__deco--stationery {
    top: 41.3rem;
    bottom: auto;
    left: auto;
    left: 36.6rem;
    width: 20.6rem;
  }
}

/* ------------------------------------------------
p-workshop-challenge
--------------------------------------------------- */
.p-workshop-challenge {
  position: relative;
  padding-block: 21.3333333333vw 14rem;
  background-color: #0dbaf7;
}
@media only screen and (min-width: 768px) {
  .p-workshop-challenge {
    padding-block: 16rem 30rem;
  }
}
.p-workshop-challenge::before {
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 11.7333333333vw;
  content: "";
  background-image: url(../img/common/deco_book-beige.svg);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: auto 100%;
  pointer-events: none;
}
@media only screen and (min-width: 768px) {
  .p-workshop-challenge::before {
    height: 6.0857538036vw;
  }
}

.p-workshop-challenge__contents {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 5rem;
}
@media only screen and (min-width: 768px) {
  .p-workshop-challenge__contents {
    gap: 6rem;
  }
}

.p-workshop-challenge__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 3rem;
}
@media only screen and (min-width: 768px) {
  .p-workshop-challenge__head {
    gap: 6rem;
  }
}

.p-workshop-challenge__title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.p-workshop-challenge__title img {
  width: auto;
  height: 2.7rem;
  -webkit-filter: brightness(0) invert(1);
          filter: brightness(0) invert(1);
}
@media only screen and (min-width: 768px) {
  .p-workshop-challenge__title img {
    height: 4.7rem;
  }
}

.p-workshop-challenge__lead {
  color: #fff;
  font-size: 1.4rem;
  line-height: 1.8;
  letter-spacing: 0.02em;
}
@media only screen and (min-width: 768px) {
  .p-workshop-challenge__lead {
    font-size: 1.7rem;
    text-align: center;
  }
}

.p-workshop-challenge__menus {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 8rem;
}
@media only screen and (min-width: 768px) {
  .p-workshop-challenge__menus {
    gap: 16rem;
  }
}

/* ------------------------------------------------
p-workshop-menu
--------------------------------------------------- */
.p-workshop-menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1.6rem;
}
@media only screen and (min-width: 768px) {
  .p-workshop-menu {
    gap: 2.4rem;
  }
}

.p-workshop-menu__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 2.4rem;
}
@media only screen and (min-width: 768px) {
  .p-workshop-menu__head {
    gap: 4.8rem;
  }
}

.p-workshop-menu__character {
  width: 6rem;
}
@media only screen and (min-width: 768px) {
  .p-workshop-menu__character {
    width: 10rem;
  }
}

.p-workshop-menu__title {
  position: relative;
  margin-top: 1.4rem;
  padding-block: 1rem;
  padding-inline: 2rem;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.02em;
  background-color: #fff;
  border-radius: 1.5rem;
}
@media only screen and (min-width: 768px) {
  .p-workshop-menu__title {
    margin-top: 2.4rem;
    padding-block: 1.5rem;
    padding-inline: 4rem;
    font-size: 3.2rem;
  }
}
.p-workshop-menu__title::before {
  position: absolute;
  top: 50%;
  right: calc(100% - 0.4rem);
  width: 1.6rem;
  height: 1.2rem;
  content: "";
  background-color: #fff;
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
@media only screen and (min-width: 768px) {
  .p-workshop-menu__title::before {
    right: calc(100% - 0.7rem);
    width: 2.5rem;
    height: 1.8rem;
  }
}

.p-workshop-menu__pickup {
  width: 100%;
  max-width: 98rem;
  margin-inline: auto;
}

.p-workshop-menu__items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem 1.5rem;
}
@media only screen and (min-width: 768px) {
  .p-workshop-menu__items {
    grid-template-columns: repeat(3, 1fr);
    gap: 6rem 3rem;
  }
}

/* ------------------------------------------------
p-workshop-card
--------------------------------------------------- */
.p-workshop-card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1.2rem;
  padding: 1.2rem 1.2rem 0.9rem;
  background-color: #fff;
  border: 0.3rem solid #ffde38;
  border-radius: 1.5rem;
}
@media only screen and (min-width: 768px) {
  .p-workshop-card {
    gap: 2.4rem;
    padding: 2.5rem;
    border-width: 0.5rem;
    border-radius: 2rem;
  }
}

.p-workshop-card__img {
  overflow: hidden;
  aspect-ratio: 320/240;
  border-radius: 1rem;
}
@media only screen and (min-width: 768px) {
  .p-workshop-card__img {
    border-radius: 1.5rem;
  }
}
.p-workshop-card__img img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.p-workshop-card__body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.8rem;
}
@media only screen and (min-width: 768px) {
  .p-workshop-card__body {
    gap: 1.6rem;
  }
}

.p-workshop-card__title {
  padding-bottom: 0.6rem;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.02em;
  border-bottom: 0.3rem solid #ffde38;
}
@media only screen and (min-width: 768px) {
  .p-workshop-card__title {
    padding-bottom: 1rem;
    font-size: 2.4rem;
    border-bottom-width: 0.5rem;
  }
}

.p-workshop-card__price {
  font-size: 1.4rem;
  line-height: 1.6;
  letter-spacing: 0.02em;
}
@media only screen and (min-width: 768px) {
  .p-workshop-card__price {
    font-size: 1.8rem;
  }
}

/* ------------------------------------------------
p-workshop-free
--------------------------------------------------- */
.p-workshop-free {
  position: relative;
  padding-block: 6rem 13rem;
}
@media only screen and (min-width: 768px) {
  .p-workshop-free {
    padding-block: 10rem 30rem;
  }
}
.p-workshop-free::before {
  content: "";
  position: absolute;
  bottom: calc(100% - 1px);
  left: 0;
  width: 100%;
  height: 7.6rem;
  /* 同じ絵を2枚敷き、2枚目を 6px ずらしてある。
     Safari は絵を「指定した枠より左右それぞれ約2.5px内側」にしか描かないので、
     1枚だけ繰り返すと継ぎ目に隙間（下地の色の縦線）が出る。
     2枚目をずらしておくと、その隙間を2枚目の本体が塞ぐ。
     ずらし量は実測で決めた（4px以下だと隙間が残り、5px以上で消える）。
     位置を変えたいときは background-position ではなく --cloud-x を書き換えること */
  --cloud-w: 72.96rem;
  --cloud-x: calc(50% + 5.57rem);
  background-image: url(../img/common/cloud_gray.svg), url(../img/common/cloud_gray.svg);
  background-repeat: repeat-x;
  background-size: var(--cloud-w) 100%;
  background-position: var(--cloud-x) bottom, calc(var(--cloud-x) + 6px) bottom;
}
@media only screen and (min-width: 768px) {
  .p-workshop-free::before {
    height: 18rem;
    --cloud-w: 172.8rem;
    --cloud-x: 50%;
  }
}

.p-workshop-free__contents {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 4rem;
}
@media only screen and (min-width: 768px) {
  .p-workshop-free__contents {
    gap: 8rem;
  }
}

.p-workshop-free__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 2rem;
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .p-workshop-free__head {
    gap: 6rem;
  }
}

.p-workshop-free__title img {
  width: auto;
  height: 3rem;
}
@media only screen and (min-width: 768px) {
  .p-workshop-free__title img {
    height: 5.2rem;
  }
}

.p-workshop-free__lead {
  font-size: 1.5rem;
  line-height: 1.8;
  letter-spacing: 0.02em;
}
@media only screen and (min-width: 768px) {
  .p-workshop-free__lead {
    font-size: 1.7rem;
  }
}

.p-workshop-free__body {
  display: grid;
  gap: 2rem;
}
@media only screen and (min-width: 768px) {
  .p-workshop-free__body {
    grid-template-columns: 50rem 1fr;
    gap: 3rem 8rem;
  }
}

.p-workshop-free__img {
  overflow: hidden;
  aspect-ratio: 520/260;
  border-radius: 2rem;
}
.p-workshop-free__img img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* ------------------------------------------------
p-workshop-list
--------------------------------------------------- */
.p-workshop-list--orange {
  --list-color: #fc8b10;
}

.p-workshop-list--green {
  --list-color: #18a000;
}

.p-workshop-list__title {
  padding-block: 0.5rem;
  padding-inline: 2rem;
  color: #fff;
  font-size: 2rem;
  line-height: 1.6;
  letter-spacing: 0.05em;
  text-align: center;
  background-color: var(--list-color);
  border-radius: 2rem 2rem 0 0;
}
@media only screen and (min-width: 768px) {
  .p-workshop-list__title {
    font-size: 2.4rem;
  }
}

.p-workshop-list__items {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem 2rem;
  padding-block: 1.5rem;
  padding-inline: 2rem;
  font-size: 1.5rem;
  line-height: 1.6;
  letter-spacing: 0.02em;
  background-color: #fff;
  border: 0.8rem solid var(--list-color);
  border-top: none;
  border-radius: 0 0 2rem 2rem;
}
@media only screen and (min-width: 768px) {
  .p-workshop-list__items {
    gap: 1rem 4rem;
    padding-block: 2rem;
    padding-inline: 4rem;
    font-size: 1.7rem;
  }
}
.p-workshop-list__items::after {
  position: absolute;
  right: 2rem;
  bottom: 1.5rem;
  content: "など";
}
@media only screen and (min-width: 768px) {
  .p-workshop-list__items::after {
    right: 4rem;
    bottom: 2rem;
  }
}

.p-workshop-list__item {
  position: relative;
  padding-left: 2.2rem;
}
.p-workshop-list__item::before {
  position: absolute;
  top: 0.6rem;
  left: 0;
  width: 1.2rem;
  aspect-ratio: 1/1;
  content: "";
  background-color: var(--list-color);
  border-radius: 100%;
}
@media only screen and (min-width: 768px) {
  .p-workshop-list__item::before {
    top: 0.8rem;
  }
}

/* ------------------------------------------------
p-workshop-supporters
--------------------------------------------------- */
.p-workshop-supporters {
  position: relative;
  padding-block: 6rem 10rem;
  background-color: #ffde38;
}
@media only screen and (min-width: 768px) {
  .p-workshop-supporters {
    padding-block: 10rem 22rem;
  }
}
.p-workshop-supporters::before {
  content: "";
  position: absolute;
  bottom: calc(100% - 1px);
  left: 0;
  width: 100%;
  height: 7rem;
  /* 同じ絵を2枚敷き、2枚目を 6px ずらしてある。
     Safari は絵を「指定した枠より左右それぞれ約2.5px内側」にしか描かないので、
     1枚だけ繰り返すと継ぎ目に隙間（下地の色の縦線）が出る。
     2枚目をずらしておくと、その隙間を2枚目の本体が塞ぐ。
     ずらし量は実測で決めた（4px以下だと隙間が残り、5px以上で消える）。
     位置を変えたいときは background-position ではなく --cloud-x を書き換えること */
  --cloud-w: 67.2rem;
  --cloud-x: calc(50% + 2rem);
  background-image: url(../img/common/cloud_yellow.svg), url(../img/common/cloud_yellow.svg);
  background-repeat: repeat-x;
  background-size: var(--cloud-w) 100%;
  background-position: var(--cloud-x) bottom, calc(var(--cloud-x) + 6px) bottom;
}
@media only screen and (min-width: 768px) {
  .p-workshop-supporters::before {
    height: 18rem;
    --cloud-w: 172.8rem;
    --cloud-x: 50%;
  }
}
.p-workshop-supporters::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4.8rem;
  content: "";
  background-image: url(../img/common/curve_base.svg);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% 100%;
}
@media only screen and (min-width: 768px) {
  .p-workshop-supporters::after {
    height: 9.6rem;
  }
}

.p-workshop-supporters__contents {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 3rem;
}
@media only screen and (min-width: 768px) {
  .p-workshop-supporters__contents {
    gap: 6rem;
  }
}

.p-workshop-supporters__title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.p-workshop-supporters__title img {
  width: auto;
  height: 7.3rem;
}
@media only screen and (min-width: 768px) {
  .p-workshop-supporters__title img {
    height: 12.6rem;
  }
}

.p-workshop-supporters__items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
@media only screen and (min-width: 768px) {
  .p-workshop-supporters__items {
    grid-template-columns: repeat(5, 1fr);
    gap: 3rem;
  }
}

.p-workshop-supporters__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-height: 7rem;
  padding-inline: 1rem;
  font-size: 1.3rem;
  line-height: 1.4;
  letter-spacing: 0.02em;
  text-align: center;
  background-color: #fff;
  border-radius: 1rem;
}
@media only screen and (min-width: 768px) {
  .p-workshop-supporters__item {
    min-height: 10rem;
    font-size: 1.5rem;
  }
}

/* ------------------------------------------------
p-workshop-group
--------------------------------------------------- */
.p-workshop-group {
  container-type: inline-size;
  padding-block: 6rem;
}
@media only screen and (min-width: 768px) {
  .p-workshop-group {
    padding-block: 7rem 10rem;
  }
}

.p-workshop-group__body {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 4rem;
}
@media only screen and (min-width: 768px) {
  .p-workshop-group__body {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 10rem;
  }
}

.p-workshop-group__wrap {
  position: relative;
  height: 28rem;
}
@media only screen and (min-width: 768px) {
  .p-workshop-group__wrap {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    height: 56.8rem;
  }
}

.p-workshop-group__img {
  position: absolute;
  top: 0;
  right: 0;
  left: calc((min(100cqw, 1160px) - 100cqw) / 2 - 20px);
  overflow: hidden;
  height: 100%;
  border-radius: 0 1.5rem 1.5rem 0;
}
@media only screen and (min-width: 768px) {
  .p-workshop-group__img {
    left: calc((min(100cqw, 1160px) - 100cqw) / 2 - 30px);
    border-radius: 0 2rem 2rem 0;
  }
}
.p-workshop-group__img img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.p-workshop-group__text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 3rem;
}
@media only screen and (min-width: 768px) {
  .p-workshop-group__text {
    width: 60.2rem;
    gap: 8rem;
  }
}

.p-workshop-group__title img {
  width: auto;
  height: 2.7rem;
  margin-inline: auto;
}
@media only screen and (min-width: 768px) {
  .p-workshop-group__title img {
    height: 4.7rem;
    margin-inline: 0;
  }
}

.p-workshop-group__contents {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 2.4rem;
}
@media only screen and (min-width: 768px) {
  .p-workshop-group__contents {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 4rem;
  }
}

.p-workshop-group__lead {
  font-size: 1.5rem;
  line-height: 1.8;
  letter-spacing: 0.02em;
}
@media only screen and (min-width: 768px) {
  .p-workshop-group__lead {
    font-size: 1.7rem;
  }
}
.p-workshop-group__lead a {
  text-decoration: underline;
  text-underline-offset: 0.3rem;
  -webkit-transition: color 0.3s ease;
  transition: color 0.3s ease;
}

.p-workshop-group__deco {
  position: absolute;
  pointer-events: none;
}

.p-workshop-group__deco--tape {
  top: 19rem;
  right: 5rem;
  width: 7rem;
}
@media only screen and (min-width: 768px) {
  .p-workshop-group__deco--tape {
    top: 40.3rem;
    right: auto;
    left: 79.9rem;
    width: 12.8rem;
  }
}

.p-workshop-group__deco--scissors {
  top: 21rem;
  right: 0;
  width: 6rem;
}
@media only screen and (min-width: 768px) {
  .p-workshop-group__deco--scissors {
    top: 44.9rem;
    right: auto;
    left: 89.1rem;
    width: 11rem;
  }
}

@media (any-hover: hover) {
  .p-workshop-group__lead a:hover {
    color: #ef5a07;
  }
}
/* ------------------------------------------------
p-contact
--------------------------------------------------- */
.p-contact {
  padding-bottom: 11.6rem;
}
@media only screen and (min-width: 768px) {
  .p-contact {
    padding-bottom: 29rem;
  }
}

.p-contact__item {
  padding-block: 5rem 6rem;
  scroll-margin-top: 8rem;
}
@media only screen and (min-width: 768px) {
  .p-contact__item {
    padding-block: 10rem 6rem;
    scroll-margin-top: 11rem;
  }
}

.p-contact__contents {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 3rem;
}
@media only screen and (min-width: 768px) {
  .p-contact__contents {
    gap: 6rem;
  }
}

.p-contact__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 2.4rem;
}
@media only screen and (min-width: 768px) {
  .p-contact__head {
    text-align: center;
    gap: 4rem;
  }
}

/* SPは横に長すぎるので reset の width:100% のまま。PCだけ実寸（高さ52px）で置く */
.p-contact__title--form {
  height: 2.7rem;
}
@media only screen and (min-width: 768px) {
  .p-contact__title--form {
    height: auto;
    width: 62.6rem;
  }
}

@media only screen and (min-width: 768px) {
  .p-contact__title--tel {
    width: 56.4rem;
  }
}

.p-contact__lead {
  font-size: 1.5rem;
  line-height: 1.8;
  letter-spacing: 0.02em;
}
@media only screen and (min-width: 768px) {
  .p-contact__lead {
    font-size: 1.8rem;
  }
}

.p-contact__forms {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 3rem;
}
@media only screen and (min-width: 768px) {
  .p-contact__forms {
    gap: 6rem;
  }
}

.p-contact__panel {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2.4rem;
}
@media only screen and (min-width: 768px) {
  .p-contact__panel {
    gap: 4rem;
  }
}

.p-contact__panel[hidden] {
  display: none;
}

.p-contact__intro {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
@media only screen and (min-width: 768px) {
  .p-contact__intro {
    text-align: center;
  }
}

.p-contact__preparing {
  font-size: 1.5rem;
  line-height: 1.8;
  letter-spacing: 0.02em;
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .p-contact__preparing {
    font-size: 1.8rem;
  }
}

.p-contact__box {
  max-width: 98rem;
  margin-inline: auto;
  width: 100%;
  padding-block: 2rem 4rem;
  padding-inline: 2rem;
  background-color: #fff;
  border: 0.3rem solid #ffde38;
  border-radius: 2.4rem;
}
@media only screen and (min-width: 768px) {
  .p-contact__box {
    padding-block: 6rem 8rem;
    padding-inline: 8rem;
    border-width: 0.8rem;
    border-radius: 4rem;
  }
}

.p-contact__box.p-form .p-contact-privacy {
  padding-block: 2.4rem 3rem;
}
@media only screen and (min-width: 768px) {
  .p-contact__box.p-form .p-contact-privacy {
    padding-block: 4rem 6rem;
  }
}

.p-contact__box.p-form .p-contact-privacy__agree .wpcf7-list-item-label {
  padding-left: 3.7rem;
  line-height: 1.8;
  letter-spacing: 0.02em;
}
@media only screen and (min-width: 768px) {
  .p-contact__box.p-form .p-contact-privacy__agree .wpcf7-list-item-label {
    font-size: 1.8rem;
  }
}
.p-contact__box.p-form .p-contact-privacy__agree .wpcf7-list-item-label::before {
  top: 0.25rem;
  border-color: #020202;
  border-radius: 0.5rem;
}
@media only screen and (min-width: 768px) {
  .p-contact__box.p-form .p-contact-privacy__agree .wpcf7-list-item-label::before {
    top: 0.52rem;
  }
}

.p-contact__box .p-form__submit {
  position: relative;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.p-contact__box .p-form__submit .wpcf7-spinner {
  position: absolute;
  top: 50%;
  left: calc(50% + 13.2rem);
  margin-inline: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
@media only screen and (min-width: 768px) {
  .p-contact__box .p-form__submit .wpcf7-spinner {
    left: calc(50% + 16.2rem);
  }
}

.p-contact__box--tel {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1.6rem;
  border-radius: 2.4rem;
  padding-block: 2rem;
}
@media only screen and (min-width: 768px) {
  .p-contact__box--tel {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    padding-block: 6rem;
    padding-inline: 8rem;
    border-radius: 4rem;
  }
}

.p-contact__info {
  display: grid;
  grid-template-columns: auto 1fr;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 1.2rem 2rem;
}
@media only screen and (min-width: 768px) {
  .p-contact__info {
    gap: 3.2rem 2rem;
  }
}
.p-contact__info dt {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 10rem;
  font-size: 1.5rem;
  line-height: 1.8;
  letter-spacing: 0.02em;
  background-color: #ffde38;
  border-radius: 5rem;
}
@media only screen and (min-width: 768px) {
  .p-contact__info dt {
    width: 12rem;
    font-size: 1.8rem;
  }
}
.p-contact__info dd {
  font-size: 1.5rem;
  line-height: 1.8;
  letter-spacing: 0.02em;
}
@media only screen and (min-width: 768px) {
  .p-contact__info dd {
    font-size: 1.8rem;
  }
}

.p-contact__tel {
  position: relative;
  padding-left: 3.6rem;
}
@media only screen and (min-width: 768px) {
  .p-contact__tel {
    padding-left: 6rem;
  }
}
.p-contact__tel::before {
  content: "";
  position: absolute;
  top: 58%;
  left: 0;
  width: 3.4rem;
  height: 3.4rem;
  background-color: #ef5a07;
  -webkit-mask-image: url(../img/common/icon_tel.svg);
          mask-image: url(../img/common/icon_tel.svg);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center center;
          mask-position: center center;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
@media only screen and (min-width: 768px) {
  .p-contact__tel::before {
    top: 56%;
    width: 5rem;
    height: 5rem;
  }
}
.p-contact__tel a {
  display: block;
  color: #ef5a07;
  font-family: "Oswald", sans-serif;
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
}
@media only screen and (min-width: 768px) {
  .p-contact__tel a {
    font-size: 4.8rem;
  }
}

/* ------------------------------------------------
p-contact-form（白い箱の中身）

フォーム本体は Contact Form 7。書き換えられない .wpcf7-◯◯ には、
このブロックの中に限って子孫セレクタで当てる。
--------------------------------------------------- */
.p-contact-form .wpcf7-form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 3rem;
}
@media only screen and (min-width: 768px) {
  .p-contact-form .wpcf7-form {
    gap: 6rem;
  }
}

.p-contact-form__rows {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.p-contact-form__row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.8rem;
  padding-block: 2.4rem;
  border-bottom: 0.1rem solid rgba(2, 2, 2, 0.12);
}
@media only screen and (min-width: 768px) {
  .p-contact-form__row {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 4rem;
    padding-block: 3.2rem;
  }
}

/* お問い合わせ内容の行だけ、項目名をテキストエリアの上端にそろえる */
@media only screen and (min-width: 768px) {
  .p-contact-form__row--top {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
}

.p-contact-form__label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.7;
}
@media only screen and (min-width: 768px) {
  .p-contact-form__label {
    -ms-flex-negative: 0;
        flex-shrink: 0;
    width: 26rem;
    font-size: 1.8rem;
  }
}

@media only screen and (min-width: 768px) {
  .p-contact-form__body {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
  }
}

/* エラー文を絶対配置で浮かせるための基準。行の高さが変わらないようにする */
.p-contact-form .wpcf7-form-control-wrap {
  position: relative;
  display: block;
}

.p-contact-form .wpcf7-text,
.p-contact-form .wpcf7-select,
.p-contact-form .wpcf7-textarea {
  width: 100%;
  padding-block: 0.8rem;
  padding-inline: 1.5rem;
  font-family: "M PLUS 1p", sans-serif;
  font-size: 1.6rem;
  line-height: 1.7;
  letter-spacing: 0.02em;
  background-color: #FAF7F3;
  border: 0.1rem solid #333333;
  border-radius: 1rem;
  -webkit-transition: border-color 0.3s ease;
  transition: border-color 0.3s ease;
}
@media only screen and (min-width: 768px) {
  .p-contact-form .wpcf7-text,
  .p-contact-form .wpcf7-select,
  .p-contact-form .wpcf7-textarea {
    font-size: 1.8rem;
  }
}
.p-contact-form .wpcf7-text::-webkit-input-placeholder, .p-contact-form .wpcf7-select::-webkit-input-placeholder, .p-contact-form .wpcf7-textarea::-webkit-input-placeholder {
  color: #afafaf;
}
.p-contact-form .wpcf7-text::-moz-placeholder, .p-contact-form .wpcf7-select::-moz-placeholder, .p-contact-form .wpcf7-textarea::-moz-placeholder {
  color: #afafaf;
}
.p-contact-form .wpcf7-text:-ms-input-placeholder, .p-contact-form .wpcf7-select:-ms-input-placeholder, .p-contact-form .wpcf7-textarea:-ms-input-placeholder {
  color: #afafaf;
}
.p-contact-form .wpcf7-text::-ms-input-placeholder, .p-contact-form .wpcf7-select::-ms-input-placeholder, .p-contact-form .wpcf7-textarea::-ms-input-placeholder {
  color: #afafaf;
}
.p-contact-form .wpcf7-text::placeholder,
.p-contact-form .wpcf7-select::placeholder,
.p-contact-form .wpcf7-textarea::placeholder {
  color: #afafaf;
}
.p-contact-form .wpcf7-text:focus,
.p-contact-form .wpcf7-select:focus,
.p-contact-form .wpcf7-textarea:focus {
  border-color: #41c4ba;
}

.p-contact-form .wpcf7-select {
  padding-inline: 1.5rem 4.5rem;
  background-image: url(../img/common/icon-select-gray.svg);
  background-repeat: no-repeat;
  background-position: right 1.5rem center;
  background-size: 2rem auto;
  cursor: pointer;
}

.p-contact-form .wpcf7-textarea {
  height: 18rem;
  min-height: 18rem;
  max-height: 36rem;
  line-height: 1.8;
  resize: vertical;
}
@media only screen and (min-width: 768px) {
  .p-contact-form .wpcf7-textarea {
    height: 27.2rem;
    min-height: 27.2rem;
    max-height: 54.4rem;
  }
}

/* ------------------------------------------------
p-contact-form（個人情報の取り扱い）
--------------------------------------------------- */
.p-contact-form__privacy {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 2.4rem;
  margin-inline: auto;
}
@media only screen and (min-width: 768px) {
  .p-contact-form__privacy {
    text-align: center;
    gap: 4rem;
  }
}

.p-contact-privacy__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1.2rem;
}
@media only screen and (min-width: 768px) {
  .p-contact-privacy__head {
    gap: 2rem;
  }
}

.p-contact-privacy__title {
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0.02em;
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .p-contact-privacy__title {
    font-size: 2rem;
  }
}

.p-contact-privacy__text {
  font-size: 1.5rem;
  line-height: 1.8;
  letter-spacing: 0.02em;
}
@media only screen and (min-width: 768px) {
  .p-contact-privacy__text {
    font-size: 1.8rem;
  }
}
.p-contact-privacy__text a {
  text-decoration: underline;
  -webkit-transition: color 0.3s ease;
  transition: color 0.3s ease;
}
@media (any-hover: hover) {
  .p-contact-privacy__text a:hover {
    color: #ef5a07;
  }
}

.p-contact-privacy__agree .wpcf7-list-item {
  margin-inline: 0;
}

.p-contact-privacy__agree label {
  position: relative;
  display: block;
  cursor: pointer;
}

/* 実物のチェック箱はリセットで見えなくなるため、ラベル側の擬似要素で描く */
.p-contact-privacy__agree input {
  position: absolute;
  top: 0;
  left: 0;
  width: 2.2rem;
  aspect-ratio: 1/1;
  opacity: 0;
  cursor: pointer;
}

.p-contact-privacy__agree .wpcf7-list-item-label {
  position: relative;
  display: block;
  padding-left: 3.7rem;
  font-size: 1.5rem;
  line-height: 1.8;
  letter-spacing: 0.02em;
}
@media only screen and (min-width: 768px) {
  .p-contact-privacy__agree .wpcf7-list-item-label {
    font-size: 1.8rem;
  }
}
.p-contact-privacy__agree .wpcf7-list-item-label::before {
  content: "";
  position: absolute;
  top: 0.25rem;
  left: 0;
  width: 2.2rem;
  aspect-ratio: 1/1;
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 1.2rem auto;
  border: 0.2rem solid #020202;
  border-radius: 0.5rem;
  -webkit-transition: background-color 0.2s ease, border-color 0.2s ease;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
@media only screen and (min-width: 768px) {
  .p-contact-privacy__agree .wpcf7-list-item-label::before {
    top: 0.52rem;
  }
}

.p-contact-privacy__agree input:checked + .wpcf7-list-item-label::before {
  background-image: url(../img/common/icon-check.svg);
  background-color: #41c4ba;
  border-color: #41c4ba;
}

.p-contact-privacy__agree input:focus-visible + .wpcf7-list-item-label::before {
  border-color: #41c4ba;
}

/* ------------------------------------------------
p-contact-form（送信ボタン）

input[type="submit"] には擬似要素が付けられないので、矢印は外側の箱が描く。
箱の幅はボタンと同じにしてあり、矢印の位置がボタンの右端基準で決まる。
--------------------------------------------------- */
.p-contact-form__turnstile {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.p-contact-form__submit {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.p-contact-submit__inner {
  position: relative;
  width: 100%;
  max-width: 30rem;
}

.p-contact-submit__inner::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 2rem;
  width: 1rem;
  height: 1.7rem;
  background-color: #fff;
  -webkit-mask-image: url(../img/common/arrow.svg);
          mask-image: url(../img/common/arrow.svg);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  pointer-events: none;
}

.p-contact-form .wpcf7-submit {
  width: 100%;
  height: 5.4rem;
  padding-inline: 4.5rem;
  color: #fff;
  font-family: "M PLUS 1p", sans-serif;
  font-size: 1.6rem;
  line-height: 1.5;
  letter-spacing: 0.02em;
  background-color: #ef5a07;
  border: 0.3rem solid #ef5a07;
  border-radius: 3.5rem;
  cursor: pointer;
  -webkit-transition: background-color 0.3s ease, border-color 0.3s ease;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
@media only screen and (min-width: 768px) {
  .p-contact-form .wpcf7-submit {
    height: 6.6rem;
    font-size: 1.8rem;
  }
}
.p-contact-form .wpcf7-submit:disabled {
  background-color: #d9d9d9;
  border-color: #d9d9d9;
  cursor: default;
}

@media (any-hover: hover) {
  .p-contact-form .wpcf7-submit:hover:not(:disabled) {
    background-color: #fc8b10;
    border-color: #fc8b10;
  }
}
.p-contact-form .wpcf7-spinner {
  position: absolute;
  top: 50%;
  left: calc(100% + 1.2rem);
  margin-inline: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

/* ------------------------------------------------
p-contact-form（エラー表示）
--------------------------------------------------- */
.p-contact-form .wpcf7-not-valid-tip {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  white-space: nowrap;
  color: #e43030;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
}
@media only screen and (min-width: 768px) {
  .p-contact-form .wpcf7-not-valid-tip {
    font-size: 1.2rem;
  }
}

.p-contact-form .wpcf7-form:not(.is-submitted) .wpcf7-not-valid-tip {
  display: none;
}

.p-contact-form .wpcf7-response-output {
  max-width: 77.1rem;
  margin-top: 0;
  margin-inline: auto;
  padding-block: 1.2rem;
  padding-inline: 1.6rem;
  font-size: 1.4rem;
  line-height: 1.6;
  text-align: center;
  border-width: 0.1rem;
  border-radius: 0.8rem;
}
@media only screen and (min-width: 768px) {
  .p-contact-form .wpcf7-response-output {
    font-size: 1.5rem;
  }
}

/* ------------------------------------------------
p-haken-about（「動く・こどもの館号」とは）
--------------------------------------------------- */
/* 下端のカーブは ::before で出す。::after にすると
   バス（最後の子）より後ろに描かれてバスが隠れる */
.p-haken-about {
  position: relative;
  padding-block: 5rem 14rem;
  background-color: #0dbaf7;
}
@media only screen and (min-width: 768px) {
  .p-haken-about {
    padding-block: 12rem 20rem;
  }
}
.p-haken-about::before {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4.8rem;
  content: "";
  background-image: url(../img/common/curve_base.svg);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% 100%;
}
@media only screen and (min-width: 768px) {
  .p-haken-about::before {
    height: 9.6rem;
  }
}

.p-haken-about__contents {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 3rem;
}
@media only screen and (min-width: 768px) {
  .p-haken-about__contents {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 8rem;
  }
}

.p-haken-about__body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 3rem;
  color: #fff;
}
@media only screen and (min-width: 768px) {
  .p-haken-about__body {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    gap: 8rem;
  }
}

.p-haken-about__title {
  height: 2.8rem;
}
@media only screen and (min-width: 768px) {
  .p-haken-about__title {
    height: auto;
    width: 48.7rem;
  }
}

.p-haken-about__text {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.02em;
}
@media only screen and (min-width: 768px) {
  .p-haken-about__text {
    font-size: 1.7rem;
  }
}

.p-haken-about__links {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1.5rem;
}
@media only screen and (min-width: 768px) {
  .p-haken-about__links {
    gap: 4rem;
  }
}

.p-haken-about__link {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.02em;
}
@media only screen and (min-width: 768px) {
  .p-haken-about__link {
    font-size: 1.7rem;
  }
}
.p-haken-about__link a {
  text-decoration: underline;
  text-underline-offset: 0.4rem;
  -webkit-transition: color 0.3s ease;
  transition: color 0.3s ease;
}

.p-haken-about__wrap {
  position: relative;
  height: 24rem;
}
@media only screen and (min-width: 768px) {
  .p-haken-about__wrap {
    width: 39rem;
    height: 56.8rem;
  }
}

.p-haken-about__img {
  position: absolute;
  top: 0;
  right: calc((min(100vw, 1160px) - 100vw) / 2 - 20px);
  left: 0;
  overflow: hidden;
  height: 100%;
  border-radius: 3rem 0 0 3rem;
}
@media only screen and (min-width: 768px) {
  .p-haken-about__img {
    right: calc((min(100vw, 1160px) - 100vw) / 2 - 30px);
    border-radius: 6rem 0 0 6rem;
  }
}
.p-haken-about__img img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.p-haken-about__car {
  position: absolute;
  bottom: 2rem;
  left: 2rem;
  width: 12rem;
}
@media only screen and (min-width: 768px) {
  .p-haken-about__car {
    bottom: 4.3rem;
    left: 9.3rem;
    width: 24rem;
  }
}

@media (any-hover: hover) {
  .p-haken-about__link a:hover {
    color: #020202;
  }
}
/* ------------------------------------------------
p-haken-program（派遣事業・あそびのプログラム例）
--------------------------------------------------- */
.p-haken-program {
  padding-block: 5rem 12rem;
}
@media only screen and (min-width: 768px) {
  .p-haken-program {
    padding-block: 10rem 30rem;
  }
}

.p-haken-program__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 4rem;
}
@media only screen and (min-width: 768px) {
  .p-haken-program__head {
    gap: 8rem;
  }
}

.p-haken-program__title {
  height: 5.3rem;
}
@media only screen and (min-width: 768px) {
  .p-haken-program__title {
    height: auto;
    width: 73.6rem;
  }
}

.p-haken-program__items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 4rem;
  width: 100%;
}
@media only screen and (min-width: 768px) {
  .p-haken-program__items {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    gap: 0;
  }
}

/* まん中のカードだけ下に余白を持ち、その分だけ上へ持ち上がって見える */
@media only screen and (min-width: 768px) {
  .p-haken-program__item:nth-child(2) {
    padding-bottom: 10rem;
  }
}

.p-haken-program__blocks {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 6rem;
  margin-top: 6rem;
}
@media only screen and (min-width: 768px) {
  .p-haken-program__blocks {
    gap: 12rem;
    margin-top: 14rem;
  }
}

/* ------------------------------------------------
p-haken-card（プログラム例のカード）
--------------------------------------------------- */
.p-haken-card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 2rem;
  width: 100%;
}
@media only screen and (min-width: 768px) {
  .p-haken-card {
    width: 37.8rem;
  }
}

.p-haken-card__img {
  position: relative;
  display: block;
  width: calc(100% - 4rem);
  max-width: 33.8rem;
  aspect-ratio: 378/382;
}
@media only screen and (min-width: 768px) {
  .p-haken-card__img {
    width: 100%;
    max-width: none;
  }
}

.p-haken-card__ring {
  position: absolute;
  inset: 0;
}

.p-haken-card__photo {
  position: absolute;
  top: 3.33%;
  left: 3.17%;
  width: 92.59%;
  height: 93.33%;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center center;
          mask-position: center center;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
}

.p-haken-card--orange .p-haken-card__photo {
  -webkit-mask-image: url(../img/haken/circle_mask01.svg);
          mask-image: url(../img/haken/circle_mask01.svg);
}

.p-haken-card--green .p-haken-card__photo {
  -webkit-mask-image: url(../img/haken/circle_mask02.svg);
          mask-image: url(../img/haken/circle_mask02.svg);
}

.p-haken-card--blue .p-haken-card__photo {
  -webkit-mask-image: url(../img/haken/circle_mask03.svg);
          mask-image: url(../img/haken/circle_mask03.svg);
}

.p-haken-card__body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 100%;
  text-align: center;
}

.p-haken-card__label {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.02em;
}
@media only screen and (min-width: 768px) {
  .p-haken-card__label {
    font-size: 2rem;
  }
}

.p-haken-card__title {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.02em;
}
@media only screen and (min-width: 768px) {
  .p-haken-card__title {
    font-size: 2.4rem;
  }
}

.p-haken-card--orange .p-haken-card__title {
  color: #fc8b10;
}

.p-haken-card--green .p-haken-card__title {
  color: #18a000;
}

.p-haken-card--blue .p-haken-card__title {
  color: #0dbaf7;
}

.p-haken-card__text {
  margin-top: 1rem;
  font-size: 1.5rem;
  line-height: 1.8;
  letter-spacing: 0.02em;
}
@media only screen and (min-width: 768px) {
  .p-haken-card__text {
    font-size: 1.7rem;
  }
}

.p-haken-card__balloon {
  position: absolute;
  top: 1rem;
  right: -2rem;
  width: 13rem;
  -webkit-transition: opacity 0.4s ease;
  transition: opacity 0.4s ease;
}
@media only screen and (min-width: 768px) {
  .p-haken-card__balloon {
    opacity: 0;
    top: -5rem;
    right: auto;
    left: 23.2rem;
    width: 20rem;
  }
}

@media only screen and (min-width: 768px) {
  .p-haken-card__img:hover .p-haken-card__balloon {
    opacity: 1;
  }
}
/* ------------------------------------------------
p-haken-block（派遣事業の3ブロック詳細）
--------------------------------------------------- */
.p-haken-block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 3rem;
}
@media only screen and (min-width: 768px) {
  .p-haken-block {
    gap: 4rem;
  }
}

.p-haken-block__title {
  padding-block: 0.5rem;
  padding-inline: 2rem;
  color: #fff;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.05em;
  border-radius: 1.5rem;
}
@media only screen and (min-width: 768px) {
  .p-haken-block__title {
    font-size: 2.2rem;
  }
}

.p-haken-block__title--orange {
  background-color: #fc8b10;
}

.p-haken-block__title--green {
  background-color: #18a000;
}

.p-haken-block__title--blue {
  background-color: #0dbaf7;
}

/* 段落の間隔はカンプの空行1行ぶん（本文の行送りと同じ） */
.p-haken-block__text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2.7rem;
  font-size: 1.5rem;
  line-height: 1.8;
  letter-spacing: 0.02em;
}
@media only screen and (min-width: 768px) {
  .p-haken-block__text {
    gap: 3.2rem;
    font-size: 1.7rem;
  }
}
.p-haken-block__text a {
  text-decoration: underline;
  text-underline-offset: 0.4rem;
  -webkit-transition: color 0.3s ease;
  transition: color 0.3s ease;
}
@media (any-hover: hover) {
  .p-haken-block__text a:hover {
    color: #ef5a07;
  }
}

.p-haken-block__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 1.6rem;
  font-size: 1.5rem;
  line-height: 1.8;
  letter-spacing: 0.02em;
}
@media only screen and (min-width: 768px) {
  .p-haken-block__item {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    gap: 2rem;
    font-size: 1.7rem;
  }
}
.p-haken-block__item em {
  color: #e43030;
  font-weight: 700;
  font-style: normal;
}

/* ------------------------------------------------
p-haken-flow（派遣実施までの流れ）
--------------------------------------------------- */
.p-haken-flow {
  position: relative;
  padding-block: 5rem 15rem;
  background-color: #ffde38;
}
@media only screen and (min-width: 768px) {
  .p-haken-flow {
    padding-block: 10rem 30rem;
  }
}
.p-haken-flow::before {
  content: "";
  position: absolute;
  bottom: calc(100% - 1px);
  left: 0;
  width: 100%;
  height: 7rem;
  /* 同じ絵を2枚敷き、2枚目を 6px ずらしてある。
     Safari は絵を「指定した枠より左右それぞれ約2.5px内側」にしか描かないので、
     1枚だけ繰り返すと継ぎ目に隙間（下地の色の縦線）が出る。
     2枚目をずらしておくと、その隙間を2枚目の本体が塞ぐ。
     ずらし量は実測で決めた（4px以下だと隙間が残り、5px以上で消える）。
     位置を変えたいときは background-position ではなく --cloud-x を書き換えること */
  --cloud-w: 67.2rem;
  --cloud-x: calc(50% + 2rem);
  background-image: url(../img/common/cloud_yellow.svg), url(../img/common/cloud_yellow.svg);
  background-repeat: repeat-x;
  background-size: var(--cloud-w) 100%;
  background-position: var(--cloud-x) bottom, calc(var(--cloud-x) + 6px) bottom;
}
@media only screen and (min-width: 768px) {
  .p-haken-flow::before {
    height: 18rem;
    --cloud-w: 172.8rem;
    --cloud-x: 50%;
  }
}

@media only screen and (min-width: 768px) {
  .p-haken-flow__title {
    width: 49.9rem;
  }
}

.p-haken-flow__items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 6rem;
  margin-top: 5rem;
}
@media only screen and (min-width: 768px) {
  .p-haken-flow__items {
    gap: 8rem;
    margin-top: 10rem;
  }
}

.p-haken-flow__item {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2rem;
}
@media only screen and (min-width: 768px) {
  .p-haken-flow__item {
    gap: 4rem;
  }
}

/* 番号どうしをつなぐ縦線。線は番号の中心から次の項目の頭までを1本ずつ受け持つ。
   中心から丸の下端までは白い丸が覆うので、途切れて見えることはない */
.p-haken-flow__item:not(:last-child)::before {
  position: absolute;
  top: 2rem;
  bottom: -6rem;
  left: 1.75rem;
  width: 0.5rem;
  content: "";
  background-color: #afafaf;
}
@media only screen and (min-width: 768px) {
  .p-haken-flow__item:not(:last-child)::before {
    top: 2.5rem;
    bottom: -8rem;
    left: 2.15rem;
    width: 0.7rem;
  }
}

.p-haken-flow__head {
  position: relative;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1.2rem;
}
@media only screen and (min-width: 768px) {
  .p-haken-flow__head {
    gap: 2rem;
  }
}

.p-haken-flow__num {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 4rem;
  aspect-ratio: 1/1;
  background-color: #fff;
  border-radius: 100%;
}
@media only screen and (min-width: 768px) {
  .p-haken-flow__num {
    width: 5rem;
  }
}
.p-haken-flow__num img {
  width: auto;
  height: 2.3rem;
}
@media only screen and (min-width: 768px) {
  .p-haken-flow__num img {
    height: 2.9rem;
  }
}

.p-haken-flow__subtitle {
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.05em;
}
@media only screen and (min-width: 768px) {
  .p-haken-flow__subtitle {
    font-size: 2.2rem;
  }
}

.p-haken-flow__body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 3rem;
  margin-left: 5.2rem;
  padding-block: 3rem;
  padding-inline: 2rem;
  font-size: 1.5rem;
  line-height: 1.8;
  letter-spacing: 0.02em;
  background-color: #fff;
}
@media only screen and (min-width: 768px) {
  .p-haken-flow__body {
    gap: 5rem;
    margin-left: 7rem;
    padding-block: 6rem;
    padding-inline: 6rem;
    font-size: 1.7rem;
  }
}
.p-haken-flow__body p a {
  text-decoration: underline;
  text-underline-offset: 0.4rem;
  -webkit-transition: color 0.3s ease;
  transition: color 0.3s ease;
}
@media (any-hover: hover) {
  .p-haken-flow__body p a:hover {
    color: #ef5a07;
  }
}

.p-haken-flow__text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2.7rem;
}
@media only screen and (min-width: 768px) {
  .p-haken-flow__text {
    gap: 3.2rem;
  }
}
.p-haken-flow__text a {
  text-decoration: underline;
  text-underline-offset: 0.4rem;
  -webkit-transition: color 0.3s ease;
  transition: color 0.3s ease;
}
@media (any-hover: hover) {
  .p-haken-flow__text a:hover {
    color: #ef5a07;
  }
}

.p-haken-flow__group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 1.6rem;
}
@media only screen and (min-width: 768px) {
  .p-haken-flow__group {
    gap: 2rem;
  }
}
.p-haken-flow__group em {
  color: #e43030;
  font-weight: 700;
  font-style: normal;
}
.p-haken-flow__group dd {
  padding-left: 1em;
}

/* 四隅の丸は背景で描く（要素を4つ足さない）。
   背景の基準は padding box なので、枠線の内側 13px に置かれる */
.p-haken-flow__announce {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2.7rem;
  margin-top: 6rem;
  padding-block: 3rem;
  padding-inline: 1.6rem;
  font-size: 1.5rem;
  line-height: 1.8;
  letter-spacing: 0.02em;
  background-color: #fff;
  background-image: radial-gradient(circle, #fc8b10 50%, transparent 51%), radial-gradient(circle, #fc8b10 50%, transparent 51%), radial-gradient(circle, #fc8b10 50%, transparent 51%), radial-gradient(circle, #fc8b10 50%, transparent 51%);
  background-repeat: no-repeat;
  background-position: left 1rem top 1rem, right 1rem top 1rem, left 1rem bottom 1rem, right 1rem bottom 1rem;
  background-size: 1rem 1rem;
  border: 0.5rem solid #fc8b10;
  border-radius: 1.2rem;
}
@media only screen and (min-width: 768px) {
  .p-haken-flow__announce {
    gap: 3.6rem;
    margin-top: 10rem;
    padding-block: 6rem;
    padding-inline: 5rem 4rem;
    font-size: 1.8rem;
    background-position: left 1.3rem top 1.3rem, right 1.3rem top 1.3rem, left 1.3rem bottom 1.3rem, right 1.3rem bottom 1.3rem;
    background-size: 1.2rem 1.2rem;
    border-width: 0.7rem;
    border-radius: 2rem;
  }
}
.p-haken-flow__announce em {
  color: #e43030;
  font-weight: 700;
  font-style: normal;
}

.p-haken-flow__announceItem {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 1.5rem;
}
@media only screen and (min-width: 768px) {
  .p-haken-flow__announceItem {
    gap: 2rem;
  }
}

/* ------------------------------------------------
p-haken（ページ固有の共通パーツ調整）
--------------------------------------------------- */
/* 流れセクション（黄色）から下地へ切り替わる雲。
   このページだけ CTA の上に出すので、ページのクラスから当てる */
.p-haken .p-cta {
  margin-top: 0;
  padding-top: 11rem;
}
@media only screen and (min-width: 768px) {
  .p-haken .p-cta {
    margin-top: 0;
    padding-top: 16rem;
  }
}
.p-haken .p-cta::before {
  content: "";
  position: absolute;
  bottom: calc(100% - 1px);
  left: 0;
  width: 100%;
  height: 7.6rem;
  /* 同じ絵を2枚敷き、2枚目を 6px ずらしてある。
     Safari は絵を「指定した枠より左右それぞれ約2.5px内側」にしか描かないので、
     1枚だけ繰り返すと継ぎ目に隙間（下地の色の縦線）が出る。
     2枚目をずらしておくと、その隙間を2枚目の本体が塞ぐ。
     ずらし量は実測で決めた（4px以下だと隙間が残り、5px以上で消える）。
     位置を変えたいときは background-position ではなく --cloud-x を書き換えること */
  --cloud-w: 72.96rem;
  --cloud-x: calc(50% + 5.57rem);
  background-image: url(../img/common/cloud_gray.svg), url(../img/common/cloud_gray.svg);
  background-repeat: repeat-x;
  background-size: var(--cloud-w) 100%;
  background-position: var(--cloud-x) bottom, calc(var(--cloud-x) + 6px) bottom;
}
@media only screen and (min-width: 768px) {
  .p-haken .p-cta::before {
    height: 18rem;
    --cloud-w: 172.8rem;
    --cloud-x: 50%;
  }
}

/* ------------------------------------------------
p-form

Contact Form 7 が出力するクラス（.wpcf7-◯◯）は書き換えられないため、
ブロックの中に限って子孫セレクタで当てる。
--------------------------------------------------- */
.p-form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2rem;
}
@media only screen and (min-width: 768px) {
  .p-form {
    gap: 3rem;
  }
}

.p-form__title {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.5;
}
@media only screen and (min-width: 768px) {
  .p-form__title {
    font-size: 2.6rem;
  }
}

.p-form__meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 1rem 2rem;
}

.p-form__intro,
.p-form__notes,
.p-form__outro,
.p-form__closed {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1.2rem;
}

.p-form__notes {
  padding-block: 1.6rem;
  padding-inline: 1.6rem;
  background-color: #FAF7F3;
  border-radius: 0.8rem;
}
@media only screen and (min-width: 768px) {
  .p-form__notes {
    padding-block: 2.4rem;
    padding-inline: 2.4rem;
  }
}
.p-form__notes {
  /* リセットで消した箇条書きの点を、この中だけ戻す */
}
.p-form__notes ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.6rem;
  padding-left: 1.8rem;
  list-style: disc;
}

/* 固定ページの本文。説明文とフォームのあいだの余白をここで持つ */
.p-form__contents {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2rem;
  font-size: 1.4rem;
  line-height: 1.8;
}
@media only screen and (min-width: 768px) {
  .p-form__contents {
    gap: 3rem;
    font-size: 1.7rem;
  }
}

/* 項目が多いフォームの区切り見出し */
.p-form__section {
  padding-top: 2.4rem;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  color: #41c4ba;
}
@media only screen and (min-width: 768px) {
  .p-form__section {
    padding-top: 3.2rem;
    font-size: 1.9rem;
  }
}

.p-form__lead {
  font-size: 1.3rem;
  line-height: 1.6;
}
@media only screen and (min-width: 768px) {
  .p-form__lead {
    font-size: 1.5rem;
  }
}

.p-form__req,
.p-contact-form__req {
  display: inline-block;
  padding-block: 0.2rem;
  padding-inline: 0.8rem;
  color: #fff;
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.05em;
  background-color: #e43030;
  border-radius: 0.4rem;
}

.p-form__row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.8rem;
  padding-block: 2.4rem;
  border-bottom: 0.1rem solid rgba(2, 2, 2, 0.12);
}
@media only screen and (min-width: 768px) {
  .p-form__row {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 2.4rem;
    padding-block: 3.2rem;
  }
}

/* 幅は「ご要望・アレルギー等」＋「必須」が1行に収まる値。狭めると項目名が折り返す */
.p-form__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.8rem;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.6;
}
@media only screen and (min-width: 768px) {
  .p-form__head {
    width: 26rem;
    min-height: 4.8rem;
    font-size: 1.7rem;
  }
}

/* 入力欄が1つの行は見出しが label なので、押せることを示す */
label.p-form__head {
  cursor: pointer;
}

.p-form__body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1.2rem;
}
@media only screen and (min-width: 768px) {
  .p-form__body {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
  }
}

/* 入力欄と「名」「人」などの単位を横に並べる */
.p-form__unit {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.6rem;
}

.p-form__note {
  font-size: 1.3rem;
  line-height: 1.4;
}
@media only screen and (min-width: 768px) {
  .p-form__note {
    font-size: 1.4rem;
  }
}

.p-form__agree {
  padding-block: 1.6rem;
}

.p-form .p-contact-privacy {
  padding-block: 2.4rem 3rem;
}
@media only screen and (min-width: 768px) {
  .p-form .p-contact-privacy {
    padding-block: 4rem 6rem;
  }
}

.p-form__turnstile {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-bottom: 2rem;
}
@media only screen and (min-width: 768px) {
  .p-form__turnstile {
    margin-bottom: 3rem;
  }
}

.p-form__submit {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.p-form__submit .wpcf7-spinner {
  position: absolute;
  top: 50%;
  left: calc(50% + 13.2rem);
  margin-inline: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
@media only screen and (min-width: 768px) {
  .p-form__submit .wpcf7-spinner {
    left: calc(50% + 16.2rem);
  }
}

/* ------------------------------------------------
p-form-meta（申込締切・定員）
--------------------------------------------------- */
.p-form-meta__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.8rem;
  font-size: 1.4rem;
  line-height: 1.6;
}
@media only screen and (min-width: 768px) {
  .p-form-meta__item {
    font-size: 1.6rem;
  }
}
.p-form-meta__item dt {
  padding-block: 0.2rem;
  padding-inline: 1rem;
  color: #fff;
  font-weight: 600;
  background-color: #41c4ba;
  border-radius: 0.4rem;
}
.p-form-meta__item dd {
  font-weight: 700;
}

/* ------------------------------------------------
p-form-child（参加するこども）
--------------------------------------------------- */
.p-form-child {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.8rem;
  padding-block: 1.4rem;
  padding-inline: 1.4rem;
  background-color: #FAF7F3;
  border-radius: 0.8rem;
}

.p-form-child__title {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.5;
}

.p-form-child__fields {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
}
@media only screen and (min-width: 768px) {
  .p-form-child__fields {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
}

.p-form-child__field {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.4rem;
}
@media only screen and (min-width: 768px) {
  .p-form-child__field {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
  }
}
.p-form-child__field span {
  font-size: 1.3rem;
  line-height: 1.5;
}

/* ------------------------------------------------
p-form-count（参加人数）
--------------------------------------------------- */
.p-form-count {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem 1.6rem;
}
@media only screen and (min-width: 768px) {
  .p-form-count {
    grid-template-columns: repeat(4, 1fr);
  }
}

.p-form-count__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.4rem 0.6rem;
  font-size: 1.3rem;
  line-height: 1.5;
}
.p-form-count__item span:first-child {
  width: 100%;
}

/* 入力欄の共通幅（100%）より後に効かせるため、CF7 のクラスと重ねて詳細度を上げる */
.p-form .wpcf7-number.p-form-count__input {
  width: 6rem;
}

.p-form .wpcf7-number {
  -webkit-appearance: textfield;
     -moz-appearance: textfield;
          appearance: textfield;
}
.p-form .wpcf7-number::-webkit-inner-spin-button, .p-form .wpcf7-number::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
          appearance: none;
}

/* ------------------------------------------------
p-form（Contact Form 7 の出力）
--------------------------------------------------- */
.p-form .wpcf7-form-control-wrap {
  position: relative;
  display: block;
}

@media only screen and (min-width: 768px) {
  .p-form__body > .wpcf7-form-control-wrap:has(> .wpcf7-radio),
  .p-form__body > .wpcf7-form-control-wrap:has(> .wpcf7-checkbox) {
    padding-top: 1.2rem;
  }
}

.p-form .wpcf7-text,
.p-form .wpcf7-textarea,
.p-form .wpcf7-select,
.p-form .wpcf7-number,
.p-form .wpcf7-date {
  width: 100%;
  padding-block: 1.1rem;
  padding-inline: 1.2rem;
  font-size: 1.6rem;
  line-height: 1.5;
  background-color: #FAF7F3;
  border: 0.1rem solid #333333;
  border-radius: 0.6rem;
  -webkit-transition: border-color 0.3s ease;
  transition: border-color 0.3s ease;
}
.p-form .wpcf7-text::-webkit-input-placeholder, .p-form .wpcf7-textarea::-webkit-input-placeholder, .p-form .wpcf7-select::-webkit-input-placeholder, .p-form .wpcf7-number::-webkit-input-placeholder, .p-form .wpcf7-date::-webkit-input-placeholder {
  color: rgba(2, 2, 2, 0.35);
}
.p-form .wpcf7-text::-moz-placeholder, .p-form .wpcf7-textarea::-moz-placeholder, .p-form .wpcf7-select::-moz-placeholder, .p-form .wpcf7-number::-moz-placeholder, .p-form .wpcf7-date::-moz-placeholder {
  color: rgba(2, 2, 2, 0.35);
}
.p-form .wpcf7-text:-ms-input-placeholder, .p-form .wpcf7-textarea:-ms-input-placeholder, .p-form .wpcf7-select:-ms-input-placeholder, .p-form .wpcf7-number:-ms-input-placeholder, .p-form .wpcf7-date:-ms-input-placeholder {
  color: rgba(2, 2, 2, 0.35);
}
.p-form .wpcf7-text::-ms-input-placeholder, .p-form .wpcf7-textarea::-ms-input-placeholder, .p-form .wpcf7-select::-ms-input-placeholder, .p-form .wpcf7-number::-ms-input-placeholder, .p-form .wpcf7-date::-ms-input-placeholder {
  color: rgba(2, 2, 2, 0.35);
}
.p-form .wpcf7-text::placeholder,
.p-form .wpcf7-textarea::placeholder,
.p-form .wpcf7-select::placeholder,
.p-form .wpcf7-number::placeholder,
.p-form .wpcf7-date::placeholder {
  color: rgba(2, 2, 2, 0.35);
}
.p-form .wpcf7-text:focus,
.p-form .wpcf7-textarea:focus,
.p-form .wpcf7-select:focus,
.p-form .wpcf7-number:focus,
.p-form .wpcf7-date:focus {
  border-color: #41c4ba;
}

/* 入力欄の共通幅（100%）より後に効かせるため、CF7 のクラスと重ねて詳細度を上げる */
@media only screen and (min-width: 768px) {
  .p-form .wpcf7-text.p-form__zip {
    width: 20rem;
  }
}

@media only screen and (min-width: 768px) {
  .p-form .wpcf7-date.p-form__date {
    width: 24rem;
  }
}

.p-form .wpcf7-date {
  position: relative;
  min-height: 4.8rem;
  padding-right: 4rem;
  text-align: left;
  background-image: url("../img/common/icon-calendar.svg");
  background-repeat: no-repeat;
  background-position: right 1.2rem center;
  background-size: 2rem auto;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
}
.p-form .wpcf7-date::-webkit-calendar-picker-indicator {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.p-form .wpcf7-date::-webkit-date-and-time-value {
  text-align: left;
}

@supports (-moz-appearance: none) {
  .p-form .wpcf7-date {
    background-image: none;
  }
}
.p-form .wpcf7-date.is-empty,
.p-form .wpcf7-date.is-empty::-webkit-datetime-edit {
  color: transparent;
}

.p-form .wpcf7-form-control-wrap:has(> .wpcf7-date.is-empty)::before {
  content: "年/月/日";
  position: absolute;
  top: 1.2rem;
  left: 1.3rem;
  z-index: 1;
  color: rgba(2, 2, 2, 0.35);
  font-size: 1.6rem;
  line-height: 1.5;
  pointer-events: none;
}

.p-form .wpcf7-textarea {
  min-height: 12rem;
  max-height: 24rem;
  line-height: 1.8;
  resize: vertical;
}

.p-form .wpcf7-textarea[rows="6"] {
  min-height: 16.8rem;
  max-height: 33.6rem;
}

.p-form .wpcf7-textarea[rows="2"] {
  min-height: 7.2rem;
  max-height: 14.4rem;
}

.p-form .wpcf7-select {
  padding-inline: 1.2rem 3.2rem;
  background-image: url("../img/common/icon-select.svg");
  background-repeat: no-repeat;
  background-position: right 1.2rem center;
  background-size: 1.2rem auto;
  cursor: pointer;
}

/* 選択肢は幅のそろった段組みにする。文字数がばらついても左端が縦にそろう。
   justify-items: start が要。これが無いと1マスいっぱいに <label> が広がり、
   選択肢と選択肢のあいだの何もない所を押しても選択されてしまう */
.p-form .wpcf7-checkbox,
.p-form .wpcf7-radio {
  display: grid;
  justify-items: start;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 1rem 1.6rem;
}
@media only screen and (min-width: 768px) {
  .p-form .wpcf7-checkbox,
  .p-form .wpcf7-radio {
    grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr));
  }
}

/* 開催日・開催時間は「12月30日(日)」程度の短い文字なので、1マスを狭くする */
@media only screen and (min-width: 768px) {
  .p-form [data-name=event-date] .wpcf7-checkbox,
  .p-form [data-name=event-time] .wpcf7-checkbox {
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  }
}

.p-form .wpcf7-acceptance {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 1rem 2rem;
}

.p-form .wpcf7-list-item {
  margin: 0;
}

.p-form .wpcf7-list-item label {
  position: relative;
  display: block;
  cursor: pointer;
}

/* 実物のチェック箱はリセットで見えなくなるため、ラベル側の擬似要素で描く */
.p-form .wpcf7-list-item input {
  position: absolute;
  top: 0;
  left: 0;
  width: 2.2rem;
  aspect-ratio: 1/1;
  opacity: 0;
  cursor: pointer;
}

.p-form .wpcf7-list-item-label {
  position: relative;
  display: block;
  padding-left: 3.2rem;
  font-size: 1.5rem;
  line-height: 1.6;
}
.p-form .wpcf7-list-item-label::before {
  content: "";
  position: absolute;
  top: 0.1rem;
  left: 0;
  width: 2.2rem;
  aspect-ratio: 1/1;
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 1.2rem auto;
  border: 0.2rem solid rgba(2, 2, 2, 0.25);
  border-radius: 0.4rem;
  -webkit-transition: background-color 0.2s ease, border-color 0.2s ease;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.p-form .wpcf7-radio .wpcf7-list-item-label::before {
  border-radius: 50%;
}

.p-form .wpcf7-list-item input:checked + .wpcf7-list-item-label::before {
  background-image: url("../img/common/icon-check.svg");
  background-color: #41c4ba;
  border-color: #41c4ba;
}

.p-form .wpcf7-radio .wpcf7-list-item input:checked + .wpcf7-list-item-label::before {
  background-image: none;
  -webkit-box-shadow: inset 0 0 0 0.3rem #fff;
          box-shadow: inset 0 0 0 0.3rem #fff;
}

.p-form .wpcf7-list-item input:focus-visible + .wpcf7-list-item-label::before {
  border-color: #41c4ba;
}

.p-form .wpcf7-submit {
  width: 24rem;
  height: 5rem;
  color: #fff;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  background-color: #ef5a07;
  border-radius: 3.5rem;
  cursor: pointer;
  -webkit-transition: background-color 0.3s ease;
  transition: background-color 0.3s ease;
}
@media only screen and (min-width: 768px) {
  .p-form .wpcf7-submit {
    width: 30rem;
    height: 6.6rem;
    font-size: 1.7rem;
  }
}
.p-form .wpcf7-submit:disabled {
  background-color: rgba(2, 2, 2, 0.25);
  cursor: default;
}
@media (any-hover: hover) {
  .p-form .wpcf7-submit:hover:not(:disabled) {
    background-color: #fc8b10;
  }
}

.p-form .wpcf7-not-valid-tip {
  position: absolute;
  top: 100%;
  left: 0;
  display: block;
  margin-top: 0.4rem;
  white-space: nowrap;
  color: #e43030;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
}
@media only screen and (min-width: 768px) {
  .p-form .wpcf7-not-valid-tip {
    font-size: 1.2rem;
  }
}

.p-form__body > .wpcf7-form-control-wrap:has(.wpcf7-not-valid-tip) + .p-form__note {
  margin-top: 1.2rem;
}

.p-form .wpcf7-response-output {
  margin-top: 2rem;
  margin-inline: 0;
  padding-block: 1.2rem;
  padding-inline: 1.6rem;
  font-size: 1.4rem;
  line-height: 1.6;
  border-width: 0.2rem;
  border-radius: 0.8rem;
}

.p-form .wpcf7-spinner {
  margin-inline: 1.2rem;
}

/* ------------------------------------------------
p-privacy-policy
--------------------------------------------------- */
.p-privacy-policy__body {
  padding-block: 6rem;
}
@media only screen and (min-width: 768px) {
  .p-privacy-policy__body {
    padding-block: 10rem;
  }
}

.p-privacy-policy__contents {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 5rem;
  max-width: 90rem;
  margin-inline: auto;
  font-size: 1.4rem;
  line-height: 1.8;
  letter-spacing: 0.02em;
}
@media only screen and (min-width: 768px) {
  .p-privacy-policy__contents {
    gap: 8rem;
    font-size: 1.7rem;
  }
}

.p-privacy-policy__section {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2.4rem;
}
@media only screen and (min-width: 768px) {
  .p-privacy-policy__section {
    gap: 3.2rem;
  }
}

.p-privacy-policy__block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1.2rem;
}
@media only screen and (min-width: 768px) {
  .p-privacy-policy__block {
    gap: 1.6rem;
  }
}

.p-privacy-policy__subtitle {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.05em;
}
@media only screen and (min-width: 768px) {
  .p-privacy-policy__subtitle {
    font-size: 2rem;
  }
}

.p-privacy-policy__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.8rem;
}
@media only screen and (min-width: 768px) {
  .p-privacy-policy__list {
    gap: 1rem;
  }
}
.p-privacy-policy__list > li {
  padding-left: 2em;
  text-indent: -2em;
}

.p-privacy-policy__sublist {
  margin-top: 0.4rem;
}

.p-privacy-policy__sign {
  text-align: right;
}

/* ------------------------------------------------
p-message
--------------------------------------------------- */
.p-message__body {
  padding-block: 6rem 20rem;
}
@media only screen and (min-width: 768px) {
  .p-message__body {
    padding-block: 10rem 32rem;
  }
}

.p-message__contents {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2.4rem;
  max-width: 90rem;
  margin-inline: auto;
}
@media only screen and (min-width: 768px) {
  .p-message__contents {
    gap: 3.2rem;
  }
}

.p-message__text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1.2rem;
  font-size: 1.4rem;
  line-height: 1.8;
  letter-spacing: 0.02em;
}
@media only screen and (min-width: 768px) {
  .p-message__text {
    gap: 1.6rem;
    font-size: 1.7rem;
  }
}
.p-message__text a {
  text-decoration: underline;
}

.p-message__btn {
  margin-top: 1.6rem;
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .p-message__btn {
    margin-top: 2.4rem;
  }
}

/* --------------------------------
utility
----------------------------------- */
.u-ib {
  display: inline-block;
}

@media only screen and (max-width: 767px) {
  .u-pc {
    display: none !important;
  }
}

@media only screen and (min-width: 768px) {
  .u-sp {
    display: none !important;
  }
}

.u-text-indent {
  padding-left: 1em;
  text-indent: -1em;
}

.u-text-red {
  color: #e43030;
  font-weight: 700;
}/*# sourceMappingURL=style.css.map */