@charset "UTF-8";

:root {
  --base-color: #fff;
  --base-2-color: #FAF5E1;
  --base-3-color: #F5EBC1;
  --contrast-color: #662700;
  --primary-color: #85C024;
  --accent-color: #0368B7;
  --font-jp: "M PLUS 1p", "Comfortaa", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", sans-serif;
  --font-en: "Comfortaa", "M PLUS 1p", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", sans-serif;
  /* --animate-duration: 0.3s; */
  --bounce-distance: 50px;
  /* root:16px min:320 max:1360 minS:14 maxS:16 */
  /* --font-base: clamp(0.875rem, 0.837rem + 0.192vw, 1rem); */
  /* root:16px min:320 max:1360 minS:13 maxS:16 */
  --font-base: clamp(0.813rem, 0.755rem + 0.288vw, 1rem);
  /* root:16px min:320 max:1360 minS:16 maxS:80 */
  /* --padding-inline: clamp(1rem, -0.231rem + 6.154vw, 5rem); */
  /* root:16px min:320 max:768 minS:16 maxS:36 */
  --padding-inline: clamp(1rem, 0.107rem + 4.464vw, 2.25rem);

  @media screen and (min-width: 960px) {
    /* root:16px min:769 max:1360 minS:36 maxS:80 */
    --padding-inline: clamp(2.25rem, -1.328rem + 7.445vw, 5rem);
  }
}


/*
 * _base
 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* html.is-locked,
html.lity-active {
  height: 100vh;
  overflow: hidden;
  overflow-anchor: none;
} */

body {
  width: 100%;
  margin: 0;
  padding: 0;
  color: var(--contrast-color);
  background: var(--base-2-color);
  font-size: var(--font-base);
  font-weight: 400;
  line-height: 1.6;
  font-style: normal;
  font-family: var(--font-jp);
  overflow-wrap: break-word;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
  letter-spacing: 0.05em;
  overflow-x: hidden;
}



@media (min-width: 751px) {

  /*
  見た目は非リンク化しているが、キーボード/スクリーンリーダー利用者はTab移動でこのリンクにアクセスでき、
  Enterキーで電話発信動作（tel:リンク）が起きてしまう可能性がある
  html側にも　aria-disabled="true" を入れる
  */
  /* h*/
  a[href*="tel:"] {
    pointer-events: none;
    cursor: default;
    text-decoration: none;
  }
}

figure {
  margin: 0;
}

picture {
  display: block;
}

picture,
img {
  height: auto;
}

@media screen and (min-width: 480px) {
  .sp-only {
    display: none;
  }
}

@media screen and (min-width: 1025px) {
  .sp {
    display: none;
  }
}

.tab {
  display: none;
}

@media screen and (min-width: 768px) {
  .tab {
    display: block;
  }
}

.pc {
  display: none;
}

@media screen and (min-width: 1025px) {
  .pc {
    display: block;
  }
}

::-moz-selection {
  color: #222222;
  background: rgba(230, 142, 127, 0.1);
  text-shadow: none;
}

::selection {
  color: #222222;
  background: rgba(230, 142, 127, 0.1);
  text-shadow: none;
}

::-moz-selection {
  color: #222222;
  background: rgba(230, 142, 127, 0.1);
  text-shadow: none;
}

a {
  cursor: pointer;
  line-height: inherit;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  text-decoration: none;
}

a:link,
a:visited,
a:active {
  text-decoration: none;
}

a:hover {
  opacity: 0.72;
  text-decoration: none;
}

/* キーボード操作時のフォーカス表示。元のCSSにはフォーカス時のスタイルが一切なく、
   .nav-toggleではoutline:noneで完全に消えていたため、すべてのインタラクティブ要素に
   visibleなフォーカスを追加（WCAG 2.4.7 フォーカスの可視化） */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--accent-color);
  outline-offset: 2px;
  border-radius: 2px;
}

/* 背景画像の上にあるため、デフォルトのアウトラインが見えにくい要素は太め・コントラストを上げる */
.nav-toggle:focus-visible,
.modal-closed:focus-visible {
  outline: 3px solid var(--base-color);
  outline-offset: 3px;
}

.font-en {
  font-family: "Comfortaa", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.font-jp {
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 400;
  font-style: normal;
}

/*
 * accessibility utilities
 */
/* スクリーンリーダー専用テキスト。視覚的には隠すが、display:noneにはしない
   （display:noneは支援技術からも除外されてしまうため） */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* スキップリンク：通常は画面外に隠し、キーボードフォーカス時のみ表示する */
.skip-link {
  position: absolute;
  top: -10em;
  left: 0;
  z-index: 10000;
  padding: 0.75em 1.25em;
  background-color: var(--contrast-color);
  color: var(--base-color);
  font-size: 1rem;
  font-weight: 700;
  border-radius: 0 0 0.5em 0;
  transition: top 0.2s;
}

.skip-link:focus-visible {
  top: 0;
  outline: 3px solid var(--base-color);
  outline-offset: -3px;
}

/* ------------------------------------------------------------ */
/* animation
 Animated.cssとJSの組み合わせ
 https://animate.style/
*/
/* ------------------------------------------------------------ */
.js-scroll-animate,
.js-animate-stagger {
  opacity: 0;
  /* 初期状態は非表示 */
  transition: opacity 0.3s;
}

.js-scroll-animate.animate__animated,
.js-scroll-animate:has(.js-animate-stagger),
.js-animate-stagger.animate__animated {
  opacity: 1;
}

/* オリジナルアニメーション
独自のキーフレームを定義 */
@keyframes popIn {
  0% {
    opacity: 0;
    transform: scale(0.5) rotate(-5deg);
  }

  70% {
    opacity: 1;
    transform: scale(1.05) rotate(2deg);
  }

  100% {
    transform: scale(1) rotate(0deg);
  }
}

/* オリジナルアニメーション
Animate.cssと同じ命名規則(animate__)に乗せると統一感が出る */
.animate__popIn {
  animation-name: popIn;
}


@keyframes swingSettle {
  0% {
    opacity: 0;
    transform: rotate(-90deg);
  }

  /* 振れ始めの角度 */
  20% {
    opacity: 1;
    transform: rotate(15deg);
  }

  40% {
    transform: rotate(-10deg);
  }

  60% {
    transform: rotate(6deg);
  }

  80% {
    transform: rotate(-3deg);
  }

  100% {
    transform: rotate(0deg);
  }

  /* 真下で静止 */
}

.animate__swingSettle {
  animation-name: swingSettle;
  animation-timing-function: ease-in-out;
  animation-delay: var(--animate-delay);
}

@keyframes treeSwaySettle {
  0% {
    transform: rotate(0deg);
  }

  15% {
    transform: rotate(6deg);
  }

  30% {
    transform: rotate(-4deg);
  }

  45% {
    transform: rotate(3deg);
  }

  60% {
    transform: rotate(-2deg);
  }

  75% {
    transform: rotate(1deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

.animate__treeSwaySettle {
  transform-origin: bottom center;
  /* 根本を軸に固定 */
  animation-name: treeSwaySettle;
  animation-timing-function: ease-in-out;
  animation-duration: 1.8s;
  /* iteration-countは指定しない(animate__animatedのデフォルトで1回再生) */
}

/* bounceの距離をカスタマイズ */
@keyframes bounceCustom {

  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -200px, 0) scaleY(3);
    transform: translate3d(0, -200px, 0) scaleY(3);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0) scaleY(0.9);
    transform: translate3d(0, 25px, 0) scaleY(0.9);
  }

  75% {
    -webkit-transform: translate3d(0, -10px, 0) scaleY(0.95);
    transform: translate3d(0, -10px, 0) scaleY(0.95);
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0) scaleY(0.985);
    transform: translate3d(0, 5px, 0) scaleY(0.985);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.animate__bounceCustom {
  animation-duration: .53s;
  transform-origin: center bottom;
  animation-name: bounceCustom;
}

/* 動きに敏感な利用者への配慮（前庭障害等）。OS側で「視差効果を減らす」等が
   有効な場合、揺れ続けるツリーや大きく動くアニメーションを止め、
   js-scroll-animate系のコンテンツはJSの実行を待たずに表示する */
@media (prefers-reduced-motion: reduce) {


  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  /* tickerはゆっくりめの速度で動かし続けるため対象外。
     JS側でprefers-reduced-motionを検出してspeedを遅くする */
  .ticker {
    animation-duration: calc(var(--ticker-duration, 40s) * 3) !important;
  }

  .js-scroll-animate,
  .js-animate-stagger {
    opacity: 1 !important;
    transition: none !important;
  }
}

.btn {
  display: flex;
  min-width: 15rem;
  width: fit-content;
  border-radius: 0.6em;
  margin-inline: auto;
  padding: 0.64285714em 2em 0.5em 0.85714286em;
  font-family: var(--font-en);
  font-size: 1.75em;
  font-weight: 700;
  line-height: 1.14285714;
  letter-spacing: 0.1em;
  background-color: var(--primary-color);
  color: var(--base-color);
  border: 2px solid var(--primary-color);
  position: relative;
  cursor: pointer;
  appearance: none;
  transition: all .3s;

  &:hover {
    background-color: var(--base-color);
    color: var(--primary-color);
  }

  &::before {
    content: "";
    display: block;
    width: 1.025em;
    height: 1.025em;
    border-radius: 50%;
    background-color: var(--base-color);
    border: 2px solid var(--primary-color);
    position: absolute;
    top: 50%;
    right: 0.5em;
    transform: translateY(-50%);
  }

  &::after {
    content: "";
    display: block;
    width: 0.65em;
    height: 0.65em;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2385c024' viewBox='0 0 19.621 15.556'%3E%3Cg transform='translate(1035 4304.935) rotate(180)'%3E%3Cpath d='M16,1.5H0A1.5,1.5,0,0,1-1.5,0,1.5,1.5,0,0,1,0-1.5H16A1.5,1.5,0,0,1,17.5,0,1.5,1.5,0,0,1,16,1.5Z' transform='translate(1017.5 4297.157)'/%3E%3Cpath d='M1019.1,4303.018a1.5,1.5,0,0,1-1.5-1.5v-9.5h9.5a1.5,1.5,0,0,1,0,3h-6.5v6.5A1.5,1.5,0,0,1,1019.1,4303.018Z' transform='translate(-2739.084 1981.79) rotate(-45)'/%3E%3C/g%3E%3C/svg%3E") no-repeat center center / contain;
    position: absolute;
    top: 50%;
    right: 0.65em;
    transform: translateY(-50%) rotate(-35deg);
  }
}




/*
 * typo
 */
.main-ttl {
  width: 100%;
  display: flex;
  flex-direction: column-reverse;
  justify-content: center;
  text-align: center;
  font-weight: 400;
  font-size: 2.5em;
  letter-spacing: 0.16em;
  line-height: 1.5;
  margin-bottom: 2em;

  &::before {
    content: attr(data-en);
    display: block;
    color: var(--primary-color);
    font-family: var(--font-en);
    font-size: 0.5em;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0.2em;
    margin-top: 0.8em;
  }
}

.lead {
  font-size: 1.25em;
  font-weight: 500;
}

/*
 * _layout
 */
.wrapper {
  width: 100%;
  margin-inline: auto;
  overflow-x: hidden;
}

.content {
  width: 100%;
  margin-inline: auto;
  position: relative;
  z-index: 1;
}

.base {
  width: 100%;
  margin-inline: auto;
  position: relative;
  overflow: hidden;
}

.inner {
  width: 100%;
  max-width: calc(840px + (var(--padding-inline) * 2));
  margin-inline: auto;
  padding-inline: var(--padding-inline);

  &.wide {
    max-width: calc(1000px + (var(--padding-inline) * 2));
  }

  &::after {
    content: "";
    clear: both;
    display: block;
  }

}


.flex {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.flex-item {
  flex-basis: 100%;
}

.flex-2cols {
  gap: 4em 2.5em;

  .flex-item {
    @media screen and (min-width: 768px) {
      flex-basis: calc(50% - 1.25em);
    }
  }
}

/*
 * header
 */
.main-header {
  width: 100vw;
  position: absolute;
  top: 0;
  left: 0;
  overflow-x: hidden;
  z-index: 9999;

  .main-logo {
    width: calc(100% - 64px);
    max-width: 70%;

    @media screen and (min-width: 480px) {
      max-width: 50%;
    }

    @media screen and (min-width: 768px) {
      max-width: 460px;
    }
  }
}


/* nav-toggle */
.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 64px;
  height: 56px;
  padding: 0.75em 0.5em 0.875em;
  border: none;
  background: url(../img/bg-toggle.svg) no-repeat right top / contain;
  min-height: inherit;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9999;
  transition: opacity .3s;

  &:hover {
    opacity: 0.8;
  }

  @media screen and (min-width: 768px) {
    width: 96px;
    height: 88px;
    padding: 1.5em 1.25em 1.75em;
  }

}

.toggle-icon {
  width: 28px;
  height: 8px;
  margin-inline: auto;

  @media screen and (min-width: 768px) {
    width: 48px;
    height: 12px;
  }

  display: block;
  position: relative;
}

.toggle-line {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--base-2-color);
  position: absolute;
  left: 0;
  transition: all 0.2s linear;

  &:first-of-type {
    top: 0;
  }

  &:last-of-type {
    bottom: 0;
  }
}

.is-active .toggle-line {
  &:first-of-type {
    top: 6px;
    transform: rotate(25deg);
  }

  &:last-of-type {
    top: 6px;
    transform: rotate(-25deg);
  }
}


.toggle-text {
  width: 100%;
  display: block;
  color: var(--base-2-color);
  font-size: 0.75em;
  font-family: var(--font-en);
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0;
  font-weight: 700;
  letter-spacing: 0;
  text-align: center;
  position: relative;

  @media screen and (min-width: 768px) {
    font-size: 0.875em;
  }

  span {
    width: 100%;
    text-align: center;
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    transition: opacity 0.2s;
  }

  .off {
    opacity: 1;
  }

  .on {
    opacity: 0;
  }
}

.is-active .toggle-text {
  .off {
    opacity: 0;
  }

  .on {
    opacity: 1;
  }
}

.overlay {
  position: fixed;
  width: 100vw;
  height: 100vh;
  display: block;
  background: rgba(0, 0, 0, 0.4);
  top: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
  z-index: 9997;
  transition: opacity 0.2s;
}

.overlay.is-active {
  opacity: 1;
  visibility: visible;
}

#js-modal::backdrop {
  background: rgba(0, 0, 0, 0.4);
}

.modal-wrapper {
  width: 100%;
  height: 100%;
  padding: 80px var(--padding-inline) 10vh;
  display: grid;
  place-content: center;
  position: relative;

  /* @media screen and (min-width: 480px) {
    padding-inline: var(--padding-inline);
  } */
}

.modal-container {
  width: calc(100% - (var(--padding-inline) * 2));
  max-height: calc(100% - (80px + 10vh));
  /* display: grid;
  place-content: center;
  align-content: space-between; */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow-y: auto;

  @media screen and (min-width: 1120px) {
    max-width: 1000px;
  }

}

.modal-content {
  width: 100%;
  max-height: calc(100% - 60px);
  position: relative;
  margin-top: 60px;
  overflow-y: auto;

  img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}

.modal-closed {
  width: 48px;
  height: 48px;
  padding: 1em 0.5em;
  position: absolute;
  top: 0;
  right: 0;

  .toggle-icon {
    width: 100%;
    height: 100%;
    margin-inline: auto;
  }

  .toggle-line {

    &:first-of-type {
      top: 12px;
      transform: rotate(45deg);
    }

    &:last-of-type {
      top: 12px;
      transform: rotate(-45deg);
    }
  }
}


/*
 * nav
 */
.gnav {
  width: 100%;
  height: 100%;
  max-width: 35em;
  /*560px*/
  padding-block: calc(5.5em + 24px);
  padding-inline: 1em;
  background-color: var(--base-2-color);
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9998;
  transform: translateX(100%);
  transition: transform .3s;
  /* スマホ用の慣性スクロール */
  /* -webkit-overflow-scrolling: touch; */
  pointer-events: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;

  &.is-active {
    transform: translateX(0);
  }

  .logo {
    width: 90%;
    margin: 0 auto 2.5em;

    @media screen and (min-width: 768px) {
      width: 100%;
      margin: 0 auto 4.5em;
    }
  }
}

.nav-inner {
  width: 100%;
  max-width: 320px;
  margin-inline: auto;
  opacity: 0;
  transition: opacity 1.8s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s;
}

.is-active .nav-inner {
  opacity: 1;
}


.nav-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.nav-list-item {
  width: 100%;
  border-bottom: 1px solid var(--contrast-color);

  a {
    display: flex;
    align-items: center;
    font-size: 1.25em;
    padding: 0.75em calc(32px + 0.75em + 8px) 0.75em 8px;
    color: var(--contrast-color);
    position: relative;

    @media screen and (min-width: 768px) {
      font-size: 1.75em;
    }

    &:hover {
      opacity: 1;
      color: var(--primary-color);
    }
  }

  a::after {
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    background: var(--primary-color) url(../img/icon-arrow.svg) no-repeat center center / 16px auto;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);

    @media screen and (min-width: 768px) {
      width: 32px;
      height: 32px;
      background-size: 20px auto;
    }
  }
}


/*
 * firstvisual
 */

.firstvisual {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  display: grid;
  place-content: center;
  position: relative;

  @media screen and (min-width: 1025px) {
    height: 765px;
  }

  /* &::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
  } */

  h1 {
    aspect-ratio: 400/220;
    width: 90%;
    max-width: 400px;
    margin-inline: auto;
    position: relative;
    z-index: 3;

    @media screen and (min-width: 480px) {
      width: 80%;
    }

  }

  .movie {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;

    img,
    video {
      width: 100%;
      height: 100%;
      object-fit: cover;

    }
  }
}

/*
 * about
 */

.about {
  background-color: var(--primary-color);
  padding-top: 9em;
  padding-bottom: 8.5em;
  position: relative;
  /* overflow-x: hidden; */

  @media screen and (min-width: 768px) {
    padding-top: 9em;
    padding-bottom: 17em;
  }

  @media screen and (min-width: 960px) {
    padding-top: 7.5em;
    padding-bottom: 17em;
  }

  &::before,
  &::after {
    content: "";
    display: block;
    width: 100%;
    height: 1.9em;
    background-repeat: repeat-x;
    background-size: auto 100%;
    background-image: url(../img/wave-green.svg);
    background-position: center bottom;
    position: absolute;
    left: 0;
    z-index: 3;
  }

  &::before {
    top: -1.7em;
  }

  &::after {
    bottom: -1.7em;
    transform: rotate(180deg);
  }

  .inner {
    &::before {
      content: "";
      display: block;
      width: 25%;
      aspect-ratio: 185/158;
      max-width: 185px;
      background: url(../img/tree-about.svg) no-repeat center center / 100% auto;
      position: absolute;
      bottom: 7em;
      left: -0.5em;
      z-index: 1;
      opacity: 0;
      transition: opacity .3s;

      @media screen and (min-width: 480px) {
        bottom: 5em;
      }

      @media screen and (min-width: 960px) {
        bottom: 10em;
      }

      @media screen and (min-width: 1120px) {
        bottom: 10em;
        left: calc((100% - (1000px + (var(--padding-inline) * 2)))/2 + -0.5em);

      }

    }

    &:has(.animate__animated)::before {
      opacity: 1;
      transform-origin: bottom center;
      /* 根本を軸に固定 */
      animation-name: treeSwaySettle;
      animation-timing-function: ease-in-out;
      animation-duration: 1.8s;
      /* iteration-countは指定しない(animate__animatedのデフォルトで1回再生) */
    }
  }

  h2 {
    width: 80%;
    aspect-ratio: 360/234;
    max-width: 360px;
    margin-inline: auto;
    position: relative;
    z-index: 3;
  }

  .lead {
    width: 100%;
    font-size: 1.5em;
    margin-top: 2.66666667em;
    line-height: 2;
    color: var(--base-color);
    text-align: center;
    letter-spacing: 0.12em;
    position: relative;
    z-index: 3;


    /* @media screen and (min-width: 768px) {
			font-size: 1.5em;
			margin-top: 2.66666667em;
    } */
  }

  .illust {
    position: absolute;
  }

  .park1 {
    width: 45%;
    aspect-ratio: 285/188;
    max-width: 285px;
    left: -1em;
    top: 1.5em;

    @media screen and (min-width: 480px) {
      width: 35%;
      left: 0;
    }

    @media screen and (min-width: 960px) {
      width: 30%;
      top: 35%;
      left: -2em;
    }

    @media screen and (min-width: 1120px) {
      left: calc((100% - (1000px + (var(--padding-inline) * 2)))/2 + -2em);
    }

  }

  .park2 {
    width: 40%;
    aspect-ratio: 262/254;
    max-width: 262px;
    right: -1em;
    top: 1.5em;

    @media screen and (min-width: 480px) {
      width: 30%;
      right: 0;
    }

    @media screen and (min-width: 960px) {
      width: 25%;
      top: 35%;
      right: -2em;
    }

    @media screen and (min-width: 1120px) {
      right: calc((100% - (1000px + (var(--padding-inline) * 2)))/2 + -2em);
    }

  }

  .park3 {
    width: 15%;
    aspect-ratio: 121/87;
    max-width: 121px;
    right: 30%;
    top: 1em;

    @media screen and (min-width: 960px) {
      width: 10%;
      top: 38%;
      right: 20%;
    }

    @media screen and (min-width: 1120px) {
      right: calc((100% - (1000px + (var(--padding-inline) * 2)))/2 + 20%);
    }

  }
}

/*
 * info
 */
.info {
  width: 100%;
  padding-bottom: 12em;
  margin-bottom: 8em;
  position: relative;
  z-index: 3;

  @media screen and (min-width: 960px) {
    padding-top: 25em;
  }

  .main-ttl {
    margin-bottom: 0;
    margin-top: 1.5em;
  }

  .img {
    border-radius: 1.5em;
    overflow: hidden;
    position: relative;
    z-index: 3;
    transition: all .3s;

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

  .img1 {
    width: 90%;
    aspect-ratio: 800 / 464;
    max-width: 800px;
    transform: translate(-1.5em, -2.5em);

    @media screen and (min-width: 480px) {
      width: 80%;
      transform: translate(-1.5em, -3.5em);
    }

    @media screen and (min-width: 960px) {
      width: 60%;
      position: absolute;
      top: -7em;
      left: -1.5em;
      transform: translate(0, 0);
    }

    @media screen and (min-width: 1120px) {
      width: 56%;
      left: calc((100% - (1000px + (var(--padding-inline) * 2)))/2 + -1.5em);
    }

    @media screen and (min-width: 1280px) {
      left: calc((100% - (1200px + (var(--padding-inline) * 2)))/2 + -1.5em);
    }

  }

  .img2 {
    width: 60%;
    aspect-ratio: 415 / 315;
    max-width: 415px;
    margin-left: auto;

    @media screen and (min-width: 480px) {
      width: 50%;
    }

    @media screen and (min-width: 960px) {
      width: 35%;
      position: absolute;
      top: 10em;
      right: 0;
    }

    @media screen and (min-width: 1120px) {
      right: calc((100% - (1000px + (var(--padding-inline) * 2)))/2);
    }

    @media screen and (min-width: 1280px) {
      right: calc((100% - (1200px + (var(--padding-inline) * 2)))/2);
    }

  }

  .img3 {
    width: 55%;
    aspect-ratio: 349 / 502;
    max-width: 349px;
    position: absolute;
    bottom: -3em;
    right: 1em;
    z-index: 3;
    transform-origin: 62% 8%;

    /* 画像の左上を基準に、横62%・縦8%の位置を回転軸にする例 */
    @media screen and (min-width: 480px) {
      width: 45%;
      right: 1.5em;
    }

    @media screen and (min-width: 768px) {
      width: 40%;
      z-index: 2;
    }

    @media screen and (min-width: 1120px) {
      right: calc((100% - (1000px + (var(--padding-inline) * 2)))/2 + -1.5em);
    }

  }

  .tree {
    width: 65%;
    aspect-ratio: 433 / 228;
    max-width: 433px;
    margin-left: auto;
    background: url(../img/tree-info.svg) no-repeat center center / 100% auto;
    position: relative;
    z-index: 3;
    transform: translate(1.5em, -5em);

    @media screen and (min-width: 480px) {
      width: 58%;
      transform: translate(1.5em, -6em);
    }

    @media screen and (min-width: 960px) {
      width: 40%;
      position: absolute;
      top: -7em;
      right: -1.5em;
      transform: translate(0, 0);
    }

    @media screen and (min-width: 1120px) {
      right: calc((100% - (1000px + (var(--padding-inline) * 2)))/2 + -1.5em);
    }

  }

  .tree2 {
    width: 32%;
    aspect-ratio: 197 / 149;
    max-width: 197px;
    margin-left: auto;
    background: url(../img/tree-info-bottom.svg) no-repeat center center / 100% auto;
    position: relative;
    z-index: 3;
    transform: translate(-13em, 5em);

    @media screen and (min-width: 480px) {
      width: 28%;
      transform: translate(-22em, 5em);
    }

    @media screen and (min-width: 960px) {
      position: absolute;
      top: auto;
      bottom: 5em;
      transform: translate(0, 0);
      right: 80%;
    }

    @media screen and (min-width: 1120px) {
      right: calc((100% - (840px + (var(--padding-inline) * 2)))/2 + 8em);
      bottom: 9em;
    }

  }

  &::after {
    content: "";
    display: block;
    width: calc(100vw - var(--padding-inline));
    height: calc(90% - 12em);
    max-width: calc(100% - ((100% - 1000px)/2));
    background-color: var(--base-color);
    border-radius: 0 5em 5em 0;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;

  }

  .inner {
    position: relative;
    z-index: 3;


  }
}

.info-container {
  width: calc(100% - (var(--padding-inline) * 2));
  margin-right: var(--padding-inline);
  margin-left: var(--padding-inline);
  margin-top: 2.5em;
  background-color: var(--base-2-color);
  border-radius: 1em;
  padding: 2.5em 1.5em;
  position: relative;
  z-index: 1;

  @media screen and (min-width: 480px) {
    /* padding-inline: 2em; */
  }

  @media screen and (min-width: 768px) {
    padding-inline: 2.5em;
  }

  @media screen and (min-width: 1120px) {
    width: 100%;
    margin-inline: auto;
    padding-top: 4.5em;
  }


  &::before,
  &::after {
    content: "";
    display: block;
    position: absolute;
    z-index: 2;
  }
}

.price {
  padding-block: 3.5em;
  margin-top: 3.5em;

  .term {
    font-size: 1.25em;
    margin-bottom: 2em;
    text-align: center;

    span {
      display: inline-block;
      font-family: 0.75em;
      font-weight: 700;
    }
  }

  .flex {
    @media screen and (min-width: 480px) {
      max-width: 20em;
      margin-inline: auto;
    }

    @media screen and (min-width: 768px) {
      max-width: 45em;
    }

    @media screen and (min-width: 1120px) {
      max-width: 40.5em;
    }

  }

  .note {
    max-width: fit-content;
    display: flex;
    justify-content: center;
    text-align: center;
    font-size: 1.25em;
    font-weight: 700;
    padding-top: 11px;
    padding-bottom: 10px;
    padding-inline: 1em;
    background-color: var(--base-color);
    border-radius: 100vmax;
    border: 2px solid var(--contrast-color);
    margin-top: 2em;
    margin-bottom: 1.2em;
    margin-inline: auto;
    letter-spacing: 0;
  }

  .notice {
    text-align: center;

    +.notice {
      margin-top: 0.5em;
    }
  }

  &::before {
    width: 35%;
    aspect-ratio: 200 / 130;
    max-width: 200px;
    background: url(../img/illust-park4.svg) no-repeat center center / 100% auto;
    top: -6%;
    right: -20%;
    transform-origin: center bottom;
    opacity: 0;
    transition: opacity .3s;

    @media screen and (min-width: 480px) {
      top: 24%;
      right: -17%;
    }

    @media screen and (min-width: 768px) {
      width: 25%;
      top: -9%;
      right: -10%;
    }

    @media screen and (min-width: 960px) {
      top: 18%;
      right: -22%;
    }

    @media screen and (min-width: 1120px) {
      top: 20%;
      right: -18%;
    }
  }

  &::after {
    width: 35%;
    aspect-ratio: 195 / 166;
    max-width: 195px;
    background: url(../img/illust-park5.svg) no-repeat center center / 100% auto;
    bottom: -4em;
    left: -3em;
    transform-origin: center bottom;
    opacity: 0;
    transition: opacity .3s;

    @media screen and (min-width: 480px) {
      bottom: 28%;
      left: -16%;
    }

    @media screen and (min-width: 768px) {
      width: 22%;
      bottom: 18%;
      left: -12%;
    }

    @media screen and (min-width: 1120px) {
      left: -14%;
    }


  }

  &.animate__animated::before,
  &.animate__animated::after {
    opacity: 1;
    animation-name: bounceCustom;
    animation-duration: .5s;
    animation-fill-mode: both;
  }

  .tree {
    width: 25%;
    aspect-ratio: 116 / 145;
    max-width: 116px;
    background: url(../img/tree-info-top.svg) no-repeat center center / 100% auto;
    top: -4em;
    left: -2em;
    right: auto;
    transform: none;
    position: absolute;

    @media screen and (min-width: 480px) {
      width: 18%;
      left: 5%;
    }

    @media screen and (min-width: 768px) {
      width: 15%;
      top: -6em;
      left: 12%;
    }

    @media screen and (min-width: 960px) {
      top: -8.5em;
      left: 12%;
    }

  }
}

.price-item {
  h3 {
    font-size: 1.125em;
    font-weight: 500;
    text-align: center;
    margin-bottom: 0.83333333em;
    line-height: 1.11;
    letter-spacing: 0.04em;
  }

  dt {
    width: 100%;
    color: var(--base-color);
    background-color: var(--contrast-color);
    border-radius: 100vmax;
    font-size: 1.75em;
    font-weight: 700;
    padding-top: 5px;
    padding-bottom: 4px;
    line-height: 1.37142857;
    text-align: center;
    letter-spacing: 0;
  }

  dd {

    p {
      font-size: 2.5em;
      font-weight: 700;
      text-align: center;
      line-height: 0.6;
      letter-spacing: 0;
      margin-top: 0.55em;

      @media screen and (min-width: 960px) {
        margin-top: 0.865em;
      }

      span {
        display: inline-block;
        vertical-align: baseline;
        line-height: 1;
        /* font-family: var(--font-en); */
        font-size: 2em;
        font-weight: 900;
        letter-spacing: -0.02em;
        margin-right: 8px;
      }

      +p {
        font-size: 1.25em;
        margin-top: 1.225em;
      }
    }

  }
}

.info-list {
  width: calc(100% - (var(--padding-inline) * 2));
  margin-right: var(--padding-inline);
  margin-left: var(--padding-inline);
  margin-top: 1.5em;
  display: flex;
  flex-direction: column;
  gap: 1em;

  @media screen and (min-width: 1120px) {
    width: 100%;
    margin-inline: auto;
  }
}

.info-list-item {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  border-radius: 1em;
  margin-top: 1.5em;
  margin-inline: auto;
  overflow: hidden;

  @media screen and (min-width: 768px) {
    min-height: 6.5rem;
  }

  p {
    width: 100%;
    display: flex;
    justify-content: center;

    >span {
      align-self: center;
      width: 100%;
    }

  }

  p:first-of-type {
    font-size: 1.25em;
    font-weight: 700;
    line-height: 1.33333333;
    text-align: center;
    color: var(--base-color);
    background-color: var(--primary-color);
    padding: 0.75em 1em;
    letter-spacing: 0.08em;

    @media screen and (min-width: 768px) {
      width: 200px;
    }


  }

  p+p {
    font-size: 1.5em;
    background-color: var(--base-2-color);
    padding: 0.75em 1em;
    text-align: center;
    letter-spacing: 0;
    line-height: 1.45;

    @media screen and (min-width: 480px) {
      padding: 1.375em;
    }

    @media screen and (min-width: 768px) {
      width: calc(100% - 200px);
      text-align: left;
    }


    .caps {
      display: block;
      font-size: 0.6em;
      text-align: left;
      line-height: 1.4375;
      margin-top: 0.33em;
    }
  }
}

.access {
  padding-bottom: 3em;

  @media screen and (min-width: 1120px) {
    padding-block: 2.5em;
    padding-inline: 5em;
  }

  &::before {
    width: 55%;
    aspect-ratio: 508 / 282;
    max-width: 508px;
    background: url(../img/illust-park6.svg) no-repeat center center / 100% auto;
    bottom: -2em;
    right: -3em;
    opacity: 0;
    transition: opacity .3s;
    transform-origin: center bottom;

    @media screen and (min-width: 960px) {
      width: 60%;
      bottom: -3em;
      right: -6em;
    }
  }

  &::after {
    width: 35%;
    aspect-ratio: 240 / 320;
    max-width: 240px;
    background: url(../img/img-info-map.png) no-repeat center center / 100% auto;
    bottom: -8em;
    left: -1.5em;
    opacity: 0;
    transition: opacity .3s;

    @media screen and (min-width: 480px) {
      bottom: -13em;
    }

    @media screen and (min-width: 768px) {
      bottom: -18em;
      left: -12%;
    }

    @media screen and (min-width: 960px) {
      left: -12%;
    }

    @media screen and (min-width: 1120px) {
      left: -22%;
      bottom: -10%;
    }
  }

  &.animate__animated::before {
    opacity: 1;
    animation-name: bounceCustom;
    animation-duration: .5s;
    animation-fill-mode: both;
  }

  &.animate__animated::after {
    opacity: 1;
    animation-name: fadeIn;
    animation-duration: var(--animate-duration);
    animation-fill-mode: both;
  }

}

.map {
  width: 100%;
  margin-inline: auto;
  text-align: center;
}

.ticker-wrapper {
  margin-top: 11em;
  margin-bottom: 1em;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  overflow: hidden;
  position: relative;

  @media screen and (min-width: 480px) {
    margin-top: 15em;
  }

  @media screen and (min-width: 768px) {
    margin-top: 22em;
  }

  @media screen and (min-width: 1120px) {
    margin-bottom: 5em;
    margin-top: 7.5em;
  }

  .ticker {
    padding: 2.5rem 0 1.25rem;
  }
}

/* 自動スクロールの一時停止ボタン（WCAG 2.2.2 一時停止・停止・非表示への対応）
   common.js側でswiperのautoplay制御に接続してください */
.ticker-pause {
  position: absolute;
  top: 0.5em;
  right: calc(var(--padding-inline) + 0.5em);
  z-index: 2;
  padding: 0.5em 1em;
  background-color: var(--base-color);
  color: var(--contrast-color);
  border: 2px solid var(--contrast-color);
  border-radius: 100vmax;
  font-size: 0.875rem;
  font-weight: 700;
  /* デザイン上、常時は表示しない。display:noneやvisibility:hiddenにすると
     キーボード操作でも辿れなくなってしまうため、opacityで視覚的にのみ隠す
     （.skip-linkと同じ考え方） */
  opacity: 0;
  transition: opacity 0.2s;
}

/* マウスでティッカー周辺にカーソルを乗せたとき、またはキーボードで
   ボタン自体にフォーカスが当たったときにだけ表示する */
/* .ticker-wrapper:hover .ticker-pause, */
.ticker-wrapper:focus-within .ticker-pause,
.ticker-pause:focus-visible {
  opacity: 1;
}


.ticker-pause:hover {
  background-color: var(--base-2-color);
}
/* TODO: common.js側で一時停止/再生の切り替え時に、aria-pressedの値とともに
   .pause-labelのテキストを「一時停止」⇔「再生」に書き換えてください */


@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.ticker {
  --ticker-duration: 60s;
  display: flex;
  width: max-content;
  padding: 2.5rem 0 1.25rem;
  list-style: none;
  margin: 0;
  /* JS がクローンして全アイテムを2セット並べるため、50%移動で元に戻る */
  animation: ticker-scroll var(--ticker-duration) linear infinite;
  will-change: transform;
}

/* .ticker-wrapper:hover .ticker, */
.ticker-wrapper:focus-within .ticker {
  animation-play-state: paused;
}

/* 一時停止ボタンでaria-pressed="true"のときも止める */
.ticker-wrapper:has(.ticker-pause[aria-pressed="true"]) .ticker {
  animation-play-state: paused;
}

.ticker-item {
  padding: 20px;
  width: 364px;
  flex-shrink: 0;
  position: relative;

  /* 偶数番目はSwiperと同じように縦にオフセット */
  &:nth-of-type(even) {
    transform: translateY(-40px);
  }

  @media screen and (min-width: 768px) {
    width: 564px;
  }
}


/* .ticker .swiper-wrapper {
  transition-timing-function: linear !important;
  align-items: center;
}

.ticker .swiper-slide {
  padding: 20px;
  max-width: 364px;
  position: relative;

  &:nth-of-type(even) {
    transform: translateY(-40px);
  }

  @media screen and (min-width: 768px) {
    max-width: 564px;
  }

} */

.ticker-img {
  width: 100%;
  aspect-ratio: 564 / 400;
  border-radius: 1.5em;
  overflow: hidden;

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

/*
 * equipment
 */
.equipment {
  width: 100%;
  padding-top: 7.5em;
  padding-bottom: 6em;
  background-color: var(--base-3-color);
  margin-block: 1.75em;
  position: relative;
  z-index: 2;

  &::before,
  &::after {
    content: "";
    display: block;
    width: 100%;
    height: 1.75em;
    background-repeat: repeat-x;
    background-size: auto 100%;
    background-image: url(../img/wave-beige.svg);
    background-position: center bottom;
    position: absolute;
    left: 0;
  }

  &::before {
    top: -1.75em;
  }

  &::after {
    bottom: -1.75em;
    transform: rotate(180deg);
  }

  .inner {
    &::before {
      content: "";
      display: block;
      width: 19%;
      aspect-ratio: 116/145;
      max-width: 116px;
      background: url(../img/tree-info-top.svg) no-repeat center center / 100% auto;
      position: absolute;
      top: -4em;
      left: calc(var(--padding-inline) * -1px);
      opacity: 0;
      transform-origin: bottom center;
      transition: opacity .3s;

      @media screen and (min-width: 1120px) {
        top: -6em;
      }

    }

    &.animate__animated::before {
      opacity: 1;
      animation-name: treeSwaySettle;
      animation-timing-function: ease-in-out;
      animation-iteration-count: infinite;
      /* ここがポイント */
      animation-duration: 3s;
      /* 1往復にかける時間 */
    }

  }

  .main-ttl {
    margin-bottom: 1.2em;
  }

  .lead {
    text-align: center;
  }
}

.slider-wrapper {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  margin-top: 4.4em;
  padding-bottom: 4rem;
  overflow: hidden;
  position: relative;

  .card-slider {
    overflow: visible;
  }
}

.card-slider {
  width: 100%;
  position: relative;

  .swiper-button-prev,
  .swiper-button-next {
    width: 3.5rem;
    height: 3rem;
    background-color: var(--base-2-color);
    margin-top: 0;
    top: calc(100% - 1.5rem);
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    appearance: none;

    @media screen and (min-width: 768px) {
      width: 4.5rem;
      height: 4rem;
    }

    &:hover {
      background-color: #EADEC8;
    }

    &::after {
      content: "";
      display: block;
      width: 1em;
      height: 1em;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2385c024' viewBox='0 0 19.621 15.556'%3E%3Cg transform='translate(1035 4304.935) rotate(180)'%3E%3Cpath d='M16,1.5H0A1.5,1.5,0,0,1-1.5,0,1.5,1.5,0,0,1,0-1.5H16A1.5,1.5,0,0,1,17.5,0,1.5,1.5,0,0,1,16,1.5Z' transform='translate(1017.5 4297.157)'/%3E%3Cpath d='M1019.1,4303.018a1.5,1.5,0,0,1-1.5-1.5v-9.5h9.5a1.5,1.5,0,0,1,0,3h-6.5v6.5A1.5,1.5,0,0,1,1019.1,4303.018Z' transform='translate(-2739.084 1981.79) rotate(-45)'/%3E%3C/g%3E%3C/svg%3E") no-repeat center center / contain;
      position: absolute;
      top: 50%;
    }
  }

  .swiper-button-prev {
    border-radius: 0.75em 0 0 0.75em;
    right: calc(3.5rem + var(--padding-inline));
    left: auto;

    @media screen and (min-width: 768px) {
      right: calc(4.5rem + var(--padding-inline));
    }

    @media screen and (min-width: 960px) {
      /* right: calc(4.5rem + (var(--padding-inline) * 2)); */
      right: calc(1em + 4.5rem + (100% - (680px + (var(--padding-inline) * 2))) / 2);
    }

    &::after {
      left: 1.25em;
      transform: translateY(-50%) rotate(180deg);
      transition: left 0.3s;

      @media screen and (min-width: 768px) {
        left: 1.85em;
      }

    }

    &:hover::after {
      left: 1em;

      @media screen and (min-width: 768px) {
        left: 1.5em;
      }
    }
  }

  .swiper-button-next {
    border-radius: 0 0.75em 0.75em 0;
    right: var(--padding-inline);

    @media screen and (min-width: 960px) {
      /* right: calc(var(--padding-inline) * 2); */
      right: calc(1em + (100% - (680px + (var(--padding-inline) * 2))) / 2);
    }

    &::after {
      right: 1.25em;
      transform: translateY(-50%);
      transition: right 0.3s;

      @media screen and (min-width: 768px) {
        right: 1.85em;
      }

    }

    &:hover::after {
      right: 1em;

      @media screen and (min-width: 768px) {
        right: 1.5em;
      }
    }

  }

  .swiper-button-next::before {
    content: "";
    display: block;
    width: 1px;
    height: 1.5em;
    background-color: var(--contrast-color);
    opacity: 0.3;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
  }



  .swiper-navigation-icon {
    display: none;
  }


}

.card-slider-item {
  padding-inline: 0.5em;
  overflow: visible;
  height: auto;

  @media screen and (min-width: 768px) {
    padding-inline: 1.25em;
  }

  @media screen and (min-width: 1024px) {
    margin-top: 4.5em;
    /* padding-inline: 1.75em; */
  }

  @media screen and (min-width: 1120px) {
    margin-top: 4.5em;
    padding-inline: 1.75em;
  }


}

.card-slider-container {
  width: 95%;
  height: 100%;
  background-color: var(--base-color);
  border-radius: 1em;
  display: flex;
  flex-wrap: wrap;
  padding: 1.75em 1em 2.5em;
  margin-inline: auto;

  @media screen and (min-width: 1024px) {
    width: 100%;
    padding: 3em 2em 4em;
    display: grid;
    align-items: start;
    grid-template-columns: auto 55%;
    column-gap: 0;
  }

  @media screen and (min-width: 1120px) {
    padding: 4em 2.5em;
  }

  @media screen and (min-width: 1360px) {
    grid-template-rows: calc(52px + 40px) auto;
  }
}

.card-slider-ttl {
  width: calc(100% + 1.25em);
  background-color: var(--primary-color);
  color: var(--base-color);
  font-size: 2em;
  font-weight: 700;
  line-height: 1.375;
  padding-left: 1.35em;
  padding-right: 1em;
  padding-block: 4px;
  border-radius: 8px 26px 26px 8px;
  margin-bottom: 0.8em;
  margin-left: -1.25em;
  order: 1;
  display: flex;
  align-items: center;
  /* transform: translateX(-1.25em); */

  @media screen and (min-width: 1024px) {
    font-size: 1.75em;
    width: fit-content;
    max-width: calc(100% + 1.5em);
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    margin-bottom: 1em;
    margin-left: -2em;
    padding-left: 1em;
    padding-right: 1em;

  }

  @media screen and (min-width: 1120px) {
    max-width: calc(100% + 2.5em);
    padding-left: 0.75em;
    padding-right: 0.55em;
  }
}

.card-slider-content {
  order: 3;
  width: 100%;
  font-weight: 500;
  font-size: 1.25em;
  /* font-size: 1.125em; */
  padding-inline: 0.75em;
  margin-top: 1em;

  @media screen and (min-width: 1024px) {
    font-size: 1.125em;
    margin-top: 0;
    padding-left: 0;
    padding-right: 1.5em;
    grid-column: 1/2;
    grid-row: 2/3;
  }

  .notice {
    width: 100%;
    margin-top: 1.2em;

    span {
      display: inline-flex;
      align-items: center;
      margin-right: 8px;
      font-size: 1.1em;
      color: var(--primary-color);
    }
  }
}

.card-slider-img {
  order: 2;
  width: 100%;
  margin-inline: auto;
  background-color: var(--base-color);
  padding: 0.75em;
  border-radius: 1.5em;
  overflow: hidden;

  @media screen and (min-width: 1024px) {
    grid-column: 2/3;
    grid-row: 1/3;
    margin-top: -5.5em;
    /* transform: translateY(-5.5em); */
  }

  @media screen and (min-width: 1120px) {
    padding: 1.25em;
    border-radius: 2.5em;
    margin-top: -7.5em;
    /* transform: translateY(-7.5em); */
  }

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0.75em;
    overflow: hidden;

    @media screen and (min-width: 1120px) {
      border-radius: 1.5em;
    }
  }
}


/*
 * attention
 */
.attention {
  width: 100%;
  padding-top: 10em;
  padding-bottom: 7.5em;
  position: relative;
  z-index: 2;

  &::before {
    content: "";
    display: block;
    width: 27%;
    aspect-ratio: 186/158;
    max-width: 186px;
    background: url(../img/tree-attention.svg) no-repeat center center / 100% auto;
    position: absolute;
    top: 13.5em;
    right: -0.5em;
    opacity: 0;
    transition: opacity .3s;
    transform-origin: bottom center;
    /* 根本を軸に固定 */

    @media screen and (min-width: 768px) {
      top: 10em;
      right: calc((100% - (840px + (var(--padding-inline) * 2))) / 2);
    }

  }

  &:has(.animate__animated)::before {
    opacity: 1;
    animation-name: treeSwaySettle;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    /* ここがポイント */
    animation-duration: 3s;
    /* 1往復にかける時間 */
  }

  &::after {
    content: "";
    display: block;
    width: 60%;
    aspect-ratio: 825/737;
    max-width: 413px;
    background: url(../img/img-caroucel.png) no-repeat center center / 100% auto;
    position: absolute;
    top: -8em;
    left: -1em;
    z-index: 1;
    opacity: 0;
    transition: opacity .3s;

    @media screen and (min-width: 480px) {
      width: 45%;
    }

    @media screen and (min-width: 768px) {
      width: 40%;
    }
  }

  &:has(.animate__animated)::after {
    animation-name: popIn;
    animation-duration: var(--animate-duration);
    animation-fill-mode: both;
    opacity: 1;
  }

  .inner {
    position: relative;
    z-index: 3;
  }

  .ttl {
    /* width: 100%; */
    width: calc(100% - (var(--padding-inline) * 2));
    margin-right: var(--padding-inline);
    margin-left: var(--padding-inline);

    font-size: 1.75em;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0;
    color: var(--primary-color);

    @media screen and (min-width: 1120px) {
      width: 100%;
      margin-inline: auto;
    }

  }

  .txt {
    /* width: 100%; */
    width: calc(100% - (var(--padding-inline) * 2));
    margin-right: var(--padding-inline);
    margin-left: var(--padding-inline);

    font-size: 1.25em;
    font-weight: 500;
    margin-top: 1.2em;

    @media screen and (min-width: 1120px) {
      width: 100%;
      margin-inline: auto;
    }


    +.ttl {
      margin-top: 2.28571429em;
    }
  }
}

.txt-list {
  /* width: 100%; */
  width: calc(100% - (var(--padding-inline) * 2));
  margin-right: var(--padding-inline);
  margin-left: var(--padding-inline);
  display: flex;
  flex-direction: column;
  gap: 1.2em;

  @media screen and (min-width: 1120px) {
    width: 100%;
    margin-inline: auto;
  }

}

.txt-list-item {
  width: 100%;
  padding-left: 16px;

  position: relative;

  &::before {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    background-color: var(--contrast-color);
    border-radius: 50%;
    position: absolute;
    top: 0.675em;
    left: 0;
  }
}

/*
 * faq
 */
.faq {
  width: 100%;
  padding-top: 6em;
  padding-bottom: 5em;
  position: relative;
  z-index: 2;

  @media screen and (min-width: 768px) {
    padding-block: 7.5em;
  }

  &::before {
    content: "";
    display: block;
    width: 28%;
    aspect-ratio: 197 / 149;
    max-width: 197px;
    background: url(../img/tree-faq1.svg) no-repeat center center / 100% auto;
    position: absolute;
    top: -2em;
    left: 0.5em;
    z-index: 2;
    opacity: 0;
    transition: opacity .3s;
    transform-origin: bottom center;
    /* 根本を軸に固定 */


    @media screen and (min-width: 768px) {
      /* left: calc(var(--padding-inline) * -1em); */
      left: calc((100% - (840px + (var(--padding-inline) * 2)))/2);
    }
  }

  &:has(.animate__animated)::before {
    opacity: 1;
    animation-name: treeSwaySettle;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    /* ここがポイント */
    animation-duration: 3s;
    /* 1往復にかける時間 */
  }

  &::after {
    content: "";
    display: block;
    width: calc(100vw - var(--padding-inline));
    height: 100%;
    max-width: calc(100% - ((100% - 1000px)/2));
    background-color: var(--base-color);
    border-radius: 5em 0 0 5em;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
  }

  .inner {
    position: relative;
    z-index: 3;

    &::before {
      content: "";
      display: block;
      width: 17%;
      aspect-ratio: 116 / 145;
      max-width: 116px;
      background: url(../img/tree-faq2.svg) no-repeat center center / 100% auto;
      position: absolute;
      top: 4em;
      right: 0;
      z-index: 2;
      opacity: 0;
      transition: opacity .3s;
      transform-origin: bottom center;
      /* 根本を軸に固定 */


      @media screen and (min-width: 768px) {
        top: 8em;
      }

      @media screen and (min-width: 960px) {
        top: 12em;
      }
    }

    &.animate__animated::before {
      opacity: 1;
      animation-name: treeSwaySettle;
      animation-timing-function: ease-in-out;
      animation-iteration-count: infinite;
      /* ここがポイント */
      animation-duration: 3s;
      /* 1往復にかける時間 */
    }


  }

  .main-ttl {
    width: calc(100% - (var(--padding-inline) * 2));
    margin-right: var(--padding-inline);
    margin-left: var(--padding-inline);

    @media screen and (min-width: 1120px) {
      width: 100%;
      margin-inline: auto;
    }

  }
}

.faq-list-container {
  width: calc(100% - (var(--padding-inline) * 2));
  margin-right: var(--padding-inline);
  margin-left: var(--padding-inline);

  display: flex;
  flex-direction: column;
  gap: 4em;

  @media screen and (min-width: 1120px) {
    width: 100%;
    margin-inline: auto;
  }
}

.faq-list-item {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.5em;
}

.faq-ttl {
  width: 100%;
  font-size: 1.75em;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0;
  padding-left: 20px;
  position: relative;

  &::before {
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    background-color: var(--primary-color);
    border-radius: 50%;
    position: absolute;
    top: 0.675em;
    left: 0;
  }
}

.faq-content {
  width: 100%;
  font-size: 1.25em;
  font-weight: 500;

}

/*
 * footer
 */
.main-footer {}

.bornelund {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  background-color: var(--base-color);
  border: 4px solid var(--accent-color);
  border-radius: 1em;
  padding: 2.5em 2em;
  margin-block: 5em;

  @media screen and (min-width: 768px) {
    padding: 2.5em 2.5em;
    align-items: center;
    margin-block: 7.5em;
  }

  .ttl {
    font-size: 1.5em;
    margin-bottom: 1em;
    line-height: 1.5;

    span {
      display: inline-block;
      font-size: 1.115em;
      font-family: var(--font-en);
      font-weight: 700;
      line-height: 1.11538462;
      vertical-align: middle;
      margin-right: 0.25em;
      letter-spacing: 0;
    }
  }

  .txt {
    margin-top: 2em;
    font-weight: 500;
    color: var(--accent-color);

    @media screen and (min-width: 768px) {
      margin-top: 0;
      width: calc(100% - 120px);
      padding-left: 2em;
    }

  }

  .desc {
    line-height: 1.875;
  }

  .img {
    aspect-ratio: 120/165;
    width: 120px;
    margin-inline: auto;
  }
}

.copyright {
  display: block;
  width: 100%;
  font-size: 0.75em;
  font-family: var(--font-en);
  font-weight: 400;
  text-align: center;
  padding-top: 1em;
  padding-bottom: 2.5rem;
}