@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');

:root {
  --con-width: 1000px;
  --border: #e0e0e0;
  --gray_back: #f1f1f1;
  --gra_pink: linear-gradient(to right, #ff9936, #ff5da5);
  --gra_blue: linear-gradient(to right, #58a3e3, #50cbcf);
  --color_1: #58a3e3;
  --color_2: #f9ff5f;
}

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
  background: transparent;
  border: 0;
  margin: 0;
  outline: 0;
  padding: 0;
  vertical-align: baseline;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  min-height: 0vw;
}

body {
  font-family: "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック", Yu Gothic, YuGothic, sans-serif;
  font-size: 18px;
  line-height: 1;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main {
  display: block;
}

ol, ul {
  list-style: none;
}

em {
  font-style: normal;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

input, select {
  vertical-align: middle;
}

img {
  display: block;
  border-style: none;
  font-size: 0;
  line-height: 0;
}

a {
  background: transparent;
  margin: 0;
  padding: 0;
  text-decoration: none;
  vertical-align: baseline;
}

button, textarea, select, input {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  outline: none;
  appearance: none;
}

input[type=radio],
input[type=checkbox] {
  display: none;
}

/* select要素の矢印を消す */
select::-ms-expand {
  display: none;
}

/* Androidで表示されるタップ時のオレンジの枠を消す */
button {
  box-shadow: none;
  outline: none;
}

@media screen and (max-width: 768px) {
  .sp_none {
    display: none;
  }
}
@media screen and (min-width: 769px) {
  .pc_none {
    display: none;
  }
}

.w100 {
  max-width: 100%;
}

.ma {
  margin: auto;
}

.bold {
  font-weight: bold;
}

.fade {
  opacity: 0;
  transition: all 0.6s ease-out;
}

.fade_on {
  opacity: 1;
}

.movexl {
  opacity: 0;
  translate: -20px 0;
  transition: all 0.4s ease-out;
}

.movexr {
  opacity: 0;
  translate: 20px 0;
  transition: all 0.4s ease-out;
}

.movexl_on,
.movexr_on {
  opacity: 1;
  translate: 0 0;
}

.movey {
  opacity: 0;
  translate: 0 20px;
  transition: all 0.4s ease-out;
}

.movey_on {
  opacity: 1;
  translate: 0 0;
}

.small {
  scale: 1.5;
  opacity: 0;
  transition: all 0.4s ease-out 0.4s;
}

.small_on {
  scale: 1;
  opacity: 1;
}

.move {
  opacity: 0;
}

.move_on {
  opacity: 1;
}

.bs {
  animation: bigSmall 1.8s infinite;
}
@keyframes bigSmall {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02)
  }
  60% {
    transform: scale(.97)
  }
  70% {
    transform: scale(1.02);
    opacity: 1
  }
  80% {
    transform: scale(.97)
  }
  90% {
    transform: scale(1.02)
  }
  100% {
    transform: scale(1)
  }
}

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

@keyframes catch {
  0% {
    visibility: hidden;
    opacity: 0;
    scale: 0.7;
  }
  100% {
    visibility: visible;
    opacity: 1;
    scale: 1;
  }
}

@keyframes m_y {
  0% {
    opacity: 0;
    translate: 0 20px;
  }
  100% {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes m_x {
  0% {
    opacity: 0;
    translate: 20px 0;
  }
  100% {
    opacity: 1;
    translate: 0 0;
  }
}

.container {
  overflow: hidden;
}

/* ===================================
ヘッダー
------------------------------------*/
header {
  padding: 4% 6% 2.6%;
  .h_logo {
    width: min(38.939%, 150px);
  }
  @media screen and (min-width:769px) {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0 0 6%;
    font-size: 16px;
    h1 {
      padding: 22px 0 17px;
    }
    ul {
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }
    li {
      margin-left: 2em;
      a {
        color: #000;
      }
    }
    .f_btn {
      display: block;
      width: 255px;
      padding: 27px;
      background: var(--gra_pink);
      text-align: center;
      color: #fff;
    }
  }
  @media screen and (max-width:1010px) {
    nav {
      display: none;
    }
  }
}

.fv_area {
  padding: 2.666% 0 13.333%;
  background: url(../img/fv-bg.jpg) center right 26% no-repeat;
  background-size: cover;
  .mh {
    margin: auto;
    animation: catch 0.6s ease-in-out 1s both;
  }
  .fv3 {
    width: min(88.1%, 550px);
    margin: min(4%, 22px) auto 0;
    animation: m_y 0.4s ease-in-out 2s both;
  }
  @media screen and (min-width:769px) {
    position: relative;
    padding: 36px 0 44px;
    background: #000 url(../img/fv-bg.jpg) center center no-repeat;
    background-size: cover;
    .label {
      position: absolute;
      left: 2%;
      bottom: 32px;
      width: min(16.8%, 198px);
    }
  }
}

/* ===================================
コンテンツ
------------------------------------*/
.btn_area1 {
  margin: min(3.733%, 20px) auto min(5%, 34px);
  padding: 0 6%;
  .b_txt {
    width: min(100%, 655px);
    margin: 0 auto 10px;
  }
  a {
    display: block;
    width: min(100%, 710px);
    margin: auto;
  }
}

.sec01 {
  padding: min(13.333%, 102px) 0 min(4%, 20px);
  background: #ddf3f4;
  text-align: center;
  h2 {
    margin-bottom: 0.7em;
    font-size: clamp(33px, 8.4vw, 56px);
    span {
      display: inline-block;
      padding: 0 0.2em 1em;
      background: url(../img/h_f_bk.png) center bottom no-repeat;
      background-size: auto 0.7em;
      font-weight: normal;
      font-size: clamp(18px, 4.6vw, 24px);
      mark {
        font-weight: bold;
        color: var(--color_1);
        font-size: 116%;
      }
    }
  }
  dl {
    width: min(100%, 1000px);
    margin: min(4.5%, 40px) auto 0;
    background: #fff;
    border-radius: 10px;
    text-align: center;
    dt {
      padding: 0.5em 0;
      background: #50cbcf;
      border-radius: 10px 10px 0 0;
      color: #fff;
      font-size: clamp(20px, 5vw, 30px);
      font-weight: bold;
    }
    dd {
      padding: 6%;
    }
  }
  .z_1 {
    margin: auto;
  }
  .z_2 {
    width: 60%;
    margin: auto;
    @media screen and (min-width:769px) {
      width: 299px;
    }
  }
  .z_3 {
    width: min(93%, 462px);
    margin: auto;
  }
  @media screen and (min-width:1024px) {
    dl dd {
      padding: 34px 0;
    }
    .wrap {
      display: flex;
      justify-content: space-between;
      width: min(100%, 1000px);
      margin: min(4.5%, 40px) auto 0;
      dl:nth-child(1) {
        width: 40.3%;
        margin: 0;
      }
      dl:nth-child(2) {
        width: 54.7%;
        margin: 0;
      }
    }
  }
  @media screen and (max-width:1023px) {
    .inr {
      padding: 0 6%;
    }
  }
  .inr2 {
    p {
      margin-top: 1.2em;
      font-weight: bold;
      font-size: clamp(20px, 5vw, 30px);
      line-height: 1.4;
    }
    .txt4 {
      width: min(62.133%, 378px);
      margin: min(2.4%, 15px) auto 0;
    }
    @media screen and (min-width:769px) {
      padding: 0 0 425px;
      background: url(../img/sec01-bg-pc.png) center bottom no-repeat;
    }
    @media screen and (max-width:768px) {
      padding: 0 0 54.133%;
      background: url(../img/sec01-bg-sp.png) center bottom no-repeat;
      background-size: 100% auto;
    }
  }
}

.sec02 {
  padding: min(9.333%, 75px) 0 min(8%, 60px);
  @media screen and (max-width:768px) {
    background: url(../img/sec02-bg-sp.jpg) center top no-repeat;
    background-size: 100% auto;
  }
  @media screen and (min-width:769px) and ( max-width:1400px) {
    background: url(../img/sec02-bg1-pc.png) center top no-repeat, url(../img/sec02-bg2-pc.jpg) center top no-repeat;
  }
  @media screen and (min-width:1401px) {
    background: url(../img/sec02-bg1-pc.png) center top no-repeat, url(../img/sec02-bg2-pc.jpg) center top no-repeat;
    background-size: 100% 876px, auto;
  }
  .arrow {
    width: min(74.266%, 466px);
    margin: auto;
  }
  .solution {
    width: min(48%, 300px);
    margin: min(2.4%, 12px) auto min(10.4%, 64px);
  }
  .step {
    margin: 3.466% auto 4.4%;
    li {
      position: relative;
      &:nth-child(1) {
        z-index: 4;
      }
      &:nth-child(2) {
        z-index: 3;
      }
      &:nth-child(3) {
        z-index: 2;
      }
    }
  }
  .txt7 {
    width: min(88%, 723px);
    margin: min(12%, 74px) auto 0;
  }
  @media screen and (max-width:768px) {
    .arrow {
      margin: -3.733% auto 0;
    }
    .step {
      padding: 0 6%;
      li + li {
        margin-top: -2.666%;
      }
    }
    .move_on {
      li:nth-child(1) {
        animation: m_y 0.4s linear 0.4s both;
      }
      li:nth-child(2) {
        animation: m_y 0.4s linear 0.6s both;
      }
      li:nth-child(3) {
        animation: m_y 0.4s linear 0.8s both;
      }
    }
  }
  @media screen and (min-width:769px) {
    .step {
      margin: 30px auto -63px;
      display: flex;
      justify-content: center;
      align-items: flex-start;
      li + li {
        margin-left: -34px;
      }
    }
    .move_on {
      li:nth-child(1) {
        animation: m_x 0.4s linear 0.4s both;
      }
      li:nth-child(2) {
        animation: m_x 0.4s linear 0.8s both;
      }
      li:nth-child(3) {
        animation: m_x 0.4s linear 1.2s both;
      }
    }
  }
}

.photo_area {
  overflow: hidden;
  ul {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  li + li {
    margin-left: 20px;
  }
  .move_on {
    li:nth-child(1) {
      animation: f_a 0.6s linear 0.6s both;
    }
    li:nth-child(2) {
      animation: f_a 0.6s linear both;
    }
    li:nth-child(3) {
      animation: f_a 0.6s linear 0.9s both;
    }
    li:nth-child(4) {
      animation: f_a 0.6s linear 0.3s both;
    }
  }
  @media screen and (max-width:768px) {
    ul {
      translate: 60px 0;
    }
    li:nth-child(1) img,
    li:nth-child(3) img {
      width: 185px;
    }
    li:nth-child(2) img {
      width: 146px;
    }
    li:nth-child(4) img {
      width: 229px;
    }
    li + li {
    margin-left: 10px;
  }
  }
}

.sec03 {
  margin-top: min(15.733%, 113px);
  padding: min(15.733%, 113px) 0;
  h2 {
    font-size: clamp(47px, 12.5vw, 70px);
    text-align: center;
    img {
      width: min(27.466%, 150px);
      margin: 0 auto 5px;
    }
  }
  li {
    margin-top: min(8%, 95px);
    background: rgba(255, 255, 255, 0.6);
  }
  h3 {
    margin-top: 0.2em;
    font-size: clamp(27px, 7.2vw, 48px);
    line-height: 1.2;
  }
  dd {
    margin-top: min(6%, 45px);
    line-height: 2;
    mark {
      font-weight: bold;
      background: var(--color_2);
    }
  }
  .ph1 {
    width: min(91.818%, 494px);
  }
  .ph2 {
    width: min(100%, 488px);
  }
  .ph3 {
    width: min(90.151%, 500px);
  }
  @media screen and (min-width:1000px) {
    background: url(../img/sec03-bg-pc.jpg) center center no-repeat;
    background-size: cover;
    .inr {
      max-width: 1000px;
      margin: auto;
      padding: 70px 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    dl {
        max-width: 454px;
      }
    li:nth-child(1) dl {
      max-width: 468px;
    }
    li:nth-child(2) .inr {
        flex-direction: row-reverse;
      }
  }
  @media screen and (max-width:999px) {
    background: url(../img/sec03-bg-sp.jpg) center center no-repeat;
    background-size: cover;
    li {
      padding: 11% 6%;
      img {
        margin: 4% auto 0;
      }
    }
    h3 {
      text-align: center;
    }
  }
}

.sec04 {
  max-width: 1000px;
  margin: auto;
  padding: min(31.2%, 166px) min(6%, 40px);
  h2 {
    margin-bottom: 0.7em;
    font-size: clamp(48px, 12.8vw, 70px);
    text-align: center;
    line-height: 1.4;
    span {
      display: inline;
      padding: 0 0.2em 0.9em;
      background: url(../img/h_f_bk.png) center bottom no-repeat;
      background-size: auto 0.7em;
      font-weight: normal;
      font-size: clamp(18px, 4.6vw, 26px);
    }
    img {
      display: inline-block;
      width: min(31%, 150px);
    }
  }
  h3 {
    display: flex;
    align-items: center;
    background: var(--gra_blue);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: clamp(27px, 7.2vw, 48px);
    line-height: 1.2;
    img {
      width: min(19.7%, 130px);
      margin-right: 20px;
    }
  }
  .box {
    padding: min(4%, 28px);
    border: 1px solid #50cbcf;
    border-radius: 15px;
  }
  h4 {
    font-size: clamp(18px, 4.8vw, 20px);
    line-height: 1.7;
    span {
      font-size: 150%;
      color: var(--color_1);
      background: var(--color_2);
    }
  }
  p {
    margin-top: 0.8em;
    line-height: 1.8;
  }
  @media screen and (min-width:1000px) {
    li:not(:last-child) {
      position: relative;
      &::after {
        position: absolute;
        top: 10px;
        left: 62px;
        content: "";
        width: 6px;
        height: 102%;
        background: #a7d1ef;
        z-index: -1;
      }
    }
    .box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: -20px 0 0 150px;
    }
    p {
      width: 360px;
    }
  }
  @media screen and (max-width:999px) {
    .box {
      margin-top: 2%;
      img {
        margin: auto;
      }
    }
    li {
      margin-top: 8%;
    }
    .sn {
      display: none;
    }
  }
}

.sec05 {
  background: #edf4f6;
  ul {
    margin-bottom: min(16%, 87px);
  }
  li {
    max-width: 1000px;
    margin: auto;
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 0 12px 0 rgba(0,0,0,0.15);
  }
  li + li {
    margin-top: min(6%, 33px);
  }
  h2 {
    display: inline-block;
    margin-bottom: 0.5em;
    background: var(--gra_pink);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: clamp(27px, 7.2vw, 54px);
    font-feature-settings: "palt";
    line-height: 1.2;
  }
  .name {
    font-size: clamp(16px, 4.26vw, 18px);
    white-space: pre-wrap;
    word-break: keep-all;
    line-height: 1.2;
    span {
      font-size: 178%;
      font-weight: bold;
    }
  }
  p {
    margin-top: 1em;
    line-height: 2;
  }
  @media screen and (min-width:769px) {
    padding: 122px 0;
    li {
      padding: 68px;
    }
    li:nth-child(2) .box {
      flex-direction: row-reverse;
    }
    .box {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
    }
    .ph {
      width: min(35%, 308px);
      margin-top: 30px;
    }
    .inr {
      width: min(59.44%, 516px);
    }
  }
  @media screen and (min-width:769px) and ( max-width:1060px) {
    padding: 122px 30px;
    
  }
  @media screen and (max-width:768px) {
    padding: 20% 6%;
    li {
      padding: 10% 6%;
      text-align: center;
      img {
        margin: auto;
      }
    }
    h2 {
      text-align: center;
    }
    .ph {
        width: 50%;
    }
    .name {
      margin-top: 1.2em;
    }
    p {
      text-align: left;
    }
  }
}

.btn_area2 {
  .b_txt {
    width: min(88%, 538px);
    margin: 0 auto min(1.5%, 15px);
  }
}

.sec06 {
  .inr {
      max-width: 1000px;
      margin: auto;
  }
  h2 {
    margin-bottom: 0.7em;
    font-size: clamp(41px, 10vw, 60px);
    text-align: center;
    line-height: 1.4;
    span {
      display: inline;
      padding: 0 0.2em 0.9em;
      background: url(../img/h_f_bk.png) center bottom no-repeat;
      background-size: auto 0.7em;
      font-weight: normal;
      font-size: clamp(18px, 4.6vw, 26px);
    }
    img {
      display: inline-block;
      width: min(31%, 150px);
    }
  }
  h3 {
    margin: 1.6em 0 0.2em;
    display: inline-block;
    background: var(--gra_blue);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: clamp(20px, 5.3vw, 28px);
  }
  li {
    margin-top: min(2%, 20px);
  }
  @media screen and (min-width:769px) {
    padding: 187px 0;
    background: url(../img/sec06-bg-pc.jpg) center center no-repeat;
    background-size: cover;
    ul {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      flex-wrap: wrap;
      li {
        width: 49%;
      }
    }
  }
  @media screen and (min-width:769px) and ( max-width:1060px) {
    padding: 187px 4%;
  }
  @media screen and (max-width:768px) {
    padding: 21% 6%;
    background: url(../img/sec06-bg-sp.jpg) center center no-repeat;
    background-size: cover;
  }
}

.sec07 {
  padding: min(22%, 118px) 0;
  h2 {
    font-size: clamp(41px, 10vw, 60px);
    text-align: center;
    line-height: 1.4;
    color: #fff;
    span {
      display: inline;
      padding: 0 0.2em 0.9em;
      background: url(../img/sec07-h.png) center bottom no-repeat;
      background-size: auto 0.7em;
      font-weight: normal;
      font-size: clamp(18px, 4.6vw, 26px);
    }
  }
  .slick-track {
    display: flex;
    padding: min(20%, 104px) 0 0;
  }
  .slick-slide {
    position: relative;
    height: auto !important;
    margin: 0 min(6%, 17px);
    background: #fff;
    border-radius: 10px;
    .ph {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translate(-50%, -50%);
      width: min(32.4%, 168px);
    }
    h3 {
      display: inline-block;
      background: var(--gra_blue);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      font-size: clamp(20px, 5vw, 40px);
      line-height: 1.2;
    }
    p {
      margin-top: 1em;
      line-height: 2;
      font-size: 16px;
    }
    .name {
      margin-top: 0.7em;
      text-align: right;
      font-weight: bold;
    }
  }
  @media screen and (min-width:769px) {
    background: #58a4e3 url(../img/sec07-bg-pc.jpg) center top no-repeat;
    background-size: 100% auto;
    .slick-slide {
    width: 626px;
    padding: min(20.3%, 97px) min(4%, 47px) min(4%, 47px);
    }
  }
  @media screen and (max-width:768px) {
    background: url(../img/sec07-bg-sp.jpg) center center no-repeat;
    background-size: cover;
    .slick-slide {
      width: 88%;
      .inr {
        padding: 20.8% 6% 8%;
      }
    }
  }
}

.sec08 {
  padding: 138px 0 0;
  h2 {
    margin-bottom: 0.8em;
    font-size: clamp(41px, 10.9vw, 60px);
    text-align: center;
  }
  @media screen and (min-width:769px) and ( max-width:1060px) {
    padding: 138px 30px;
  }
  @media screen and (max-width:768px) {
    padding: 24% 6%;
  }
}

.sec09 {
  padding: 138px 0;
  max-width: 1000px;
  margin: auto;
  h2 {
    margin-bottom: 0.8em;
    font-size: clamp(41px, 10.9vw, 60px);
    text-align: center;
  }
  ul {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-bottom: min(14%, 68px);
    li {
      width: 32%;
      margin-top: min(4%, 30px);
      iframe{
      aspect-ratio: 9 / 16;
      width: 100%;
      height: 100%;
      }
      &.movie {
        width: 48%;
        aspect-ratio: 16 / 9;
        overflow: hidden;
        iframe {
          width: 100%;
          height: 100%;
        }
      }
    }
    .ml {
      margin-left: 4%;
    }
  }
  @media screen and (min-width:769px) and ( max-width:1060px) {
    padding: 138px 30px;
  }
  @media screen and (max-width:768px) {
    padding: 24% 6%;
    ul li {
      width: 48%;
      &.movie {
        width: 100%;
      }
    }
  }
}

.sec10 {
  h2 {
    margin-bottom: 0.2em;
    font-size: clamp(48px, 12.8vw, 70px);
    text-align: center;
    line-height: 1.4;
    img {
      display: block;
      width: min(31%, 150px);
      margin: auto;
    }
  }
  .box1 {
    padding: min(18%, 130px) 0 min(18%, 87px);
    @media screen and (min-width:769px) {
      background: url(../img/sec10-bg1-pc.jpg) center center no-repeat;
      background-size: cover;
    }
    @media screen and (max-width:768px) {
      padding: 18% 3% 18%;
      background: url(../img/sec10-bg1-sp.jpg) center center no-repeat;
      background-size: cover;
    }
  }
  .box2 {
    padding: 60px 0;
    @media screen and (min-width:769px) {
      background: url(../img/sec10-bg2-pc.jpg) center center no-repeat;
      background-size: cover;
    }
    @media screen and (max-width:768px) {
      padding: 14% 3%;
      background: url(../img/sec10-bg2-sp.jpg) center center no-repeat;
      background-size: cover;
    }
  }
}

.sec11 {
  padding: 138px 0 0;
  margin: auto;
  h2 {
    margin-bottom: 0.8em;
    font-size: clamp(41px, 10.9vw, 60px);
    text-align: center;
  }
  .h_wrap {
    padding: min(6%, 30px);
    overflow-x: auto;
  }
  @media screen and (max-width:570px) {
    img {
      width: 570px;
    }
  }
}

.sec12 {
  padding: 24% 6%;
  margin: auto;
  h2 {
    margin-bottom: 0.8em;
    font-size: clamp(41px, 10.9vw, 60px);
    text-align: center;
  }
  h3 {
    padding: 0.7em;
    border-radius: 9px;
    text-align: center;
    color: #fff;
    font-size: clamp(24px, 6.4vw, 28px);
  }
  p {
    line-height: 2;
  }
  dl {
    display: flex;
    flex-wrap: wrap;
    margin: 2em 0;
    border-top: 1px solid var(--border);
    dt {
      display: flex;
      align-items: flex-end;
      width: 30%;
      padding: 1.2em 0;
      border-bottom: 1px solid var(--border);
    }
    dd {
      display: flex;
      align-items: flex-end;
      width: 70%;
      padding: 1.2em 0;
      text-align: center;
      border-bottom: 1px solid var(--border);
      span {
        font-size: 144%;
      }
    }
  }
  .course {
    > li {
      padding: min(0.6%, 4px);
      border-radius: 10px;
      li {
        margin: 1em 0;
        list-style-type: disc;
        list-style-position: inside;
      }
      &.light {
        border: 4px solid #8ddde0;
        h3 {
          background: #8ddde0;
        }
      }
      &.pro {
        border: 4px solid #50cbcf;
        h3 {
          position: relative;
          background: var(--gra_blue);
        }
        .rec {
          position: absolute;
          top: 50%;
          right: 5%;
          transform: translateY(-50%);
          width: 60px;

        }
      }
    }
  }
  .inr {
    padding: min(4%, 28px) min(4%, 28px) min(16%, 70px);
  }
  .ph {
    margin: min(11%, 22px) 0;
  }
  @media screen and (min-width:821px) {
    max-width: 1000px;
    padding: 138px 0;
    .course {
      display: flex;
      justify-content: center;
      > li {
        width: 48.4%;
        ul {
          padding: 0 1em;
        }
      }
    }
    .pro {
      margin-left: 3.2%;
    }
    p,
    h4 {
      padding: 0 1em;
    }
    dl {
      dt {
      padding: 2em 0 2em 1em;
      }
      dd {
        padding: 2em 0;
      }
    }
  }
  @media screen and (min-width:821px) and ( max-width:1060px) {
    padding: 138px 30px;
  }
  @media screen and (max-width:820px) {
    .pro {
      margin-top: 6%;
    }
  }
}

.sec13 {
  padding: min(23.7%, 170px) 0;
  background: #edf4f6;
  h2 {
    margin-bottom: 0.6em;
    font-size: clamp(41px, 10.9vw, 60px);
    text-align: center;
  }
  .fl {
    position: relative;
    padding: min(14.7%, 52px) min(4%, 20px) min(6%, 40px);
    background: #fff;
    border-radius: 10px;
    .num {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translate(-50%, -50%);
      width: min(20%, 60px);
    }
    h3 {
      margin-bottom: 0.6em;
      text-align: center;
      font-size: clamp(24px, 6.4vw, 28px);
    }
    img {
      width: 100%;
    }
    p {
      margin-top: 1em;
      line-height: 1.7;
    }
  }
  @media screen and (min-width:769px) {
    ul {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      max-width: 1000px;
      margin: auto;
    }
    li {
      margin: 60px 0.3% 0;
    }
    .fl {
      width: 30%;
    }
    .allow {
      display: flex;
      align-items: center;
      width: 3.2%;
    }
  }
  @media screen and (min-width:769px) and ( max-width:1060px) {
    ul {
      padding: 0 30px;
    }
  }
  @media screen and (max-width:768px) {
    h2 {
      margin-bottom: 1em;
    }
    ul {
      padding: 0 6%;
    }
    .allow {
      width: 16.97%;
      margin: 2% auto 40px;
    }
  }
}

.sec14 {
  padding: min(20.8%, 198px) min(6%, 30px) min(26.4%, 100px);
  h2 {
    margin-bottom: 1.2em;
    font-size: clamp(41px, 10.9vw, 60px);
    text-align: center;
  }
  dl {
    max-width: 1060px;
    margin: 0 auto min(18.5%, 95px);
  }
  dt {
    position: relative;
    margin-top: 1em;
    padding: 1.5em 3em 1.5em 4.5em;
    border: 1px solid #50cbcf;
    background: url(../img/sec14-q.png) left 1em center no-repeat;
    background-size: 54px auto;
    border-radius: 10px;
    font-size: clamp(18px, 4.8vw, 20px);
    line-height: 1.4;
    font-weight: bold;
    transition: all 0.3s linear;
    &::before {
      position: absolute;
      top: 50%;
      right: 1em;
      content: "";
      display: block;
      width: 25px;
      height: 1px;
      background: #000;
    }
    &::after {
      position: absolute;
      top: 50%;
      right: calc(1em + 12px);
      content: "";
      display: block;
      width: 1px;
      height: 25px;
      margin-top: -12px;
      background: #000;
      transition: all 0.3s linear;
    }
    &.active {
      border-radius: 10px 10px 0 0;
      &::after {
        rotate: 90deg;
        opacity: 0;
      }
    }
  }
  dd {
    padding: 1.5em 2.2em;
    border: 1px solid #50cbcf;
    border-top: none;
    border-radius: 0 0 10px 10px;
    background: #f1f8f8;
    font-size: clamp(16px, 4.26vw, 18px);
    line-height: 1.8;
  }
  @media screen and (max-width:768px) {
    dt {
      padding: 1.5em 3em 1.5em 3.8em;
      background-size: 40px auto;
    }
  }
}

.slider2 {
  li {
    width: 330px;
    border-radius: 10px;
    overflow: hidden;
  }
  li {
    margin: 0 10px;
  }
  @media screen and (max-width:768px) {
    li {
      width: 220px;
    }
  }
}

#form {
  margin-top: min(10%, 60px);
  padding: min(23.7%, 170px) min(6%, 30px);
  background: #edf4f6;
  h2 {
    margin-bottom: 0.6em;
    font-size: clamp(41px, 10.9vw, 60px);
    text-align: center;
    line-height: 1.4;
  }
  dl {
    max-width: 1060px;
    margin: 0 auto min(18.5%, 95px);
  }
  dt {
    margin: 2em 0 1em;
    font-weight: bold;
    .hissu {
      display: inline-block;
      margin-left: 1em;
      padding: 0.2em 0.5em;
      background: #ff5d5d;
      font-size: 90%;
      color: #fff;
    }
    .nini {
      display: inline-block;
      margin-left: 1em;
      padding: 0.2em 0.5em;
      background: #949f9f;
      font-size: 90%;
      color: #fff;
    }
  }
  input.txt,
  textarea {
    width: 100%;
    padding: 1.3em 1.5em;
    background: #fff;
    border-radius: 10px;
    font-size: 18px;
  }
  input.birth {
    width: min(20%, 5em);
    margin: 0 0.5em;
    padding: 1.3em 1em;
    background: #fff;
    border-radius: 10px;
    font-size: 18px;
    text-align: center;
    &.b1 {
      width: min(30%, 8em);
      margin: 0 0.5em 0 0;
    }
  }
  ::placeholder {
    color: #aaa;
    font-family: "Noto Sans JP", system-ui;
  }
  input.txt:focus,
  input.birth:focus,
  textarea:focus {
    outline: 2px solid var(--color_1);
  }
  textarea {
    height: 16em;
    line-height: 1.8;
  }
  .radio_1 {
    .radio-parts {
      display: inline-block;
      position: relative;
      margin: min(2%, 12px) 3em min(2%, 12px) 0;
      padding: 0.2em 0 0 1.8em;
      cursor: pointer;
    }
    .radio-parts::before {
      position: absolute;
      top: 50%;
      translate: 0 -50%;
      left: 0;
      width: 1.4em;
      height: 1.4em;
      content: "";
      background: #fff;
      border-radius: 50%;
    }
    .radio-parts::after {
      content: "";
      display: block;
      position: absolute;
      top: 50%;
      left: -0.3em;
      translate: 0 -50%;
      width: 2em;
      height: 2em;
      background: var(--color_1);
      border-radius: 50%;
      opacity: 0;
      transition: all 0.3s ease-out;
    }
    .radio-input:checked + .radio-parts::after {
      left: 0.2em;
      width: 1em;
      height: 1em;
      opacity: 1;
    }
    .radio-input:checked + .radio-parts::before {
      border: 1px solid var(--color_1);
    }
  }
  .form_btn {
    display: block;
    width: min(100%, 400px);
    margin: auto;
    padding: 1em;
    background: #ff9936;
    border-radius: 10px;
    border-bottom: 5px solid #ef8825;
    font-size: 20px;
    color: #fff;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s linear;
    &:hover {
      opacity: 0.8;
    }
  }
}

.confimr_area {
  margin-top: min(10%, 60px);
  padding: min(23.7%, 170px) min(6%, 30px);
  h2 {
    margin-bottom: 0.6em;
    font-size: clamp(41px, 10.9vw, 60px);
    text-align: center;
    line-height: 1.4;
  }
  p {
    line-height: 2;
    @media screen and (min-width:769px) {
      text-align: center;
    }
  }
  dl {
    max-width: 800px;
    margin: min(18.5%, 95px) auto;
  }
  dt {
    margin: 2em 0 1em;
    font-weight: bold;
  }
  .next_btn {
    display: block;
    width: min(100%, 400px);
    margin: auto;
    padding: 1em;
    background: #ff9936;
    border-radius: 10px;
    border-bottom: 5px solid #ef8825;
    font-size: 20px;
    color: #fff;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s linear;
    &:hover {
      opacity: 0.8;
    }
  }
  .prev_btn {
    display: block;
    width: min(50%, 200px);
    margin: 2em auto;
    padding: 1em;
    background: #c6cccc;
    border-radius: 10px;
    font-size: 20px;
    color: #fff;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s linear;
    &:hover {
      opacity: 0.8;
    }
  }
}

.complete_area {
  padding: min(23.7%, 170px) min(6%, 30px);
  p {
    max-width: 800px;
    margin: 2em auto;
    line-height: 2;
  }
}

.container {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 100%;
  min-height: 100vh;
}


/* ===================================
フッター
------------------------------------*/
footer {
  padding: min(15%, 80px) 0 1em;
  .f_logo {
    width: min(40%, 234px);
    margin: auto;
  }
  small {
    display: block;
    margin-top: 2em;
    text-align: center;
    font-size: 12px;
  }
}

#scroll_btn {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 0.5em 6%;
  background: rgba(255, 255, 255, 0.6);
  transition: all 0.6s linear;
  z-index: 1100;
  opacity: 0;
  transition: all 0.3s linear;
  &.is-active {
    opacity: 1;
  }
  a {
    display: block;
    width: min(100%, 400px);
    margin: auto;
  }
}