html {
  scroll-behavior: smooth;
}


@media (max-width: 781px) {
  :root :where( .pc-only ){
    display: none;
  }

}

@media (min-width: 782px) {
  :root :where( .sp-only ){
    display: none;
  }
}


:root :where( .nav-pc > li > a > span ){
  padding-inline:3px;
  padding-bottom: 5px; 
  background-image: linear-gradient(var(--wp--preset--color--body-link), var(--wp--preset--color--body-link));
  background-repeat: no-repeat;
  background-position: bottom right;
  background-size: 0 2px;
  transition: background-size 0.3s;
}

:root :where( .nav-pc > li > a:hover > span ){
  color: var(--wp--preset--color--body-link);
  background-position: bottom left;
  background-size: 100% 2px;
}

:root :where( .nav-sp ){
  width: 100%;

  & li {
    display: block flex;
    width: 100%;
    border-bottom: 1px solid #ccc;
    background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNjY2MiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0iaWNvbiBpY29uLXRhYmxlciBpY29ucy10YWJsZXItb3V0bGluZSBpY29uLXRhYmxlci1jaXJjbGUtYXJyb3ctcmlnaHQiPgk8cGF0aCBzdHJva2U9Im5vbmUiIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiIC8+CTxwYXRoIGQ9Ik0xMiAzYTkgOSAwIDEgMCAwIDE4YTkgOSAwIDAgMCAwIC0xOCIgLz4JPHBhdGggZD0iTTE2IDEybC00IC00IiAvPgk8cGF0aCBkPSJNMTYgMTJoLTgiIC8+CTxwYXRoIGQ9Ik0xMiAxNmw0IC00IiAvPjwvc3ZnPg==")
      94% 50%/ 20px no-repeat;
  }

  & a {
    display: block;
    width: 100%;
    padding-block: 16px;
    padding-inline: 8px;
    
  }
}

@media (max-width: 781px) {

  :root :where(.future-slide .swiper-wrapper ){
    transition-timing-function: linear;
    gap: 12px !important;
  }

  :root :where(.future-slide .swiper-slide img ){
    height: auto;
    width: 100%;
  }
}



:root :where(.section){
  position: relative;
  padding-top: 4.5% !important;

  @media (min-width: 782px) {
    padding-top: 2.5% !important;
  }

  @media (min-width: 993px) {
    background-repeat: no-repeat;
    background-position: calc(50% + 480px) 50%, calc(50% - 480px) 50%;
  }

  @media (max-width: 781px) {
    background-repeat: no-repeat;
    background-position: 50% 45px, 50% calc(100% - 20px);
    background-size: 375px;
  }

  &::before{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 0;
    padding-top: 4.5%;
    mask: url(../images/section-line.svg) 0% 0% / contain repeat-x;
    -webkit-mask: url(../images/section-line.svg) 0% 0% / contain repeat-x;
    content: "";

    @media (min-width: 782px) {
      padding-top: 2.5%;
    }
  } 
}

:root :where(.section.survival){
  &::before{
    background-color: var(--wp--preset--color--body-background);
  }

  @media (min-width: 993px) {
    background-image: url(../images/survival-bg-pc-1.webp), url(../images/survival-bg-pc-2.webp);
  }

  @media (max-width: 781px) {
    background-image: url(../images/survival-bg-sp-1.webp), url(../images/survival-bg-sp-2.webp);
  }
}

:root :where(.section.camping){
  &::before{
    background-color: var(--wp--preset--color--theme-bg-red);
  }

  @media (min-width: 993px) {
    background-image: url(../images/camping-bg-pc-1.webp), url(../images/camping-bg-pc-2.webp);
  }

  @media (max-width: 781px) {
    background-image: url(../images/camping-bg-sp-1.webp), url(../images/camping-bg-sp-2.webp);
  }
}

:root :where(.section.soba){
  &::before{
    background-color: var(--wp--preset--color--theme-bg-green);
  }

  @media (min-width: 993px) {
    background-image: url(../images/soba-bg-pc-1.webp), url(../images/soba-bg-pc-2.webp);
  }

  @media (max-width: 781px) {
    background-image: url(../images/soba-bg-sp-1.webp), url(../images/soba-bg-sp-2.webp);
  }
}

:root :where(.section.utilize){
  &::before{
    background-color: var(--wp--preset--color--theme-bg-blue);
  }
  @media (min-width: 993px) {
    background-image: url(../images/utilize-bg-pc-1.webp), url(../images/utilize-bg-pc-2.webp);
  }

  @media (max-width: 781px) {
    background-image: url(../images/utilize-bg-sp-1.webp), url(../images/utilize-bg-sp-2.webp);
  }
}

:root :where(.section.sns){
  &::before{
    background-color: var(--wp--preset--color--theme-bg-green);
  }
}

:root :where(.section.access){
  &::before{
    background-color: var(--wp--preset--color--theme-bg-red);
  }
}

.copy-email{
  display: flex;
  align-items: center;
  gap: 2px;

  padding: 6px 8px;

  border: none;
  border-radius: 4px;

  background-color: var(--wp--preset--color--theme-base-blue);
  color: var(--wp--preset--color--white);

  font-size: 1rem;

}