@charset "UTF-8";
/* -----------------------------------------------------------------
 Foundation
----------------------------------------------------------------- */
:root {
  /* サイトカラー */
  --color-primary: #268948;
  --color-primary-dark: #1E8240;
  --color-secondary: #5BB8D5;
  --color-secondary-dark: #48B4D6;
  --color-tertiary: #FFA722;
  --color-quaternary: #E4EC7A;
  --color-text: #1d1d1d;
  --color-bg: #FAF6F3;
  --color-bg-secondary: #F3F3F3;
  --color-white: #fff;
  /* font */
  --font-base: "M PLUS 1p", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic Medium", "Meiryo", sans-serif;
  --font-en: "Grandstander", sans-serif;
  --font-number: "Albert Sans", sans-serif;
  --font-size13: clamp(0.8125rem, 0.8125rem + 0vw, 0.8125rem);
  --font-size15: clamp(0.9375rem, 0.9375rem + 0vw, 0.9375rem);
  --font-size16: clamp(1rem, 1rem + 0vw, 1rem);
  --font-size18: clamp(1.125rem, 1.125rem + 0vw, 1.125rem);
  --font-size20: clamp(1.25rem, 1.25rem + 0vw, 1.25rem);
  --font-size22: clamp(1.25rem, 1.2035714286rem + 0.1904761905vw, 1.375rem);
  --font-size24: clamp(1.375rem, 1.3285714286rem + 0.1904761905vw, 1.5rem);
  --font-size26: clamp(1.5rem, 1.4535714286rem + 0.1904761905vw, 1.625rem);
  --font-size28: clamp(1.5rem, 1.4071428571rem + 0.380952381vw, 1.75rem);
  --font-size32: clamp(1.625rem, 1.4857142857rem + 0.5714285714vw, 2rem);
  --font-size40: clamp(1.75rem, 1.4714285714rem + 1.1428571429vw, 2.5rem);
  --font-size48: clamp(2.5rem, 2.3142857143rem + 0.7619047619vw, 3rem);
  --font-size56: clamp(2.875rem, 2.6428571429rem + 0.9523809524vw, 3.5rem);
  --font-size120: clamp(5rem, 4.0714285714rem + 3.8095238095vw, 7.5rem);
  /* header */
  --header-height-sm: 64px;
  --header-height-md: 88px;
  --header-height-lg: 110px;
  /* inner */
  --inner-max-width-sm: 880px;
  --inner-max-width-md: 1080px;
  --inner-max-width-lg: 1240px;
  --inner-max-width-xl: 1440px;
  /* radius */
  --radius-xxs: 5px;
  --radius-xs: 10px;
  --radius-sm: 20px;
  --radius-md: 30px;
  /* transition */
  --transition-default: 0.3s ease-in-out;
}

/*======================
  reset
======================*/
/*! destyle.css v4.0.1 | MIT License | https://github.com/nicolas-cusan/destyle.css */
/* Reset box-model and set borders */
/* ============================================ */
main *,
::before,
::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-style: solid;
  border-width: 0;
  min-width: 0;
}

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -webkit-tap-highlight-color: transparent; /* 3*/
}

main {
  display: block;
}

main p,
main table,
main blockquote,
main address,
main pre,
main iframe,
main form,
main figure,
main dl {
  margin: 0;
}

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

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

main dt {
  font-weight: normal;
}

main dd {
  margin-left: 0;
}

hr {
  -webkit-box-sizing: content-box;
          box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
  border-top-width: 1px;
  margin: 0;
  clear: both;
  color: inherit;
}

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: inherit; /* 2 */
}

address {
  font-style: inherit;
}

main a {
  background-color: transparent;
  text-decoration: none;
  color: inherit;
}

abbr[title] {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted; /* 2 */
}

b,
strong {
  font-weight: bolder;
}

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: inherit; /* 2 */
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

main svg,
main img,
main embed,
main object,
main iframe {
  vertical-align: bottom;
}

main svg,
main img,
picture {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: middle;
}

button,
input,
optgroup,
select,
textarea {
  -webkit-appearance: none; /* 1 */
  -moz-appearance: none;
       appearance: none;
  vertical-align: middle;
  color: inherit;
  font: inherit;
  background: transparent;
  padding: 0;
  margin: 0;
  border-radius: 0;
  text-align: inherit;
  text-transform: inherit; /* 2 */
}

button,
[type=button],
[type=reset],
[type=submit] {
  cursor: pointer;
}

button:disabled,
[type=button]:disabled,
[type=reset]:disabled,
[type=submit]:disabled {
  cursor: default;
}

:-moz-focusring {
  outline: auto;
}

select:disabled {
  opacity: inherit;
}

option {
  padding: 0;
}

fieldset {
  margin: 0;
  padding: 0;
  min-width: 0;
}

legend {
  padding: 0;
}

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

[type=search] {
  outline-offset: -2px; /* 1 */
}

[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

[type=number] {
  -moz-appearance: textfield;
}

label[for] {
  cursor: pointer;
}

details {
  display: block;
}

summary {
  display: list-item;
}

[contenteditable]:focus {
  outline: auto;
}

table {
  border-color: inherit; /* 1 */
  border-collapse: collapse;
}

caption {
  text-align: left;
}

td,
th {
  vertical-align: top;
  padding: 0;
}

th {
  text-align: left;
  font-weight: normal;
}

/*=======================
  breakpoints
=======================*/
/* -----------------------------------------------------------------
 Foundation
----------------------------------------------------------------- */
/*=======================
  scroll animation
=======================*/
.js-fade,
.js-fade-up,
.js-scale-up {
  opacity: 0;
  -webkit-transition-property: opacity, translate, scale;
  transition-property: opacity, translate, scale;
  -webkit-transition-duration: var(--anim-duration, 0.8s);
          transition-duration: var(--anim-duration, 0.8s);
  -webkit-transition-timing-function: var(--anim-easing, cubic-bezier(0.22, 1, 0.36, 1));
          transition-timing-function: var(--anim-easing, cubic-bezier(0.22, 1, 0.36, 1));
  -webkit-transition-delay: var(--anim-delay, 0s);
          transition-delay: var(--anim-delay, 0s);
  will-change: opacity, translate, scale;
}

.js-fade-up {
  translate: 0 var(--anim-distance, 2rem);
}

.js-scale-up {
  scale: var(--anim-scale, 0.8);
}

.js-fade.is-inview,
.js-fade-up.is-inview,
.js-scale-up.is-inview {
  opacity: 1;
  translate: 0 0;
  scale: 1;
}

/* 揺れ（繰り返し） */
@-webkit-keyframes anim-shake {
  0%, 100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  25% {
    -webkit-transform: rotate(var(--shake-angle, 2deg));
            transform: rotate(var(--shake-angle, 2deg));
  }
  75% {
    -webkit-transform: rotate(calc(var(--shake-angle, 2deg) * -1));
            transform: rotate(calc(var(--shake-angle, 2deg) * -1));
  }
}
@keyframes anim-shake {
  0%, 100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  25% {
    -webkit-transform: rotate(var(--shake-angle, 2deg));
            transform: rotate(var(--shake-angle, 2deg));
  }
  75% {
    -webkit-transform: rotate(calc(var(--shake-angle, 2deg) * -1));
            transform: rotate(calc(var(--shake-angle, 2deg) * -1));
  }
}
.js-shake.is-inview {
  -webkit-animation: anim-shake var(--shake-duration, 0.4s) ease var(--anim-delay, 0s) infinite;
          animation: anim-shake var(--shake-duration, 0.4s) ease var(--anim-delay, 0s) infinite;
}

/* 左右にゆらゆら（rotate / 繰り返し） */
@-webkit-keyframes anim-sway {
  0%, 100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  25% {
    -webkit-transform: rotate(calc(var(--sway-angle, 3deg) * -1));
            transform: rotate(calc(var(--sway-angle, 3deg) * -1));
  }
  75% {
    -webkit-transform: rotate(var(--sway-angle, 3deg));
            transform: rotate(var(--sway-angle, 3deg));
  }
}
@keyframes anim-sway {
  0%, 100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  25% {
    -webkit-transform: rotate(calc(var(--sway-angle, 3deg) * -1));
            transform: rotate(calc(var(--sway-angle, 3deg) * -1));
  }
  75% {
    -webkit-transform: rotate(var(--sway-angle, 3deg));
            transform: rotate(var(--sway-angle, 3deg));
  }
}
.js-sway.is-inview {
  -webkit-animation: anim-sway var(--sway-duration, 2.4s) ease-in-out var(--anim-delay, 0s) infinite;
          animation: anim-sway var(--sway-duration, 2.4s) ease-in-out var(--anim-delay, 0s) infinite;
}

/* 点滅（繰り返し）: コンポーネント側で .is-inview を起点に利用 */
@-webkit-keyframes anim-blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
}
@keyframes anim-blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
}
@media (prefers-reduced-motion: reduce) {
  .js-fade,
  .js-fade-up,
  .js-scale-up {
    opacity: 1;
    translate: 0;
    scale: 1;
    -webkit-transition: none;
    transition: none;
  }
  .js-shake.is-inview,
  .js-sway.is-inview {
    -webkit-animation: none;
            animation: none;
  }
}
/* -----------------------------------------------------------------
 Foundation
----------------------------------------------------------------- */
/*======================
  base
======================*/
main * {
  min-height: 0vw;
}

html {
  scrollbar-gutter: stable;
  overflow-y: scroll;
}

main {
  /*background-color: #fff;*/
  color: var(--color-text);
  font-family: var(--font-base);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0;
  overflow-wrap: anywhere;
  word-break: normal;
  line-break: strict;
  overflow-x: clip;
}
@media screen and (min-width: 768px) {
  main a[href*="tel:"] {
    pointer-events: none;
    cursor: default;
    text-decoration: none;
  }
}

/* アンカーリンクの着地位置オフセット */
#about,
#attraction,
#food,
#camp,
#guide {
  scroll-margin-top: 8.75rem;
}
@media screen and (min-width: 768px) {
  #about,
  #attraction,
  #food,
  #camp,
  #guide {
    scroll-margin-top: 11.25rem;
  }
}

/*======================
  svg
======================*/
.svg,
.svg-defs {
  display: none;
  position: relative;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}

.svg-icon {
  display: inline-block;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.icon-c-arrow {
  width: 1rem;
  aspect-ratio: 1/1;
  -webkit-transition: all var(--transition-default);
  transition: all var(--transition-default);
}

.icon-arrow {
  width: 1rem;
  aspect-ratio: 1/1;
  -webkit-transition: all var(--transition-default);
  transition: all var(--transition-default);
}

.icon-toggle {
  width: 1.5rem;
  aspect-ratio: 1/1;
  -webkit-transition: all var(--transition-default);
  transition: all var(--transition-default);
}

.icon-map {
  width: 1rem;
  aspect-ratio: 1/1;
  -webkit-transition: all var(--transition-default);
  transition: all var(--transition-default);
}

/* -----------------------------------------------------------------
 Layout
----------------------------------------------------------------- */
/* -----------------------------------------------------------------
 Foundation
----------------------------------------------------------------- */
/*=======================
  header
=======================*/
/*=======================
  footer
=======================*/
/*=======================
  main
=======================*/
.l-main {
  position: relative;
  overflow-x: clip;
}

.l-wrap {
  position: relative;
  max-width: var(--inner-max-width-xl);
  margin-inline: auto;
}

/*=======================
  container
=======================*/
.l-container {
  position: relative;
  margin-inline: auto;
  padding-inline: 20px;
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
}
@media screen and (min-width: 768px) {
  .l-container {
    padding-inline: 5.5%;
    max-width: var(--inner-max-width-md);
  }
}

.l-container--sm {
  position: relative;
  margin-inline: auto;
  padding-inline: 20px;
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
}
@media screen and (min-width: 768px) {
  .l-container--sm {
    padding-inline: 5.5%;
    max-width: var(--inner-max-width-sm);
  }
}

.l-container--lg {
  position: relative;
  margin-inline: auto;
  padding-inline: 20px;
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
}
@media screen and (min-width: 768px) {
  .l-container--lg {
    padding-inline: 4%;
  }
}
@media screen and (min-width: 1024px) {
  .l-container--lg {
    max-width: var(--inner-max-width-lg);
  }
}

/* -----------------------------------------------------------------
 Component
----------------------------------------------------------------- */
/*=======================
  button
=======================*/
.c-btn {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-column-gap: 0.625rem;
     -moz-column-gap: 0.625rem;
          column-gap: 0.625rem;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  min-height: 4rem;
  margin-inline: auto;
  padding: 0.625rem 1.5rem 0.625rem 2rem;
  background-color: #fff;
  border-radius: calc(infinity * 1px);
  border: 2px solid transparent;
  -webkit-box-shadow: 4px 4px 0px 0px rgb(9, 75, 32);
          box-shadow: 4px 4px 0px 0px rgb(9, 75, 32);
  font-weight: 700;
  text-align: left;
  line-height: 1.3;
  overflow: hidden;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  z-index: 2;
}
.c-btn.c-btn--primary {
  border-color: #136530;
  -webkit-box-shadow: 4px 4px 0px 0px #136530;
          box-shadow: 4px 4px 0px 0px #136530;
  color: var(--color-primary);
}
.c-btn.c-btn--secondary {
  border-color: var(--color-secondary);
  -webkit-box-shadow: 4px 4px 0px 0px rgb(53, 142, 170);
          box-shadow: 4px 4px 0px 0px rgb(53, 142, 170);
  color: var(--color-secondary);
}
@media (hover: hover) and (pointer: fine) {
  .c-btn:hover {
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
  }
}

/*=======================
  heading
=======================*/
.c-separator {
  position: absolute;
  width: 102vw;
  aspect-ratio: 1440/95;
  position: absolute;
  top: -6.5vw;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  z-index: 300;
}

.c-separator-bottom {
  position: absolute;
  width: 102vw;
  aspect-ratio: 1440/95;
  position: absolute;
  bottom: -4vw;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  z-index: 300;
}

.c-sec-title {
  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.5rem;
  margin-bottom: 2.5rem;
}
.c-sec-title .ja {
  font-size: var(--font-size40);
  font-weight: 800;
  text-align: center;
}
.c-sec-title .ja.sm {
  font-size: var(--font-size28);
}
.c-sec-title .ja .pc-none {
  display: block;
}
@media screen and (min-width: 600px) {
  .c-sec-title .ja .pc-none {
    display: none;
  }
}
.c-sec-title .en {
  font-family: var(--font-en);
  font-size: var(--font-size18);
  font-weight: 700;
}
.c-sec-title.mb-none {
  margin-bottom: 0;
}

.c-lead {
  font-size: var(--font-size18);
  line-height: 1.8;
  text-align: left;
}
@media screen and (min-width: 600px) {
  .c-lead {
    text-align: center;
  }
}
.c-lead p + p {
  margin-top: 1.25rem;
}
.c-lead .sp-none {
  display: none;
}
@media screen and (min-width: 600px) {
  .c-lead .sp-none {
    display: block;
  }
}

.c-title {
  padding: 0.5rem 1.5rem;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  background-color: var(--color-text);
  clip-path: polygon(50% 0%, calc(100% - 0.625rem) 0, 100% 50%, calc(100% - 0.625rem) 100%, 0.625rem 100%, 0 50%, 0.625rem 0);
  font-size: var(--font-size18);
  font-weight: 800;
  text-align: center;
  color: #fff;
  line-height: 1.2;
}
.c-title--primary {
  background-color: var(--color-primary);
}
.c-title--secondary {
  background-color: var(--color-secondary);
}
.c-title--tertiary {
  background-color: var(--color-tertiary);
}
.c-title--quaternary {
  background-color: var(--color-quaternary);
}
.c-title.lg {
  font-size: var(--font-size24);
}
.c-title.center {
  margin-inline: auto;
}

.c-dl-link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  padding-bottom: 0.125rem;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  border-bottom: 1px solid var(--color-text);
  font-size: var(--font-size15);
  color: var(--color-text);
}
.c-dl-link--primary {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
@media screen and (min-width: 600px) {
  .c-dl-link.center {
    margin-inline: auto;
  }
}

/*=======================
  modal
=======================*/
.c-modal {
  position: fixed;
  inset: 0;
  margin: auto;
  padding: 0;
  width: min(90%, 67.5rem);
  height: 90svh;
  max-height: 90svh;
  border: none;
  border-radius: var(--radius-sm);
  overflow: hidden;
  opacity: 0;
  -webkit-transform: translateY(1rem);
          transform: translateY(1rem);
  -webkit-transition: opacity 0.3s ease, display 0.3s allow-discrete, overlay 0.3s allow-discrete, -webkit-transform 0.3s ease;
  transition: opacity 0.3s ease, display 0.3s allow-discrete, overlay 0.3s allow-discrete, -webkit-transform 0.3s ease;
  transition: opacity 0.3s ease, transform 0.3s ease, display 0.3s allow-discrete, overlay 0.3s allow-discrete;
  transition: opacity 0.3s ease, transform 0.3s ease, display 0.3s allow-discrete, overlay 0.3s allow-discrete, -webkit-transform 0.3s ease;
  -webkit-box-shadow: 5px 5px 0px 0px rgb(237, 230, 226);
          box-shadow: 5px 5px 0px 0px rgb(237, 230, 226);
}
@media screen and (min-width: 768px) {
  .c-modal {
    height: 85svh;
    max-height: 85svh;
    border-radius: var(--radius-md);
    -webkit-box-shadow: 10px 10px 0px 0px rgb(237, 230, 226);
            box-shadow: 10px 10px 0px 0px rgb(237, 230, 226);
  }
}
.c-modal[open] {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
@starting-style {
  .c-modal[open] {
    opacity: 0;
    -webkit-transform: translateY(1rem);
            transform: translateY(1rem);
  }
}
.c-modal::-ms-backdrop {
  background-color: rgba(0, 0, 0, 0);
  -ms-transition: background-color 0.3s ease, display 0.3s allow-discrete, overlay 0.3s allow-discrete;
  transition: background-color 0.3s ease, display 0.3s allow-discrete, overlay 0.3s allow-discrete;
}
.c-modal::backdrop {
  background-color: rgba(0, 0, 0, 0);
  -webkit-transition: background-color 0.3s ease, display 0.3s allow-discrete, overlay 0.3s allow-discrete;
  transition: background-color 0.3s ease, display 0.3s allow-discrete, overlay 0.3s allow-discrete;
}
.c-modal[open]::-ms-backdrop {
  background-color: rgba(0, 0, 0, 0.6);
}
.c-modal[open]::backdrop {
  background-color: rgba(0, 0, 0, 0.6);
}
@starting-style {
  .c-modal[open]::-ms-backdrop {
    background-color: rgba(0, 0, 0, 0);
  }
  .c-modal[open]::backdrop {
    background-color: rgba(0, 0, 0, 0);
  }
}
.c-modal__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;
  height: 100%;
  max-height: 90svh;
  padding: 4rem 0.625rem 2.5rem 0.625rem;
}
@media screen and (min-width: 768px) {
  .c-modal__inner {
    padding: 6.25rem 0.625rem 5rem 0.625rem;
    max-height: 85svh;
  }
}
.c-modal__scroll-wrap {
  position: relative;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: 58.75rem;
  margin-inline: auto;
}
.c-modal__scroll {
  height: 100%;
  min-height: 0;
  width: 100%;
  padding-inline: 0.625rem;
  padding-bottom: 2.5rem;
  padding-right: calc(0.625rem + 10px);
  overflow-y: scroll;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  -ms-scroll-chaining: none;
      overscroll-behavior: contain;
  /* ネイティブバーは隠し、常時表示のカスタムバーを使う（iOS Safari対策） */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
@media screen and (min-width: 768px) {
  .c-modal__scroll {
    padding-inline: 1rem;
    padding-right: calc(1rem + 14px);
  }
}
.c-modal__scroll::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
  background: transparent;
}
.c-modal__scrollbar {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 2.5rem;
  width: 6px;
  background-color: #f1f1f1;
  border-radius: calc(infinity * 1px);
  opacity: 0;
  pointer-events: none;
  z-index: 5;
}
@media screen and (min-width: 768px) {
  .c-modal__scrollbar {
    width: 10px;
  }
}
.c-modal__scroll-wrap.is-scrollable .c-modal__scrollbar {
  opacity: 1;
}
.c-modal__scrollbar-thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 2rem;
  background-color: var(--color-primary);
  border-radius: calc(infinity * 1px);
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  will-change: transform;
}
.c-modal__close--top {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 2rem;
  aspect-ratio: 1/1;
  background-color: var(--color-primary);
  border-radius: 6px;
  z-index: 10;
}
@media screen and (min-width: 768px) {
  .c-modal__close--top {
    top: 2rem;
    right: 2rem;
    width: 3rem;
  }
}
.c-modal__close--top img {
  width: 1.75rem;
  height: auto;
  margin-inline: auto;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.c-modal__close--bottom {
  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.5rem;
  margin-inline: auto;
  margin-top: 2.5rem;
  border-bottom: 1px solid var(--color-primary);
  font-weight: 700;
  color: var(--color-primary);
  -webkit-transition: background-color 0.3s ease, color 0.3s ease;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.c-modal__close--bottom .text {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.c-modal__img {
  grid-area: thumb;
  width: 100%;
  aspect-ratio: 3/2;
  border-radius: var(--radius-xxs);
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  .c-modal__img {
    border-radius: var(--radius-xs);
  }
}
.c-modal__title {
  font-size: var(--font-size28);
  font-weight: 800;
  text-align: center;
}
.c-modal__text {
  margin-top: 1.5rem;
  text-align: left;
  line-height: 1.8;
}
@media screen and (min-width: 768px) {
  .c-modal__text {
    text-align: center;
  }
}
.c-modal__notice {
  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;
  -webkit-column-gap: 0.5rem;
     -moz-column-gap: 0.5rem;
          column-gap: 0.5rem;
  margin-top: 1rem;
  font-size: var(--font-size15);
  color: var(--color-primary);
  text-align: left;
}
@media screen and (min-width: 768px) {
  .c-modal__notice {
    text-align: center;
  }
}
.c-modal__notice .icon {
  display: block;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 1.5rem;
  aspect-ratio: 1/1;
}
.c-modal__content {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto;
  grid-template-areas: "thumb" "table" "movie";
  gap: 1.5rem 3.2%;
  margin-top: 1.5rem;
  padding-top: 2.5rem;
  background-image: radial-gradient(circle, #c0c0c0 1.5px, transparent 1.5px);
  background-position: left top;
  background-repeat: repeat-x;
  background-size: 9px 3px;
}
@media screen and (min-width: 768px) {
  .c-modal__content {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    grid-template-areas: "thumb table" "movie movie";
    gap: 2.5rem 3.2%;
  }
}
.c-modal__movie {
  grid-area: movie;
  padding-top: 5rem;
}
.c-modal__movie-title {
  position: relative;
  margin-bottom: 0.5rem;
  margin-inline: auto;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .c-modal__movie-title {
    margin-bottom: 1rem;
  }
}
.c-modal__movie-title .illust {
  position: absolute;
  top: -5.4375rem;
  left: 50%;
  width: 6.25rem;
  aspect-ratio: 140/121;
}
@media screen and (min-width: 600px) {
  .c-modal__movie-title .illust {
    top: -5rem;
    left: calc(100% - 1.25rem);
    -webkit-transform: translateX(0);
            transform: translateX(0);
    width: 8.75rem;
  }
}
.c-modal__movie-title .text {
  display: inline-block;
  background-color: var(--color-tertiary);
  padding: 0.5rem 1.5rem;
  clip-path: polygon(50% 0%, calc(100% - 0.625rem) 0, 100% 50%, calc(100% - 0.625rem) 100%, 0.625rem 100%, 0 46%, 0.625rem 0);
  font-size: var(--font-size18);
  font-weight: 700;
  color: #fff;
}
.c-modal__movie-video {
  position: relative;
  width: 100%;
  max-width: 37.5rem;
  margin-inline: auto;
  aspect-ratio: 16/9;
  overflow: hidden;
}
.c-modal__movie-video video {
  width: 100%;
  height: 100%;
  display: block;
}
.c-modal__movie-video::before {
  content: "Coming Soon";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  font-family: var(--font-en);
  font-size: var(--font-size32);
  font-weight: 600;
  text-align: center;
  color: #fff;
  line-height: 1;
}

/*=======================
  table
=======================*/
.c-table {
  grid-area: table;
  width: 100%;
  border-collapse: collapse;
}
.c-table .small {
  font-size: var(--font-size13);
}
.c-table__header {
  background-color: var(--color-primary);
  color: #fff;
  font-weight: 700;
  text-align: center;
  padding: 0.5rem;
}
.c-table__label {
  width: 44.4%;
  background-color: #DFF5E7;
  color: var(--color-primary);
  font-weight: 700;
  text-align: left;
  vertical-align: middle;
  padding: 1rem;
  border-bottom: 2px solid #fff;
}
.c-table__cell {
  text-align: left;
  vertical-align: middle;
  padding: 1rem;
  background-color: #F5F8F6;
  border-bottom: 2px solid #fff;
}
.c-table tr:last-child .c-table__label,
.c-table tr:last-child .c-table__cell {
  border-bottom: none;
}

/* -----------------------------------------------------------------
 Utility
----------------------------------------------------------------- */
.u-fit-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

.u-radius-img {
  width: 100%;
  aspect-ratio: 3/2;
  border-radius: var(--radius-xs);
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  .u-radius-img {
    border-radius: var(--radius-sm);
  }
}

.u-color-primary {
  color: var(--color-primary);
}

.u-color-secondary {
  color: var(--color-secondary);
}

.u-color-tertiary {
  color: var(--color-tertiary);
}

.u-color-quaternary {
  color: var(--color-quaternary);
}

.u-color-white {
  color: #fff;
}

.u-mb-20 {
  margin-bottom: 1.25rem;
}

.u-mb-24 {
  margin-bottom: 1.5rem;
}

.u-mb-32 {
  margin-bottom: 2rem;
}

.u-mb-40 {
  margin-bottom: 2.5rem;
}

.u-mt-20 {
  margin-top: 1.25rem;
}

.u-mt-24 {
  margin-top: 1.5rem;
}

.u-mt-32 {
  margin-top: 2rem;
}

.u-mt-40 {
  margin-top: 2.5rem;
}

/* -----------------------------------------------------------------
Project
----------------------------------------------------------------- */
/*=======================
  home
=======================*/
/* JS有効時のみ初期非表示（GSAP未読込時は .is-fallback-shown で表示） */
.js .mv:not(.is-fallback-shown) .mv__inner > .item,
.js .mv:not(.is-fallback-shown) .mv__title .sub,
.js .mv:not(.is-fallback-shown) .mv__title .main,
.js .mv:not(.is-fallback-shown) .mv__bottom .item {
  opacity: 0;
}

.mv {
  position: relative;
  width: 100%;
  aspect-ratio: 375/540;
  max-height: 56.25rem;
  overflow-x: clip;
  /* common.css `section { padding }` を打ち消し（aspect-ratio内のコンテンツずれ防止） */
  padding: 0;
}
@media screen and (min-width: 768px) {
  .mv {
    aspect-ratio: 1440/840;
    max-height: 52.5rem;
    padding: 0;
  }
}
.mv::before {
  content: "";
  display: block;
  width: 100%;
  height: 9.2vw;
  background-image: url("../images/intro/mv_deco_bottom.webp");
  background-size: auto 100%;
  background-position: center bottom;
  background-repeat: repeat-x;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 200;
}
@media screen and (min-width: 1440px) {
  .mv::before {
    max-height: 8.3125rem;
  }
}
.mv__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.mv__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 0.8fr 1fr;
  width: 100%;
  height: 100%;
  max-width: 90rem;
  margin-inline: auto;
}
.mv__inner .item {
  position: absolute;
}
.mv__inner .deco-left {
  width: clamp(5.75rem, 3.021rem + 13.65vw, 9.563rem);
  /* 92 - 153 */
  aspect-ratio: 287/123;
  left: calc(clamp(1rem, -0.074rem + 5.37vw, 2.5rem) * -1);
  /* 16 - 40 */
  top: 5.6vw;
}
@media screen and (min-width: 768px) {
  .mv__inner .deco-left {
    width: 20%;
    max-width: 17.9375rem;
    left: min(-2.8vw, -2.5rem);
  }
}
.mv__inner .deco-right {
  width: clamp(6.5rem, 3.368rem + 15.66vw, 10.875rem);
  /* 104 - 174 */
  aspect-ratio: 328/117;
  right: calc(clamp(1.5rem, 0.068rem + 7.16vw, 3.5rem) * -1);
  /* 24 - 56 */
  top: 3.5vw;
}
@media screen and (min-width: 768px) {
  .mv__inner .deco-right {
    width: 22.8%;
    max-width: 20.5rem;
    right: min(-3.9vw, -3.5rem);
  }
}
.mv__top {
  -ms-flex-item-align: end;
      align-self: end;
}
.mv__title {
  position: relative;
  padding-top: min(4.4vw, 4rem);
  z-index: 220;
}
.mv__title .sub {
  width: 90%;
  max-width: 32.1875rem;
  margin-inline: auto;
}
@media screen and (min-width: 768px) {
  .mv__title .sub {
    width: 48.3%;
    max-width: 43.4375rem;
  }
}
.mv__title .main {
  width: calc(100% - 20px);
  max-width: 40rem;
  margin-inline: auto;
  margin-top: 1rem;
}
@media screen and (min-width: 768px) {
  .mv__title .main {
    width: 60%;
    max-width: 53.9375rem;
    margin-top: 0.625rem;
  }
}
.mv__bottom {
  position: relative;
  width: 100%;
  height: 100%;
}
.mv__bottom .item {
  display: block;
  position: absolute;
}
.mv__bottom .main-left {
  width: 41.7%;
  max-width: 20rem;
  aspect-ratio: 433/455;
  left: 2%;
  bottom: 0;
  z-index: 210;
}
@media screen and (min-width: 768px) {
  .mv__bottom .main-left {
    width: 27.3%;
    max-width: 25rem;
    left: 4.9%;
    bottom: 1.5rem;
  }
}
.mv__bottom .main-left-sub {
  width: 8.3%;
  max-width: 4rem;
  aspect-ratio: 90/91;
  left: 40%;
  bottom: min(10vw, 8.75rem);
}
@media screen and (min-width: 768px) {
  .mv__bottom .main-left-sub {
    width: 5.6%;
    max-width: 5.0625rem;
    left: 30%;
    bottom: min(10vw, 8.75rem);
  }
}
.mv__bottom .main-right {
  width: 21.6%;
  max-width: 10.375rem;
  aspect-ratio: 231/382;
  right: 19.9%;
  bottom: 0;
  z-index: 210;
}
@media screen and (min-width: 768px) {
  .mv__bottom .main-right {
    width: 14.4%;
    max-width: 13rem;
    bottom: 1.5rem;
  }
}
.mv__bottom .main-right-sub {
  width: 16.4%;
  max-width: 7.875rem;
  aspect-ratio: 175/313;
  right: 4%;
  bottom: -4.2vw;
}
@media screen and (min-width: 768px) {
  .mv__bottom .main-right-sub {
    width: 11%;
    max-width: 9.875rem;
    right: 4.9%;
    bottom: 0;
  }
}

.news {
  position: relative;
  padding-block: 3.5rem calc(6.25rem + 6.5vw);
  background-color: var(--color-primary);
  z-index: 1;
}
@media screen and (min-width: 768px) {
  .news {
    padding-block: 5rem calc(6.25rem + 6.5vw);
  }
}
.news__bg .item {
  position: absolute;
}
.news__bg .left-top {
  width: 22.4%;
  min-width: 8.25rem;
  max-width: 13.8125rem;
  aspect-ratio: 221/156;
  top: 0;
  left: -2%;
}
.news__bg .left-bottom {
  width: 10.1%;
  min-width: 5.4375rem;
  max-width: 9.125rem;
  aspect-ratio: 146/155;
  bottom: -4rem;
  left: 4.9%;
}
.news__bg .right-top {
  width: 11.3%;
  min-width: 6.0625rem;
  width: 10.1875rem;
  aspect-ratio: 163/162;
  top: 0;
  right: -0.5%;
}
.news__bg .right-bottom {
  width: 11.7%;
  min-width: 6.25rem;
  max-width: 10.5rem;
  aspect-ratio: 168/117;
  bottom: -1.5rem;
  right: 3%;
}
.news__inner {
  padding: 2rem 7.3% 2rem 7.3%;
  background-color: var(--color-white);
  border-radius: var(--radius-sm);
}
@media screen and (min-width: 600px) {
  .news__inner {
    padding: 2.5rem 7.3% 3.5rem 7.3%;
  }
}
@media screen and (min-width: 768px) {
  .news__inner {
    border-radius: var(--radius-md);
  }
}
.news__list {
  margin-top: 0.625rem;
}
@media screen and (min-width: 768px) {
  .news__list {
    margin-top: 1.25rem;
  }
}
.news__link {
  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;
  gap: 1rem;
  padding: 1.25rem 0;
  font-weight: 700;
  -webkit-transition: color var(--transition-default);
  transition: color var(--transition-default);
}
@media (hover: hover) and (pointer: fine) {
  .news__link.link:hover {
    color: var(--color-tertiary);
  }
  .news__link.link:hover .icon-arrow {
    -webkit-transform: translateX(4px);
            transform: translateX(4px);
  }
}
@media (hover: hover) and (pointer: fine) {
  .news__link.no-link:hover {
    cursor: default;
  }
}
.news__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.5rem 2rem;
}
@media screen and (min-width: 600px) {
  .news__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;
  }
  }
.news__date {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  min-width: 7.5rem;
}

.about {
  position: relative;
  padding-block: 5rem calc(8.75rem + 6.5vw);
  background-color: var(--color-secondary);
}
@media screen and (min-width: 768px) {
  .about {
    padding-block: 2.5rem calc(11.25rem + 6.5vw);
  }
}
.about__bg .item {
  position: absolute;
}
.about__bg .left {
  width: 22.2%;
  min-width: 11.9375rem;
  max-width: 19.9375rem;
  left: -2rem;
  top: 16%;
}
.about__bg .right {
  width: 26%;
  min-width: 14.0625rem;
  max-width: 23.4375rem;
  right: -3.5rem;
  top: 3%;
}
.about__title .top {
  width: 100%;
  max-width: 26.9375rem;
  aspect-ratio: 537/133;
  margin-inline: auto;
}
@media screen and (min-width: 600px) {
  .about__title .top {
    width: 57.1%;
    min-width: 26.9375rem;
    max-width: 38.5625rem;
    aspect-ratio: 617/133;
  }
}
.about__title .bottom {
  width: 90%;
  max-width: 20.25rem;
  aspect-ratio: 464/83;
  margin-inline: auto;
  margin-top: 0.5rem;
}
@media screen and (min-width: 600px) {
  .about__title .bottom {
    width: 43%;
    min-width: 20.25rem;
    max-width: 29rem;
  }
}
.about__lead {
  margin-top: 3.5rem;
  font-size: var(--font-size18);
  color: #fff;
  line-height: 2.4;
  text-align: left;
}
@media screen and (min-width: 600px) {
  .about__lead {
    text-align: center;
  }
}
.about__lead .sp-none {
  display: none;
}
@media screen and (min-width: 600px) {
  .about__lead .sp-none {
    display: block;
  }
}
.about__gallery {
  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 3.9%;
  margin-block: 2.5rem 5rem;
}
@media screen and (min-width: 600px) {
  .about__gallery {
    -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;
    margin-top: clamp(4rem, 2.393rem + 4.29vw, 6.25rem);
    /* 64 - 100*/
    margin-bottom: clamp(5rem, 4.107rem + 2.38vw, 6.25rem);
    /* 80 - 100*/
  }
}
.about__gallery-item {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  position: relative;
  width: 60%;
  min-width: 15rem;
  max-width: 30rem;
  aspect-ratio: 480/336;
  border: 0.375rem solid #fff;
  overflow: hidden;
}
@media screen and (min-width: 600px) {
  .about__gallery-item {
    width: 33.3%;
  }
}
@media screen and (min-width: 768px) {
  .about__gallery-item {
    min-width: 18.75rem;
    border: 0.5rem solid #fff;
  }
}
.about__gallery-item::before {
  content: "";
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  aspect-ratio: 480/336;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.about__gallery-item.is-inview::before {
  -webkit-animation: anim-blink var(--blink-duration, 0.3s) ease var(--blink-delay, 0s) infinite;
          animation: anim-blink var(--blink-duration, 0.3s) ease var(--blink-delay, 0s) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .about__gallery-item.is-inview::before {
    -webkit-animation: none;
            animation: none;
  }
}
.about__gallery-item.left {
  -webkit-transform: rotate(-3deg);
          transform: rotate(-3deg);
}
@media screen and (min-width: 600px) {
  .about__gallery-item.left {
    margin-top: 4.5rem;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
.about__gallery-item.left::before {
  content: "";
  background-image: url("../images/intro/gallery01_deco.svg");
}
.about__gallery-item.center {
  margin-top: -2.5rem;
  margin-left: 1.25rem;
  -webkit-transform: rotate(6deg);
          transform: rotate(6deg);
}
@media screen and (min-width: 600px) {
  .about__gallery-item.center {
    margin-top: 0;
    margin-left: 0;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
.about__gallery-item.center::before {
  content: "";
  background-image: url("../images/intro/gallery02_deco.svg");
}
@media screen and (min-width: 600px) {
  .about__gallery-item.right {
    margin-top: 4rem;
  }
}
.about__gallery-item.right::before {
  content: "";
  background-image: url("../images/intro/gallery03_deco.svg");
}
.about__title-nav {
  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;
}
.about__title-nav .ja {
  display: inline-block;
  width: 100%;
  max-width: 26.875rem;
  aspect-ratio: 430/43;
  font-size: var(--font-size32);
  font-weight: 800;
}
.about__title-nav .en {
  font-family: var(--font-en);
  font-size: var(--font-size18);
  font-weight: 700;
}
.about__nav-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16.125rem), 16.125rem));
  place-content: center;
  gap: 1rem;
  margin-inline: auto;
}
@media screen and (min-width: 768px) {
  .about__nav-list {
    grid-template-columns: repeat(2, 16.125rem);
  }
}
@media screen and (min-width: 1024px) {
  .about__nav-list {
    grid-template-columns: repeat(4, 1fr);
    max-width: none;
  }
}
.about__nav-link {
  display: grid;
  grid-template-columns: 1fr;
  position: relative;
  gap: 0.5rem;
  padding: 1.25rem;
  background-color: #fff;
  border-radius: var(--radius-xs);
  overflow: hidden;
  -webkit-transition: -webkit-transform 0.3s ease-in-out;
  transition: -webkit-transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
}
@media screen and (min-width: 600px) {
  .about__nav-link {
    border-radius: var(--radius-sm);
  }
}
.about__nav-link .thumbnail {
  width: 82.6%;
  aspect-ratio: 1/1;
  margin-inline: auto;
}
.about__nav-link .title {
  font-size: var(--font-size18);
  font-weight: 700;
  color: var(--color-primary);
  text-align: center;
}
.about__nav-link .more {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 4.25rem;
  aspect-ratio: 1/1;
  background-color: var(--color-primary);
  clip-path: polygon(100% 0, 0% 100%, 100% 100%);
}
.about__nav-link .svg-icon {
  position: absolute;
  right: 0.875rem;
  bottom: 0.875rem;
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
  z-index: 10;
  -webkit-transition: -webkit-transform 0.3s ease-in-out;
  transition: -webkit-transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
}
@media (hover: hover) and (pointer: fine) {
  .about__nav-link:hover {
    -webkit-transform: rotate(-3deg);
            transform: rotate(-3deg);
  }
}
.about__nav-banner {
  display: block;
  width: 100%;
  max-width: 38rem;
  aspect-ratio: 608/148;
  margin-inline: auto;
  margin-top: clamp(2.5rem, 1.786rem + 3.57vw, 5rem);
  /* 40 - 80 */
  -webkit-transition: -webkit-transform 0.3s ease-in-out;
  transition: -webkit-transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
}
@media (hover: hover) and (pointer: fine) {
  .about__nav-banner:hover {
    -webkit-transform: scale(1.02);
            transform: scale(1.02);
  }
}

.attraction {
  position: relative;
  padding-block: 5rem calc(7.5rem + 6.5vw);
  background-color: var(--color-bg);
}
@media screen and (min-width: 768px) {
  .attraction {
    padding-block: 4rem calc(7.5rem + 6.5vw);
  }
}
.attraction .play__title {
  position: absolute;
  top: calc((5rem + 6.5vw + clamp(2.5rem, 1.426rem + 5.37vw, 4rem)) * -1);
  left: calc(clamp(2rem, 1.429rem + 2.86vw, 4rem) * -1);
  /* 32 - 64 */
  width: clamp(18.75rem, 9.801rem + 44.74vw, 31.25rem);
  /* 300 - 500 */
  aspect-ratio: 624/161;
  z-index: 400;
}
@media screen and (min-width: 768px) {
  .attraction .play__title {
    top: calc((4rem + 6.5vw + clamp(4rem, 2.857rem + 2.38vw, 5rem)) * -1);
    width: clamp(31.25rem, 22.393rem + 18.45vw, 39rem);
    /* 500 - 624 */
  }
}
.attraction__head {
  position: absolute;
  bottom: 100%;
  left: 0;
  width: 80%;
  max-width: 27.5rem;
}
@media screen and (min-width: 768px) {
  .attraction__head {
    width: 38.3%;
    min-width: 27.5rem;
    max-width: 31.25rem;
  }
}
.attraction__intro {
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
}
.attraction__intro .text {
  position: relative;
  padding: 0.5rem 1.5rem;
  margin-inline: auto;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  background-color: #fff;
  clip-path: polygon(50% 0%, calc(100% - 1.125rem) 0, 100% 56%, calc(100% - 1.125rem) 100%, 1.125rem 100%, 0 40%, 1.125rem 0);
  font-size: var(--font-size22);
  font-weight: 800;
}
.attraction__intro .illust {
  position: absolute;
  right: 1rem;
  bottom: 100%;
  width: 4rem;
  aspect-ratio: 138/166;
}
.attraction__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem 2rem;
  margin-top: 3rem;
}
@media screen and (min-width: 768px) {
  .attraction__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem 2.6%;
  }
}
@media screen and (min-width: 1024px) {
  .attraction__list {
    grid-template-columns: repeat(3, 1fr);
  }
}
.attraction__item {
  position: relative;
  padding: 1rem 1rem 4.25rem 1rem;
  -webkit-box-shadow: 5px 5px 0px 0px rgb(237, 230, 226);
          box-shadow: 5px 5px 0px 0px rgb(237, 230, 226);
  background-color: #fff;
  border-radius: var(--radius-xs);
  overflow: hidden;
  -webkit-transition: -webkit-transform 0.3s ease, -webkit-box-shadow 0.3s ease;
  transition: -webkit-transform 0.3s ease, -webkit-box-shadow 0.3s ease;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  transition: transform 0.3s ease, box-shadow 0.3s ease, -webkit-transform 0.3s ease, -webkit-box-shadow 0.3s ease;
}
@media screen and (min-width: 768px) {
  .attraction__item {
    border-radius: var(--radius-sm);
    -webkit-box-shadow: 10px 10px 0px 0px rgb(237, 230, 226);
            box-shadow: 10px 10px 0px 0px rgb(237, 230, 226);
  }
}
@media (hover: hover) and (pointer: fine) {
  .attraction__item:hover {
    -webkit-transform: rotate(-3deg);
            transform: rotate(-3deg);
  }
  .attraction__item:hover .more .svg-icon {
    -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
  }
}
.attraction__item .more {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 4.25rem;
  aspect-ratio: 1/1;
  background-color: var(--color-primary);
  clip-path: polygon(100% 0, 0% 100%, 100% 100%);
  pointer-events: none;
}
.attraction__item .more .svg-icon {
  position: absolute;
  right: 0.625rem;
  bottom: 0.625rem;
  width: 1.5rem;
  aspect-ratio: 1/1;
  z-index: 10;
  -webkit-transition: -webkit-transform 0.3s ease-in-out;
  transition: -webkit-transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
}
.attraction__item-link {
  position: absolute;
  inset: 0;
}
.attraction__item-img {
  width: 100%;
  aspect-ratio: 3/2;
  border-radius: var(--radius-xxs);
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  .attraction__item-img {
    border-radius: var(--radius-xs);
  }
}
.attraction__item-body {
  margin-top: 1rem;
}
.attraction__item-body .title {
  text-align: center;
  font-size: var(--font-size20);
  font-weight: 800;
}
.attraction__item-body .text {
  margin-top: 0.625rem;
  line-height: 1.8;
}
.attraction__notice {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  gap: 0.375rem;
  margin-top: 2.5rem;
  font-size: var(--font-size15);
}
.attraction__notice .notice__icon {
  display: inline-block;
  width: 1.25rem;
  aspect-ratio: 1/1;
}
.attraction__rules {
  width: 100%;
  max-width: 57.5rem;
  margin-inline: auto;
  margin-top: clamp(8.75rem, 8.036rem + 3.57vw, 11.25rem);
  /* 140 - 180 */
  padding: 1rem 1rem 3rem 1rem;
  background-color: #fff;
  border-radius: var(--radius-sm);
}
@media screen and (min-width: 768px) {
  .attraction__rules {
    padding: 1rem 4% 3rem 4%;
    border-radius: var(--radius-md);
  }
}
.attraction__rules .rules__title {
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
  -webkit-transform: translateY(-2rem);
          transform: translateY(-2rem);
}
.attraction__rules .illust {
  position: absolute;
  left: calc(50% + 3rem);
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  bottom: 100%;
  width: 14.125rem;
  aspect-ratio: 226/78;
}
.attraction__rules .rule__item {
  position: relative;
  padding-left: 1rem;
}
.attraction__rules .rule__item::before {
  content: "";
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-tertiary);
}
.attraction__rules .rule__item:not(:first-child) {
  margin-top: 1rem;
}

.dogpark {
  position: relative;
  padding-block: 5rem calc(7.5rem + 6.5vw);
  background-color: var(--color-quaternary);
}
@media screen and (min-width: 768px) {
  .dogpark {
    padding-block: 2.5rem calc(7.5rem + 6.5vw);
  }
}
.dogpark__inner {
  position: relative;
  padding: 3rem 1rem 3rem 1rem;
  margin-top: 6.25rem;
  background-color: var(--color-white);
  border-radius: var(--radius-sm);
}
@media screen and (min-width: 768px) {
  .dogpark__inner {
    padding: 3rem 7.3% 5rem 7.3%;
    margin-top: 3rem;
    border-radius: var(--radius-md);
  }
}
.dogpark__inner .illust {
  position: absolute;
  right: 2.5rem;
  bottom: 100%;
  width: clamp(5rem, 3.571rem + 2.98vw, 6.25rem);
  /* 80 - 100 */
  aspect-ratio: 100/87;
}
.dogpark__title {
  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;
  gap: 0.625rem;
}
.dogpark__title .sub {
  display: block;
  height: 1.75rem;
  width: auto;
  aspect-ratio: 190/35;
  margin-inline: auto;
}
.dogpark__title .text {
  font-size: var(--font-size28);
  font-weight: 800;
  text-align: center;
}
.dogpark__lead {
  margin-top: 1.25rem;
  text-align: left;
}
@media screen and (min-width: 768px) {
  .dogpark__lead {
    text-align: center;
  }
}
.dogpark__field-item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
  gap: 1rem 4.3%;
  padding-block: 2rem;
}
@media screen and (min-width: 768px) {
  .dogpark__field-item {
    grid-template-columns: 1fr 1fr;
    padding-block: 2.5rem;
  }
}
.dogpark__field-item:not(:first-child) {
  background-image: radial-gradient(circle, #c0c0c0 1.5px, transparent 1.5px);
  background-position: left top;
  background-repeat: repeat-x;
  background-size: 10px 3px;
}
.dogpark__field-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: 1rem;
}
.dogpark__field-body .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: 1rem;
  font-size: var(--font-size24);
  font-weight: 800;
  text-align: center;
}
@media screen and (min-width: 600px) {
  .dogpark__field-body .head {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    text-align: left;
  }
}
.dogpark__field-body .num {
  display: inline-block;
  width: 3.3125rem;
  aspect-ratio: 1/1;
}
.dogpark__field-body .text {
  line-height: 1.8;
}
.dogpark__field-deco {
  position: absolute;
  top: 98%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 80%;
  max-width: 16.25rem;
  aspect-ratio: 316/143;
}
@media screen and (min-width: 600px) {
  .dogpark__field-deco {
    width: 41.2%;
    min-width: 16.25rem;
  }
}
@media screen and (min-width: 768px) {
  .dogpark__field-deco {
    top: 90%;
    left: 10%;
    -webkit-transform: translateX(0);
            transform: translateX(0);
    width: 25.5%;
    max-width: 14.6875rem;
    min-width: 11.25rem;
    aspect-ratio: 235/143;
  }
}
.dogpark__agility {
  margin-top: clamp(6.25rem, 4.46rem + 8.95vw, 8.75rem);
  /* 100 - 140 */
}
@media screen and (min-width: 768px) {
  .dogpark__agility {
    margin-top: 4rem;
  }
}
.dogpark__agility-list {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(6, auto);
  gap: 1.5rem 3.5%;
  grid-template-areas: "left" "agility01" "agility02" "agility03" "agility04" "right";
  margin-top: 2.5rem;
}
@media screen and (min-width: 600px) {
  .dogpark__agility-list {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: "left left" "agility01 agility02" "agility03 agility04" "right right";
  }
}
@media screen and (min-width: 1024px) {
  .dogpark__agility-list {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: "left left agility01 agility02" "agility03 agility04 right right";
    gap: 2rem 1.5%;
  }
}
.dogpark__agility-item {
  position: relative;
}
.dogpark__agility-item .img {
  width: 90%;
  margin-inline: auto;
}
@media screen and (min-width: 768px) {
  .dogpark__agility-item .img {
    width: 100%;
  }
}
.dogpark__agility-item:nth-child(1) {
  grid-area: left;
}
.dogpark__agility-item:nth-child(1) .img {
  position: relative;
  width: 90%;
  z-index: 1;
}
.dogpark__agility-item:nth-child(1)::before {
  content: "";
  background-image: url("../images/play/dogpark-agility_deco01.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: clamp(3rem, 1.28rem + 8.6vw, 4.5rem);
  /* 48 - 72 */
  aspect-ratio: 1/1;
  position: absolute;
  top: -0.625rem;
  left: calc(clamp(0rem, -3.692rem + 5.77vw, 1.5rem) * -1);
  /* 0 - 24 */
}
@media screen and (min-width: 600px) {
  .dogpark__agility-item:nth-child(1)::before {
    width: clamp(4.5rem, 3.696rem + 2.14vw, 5.625rem);
    /* 72 - 90 */
  }
}
.dogpark__agility-item:nth-child(1)::after {
  content: "";
  background-image: url("../images/play/dogpark-agility_deco02.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: clamp(3.5rem, 1.78rem + 8.6vw, 5rem);
  /* 56 - 80 */
  aspect-ratio: 112/106;
  position: absolute;
  bottom: clamp(0rem, -0.446rem + 1.19vw, 0.625rem);
  /* 0 - 10 */
  right: -0.5rem;
  z-index: 2;
}
@media screen and (min-width: 600px) {
  .dogpark__agility-item:nth-child(1)::after {
    width: clamp(5rem, 4.107rem + 2.38vw, 6.25rem);
    /* 80 - 100 */
  }
}
.dogpark__agility-item:nth-child(2) {
  grid-area: agility01;
}
.dogpark__agility-item:nth-child(3) {
  grid-area: agility02;
}
.dogpark__agility-item:nth-child(4) {
  grid-area: agility03;
}
.dogpark__agility-item:nth-child(5) {
  grid-area: agility04;
}
.dogpark__agility-item:nth-child(6) {
  grid-area: right;
}
.dogpark__agility-item:nth-child(6) .img {
  width: 90%;
  margin-inline: auto;
}
.dogpark__agility-item:nth-child(6)::before {
  content: "";
  background-image: url("../images/play/dogpark-agility_deco03.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: clamp(3.5rem, 1.78rem + 8.6vw, 5rem);
  /* 56 - 80 */
  aspect-ratio: 1/1;
  position: absolute;
  top: 0;
  left: 70%;
}
@media screen and (min-width: 600px) {
  .dogpark__agility-item:nth-child(6)::before {
    width: clamp(5rem, 4.107rem + 2.38vw, 6.25rem);
    /* 80 - 100 */
    top: 0;
    right: 0;
  }
}
.dogpark__agility-item:nth-child(6)::after {
  content: "";
  background-image: url("../images/play/dogpark-agility_deco04.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: clamp(3.5rem, 1.78rem + 8.6vw, 5rem);
  /* 56 - 80 */
  aspect-ratio: 1/1;
  position: absolute;
  bottom: -1.25rem;
  left: clamp(2.5rem, -1.046rem + 9.46vw, 5rem);
  /* 40 - 80 */
}
@media screen and (min-width: 600px) {
  .dogpark__agility-item:nth-child(6)::after {
    width: clamp(5rem, 4.107rem + 2.38vw, 6.25rem);
    /* 80 - 100 */
  }
}
@media screen and (min-width: 1024px) {
  .dogpark__agility-item:nth-child(6)::after {
    left: 2.5rem;
    bottom: 0;
  }
}
.dogpark__agility-desc {
  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;
  gap: 0.5rem;
  margin-top: -1rem;
}
.dogpark__agility-desc .title {
  padding: 0.25rem 0.5rem;
  background-color: var(--color-tertiary);
  border-radius: 4px;
  font-weight: 700;
  color: #fff;
  text-align: center;
  line-height: 1.2;
}
.dogpark__agility-desc .text {
  text-align: left;
}
.dogpark__facility {
  margin-top: 4rem;
}
.dogpark__facility-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem 4.3%;
  margin-top: 2.5rem;
}
@media screen and (min-width: 768px) {
  .dogpark__facility-list {
    grid-template-columns: repeat(2, 1fr);
  }
}
.dogpark__facility-item .title {
  margin-top: 1rem;
  font-size: var(--font-size18);
  font-weight: 800;
  color: var(--color-tertiary);
  text-align: center;
}
.dogpark__facility-item .text {
  margin-top: 0.625rem;
  line-height: 1.8;
}

.photo {
  position: relative;
  padding-block: 5rem calc(7.5rem + 6.5vw);
  background-color: var(--color-secondary);
}
@media screen and (min-width: 768px) {
  .photo {
    padding-block: 2.5rem calc(11.25rem + 6.5vw);
  }
}
.photo__gallery {
  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;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: 2.5rem;
}
@media screen and (min-width: 600px) {
  .photo__gallery {
    -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;
  }
}
@media screen and (min-width: 1024px) {
  .photo__gallery {
    gap: 1.25rem;
    margin-top: 0;
  }
}
.photo__gallery::before {
  content: "";
  background-image: url("../images/play/photo_gallery_bg.svg");
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  width: 110vw;
  max-width: 107.5rem;
  height: auto;
  aspect-ratio: 1720/180;
  position: absolute;
  top: calc(clamp(0rem, -2.294rem + 11.47vw, 2rem) * -1);
  /* 0 - 32 */
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  z-index: 0;
}
@media screen and (min-width: 600px) {
  .photo__gallery::before {
    top: calc(clamp(3rem, 1.571rem + 3.81vw, 5rem) * -1);
    /* 48 - 80 */
  }
}
.photo__gallery-item {
  position: relative;
  z-index: 2;
}
@media screen and (min-width: 600px) {
  .photo__gallery-item {
    margin-top: clamp(0rem, -1.786rem + 4.76vw, 2.5rem);
    /* 0 - 40 */
  }
}
.photo__gallery-item:nth-child(1) {
  width: 100%;
  aspect-ratio: 564/695;
}
@media screen and (min-width: 600px) {
  .photo__gallery-item:nth-child(1) {
    max-width: 22.625rem;
    aspect-ratio: 362/403;
  }
}
.photo__gallery-item:nth-child(2) {
  display: none;
}
@media screen and (min-width: 600px) {
  .photo__gallery-item:nth-child(2) {
    display: block;
    width: 100%;
    max-width: 23.0625rem;
    aspect-ratio: 369/419;
    margin-left: -3rem;
  }
}
.photo__gallery-item:nth-child(3) {
  display: none;
}
@media screen and (min-width: 600px) {
  .photo__gallery-item:nth-child(3) {
    display: block;
    width: 100%;
    max-width: 21.125rem;
    aspect-ratio: 338/378;
  }
}
.photo__list {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(5, auto);
  gap: 1.5rem 1.9%;
  grid-template-areas: "item01" "item02" "item03" "item04" "item05";
  margin-top: clamp(4rem, 3.286rem + 1.9vw, 5rem);
  /* 64 - 80 */
}
@media screen and (min-width: 768px) {
  .photo__list {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, auto);
    grid-template-areas: "item01 item01 item02 item02" "item03 item03 item04 item04" ". item05 item05 .";
  }
}
@media screen and (min-width: 1024px) {
  .photo__list {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(2, auto);
    grid-template-areas: "item01 item01 item02 item02 item03 item03" ". item04 item04 item05 item05 .";
  }
}
.photo__item {
  position: relative;
  padding: 0.625rem;
  background-color: #fff;
  -webkit-box-shadow: 0px 5px 10px 0px rgba(38, 135, 165, 0.6);
          box-shadow: 0px 5px 10px 0px rgba(38, 135, 165, 0.6);
}
@media screen and (min-width: 600px) {
  .photo__item {
    padding: 1rem;
  }
}
.photo__item:nth-child(1) {
  grid-area: item01;
}
.photo__item:nth-child(2) {
  grid-area: item02;
}
.photo__item:nth-child(3) {
  grid-area: item03;
}
.photo__item:nth-child(4) {
  grid-area: item04;
}
.photo__item:nth-child(5) {
  grid-area: item05;
}
.photo__item-tag {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.125rem;
  padding: 0.25rem 0.625rem 0.25rem 0.5rem;
  background-color: var(--color-primary);
  border-radius: calc(infinity * 1px);
  position: absolute;
  left: 1rem;
  top: 1rem;
  font-size: var(--font-size15);
  color: #fff;
  line-height: 1.2;
}
@media screen and (min-width: 600px) {
  .photo__item-tag {
    left: 1.5rem;
    top: 1.5rem;
  }
}
.photo__item-body {
  margin-top: 1rem;
}
.photo__item-body .title {
  font-size: var(--font-size20);
  font-weight: 800;
  text-align: center;
}
.photo__item-body .subtitle {
  position: relative;
  z-index: 1;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  /* common.css `.subtitle { margin: 0 0 30px }` の下余白を打ち消し（テキスト枠との重ね位置） */
  margin: 1rem auto 0;
  padding: 0.25rem 1.875rem;
  background-color: var(--color-tertiary);
  border-radius: calc(infinity * 1px);
  font-size: var(--font-size15);
  font-weight: 700;
  color: #fff;
}
.photo__item-body .subtitle::before, .photo__item-body .subtitle::after {
  content: "";
  background-image: url("../images/play/icon_dog.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 1rem;
  aspect-ratio: 1/1;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.photo__item-body .subtitle::before {
  left: 0.625rem;
}
.photo__item-body .subtitle::after {
  right: 0.625rem;
}
.photo__item-body .text {
  padding: 1.5rem 0.625rem 0.625rem 0.625rem;
  margin-top: -1rem;
  background-color: #FFF7EB;
  line-height: 1.8;
}
@media screen and (min-width: 600px) {
  .photo__item-body .text {
    padding: 1.5rem 1rem 1rem 1rem;
  }
}
.photo__swiper {
  margin-top: 6.25rem;
}
.photo__swiper .swiper-wrapper {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-transition-timing-function: linear;
          transition-timing-function: linear;
}
.photo__swiper-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-left: 1.5rem;
  width: auto;
}
.photo__swiper-img {
  width: auto;
  height: 3rem;
  aspect-ratio: 940/77;
}
@media screen and (min-width: 768px) {
  .photo__swiper-img {
    height: 4rem;
  }
}

.food {
  position: relative;
  padding-block: 5rem calc(7.5rem + 6.5vw);
  background-color: var(--color-bg);
}
@media screen and (min-width: 768px) {
  .food {
    padding-block: 2.5rem calc(6.25rem + 6.5vw);
  }
}
.food .eat__title {
  position: absolute;
  top: calc((5rem + 6.5vw + clamp(2.5rem, 1.426rem + 5.37vw, 4rem)) * -1);
  right: calc(clamp(4.5rem, 4rem + 2.5vw, 6.25rem) * -1);
  /* 72 - 100 */
  width: clamp(22rem, 11.441rem + 52.8vw, 36.75rem);
  /* 352 - 588 */
  aspect-ratio: 736/161;
  z-index: 400;
}
@media screen and (min-width: 768px) {
  .food .eat__title {
    top: calc((2.5rem + 6.5vw + clamp(4.688rem, 4.33rem + 0.74vw, 5rem)) * -1);
    right: -6.25rem;
    width: clamp(36.75rem, 26.179rem + 22.02vw, 46rem);
    /* 588 - 736 */
  }
}
.food__head {
  position: absolute;
  bottom: calc(100% + 2.5rem);
  right: 0;
  width: 80%;
}
@media screen and (min-width: 768px) {
  .food__head {
    width: 40.1%;
    aspect-ratio: 637/121;
    max-width: 36.0625rem;
  }
}
.food__content {
  position: relative;
  background-color: #fff;
  padding-block: 3.5rem 2.5rem;
  margin-top: calc(min(8.6vw, 7.75rem) + 4rem);
  margin-bottom: min(8.6vw, 7.75rem);
}
.food__content::before, .food__content::after {
  content: "";
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  aspect-ratio: 1440/124;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  z-index: 2;
}
.food__content::before {
  background-image: url("../images/eat/food_bg_top.svg");
  bottom: 100%;
}
.food__content::after {
  background-image: url("../images/eat/food_bg_bottom.svg");
  top: 100%;
}
.food__content .illust {
  position: absolute;
  right: 15%;
  top: calc(-8.6vw + clamp(3.125rem, 2.054rem + 5.36vw, 6.875rem) * -1);
  /* 50 - 100 */
  width: clamp(2.5rem, 1.429rem + 5.36vw, 6.25rem);
  /* 40 - 100 */
  aspect-ratio: 108/167;
  z-index: 0;
}
@media screen and (min-width: 1440px) {
  .food__content .illust {
    top: -14.625rem;
  }
}
.food__title {
  width: 100%;
  max-width: 30rem;
  aspect-ratio: 500/78;
  margin-inline: auto;
}
.food__menu {
  display: grid;
  grid-template-columns: 1fr;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 2.5rem 4%;
  margin-top: 2.5rem;
  padding-bottom: 5.5rem;
  background-image: radial-gradient(circle, #c0c0c0 1.5px, transparent 1.5px);
  background-position: left bottom;
  background-repeat: repeat-x;
  background-size: 9px 3px;
}
@media screen and (min-width: 768px) {
  .food__menu {
    grid-template-columns: repeat(2, 1fr);
    padding-bottom: 7.5rem;
  }
}
.food__menu-list {
  width: 100%;
  max-width: 39.375rem;
  margin-inline: auto;
}
@media screen and (min-width: 768px) {
  .food__menu-list {
    width: 90%;
    max-width: 24.6875rem;
  }
}
.food__menu-item {
  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;
  gap: 0.5rem;
  font-weight: 700;
  text-align: left;
}
.food__menu-item:not(:first-child) {
  margin-top: 0.625rem;
}
.food__menu-item .name {
  font-size: var(--font-size18);
}
.food__menu-item .line {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  height: 2px;
  width: auto;
  background-image: radial-gradient(circle, #1d1d1d 1px, transparent 1px);
  background-position: left top;
  background-repeat: repeat-x;
  background-size: 8px 2px;
}
.food__menu-item .price {
  font-family: var(--font-number);
  font-size: var(--font-size26);
  letter-spacing: -0.03em;
}
.food__menu-item .unit {
  display: inline-block;
  margin-left: 0.125rem;
  font-family: var(--font-base);
  font-size: var(--font-size13);
}
.food__menu-notice {
  margin-top: 1.5rem;
  font-size: var(--font-size15);
  text-align: right;
}
.food__carousel {
  position: relative;
  width: calc(100% - 1.25rem);
  margin-inline: auto;
}
@media screen and (min-width: 768px) {
  .food__carousel {
    width: 100%;
    max-width: 33.75rem;
  }
}
.food__carousel .swiper-button-prev,
.food__carousel .swiper-button-next {
  top: 50%;
  width: 2rem;
  height: 2rem;
  margin-top: -1.125rem;
  background-color: var(--color-tertiary);
  border-radius: 50%;
  -webkit-transition: background-color 0.3s ease;
  transition: background-color 0.3s ease;
  --swiper-navigation-size: 0.875rem;
  --swiper-navigation-color: #fff;
  --swiper-navigation-sides-offset: -1rem;
}
@media screen and (min-width: 600px) {
  .food__carousel .swiper-button-prev,
  .food__carousel .swiper-button-next {
    width: 3rem;
    height: 3rem;
    --swiper-navigation-sides-offset: -1.5rem;
  }
}
.food__carousel .swiper-button-prev::after,
.food__carousel .swiper-button-next::after {
  content: "";
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 1rem;
  aspect-ratio: 1/1;
}
@media screen and (min-width: 600px) {
  .food__carousel .swiper-button-prev::after,
  .food__carousel .swiper-button-next::after {
    width: 1.5rem;
  }
}
.food__carousel .swiper-button-prev::after {
  background-image: url("../images/eat/icon_arrow_left.svg");
}
.food__carousel .swiper-button-next::after {
  background-image: url("../images/eat/icon_arrow_right.svg");
}
.food__badge {
  width: clamp(6.25rem, 2.447rem + 19.02vw, 11.563rem);
  /* 100 - 185 */
  aspect-ratio: 185/180;
  position: absolute;
  right: -1rem;
  bottom: -3.5rem;
  z-index: 10;
}
@media screen and (min-width: 768px) {
  .food__badge {
    bottom: calc(clamp(3.5rem, 1.786rem + 3.57vw, 5rem) * -1);
    /* 56 - 80 */
    width: clamp(7.5rem, 2.857rem + 9.67vw, 11.563rem);
    /* 120 - 185 */
    right: calc(clamp(1.25rem, -0.179rem + 2.98vw, 2.5rem) * -1);
    /* 20 - 40 */
  }
}
.food__swiper {
  border-radius: var(--radius-xs);
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  .food__swiper {
    border-radius: var(--radius-sm);
  }
}
.food__swiper .swiper-slide {
  aspect-ratio: 540/360;
}
.food__notice {
  width: 100%;
  max-width: 48rem;
  padding-block: 2.5rem;
  margin-inline: auto;
}
.food__notice-text {
  padding: 2.5rem 1rem 2rem 1rem;
  margin-top: -1.5rem;
  background-color: #F1FBFF;
  border-radius: var(--radius-xs);
  text-align: left;
  line-height: 1.8;
}
@media screen and (min-width: 600px) {
  .food__notice-text {
    padding: 2.5rem 8% 2.5rem 8%;
  }
}
@media screen and (min-width: 768px) {
  .food__notice-text {
    border-radius: var(--radius-sm);
  }
}

.bbq {
  position: relative;
  padding-block: 5rem calc(7.5rem + 6.5vw);
  background-color: var(--color-quaternary);
}
@media screen and (min-width: 768px) {
  .bbq {
    padding-block: 2.5rem calc(11.25rem + 6.5vw);
  }
}
.bbq__list {
  display: grid;
  grid-template-columns: 1fr;
  /* タイトルのはみ出し分を含め、カード間に余白を確保 */
  gap: 7.5rem;
  /* リード文〜カード（タイトル上端）の見え方を確保 */
  margin-top: 7rem;
}
@media screen and (min-width: 768px) {
  .bbq__list {
    grid-template-columns: 1fr 1fr;
    gap: 5rem 4.3%;
    /* PC: リード文下の余白を広めに */
    margin-top: 8.5rem;
  }
}
.bbq__item {
  /* カード上端への食い込み量（padding内に収め、写真には被らない） */
  --bbq-title-inset: 0.75rem;
  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%;
  background-color: #fff;
  /* 上余白を確保し、タイトルが写真に被らないようにする */
  padding: 1.25rem 1rem 2rem 1rem;
  border-radius: var(--radius-sm);
}
@media screen and (min-width: 768px) {
  .bbq__item {
    border-radius: var(--radius-md);
    padding: 1.5rem 1.5rem 2.5rem 1.5rem;
  }
}
.bbq__item-title {
  position: absolute;
  /* 下端をカード上端から inset 分だけ内側へ。写真より上で、見え方を全画面で揃える */
  top: 0;
  left: 50%;
  -webkit-transform: translate(-50%, calc(-100% + var(--bbq-title-inset)));
          transform: translate(-50%, calc(-100% + var(--bbq-title-inset)));
  width: min(80%, 20rem);
  aspect-ratio: 320/104;
  margin-inline: auto;
  z-index: 2;
}
@media screen and (min-width: 768px) {
  .bbq__item-title {
    /* 2カラムで細くなるタブレットでは下限を設け、SP / PC と近い見え方にする */
    width: clamp(16rem, 61.5%, 20rem);
  }
}
.bbq__item-img {
  width: 100%;
  aspect-ratio: 3/2;
  border-radius: var(--radius-xs);
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  .bbq__item-img {
    border-radius: var(--radius-sm);
  }
}
.bbq__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-positive: 1;
          flex-grow: 1;
  gap: 1rem;
  margin-top: 1rem;
}
.bbq__item-body .desc {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  line-height: 1.8;
}
.bbq__item-body .desc p + p {
  margin-top: 0.625rem;
}
/* common.css `.small { font-size: 75% }` を打ち消し（本文と同サイズの注記） */
.bbq__item-body .small {
  font-size: 1em;
}
.bbq__item-body .notice {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 0.25rem;
  text-decoration-thickness: 0.0625rem;
}

.camp {
  position: relative;
  padding-top: 5rem;
  padding-bottom: 0;
  background-color: var(--color-primary);
}
@media screen and (min-width: 768px) {
  .camp {
    padding-top: 2.5rem;
    padding-bottom: 0;
  }
}
.camp .stay__title {
  position: absolute;
  top: calc((5rem + 6.5vw + clamp(2.5rem, 1.426rem + 5.37vw, 4rem)) * -1);
  left: calc(clamp(0.938rem, 0.491rem + 2.23vw, 2.5rem) * -1);
  /* 15 - 40 */
  width: clamp(22.75rem, 11.833rem + 54.59vw, 38rem);
  /* 364 - 608 */
  aspect-ratio: 760/161;
  z-index: 400;
}
@media screen and (min-width: 768px) {
  .camp .stay__title {
    top: calc((2.5rem + 6.5vw + clamp(3.75rem, 2.321rem + 2.98vw, 5rem)) * -1);
    width: clamp(38rem, 27.143rem + 22.62vw, 47.5rem);
    /* 608 - 760 */
  }
}
.camp__bg .item {
  position: absolute;
}
.camp__bg .left-top {
  width: 12.5%;
  min-width: 6.75rem;
  max-width: 11.25rem;
  left: 2.5rem;
  top: -1.5rem;
}
.camp__bg .left-bottom {
  width: 9.7%;
  min-width: 5.25rem;
  max-width: 8.75rem;
  left: -1.5rem;
  top: 40%;
}
.camp__bg .right-top {
  width: 11.1%;
  min-width: 6rem;
  max-width: 10rem;
  right: 4%;
  top: 0;
}
.camp__bg .right-bottom {
  width: 9.7%;
  min-width: 5.25rem;
  max-width: 8.75rem;
  right: -2rem;
  top: 36%;
}
.camp__inner {
  position: relative;
  padding: 3.5rem 1rem 2.5rem 1rem;
  margin-top: 4rem;
  background-color: var(--color-white);
  border-radius: var(--radius-sm);
}
@media screen and (min-width: 768px) {
  .camp__inner {
    padding: 3.5rem 7.3% 3.5rem 7.3%;
    border-radius: var(--radius-md);
  }
}
.camp__deco {
  position: absolute;
  left: 50%;
  top: -1.875rem;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 100%;
  max-width: 24.125rem;
  aspect-ratio: 386/71;
  margin-inline: auto;
}
.camp__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;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.25rem;
  font-size: var(--font-size28);
  font-weight: 800;
  text-align: center;
}
.camp__title .deco {
  display: grid;
  place-items: center;
  place-content: center;
  width: clamp(2.5rem, 2.357rem + 0.71vw, 3rem);
  /* 40 - 48 */
  aspect-ratio: 1/1;
  background-color: var(--color-tertiary);
  border-radius: 50%;
  color: #fff;
  font-size: var(--font-size28);
}
.camp__content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem 4%;
  grid-template-areas: "img01" "img02" "text";
  margin-top: 2rem;
}
@media screen and (min-width: 768px) {
  .camp__content {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr auto;
    grid-template-areas: "img01 img02" "text text";
    gap: 0.5rem 4%;
  }
}
.camp__img:nth-child(1) {
  grid-area: img01;
}
.camp__img:nth-child(2) {
  grid-area: img02;
}
.camp__body {
  grid-area: text;
}
.camp__body .notice {
  font-size: var(--font-size13);
  text-align: right;
}
.camp__body .text {
  margin-top: 1.5rem;
  text-align: left;
  line-height: 1.8;
}
@media screen and (min-width: 600px) {
  .camp__body .text {
    text-align: center;
  }
}
@media screen and (min-width: 768px) {
  .camp__body .text {
    margin-top: 1rem;
  }
}
.camp__swiper {
  margin-top: 6.25rem;
}
.camp__swiper .swiper-wrapper {
  -webkit-transition-timing-function: linear;
          transition-timing-function: linear;
}
.camp__swiper .swiper-slide {
  width: 70%;
  aspect-ratio: 540/400;
  max-width: 31.25rem;
  min-width: 18.75rem;
}
@media screen and (min-width: 768px) {
  .camp__swiper .swiper-slide {
    width: 40%;
  }
}

.shop {
  position: relative;
  padding-block: 5rem calc(7.5rem + 6.5vw);
  background-color: var(--color-bg);
}
@media screen and (min-width: 768px) {
  .shop {
    padding-block: 2.5rem calc(7.5rem + 6.5vw);
  }
}
.shop__inner {
  position: relative;
  padding: 2.5rem 1rem 1.5rem 1rem;
  margin-top: -2.5rem;
  background-color: var(--color-white);
  border-radius: var(--radius-sm);
}
@media screen and (min-width: 768px) {
  .shop__inner {
    padding: 1.5rem 7.3% 2.5rem 7.3%;
    margin-top: -1.5rem;
    border-radius: var(--radius-md);
  }
}
.shop__head {
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
  margin-top: 4rem;
  z-index: 10;
}
.shop__head .pc-none {
  display: inline-block;
}
@media screen and (min-width: 768px) {
  .shop__head .pc-none {
    display: none;
  }
}
.shop__head .illust {
  width: 4.125rem;
  aspect-ratio: 66/58;
  position: absolute;
  left: calc(100% - 2rem);
  top: 50%;
}
@media screen and (min-width: 768px) {
  .shop__head .illust {
    top: 50%;
    left: calc(100% - 1rem);
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
}
.shop__item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
  gap: 1rem 4.3%;
  grid-template-areas: "body" "img";
  padding-block: 2rem;
}
@media screen and (min-width: 768px) {
  .shop__item {
    grid-template-columns: 1fr 1fr;
    padding-block: 2.5rem;
    grid-template-areas: "body img";
  }
}
.shop__item:not(:first-child) {
  background-image: radial-gradient(circle, #c0c0c0 1.5px, transparent 1.5px);
  background-position: left top;
  background-repeat: repeat-x;
  background-size: 10px 3px;
}
.shop__item:nth-child(2) {
  grid-template-areas: "body" "img";
}
@media screen and (min-width: 768px) {
  .shop__item:nth-child(2) {
    grid-template-areas: "img body";
  }
}
.shop__item .head {
  font-size: var(--font-size24);
  font-weight: 800;
  text-align: left;
}
.shop__item .head .sp-none {
  display: none;
}
@media screen and (min-width: 768px) {
  .shop__item .head .sp-none {
    display: block;
  }
}
.shop__item .text {
  margin-top: 0.625rem;
  line-height: 1.8;
}
.shop__body {
  grid-area: body;
}
.shop__img {
  grid-area: img;
}

.event {
  position: relative;
  padding-block: 5rem calc(8.75rem + 6.5vw);
  background-color: var(--color-secondary);
}
@media screen and (min-width: 768px) {
  .event {
    padding-block: 2.5rem calc(11.25rem + 6.5vw);
  }
}
.event__bg .item {
  position: absolute;
}
.event__bg .left-top {
  width: 14.2%;
  min-width: 7.6875rem;
  max-width: 12.8125rem;
  left: -3%;
  top: 10%;
}
.event__bg .left-bottom {
  width: 8.1%;
  min-width: 4.375rem;
  max-width: 7.3125rem;
  left: 1%;
  bottom: 0;
}
.event__bg .right-top {
  width: 10.5%;
  min-width: 5.625rem;
  max-width: 9.4375rem;
  right: -1%;
  top: 0;
}
.event__bg .right-bottom {
  width: 7.7%;
  min-width: 4.125rem;
  max-width: 6.9375rem;
  right: -2%;
  top: 50%;
}
.event__list {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem 4.3%;
  margin-top: 3rem;
}
@media screen and (min-width: 768px) {
  .event__list {
    grid-template-columns: 1fr 1fr;
  }
}
.event__body {
  margin-top: 1rem;
}
.event__item {
  position: relative;
  color: #fff;
}
.event__item .head {
  font-size: var(--font-size24);
  font-weight: 800;
  text-align: center;
}
.event__item .text {
  margin-top: 0.625rem;
  line-height: 1.8;
}
.event__tag {
  position: absolute;
  left: 1rem;
  top: 1rem;
  display: inline-block;
  font-size: var(--font-size13);
  text-align: left;
  background-color: var(--color-tertiary);
  border-radius: 0.25rem;
  padding: 0.125rem 0.625rem;
}

.guide {
  position: relative;
  padding-block: 5rem clamp(8.75rem, 8.036rem + 3.57vw, 11.25rem);
  /* 80 - 100 */
  background-color: var(--color-bg-secondary);
  text-align: center;
}
@media screen and (min-width: 768px) {
  .guide {
    padding-top: 2.5rem;
  }
}
.guide .info__title {
  position: absolute;
  top: calc((5rem + 6.5vw + clamp(2.5rem, 1.426rem + 5.37vw, 4rem)) * -1);
  right: -4rem;
  width: clamp(23.5rem, 12.27rem + 56.15vw, 39.188rem);
  /* 376 - 627 */
  aspect-ratio: 784/161;
  z-index: 400;
}
@media screen and (min-width: 768px) {
  .guide .info__title {
    top: calc((2.5rem + 6.5vw + clamp(4rem, 2.857rem + 2.38vw, 5rem)) * -1);
    right: -4rem;
    width: clamp(39.188rem, 27.973rem + 23.36vw, 49rem);
    /* 627 - 784 */
  }
}
.guide__deco {
  position: absolute;
  top: calc((5rem + 6.5vw + clamp(5.625rem, 3.925rem + 8.5vw, 8rem)) * -1);
  right: 8%;
  width: clamp(4rem, 3.714rem + 1.43vw, 5rem);
  /* 64 - 80 */
  aspect-ratio: 112/190;
  z-index: 100;
}
@media screen and (min-width: 768px) {
  .guide__deco {
    top: calc((2.5rem + 5.6vw + clamp(8rem, 5.714rem + 4.76vw, 10rem)) * -1);
  }
}
.guide__section:not(:first-of-type) {
  margin-top: clamp(4rem, 3.357rem + 3.21vw, 6.25rem);
  /* 64 - 100 */
}
.guide__title {
  display: inline-block;
  margin-bottom: 1rem;
  text-decoration: underline;
  text-underline-offset: 0.375rem;
  text-decoration-thickness: 1px;
  font-size: var(--font-size24);
  font-weight: 800;
  text-align: center;
}
.guide__title .sm {
  font-size: var(--font-size15);
}
.guide__title .pc-none {
  display: block;
}
@media screen and (min-width: 600px) {
  .guide__title .pc-none {
    display: none;
  }
}
.guide__table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  border-radius: var(--radius-xs);
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  .guide__table {
    border-radius: var(--radius-sm);
  }
}
.guide__table th, .guide__table td {
  padding: 1rem 0.625rem;
  width: 50%;
  text-align: center;
  vertical-align: middle;
}
.guide__table .table-head th {
  background-color: #51B0CE;
  color: #fff;
  font-size: var(--font-size20);
  font-weight: 800;
  letter-spacing: 0.1em;
}
.guide__table .table-head th:not(:last-child) {
  border-right: 3px solid #F3F3F3;
}
.guide__table .table-body th, .guide__table .table-body td {
  background-color: #fff;
  font-weight: 800;
}
.guide__table .table-body tr {
  border-top: 3px solid #F3F3F3;
}
.guide__table .table-body th {
  font-size: var(--font-size18);
  border-right: 3px solid #F3F3F3;
}
.guide__table .table-body th .small {
  display: block;
  font-size: var(--font-size15);
  font-weight: 500;
}
.guide__table .table-body td {
  font-family: var(--font-number);
  font-size: var(--font-size24);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
}
.guide__table .table-body td .small {
  display: block;
  margin-top: 0.125rem;
  font-family: var(--font-base);
  font-size: var(--font-size15);
  font-weight: 600;
}
.guide__price-btn {
  margin-top: 1.5rem;
}
@media screen and (min-width: 768px) {
  .guide__price-btn {
    margin-top: 2.5rem;
  }
}
.guide__consent-list {
  display: grid;
  grid-template-columns: 1fr;
}
@media screen and (min-width: 600px) {
  .guide__consent-list {
    grid-template-columns: repeat(2, 1fr);
    margin-top: 3rem;
  }
}
.guide__consent-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: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
  padding: 2.5rem 0;
}
@media screen and (min-width: 600px) {
  .guide__consent-item {
    padding: 0 9%;
  }
}
.guide__consent-item:last-child {
  background-image: radial-gradient(circle, #c0c0c0 1.5px, transparent 1.5px);
  background-position: left top;
  background-repeat: repeat-x;
  background-size: 10px 3px;
}
@media screen and (min-width: 600px) {
  .guide__consent-item:last-child {
    background-image: radial-gradient(circle, #c0c0c0 1.5px, transparent 1.5px);
    background-position: left top;
    background-repeat: repeat-y;
    background-size: 3px 10px;
  }
}
.guide__consent-item .icon {
  width: 7.5rem;
  aspect-ratio: 1/1;
}
.guide__consent-item .text {
  text-align: left;
  line-height: 1.8;
}
.guide__consent-btn {
  margin-top: 1.5rem;
}
@media screen and (min-width: 768px) {
  .guide__consent-btn {
    margin-top: 2.5rem;
  }
}
.guide__consent-notice {
  text-align: left;
}
@media screen and (min-width: 600px) {
  .guide__consent-notice {
    text-align: center;
  }
}
.guide__consent-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;
  gap: 0.375rem;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
  margin-top: 0.5rem;
  padding-bottom: 0.125rem;
  border-bottom: 1px solid var(--color-text);
}
.guide__rules-inner {
  position: relative;
  padding: 1.5rem max(4%, 1rem);
  width: 100%;
  max-width: 55rem;
  margin-inline: auto;
  background-color: var(--color-secondary);
  border-radius: var(--radius-sm);
}
@media screen and (min-width: 768px) {
  .guide__rules-inner {
    padding: 2.5rem 7% 4rem 7%;
    border-radius: var(--radius-md);
  }
}
.guide__rules-inner .illust-top {
  position: absolute;
  top: -3rem;
  left: -3rem;
  width: clamp(7.5rem, 4.368rem + 15.66vw, 11.875rem);
  /* 120 - 190 */
  aspect-ratio: 1/1;
  z-index: 10;
}
@media screen and (min-width: 768px) {
  .guide__rules-inner .illust-top {
    top: clamp(0rem, -7.143rem + 14.88vw, 6.25rem);
    /* 0 - 100 */
    left: calc(clamp(0rem, -6.071rem + 30.36vw, 21.25rem) * -1);
    /* 0 - 340 */
    width: 27.8%;
  }
}
.guide__rules-content {
  position: relative;
  padding-inline: 1rem;
  padding-bottom: 6.25rem;
  padding-top: clamp(3.5rem, 3.071rem + 2.14vw, 5rem);
  /* 56 - 80 */
  background-color: var(--color-white);
  border-radius: var(--radius-xs);
}
@media screen and (min-width: 600px) {
  .guide__rules-content {
    padding-inline: 6%;
    padding-bottom: 3rem;
  }
}
@media screen and (min-width: 768px) {
  .guide__rules-content {
    border-radius: var(--radius-sm);
  }
}
.guide__rules-content::before {
  content: "";
  background-image: url("../images/guide/guide_deco02.webp");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: clamp(6.25rem, 4.821rem + 7.14vw, 11.25rem);
  /* 100 - 180 */
  aspect-ratio: 360/121;
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.guide__rules-content .illust-bottom {
  position: absolute;
  bottom: 0;
  right: -0.625rem;
  width: 20.8%;
  min-width: 6.25rem;
  max-width: 9.8125rem;
  aspect-ratio: 157/149;
}
@media screen and (min-width: 600px) {
  .guide__rules-content .illust-bottom {
    right: -2.5rem;
  }
}
.guide__rules-list {
  margin-top: 2rem;
}
.guide__rules-item {
  text-align: left;
}
.guide__rules-item .head {
  position: relative;
  padding-left: 1.5rem;
  font-size: var(--font-size18);
  font-weight: 800;
}
.guide__rules-item .head::before {
  content: "";
  background-image: url("../images/guide/icon_dog.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 1.25rem;
  aspect-ratio: 1/1;
  position: absolute;
  left: 0;
  top: 0.15em;
}
.guide__rules-item .text {
  margin-top: 0.25rem;
  line-height: 1.8;
}
.guide__rules-item:not(:first-child) {
  margin-top: 1.5rem;
}
.guide__rules-copy {
  position: relative;
  margin-top: 1.25rem;
  padding-top: 2.5rem;
  font-weight: 700;
  line-height: 1.8;
}
@media screen and (min-width: 768px) {
  .guide__rules-copy {
    margin-top: 2rem;
  }
}
.guide__rules-copy::before {
  content: "";
  background-image: url("../images/guide/icon_radial.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 3.5625rem;
  aspect-ratio: 67/29;
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

/* ============================================================
   sagamiko-resort.jp 共通CSSとの衝突回避
   /common/css/common.css / style.css 読み込み時用
   ============================================================ */

/* 外側の main がヘッダー分の margin-top を持つため、入れ子の .l-main ではリセット */
main.l-main {
  margin-top: 0;
}

/* common.css の section padding（MVは .mv 側でも指定済み） */
.l-main > section.mv {
  padding: 0;
}

/* common.css の .title（緑ドット下線・display:inline 等）を打ち消し
   ※ all: inherit は後勝ちで各セクションの .title 指定まで潰すため使わない */
.l-main .title {
  display: block;
  padding: 0;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  background: none;
}
.l-main .title br {
  display: inline;
}

/* 各コンポーネントの .title 指定を再適用（上のリセットより後に置く） */
.l-main .about__nav-link .title {
  font-weight: 700;
  color: var(--color-primary);
  text-align: center;
}
.l-main .attraction__item-body .title {
  text-align: center;
  font-size: var(--font-size20);
  font-weight: 800;
}
.l-main .dogpark__agility-desc .title {
  padding: 0.25rem 0.5rem;
  background-color: var(--color-tertiary);
  border-radius: 4px;
  font-weight: 700;
  color: #fff;
  text-align: center;
  line-height: 1.2;
}
.l-main .dogpark__facility-item .title {
  margin-top: 1rem;
  font-size: var(--font-size18);
  font-weight: 800;
  color: var(--color-tertiary);
  text-align: center;
}
.l-main .photo__item-body .title {
  font-size: var(--font-size20);
  font-weight: 800;
  text-align: center;
}
.l-main .photo__item-body .title br,
.l-main .dogpark__field-body .title br,
.l-main .dogpark__facility-item .title br {
  display: block;
}

/* common.css `.subtitle` の下余白・フォントサイズを打ち消し */
.l-main .photo__item-body .subtitle {
  margin: 1rem auto 0;
  font-size: var(--font-size15);
}

/* common.css `.small { font-size: 75% }` を打ち消し */
.l-main .bbq__item-body .small {
  font-size: 1em;
}

/* リンクなしお知らせでも本文幅が潰れないようにする */
.l-main .news__body {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  min-width: 0;
}

/* common.css の a:hover img { opacity: .7 } を打ち消し */
.l-main a:hover img {
  opacity: 1;
}

#pagetop {
  z-index: 999;
}