/*= webfont =*/
/*@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&display=swap');*/

@keyframes fade_in {
  0% {
    opacity: 0;
    transform: translateX(100px);
  }
  25% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

#body-wrapper {
  background-image: repeating-linear-gradient(45deg, #d046461a, #d046461a 6px, transparent 6px, transparent 16px, #22318b1a 16px, #22318b1a 22px, transparent 22px, transparent 32px);
  .inner_box {
    max-width:1100px;
    @media screen and (max-width: 1131px) {
      padding: 0 1.6rem;
    }
  }
  p {
    margin: 0;
  }

  .section {
    padding: max(2rem,10cqi) 0 0;
    .section-title {
      padding-top: max(1rem,4cqi);
      text-align: center;
    }
    @media screen and (max-width: 1023px) {
      .detail-header .inner_box,
      .section-title .inner_box{
        padding: 0;
      }
      .section-title picture,
      .section-title img,
      .section-bottom picture,
      .section-bottom img,
      .detail-header picture,
      .detail-header img{
        width: 100%;
      }
    }
  }
  .link-btn{
    text-align: center;
  }
  picture {
    display: inline-block;
  }

  .section-feature {
    padding-top: 0;
    .section-body {
      background: #fce9ea;
      text-align: center;
      picture {
        padding-top: max(1rem,4cqi);
      }
      @media screen and (min-width:1024px){
        display: grid;
        grid-template-columns: repeat(2,1fr);
        grid-template-areas: "main main"
        "name btn";
        align-items: center;
        padding-bottom: 2rem;
      }
    }
    .feature-main{
      grid-area: main;
    }
    .feature-name {
      grid-area: name;
      @media screen and (min-width:1024px){
        text-align: right;
        padding-right: 5%;
      }
    }
    .feature-main,.feature-name {
      @media screen and (max-width:1023px){
        padding: 0 12.5%;
      }
    }
    .link-btn {
      grid-area: btn;
      @media screen and (min-width:1024px){
        text-align: left;
        padding-left: 5%;
      }
    }
    .feature-btn {
      display: inline-block;
      @media screen and (max-width:1023px){
        padding: max(1rem,4cqi) 5%;
      }
    }
  }
  .section-course{
    @media screen and (min-width:1024px){
      padding:5rem 0 0;
    }
    .section-title {
      padding-bottom: max(1rem,4cqi);
      @media screen and (min-width:1024px){
        padding:0 0 1rem;
      }
    }
  }
  .course-detail {
    p {
      text-align: center;
    }
    .detail-header {
      @media screen and (min-width:1024px){
        text-align: right;
        picture {
          position: relative;
          z-index: 2;
        }
      }
    }
    .detail-body {
      text-align: center;
      padding-bottom:max(5rem,9.5cqi);
      @media screen and (min-width:1024px){
        position: relative;
        padding-bottom: 2.5rem;
        &:before{
          content: "";
          width:100%;
          height: 0.375rem;
          position: absolute;
          left: 0;
          top: -0.375rem;
          background: var(--white);
          z-index: 1;
        }
      }
    }
    .detail-body .inner_box {
      @media screen and (min-width:1024px){
        display: grid;
        gap:4rem;
        grid-template-columns: repeat(2,1fr);
        grid-template-areas: "img ttl"
        "btn btn";
        align-items: baseline;
      }
    }
    .course-detail-title {
      position: relative;
      top: max(-2rem,-7cqi);
      grid-area: ttl;
      @media screen and (min-width:1024px){
        top:-.5rem;
      }
    }
    .course-detail-img {
      margin-bottom: max(2rem,7cqi);
      grid-area: img;
      @media screen and (min-width:1024px){
        margin: 0;
      }
    }
    .link-btn{
      grid-area: btn;
      a {
        display: inline-block;
        max-width: 438px;
      }
    }
  }

  .section-course1 {
    .detail-body {
      background:#E3F0F1;
    }
    .detail-body .inner_box {
      @media screen and (min-width:1024px){
        padding-top:2rem;
      }
    }
  }

  .section-course2 {
    .detail-body {
      background:#FCEAEF;
    }
    .detail-header {
      background:#E3F0F1;
    }
  }

  .section-course3{
    .detail-body {
      background:#DCEBF4;
      @media screen and (min-width:1024px){
        padding-bottom: 5.3rem;
      }
    }
    .detail-header {
      background:#FCEAEF;
    }
  }

  .section-point {
    background: #fcebec;
    padding-top: 0;
    &,p{
      text-align: center;
    }
    .section-detail {
    }
    .section-body {
      padding-bottom: 1rem ;
    }
    .topic-title {
      padding-top: max(3rem,12cqi);
      grid-area:ttl;
    }
    .topic-img {
      padding: max(1rem,3.5cqi) 0;
      grid-area:img;
    }
    .link-btn {
      grid-area:btn;
    }
    .topic2 {
      padding-top: max(3rem,12cqi);
    }
    @media screen and (min-width:1024px){
      .section-title {
        text-align: left;
        position: relative;
      }
      .section-title:before {
        content: "";
        width: 100%;
        height: 7px;
        background: #fcebec;
        position: absolute;
        left: 0;
        bottom: 0;
        z-index: 2;
      }
      .section-title:after {
        content: "";
        width: 100%;
        height: 60px;
        background-image: url(../img/front/point_headr_bg.png);
        background-size: 14px;
        background-repeat: repeat;
        background-color: #000;
        position: absolute;
        left: 0;
        bottom: 0;
        z-index: 1;
      }
      .section-title picture {
        position: relative;
        z-index: 3;
      }
      .point-topic {
        display: grid;
        grid-template-columns: repeat(2,1fr); 
        grid-template-areas: "img ttl"
        "img btn";
        align-items:center;
        padding-top: 4.375rem;
      }
      .topic-title {
        padding:0 1.625rem 0 2.5rem;
      }
      .topic-img {
        padding: 0;
      }
      .link-btn {
        padding:0 2.75rem 1.6rem 4rem;
      }
    }
  }
  .section-point1 {
    .section-title {
      background: var(--white);
      padding-top: 0;
      @media screen and (min-width:1024px){
        padding-top: 1rem;
      }
    }
  }
  .section-point2 {
    .section-title {
      padding-top:  max(3rem,12cqi);
      background: #fcebec;
      @media screen and (min-width:1024px){
        padding-top:5.5rem;
      }
    }
    .section-body{
      padding-bottom: max(4.6rem,17cqi);
      @media screen and (min-width:1024px){
        padding-bottom: 4.375rem;
      }
    }
    .topic-description p{
      font-family: "Zen Maru Gothic", sans-serif;
      font-weight: 500;
      padding-top: max(2rem,8cqi);
      font-size: 1.1rem;
      letter-spacing:-.0025rem;
      color: #2e2e2e;
      @media screen and (min-width:414px){
        font-size: max(1.2rem, 4.4cqi);
      }
      @media screen and (min-width:1024px){
        font-size: 1.5rem;
        padding:2rem 0 0;
      }
    }
    .link-btn {
      @media screen and (min-width:1024px){
        padding-bottom: 3.5rem;
      }
    }
  }

  .section-faq {
    background: var(--white);
    padding:max(4.8rem,18cqi) 0 max(6rem,22cqi);
    @media screen and (min-width:1024px){
      padding:0 0 8.125rem;
      .section-title {
        padding-top: 5.625rem;
      }
    }
    .faq-list {
      padding-top: max(2.7rem,10cqi);
      @media screen and (min-width:1024px){
        padding-top: 3.75rem;
        width:46.875rem;
        margin:0 auto;
      }
    }
    .faq-item {
      margin-bottom: 1rem;
    }
    .faq-item p{
      margin-bottom: 0;
    }
    .faq-q {
      border-radius: 9999px;
      background: #e8eaf4;
      position: relative;
      cursor: pointer;
      line-height: 1.3rem;
      display: grid;
      grid-template-columns: 1fr clamp(3rem,12cqi,90px);
      align-items: center;
      padding: 2rem 1rem 2rem 2rem;
    }
    .faq-q h3 {
      display: flex;
      gap: .5rem;
    }
    .faq-q h3 .qicon{
      display: inline-block;
      flex-shrink: 0;
    }
    .faq-q h3 img{
      line-height:1.8;
      height: 1.5rem;
      width: auto;
      vertical-align: top;
      @media screen and (min-width:768px){
        height: 2rem;
        vertical-align: middle;
      }
    }
    .faq-q h3 .qtxt{
      font-size: 1.125rem;
      font-family: 'Zen Maru Gothic';
      color: #1e3190;
      font-weight: 700;
      line-height:1.8;
      @media screen and (min-width:768px){
        font-size: 1.5rem;
      }
    }
    .dotted-svg {
      position: absolute;
      top: 2px;
      left: 4px;
      width: 100%;
      height: 100%;
      pointer-events: none;
      overflow: visible;
    }
    .dotted-rect {
      x: 2px;
      y: 2px;
      width: calc(100% - 12px);
      height: calc(100% - 8px);
      
      fill: none;
      stroke: #4b5aa6;
      stroke-width: 2;
      
      stroke-linecap: round;
      stroke-dasharray: 0, 6px;
    }
    /*.faq-q:before {
      content: "";
      width:calc(100% - .25rem);
      height: calc(100% - .3rem);
      border: dotted 3px #4b5aa6;
      position: absolute;
      left: .125rem;
      top: .15rem;
      border-radius: 9999px;
      box-sizing: border-box;
      padding: 10px 20px;
      @media screen and (min-width:1024px){
        width:99%;
        height: 100%;
        left: .5%;
        top: 5%;
        border: none;
        border-radius: 0;
        background: url(../img/front/faq_border_pc.png) no-repeat;
        background-size: contain;
      }
    }*/
    .btn-toggle-wrapper {
      @media screen and (min-width:768px){
        padding-left: 2rem;
      }
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .btn-toggle {
      display: inline-block;
      position: relative;
      width:clamp(2rem, 8cqi, 30px);
      height:clamp(2rem, 8cqi, 30px);
      border-radius: 9999px;
      background: #1e3190;
      box-sizing: border-box;
    }
    .btn-toggle:before, .btn-toggle:after {
      content: "";
      width: .8rem;
      height: 2px;
      background: var(--white);
      position: absolute;
      margin: auto;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
      transition: rotate .25s ease;
      border-radius: 4px;
      @media screen and (min-width:1024px){
        width:0.9375rem;
      }
    }
    .btn-toggle:after {
      rotate: 90deg;
    }
    .active .btn-toggle:after{
      rotate: 0deg;
    }
    .faq-a {
      padding: 0 1rem;
      min-height: 0;
      height: 0;
      opacity: 0;
      transition:padding .25s ease, min-height .25s ease,opacity .25s ease;
    }
    .active .faq-a {
      padding: 1rem;
      min-height: 1rem;
      height: auto;
      opacity: 1;
    }
    .faq-a a{
      color: var(--accent-color);
      text-decoration: underline;
    }
  }
  .section-news {
    padding: max(4.8rem,18cqi) 0;
    background: #e8eaf4;
    @media screen and (min-width:1024px){
      padding:5.125rem 0;
    }
    .section-title{
      padding-bottom:max(2.8rem,11.5cqi);
      @media screen and (min-width:1024px){
        padding-bottom:5rem;
      }
    }
    .news-list {
      display: grid;
      grid-template-columns: repeat(2,1fr);
      gap:1.5rem ;
      @media screen and (min-width:1024px){
        grid-template-columns: repeat(4,1fr);
        gap:2rem ;
      }
    }
    .news-title,
    .news-date {
      font-size: max(.8rem,3.3cqi);
      color: #2e2e2e;
      font-family: 'Zen Maru Gothic';
      @media screen and (min-width:1024px){
        font-size:1.125rem ;
      }
    }
    .news-title{
      padding-top: .5rem;
      line-height: 1.5;
    }
    .news-date {
      padding-top: .2rem;
    }
    .link-btn {
      margin-bottom: 1rem;
    }
  }
}

@media screen and (min-width:1024px){
  .section-faq,.section-news{
    .section-title img {
      width:31.875rem;
    }
  } 
}

/*= hero img =*/
@keyframes bg-scroll-animation {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%); 
  }
}

@keyframes balloon-float {
  0% {
    transform: translateY(0);
  }
  100%{
    transform: translateY(40%); 
  }
}

@keyframes stand-up {
  0% {
    transform: rotateX(-90deg);
    opacity: 0;
  }
  100%{
    transform: rotateX(0deg);
    opacity: 1;
  }
}

#body-wrapper .fv-section {
  padding: 0;
  overflow: hidden;
  position: relative;
  /* header高さ - ボーダー - fixed CTA の高さ */
  height: calc(100vh - var(--header-height-sp) - 5px - 3.553333333324rem);
  img {
    object-fit: cover;
    width: 100%;
    padding: 0;
    margin: 0;
  }
  .bg{
    width: 100%;
  }
  .bg-scroll {
    bottom: 5%;
    left: 0;
    position: absolute;
    display: flex;
    animation: bg-scroll-animation 16s linear infinite;
  }
  .bg-scroll img {
    width: 400vw;
    max-width: none;
    object-fit: initial;
  }
  .kv-main {
    position: absolute;
    bottom: 0;
    left: 0;
  }
  .catch-sky {
    bottom: auto;
    top: .5rem;
  }
  .catch-ground,
  .person {
    width: 100%;
    picture,img {
      width: 100%;
    }
  }
  .person {
    max-height: 60vh;
    text-align: center;
  }
  .balloon_wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 3;
    p {
      position: absolute;
      animation: balloon-float ease-in-out 3s alternate infinite;
      scale: 0.5;
    }
    .balloon_1 { 
      animation-delay: 0s;
      right:-6%;
      top: 60%;
    }
    .balloon_2 { 
      animation-delay: -0.3s;
      right: 5%;
      top: 44%;
    }
    .balloon_3 { 
      animation-delay: -2.8s;
      right: 1%;
      top: 30%;
    } 
    .balloon_4 { 
      animation-delay: -0.5s;
    } 
    .balloon_5 { 
      left: 5%;
      top: 5%;
      animation-delay: -1.2s;
    } 
    .balloon_6 { 
      animation-delay: -1.0s;
      left: 5%;
      top: 62%;
    } 
    .balloon_7 { 
      animation-delay: -1.8s;
      right: 15%;
      top: 51%;
    }
  }
  @media screen and (min-width:768px){
    .person {
      text-align: left;
      width:50%;
      left: 25%;
    }
    .bg {
      width:100%;
      height: 100%;
    }
    .bg img{
      object-fit: cover;   
      width:100%;
      height: 100%;
    }
    .bg-scroll {
      bottom: 0;
    }
    .bg-scroll img {
      width: 100vw;
    }
  }
  @media screen and (min-width:1024px){
    height: 650px;
    .bg-scroll {
      animation: bg-scroll-animation 10s linear infinite;
    }
    .catch-sky {
      top:0;
      left: 35%;
    }
    .catch-ground,
    .person {
      left: 25%;
      img {
        transform: translateX(-25%);
        width: auto;
      }
    }
    .person {
      max-height: none;
      text-align: left;
      width:100%;
    }
    .balloon_wrapper {
      .balloon_1 {
        top: 40%;
        right: 10%;
      }
      .balloon_2 { 
        right: 15%;
        top: 12%;
      }
      .balloon_3 { 
        right: 8%;
        top: 6%;
      } 
      .balloon_4 { 
        left: 15%;
        top: 10%;
      } 
      .balloon_5 { 
        top: 25%;
      } 
      .balloon_6 { 
        left: 13%;
        top: 55%;
      } 
      .balloon_7 { 
        right: 22%;
        top: 54%;
      }
    }
  }
  @media screen and (min-width:1280px){
    .bg-scroll {
      animation: bg-scroll-animation 14s linear infinite;
    }
  }
}