@charset "utf-8";

@import url("_reset.css");
@import url("_variables.css");


/** LP 2026 fukuramase */

html{
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body{
  width: 100%;
  margin: 0;
  /* background-color: var(--color-white); */

  background-color: #e8d432;
  background-image: radial-gradient(circle, #eaab2a 2px, transparent 2px), radial-gradient(circle, #eaab2a 2px, transparent 2px);
  background-position: 0 0, 4px 7px;
  background-size: 8px 14px;

  color: var(--text-01, #292929);
  font-family: "Poppins", "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variant-numeric: tabular-nums;
  font-size: 16px;
  overflow-x: hidden;
}

/* common color ======== */
.dots01{
  background-color: #e8cf31;
  background-image: radial-gradient(circle, #eaab2a 2px, transparent 2px), radial-gradient(circle, #eaab2a 2px, transparent 2px);
  background-position: 0 0, 4px 7px;
  background-size: 8px 14px;
}
.dots02{
  background-color: #00b473;
  background-image: radial-gradient(circle, #24ce91 2px, transparent 2px), radial-gradient(circle, #24ce91 2px, transparent 2px);
  background-position: 0 0, 4px 7px;
  background-size: 8px 14px;
}
.dots03{
  background-color: #59c0e6;
  background-image: radial-gradient(circle, #73d2f5 2px, transparent 2px), radial-gradient(circle, #73d2f5 2px, transparent 2px);
  background-position: 0 0, 4px 7px;
  background-size: 8px 14px;
}

/* header ======== */
.l-header{
  position: relative;
  & .l-header__inner{
    overflow: hidden;
    position: relative;
    /* top: 5px; */
    z-index: 2;
    @media not all and (max-width: 840px) {
      width: calc(100% - 20px - 20px);
      max-width: 1280px;
      margin-inline: auto;
      aspect-ratio: 1280/780;
    }
    @media (max-width: 840px) {
      width: 100%;
      aspect-ratio: 375/463;
    }

    /* mv */
    & .c-mv.--animation{
      position: absolute;
      inset: 0;
      margin: auto;
      & img{
        width: 100%
      };
      &.--01{
        opacity: 0;
        translate: 0 100px;
        transition: 
          opacity 0.3s 1s cubic-bezier(0.4,0.4,0,1),
          translate 0.3s 1s cubic-bezier(0.4,0.4,0,1);
        @media not all and (max-width: 840px) {
        }
        @media (max-width: 840px) {
        }
      }
      &.--02{
        opacity: 0;
        translate: 0 -20px;
        rotate: -20deg;
        transition: 
          opacity 1s 1.5s cubic-bezier(0.4,0.4,0,1),
          rotate 1s 1.5s cubic-bezier(0.4,0.4,0,1),
          translate 1s 1.5s cubic-bezier(0.4,0.4,0,1);
        @media not all and (max-width: 840px) {
        }
        @media (max-width: 840px) {
        }
      }
      &.--03{
        opacity: 0;
        translate: -50px 0;
        rotate: 20deg;
        transition: 
          opacity 1s 1.9s cubic-bezier(0.4,0.4,0,1),
          rotate 1s 1.9s cubic-bezier(0.4,0.4,0,1),
          translate 1s 1.9s cubic-bezier(0.4,0.4,0,1);
        @media not all and (max-width: 840px) {
        }
        @media (max-width: 840px) {
        }
      }
      &.--04{
        opacity: 0;
        translate: -100px 100px;
        transition: 
          opacity 2s 1.7s cubic-bezier(0.4,0.4,0,1),
          translate 2s 1.7s cubic-bezier(0.4,0.4,0,1);
        @media not all and (max-width: 840px) {
        }
        @media (max-width: 840px) {
        }
      }
      &.--05{
        opacity: 0;
        translate: 200px 200px;
        rotate: -20deg;
        transition: 
          opacity 2s 2.1s cubic-bezier(0.4,0.4,0,1),
          rotate 2s 2.1s cubic-bezier(0.4,0.4,0,1),
          translate 2s 2.1s cubic-bezier(0.4,0.4,0,1);
        @media not all and (max-width: 840px) {
        }
        @media (max-width: 840px) {
        }
      }
      &.--06{
        opacity: 0;
        translate: 200px 100px;
        transition: 
          opacity 2s 2.5s cubic-bezier(0.4,0.4,0,1),
          translate 2s 2.5s cubic-bezier(0.4,0.4,0,1);
        @media not all and (max-width: 840px) {
        }
        @media (max-width: 840px) {
        }
      }
      &.--07{
        opacity: 0;
        transform: scale(0.8);
        transition: 
          opacity 2s 3s cubic-bezier(0.42,-0.64,0.71,3.42),
          transform 2s 3s cubic-bezier(0.42,-0.64,0.71,3.42);
        @media not all and (max-width: 840px) {
        }
        @media (max-width: 840px) {
        }
      }
    } /* mv */
  }

  /* line */
  & .c-deco.--header.--line{
    display: block;
    width: 0;
    background-color: #5dabbb;
    opacity: 0;
    position: absolute;
    left: 0;
    z-index: 2;
    &.--01{
      height: calc((280px / 3) * 1);
      bottom: calc((280px / 3) * -1);
      transition: 
        width 1s 0.5s ease-in-out,
        opacity 1s 0.5s ease-in-out;
    }
    &.--02{
      height: calc((280px / 3) * 1);
      bottom: calc((280px / 3) * -2);
      transition: 
        width 1s 0.65s ease-in-out,
        opacity 1s 0.65s ease-in-out;
    }
    &.--03{
      height: calc((280px / 3) * 2);
      bottom: calc((280px / 3) * -4);
      transition: 
        width 1s 1s ease-in-out,
        opacity 1s 1s ease-in-out;
    }
  }

  /* is-active */
  &.is-active{
    /* mv */
    & .c-mv.--animation{
      &.--01{
        opacity: 1;
        translate: 0 0;
        @media not all and (max-width: 840px) {
        }
        @media (max-width: 840px) {
        }
      }
      &.--02{
        opacity: 1;
        translate: 0 0;
        rotate: 0deg;
        @media not all and (max-width: 840px) {
        }
        @media (max-width: 840px) {
        }
      }
      &.--03{
        opacity: 1;
        translate: 0 0;
        rotate: 0deg;
        @media not all and (max-width: 840px) {
        }
        @media (max-width: 840px) {
        }
      }
      &.--04{
        opacity: 1;
        translate: 0 0;
        @media not all and (max-width: 840px) {
        }
        @media (max-width: 840px) {
        }
      }
      &.--05{
        opacity: 1;
        translate: 0 0;
        rotate: 0deg;
        @media not all and (max-width: 840px) {
        }
        @media (max-width: 840px) {
        }
      }
      &.--06{
        opacity: 1;
        translate: 0 0;
        @media not all and (max-width: 840px) {
        }
        @media (max-width: 840px) {
        }
      }
      &.--07{
        opacity: 1;
        transform: scale(1);
        @media not all and (max-width: 840px) {
        }
        @media (max-width: 840px) {
        }
      }
    }
    /* line */
    & .c-deco.--header.--line{
      &.--01{
        opacity: 1;
        width: 100%;
      }
      &.--02{
        opacity: 1;
        width: 100%;
      }
      &.--03{
        opacity: 1;
        width: 100%;
      }
    }
    @media not all and (max-width: 840px) {
      
    } /* pc */
    @media (max-width: 840px) {
    } /* sp */
  }
} /* header */

/* h1 ======== */
h1{
  display: grid;
  grid-template-rows: 1fr;
  width: calc(100% - 20px - 20px);
  max-width: 1280px;
  position: absolute;
  inset: 0;
  margin: 0 auto auto;
  z-index: 50;
  @media not all and (max-width: 840px) {
    aspect-ratio: 1280/985;
    top: 100px;
  }
  @media (max-width: 840px) {
    aspect-ratio: 375/463;
    top: 50px;
  }
  & picture{
    position: absolute;
    inset: 0;
    margin: auto;
    &.--01{
      @media not all and (max-width: 840px) {
        opacity: 0;
        translate: 0 -50px;
        transition: 
          opacity 3s 3.5s cubic-bezier(0.4,0.4,0,1),
          translate 3s 3.5s cubic-bezier(0.4,0.4,0,1);
        &.is-active{
          opacity: 1;
          translate: 0 0;
        }
      }
      @media (max-width: 840px) {
        display: none;
      }
    }
    &.--02{
      opacity: 0;
      transform: scale(0.8);
      transition: 
        opacity 3s 3s cubic-bezier(0.74,-0.75,0.28,1.64),
        transform 3s 3s cubic-bezier(0.74,-0.75,0.28,1.64);
      &.is-active{
        opacity: 1;
        transform: scale(1);
      }
    }
  }
}

/* main ======== */
.l-main{
  position: relative;
  z-index: 5;
  opacity: 0;
  translate: 0 60px;
  transition: 
    opacity 1s 4s cubic-bezier(0.4,0.4,0,1),
    translate 1s 4s cubic-bezier(0.4,0.4,0,1);
  &.is-active{
    opacity: 1;
    translate: 0 0;
  }
  /* catch */
  & section.p-catch{
    padding-block-start: clamp(3.125rem, 1.83rem + 5.52vw, 6.25rem); /* 50px 100px */
    padding-block-end: 50px;
    position: relative;
    /* overflow-x: hidden; */
    & .p-catch__inner{
      display: grid;
      /* width: calc(100% - 20px - 20px); */
      width: calc(100% - calc((170 / 1280) * 100vw) - calc((170 / 1280) * 100vw));
      max-width: 1040px;
      margin-block-start: clamp(2.75rem, 1.75rem + 5vw, 5.5rem); /* 44px 88px */
      margin-inline: auto;
      position: relative;
      top: 30px;
      z-index: 20;
      @media not all and (max-width: 840px) {
        grid-template-columns: repeat(2, 1fr);
      }
      @media (max-width: 840px) {
        grid-template-columns: 1fr;
        width: calc(100% - 20px - 20px);
      }
      & > article{
        padding: clamp(1.5rem, 0.955rem + 2.73vw, 3rem); /* 24px 48px */
        background: #FFF;
        position: relative;
        @media not all and (max-width: 840px) {
          width: calc(100% + 32px);
          border: 4px solid var(--text-01, #292929);
        }
        @media (max-width: 840px) {
          width: calc(100% - 32px);
          border: 2px solid var(--text-01, #292929);
        }
        & p{
          color: var(--text-01, #292929);
          font-size: 16px;
          font-style: normal;
          font-weight: 600;
          line-height: 180%; /* 28.8px */
          & + p{
            margin-block-start: 1em;
          }
        }
        &:nth-of-type(1){
          z-index: 2;
        }
        &:nth-of-type(2){
          @media not all and (max-width: 840px) {
            padding-inline-start: clamp(2.5rem, 1.591rem + 4.55vw, 5rem); /* 40px 80px */
            top: 50px;
            right: 32px;
          }
          @media (max-width: 840px) {
            padding-block-start: clamp(2.5rem, 1.591rem + 4.55vw, 5rem); /* 40px 80px */
            top: -24px;
            right: -24px;
          }
        }
      }
    }
    /* deco */
    & .c-deco.--catch{
      position: absolute;
      &.--01{
        width: calc((370 / 1280) * 100vw);
        max-width: 370px;
        top: 0;
        right: 0;
        z-index: 5;
        @media not all and (max-width: 840px) {
          translate: 55% -30%;
        }
        @media (max-width: 840px) {
          translate: 25% -30%;
        }
      }
    }
    /* bg */
    & .c-deco.--bg{
      display: none;
      aspect-ratio: 1;
      border-radius: 50vw;
      position: absolute;
      top: 0;
      transition: translate 0.4s ease-in-out;
      &.--01{
        width: calc((792 / 1280) * 100vw);
        background-color: #59C0E6;
        z-index: 5;
        left: 50%;
        translate: -70% 56px;
        &.is-active{
          translate: -70% calc(56px + 50%);
        }
      }
      &.--02{
        width: calc((677 / 1280) * 100vw);
        background-color: #A989D7;
        z-index: 4;
        left: 50%;
        translate: -20% 48px;
        &.is-active{
          translate: -20% calc(48px + 50%);
        }
      }
      &.--03{
        width: calc((865 / 1280) * 100vw);
        background-color: #FFB800;
        z-index: 3;
        right: 0;
        translate: 40% 0;
        &.is-active{
          translate: 40% 50%;
        }
      }
      &.--04{
        width: calc((750 / 1280) * 100vw);
        background-color: #00B473;
        z-index: 2;
        left: 0;
        translate: -40% 0;
        &.is-active{
          translate: -40% 50%;
        }
      }
    }
  }/* catch */

  /* wrapper */
  & .l-wrapper{
    background-image: url(../img/body-bg.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
  }/* wrapper */

  /* about */
  & section.p-about{
    /* height: 100%; */
    padding-block-start: 55px;
    padding-block-end: 72px;
    position: relative;
    /* overflow-x: hidden; */
    &::before,
    &::after{
      display: block;
      content: "";
      position: absolute;
      inset: 0;
      margin: auto;
    }
    &::before{
      width: auto;
      height: 100%;
      max-height: 1040px;
      aspect-ratio: 1;
      background-color: #FFAA00;
      border-radius: 50vw;
      z-index: 2;
      @media (max-width: 1000px) {
        max-height: 90vw;
      }
    }
    &::after{
      width: 100%;
      max-width: 1450px;
      border-radius: calc((400 / 1280) * 100vw);
      background-color: #e8d432;
      background-image: radial-gradient(circle, #eaab2a 2px, transparent 2px), radial-gradient(circle, #eaab2a 2px, transparent 2px);
      background-position: 0 0, 4px 7px;
      background-size: 8px 14px;
      z-index: 1;
      @media (max-width: 1000px) {
        max-width: 105vw;
      }
    }
    & > .p-about__contents{
      position: relative;
      z-index: 5;
      &.--01{
        display: grid;
        gap: 16px;
        /* width: calc(100% - 20px - 20px); */
        width: calc(100% - calc((170 / 1280) * 100vw) - calc((170 / 1280) * 100vw));
        max-width: 940px;
        margin-inline: auto;
        @media not all and (max-width: 840px) {
          grid-template-columns: 1fr auto;
        }
        @media (max-width: 840px) {
          grid-template-columns: 1fr;
          width: calc(100% - 20px - 20px);
        }
        & hgroup{
          display: flex;
          flex-direction: column-reverse;
          gap: 28px;
          & h2{
            & > span:nth-of-type(1){
              display: inline;
              width: fit-content;
              padding-inline: 16px;
              background-color: var(--color-white);
              color: #FF8000;
              font-size: clamp(1.25rem, 0.977rem + 1.36vw, 2rem); /* 20px 32px */
              font-style: normal;
              font-weight: 600;
              line-height: 150%; /* 48px */
              line-height: 1;
            }
            & > span:nth-of-type(2){
              display: inline-block;
              width: fit-content;
              margin-block-start: 5px;
              padding-inline: 16px;
              background-color: var(--color-white);
              color: #FF8000;
              font-size: clamp(1.75rem, 1.341rem + 2.05vw, 2.875rem); /* 28px 46px */
              font-style: normal;
              font-weight: 600;
              line-height: 150%; /* 69px */
              letter-spacing: 2.3px;
            }
            & + p{
              color: #FFF;
              font-size: clamp(1.125rem, 0.989rem + 0.68vw, 1.5rem); /* 18px 24px */
              font-style: normal;
              font-weight: 600;
              line-height: 150%; /* 36px */
              & > span{
                color: #FFF;
                font-size: clamp(2rem, 1.636rem + 1.82vw, 3rem); /* 32px 48px */
                font-style: normal;
                font-weight: 600;
                line-height: 150%; /* 72px */
              }
            }
          }
        }
        & p{
          margin-block-start: 42px;
          color: #FFF;
          font-size: 18px;
          font-style: normal;
          font-weight: 600;
          line-height: 180%; /* 32.4px */
          & > .highlighter{
            background-color: #FF8000;
          }
          & + p{
            margin-block-start: 1em;
          }
        }
        & figure{
          max-width: 400px;
          @media not all and (max-width: 840px) {
            width: calc((400 / 1280) * 100vw);
          }
          @media (max-width: 840px) {
            width: 80vw;
            margin-inline: auto;
          }
        }
      }
      &.--02{
        /* width: calc(100% - 20px - 20px); */
        max-width: 960px;
        margin-block-start: clamp(2.5rem, 1.464rem + 4.42vw, 5rem); /* 40px 80px */
        margin-inline: auto;
        padding: clamp(0.625rem, 0.366rem + 1.1vw, 1.25rem); /* 10px 20px */
        border-radius: clamp(1.5rem, 0.878rem + 2.65vw, 3rem); /* 24px 48px */
        background: var(--sub-02, #00B473);
        @media not all and (max-width: 840px) {
          width: calc(100% - calc((170 / 1280) * 100vw) - calc((170 / 1280) * 100vw));
        }
        @media (max-width: 840px) {
          width: calc(100% - 20px - 20px);
        }
        /* tab */
        & .c-tabs{
          & .c-tab-list{
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: clamp(0.25rem, 0.146rem + 0.44vw, 0.5rem); /* 4px 8px */
            padding-inline-start: 0;
            list-style: none;
            & .c-tab-item{
              display: grid;
              place-items: center;
              min-height: 3lh;
              /* aspect-ratio: 265/68; */
              padding: 8px;
              background-color: var(--color-white);
              border-top: 4px solid #FA0;
              border-right: 4px solid #FA0;
              border-left: 4px solid #FA0;
              border-radius: clamp(0.875rem, 0.512rem + 1.55vw, 1.75rem) clamp(0.875rem, 0.512rem + 1.55vw, 1.75rem) 0 0; /* 14px 28px */
              color: #FF8000;
              font-size: clamp(1rem, 0.948rem + 0.22vw, 1.125rem); /* 16px 18px */
              font-style: normal;
              font-weight: 600;
              line-height: 110%; /* 19.8px */
              text-align: center;
              position: relative;
              transition: 
                background 0.24s ease-in-out,
                color 0.24s ease-in-out;
              cursor: pointer;
              &::after{
                display: inline-block;
                content: "";
                width: calc((51 / 265) * 100%);
                max-width: 30px;
                aspect-ratio: 3/2;
                background: #FA0;
                clip-path: polygon(0 0, 100% 0%, 50% 100%);
                position: absolute;
                inset: 0;
                margin: auto auto 0;
                translate: 0 100%;
                opacity: 0;
                transition: opacity 0.24s ease-in-out;
              }
              @media (any-hover: hover) {
                &:hover{
                  background-color: #FA0;
                  color: var(--color-white);
                  &::after{
                    opacity: 1;
                  }
                }
              }
            }
          }
          & .c-tab-panel {
            display: none;
          }
          /* active */
          & .c-tab-item.is-active {
            background: #FA0;
            color: var(--color-white);
            &::after{
              opacity: 1;
            }
          }
          .c-tab-panel.is-active {
            display: block;
            padding: clamp(1.125rem, 0.762rem + 1.55vw, 2rem); /* 18px 32px */
            background: var(--color-white);
            border: 4px solid #FA0;
            border-radius: 0 0 clamp(0.875rem, 0.512rem + 1.55vw, 1.75rem) clamp(0.875rem, 0.512rem + 1.55vw, 1.75rem); /* 14px 28px */
            & p{
              color: var(--text-01, #292929);
              font-size: 16px;
              font-style: normal;
              font-weight: 500;
              line-height: 180%; /* 28.8px */
              letter-spacing: 0.8px;
              & + p{
                margin-block-start: 1em;
              }
            }
          }
        }/* tab */
      }
    }
    /* deco */
    & > .c-deco.--about{
      position: absolute;
      z-index: 10;
      &.--01{
        width: calc(((338 / 1280) * 100vw));
        max-width: 338px;
        top: 50%;
        left: 0;
        translate: -20% -50%;
      }
      &.--02{
        width: calc(((208 / 1280) * 100vw));
        max-width: 208px;
        right: 0;
        @media not all and (max-width: 840px) {
          bottom: 5%;
        }
        @media (max-width: 840px) {
          bottom: -5%;
        }
      }
    }
  }/* about */

  /* voices */
  & section.p-voices{
    padding-block-start: clamp(5rem, 2.928rem + 8.84vw, 10rem); /* 80px 160px */
    padding-block-end: clamp(2.75rem, 1.61rem + 4.86vw, 5.5rem); /* 44px 88px */
    position: relative;
    @media not all and (max-width: 840px) {
      background-image: url(../img/voices-bg-pc.webp);
      background-repeat: no-repeat;
      background-size: contain;
      background-position: top center;
    }
    @media (max-width: 840px) {
      background-image: url(../img/voices-bg-sp.webp);
      background-repeat: repeat-y;
      background-size: contain;
      background-position: top center;
    }
    & > h2{
      max-width: 562px;
      margin-inline: auto;
      padding-inline: 20px;
      position: relative;
      @media not all and (max-width: 840px) {
        width: calc((562 / 1280) * 100vw);
      }
      @media (max-width: 840px) {
        width: 80vw;
      }
      & span{
        display: block;
        width: calc((177 / 1280) * 100vw);
        max-width: 177px;
        position: absolute;
        bottom: 0;
        left: 0;
        translate: -25% 15%;
      }
    }
    & > ul{
      display: grid;
      gap: 20px;
      max-width: 1060px;
      /* width: calc(100% - 20px - 20px); */
      width: calc(100% - calc((170 / 1280) * 100vw) - calc((170 / 1280) * 100vw));
      margin-block-start: 56px;
      margin-inline: auto;
      padding-inline-start: 0;
      list-style: none;
      @media not all and (max-width: 400px) {
        grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
      }
      @media (max-width: 499px) {
        grid-template-columns: repeat(2, 1fr);
        width: calc(100% - 20px - 20px);
      }
      & > li{
        position: relative;
        &::before{
          display: none;
          content: "";
          width: 100%;
          aspect-ratio: 1;
          border-radius: 50vw;
          background-color: #FFC21E;
          position: absolute;
          inset: 0;
          margin: auto;
          z-index: 0;
        }
        & .figure{
          display: block;
          aspect-ratio: 600/640;
          position: relative;
          z-index: 1;
          &::before,
          &::after{
            content: "";
            width: 100%;
            height: 100%;
            background-repeat: no-repeat;
            background-size: contain;
            background-position: bottom center;
          }
          &::before{
            display: block;
          }
          &::after{
            display: none;
          }
        }
        & p{
          display: block;
          padding-block: 8px;
          padding-inline: 12px;
          border-radius: 8px;
          border: 3px solid var(--text-01, #292929);
          background: #FFF;
          color: var(--text-01, #292929);
          font-size: 16px;
          font-style: normal;
          font-weight: 500;
          line-height: 150%; /* 24px */
          letter-spacing: 0.8px;
          position: relative;
          z-index: 1;
          & > .highlighter{
            background:linear-gradient(transparent 60%, #FFFF17 60%);
            font-weight: 600;
          }
        }
        @media (any-hover: hover) {
          &:hover{
            &::before{
              display: block;
            }
          }
        }
        & a{
          text-decoration: none;
          @media (any-hover: hover) {
            &:hover{
              & .figure{
                &::before{
                  display: none;
                }
                &::after{
                  display: block;
                }
              }
            }
          }
        }
        /* photo */
        &.--001{
          & .figure{
            &::before{
              background-image: url(../img/voices-interview001-01.webp);
            }
            &::after{
              background-image: url(../img/voices-interview001-02.webp);
            }
          }
        }
        &.--002{
          & .figure{
            &::before{
              background-image: url(../img/voices-interview002-01.webp);
            }
            &::after{
              background-image: url(../img/voices-interview002-02.webp);
            }
          }
        }
        &.--003{
          & .figure{
            &::before{
              background-image: url(../img/voices-interview003-01.webp);
            }
            &::after{
              background-image: url(../img/voices-interview003-02.webp);
            }
          }
        }
        &.--004{
          & .figure{
            &::before{
              background-image: url(../img/voices-interview004-01.webp);
            }
            &::after{
              background-image: url(../img/voices-interview004-02.webp);
            }
          }
        }
        &.--005{
          & .figure{
            &::before{
              background-image: url(../img/voices-interview005-01.webp);
            }
            &::after{
              background-image: url(../img/voices-interview005-02.webp);
            }
          }
        }
        &.--006{
          & .figure{
            &::before{
              background-image: url(../img/voices-interview006-01.webp);
            }
            &::after{
              background-image: url(../img/voices-interview006-02.webp);
            }
          }
        }
        &.--007{
          & .figure{
            &::before{
              background-image: url(../img/voices-interview007-01.webp);
            }
            &::after{
              background-image: url(../img/voices-interview007-02.webp);
            }
          }
        }
        &.--008{
          & .figure{
            &::before{
              background-image: url(../img/voices-interview008-01.webp);
            }
            &::after{
              background-image: url(../img/voices-interview008-02.webp);
            }
          }
        }
        &.--009{
          & .figure{
            &::before{
              background-image: url(../img/voices-interview009-01.webp);
            }
            &::after{
              background-image: url(../img/voices-interview009-02.webp);
            }
          }
        }
        &.--010{
          & .figure{
            &::before{
              background-image: url(../img/voices-interview010-01.webp);
            }
            &::after{
              background-image: url(../img/voices-interview010-02.webp);
            }
          }
        }
        &.--011{
          & .figure{
            &::before{
              background-image: url(../img/voices-interview011-01.webp);
            }
            &::after{
              background-image: url(../img/voices-interview011-02.webp);
            }
          }
        }
        &.--012{
          & .figure{
            &::before{
              background-image: url(../img/voices-interview012-01.webp);
            }
            &::after{
              background-image: url(../img/voices-interview012-02.webp);
            }
          }
        }
        &.--013{
          & .figure{
            &::before{
              background-image: url(../img/voices-interview013-01.webp);
            }
            &::after{
              background-image: url(../img/voices-interview013-02.webp);
            }
          }
        }
        &.--014{
          & .figure{
            &::before{
              background-image: url(../img/voices-interview014-01.webp);
            }
            &::after{
              background-image: url(../img/voices-interview014-02.webp);
            }
          }
        }
        &.--015{
          & .figure{
            &::before{
              background-image: url(../img/voices-interview015-01.webp);
            }
            &::after{
              background-image: url(../img/voices-interview015-02.webp);
            }
          }
        }
        &.--016{
          & .figure{
            &::before{
              background-image: url(../img/voices-interview016-01.webp);
            }
            &::after{
              background-image: url(../img/voices-interview016-02.webp);
            }
          }
        }
        &.--017{
          & .figure{
            &::before{
              background-image: url(../img/voices-interview017-01.webp);
            }
            &::after{
              background-image: url(../img/voices-interview017-02.webp);
            }
          }
        }
        &.--018{
          & .figure{
            &::before{
              background-image: url(../img/voices-interview018-01.webp);
            }
            &::after{
              background-image: url(../img/voices-interview018-02.webp);
            }
          }
        }
        &.--019{
          & .figure{
            &::before{
              background-image: url(../img/voices-interview019-01.webp);
            }
            &::after{
              background-image: url(../img/voices-interview019-02.webp);
            }
          }
        }
        &.--020{
          & .figure{
            &::before{
              background-image: url(../img/voices-interview020-01.webp);
            }
            &::after{
              background-image: url(../img/voices-interview020-02.webp);
            }
          }
        }
        &.--021{
          & .figure{
            &::before{
              background-image: url(../img/voices-interview021-01.webp);
            }
            &::after{
              background-image: url(../img/voices-interview021-02.webp);
            }
          }
        }
        &.--022{
          & .figure{
            &::before{
              background-image: url(../img/voices-interview022-01.webp);
            }
            &::after{
              background-image: url(../img/voices-interview022-02.webp);
            }
          }
        }
        &.--023{
          & .figure{
            &::before{
              background-image: url(../img/voices-interview023-01.webp);
            }
            &::after{
              background-image: url(../img/voices-interview023-02.webp);
            }
          }
        }
        &.--024{
          & .figure{
            &::before{
              background-image: url(../img/voices-interview024-01.webp);
            }
            &::after{
              background-image: url(../img/voices-interview024-02.webp);
            }
          }
        }
        &.--025{
          & .figure{
            &::before{
              background-image: url(../img/voices-interview025-01.webp);
            }
            &::after{
              background-image: url(../img/voices-interview025-02.webp);
            }
          }
        }
        &.--026{
          & .figure{
            &::before{
              background-image: url(../img/voices-interview026-01.webp);
            }
            &::after{
              background-image: url(../img/voices-interview026-02.webp);
            }
          }
        }
        &.--027{
          & .figure{
            &::before{
              background-image: url(../img/voices-interview027-01.webp);
            }
            &::after{
              background-image: url(../img/voices-interview027-02.webp);
            }
          }
        }
        &.--028{
          & .figure{
            &::before{
              background-image: url(../img/voices-interview028-01.webp);
            }
            &::after{
              background-image: url(../img/voices-interview028-02.webp);
            }
          }
        }
        &.--029{
          & .figure{
            &::before{
              background-image: url(../img/voices-interview029-01.webp);
            }
            &::after{
              background-image: url(../img/voices-interview029-02.webp);
            }
          }
        }
        &.--030{
          & .figure{
            &::before{
              background-image: url(../img/voices-interview030-01.webp);
            }
            &::after{
              background-image: url(../img/voices-interview030-02.webp);
            }
          }
        }
        &.--031{
          & .figure{
            &::before{
              background-image: url(../img/voices-interview031-01.webp);
            }
            &::after{
              background-image: url(../img/voices-interview031-02.webp);
            }
          }
        }

        /* animation */
        &:nth-of-type(odd){
          & .figure::before{
            transform: rotate(15deg) translateY(115%);
            transition: transform 0.4s ease-in-out;
          }
        }
        &:nth-of-type(even){
          & .figure::before{
            transform: rotate(-10deg) translateY(110%);
            transition: transform 0.4s 0.4s ease-in-out;
          }
        }
        & .figure{
          overflow: hidden;
          &::before{
            position: relative;
            transform-origin: bottom center;
          }
        }
        &.is-active{
          &:nth-of-type(odd){
            & .figure::before{
              transform: rotate(0) translateY(0);
            }
          }
          &:nth-of-type(even){
            & .figure::before{
              transform: rotate(0) translateY(0);
            }
          }
        }
      }
    }
    /* deco */
    & .c-deco.--voices{
      position: absolute;
      &.--01{
        width: calc((162 / 1280) * 100vw);
        max-width: 162px;
        top: 33%;
        right: 0;
      }
      &.--02{
        width: calc((158 / 1280) * 100vw);
        max-width: 158px;
        top: 50%;
        left: 0;
      }
      &.--03{
        width: calc((142 / 1280) * 100vw);
        max-width: 142px;
        bottom: 30%;
        left: 0;
      }
    }
  }/* voices */

  /* message */
  & section.p-message{
    padding-inline: 20px;
    position: relative;
    z-index: 10;
    /* top: 25%; */
    & > .contents{
      display: grid;
      gap: 28px;
      width: calc(100% - calc((170 / 1280) * 100vw) - calc((170 / 1280) * 100vw)); 
      max-width: 800px;
      margin-inline: auto;
      border-radius: 12px;
      border: 4px solid var(--text-01, #292929);
      background: #FFF;
      color: var(--text-01, #292929);
      text-decoration: none;
      overflow: hidden;
      @media not all and (max-width: 840px) {
        grid-template-columns: 1fr auto;
        width: fit-content;
      }
      @media (max-width: 840px) {
        grid-template-columns: 1fr;
        border: 2px solid var(--text-01, #292929);
        width: 90vw;
      }
      & > article{
        @media not all and (max-width: 840px) {
          padding: 30px 24px 30px 36px;
        }
        @media (max-width: 840px) {
          padding: 15px 12px 15px 18px;
        }
        & h2{
          display: block;
          padding-block-end: 8px;
          border-bottom: 2px solid var(--text-01, #292929);
          color: var(--text-01, #292929);
          font-size: 24px;
          font-style: normal;
          font-weight: 600;
          line-height: 150%; /* 36px */
        }
        & h3{
          margin-block-start: 24px;
          & .highlighter{
            background:linear-gradient(transparent 60%, #FFFF17 60%);
          }
        }
        & p{
          margin-block-start: 24px;
          color: var(--text-01, #292929);
          font-size: 16px;
          font-style: normal;
          font-weight: 500;
          line-height: 150%; /* 24px */
          text-align: justify;
          & + p{
            margin-block-start: 1em;
          }
          &.u-tar{
            text-align: right;
          }
        }
      }
      & figure{
        max-width: 280px;
        height: 100%;
        position: relative;
        overflow: hidden;
        @media not all and (max-width: 840px) {
          margin-inline: auto 0;
        }
        @media (max-width: 840px) {
          margin-inline: auto;
        }
        &::before{
          display: block;
          content: "";
          width: 100%;
          height: 100%;
          background-repeat: no-repeat;
          background-size: contain;
          background-position: center;
          position: absolute;
          inset: 0;
          margin: auto;
          @media not all and (max-width: 840px) {
            background-image: url(../img/message01-01.webp);
          }
          @media (max-width: 840px) {
            background-image: url(../img/message01-02.webp);
          }
        }
        & > img{
          position: relative;
          width: 100%;
          height: 100%;
          object-fit: contain;
          object-position: bottom center;
        }
      }
      @media (any-hover: hover) {
        &:hover{
          & figure{
            &::before{
              background-image: url(../img/message01-02.webp);
            }
          }
        }
      }
    }
    /* deco */
    & .c-deco.--message{
      position: absolute;
      &.--01{
        width: calc((191 / 1280) * 100vw);
        max-width: 191px;
        left: clamp(0.625rem, 0.262rem + 1.55vw, 1.5rem); /* 10px 24px */
        translate: 0 -50%;
        @media not all and (max-width: 980px) {
          top: 50%;
        }
        @media (max-width: 980px) {
          top: 0%;
        }
      }
    }
  }/* message */

  /* description */
  & section.p-description{
    padding-block-start: clamp(6.875rem, 4.026rem + 12.15vw, 13.75rem); /*110px 220px */
    padding-block-end: 96px;
    background-color: var(--color-white);
    position: relative;
    &::before{
      display: block;
      content: "";
      width: 100%;
      aspect-ratio: 1283/396;
      background-image: url(../img/message-bg.webp);
      background-repeat: no-repeat;
      background-position: top center;
      background-size: cover;
      position: absolute;
      top: 0;
      left: 0;
      translate: 0 calc(-100% + 1px);
    }
    & hgroup{
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column-reverse;
      gap: 24px;
      padding-inline: 20px;
      text-align: center;
      & h2{
        display: block;
        max-width: 452px;
        max-width: 360px;
        width: 90vw;
        @media (max-width: 840px) {
          & figure{
            max-width: 60%;
            margin-inline: auto;
          }
        }
      }
      & p{
        color: var(--text-01, #292929);
        text-align: center;
        font-size: 18px;
        font-style: normal;
        font-weight: 700;
        @media not all and (max-width: 840px) {
          line-height: 40px; /* 222.222% */
        }
        @media (max-width: 840px) {
          line-height: 1.4;
        }
      }
      & + a{
        display: grid;
        place-items: center;
        max-width: 452px;
        width: 90vw;
        margin-block-start: 48px;
        margin-inline: auto;
        padding-block: 20px;
        padding-inline: 24px calc(24px + 30px + 6px);
        background: var(--sub-01, #FF090E);
        border-radius: 50vw;
        border: 1px solid var(--sub-01, #FF090E);
        color: var(--color-white);
        font-size: 18px;
        font-style: normal;
        font-weight: 600;
        line-height: 150%; /* 27px */
        text-decoration: none;
        text-align: center;
        transition: 
          background 0.24s ease-in-out,
          color 0.24s ease-in-out;
        position: relative;
        @media (max-width: 840px) {
          max-width: 75vw;
          font-size: 16px;
        }
        & > .arrow{
          display: block;
          width: 30px;
          position: absolute;
          top: 50%;
          right: 24px;
          translate: 0 -50%;
          transition: right 0.24s ease-in-out;
          @media (max-width: 840px) {
            width: 20px;
          }
          & > img{
            width: 100%;
            height: 100%;
            object-fit: contain;
            object-position: center;
          }
          & path{
            fill: var(--color-white);
            transition: fill 0.24s ease-in-out;
          }
        }
        @media (any-hover: hover) {
          &:hover{
            background: var(--color-white);
            color: var(--sub-01, #FF090E);
            & .arrow{
              right: 18px;
              & path{
                fill: var(--sub-01, #FF090E);
              }
            }
          }
        }
      }
    }
    /* deco */
    & .zindex{
      z-index: 5;
    }
    & .c-deco.--description{
      position: absolute;
      z-index: 11;
      &.--01{
        width: calc((272 / 1280) * 100vw);
        max-width: 272px;
        bottom: 0;
        left: clamp(0.625rem, -0.981rem + 6.85vw, 4.5rem); /* 10px 72px */
        translate: 0 0;
      }
      &.--02{
        width: calc((383 / 1280) * 100vw);
        max-width: 383px;
        top: 0;
        right: 0;
        translate: 0 -25%;
      }
    }
  }/* description */

  /* exterior */
  & div.p-exterior{
    & figure{
      /* aspect-ratio: 1290/512; */
      & img{
        /* width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center; */
        width: auto;
        height: auto;
      }
    }
  } /* exterior */

  /* bunnerarea */
  & section.p-bunnerarea{
    padding-block: clamp(3rem, 1.636rem + 5.82vw, 6rem); /* 48px 96px */
    background-image: url(../img/body-bg.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    & .p-bunnerarea__inner{
      width: calc(100% - 20px - 20px);
      max-width: 1080px;
      margin-inline: auto;
    }
    & ul{
      display: grid;
      gap: clamp(1.25rem, 0.682rem + 2.42vw, 2.5rem); /* 20px 40px */
      padding-inline-start: 0;
      list-style: none;
      @media not all and (max-width: 640px) {
        grid-template-columns: repeat(auto-fill, minmax(360px, auto));
      }
      @media (max-width: 640px) {
        grid-template-columns: 1fr;
      }
      & li a{
        display: grid;
        place-items: center;
        aspect-ratio: 520/210;
        filter: brightness(1);
        transition: filter 0.24s ease-in-out;
        & img{
          width: 100%;
          height: 100%;
          object-fit: cover;
          object-position: center;
        }
        @media (any-hover: hover) {
          &:hover{
            filter: brightness(1.1);
          }
        }
      }
    }
  } /* bunnerarea */

  /* books */
  & section.p-books{
    padding-block-start: clamp(3rem, 1.636rem + 5.82vw, 6rem); /* 48px 96px */
    padding-block-end: clamp(8.125rem, 4.432rem + 15.76vw, 16.25rem); /* 130px 260px */
    background-color: var(--color-white);
    background-image: url(../img/books-bg-top.webp), url(../img/books-bg-bottom.webp);
    background-position: top left, bottom right;
    background-repeat: no-repeat, no-repeat;
    background-size: 50% auto, 100% auto;
    & .p-books__inner{
      width: calc(100% - 20px - 20px);
      max-width: 1080px;
      margin-inline: auto;
      & h2{
        font-size: clamp(1.5rem, 0.818rem + 2.91vw, 3rem); /* 24px 48px */
        font-weight: 500;
        text-align: center;
      }
      & ul{
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(140px, auto));
        gap: clamp(1.25rem, 0.682rem + 2.42vw, 2.5rem); /* 20px 40px */
        padding-block-start: 56px;
        padding-inline-start: 0;
        list-style: none;
        & li a{
          text-decoration: none;
          filter: brightness(1);
          transition: filter 0.24s ease-in-out;
          & figure{
            position: relative;
            & img{
              width: 100%;
              box-shadow: 0 0 30px 0 rgba(45, 11, 11, 0.15);
              transition: box-shadow 0.24s ease-in-out;
            }
            & .icon{
              display: grid;
              place-items: center;
              width: 48px;
              padding: 4px 8px;
              border-radius: 32px;
              background: var(--main-01, #FFBA00);
              position: absolute;
              bottom: 0;
              right: 0;
              translate: 25% 50%;
              & svg{
                width: 100%;
                object-fit: contain;
                object-position: center;
                translate: 0 0;
                transition: translate 0.24s ease-in-out;
              }
              & .desvg path {
                fill: var(--text-01, #292929);
              }
            }
          }
          & .title{
            display: inline-block;
            margin-block-start: 1em;
            color: var(--text-01, #292929);
            font-size: clamp(0.875rem, 0.818rem + 0.24vw, 1rem); /* 14px 16px */
            font-style: normal;
            font-weight: 500;
            line-height: 150%; /* 24px */
          }
          @media (any-hover: hover) {
            &:hover{
              filter: brightness(1.1);
              & figure{
                & img{
                  box-shadow: 0 0 30px 0 rgba(45, 11, 11, 0.25);
                }
                & .icon{
                  & svg{
                    translate: 8% 0;
                  }
                }
              }
            }
          }
        }
      }
    }
  } /* books */

} /* main */

/* footer ======== */
.l-footer{
  width: 100%;
  padding-block: clamp(2.5rem, 1.464rem + 4.42vw, 5rem); /* 40px 80px */
  background-color: var(--color-fukudai-primary);
  position: relative;
  & .l-footer__inner{
    display: grid;
    gap: 20px;
    max-width: 1040px;
    margin-inline: auto;
    @media not all and (max-width: 1060px) {
      width: 100%;
    }
    @media (max-width: 1060px) {
      padding-inline: 20px;
    }
    @media not all and (max-width: 840px) {
      grid-template-columns: 1fr auto;
    }
    @media (max-width: 840px) {
      grid-template-columns: 1fr;
    }
    & nav{
      @media not all and (max-width: 840px) {
        padding-inline-start: 2em;
      }
      @media (max-width: 840px) {
      }
      & > ul{
        padding-left: 0;
        list-style: none;
        & li{
          & + li{
            margin-block-start: 20px;
          }
        }
        & a{
          display: grid inline;
          align-items: center;
          grid-template-columns: auto auto;
          gap: 16px;
          color: var(--color-white);
          font-size: 18px;
          font-style: normal;
          font-weight: 500;
          line-height: 40px; /* 222.222% */
          text-decoration: none;
          position: relative;
          &::before{
            display: block;
            content: "";
            width: 100%;
            height: 1px;
            background-color: var(--color-white);
            position: absolute;
            bottom: -0.25em;
            left: 0;
            transform-origin: center center;
            scale: 0;
            transition: scale 0.24s ease-in-out;
          }
          & > .icon{
            display: block;
            width: 48px;
          }
        }
      }
      &.--link{
        @media (max-width: 840px) {
          padding-block-end: 1em;
        }
        & ul{
          & li a{
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 1em;
            width: 100%;
            border-bottom: 1px solid var(--color-white);
            & .icon{
              display: grid;
              place-items: center;
              width: 42px;
              padding: 4px 8px;
              border-radius: 32px;
              background-color: var(--color-white);
              & svg{
                width: 100%;
                object-fit: contain;
                object-position: center;
                translate: 0 0;
                transition: translate 0.24s ease-in-out;
              }
              & .desvg path {
                fill: #9E2C32;
              }
            }
            @media (any-hover: hover) {
              &:hover{
                & .icon{
                  & svg{
                    translate: 8% 0;
                  }
                }
              }
            }
          }
        }
      }
      &.--sns{
        & ul{
          display: grid;
          grid-template-columns: repeat(4, auto);
          width: fit-content;
          gap: clamp(1rem, 0.545rem + 1.94vw, 2rem); /* 16px 32px */
          & li{
            margin: 0;
          }
        }
      }
    }
  } /* inner */
  & .c-deco.--footer{
    &.--01{
      position: absolute;
      z-index: 11;
      &.--01{
        width: calc((272 / 1280) * 100vw);
        max-width: 272px;
        top: 0;
        left: clamp(0.625rem, -0.981rem + 6.85vw, 4.5rem); /* 10px 72px */
        translate: 0 -100%;
      }
    }
  }
} /* footer */

/* br ======== */
br.sp-only{
  @media not all and (max-width: 840px) {
    display: none;
  }
  @media (max-width: 840px) {
    display: block;
  }
}

/* utility ======== */
.u-tar{
  text-align: right;
}