@charset "UTF-8";
/*
Theme Name: theme name
Description: description
Author:yashibous
Author URI: https://yashibous.com
*/

:root {
  /*
   * ブレイクポイント
   */
  --breakpoint-tablet: 950px;
  --breakpoint-pc: 1280px;
  --fluid-max: 1440;
  --fluid-min: 350;
  /*
   * レイアウト
   */
  --layout-width-max: 750px;
  --layout-content-width-wide: var(--layout-width-max);
  --layout-content-width: var(--layout-width-max);
  --layout-content-width-narrow: 100%;
  --layout-header-height: 50px;
  /*
   * 余白
   */
  /* スペースプリセット */
  --space-preset-xs: clamp(10px, calc(12px + ((12 - 10) / (var(--fluid-max) - var(--fluid-min))) * (100vw - var(--fluid-min) * 1px)), 12px);
  --space-preset-s: clamp(16px, calc(18px + ((18 - 16) / (var(--fluid-max) - var(--fluid-min))) * (100vw - var(--fluid-min) * 1px)), 18px);
  --space-preset-m: clamp(20px, calc(30px + ((30 - 20) / (var(--fluid-max) - var(--fluid-min))) * (100vw - var(--fluid-min) * 1px)), 30px);
  --space-preset-l: clamp(30px, calc(50px + ((50 - 30) / (var(--fluid-max) - var(--fluid-min))) * (100vw - var(--fluid-min) * 1px)), 50px);
  --space-preset-xl: clamp(40px, calc(70px + ((70 - 40) / (var(--fluid-max) - var(--fluid-min))) * (100vw - var(--fluid-min) * 1px)), 70px);
  --space-preset-xxl: clamp(60px, calc(100px + ((100 - 60) / (var(--fluid-max) - var(--fluid-min))) * (100vw - var(--fluid-min) * 1px)), 100px);
  --space-block-gap: 2.4em;
  /* 基本のpadding */
  --content-padding-block: var(--space-preset-xl);
  --content-padding-inline: var(--space-preset-m);
  /*
   * タイポグラフィ
   */
  --font-size-s: clamp(10px, calc(12px + ((12 - 10) / (var(--fluid-max) - var(--fluid-min))) * (100vw - var(--fluid-min) * 1px)), 12px);
  --font-size-m: clamp(16px, calc(18px + ((18 - 16) / (var(--fluid-max) - var(--fluid-min))) * (100vw - var(--fluid-min) * 1px)), 18px);
  --font-size-l: clamp(22px, calc(22px + ((32 - 22) / (var(--fluid-max) - var(--fluid-min))) * (100vw - var(--fluid-min) * 1px)), 32px);
  --font-size-xl: clamp(36px, calc(22px + ((64 - 36) / (var(--fluid-max) - var(--fluid-min))) * (100vw - var(--fluid-min) * 1px)), 64px);
  --font-size-xxl: clamp(60px, calc(22px + ((120 - 60) / (var(--fluid-max) - var(--fluid-min))) * (100vw - var(--fluid-min) * 1px)), 120px);
  /*
   * カラーパレット
   */
  /* カラープリセット */
  --color-base: #f5f5f2;
  --color-contrast: #0f2b24;
  --color-primary: #6baf92;
  --color-primary-pale1: color-mix(in srgb, var(--color-primary) 50%, var(--color-base));
  --color-primary-pale2: color-mix(in srgb, var(--color-primary) 25%, var(--color-base));
  --color-secondary: #a8c6a1;
  --color-secondary-pale1: color-mix(in srgb, var(--color-secondary) 50%, var(--color-base));
  --color-secondary-pale2: color-mix(in srgb, var(--color-secondary) 25%, var(--color-base));
  --color-tertiary: #1b4d3e;
  --color-tertiary-pale1: color-mix(in srgb, var(--color-tertiary) 50%, var(--color-base));
  --color-tertiary-pale2: color-mix(in srgb, var(--color-tertiary) 25%, var(--color-base));
  --color-accent: #c8b273;
  --color-gray: #cccccc;
  --color-dark-gray: #777777;
  --color-light-gray: #f5f5f5;
  /* テキスト */
  --color-title: var(--color-contrast);
  --color-text: var(--color-contrast);
  --color-text-shadow: var(--color-gray);
  --color-hover: var(--color-secondary);
  /* 背景 */
  --color-bg-primary: var(--color-white);
  --color-bg-secondary: var(--color-gray);
  --color-bg-tertiary: var(--color-light-gray);
  --color-bg-header: var(--color-gray);
  --color-bg-footer: var(--color-dark-gray);
  --color-bg-fixed: var(--color-light-gray);
  --color-bg-cta: var(--color-secondary-pale2);
  /* マーカー */
  --color-marker: #ffc002aa;
  /*
   * z-index
   */
  --z-index-base: 100;
  --z-index-header: 1000;
  --z-index-fixed: 2000;
  --z-index-to-top: 3000;
  --z-index-overlay: 4000;
}

@media screen and (min-width: 950px) {
  :root {
    /*
    * レイアウト
    */
    --layout-width-max: 1920px;
    --layout-content-width-wide: 1440px;
    --layout-content-width: 1280px;
    --layout-content-width-narrow: 960px;
    --layout-header-height: 50px;
    --layout-header-height: 70px;
  }
}

body {
  font-family: "fot-tsukuardgothic-std", sans-serif;
  font-weight: 400;
  font-style: normal;
  line-height: 1.8;
  color: var(--color-contrast);
  background-image: url(../image/body-bg.webp);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  position: relative;
  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: min(640px,35vw);
    aspect-ratio: 615/494;
    background-image: url(../image/body-bg1.webp);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -1;
  }
  &::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: min(600px, 35vw);
    aspect-ratio: 756/489;

    background-image: url(../image/body-bg2.webp);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }
}
@media screen and (max-width: 949px) {
  body {
    &::before {
      width: min(500px,70vw);
      opacity: 0.4;
    }
    &::after {
      width: min(450px, 60vw);
    }
  }
}
img {
  display: block;
  width: 100%;
  height: auto;
}

.font-regular {
  font-family: "fot-tsukuardgothic-std", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.font-bold {
  font-family: "fot-tsukuardgothic-std", sans-serif;
  font-weight: 700;
  font-style: normal;
}

header {
  grid-area: header;
}
main {
  grid-area: main;
  height: 100%;
  overflow-y: auto;
}
footer {
  grid-area: footer;
}
h2,h3 {
  font-weight: bold;
  margin-top: 1em;
}
h1 {
  font-size: 2.5rem;
  font-weight: bold;
  line-height: 1.2;

  .sub1 {
    font-size: 1rem;
    display: block;
  }
  a {
    &:hover {
      text-decoration: none;
    }
  }
}
@media screen and (max-width: 949px) {
  h1 {
    font-size: 2rem;
    .sub1 {
      font-size: 0.875rem;
    }
  }
}
h2 {
  font-size: 2rem;
}
@media screen and (max-width: 949px) {
  h2 {
    font-size: 1.5rem;
  }
}
h3 {
  font-size: 1.25rem;
}
@media screen and (max-width: 949px) {
  h3 {
    font-size: 1rem;
  }
}
p,li {
  margin-top: 1rem;
  font-size: 1.125rem;
}
@media screen and (max-width: 949px) {
  p,li {
    margin-top: 0.3rem;
    font-size: 1rem;
  }
}
ul {
  list-style: none;
}
ol {
  list-style: none;
}
a {
  &:hover {
    text-decoration: underline;
  }
}
nav {
  margin-top: 2rem;
}

@media screen and (min-width: 950px) {
  .sp {
    display: none;
  }
}
@media screen and (max-width: 949px) {
  .pc {
    display: none;
  }
}


/********************
 * レイアウト
 ********************/
.l-layout {
  display: grid;
  grid-template-areas:
    "header main"
    "footer footer";
    place-content: center;
    place-items: flex-start;
    gap: 2rem;
  grid-template-columns: min(30vw, 300px) 1fr;
  grid-template-rows: 1fr 3rem;
  max-width: calc(1200px + 3rem);
  height: 100dvh;
  overflow: hidden;
  padding: 5rem 3rem 0;
  margin-inline: auto;
}
@media screen and (max-width: 949px) {
  .l-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "header"
      "main"
      "footer";
    gap: 0;
    padding: 0.5rem;
  }
}
.l-header {
}
@media screen and (max-width: 949px) {
  .l-header {
    width: 100%;
    padding: 1rem;
    height: max-content;
    max-height: 5rem;
    overflow: hidden;
    transition: max-height 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .l-header.is-nav-open {
    max-height: 100dvh;
  }
}
.l-header__inner {
  position: relative;
}
.l-header__title {
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 1))
  drop-shadow(0 0 10px rgba(255, 255, 255, 1))
  drop-shadow(0 0 10px rgba(255, 255, 255, 1))
}
.l-header__nav {
  position: relative;
  z-index: 1;
  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-base);
    filter: blur(7px);
    z-index: -1;
    opacity: 0.7;
  }
}
@media screen and (max-width: 949px) {
  .l-header__nav {
    &::before {
      filter: blur(7px);
      z-index: -1;
      opacity: 0.3;
    }
  }
}
.l-header__nav-link {
  position: relative;
  display: inline-block;
  text-decoration: none;
  line-height: 1.4;

  &::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: var(--color-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  &:hover,
  &:focus-visible {
    text-decoration: none;
  }

  &:hover::after,
  &:focus-visible::after {
    transform: scaleX(1);
  }
}

/* current表示（JSが aria-current="page" を付与） */
.l-header__nav-link[aria-current="page"] {
  font-weight: 700;
}

.l-header__nav-link[aria-current="page"]::after {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .l-header__nav-link::after {
    transition: none;
  }
}

.l-header__nav-toggle {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  width: 3rem;
  height: 3rem;
  background-color: transparent;
  border: none;
  cursor: pointer;
  z-index: 1000;
  padding-inline: 0.5rem;

  span.l-header__nav-toggle-line {
    position: absolute;
    left: 0.5rem;
    right: 0.5rem;
    height: 2px;
    background-color: var(--color-contrast);
    border-radius: 2px;
    top: 50%;
    transform-origin: center;
    transition: transform 0.75s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.6s ease;
  }
  .l-header__nav-toggle-text {
    position: absolute;
    bottom: -7px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 0.5em;
    padding: 0.5em;
    font-size: 0.6rem;
    font-weight: 700;
  }
}
.l-header__nav-toggle-line:nth-child(1) {
  transform: translateY(calc(-1 * 0.5rem));
}
.l-header__nav-toggle-line:nth-child(2) {
  transform: translateY(0);
}
.l-header__nav-toggle-line:nth-child(3) {
  transform: translateY(0.5rem);
}

.l-header.is-nav-open .l-header__nav-toggle-line:nth-child(1) {
  transform: translateY(0) rotate(45deg);
}
.l-header.is-nav-open .l-header__nav-toggle-line:nth-child(2) {
  opacity: 0;
}
.l-header.is-nav-open .l-header__nav-toggle-line:nth-child(3) {
  transform: translateY(0) rotate(-45deg);
}

@media screen and (max-width: 949px) {
  .l-header__nav-toggle {
    display: block;
  }
}

.l-section {
  height: 100%;
}
.l-main {
  background-color: color-mix(in srgb, #a8c6a1 40%, transparent);
  border-radius: 1rem;
  padding: 2rem;
  width: 100%;
}
@media screen and (max-width: 949px) {
  .l-main {
    padding: 1rem;
    max-width: 640px;
    margin-inline: auto;
  }
}
.l-main__contents {
  height: 100%;
  overflow: hidden;
}
.l-section__inner {
  height: 100%;
}

.l-section__contents {
  height: 100%;
}

.l-footer__copyright-text {
  margin-top: 0;
  font-size: 0.875rem;
}

/********************
 * コンポーネント
 ********************/
.c-title {
  font-size: 1.5rem;
  line-height: 1.4;
  font-weight: bold;
  margin-top: 0;
  position: sticky;
  top: 0;
  left: 0;
}
@media screen and (max-width: 949px) {
  .c-title {
    font-size: 1.125rem;
    line-height: 1.3;
  }
}
.c-divider {
  color: var(--color-accent);
}
.c-contents {
  height: calc(100% - 1.5em * 1.4);
  overflow: auto;
  padding-block: 1rem;;
}

.c-list {
  margin-top: 1rem;
  padding-left: 1.2em;
  font-size: 1rem;
  li {
    margin-top: 0.1rem;

    position: relative;
    &::before {
      position: absolute;
      top: 0;
      left: 0;
    }
  }
}
.c-list[data-style="bullet"] {
  li {
    display: flex;
    align-items: flex-start;
    padding-left: 1.2em;
    &::before {
      content: "・";
    }
  }
}
.c-list[data-style="number"] {
  li {
    counter-increment: list-item;
    padding-left: 1.2em;
    &::before {
      content: counter(list-item) ".";
      margin-right: 0.5rem;
      font-weight: 700;
      font-size: inherit;
    }
  }
}
@media screen and (max-width: 949px) {
  .c-list {
    padding-left: 0;
    li {
      margin-top: 0.5em;
      font-size: 1rem;
      line-height: 1.3;
    }
  }
  .c-list[data-style="number"] {
    li {
      padding-left: 1em;
    }
  }
}
.c-button {
  display: block;
  font-size:1.125rem;
  width: fit-content;
  padding: 0.5em 1em;
  border-radius: 0.5em;
  background-color: var(--color-base);
  font-weight: 700;
  border-radius: 0.4em;
  border: 1px solid var(--color-contrast);
  text-decoration: none;
  transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
  margin-block: 1rem;
  box-shadow: 0.3em 0.3em 1em color-mix(in srgb, var(--color-contrast) 20%, transparent);
  &:hover {
    /* background-color: var(--color-contrast); */
    /* color: var(--color-secondary-pale1); */
    text-decoration: none;
    box-shadow: 0.3em 0.3em 1em color-mix(in srgb, var(--color-secondary-pale1) 5%, transparent);
    transform: translateY(0.1em);
  }
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  &::after {
    content: "▶";
    font-size: 0.5em;
    line-height: 1;
    width: 1.2rem;
    height: 1.2rem;
    color: var(--color-contrast);
    background-color: var(--color-base);
    border: 1px solid var(--color-contrast);
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 0.1em;
  }
}
/********************
 * section 切り替えアニメーション
 ********************/
@keyframes everleaf-section-enter {
  from {
    opacity: 0;
    transform: translateY(0.5rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.l-main__contents > section.is-section-enter .c-title {
  animation: everleaf-section-enter 1.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.l-main__contents > section.is-section-enter .c-contents {
  animation: everleaf-section-enter 1.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: 120ms;
}

@media (prefers-reduced-motion: reduce) {
  .l-main__contents > section.is-section-enter .c-title,
  .l-main__contents > section.is-section-enter .c-contents {
    animation: none;
  }
}