@charset "UTF-8";

/* 変数
----------------------------------------------------*/
:root {
  /* 色 */
  --main-font-color: #111;
  --link-color: #111;
  --link-hover-color: #111;


  /* セクション余白用 */
  --sp100-50: clamp(50px,calc(50px + (100 - 50) / (1648 - 360) * (100cqw - 360px)),100px);
  --sp120-60: clamp(60px,calc(60px + (120 - 60) / (1648 - 360) * (100cqw - 360px)),120px);
  --sp200-100: clamp(100px,calc(100px + (200 - 100) / (1648 - 360) * (100cqw - 360px)),200px);
  --sp200-50: clamp(50px,calc(50px + (200 - 50) / (1648 - 360) * (100cqw - 360px)),200px);

  /* コンテンツ間余白 */
  --sp40-20: clamp(20px,calc(20px + (40 - 20) / (1648 - 360) * (100cqw - 360px)),40px);
  --sp80-40: clamp(40px,calc(40px + (80 - 40) / (1648 - 360) * (100cqw - 360px)),80px);
  --sp160-80: clamp(80px,calc(80px + (160 - 80) / (1648 - 360) * (100cqw - 360px)),160px);


}


/* Custom Animate.css
----------------------------------------------------*/
.animate__animated.du-1s {animation-duration: 1s;}
.animate__animated.du-2s {animation-duration: 2s;}
.animate__animated.du-3s {animation-duration: 3s;}
.animate__animated.du-4s {animation-duration: 4s;}
.animate__animated.animate__delay-5s {animation-delay: 5s;}

.smooth {
  clip-path: inset(0 100% 0 0);
  display: inline-block;
  transition: 0.5s cubic-bezier(0.37, 0, 0.63, 1);
  transition-property: clip-path;
}
.smooth.animation-smooth {
  clip-path: inset(0);
}

/**/
.bgextend {
  /* animation-name: bgextendAnimeBase;
  animation-duration: 1s;
  animation-fill-mode: forwards; */
  position: relative;
  overflow: hidden;
  & .rainbow {
    opacity:0;
  }
}
/* @keyframes bgextendAnimeBase{
  from {opacity:0;}
  to {opacity:1;}
} */

/*中の要素*/
.animation-rainbow {
  &.wfit {
    display: block;
    width: fit-content;
    &.cc {
      margin-inline: auto;
    }
  }
  & .rainbow {
    animation-name: bgextendAnimeSecond;
    animation-duration: 0.6s;
    animation-delay: 0.3s;
    animation-fill-mode: forwards;
    opacity: 0;
  }
}
@keyframes bgextendAnimeSecond {
  0% {opacity: 0;}
  100% {opacity: 1;}
}


/* 左から右に移動する■ */
.animation-rainbow::before {
  animation-name: bgLRextendAnime;
  animation-duration: 0.4s;
  /* animation-delay: 1s; */
  animation-fill-mode: forwards;
  transform: scaleX(0);
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
}
.animation-rainbow.color1::before {background-image: linear-gradient(135deg, #fac8eb 0%,#fefedf 100%);}
.animation-rainbow.color2::before {background-image: linear-gradient(135deg, #c9e5ff 0%,#fefedf 100%);}
.animation-rainbow.color3::before {background-image: linear-gradient(135deg, #c493ff 0%,#fefedf 100%);}
.animation-rainbow.color4::before {background-image: linear-gradient(135deg, #edffbb 0%,#fefedf 100%);}
.animation-rainbow.color5::before {background-image: linear-gradient(135deg, #ffda90 0%,#fefedf 100%);}
.animation-rainbow.color6::before {background-image: linear-gradient(135deg, #333333 0%,#333333 100%);}
.animation-rainbow.color7::before {background-image: linear-gradient(135deg, #c9e5ff 0%,#fefedf 50%,#fac8eb 100%);}
.animation-rainbow.color8::before {background-image: linear-gradient(135deg, #fefedf 0%,#c9e5ff 100%);}


@keyframes bgLRextendAnime {
  0% {
    transform-origin: left;
    transform: scaleX(0);
  }
  50% {
    transform-origin: left;
    transform: scaleX(1);
  }
  50.001% {
    transform-origin: right;
  }
  100% {
    transform-origin: right;
    transform: scaleX(0);
  }
}


/* 初期設定
----------------------------------------------------*/
/* 使用Webフォント
  font-family: YakuHanJP, 'Noto Sans JP', sans-serif;
  font-family: YakuHanJP, 'Noto Serif JP', serif;
  font-family: 'Roboto Flex', sans-serif;
*/
html {scroll-behavior: smooth;}
body {
  overflow-x: hidden;
  font-family: YakuHanJP, 'Noto Sans JP', sans-serif;
  /* font-size: clamp(14px,calc(14px + (24 - 14) / (1440 - 360) * (100cqw - 360px)),24px); */
  font-size: clamp(14px,calc(14px + (24 - 14) / (1648 - 360) * (100cqw - 360px)),24px);
  font-weight: normal;
  font-style: normal;
  line-height: 1.8;
  letter-spacing: 0.02em;
  color: var(--main-font-color);
  &.start {
    height: auto;
    opacity: 1;
    overflow-y: auto;
  }
}
h1,h2,h3{
  font-family: YakuHanJP, 'Noto Serif JP', serif;
}
a {
  text-decoration: none;
  color: var(--link-color);
  &.textLink {
    text-decoration: underline;
    &:hover {
      text-decoration: none;
    }
  }
}
button,
[type="submit"],
a:not(.isAnimation) {
  transition-property: color,background-color;
  transition-duration: 0.4s;
}
a.addBoreder {
  border-bottom: 1px solid var(--link-color);
}
a:hover {
  color: var(--link-hover-color);
}
textarea,
input[type="text"] {
  border-style: solid;
  border-width: 1px;
  border-color: var(--main-font-color);
  color: var(--main-font-color);
}
.uppercase {text-transform: uppercase;}
.capitalize {text-transform: capitalize;}


/* ブレイクポイント出し分け
----------------------------------------------------*/
/* スクリーンリーダー用 */
.for-ScreenReader {display: none;}

.distribute {
  display: none;
  /* 未満 */
  &.bp420 {
    @media (width < 420px) {
      display: block;
    }
  }
  &.bp768 {
    @media (width < 768px) {
      display: block;
    }
  }
  /* 以上 */
  &.over768 {
    @media (768px <= width) {
      display: block;
    }
  }
}


/* 共通パーツ
----------------------------------------------------*/
.mediaSection,
.formSection,
.contentSection,
.scheduleSection,
.t3programSection,
.achievementSection,
.courseSection,
.academiaSection,
.graduateSection,
.studentSection,
.messageSection,
.videoSection {
  & h2 {
    font-family: 'Roboto Flex', sans-serif;
    font-size: clamp(40px,calc(40px + (100 - 40) / (1648 - 360) * (100cqw - 360px)),100px);
    font-weight: 400;
    line-height: 1.375;
    text-align: center;
    & .jp {
      display: block;
      font-family: YakuHanJP, 'Noto Sans JP', sans-serif;
      /* font-size: 18px; */
      font-size: clamp(12px,calc(12px + (18 - 12) / (1648 - 360) * (100cqw - 360px)),18px);
    }
  }
}
.leadSection {
  & h2 {
    /* font-size: 100px; */
    font-size: clamp(40px,calc(40px + (100 - 40) / (1648 - 360) * (100cqw - 360px)),100px);
    font-weight: 600;
    line-height: 1.375;
    text-align: center;
    & .jp {
      display: block;
      font-family: YakuHanJP, 'Noto Sans JP', sans-serif;
      /* font-size: 18px; */
      font-size: clamp(12px,calc(12px + (18 - 12) / (1648 - 360) * (100cqw - 360px)),18px);
    }
  }
}
small {
  font-size: clamp(12px,calc(12px + (18 - 12) / (1648 - 360) * (100cqw - 360px)),18px);
}
.emphasis{
  font-weight: 700;
}

/* ラッパー
----------------------------------------------------*/
.innerWrap {
  max-width: 1440px;
  width: calc(100% - 12.5%);
  margin-inline: auto;
  &.w-type740 {
    max-width: 740px;
  }
  &.w-type896 {
    max-width: 896px;
  }
  &.w-type1000 {
    max-width: 1000px;
  }
  &.w-type1240 {
    max-width: 1240px;
  }
  &.w-type1330 {
    max-width: 1330px;
  }
}


/* ヘッダー
----------------------------------------------------*/
.headerArea {
  text-align: center;
  position: fixed;
  width: 100%;
  left: calc(50% - 0px);
  top: 0;
  transform: translateX(-50%);
  z-index: 100;
  opacity: 0;
  & .innerWrap {
    width: calc(100% - 6%);
    margin-inline: auto;
    padding-block: 12px 0;
    display: flex;
    justify-content: space-between;
    & .logo {
      width: 32%;
      max-width: 200px;
      display: flex;
      & img {
        width: 100%;
      }
    }
    & > .wrap {
      display: flex;
      column-gap: 2.64vw;
      & .ctaButton {
        display: block;
        padding: 0.7vw 3.47vw 24px;
        border: 2px solid #111;
        border-radius: 5px;
        /* font-size: 15px; */
        font-size: clamp(12px,calc(12px + (15 - 12) / (1648 - 360) * (100cqw - 360px)),15px);
        line-height: 1.6;
        background: hsla(0, 0%, 100%, 0.8) url(../img/arrow.svg) no-repeat center bottom 10px;
        background-size: 13px;
        position: relative;
        @media (width < 768px) {
          background-size: 8px;
          padding-block: 8px 16px;
          background-position: center bottom 6px;
        }
        &::before {
          content: "";
          display: block;
          width: 100%;
          height: 100%;
          position: absolute;
          left: 0;
          top: 0;
          background-image: linear-gradient(to right, rgba(247,208,201,.7) , rgba(160,188,97,.7) , rgba(70,190,222,.7));
          z-index: 10;
          opacity: 0;
          transition-property: opacity;
          transition-duration: 0.4s;
        }
        &:hover {
          color: #111;
          &::before {
            opacity: 1;
          }
        }
        & span {
          position: relative;
          z-index: 20;
        }
      }
      & .menuWrap {
        height: 100%;
        & .menuButton {
          display: block;
          /* width: 85px; */
          width: clamp(66px,calc(66px + (90 - 66) / (1648 - 360) * (100cqw - 360px)),90px);
          height: clamp(66px,calc(66px + (90 - 66) / (1648 - 360) * (100cqw - 360px)),90px);
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          border: 1px solid #111;
          border-radius: 9999px;
          background-color: #111;
          color: #fff;
          /* font-size: 16px; */
          font-size: clamp(12px,calc(12px + (16 - 12) / (1648 - 360) * (100cqw - 360px)),16px);
          line-height: 1;
          & img {
            /* width: 45px; */
            width: clamp(32px,calc(32px + (45 - 32) / (1648 - 360) * (100cqw - 360px)),45px);
            margin-block: 6px 9px;
          }
          &:hover {
            background-color: #fff;
            color: #111;
            & img {
              mix-blend-mode: difference;
            }
          }
        }
      }
    }
    @media (768px <= width) {
      padding-block: 30px 0;
    }
  }
  &.view-header {
    transition: opacity 2s;
    opacity: 1;
    &.kaijyo-fixed {
      opacity: 0;
    }
  }
  /* .hero {
    background-color: #cccccc;
    padding: 40px 0;
    text-align: center;
    .keyWord {
      font-size: 100px;
      font-weight: 800;
      line-height: 1.2;
    }
    .roleWord {
      margin-top: 16px;
      font-size: 40px;
    }
    .comapnyWord {
      margin-top: 16px;
      font-size: 21px;
    }
  } */
}


/* メニュー
----------------------------------------------------*/
.settings-popover {
  &:popover-open {
    /*   0. BEFORE-OPEN STATE   */
    /*  initial state for what we're animating *in* from, 
        in this case: goes from lower (y + 20px) to center  */
    @starting-style {
      transform: translateX(-100dvw);
      opacity: 0;
    }
    
    /*   1. OPEN STATE   */
    /*  state when popover is open, BOTH:
        what we're transitioning *in* to 
        and transitioning *out* from */
    transform: translateX(0);
    opacity: 1;
  }
  
  /*   2. AFTER-OPEN-IS-CLOSED STATE   */
  /*  initial state for what we're animating *out* to , 
      in this case: goes from center to (y - 50px) higher */
  transform: translateX(-1600px);
  opacity: 0;
  
  /*  enumarate transitioning properties, including display */
  transition: transform 0.5s, opacity 0.5s, display 0.5s;
}
.settings-popover {
  position: fixed;
  margin: auto;
  &::backdrop {
    /* background: rgba(255, 255, 255, 1); */
  }
  & .close-btn {
    position: absolute;
    top: 1em;
    right: 1em;
    line-height: 1;
    /* width: clamp(40px,calc(40px + (60 - 40) / (1648 - 360) * (100cqw - 360px)),60px); */
    width: 60px;
  }
  & .wrap {
    height: 100dvh;
    width: 100dvw;
    padding-inline: 5dvw;
    overflow-y: auto;
    margin-inline: auto;

    background: rgba(255, 255, 255, 1);

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    row-gap: 40px;

    @media (768px <= width) {
      flex-direction: row;
    }

    & ul {
      max-width: 800px;
      display: flex;
      flex-wrap: wrap;
      gap: 40px 0;
      & li {
        flex-basis: calc((100% - 20px * 1) / 2);
        text-align: left;
        & button {
          display: block;
          text-align: left;
          position: relative;
          text-transform: capitalize;
          font-family: 'Roboto Flex', sans-serif;
          /* font-size: 40px; */
          font-size: clamp(20px,calc(20px + (40 - 20) / (1648 - 360) * (100cqw - 360px)),40px);
          line-height: 1.2;
          color: #111;
          & span {
            display: block;
            padding-block: 8px;
            position: relative;
            font-family: YakuHanJP, 'Noto Serif JP', serif;
            /* font-size: 20px; */
            font-size: clamp(13px,calc(13px + (18 - 13) / (1648 - 360) * (100cqw - 360px)),18px);
            &::before {
              position: absolute;
              content: '';
              top: 0;
              left: 0;
              width: 100%;
              height: 2px;
              background: #bebebe;
              transition: all 0.3s ease 0s;
            }
            &::after {
              position: absolute;
              content: '';
              top: 0;
              left: 0;
              width: 0;
              height: 2px;
              background-image: linear-gradient(to right, rgba(247,208,201,.7) , rgba(160,188,97,.7) , rgba(70,190,222,.7));
              transition: all 0.3s ease 0s;
            }
          }
          &:hover {
            & span::after {
              width: 100%;
            }
          }
        }
      }
    }
    & p {
      width: 100%;
      min-width: 320px;
      display: flex;
      flex-direction: row;
      gap: 0 1em;
      & button {
        display: block;
        width: 100%;
        padding-inline: 1em;
        font-size: clamp(10px,calc(10px + (20 - 10) / (1648 - 360) * (100cqw - 360px)),20px);
      }
      @media (768px <= width) {
        max-width: 420px;
        flex-direction: column;
        gap: 40px 0;
      }
    }
  }
}



.t3-modal {
  &:popover-open {
    @starting-style {
      transform: translateY(100dvh);
      opacity: 0;
    }
    transform: translateY(0);
    opacity: 1;
  }
  transform: translateY(-500px);
  opacity: 0;
  transition: transform 0.5s, opacity 0.5s, display 0.5s;
}
.t3-modal {
  position: fixed;
  margin: auto;
  border-radius: 5px;
  padding-inline: 1em;
  &::backdrop {
    background: rgba(51, 51, 51, 0.5);
  }
  & .close-btn {
    position: fixed;
    top: 1em;
    right: 2em;
    line-height: 1;
  }
  & .wrap {
    height: 90dvh;
    max-width: 800px;
    overflow-y: scroll;
    margin-inline: auto;
    padding: 1.5em 1em;
    background: #fff;
    border-radius: 5px;
    position: relative;
  }
  & h3 {
    text-align: center;
    font-family: YakuHanJP, 'Noto Sans JP', sans-serif;
    font-weight: 700;
    margin-bottom: 1em;
    & b {
      display: block;
    }
  }
  & h6,
  & h5,
  & h4 {
    font-weight: 700;
  }
  & section {
    font-size: 14px;
    margin-bottom: 2em;
    & ul,
    & p {
      margin-bottom: 1em;
      & b {
        font-weight: 700;
      }
    }
  }
}


/* ファーストビュー
----------------------------------------------------*/
/* スクロールマーク */
.arrow-container {
  width: 100px;
  height: 100px;
  margin: 0 auto;
  position: absolute;
  bottom: 10dvh;
  left: 0;
  right: 0;
  z-index: 20;
}
.arrow-1 {
  width: 100px;
  height: 100px;
  background: #191919;
  /* border: 1px solid #111; */
  border-radius: 50%;
  position: absolute;
  animation-name: zoomInArrow;
  animation-duration: 2.4s;
  animation-iteration-count: infinite;
  z-index: 10;
}
.arrow-2 {
  width: 60px;
  height: 60px;
  background: url(../img/scroll.svg) no-repeat center center/cover;
  border-radius: 50%;
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 20;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #111;
}
@keyframes zoomInArrow {
  0% {
    opacity: 0;
    transform: scale3d(.4, .4, .4);
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}

/* ファーストビュー用 */
.area {
  overflow: hidden;
  & .wrap{
    position: relative;
    height: 100vh;
  }
}

/* 1個目 */
.waku {
  position: absolute;
  top: 0;
  left:0;
  z-index: 10;
  width: 100%;
  height: 100%;
}
.wala1 {
  z-index: 15;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  & img {
    width: 80%;
  }
}
.wala2 {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  /* font-size: 85px; */
  font-size: clamp(31px,calc(31px + (85 - 31) / (1648 - 360) * (100cqw - 360px)),85px);
  font-weight: 600;
  font-family: YakuHanJP, 'Noto Serif JP', serif;
  & p {

    & span {
      display: block;
      font-size: 20px;
      font-weight: 400;
    }
  }
}
.ue {
  width: 80%;
  max-width: 800px;
  aspect-ratio: 3.6 / 1;
  padding-bottom: 2.4em;
  /* なぜか iPhone でsvgが消えるので指定しない！
  display: grid;
  place-content: center;
  place-items: center;

  display: flex;
  justify-content: center;
  align-items: center;
  */
}
#walat {
  display: block;
  stroke:#555555;
  stroke-width: 1px;
  fill: transparent;
  stroke-dasharray: 1425px;
  stroke-dashoffset: 1425px;
  animation:anim 3s ease-in 0s forwards;
}
@keyframes anim {
  0%{stroke-dashoffset:1425px;fill:#ffffff;}
  60%{stroke-dashoffset:0;fill:#ffffff;}
  70%{stroke:#555555;}
  100%{stroke-dashoffset:0; fill:transparent;stroke:transparent;}
}

/* トーラス */
.item {
  display: flex;
  justify-content: center;
  align-items: center;
  &.item06 {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100%;
    z-index: -1!important;
    & svg {
      transform: rotate(-30deg) translate(clamp(100px,calc(100px + (200 - 100) / (1648 - 360) * (100cqw - 360px)),200px), clamp(100px,calc(100px + (200 - 100) / (1648 - 360) * (100cqw - 360px)),200px));
    }
  }
}
.hidden-background .item06 {
  transition: 1.2s;
  opacity: 0!important;
}


/* 
----------------------------------------------------*/
.leadSection {
  padding-block: var(--sp100-50) var(--sp120-60);
  margin-top: 60px;
  & h2 {
    /* font-size: 80px; */
    font-size: clamp(30px,calc(30px + (80 - 30) / (1648 - 360) * (100cqw - 360px)),80px);
    line-height: 140%;
    text-align: left;
    span {
      overflow: hidden;
    }
  }
  & p {
    margin-top: 1.584em;
    &:first-of-type {
      margin-top: 3em;
    }
    /* font-size: 24px; */
    font-size: clamp(15px,calc(15px + (24 - 15) / (1648 - 360) * (100cqw - 360px)),24px);
    & em {
      display: block;
      line-height: 1.5;
      /* font-size: 40px; */
      font-size: clamp(21px,calc(21px + (40 - 21) / (1648 - 360) * (100cqw - 360px)),40px);
      font-weight: 600;
    }
  }
}

/* 
----------------------------------------------------*/
.briefingSection {
  max-width: 1440px;
  margin-inline: auto;
  padding-bottom: 62px;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  & h2 {
    background-color: #f3f3f3;
    border-radius: 0px 0px 5px 5px;
    padding: 20px 1.5em;
    text-align: center;
    width: fit-content;
    margin-inline: auto;
    font-family: YakuHanJP, 'Noto Sans JP', sans-serif;
    /* font-size: 40px; */
    font-size: clamp(18px,calc(18px + (40 - 18) / (1648 - 360) * (100cqw - 360px)),40px);
  }
  & > div > p:first-of-type {
    margin-top: 40px;
  }
  & > div > p:last-of-type {
    margin-top: 1em;
  }
  & ul {
    margin-top: 1em;
  }
  & dl {
    margin-top: 1em;
  }
  @media (768px <= width) {
    padding-inline: 40px;
  }
}
.ctaButton {
  display: block;
  width: fit-content;
  margin-inline: auto;
  padding: 16px 90px;
  background-color: #ffffff;
  color: #111;
  border: 1px solid #111;
  border-radius: 5px;
  position: relative;
  &::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-image: linear-gradient(to right, rgba(247,208,201,.7) , rgba(160,188,97,.7) , rgba(70,190,222,.7));
    z-index: 10;
    opacity: 0;
    transition-property: opacity;
    transition-duration: 0.4s;
  }
  &:hover {
    color: #111;
    &::before {
      opacity: 1;
    }
  }
  & span {
    position: relative;
    z-index: 20;
  }
}
.with-icon-after {
  display: flex;
  column-gap: 12px;
  align-items: center;
  &::after {
    content: "";
    display: block;
    width: 1.25em;
    height: 1.25em;
    z-index: 20;
  }
  &.arrow-black {
    &::after {
      background: url(../img/btnic_arrow_black.svg) no-repeat center center/contain;
      mix-blend-mode: difference;
    }
    /* &:hover::after {
      mix-blend-mode: normal;
    } */
  }
  &.blank-white::after {
    background: url(../img/btnic_blank-white.svg) no-repeat center center/contain;
  }
}


/* 
----------------------------------------------------*/
.aboutSection {
  padding-block: var(--sp120-60) 0;
  overflow-x: hidden;
  & .leadWrap {
    background-color: #f3f3f3;
    position: relative;
    /* padding-bottom: 120px; */
    padding-bottom: clamp(40px,calc(40px + (120 - 40) / (1648 - 360) * (100cqw - 360px)),120px);
    text-align: center;
    & h2 {
      display: inline-block;
      font-family: YakuHanJP, 'Noto Sans JP', sans-serif;
      background-color: #111111;
      color: #fff;
      padding: 9px 51px;
      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;
    }
    & p {
      margin-top: 40px;
      /* font-size: 31px; */
      font-size: clamp(14px,calc(14px + (31 - 14) / (1648 - 360) * (100cqw - 360px)),31px);
      font-weight: 700;
      line-height: 1.8;
    }
    & .loop_wrap {
      position: absolute;
      left: 0;
      /* font-size: 120px; */
      font-size: clamp(40px,calc(40px + (120 - 40) / (1648 - 360) * (100cqw - 360px)),120px);
      bottom: -0.5em;
      display: flex;
      width: 100vw;
      overflow: hidden;
      z-index: 60;
    }
    & .loop_wrap div {
      flex: 0 0 auto;
      white-space: nowrap;
      font-family: 'Roboto Flex', sans-serif;
      /* font-size: clamp(40px,calc(40px + (120 - 40) / (1648 - 360) * (100cqw - 360px)),120px); */
      line-height: 1;
      background: linear-gradient(91.05deg, #7ab4d5, #b2de78,#fede69,#F7D0C9);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      color: transparent;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      padding-right: 1em;
    }
    & .loop_wrap div:nth-child(odd) {
      animation: loop1 42s -21s linear infinite;
    }
    & .loop_wrap div:nth-child(even) {
      animation: loop2 42s linear infinite;
    }
  }
  & .cntentWrap {
    padding-block: var(--sp200-50) var(--sp100-50);
    & .cntentFlexWrap {
      & .txtContent {
        & section {
          & h3 {
            font-family: YakuHanJP, 'Noto Sans JP', sans-serif;
            /* font-size: 28px; */
            font-size: clamp(20px,calc(20px + (28 - 20) / (1648 - 360) * (100cqw - 360px)),28px);
            font-weight: 700;
          }
          & p {
            margin-top: 1em;
            & img {
              width: 100%;
            }
          }
          & dl {
            margin-top: 24px;
            background-color: #f3f3f3;
            border-radius: 5px;
            padding: 0 22px 20px;
            & dt {
              width: fit-content;
              padding: 2px 12px;
              background-color: #111;
              color: #fff;
              /* font-size: 16px; */
              font-size: clamp(12px,calc(12px + (16 - 12) / (1648 - 360) * (100cqw - 360px)),16px);
              border-bottom-left-radius: 5px;
              border-bottom-right-radius: 5px;
            }
            & dd {
              margin-top: 12px;
              /* font-size: 18px; */
              font-size: clamp(14px,calc(14px + (18 - 14) / (1648 - 360) * (100cqw - 360px)),18px);
              font-weight: 700;
              color: #7e7e7e;
            }
          }
        }
        & section:not(:first-of-type) {
          margin-top: var(--sp80-40);
        }
      }
      & .imgContent {
        display: flex;
        flex-direction: column;
        & h3 {
          order: 2;
          margin-top: 32px;
          font-family: YakuHanJP, 'Noto Sans JP', sans-serif;
          /* font-size: 18px; */
          font-size: clamp(14px,calc(14px + (18 - 14) / (1648 - 360) * (100cqw - 360px)),18px);
          display: flex;
          justify-content: center;
          align-items: center;
          column-gap: 16px;
          &::after,
          &::before {
            content: "";
            display: inline-block;
            flex-basis: 20%;
            height: 1px;
            background-color: #cecece;
          }
        }
        & p {
          order: 1;
          @media (width < 768px) {
            margin-top: 40px;
          }
        }
        & dl {
          order: 3;
          margin-top: 48px;
          & div {
            display: flex;
            align-items: flex-start;
            margin-bottom: 12px;
            & dt {
              flex-basis: 4em;
              padding: 1px 4px;
              border-radius: 5px;
              background-color: #f3f3f3;
              color: #7e7e7e;
              /* font-size: 18px; */
              font-size: clamp(14px,calc(14px + (18 - 14) / (1648 - 360) * (100cqw - 360px)),18px);
              text-align: center;
              text-transform: uppercase;
              margin-right: 18px;
            }
            & dd {
              flex: 1;
              /* font-size: 16px; */
              font-size: clamp(13px,calc(13px + (16 - 13) / (1648 - 360) * (100cqw - 360px)),16px);
            }
          }
        }
      }
      @media (768px <= width) {
        display: flex;
        justify-content: space-between;
        column-gap: 40px;
        & .txtContent {
          flex-basis: 48%;
        }
        & .imgContent {
          flex-basis: 44%;
        }
      }
    }
  }
}
@keyframes loop1 {
  0% {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}
@keyframes loop2 {
  0% {
    transform: translateX(0);
  }
  to {
    transform: translateX(-200%);
  }
}

/* 
----------------------------------------------------*/
.videoSection {
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  & .wrapVideo {
    padding-block: 60px 80px;
    & .videoContent {
      margin-top: 20px;
      & p {
        /* font-size: 16px; */
        font-size: clamp(13px,calc(13px + (16 - 13) / (1648 - 360) * (100cqw - 360px)),16px);
        & iframe {
          display: block;
          width: 100%;
          aspect-ratio: 16 / 9;
        }
      }
      & .caption {
        margin-top: 12px;
      }
    }
    @media (768px <= width) {
      margin-left: calc(50% - 50vw);
      padding-left: calc(50vw - 50%);
      padding-block: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      & h2 {
        flex-basis: 36%;
        padding-block: 3.4%;
        padding-left: 3.4%;
        text-align: left;
      } 
      & .videoContent {
        flex: 1;
        margin-top: 0;
        border-left: 1px solid #000;
        padding-block: 3.4%;
        padding-left: 3.4%;
      }
    }
  }
}




/* 
----------------------------------------------------*/
.messageSection {
  padding-block: var(--sp120-60) 0;
  & > .innerWrap {
    padding-bottom: 100px;
    & .lead {
      width: fit-content;
      margin-top: 55px;
      margin-inline: auto;
      @media (768px <= width) {
        text-align: center;
      }
    }
  }
}
.section03,
.section02,
.section01 {
  padding-top: var(--sp80-40);
  position: relative;
  z-index: 50;
  overflow-x: hidden;
  @media (768px <= width) {
    padding-left: clamp(120px,calc(120px + (400 - 120) / (1648 - 360) * (100cqw - 360px)),400px);
  }
  & .splitContent {
    padding-top: 20px;
    @media (768px <= width) {
      padding-top: 80px;
    }
  }
}
@keyframes FluffyBackground {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
@keyframes FluffyBackgroundReverse {
  0% {opacity: 1;}
  100% {opacity: 0;}
}
.wrapForAnyone {
  padding-block: 0 var(--sp100-50);
  position: relative;
  &::before,
  &::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
  }
  &::after {
    opacity: 0;
  }
  &::before {
    z-index: 5;
  }

  &.kojin::after {
    animation: FluffyBackground 1.2s forwards;
    background-image: linear-gradient(45deg, #34c8d0, #fff0c2); /* 1 */
  }
  &.soshiki::before {
    z-index: 0;
    animation: FluffyBackground 1.2s forwards;
    background-image: linear-gradient(45deg,#FFCB7D, #ffe682, #CAFCFF); /* 2 */
  }
  &.soshiki::after {
    z-index: 5;
    animation: FluffyBackgroundReverse 1.2s forwards;
    background-image: linear-gradient(45deg, #34c8d0, #fff0c2); /* 1 */
  }
  &.syakai::before {
    z-index: 5;
    background-image: linear-gradient(45deg, #FFCB7D, #ffe682,  #CAFCFF); /* 2 */
    animation: FluffyBackgroundReverse 1.2s forwards;
  }
  &.syakai::after {
    z-index: 0;
    animation: FluffyBackground 1.2s forwards;
    background-image: linear-gradient(45deg, #d1f293, #ffe1bb, #fff2e0); /* 3 */
  }
}
/* .splitHeader {
  display: flex;
  align-items: center;
    & h3 {
      font-size: 43px;
      font-weight: 700;
      color: #333333;
    }
} */
.splitHeader {
  & h3 {
    font-family: YakuHanJP, 'Noto Sans JP', sans-serif;
    /* font-size: 36px; */
    font-size: clamp(14px,calc(14px + (36 - 14) / (1648 - 360) * (100cqw - 360px)),36px);
    font-weight: 700;
    color: #333333;

    /* アニメーションスタンバイ */
    /* opacity: 0;
    transform: translateX(-1000px); */

    & .rainbow {
      opacity: 0;
    }
  }

  &.change-fixed {
    & h3 {
      /* アニメーション内容 */
      /* transition: 1.2s;
      opacity: 1;
      transform: translateX(0px); */

      & .rainbow {
        animation-delay: 0.3s;
        animation-duration: 1.2s;
        @media (width < 768px) {
          padding: 4px 16px;
          background-color: #000;
          color: #fff;
          display: inline-block;
          border-radius: 5px;
        }
      }
    }
    @media (768px <= width) {
      position: fixed;
      left: 4.5%;
      top: 46%;
      &.change-absolute {
        display: none;
      }
    }
  }
}

/* .change-fixed h3 {
  position: fixed;
  left: 10%;
  top: 50%;
} */
/* .change-fixed h3 {
  position: fixed;
  left: 5%;
  top: 46%;
  transition-duration: 0.6s;
  opacity: 1;
} */
.splitHeader.change-fixed.change-hidden h3 {
  opacity: 0;
  transition-duration: 0.2s;
}
.splitHeader.change-fixed.change-absolute h3 {
  visibility: hidden;
  opacity: 0;
  transition-duration: 0.2s;
}

.splitContent {
  & h4 {
    font-family: YakuHanMP, 'Noto Serif JP', serif;
    /* font-size: 80px; */
    font-size: clamp(30px,calc(30px + (80 - 30) / (1648 - 360) * (100cqw - 360px)),80px);
    font-weight: 700;
    line-height: 1.2;

    & span {
      opacity: 0;
    }
    &.isAnimation {
      & span {
        animation: textanimation 1s forwards;
        &:nth-child(1) {animation-delay: 0.1s}
        &:nth-child(2) {animation-delay: 0.15s}
        &:nth-child(3) {animation-delay: 0.2s}
        &:nth-child(4) {animation-delay: 0.25s}
        &:nth-child(5) {animation-delay: 0.3s}
        &:nth-child(6) {animation-delay: 0.35s}
        &:nth-child(7) {animation-delay: 0.4s}
        &:nth-child(8) {animation-delay: 0.45s}
        &:nth-child(9) {animation-delay: 0.5s}
        &:nth-child(10) {animation-delay: 0.55s}
        &:nth-child(11) {animation-delay: 0.6s}
        &:nth-child(12) {animation-delay: 0.65s}
        &:nth-child(13) {animation-delay: 0.7s}
        &:nth-child(14) {animation-delay: 0.75s}
        &:nth-child(15) {animation-delay: 0.8s}
        &:nth-child(16) {animation-delay: 0.85s}
        &:nth-child(17) {animation-delay: 0.9s}
        &:nth-child(18) {animation-delay: 0.95s}
        &:nth-child(19) {animation-delay: 1.0s}
        &:nth-child(20) {animation-delay: 1.05s}
      }
    }

    /* &.animation-rainbow::before {
      animation-duration: 2s;
      animation-delay: 1s;
    } */
    /* アニメーション */
    /* opacity: 0;
    transform: translateX(1000px);
    &.isAnimation {
      transition: 1.2s 0.5s;
      opacity: 1;
      transform: translateX(0px);
    } */
  }
  & h5 {
    /* font-size: 28px; */
    font-size: clamp(16px,calc(16px + (28 - 16) / (1648 - 360) * (100cqw - 360px)),28px);
    font-weight: 700;
    margin-bottom: 10px;
  }
  & > section > section {
    margin-top: 20px;
    max-width: 800px;
    @media (768px <= width) {
      margin-top: 60px;
    }
  }
  /* & > section > section {
    opacity: 0;
    transition-property: all;
    transition-duration: 0.6s;
  }
  & > section > section.animation-cccc {
    opacity: 1;
  } */
  & ul,
  & p:not(:first-of-type) {
    margin-top: 20px;
    @media (768px <= width) {
      margin-top: 40px;
    }
  }
  & ul + p {
    margin-top: 0;
  }
  & ul:not(.nomark) > li {
    position: relative;
    padding-left: 1em;
  }
  & ul:not(.nomark) > li:before {
    content: "";
    position: absolute;
    top: 0.7em;
    left: 0;
    width: 0.3em;
    height: 0.3em;
    background-color: #111111;
    border-radius: 50%;
  }
}

@keyframes textanimation {
  0% {
      opacity: 0;
  }
  100% {
      opacity: 1;
  }
}

/* 
----------------------------------------------------*/
.studentSection {
  padding-block: var(--sp100-50) 0;
  & .controlWrap {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    & h2 {
      text-align: left;
    }
  }
}


/* 
----------------------------------------------------*/
.graduateSection {
  padding-block: var(--sp100-50) 0;
  & h2 {
    text-align: left;
  }
}
.riverCover {
  margin-top: 40px;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  display: flex;
  flex-wrap: wrap;
  & li {
    flex-basis: 50%;
    /* position: relative;
    background: no-repeat center center/cover;
    &:nth-child(1) {background-image: url(../img/student/01.jpg);}
    &:nth-child(2) {background-image: url(../img/student/02.jpg);}
    &:nth-child(3) {background-image: url(../img/student/03.jpg);}
    &:nth-child(4) {background-image: url(../img/student/04.jpg);}
    &:nth-child(5) {background-image: url(../img/student/05.jpg);}
    &:nth-child(6) {background-image: url(../img/student/06.jpg);}
    &:nth-child(7) {background-image: url(../img/student/07.jpg);}
    &:nth-child(8) {background-image: url(../img/student/08.jpg);} */
    & a {
      display: block;
      width: 100%;
      height: 100%;
      overflow: hidden;
      /* display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      aspect-ratio: 4 / 3;
      position: relative; */
      /* &::before {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 9999px;
        position: absolute;
        left: 0;
        top: 0;
        background: no-repeat center center/cover;
        filter: grayscale(1);
        &:nth-child(1) {background-image: url(../img/student/01.jpg);}
        &:nth-child(2) {background-image: url(../img/student/02.jpg);}
        &:nth-child(3) {background-image: url(../img/student/03.jpg);}
        &:nth-child(4) {background-image: url(../img/student/04.jpg);}
        &:nth-child(5) {background-image: url(../img/student/05.jpg);}
        &:nth-child(6) {background-image: url(../img/student/06.jpg);}
        &:nth-child(7) {background-image: url(../img/student/07.jpg);}
        &:nth-child(8) {background-image: url(../img/student/08.jpg);}
      } */
      & img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        /* @media (1024px < width) {
          filter: grayscale(1);
        } */
      }
      &:hover {
        & img {
          transform: scale(1.1);
          transition-property: all;
          transition-duration: 0.6s;
          filter: grayscale(0);
        }
      }
    }
    /* &::before {
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      border-radius: 9999px;
      position: absolute;
      left: 0;
      top: 0;
      background: url(../img/student/01.jpg) no-repeat center center/cover;
      z-index: 30;
    } */
  }
  @media (768px <= width) {
    & li {
      flex-basis: 25%;
    }
  }
}


/* 
----------------------------------------------------*/
.academiaSection {
  padding-block: var(--sp200-50) var(--sp200-50);
  /* .animation-big {
    & p {
      width: 100vw;
      margin: 0 calc(50% - 50vw);
      & img {
        transition: max-width 3s ease-out;
        transform-origin: center;
        max-width: 100%;
      }
    }
  } */
  .leadVisual {
    padding-block: var(--sp40-20) var(--sp40-20);
    display: flex;
    align-items: center;
    & img {
    }
  }
  .contensWrap {
    & h3 {
      font-family: YakuHanJP, 'Noto Sans JP', sans-serif;
      /* font-size: 28px; */
      font-size: clamp(16px,calc(16px + (28 - 16) / (1648 - 360) * (100cqw - 360px)),28px);
      font-weight: 400;
      line-height: 1.4;
    }
    & .profileSection {
      /* font-size: 18px; */
      font-size: clamp(14px,calc(14px + (18 - 14) / (1648 - 360) * (100cqw - 360px)),18px);
      & p {
        margin-top: var(--sp40-20);
      }
      & dl {
        margin-top: var(--sp40-20);
        /* font-size: 20px; */
        font-size: clamp(14px,calc(14px + (18 - 14) / (1648 - 360) * (100cqw - 360px)),18px);
        & div {
          display: flex;
          & dt {
            margin-right: 0.5em;
            min-width: 6em;
          }
        }
      }
    }
    & .aimSection {
      & p {
        margin-top: var(--sp40-20);
        & img {
          width: 80%;
          margin-inline: auto;
        }
        @media (768px <= width) {
          & img {
            width: 70%;
            margin-inline: 0 auto;
          }
        }
      }
      & dl {
        margin-top: var(--sp40-20);
        & div {
          display: flex;
          align-items: center;
          margin-bottom: 12px;
          & dt {
            flex-basis: 4em;
            padding: 1px 4px;
            border-radius: 5px;
            background-color: #f3f3f3;
            color: #7e7e7e;
            /* font-size: 18px; */
            font-size: clamp(14px,calc(14px + (18 - 14) / (1648 - 360) * (100cqw - 360px)),18px);
            text-align: center;
            text-transform: uppercase;
            margin-right: 18px;
          }
          & dd {
            flex: 1;
            /* font-size: 16px; */
            font-size: clamp(13px,calc(13px + (16 - 13) / (1648 - 360) * (100cqw - 360px)),16px);
          }
        }
      }
      @media (width < 768px) {
        margin-top: 40px;
      }
    }
    @media (768px <= width) {
      display: flex;
      justify-content: space-between;
      & .profileSection {
        flex-basis: 46%;
      }
      & .aimSection {
        flex-basis: 46%;
      }
    }
  }
}


/* 
----------------------------------------------------*/
.courseSection {
  padding-block: 0 var(--sp100-50);
  /* background-color: #F3F3F3; */
  background: #f3f3f3 url(../img/bg_agenda.jpg) no-repeat center center/cover;
  @media (768px <= width) {
    padding-top: var(--sp100-50);
  }
  & .heading {
    position: relative;
    & h2 {
      /* font-size: 40px; */
      font-size: clamp(80px,calc(80px + (176 - 80) / (767 - 360) * (100cqw - 360px)),176px);
      line-height: 0.75;
      color: #cecece;
      letter-spacing: 0.15em;
      & span {
        display: block;
        margin-top: 24px;
        letter-spacing: 0.3em;
      }
      @media (768px <= width) {
        line-height: 1.375;
        /* font-size: 170px; */
        font-size: clamp(80px,calc(80px + (170 - 80) / (1648 - 768) * (100cqw - 768px)),170px);
        position: absolute;
        left: 0;
        top: 4em;
        transform-origin: left top;
        transform: rotate(270deg);
        text-align: right;
        & span {
          margin-top: 0;
          transform: translateX(-30px);
          color: #7e7e7e;
        }
      }
    }
    & dl {
      margin-top: 40px;
      max-width: 1080px;
      & div {
        display: flex;
        align-items: center;
        border-bottom: 1px solid #cecece;
        padding: 30px 8px;
        & dt {
          flex-basis: 3.6em;
          /* padding-right: 1em; */
          font-family: YakuHanJP, 'Noto Serif JP', serif;
          /* font-size: 80px; */
          font-size: clamp(24px,calc(24px + (80 - 24) / (1648 - 360) * (100cqw - 360px)),80px);
          font-weight: 700;
          line-height: 1.2;
          text-align: right;
          & .blt {
            vertical-align: text-top;
          }
        }
        & dd {
          flex: 1;
          padding-top: 0.2em;
          padding-left: 1.4em;
        }
      }
      & div:last-of-type {
        border-bottom: 0;
      }
      @media (768px <= width) {
        margin-left: calc(200px + clamp(80px,calc(80px + (170 - 80) / (1648 - 768) * (100cqw - 768px)),170px));
      }
    }
  }
}
.curriculumSection {
  margin-top: 60px;
  & h4 {
    border-bottom: 1px solid #b5b5b5;
    margin-bottom: 8px;
    font-weight: 600;
  }
  & section {
    margin-bottom: var(--sp40-20);
  }
}
.curriculumWrap {
  margin-top: 30px;
  /* font-size: 16px; */
  font-size: clamp(11px,calc(11px + (16 - 11) / (1648 - 360) * (100cqw - 360px)),16px);
  @media (768px <= width) {
    display: flex;
    column-gap: 40px;
    & > div {
      flex-basis: calc((100% - 40px * 3) / 4);
    }
  }
  @media (width < 768px) {
    display: block;
    height: 340px;
    overflow: hidden;
    &.all {
      height: auto;
      overflow: auto;
    }
  }
}

 .openButtonWrap {
   padding: 122px 0 0;
   /* background: linear-gradient(to bottom, rgba(242, 242, 242, 0.7) 0%, rgba(242, 242, 242, 1) 100%); */
   position: relative;
   margin-top: -100px;
   @media (768px <= width) {
    display: none;
   }
   & button {
    background-color: #111;
    color: #fff;
    margin-inline: auto;
    padding: 8px 32px;
    border-radius: 5px;
    &:hover {
      background-color: #111;
      color: #fff; 
    }
  }
}

 /* #openButton::before,
 #openButton::after {
   content: '';
   position: absolute;
   top: 50%;
   display: inline-block;
   width: 50px;
   height: 1px;
   background-color: #111;
 }
 #openButton::before {
   left: -50px;
 }
 #openButton::after {
   right: -50px;
 } */



/* 
----------------------------------------------------*/
/* .achievementSection {
  margin-top: 100px;
} */

/* 
----------------------------------------------------*/
.t3programSection {
  padding-block: var(--sp100-50) var(--sp100-50);
  background: linear-gradient(rgba(51, 51, 51, 0.8),rgba(51, 51, 51, 0.8)),url(../img/bg_t3.jpg);
  background-size: cover;
  color: #fff;
  & .about {
    margin-top: var(--sp80-40);
    display: flex;
    flex-direction: column;
    & > div {
      order: 2;
      flex: 1;
      & p {
        line-height: 1.8;
        &:has(.modal){
          margin-top: 30px;
        }
      }
      & .modal {
        width: fit-content;
        padding: 16px 90px;
        background-color: #ffffff;
        color: #111;
        border: 1px solid #111;
        border-radius: 5px;
        position: relative;
        &::before {
          content: "";
          display: block;
          width: 100%;
          height: 100%;
          position: absolute;
          left: 0;
          top: 0;
          background-image: linear-gradient(to right, rgba(247,208,201,.7) , rgba(160,188,97,.7) , rgba(70,190,222,.7));
          z-index: 10;
          opacity: 0;
          transition-property: opacity;
          transition-duration: 0.4s;
        }
        &:hover {
          color: #111;
          &::before {
            opacity: 1;
          }
        }
        & span {
          position: relative;
          z-index: 20;
        }
      }
    }
    & > p {
      order: 1;
      margin-bottom: 40px;
    }
    @media (768px <= width) {
      flex-direction: row-reverse;
      column-gap: 34px;
      & > p {
        flex-basis: 50%;
        margin-bottom: 0;
      }
    }
  }
  & section {
    margin-top: var(--sp160-80);
    & h3 {
      font-family: 'Roboto Flex', sans-serif;
      /* font-size: 80px; */
      font-size: clamp(30px,calc(30px + (80 - 30) / (1648 - 360) * (100cqw - 360px)),80px);
      line-height: 1.375;
      & .jp {
        display: block;
        font-size: 18px;
      }
    }
    & p {
      margin-top: 1em;
      &:first-of-type {
        margin-top: 1.5em;
      }
    }
    & ul {
      margin-top: 1em;
    }
  }
}


/* 
----------------------------------------------------*/
.scheduleSection {
  padding-block: var(--sp100-50) 0;
}
.scheduleDetailsWrap {
  margin-top: 60px;
  border: 1px solid #cecece;
  border-radius: 5px;
  padding-block: clamp(5px,calc(5px + (10 - 5) / (1648 - 360) * (100cqw - 360px)),10px);
  padding-inline: clamp(24px,calc(24px + (48 - 24) / (1648 - 360) * (100cqw - 360px)),48px);
  & > section {
    padding: clamp(20px,calc(20px + (40 - 20) / (1648 - 360) * (100cqw - 360px)),40px) 0 clamp(21px,calc(21px + (43 - 21) / (1648 - 360) * (100cqw - 360px)),43px);
    &:not(:first-of-type) {
      border-top: 1px solid #b5b5b5;
    }
    & h3 {
      padding-right: 48px;
      font-family: YakuHanJP, 'Noto Sans JP', sans-serif;
      font-size: 20px;
      font-weight: 600;
    }
    & div p:not(:last-of-type) {
      margin-bottom: 1em;
    }
    @media (768px <= width) {
      display: flex;
      & h3 {
        width: 20%;
        min-width: 200px;
        text-align: right;
        padding-top: 4px;
      }
      & div {
        flex: 0.9;
      }
    }
  }
}
.contentSection {
  padding-block: var(--sp100-50) var(--sp100-50);
  & .innerWrap {
    border: 1px solid #cecece;
    border-radius: 5px;
    padding-top: clamp(24px,calc(24px + (48 - 24) / (1648 - 360) * (100cqw - 360px)),48px);
    padding-bottom: clamp(5px,calc(5px + (10 - 5) / (1648 - 360) * (100cqw - 360px)),10px);
    padding-inline: clamp(24px,calc(24px + (48 - 24) / (1648 - 360) * (100cqw - 360px)),48px);
    & h2 {
      text-align: left;
      color: #7e7e7e;
      font-size: clamp(30px,calc(30px + (80 - 30) / (1648 - 360) * (100cqw - 360px)),80px);
      & .jp {
        font-size: clamp(12px,calc(12px + (16 - 12) / (1648 - 360) * (100cqw - 360px)),16px);
      }
    }
    & .contentDetailsWrap {
      margin-top: 8px;
      & dl {
        & div {
          padding: clamp(20px,calc(20px + (40 - 20) / (1648 - 360) * (100cqw - 360px)),40px) 0 clamp(21px,calc(21px + (43 - 21) / (1648 - 360) * (100cqw - 360px)),43px);
          &:not(:first-of-type) {
            border-top: 1px solid #b5b5b5;
          }
          & dt {
            font-family: YakuHanJP, 'Noto Sans JP', sans-serif;
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 0.5em;
          }
          & dd {
            & b {
              background-color: #f3f3f3;
              padding: 0px 16px 2px;
              border-radius: 5px;
              margin-right: 0.5em;
              font-size: clamp(14px,calc(14px + (18 - 14) / (1648 - 360) * (100cqw - 360px)),18px);
              @media (768px <= width) {
                display: block;
                width: fit-content;
              }
            }
          }
          @media (768px <= width) {
            display: flex;
            & dt {
              width: 20%;
              min-width: 10em;
              padding-right: 2em;
              text-align: right;
              margin-bottom: 0;
            }
            & dd {
              flex: 1;
            }
          }
        }
      }
    }
  }
}

/* 
----------------------------------------------------*/
.formSection {
  padding-block: var(--sp100-50) var(--sp100-50);
  background-color: #F3F3F3;
  & form {
    margin-top: var(--sp80-40);
    max-width: 640px;
    margin-inline: auto;
    /* font-size: 20px; */
    font-size: clamp(14px,calc(14px + (20 - 14) / (1648 - 360) * (100cqw - 360px)),20px);
    & > div,
    & > p {
      margin-bottom: clamp(32px,calc(32px + (60 - 32) / (1648 - 360) * (100cqw - 360px)),60px);
      & label.diamond {
        display: block;
        margin-bottom: 20px;
        font-weight: 600;
      }
      & .hissu {
        display: inline-block;
        padding: 0px 6px;
        margin-left: 10px;
        border-radius: 5px;
        background-color: #111;
        color: #fff;
        line-height: 1;
        padding: 4px 10px 6px;
        vertical-align: middle;
        transform: translateY(-2px);
        font-size: clamp(12px,calc(12px + (16 - 12) / (1648 - 360) * (100cqw - 360px)),16px);
        font-weight: 400;
      }
      & span.wrap {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        gap: 16px 16px;
        & span {
          flex-basis: 40%;
        }
        @media (768px <= width) {
          gap: 10px 32px;
        }
      }
    }
    & textarea,
    & input {
      background-color: #fff;
      border: 1px solid #B2B2B2;
    }
    & input[type="text"] {
      width: 100%;
      max-width: 620px;
      padding: 2px 10px;
      border-radius: 5px;
    }
    & textarea {
      width: 100%;
      max-width: 1024px;
    }
    & textarea[name="user-other_detail"] {
      margin-top: 12px;
      display: block;
      width: 100%;
      padding: 4px;
      line-height: 1.4;
    }
    & textarea[name="user-detail"] {
      margin-top: 12px;
      display: block;
      width: 100%;
      padding: 4px;
      line-height: 1.4;
    }
    & input[type="checkbox"],
    & input[type="radio"] {
      width: 22px;
      height: 22px;
      transform: translateY(-2px);
      margin-right: 10px;
      accent-color: #575757;
      cursor: pointer;
      & + label {
        cursor: pointer;
      }
    }
    & .aBtn {
      margin-top: 40px;
    }
    & .submit_btn {
      width: fit-content;
      margin-inline: auto;
      padding: 16px 90px;
      &[disabled] {
        /* background-color: #ececec;
        color: #cccccc;
        cursor: default;
        &:hover {
          background-color: #ececec;
          color: #cccccc;
        } */
        position: relative;
        &::before {
          content: "規約への同意が必要です";
          display: flex;
          justify-content: center;
          align-items: center;
          color: #fff;
          width: 100%;
          height: 100%;
          position: absolute;
          left: 0;
          top: 0;
          background-color: rgba(0,0,0,.7);
          background-image: repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 4px,
            rgba(0,0,0, .25) 4px,
            rgba(0,0,0, .25) 8px
          );
          border-radius: 5px;
          z-index: 60;
          cursor: default;
        }
      }
      background-color: #ffffff;
      color: #111;
      border: 1px solid #111;
      border-radius: 5px;
      &:hover::after {
        mix-blend-mode: difference;
      }
      &.consent {
        &:hover {
          background-color: #111;
          color: #ffffff;
        }
      }
    }
    & .irreducibleWrap {
      display: none;
      & .irreducible {
        border: 1px solid #bebebe;
        background-color: #fff;
        height: 16em;
        overflow-y: scroll;
        padding: 1.5em;
        font-size: 13px;
        & h3 {
          text-align: center;
          font-family: YakuHanJP, 'Noto Sans JP', sans-serif;
          font-weight: 700;
          margin-bottom: 1em;
        }
        & p {
        }
        & dl dt {
          margin-top: 1em;
          font-weight: 700;
        }
      }
      & > p {
        margin-top: 8px;
      }
    }
  }
}

/* メディア
----------------------------------------------------*/
.mediaSection {
  padding-block: var(--sp100-50) var(--sp100-50);
  & h3 {
    font-family: 'Roboto Flex', sans-serif;
    /* font-size: 80px; */
    font-size: clamp(30px,calc(30px + (80 - 30) / (1648 - 360) * (100cqw - 360px)),80px);
    line-height: 1.3;
    & .jp {
      display: block;
      font-size: clamp(12px,calc(12px + (18 - 12) / (1648 - 360) * (100cqw - 360px)),18px);
    }
  }
}


.section-lineup {
  overflow: hidden;
  /* width: 100vw; */
  margin-top: 40px;
  margin-left: auto;
  margin-right: calc(50% - 50vw);
  & .voice-carousel {
    & .slick-slide {
      border: 1px solid #ccc;
      padding: 20px 40px;
      /* font-size: 20px; */
      font-size: clamp(14px,calc(14px + (20 - 14) / (1648 - 360) * (100cqw - 360px)),20px);
      margin-right: 24px;
      @media (768px <= width) {
        padding: 80px 60px;
      }
      @media (1024px <= width) {
        padding: 120px 82px;
      }
      & b {
        display: block;
        margin-top: 1em;
        &::first-letter {
          color: #ccc;
        }
      }
    }
  }
  & .youtube-carousel,
  & .note-carousel {
    & .slick-slide {
      margin-right: 24px;
    }
  }
  & .note-carousel {
    & .slick-slide {
      & a {
        display: flex;
        flex-direction: column;
        & h4 {
          order: 2;
          /* font-size: 18px; */
          font-size: clamp(14px,calc(14px + (18 - 14) / (1648 - 360) * (100cqw - 360px)),18px);
          font-weight: 700;
        }
        & .thumb {
          order: 1;
          margin-bottom: 8px;
          border: 1px solid #fff;
        }
        & .date {
          order: 3;
          /* font-size: 16px; */
          font-size: clamp(13px,calc(13px + (16 - 13) / (1648 - 360) * (100cqw - 360px)),16px);
        }
        &:hover {
          & .thumb {
            overflow: hidden;
            border-color: #bebebe;
            & img {
              transition: 0.6s;
              transform: scale(1.1);
              filter: brightness(1.2);
            }
          }
        }
      }
    }
  }
  & .youtube-carousel {
    & .slick-slide {
      & a {
        display: block;
        overflow: hidden;
        position: relative;
        border: 1px solid #fff;
        &:hover {
          border-color: #bebebe;
          & img {
            transition: 0.6s;
            transform: scale(1.1);
            filter: brightness(1.2);
          }
        }
        &::before {
          content: "";
          display: flex;
          justify-content: center;
          align-items: center;
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          z-index: 80;
          background: url(../img/ic_youtube.svg) no-repeat center center/12%;
        }
      }
    }
  }
  & .slick-list {
    overflow: visible;
  }
}
.viewMore {
  width: fit-content;
  margin-inline: auto;
  padding: 16px 90px;
  background-color: #333;
  color: #fff;
  border: 1px solid #333;
  border-radius: 5px;
  position: relative;
  &::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-image: linear-gradient(to right, rgba(247,208,201,.7) , rgba(160,188,97,.7) , rgba(70,190,222,.7));
    z-index: 10;
    opacity: 0;
    transition-property: opacity;
    transition-duration: 0.4s;
  }
  &:hover {
    color: #fff;
    &::before {
      opacity: 1;
    }
    /* background-color: #fff;
    color: #333;
    &:hover::after {
      mix-blend-mode: difference;
    } */
  }
  &::after {
    z-index: 20;
  }
  & span {
    position: relative;
    z-index: 20;
  }
}
.noteSection {
  padding-block: var(--sp100-50) 0;
}
.youtubeSection {
  padding-block: var(--sp100-50) 0;
}
.youtubeSection,
.noteSection {
  & .controlWrap {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
  }
  & .viewMore {
    margin-top: 40px;
  }
}

.webmagazineSection {
  padding-block: var(--sp100-50) 0;
  & p a:hover {
    filter: brightness(105%);
  }
}
.bookSection {
  padding-block: var(--sp100-50) 0;
  & section {
    margin-top: 40px;
    background-color: #F4F4F4;
    padding: 3.8% 4.5%;
    border-radius: 5px;
    display: flex;
    flex-direction: column-reverse;
    justify-content: space-between;
    column-gap: 7.2%;
    @media (768px <= width) {
      flex-direction: row-reverse;
    }
    & .flexChild {
      flex: 1;
      & h4 {
        font-size: clamp(20px,calc(20px + (40 - 20) / (1648 - 360) * (100cqw - 360px)),40px);
        font-weight: bold;
        margin-bottom: 0.4em;
      }
      & p {
        font-size: clamp(12px,calc(12px + (18 - 12) / (1648 - 360) * (100cqw - 360px)),18px);
        margin-bottom: 1.6em;
      }
      & p:last-of-type {
        margin-block: 2em 0.5em;
        & .viewMore {
          padding: 16px 32px;
          @media (768px <= width) {
            margin-inline: 0 auto;
          }
        }
      }
    }
    & > p {
      flex-basis: 27.2%;
      @media (width < 768px) {
        margin-bottom: 2.4%;
      }
      & img {
        max-width: 200px;
        margin-inline: auto;
        @media (768px <= width) {
          max-width: 100%;
        }
      }
    }
  }
}
.mailmagazineSection {
  padding-block: var(--sp100-50) 0;
  & .wrap {
    margin-top: 40px;
    & form {
      /* font-size: 18px; */
      font-size: clamp(14px,calc(14px + (18 - 14) / (1648 - 360) * (100cqw - 360px)),18px);
      & .parts {
        margin-top: 16px;
        display: flex;
        gap: 8px;
        & [type="text"] {
          flex: 1;
          border: 1px solid #111;
          padding: 4px 8px;
        }
        & [type="submit"] {
          flex-basis: 20%;
          background-color: #111;
          color: #fff;
          border: 1px solid #111;
          border-radius: 5px;
          &:hover {
            background-color: #fff;
            color: #111;
          }
        }
      }
    }
    @media (1024px <= width) {
      display: flex;
      column-gap: 76px;
      & p {
        flex-basis: 52%;
      }
      & form {
        flex: 1;
      }
    }
  }
}

/* フッター
----------------------------------------------------*/
footer {
  padding-block: 40px;
  background-color: #333333;
  color: #fff;
  text-align: center;
  /* font-size: 16px; */
  font-size: clamp(12px,calc(12px + (16 - 12) / (1648 - 360) * (100cqw - 360px)),16px);
  & .footLogo {
    width: 40%;
    max-width: 240px;
    margin-inline: auto;
    margin-bottom: 8px;
  }
}


/* モーダルウィンドウ
----------------------------------------------------*/
.modal-overlay{
  visibility: hidden;
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0,0,0,.7);
  z-index: 999;
 transition: .3s;
 opacity:0;
}
.modal-overlay.active{
  visibility: visible;
  transition: .3s;
  opacity: 1;
}
.modal-window {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background-color: #fff;
  width: 96%;
  max-width: 1200px;
  height: 90%;
  margin: 0;
  padding: 30px;
  overflow-y: auto;
}
.modaleClose {
  margin-top: 40px;
}
/* #close-01 {
   position: absolute;
   width: 20px;
   height: 20px;
   top: 20px;
   right: 20px;
}
#close-01::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 25px;
  height: 1px;
  background-color: #000;
  transform: translate(-50%, -50%) rotate(45deg);
}
#close-01::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 25px;
  height: 1px;
  background-color: #000;
  transform: translate(-50%, -50%) rotate(-45deg);
} */
.modal-opened {
   overflow-y: hidden; /*背景を固定*/
}




.delay-01 {animation-delay:0.1s;}
.delay-02 {animation-delay:0.2s;}
.delay-03 {animation-delay:0.3s;}
.delay-04 {animation-delay:0.4s;}
.delay-05 {animation-delay:0.5s;}
.delay-06 {animation-delay:0.6s;}
.delay-07 {animation-delay:0.7s;}
.delay-08 {animation-delay:0.8s;}
.delay-09 {animation-delay:0.9s;}
.delay-1 {animation-delay:1s;}