/* stylelint-disable selector-class-pattern */

/* Button Main */
.button-link,
.button-submit,
.button-return {
  --base-radius: var(--plus-number-08);

  position: relative;
  z-index: 0;
  display: flex;
  flex-flow: row wrap;
  gap: var(--plus-number-08);
  align-items: center;
  justify-content: center;
  min-width: calc(var(--plus-number-24) * 10);
  height: var(--percentage-100);
  min-height: calc(var(--plus-number-40) + var(--plus-number-04));
  padding: var(--plus-number-08) var(--plus-number-24);
  font-size: var(--fs-18);
  font-weight: var(--jp-bold);
  line-height: var(--lh-100);
  color: var(--text-disabled);
  cursor: default;
  background: var(--bg-disabled);
  border: var(--bd-disabled);
  border-radius: var(--base-radius);
  transition: all 0.4s ease-in-out;
}

.button-link.separate::after,
.button-link.download::after,
.button-link.outside::after,
.button-link.arrow-right::after {
  background-color: var(--text-disabled);
  transition: background-color 0.4s ease-in-out;
}

.button-link:where(:any-link, :enabled, summary) {
  color: var(--text-body);
  background: var(--gd-main);
  border: none;
}

.button-submit:where(:any-link, :enabled, summary) {
  color: var(--text-onfill);
  background: var(--gd-main);
  background-size: 200% auto;
  border: none;
  transition-timing-function: ease-in;
}

.button-return:where(:any-link, :enabled, summary) {
  color: var(--text-brand);
  background-color: var(--bg-primary);
  border: var(--bd-brand);
}

.button-link:where(:any-link, :enabled, summary)::before {
  --sub-padding: var(--plus-number-02);

  position: absolute;
  inset: var(--sub-padding);
  z-index: -1;
  display: block;
  content: "";
  background-color: var(--bg-primary);
  border-radius: calc(var(--base-radius) - var(--sub-padding));
  transition: all 0.4s ease-in-out;
}

.button-link:where(:any-link, :enabled, summary).separate::after,
.button-link:where(:any-link, :enabled, summary).download::after,
.button-link:where(:any-link, :enabled, summary).outside::after,
.button-link:where(:any-link, :enabled, summary).arrow-right::after {
  background-color: var(--bg-onfill);
  transition: all 0.4s ease-in-out;
}

/* thesky */
.button-link:where(:any-link, :enabled, summary).thesky {
  color: var(--text-thesky);
  background: var(--gd-thesky);
}

.button-link:where(:any-link, :enabled, summary).thesky.separate::after,
.button-link:where(:any-link, :enabled, summary).thesky.download::after,
.button-link:where(:any-link, :enabled, summary).thesky.outside::after,
.button-link:where(:any-link, :enabled, summary).thesky.arrow-right::after {
  background-color: var(--bg-thesky);
}

/* nature */
.button-link:where(:any-link, :enabled, summary).nature {
  color: var(--text-nature);
  background: var(--gd-nature);
}

.button-link:where(:any-link, :enabled, summary).nature.separate::after,
.button-link:where(:any-link, :enabled, summary).nature.download::after,
.button-link:where(:any-link, :enabled, summary).nature.outside::after,
.button-link:where(:any-link, :enabled, summary).nature.arrow-right::after {
  background-color: var(--bg-nature);
}

/* sun */
.button-link:where(:any-link, :enabled, summary).sun {
  color: var(--text-sun);
  background: var(--gd-sun);
}

.button-link:where(:any-link, :enabled, summary).sun.separate::after,
.button-link:where(:any-link, :enabled, summary).sun.download::after,
.button-link:where(:any-link, :enabled, summary).sun.outside::after,
.button-link:where(:any-link, :enabled, summary).sun.arrow-right::after {
  background-color: var(--bg-sun);
}

@media (hover: hover) {
  .button-link:where(:any-link, :enabled, summary):hover {
    color: var(--text-onfill);
    background: var(--button-gd-main);
  }

  .button-submit:where(:any-link, :enabled, summary):hover {
    background-position: right center;
  }

  .button-link:where(:any-link, :enabled, summary):hover::before {
    --sub-padding: var(--plus-number-04);

    inset: var(--sub-padding);
    background: var(--gd-main);
    background-size: 200% auto;
    transition-timing-function: ease-in;
  }

  .button-link:where(:any-link, :enabled, summary):hover.separate::after,
  .button-link:where(:any-link, :enabled, summary):hover.download::after,
  .button-link:where(:any-link, :enabled, summary):hover.outside::after,
  .button-link:where(:any-link, :enabled, summary):hover.arrow-right::after,
  .button-link:where(:any-link, :enabled, summary):active.separate::after,
  .button-link:where(:any-link, :enabled, summary):active.download::after,
  .button-link:where(:any-link, :enabled, summary):active.outside::after,
  .button-link:where(:any-link, :enabled, summary):active.arrow-right::after {
    background-color: var(--bg-primary);
  }

  .button-link:where(:any-link, :enabled, summary):active {
    color: var(--text-onfill);
    transform: scale(0.95);
  }

  .button-submit:where(:any-link, :enabled, summary):active {
    background-position: right center;
    transform: scale(0.95);
  }

  .button-link:where(:any-link, :enabled, summary):active::before {
    --sub-padding: 0;

    inset: var(--sub-padding);
    background: var(--gd-main);
    background-position: right center;
    border-radius: var(--base-radius);
    transition-timing-function: ease-in;
  }

  /* thesky */
  .button-link:where(:any-link, :enabled, summary):hover.thesky {
    background: var(--button-gd-thesky);
  }

  .button-link:where(:any-link, :enabled, summary):hover.thesky::before,
  .button-link:where(:any-link, :enabled, summary):active.thesky::before {
    background: var(--gd-thesky);
  }

  /* nature */
  .button-link:where(:any-link, :enabled, summary):hover.nature {
    background: var(--button-gd-nature);
  }

  .button-link:where(:any-link, :enabled, summary):hover.nature::before,
  .button-link:where(:any-link, :enabled, summary):active.nature::before {
    background: var(--gd-nature);
  }

  /* sun */
  .button-link:where(:any-link, :enabled, summary):hover.sun {
    background: var(--button-gd-sun);
  }

  .button-link:where(:any-link, :enabled, summary):hover.sun::before,
  .button-link:where(:any-link, :enabled, summary):active.sun::before {
    background: var(--gd-sun);
  }
}

/* Animation */

/* ハンバーガー */
.hamburger {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: var(--plus-number-64);
  height: var(--plus-number-64);
  cursor: pointer;
  background: var(--gd-main);
  border-radius: var(--percentage-50);
}

.hamburger span {
  position: absolute;
  right: 15px;
  display: block;
  width: var(--plus-number-32);
  height: var(--plus-number-02);
  background-color: var(--color-white);
  border-radius: var(--radius-01);
  transition: all 0.4s;
}

.hamburger span:nth-of-type(1) {
  top: 19px;
  animation: hamburger-open01 0.6s forwards;
  animation-duration: 600ms;
  animation-timing-function: cubic-bezier(0.5, -1, 0.5, 2);
}

@keyframes hamburger-open01 {
  0% {
    transform: translateY(12px) rotate(-45deg);
  }

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

.hamburger span:nth-of-type(2) {
  width: calc(calc(var(--plus-number-32) / 3) * 2);
}

.hamburger span:nth-of-type(3) {
  bottom: 19px;
  animation: hamburger-open02 0.6s forwards;
  animation-duration: 600ms;
  animation-timing-function: cubic-bezier(0.5, -1, 0.5, 2);
}

@keyframes hamburger-open02 {
  0% {
    width: var(--plus-number-32);
    transform: translateY(-12px) rotate(45deg);
  }

  100% {
    width: calc(var(--plus-number-32) / 3);
    transform: translateY(0) rotate(0);
  }
}

.hamburger.hamburger-tap span {
  right: 16px;
}

.hamburger.hamburger-tap span:nth-of-type(1) {
  animation: hamburger-close01 0.6s forwards;
  animation-duration: 600ms;
  animation-timing-function: cubic-bezier(0.5, -1, 0.5, 2);
}

@keyframes hamburger-close01 {
  0% {
    transform: translateY(0) rotate(0);
  }

  100% {
    transform: translateY(12px) rotate(-45deg);
  }
}

.hamburger.hamburger-tap span:nth-of-type(2) {
  right: var(--percentage-50);
  width: 0;
  transform: translateX(-50%) rotate(0deg);
}

.hamburger.hamburger-tap span:nth-of-type(3) {
  animation: hamburger-close03 0.6s forwards;
  animation-duration: 600ms;
  animation-timing-function: cubic-bezier(0.5, -1, 0.5, 2);
}

@keyframes hamburger-close03 {
  0% {
    width: calc(var(--plus-number-32) / 3);
    transform: translateY(0) rotate(0);
  }

  100% {
    width: var(--plus-number-32);
    transform: translateY(-12px) rotate(45deg);
  }
}

/* aタグのリンク */
.a-tag-link:where(:any-link, :enabled, summary),
.notice-list:where(:any-link, :enabled, summary) > h3,
#notice-article p > a:where(:any-link, :enabled, summary) {
  color: var(--text-link-default);
  text-decoration-line: underline;
  transition: color 0.4s ease-in;
}

.a-tag-link:where(:any-link, :enabled, summary).separate,
.a-tag-link:where(:any-link, :enabled, summary).outside,
.a-tag-link:where(:any-link, :enabled, summary).pdf {
  display: inline;
}

.a-tag-link:where(:any-link, :enabled, summary).separate::after,
.a-tag-link:where(:any-link, :enabled, summary).outside::after,
.a-tag-link:where(:any-link, :enabled, summary).pdf::after {
  margin: 0 var(--plus-number-04);
  background-color: var(--text-link-default);
  transition: background-color 0.4s ease-in;
}

.a-tag-link:where(:any-link, :enabled, summary):visited,
.notice-list:where(:any-link, :enabled, summary):visited > h3,
#notice-article p > a:where(:any-link, :enabled, summary):visited {
  color: var(--text-link-visited);
}

.a-tag-link:where(:any-link, :enabled, summary):visited.separate::after,
.a-tag-link:where(:any-link, :enabled, summary):visited.outside::after,
.a-tag-link:where(:any-link, :enabled, summary):visited.pdf::after {
  background-color: var(--text-link-visited);
}

@media (hover: hover) {
  .a-tag-link:where(:any-link, :enabled, summary):hover,
  .a-tag-link:where(:any-link, :enabled, summary):active,
  .notice-list:where(:any-link, :enabled, summary):hover > h3,
  .notice-list:where(:any-link, :enabled, summary):active > h3,
  #notice-article p > a:where(:any-link, :enabled, summary):hover,
  #notice-article p > a:where(:any-link, :enabled, summary):active {
    color: var(--text-link-hover);
  }

  .a-tag-link:where(:any-link, :enabled, summary):hover.separate::after,
  .a-tag-link:where(:any-link, :enabled, summary):hover.outside::after,
  .a-tag-link:where(:any-link, :enabled, summary):hover.pdf::after,
  .a-tag-link:where(:any-link, :enabled, summary):active.separate::after,
  .a-tag-link:where(:any-link, :enabled, summary):active.outside::after,
  .a-tag-link:where(:any-link, :enabled, summary):active.pdf::after {
    background-color: var(--text-link-hover);
  }
}

/* 「splide.js」用スタイル「.splide-01piece」 */
.style-slider01 {
  position: absolute;
  bottom: calc(var(--mins-number-80) + var(--mins-number-24));
  left: var(--percentage-50);
  width: calc(var(--percentage-100) - var(--plus-number-64));
  filter: drop-shadow(0 4px 16px rgb(0 0 0 / 16%));
  transform: translate(-50%, 0);
}

.style-slider01 .splide__slide picture {
  filter: grayscale(1);
  transition: all 0.6s;
  transform: scale(0.4) translateY(10%);
}

.style-slider01 .splide__slide.is-prev picture,
.style-slider01 .splide__slide.is-next picture {
  transform: scale(0.8) translateY(10%);
}

.style-slider01 .splide__slide.is-active picture {
  z-index: 1;
  filter: grayscale(0);
  transform: scale(1);
}

@media (width <= 810px) {
  .style-slider01 {
    width: calc(var(--percentage-100) - calc(var(--plus-number-64) * 2));
  }
}

@media (width <= 520px) {
  .style-slider01 {
    width: calc(var(--percentage-100) - calc(var(--plus-number-32) * 2));
  }
}

.style-slider02 {
  position: absolute;
  top: var(--percentage-50);
  left: var(--percentage-50);
  z-index: 1;
  width: var(--percentage-100);
  transform: translate(-50%, -50%);
}

.style-slider02 .splide__slide {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  height: calc(100lvh / 3);
}

/* お遊び */
.not-found,
.not-article {
  display: flex;
  gap: var(--plus-number-16);
  justify-content: center;
}

.not-found::before,
.not-found::after,
.not-article::before,
.not-article::after {
  height: var(--plus-number-40);
  aspect-ratio: 1;
  content: "";
  background: radial-gradient(farthest-side, rgb(62 71 70) 95%, rgb(62 71 70 / 0%)) 35% 35% / var(--plus-number-08) var(--plus-number-08) no-repeat var(--color-white);
  border: var(--aircraft-100) solid var(--plus-number-02);
  border-radius: var(--percentage-50);
}

.not-found::before,
.not-found::after {
  animation: not-found 3s infinite;
}

@keyframes not-found {
  0%,
  11% {
    background-position: 35% 35%;
  }

  14%,
  36% {
    background-position: 65% 35%;
  }

  38%,
  61% {
    background-position: 65% 65%;
  }

  64%,
  86% {
    background-position: 35% 65%;
  }

  88%,
  100% {
    background-position: 35% 35%;
  }
}

.not-article::before,
.not-article::after {
  transform: scaleX(var(--s, 1)) rotate(0deg);
  animation: not-article 1s infinite linear;
}

.not-article::after {
  --s: -1;

  animation-delay: -0.1s;
}

@keyframes not-article {
  100% {
    transform: scaleX(var(--s, 1)) rotate(360deg);
  }
}