@charset "utf-8";
/* -------------------
Reset 
-------------------- */
html{font-size: 62.5%; -webkit-font-feature-settings: 'palt' 1; font-feature-settings: 'palt' 1;}
body{color: #242424; background: #ffffff; line-height: 1.6; word-spacing: 0; font-size: 1.6rem; font-family: 'Noto Sans JP', sans-serif;
-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -moz-text-size-adjust: 100%; overflow-x: hidden;}

*{margin: 0; padding: 0; box-sizing: border-box; border: 0; outline: none;}
h1, h2, h3, h4, h5, h6{font-size: 100%; font-weight: bold;}
ol, ul{list-style: none;}
table{border-collapse: collapse; border-spacing: 0;}
a{color: inherit; text-decoration: none;cursor: pointer;}
img{vertical-align: bottom; max-width: 100%; height: auto;}

/* ------------------------------
 変数 その他
------------------------------ */
:root {
  --bg01: #F5F3EC;
  --bg02: #FFE395;
  --bg03: #E8D9AC;
  --red01 : #DD0000;
  --grad01: linear-gradient( 15deg, #785A00 , #DDAC1D);
  --grad02: linear-gradient( to bottom , #FBF6EA , #DDAC1D);
}

.container{margin: 0 auto; max-width: 1000px; width: calc(100% - 20px);}
.clearFix:after{display: block; clear: both; height: 0; visibility: hidden; content: ".";}
.cap{text-align: center;font-size: 1.2rem;}
.center{text-align: center !important;}
.left{text-align: left !important;}
.right{text-align: right !important;}
.bold{font-weight: bold;}
.w-full{width: 100%;}
.clr-Orange{color: #ff4700;}
.anchorlink{position: relative;}
.anchorlink > div{position: absolute; top: 0; left: 0;}
.txtlink{text-decoration: underline; color: #5c1bc6;}
.txtlink:hover{opacity: .7;}
.mt-15{margin-top: 15px;}
.text-shadow{text-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 3px #fff, 0 0 4px #fff, 0 0 5px #fff, 0 0 6px #fff, 0 0 7px #fff, 0 0 8px #fff, 0 0 9px #fff, 0 0 10px #fff, 0 0 11px #fff, 0 0 12px #fff, 0 0 13px #fff;}


@media (min-width: 768px){
  a[href^="tel:"]{pointer-events: none;}
  .only-sp{display: none !important;}
}

@media (max-width: 767px){
  .only-pc{display: none !important;}
  body{font-size: 1.4rem; line-height: 1.6;}
  .anchorlink > div{top: -64px;}
  .small{width: 80%;}
  .small1{width: 50%;}
  .small2{width: 30%;}
}

@media print {
  body{
    color-adjust: exact; -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
}
.dFlex {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
/* -------------------
Header 
-------------------- */
header {
  position: sticky;width: 100%;top: 0;left: 0;background-color: #fff;z-index: 999;font-family: 'Noto Sans JP', sans-serif;font-weight: bold;
  & .content {
    display: flex; align-items: center;justify-content: space-between; padding: 16px;
    & .group__logo {
      width: 100%; padding: 8px 16px;border-bottom: #f1f1f1 solid 1px;
      & a {
        display: block; width: 75%; max-width: 240px; line-height: 1;
      }
    }
  }
  & .menu {
    display: flex;justify-content: flex-end;
    & .login {
      padding: 8px 20px;border-radius: 20px;background-color: #ff4700;line-height: 1;color: #ffffff;
      &:hover {
        opacity: 0.7;
      }
    }
  }
  & .link-user2 {
    flex-basis: 280px; position: relative;
    & .balloon {
      position: absolute; width: 22.85%; top:-26.92%; left: -18.57%;
    }
    & a {
      transition: opacity 0.5s linear 0s;
      &:hover {
        opacity: 0.7;
      }
    }
  }
}
.group__logo {
  width: 100%; padding: 8px 16px;border-bottom: #f1f1f1 solid 1px;
  & a { 
    display: block; width: 75%; max-width: 240px; line-height: 1;
  }
}

@media ( max-width:767px) {
  .group__logo { 
    padding: 8px 0;
  }
  header {
    padding: 0 0 0 16px;
    & .content {
      padding: 0;
    }
    & h1 {
      width: unset;
    }
    & .menu {
      height: 65px;
    }
    & .login {
      width: 65px;font-size: 1.2rem; border-radius: 0;flex-direction: column;align-items: center;padding: 8px;
    }
    & .link-user2 {
      height: 50px; align-self: center; flex-basis: 168px; margin-right: 10px;
      & .balloon { 
        width: 33.33%; top:-2px; left: -22.61%;
      }
    }
  }
}
/* ------------------------------
Main Visual
------------------------------ */
.mv{
  position: relative; padding: 40px 0 140px 0; background: url("../img/mv.webp") center / cover; box-sizing: border-box; min-height: 35vw;
  .txt-mv {
    position: absolute;top: 40px;left: 50%; transform: translateX(-50%);font-size: 5.5rem;line-height: 1.2;font-weight: 500;font-family: 'Noto Serif JP'; white-space: nowrap;
    &#sp3line {
      transform: translateY(-12%) translateX(-50%);
    }
    & .spOnly {
      display: none;
    }
    & span {
      font-size: 7.5rem;display: inline-block;margin-bottom: 6px;
      &.blackText {
        font-size: 5.5rem; margin-bottom: 0; display: inline;
      }
      & .num-mv {
        font-size: 8rem;
      }
    }
  }
  & .over-mv {
    position: absolute;width: 100%;bottom: 0;font-family: 'Noto Serif JP';font-size: 4rem;color: #fff;line-height: 1.4;background-color: rgba(365, 365, 365, 0.85);font-weight: 500;
    & p {
      background-color: #ff4700;padding: 5px 0;
      & .f-pc {
        font-size: 3rem;
      }
    }
    & img {
      padding: 20px 0;
    }
  }
}

.regist{
	width: calc(100% - 40px); position: relative; z-index: 2; max-width: 680px; margin: 20rem auto 0 auto; border: 1px solid #161616; border-radius: 10px; background: #fff; overflow: hidden;
  & .regist-tit {
    font-size: 2.4rem; background: #F2E9C7; color: #000; padding: 1.6rem 0; box-sizing: border-box; line-height: 1; text-align: center;
  }
  & .regist-btn{
    max-width: 480px; cursor: pointer; margin: 0 auto; transition: all 0.4s; padding: 0.5em 1.8em 0.5em 1em;
    display: flex; flex-wrap: wrap;justify-content: center; align-items: center; text-align: center; border-radius: 10px;
    background: #e60012; color: #fff; font-size: 2.2rem; line-height: 1.4; font-weight: bold; font-family: 'Noto Sans JP', sans-serif; border: none; box-shadow: 4px 4px 2px 0 rgba(0,0,0,0.1); position: relative;
    & .cap {
      content: '※会員登録は無料です'; display: block; text-align: center; color: #fff; font-size: 1.2rem; flex-basis: 100%; margin: 0.6em 0; line-height: 1em;
    }
    & span {
      font-size: 81.81%; display: flex; align-items: center;
    }
    &:after {
      content: ''; width: 1.14em; height: 1.14em; display: inline-block; position: relative; position: absolute; top: calc(50% - 11px); right: 0.7em; background: url("../img/icon_arrow_01.svg") no-repeat top left/ contain;
    }
    &:hover {
      opacity: .7;
    }
  }
  & .regist-frm {
    margin: 0 auto; width: 90%; padding: 30px 0;
    & .cta_img {
      text-align: center; margin: 0 0 20px;
    }
    & .col:nth-of-type(1){
      width: 210px; 
    }
    & .col:nth-of-type(2){
      width: calc(100% - 230px);
    }
    & .txt {
      font-size: 1.5rem; line-height: 1.5; margin-bottom: 10px; text-align: center; font-feature-settings: "palt"; font-weight: bold;
      & span {
        font-size: 73.33%; color:#e60012; font-weight: normal;
      }
    }
    & .txt2 {
      font-size: 1.2rem; line-height: 1.5; margin-top: 20px; text-align: left; font-feature-settings: "palt"; font-weight: normal;
      & a {
        text-decoration: underline; color: #000; 
      }
    }
    & select, & option , & input {
      -webkit-appearance: none; outline: none; color: #242424; font-size: 1.6rem; line-height: 1.7; font-family: 'Noto Sans JP', sans-serif; box-sizing: border-box;
    }
    & select , & input {
      width: 100%; border: 1px solid #c5c5c5; background: #f4f4f4; border-radius: 8px; padding: 10px 15px; height: 50px;
    }
    & select {
      background: #f4f4f4 url("../img/arrow_down.png") no-repeat center right 17px/12px auto; margin: 0 0 20px;
    }
    & input {
      &::placeholder {
        color: #c5c5c5;
      }
    }
  }
}
@media (max-width:767px) {
  .mv {
    & .txt-mv {
      font-size: 3.2rem;width: 100%;top: 30px;
      &#sp2line {
        transform: translateY(33%) translateX(-50%);
      }
      &#sp3line {
        transform: translateY(-5%) translateX(-50%); line-height: 1.2;
      }
      & span {
        font-size: 4.3rem;
        &.blackText {
          font-size: 3.2rem; line-height: 1.1;
        }
        &.num-mv {
          font-size: 4.3rem;
        }
      }
      & .spOnly {
        display: inline;
      }
    }
    & .over-mv {
      font-size: 2.2rem;
      & p {
        & .f-pc {
          font-size: 2.2rem;
        }
      }
      & .f-sp {
        font-size: 3rem;
      }
    }
  }
  .regist {
    margin: 16rem auto 0 auto; max-width: 480px;
    & .regist-frm {
      padding: 25px 0;
      & .col {
        &:nth-of-type(1) {
          width: 100%; margin-bottom: 20px;
        }
        &:nth-of-type(2) {
          width: 100%;
        }
      }
      & .txt {
        & span {
          display: block;
        }
      }
    }
    & .regist-tit {
      text-align: center; line-height: 1.4;
      & .clr-red {
        display: block;
      }
    }
  }
  .mv {
    & .over-mv {
      & img {
        padding: 15px 0;
      }
    }
  }
}
@media (max-width: 480px){
  .mv {
    & .over-mv {
      & p {
        padding: 3px 0;
      }
    }
  }
}
/* ------------------------------
FV
------------------------------ */
.fv{ 
  position: relative; padding: 0 0 0 0; background: var(--bg01) ; box-sizing: border-box; overflow: hidden;
  & .site__description  {
    width: calc(100% - 40px); max-width: 720px; text-align: center; margin: 0 auto 0 auto; background: var(--bg02); font-size: 2.5rem; font-weight: bold; min-height: 66px; display: flex; justify-content: center; align-items: center;border-bottom-right-radius: 20px; border-bottom-left-radius: 20px;
    & span {
      color: var(--red01);
    }
  }
  & .bg01 {
    position: absolute; right: calc(50% + 126px); bottom:140px; width: 356px; z-index: 1;
  }
  & .bg02 {
    position: absolute; left: calc(50% + 213px);  bottom:140px; width: 278px; z-index: 1;
  }
  & .site__point {
    margin: 20px auto 0 auto; position: relative; z-index: 2;width: calc(100% - 40px); max-width: 720px;
  }
  & .lp__title {
   width: 100%; max-width: 622px;  margin: 5px auto 0 auto; position: relative; z-index: 2;
  }
  & .fv__note {
    display: block; font-size: 1rem; text-align: center; margin: 5px 0 0 0; position: relative; z-index: 2;
  }
  
  & .fv__item {
    margin: 40px auto 0 auto; position: relative; z-index: 3;
    & ul {
      display: flex; flex-wrap: wrap; justify-content: center; gap:30px; width: 100%; max-width:695px; margin: 0 auto;
      & li {
        flex-basis: calc( ( 100% - 30px ) / 2 ); display: block; position: relative;
        & span {
          position: absolute; left: 50%; width: 100%; transform: translateX(-50%); font-size: 10px; bottom: 0; line-height: 1.1; display: block; text-align: center;
        }
      }
    }
  }
  & .lead__box {
    margin: 0 0 0 0; position: relative; overflow: hidden; padding: 10px 0 0 0;
    &::before {
      width: 866px; height: 866px; pointer-events: none; position: absolute; left: 50%; top:100px; transform: translateX(-50%); border-radius: 50%; content: ''; display: block; background:#fff; z-index: 2;
    }
    & .fv__leadtitle {
      display: block; width: 100%; max-width: 622px; text-align: center; position: relative; font-size: 2.7rem; margin: 0 auto 0 auto; z-index: 3;
      & .note {
        font-size: 10px; position: absolute; left: 50%; width: 100%; display: block; text-align: center; bottom: -10px; transform: translateX(-50%); font-weight: normal;
      }
    }
    & .lead__point {
      position: relative; z-index: 3;background: linear-gradient(to bottom , #ffffff00 , #ffffff00 90px , #ffffffff 90px , #ffffffff 100%); margin: 20px 0 0 0; padding: 0 0 20px 0;
      & ul {
        display: flex; flex-wrap: wrap; justify-content: center;width: 100%; max-width: 560px; margin: 0 auto 0 auto; 
        & li {
          flex-basis: 180px;
        }
      }
      & .lead__note {
        font-size: 1rem; display: block; text-align: center; background: #fff;
      }
    }
    
  }
}

@media screen and (max-width:767px) {
  .fv {
    & .bg01 , & .bg02 {
      display: none;
    }
    & .site__description {
      border-radius: 0; font-size: 3.56vw; width: 100%; height: 9.16vw;
    }
    & .site__point {
      margin: 20px auto 0 auto; max-width: none; width: 89.82vw;
    }
    & .lp__title {
      width: 89.82vw; max-width: none;
    }
    & .lp__title2 {
      width: 89.82vw; max-width: none;
    }
    & .lp__subtitle {
      width: 79.64%; max-width: none;
    }
    & .fv__note {
      font-size: 2vw;
    }
    & .fv__item {
      margin: 20px auto 0 auto;
      & ul {
        max-width: none; width: 85.75%; gap:15px;
        & li {
          flex-basis: 100%;
          & span {
            font-size: 2vw;
          }
        }
      }
    }
    & .lead__box {
      &:before {
        width: 130vw; height: 130vw; top:17vw;
       }
      & .fv__leadtitle {
        font-size: 4.05vw; width: 85.29vw; max-width: none; margin: 20px auto 0 auto; padding: 0;
        & .note {
          font-size: 2vw; bottom: 0;
        }
      }
      & .lead__point {
        & ul {
          max-width: none; width: 94.65%;
          & li {
            flex-basis: 33.33%;
          }
        }
        & .lead__note {
          font-size: 2vw;
        }
      }
    }
  }
}
/* ------------------------------
btn-link
------------------------------ */
.btn-link{
  max-width: 335px;margin:70px auto 0;display: block;padding: 12px 0; font-size: 2.8rem;font-weight: bold;line-height: 1.25;color: #fff; background: #dd0000 url('../img/bg-button.webp');background-repeat: no-repeat;background-position: center right;background-size: contain;border-radius: 10px;text-align: center;box-shadow: 4px 4px #e5e5e5;position: relative;
  &:hover {
    opacity: 0.7;
  }
  &.speed {
    margin: 10px auto 0 auto; padding: 18px 0; max-width: 480px;
  }
  &.appLink {
    &:after {
      content: '※会員登録が必要です'; display: block; font-size: 1.2rem; text-align: center; line-height: 1; flex-basis: 100%;margin: 0.5em auto 0 auto;
    }
  }
  & span {
    display: block;margin-right: 15px;
    &.small {
      font-size: 80%; display: inline; margin: 0;
    }
  }
  & img {
    position: absolute;right: 5%;top: 50%;transform: translateY(-50%);
  }
}
.btn-step {
  & .btn-link {
    margin-top: 0;
  }
}
/* ------------------------------
SEC01
------------------------------ */
.sec_01{
  padding: 60px 0;
  & .orangeLine {
    border: #ff4700 solid 2px; border-radius: 10px; box-sizing: border-box; padding:20px 20px 30px 20px ; max-width: 900px; margin: 0 auto 0 auto;
    & .dakara {
      width: 100%; margin: 20px auto 0 auto; text-align: center;
      & .orangeCircle {
        display: flex; flex-wrap: wrap; justify-content: center; gap:1em; font-size: 3.4rem; 
        & span {
          color: #fff; position: relative;display: block; line-height: 1;
          &::before {
            background: #ff4700; position: absolute; left: 50%; top:50%; transform: translateX(-50%) translateY(-50%); content: ''; display: block; width: 1.52em; height: 1.52em; z-index: -1; border-radius: 50%;
          }
        }  
      }
      & p {
        font-size: 3.9rem; line-height: 1.46; margin: 20px auto 0 auto;
        & .orangeText {
          color: #ff4700;
        }
      }      
    }
    & .sub {
      font-size: 50%;
    }
  }
  & .tit-sec1 {
    font-size: 4rem;font-weight: 500;line-height: 1.4;
    & span {
      font-size: 4.5rem;
      &.txt {
        font-size: 2.4rem;line-height: 1.5;
      }
      &.num {
        font-size: 5.5rem;line-height: 1.3;
      }
    }
  }
  & .logo {
    max-width: 960px;margin: 50px auto 0;
    & .logo-list {
      height: 135px;overflow: hidden;
      & .total__row {
        display: flex; flex-wrap: wrap; justify-content: center; gap:20px 20px;
        & figure {
          align-self: center;
        }
      }
      & .row3 {
        align-items: center;
      }
    }
    &.show {
      & .logo-list {
        height: 100%;
      }
      & .btn-link-logo {
        &.is-more {
          display: none;
        }
        &.is-close {
          display: block;
        }
      }
    }
    & .btn-link-logo {
      max-width: 190px;margin: auto;display: block; color: #161616;padding: 12px 0;text-align: center;border-radius: 10px;font-weight: 500;margin-top: 20px; text-decoration: underline; text-underline-offset: 10px;
      & span {
        background-image: url('../img/ic_plus.webp');background-repeat: no-repeat;background-position: center right;padding-right: 30px;
      }
      &.is-close {
        display: none;
        & span {
          background-image: url('../img/ic_minus.webp');
        }
      }
      &:hover {
        opacity: 0.7;
      }
    }
  }
  & .comment {
    margin: 40px auto 0 auto; width: 100%; max-width: 900px;
  }
}

.speedText {
  text-align: center; margin: 40px auto 10px auto; font-size: 18px; font-weight: 500;
  & .color {
    color: #dd0000;
  }
}
@media (max-width:767px) {
  .sec_01 {
    & .orangeLine {
      & .dakara {
        & .orangeCircle {
          font-size: 5.3vw; 
        }
        & p {
          font-size: 6vw; 
        }      
      }
    }
    & .logo {
      & .logo-list {
        height: 245px;
        & .total__row {
          & figure {
            align-self: center; flex-basis: calc( 50% - 20px);
            &.wide {
              flex-basis: 100%;
            }
          }
        }
        & .row3 {
          align-items: center;
          & figure {
            &:nth-of-type(1) {
              width: 70%; margin-left: auto; margin-right: auto;
            }
            &:nth-of-type(2) {
              width: 70%; margin-left: auto; margin-right: auto;
            }
          }
        }
      }
    }
    & .tit-sec1 {
      font-size: 2.5rem;font-weight: 500;line-height: 1.4;
      & span {
        font-size: 3.5rem;
        &.txt {
          font-size: 2rem;line-height: 1.5;display: inline-block;margin-bottom: 15px;
        }
        &.num {
          font-size: 4.5rem;line-height: 1.3;
        }
      }
    }
  }
}
@media (max-width: 480px){
  .sec_01 {
    & .tit-sec1{
      letter-spacing: 2px;
    }
  } 
}
/* ------------------------------
price__zero
------------------------------ */
.price__zero { 
  padding: 80px 0 210px 0; position: relative; 
  & .abs-link {
    position: absolute; max-width: 480px;left: 50%;transform: translateX(-50%);z-index: 9;width: calc(100% - 20px);
    & .btn-link {
      margin-top: 0;
    }
  }
  &.btn-link {
    &.speed {
      max-width: 480px;
    }
  }
  & .price__01 {
    width: 100%; max-width: 750px; margin: 0 auto;
  }
  & .price__02 {
    width: 100%; max-width: 750px; margin: 0 auto 45px auto;
  }
  & .price__03 {
    width: 100%; max-width: 700px; margin: 0 auto 20px auto;
  }
  & .price__04 {
    width: 100%; max-width: 1000px; margin: 0 auto 50px auto;
  }
  & .price__05 {
    width: 100%; max-width: 1000px; margin: 0 auto 20px auto;
  }
  & .price__06 {
    width: 100%; max-width: 378px; margin: 0 auto; 
  }
}
@media screen and ( max-width:767px) {
  & .price__zero { 
    padding: 80px 0 280px 0; 
  }
}
/* ------------------------------
SEC02
------------------------------ */
.sec_02{
  position: relative; padding-top: 60px;background: url('../img/bg01.webp');background-repeat: no-repeat;background-size: 100%;background-position:top center;padding-bottom: 125px;
  &::after {
    content: '';position: absolute;width: 100%;height: 100%;background: #fbefd9;top: 0;z-index: -1;clip-path: polygon(0 0, 100% 0, 100% 80%, 0% 100%);
  }
  & .info {
    margin-top: 30px;margin-bottom: 60px;
    & ul {
      display: flex; align-items:end; justify-content: space-between;
      & li {
        &:first-child {
          flex-basis: 34%;
        }
        &:nth-child(2) {
          flex-basis: 30.5%;
        }
        &:nth-child(3) {
          flex-basis: 32.5%;
        }
      }
    }
  }
  & .speed {
    & .tit {      
      & img {
        max-height: 150px;
      }
    }
  }
  & .list-speed {
    margin-top: 60px;
    & li {
      width: 48%;background-color: #fff;margin-bottom: 40px;box-shadow: 4px 4px #fdac82;position: relative;padding: 20px 0;font-size: 2.2rem;background-image: url('../img/mark_speed.webp');background-repeat: no-repeat;background-position: bottom right;
      & img {
        position: absolute;left: 10px;top: -12.5px;
      }
    }
  }
  &.abs-link {
    position: absolute; max-width: 480px;left: 50%;transform: translateX(-50%);bottom: -47px;z-index: 9;width: calc(100% - 20px);
    & .btn-lik {
      margin-top: 0;
    }
  }
}
@media (max-width: 1920px){
  .sec_02{
    background-size: unset; padding-bottom: 140px;
  }
}
@media ( max-width:767px) {
  .sec_02 {
    background-size: 730%; padding-top: 40px; padding-bottom: 120px;
    &::after{
      clip-path: polygon(0 0, 100% 0, 100% 93%, 0% 100%);
    }
    & .list-speed {
      & li {
        width: 100%;
        &:last-child {
          margin-bottom: 0;
        }
      }
    }
    & .info {
      margin-bottom: 30px;
      & ul {
        flex-wrap: wrap;
        & li {
          &:first-child {
            flex-basis: 100%; text-align: center;
            & img {
              max-width: 50%;
            }
          }
          &:nth-child(2) {
            flex-basis: 48%;
          }
          &:nth-child(3) {
            flex-basis: 50%;
          }
        }
      }
    }
    & .abs-link {
      & .btn-link {
        z-index: 3;
      }
    }
  }
}
@media ( max-width:480px) {
  .sec_02 {
    &::after{
      clip-path: polygon(0 0, 100% 0, 100% 93%, 0% 100%);
    }
  }
}
/* ------------------------------
SEC03
------------------------------ */
.sec_03 {
  position: relative;padding-top: 160px;padding-bottom: 180px;
  &::after {
    z-index: -1;content: '';width: 100%;height: 100%;position: absolute;top: 0;left: 0;background-color: #fbe2b7;clip-path: polygon(100% 0, 100% 85%, 0 100%, 0 15%);
  }
  & .group {
    margin-top: 30px;position: relative;z-index: 2;
    &::after {
      content: '';height:100%;width: 35px;background: url('../img/arrow_down.webp');position: absolute;left: 120px;top: 0;z-index: -1;background-repeat: no-repeat;background-position: center;
    }
    & .box-step {
      display: flex;align-items: center;justify-content: space-between;margin-bottom: 40px;
      &:last-child {
        margin-bottom: 0;
      }
      & .left {
        width: 230px;
      }
      & .right {
        width: calc(100% - 250px);
        & p {
          text-align: center;font-size: 1.8rem;padding: 40px 0;font-weight: 500;background: #fff;box-shadow: 4px 4px #fda46e;position: relative;border-radius: 10px; background-image: url('../img/mark_step.webp');background-repeat: no-repeat;background-position: left top;background-size: contain;
          & .note {
            display: block; font-size: 80%; font-weight: normal;
          }
        }
      }
    }
  }
  & .btn-step {
    position: absolute;bottom: -94px;left: 50%;transform: translateX(-50%);max-width: 480px;width: calc(100% - 20px);
  }
}
@media ( max-width:767px) {
  .sec_03 {
    &::after {
      clip-path: polygon(100% 0, 100% 85%, 0 100%, 0 10%);
    }
    & .group {
      &::after {
        left: 60px;top: 10%;height: 75%;background-size: contain;
      }
      & .box-step {
        & .right {
          width: calc(100% - 100px);
          & p {
            background-image: url('../img/mark_step_sp.webp'); font-size: 1.6rem;padding: 20px 0 20px 20px;
            & .note {
              text-align: left; padding: 1em;
            }
          }
        }
        & left {
          width: 145px;
        }
      }
    }
    & .btn-step {
      bottom: 0;
    }
  }
}

 /* ------------------------------
SEC04
------------------------------ */
.sec_04 {
  padding-top: 100px;padding-bottom: 60px;text-align: center;margin-top: 94px;
  & .tit-sec04 {
    font-size: 1.4rem;margin-top: 40px;margin-bottom: 30px;
  }
  & .list {
    text-align: left; margin-top: 40px;
    & li {
      &:not(last-of-type) {
        margin-bottom: 20px;
      }
      &.area__title {
        font-size: 2rem; font-weight: bold; margin: 0 0 1em 0;
        & span {
          font-size: 75%; margin: 0 0 0 1em; font-weight: normal;
        }
      }
      & + li {
        &.area__title {
          margin: 2em 0 1em 0;
        }
      }
      & p {
        font-size: 14px;
        &:nth-of-type(1) {
          font-weight: bold;
        }
        & .cap {
          margin-top: 10px; font-size: 1.2rem;
        }
      }
    }
  }
}

#target__area {
	justify-content: center; gap:20px;
  & figure {
    &:nth-of-type(1) {
      flex-basis: calc( 44.50% - 10px);
    }
    &:nth-of-type(2) {
      flex-basis: calc( 55.50% - 10px);
    }
    &:nth-of-type(3) {
      flex-basis: calc( 44.50% - 10px );
    }
    &:nth-of-type(4) {
      flex-basis: calc( 55.50% - 10px );
    }
  }
}
@media ( max-width:767px) {
  .sec_04{
    margin-top: 0;
  }
  #target__area { 
    gap:10px;
    & figure {
      &:nth-of-type(1) , &:nth-of-type(2) , &:nth-of-type(3) , &:nth-of-type(4) {
        flex-basis: 100%;
      }
    }
  }
}
/* ------------------------------
Footer
------------------------------ */
footer{ 
  background-color: #f4f4f4;padding: 50px 0;
  & .tit-f {
    display: flex;align-items: center;justify-content: center;margin-bottom: 20px;flex-wrap: wrap;
    & p {
      font-size: 2.2rem;
    }
  }
  & .note {
    font-size: 1.4rem;
  }
  & .mv-txt-f {
    margin: 40px 0;
  }
  & .mv-txt-f2{
    margin: 40px auto;  
  }
}
@media ( max-width:1920px) {
  footer {
    padding-bottom:120px;
  }
}
@media ( max-width:767px) {
  footer {
    & .mv-txt-f {
      margin: 25px 0;
    }
    & .tit-f {
      & p {
        width: 100%;margin-top: 16px;
      }
    }
    & .note {
      text-align: left !important;
    }  
  }
}
@media (max-width: 480px){
  footer {
    & .mv-txt-f {
      width: 60%;margin-top: 10px;    
    }
  } 
}


/* ------------------------------
Bottom CV and Float Btn
------------------------------ */
#bottomCV {
  position: fixed; right: 0; bottom: 0; width: 310px; z-index: 11;
  & .btn-link {
    margin-top: 0;
  }
  & .cvBox {
    & a {
      display: block; font-family: 'Zen Maru Gothic'; font-size: 2.8rem; max-width:100%; color: #fff; margin-left: auto; border-radius: 10px 0 0 0; padding: 10px 0px; text-align: center; line-height: 1.2; font-weight: bold; background: #dd0000 url('../img/bg-button.webp'); background-repeat: repeat; background-repeat: no-repeat; background-position: center right; background-size: contain; box-shadow: 0px 0px 4px 4px #d9d9d9 ;
      & img {
        right: 2%;top: 60%;
      }
      & .sub-title {
        font-size: 2.4rem ; font-family: 'Noto Sans JP', sans-serif;
      }
      & .f-20 {
        font-size: 2rem;
      }
    }
  }
}
#float_btn { 
  position: fixed; bottom:20px; right: 43px; width: 147px; z-index: 2; 
  & a {
    transition: opacity 0.5s linear 0s;
    &:hover {
      opacity: 0.7;
    }
  }
  & .balloon {
    position: absolute; width: 57px; top:5px; right: -9.52%;
  }
}
@media ( max-width:767px) {
	#float_btn { 
    width: 112px; right: 20px; bottom: 10px;
    & .balloon {
      width: 44px;
    }
  }
}

/* ------------------------------
Review
------------------------------ */
section {
  &.review {
    background: #F2E9C7; padding: 100px 0 180px; margin-top: 170px;
  }
}
.review_inner {
  & h2 {
    text-align: center; font-size: min(4vw,24px); position: relative; font-weight: 800; width: max-content; margin: 0 auto 50px;
    & span {
      display: block; font-size: min(6vw,30px); margin-top: 5px; color: #B4A365; 
    }
  }
}
span {
  &.review_title_illust {
    top: 0; position: absolute; right: -110px; width: 90px;
  }
}
.slick-list {
  &.draggble {
    padding: 0 5%;
  }
}
.review_list{
  max-width: 1200px; width: calc(100% - 40px); margin: 0 auto;
}
.review_content {
  border-radius: 20px; overflow: hidden; padding: min(5vw,40px); background: #fff; position: relative;
  & + .review_content {
    margin-top: min(5vw,40px);
  }
  & .review_info {
    height: min(16vw,203px); overflow: hidden; transition: all .3s ease;
    & p {
      font-size: min(3.5vw,1.6rem); line-height: 1.65em;
      & + p {
        margin-top: 1em;
      }
    }
  }
  & .abs-link {
    display: none;
  }  
  & .btn_more {
    position: absolute;  bottom: 0;  left: 0;  right: 0;  padding: min(5vw,40px);  background: linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 80%, rgba(255, 255, 255, 1) 100%);
    & a {
      content: '続きを読む'; display: block; background: url(../img/icon_arrow_open.svg) no-repeat #B4A365 top 50% right 10px / 25px; color: #fff;  text-align: center; padding: 10px 50px; font-size: 16px; border-radius: 100px; width: min(60vw, 340px); margin: 0 auto; transition: all 0.25s ease; 
      &::before {
        content: '続きを読む';
      }
      &:hover {
        opacity: 0.6;
      }
    }
  }
  &.open {
    & .abs-link {
      display: block;
    }
    & .review_info {
      height: auto;
    }
    & .btn_more {
      position: static; padding-bottom: 0;
      & a {
        background-image: url(../img/icon_arrow_close.svg);
        &:before {
          content: '閉じる';
        }
      }
    }
  }  
  & .speedText {
    margin: 20px auto;
  }
}
.review_info {
  & h3 {
    color: #B6A66A; margin: 20px 0; font-size: min(4.2vw,2.2rem); font-weight: 600; line-height: 1.5em;
  }
}
.review_date {
  font-size: min(3.5vw,1.6rem); font-weight: 400;
  & span {
    border-left: 1px solid; font-size: inherit; font-weight: 400; padding-left: 10px; margin-left: 10px;
  }
}
@media screen and (min-width: 480px) {
  .review_content {
    & .review_thumb {
      width: 30%;    float: left;    margin: 0 min(5vw,40px) min(3vw,20px) 0;    border-radius: 10px;    overflow: hidden;
    }
  }
}
@media screen and (max-width: 480px) {
  .review_content {
    border-radius: 12px;
    & .review_thumb {
      width: 30%; float: left; margin: 0 min(5vw,40px) min(3vw,20px) 0; border-radius: 10px; overflow: hidden;
    }
    & .review_info {
      height: 90vw;
    }
    & .btn-link {
      font-size: min(6vw,28px);
    }
  }
  section {
    &.review {
      padding: 80px 0; margin-top: 80px;
    }
  }
  span {
    &.review_title_illust {
      width: 60px; right: -72px;
    }
  }
  .review_inner {
    & h2 {
      margin-bottom: 30px;
      & span {
        margin-top: 0;
      }
    }
  }
  .review_thumb{
    margin-bottom: min(5vw,40px);
  }
  & .speedText {
    font-size: min(3.5vw, 18px);
  }
  .review_info {
    & h3 {
      margin: 15px 0;
    }
    & a {
      font-size: 14px;
    }
  }
}
/* ------------------------------
REASON
------------------------------ */
.wrap_rsn {
  & .rsn_rsn {
    margin-top: 112px; display: flex; flex-direction: column; align-items: center; padding: 48px 24px; background: #F9F9F9;
  }
  & .title_rsn {
    font-size: 1.6em; font-weight: 600; text-align: center;
  }
  & .big_rsn {
    font-size: 1.5em;
  }
  & .red_rsn {
    color: #dd0000;
  }
  & .highlight_rsn {
    background: linear-gradient(transparent 60%, #fbe2b7 80%); line-height: 1.0;
  }
  & .notion_rsn {
    font-size: 0.5em; font-weight: 300; margin-left: 4px;
  }
  & .list_rsn {
    display: flex; flex-direction: column; gap: 24px; margin-top: 24px; max-width: 1000px;
    & li {
      background: #FFFFFF; border-radius: 4px; padding: 16px;
    }
  }
  & .label_rsn {
    font-size: 1.3em; font-weight: 600;
  }
  & .index_rsn {
    font-weight: 500; margin-right: 8px;
  }
  & .content_rsn {
    margin-top: 16px;
    & .desc_rsn {
      font-size: 1.1em; line-height: 2.0;
    }
    & .image_rsn {
      background: #F9F9F9; padding: 8px; margin-top: 16px; border-radius: 8px;
    }
  }
  & .annotation_rsn {
    font-size: 0.7em; font-weight: 300; margin-top: 16px; width: 100%; max-width: 1000px;
  }
}

@media screen and (min-width: 767px) {
  .wrap_rsn {
    & .list_rsn {
      & li {
        padding: 48px;
      }
    }
    & .content_rsn {
      & .image_rsn {
        padding: 16px;
      }
    }
  }
}
/* ------------------------------
FAQ
------------------------------ */
.faq {
  & .faq-box {
    color: #242424; font-size: 1.4rem; line-height: 1.8;font-family: 'Noto Sans JP', sans-serif;margin: 0;box-sizing: border-box;border: 0;outline: none;padding: 60px 0;background: #F8F8F8;
  }
  & .container_faq {
    color: #242424;font-size: 1.4rem;line-height: 1.8;font-family: 'Noto Sans JP', sans-serif;padding: 0;box-sizing: border-box;border: 0;outline: none;margin: 0 auto;max-width: 1200px;padding: 0 24px;
  }
  & .faq-tit {
    color: #242424;word-spacing: 0;line-height: 1.8;margin: 0;padding: 0;box-sizing: border-box;border: 0;outline: none;text-align: center !important;margin-bottom: 40px;font-family: 'Noto Sans JP', sans-serif;font-weight: bold;font-size: 2.6rem;
  }
  & .qa-list_faq {
    color: #242424;font-size: 1.4rem;line-height: 1.8;font-family: 'Noto Sans JP', sans-serif;margin: 0;padding: 0;border: 0;outline: none;list-style: none;box-sizing: border-box;
    & li {
      color: #242424;word-spacing: 0;-webkit-text-size-adjust: 100%;font-size: 1.4rem;line-height: 1.8;font-family: 'Noto Sans JP', sans-serif;list-style: none;margin: 0;box-sizing: border-box;border: 0;outline: none;background-color: #fff9e3;margin-bottom: 20px;border-radius: 4px;
    }
  }
  & .q_faq {
    color: #242424;line-height: 1.8;list-style: none;margin: 0;box-sizing: border-box;border: 0;outline: none;font-weight: bold;font-family: 'Noto Sans JP', sans-serif;padding: 20px;font-size: 1.6rem;display: flex;align-items: flex-start;
  }
  & .a_faq {
    background: #FFFFFF;color: #242424;line-height: 1.8;list-style: none;margin: 0;box-sizing: border-box;border: 0;outline: none;font-family: 'Noto Sans JP', sans-serif;padding: 20px;display: flex;align-items: flex-start;font-size: 1.6rem;flex-wrap: wrap;display: inline-block;width: 100%;
    & a {
      text-decoration: underline;
    }
  }
  & span {
    &.faq-tit {
      list-style: none;margin: 0;padding: 0;box-sizing: border-box;border: 0;outline: none;font-size: 2.6rem;font-weight: bold;font-family: 'Poppins';margin-right: 10px;line-height: 1;color: #b7a35c;
    }
  }
}


@media screen and (min-width: 767px) {
  .faq {
    & .q_faq {
      font-size: 1.8rem;
    }
    & .a_faq {
      font-size: 1.8rem;
    }
  }
}

/* ------------------------------
Movie
------------------------------ */
.movie-map{
  padding: 60px 0 100px;
  & .b-title {
    font-size: 3.4rem;  font-weight: 600;  line-height: 1.4;  text-align: center;  padding-bottom: 30px;
  }
  & .introVideo {
    transition: all 0.4s; background: #fff;padding: 7px;max-width: 505px;margin: 0 auto;box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.25);display: block;border-radius: 6px;
    &:hover {
      opacity: 0.7;
    }
  }
}
@media (max-width: 767px) {
  .movie-map {
    & .b-title {
      font-size: 2.6rem; padding-bottom: 20px;
    }
  }
}
/* ------------------------------
Ntk（納得）
------------------------------ */
.wrap_ntk{
  margin-top: min(20vw,200px); text-align: center;
  & p {
    font-size: min(4.7vw,30px); line-height: 1.8em; font-weight: 700;
  }
  & em {
    font-style: normal;
  }
  & .txtRd {
    color: #D7001C;
  }
  &[crass*="row_"] {
    margin-bottom: min(8vw,60px);
  }
  & .txt {
    font-size: min(3.8vw,22px); margin-bottom: min(8vw,60px);
  }
  & .row_01 {
    padding: 40px; background: #F1E8C6; position: relative; margin-bottom: 5.1%;
    &::after {
      content: ''; background: url(../img/bg_tri_01.svg) no-repeat center bottom / 100%; width: 100%; padding-top: 5.1%; position: absolute; top: 100%; left: 0; right: 0;
    }
    & .inner {
      position: relative; display: inline-block;
    }
    & .txt_box {
      position: absolute; top: 0; left: 0; bottom: 4%; width: min(73%,530px); display: flex; justify-content: center; align-items: center;
    }
  }
  & .row_02 {
    padding-top: min(8vw,60px);
    & p {
      & em {
        font-size: 1.2em;
      }
    }
  }
  & .row_03 {
    position: relative;
    & .txt_box {
      border: 1px solid #000; border-radius: 10px; padding: 40px;
      & p {
        font-size: min(4vw,25px);
        & em {
          font-size: 1.1em;
        }
      }
    }
    & .img_box {
      position: absolute; left: 0; bottom: 0; width: min(26%,306px);
      & img {
        width: 100%;
      }
    }
  }
  & .row_04 {
    & .tit {
      background: #76642A; color: white; font-size: min(5vw,25px); text-align: center; padding: 0.2em; letter-spacing: 0.1em;
    }
    & .inner {
      background: #F4F2EC; padding: 30px 40px 40px; text-align: center;
    }
    & .course_list {
      display: flex; gap: 10px; margin-bottom: min(5vw,40px);
    }
  }
  & .row_05 {
    background: white;
    & .tit {
      font-size: 2.4rem; font-weight: bold; text-align: center;
    }
    & table {
      border-collapse: collapse; border: #000; width: 940px; width: 100%; margin: min(5vw,40px) auto;
      & .rd {
        color:#e60012;
      }
      & tr {
        & th {
          padding: 15px 10px; border: 1px solid #000; font-size: 1.8rem; line-height: 1.5em;
          &:not(.c01), &:not(.c02) {
            background: #ECECEC; width: 20%; text-align: left;
          }
          &.c01 {
            width: 40%; background: #B7A25C; color: white; border-left: 6px solid #B7A25C; border-right: 6px solid #B7A25C; border-top: 1px solid #B7A25C; border-bottom: 1px solid #B7A25C;
          }
          &.c02 {
            width: 40%; background: #B2565D; color: white;
          }
        }
        & td {
          padding: 15px 10px; border: 1px solid #000; font-size: 1.8rem; line-height: 1.5em;
          &.c01 {
            border-left: 6px solid #B7A25C; border-right: 6px solid #B7A25C;
          }
        }
        &:last-of-type {
          & td {
            &.c01 {
              border-bottom: 1px solid #B7A25C; position: relative;
              &::after {
                content: ''; position: absolute; bottom: 0; left: 0; right: 0; padding-top: 6px; background: #B7A25C;
              }
            }
          }
        }
      }
    }
  }
}



@media (min-width: 767px) {
  .wrap_ntk {
    & .row_03 {
      padding: 0 40px 40px 27%;
    }
  }
}
@media (max-width: 767px) {
  .wrap_ntk {
    & .row_01 {
      padding: 30px 20px 20px;
      & p {
        font-size: min(4vw,30px); line-height: 1.6em;
      }
    }
    & .row_03 {
      & .img_box {
        left: 7%;
      }
      & .txt_box {
        padding: 20px 10px;
        & p {
          &:nth-of-type(2) {
            padding-left: 35%; text-align: left;
          }
        }
      }
    }
    & .row_04 {
      & .inner {
        padding: 20px;
      }
      & .tit {
        padding: 0.5em;
      }
    }
    & .row_05 {
      & table {
        & tr {
          & th , & td {
            padding: 5px 5px 5px 10px; font-size: 1.4rem;
            &.c01 {
              border-left: 4px solid #B7A25C; border-right: 4px solid #B7A25C;
            }
          }
          & th {
            &:not(.c01) , &:not(.c02) {
              width: 26%;
            }
            &.c01, &.c02 {
              width: 37%;
            }
            &.c01 {
              border-top: 1px solid #B7A25C;
            }
          }
          & td {
            text-align: left;
          }
          &:last-of-type {
            & td {
              &.c01 {
                border-bottom: 1px solid #B7A25C;
                &::after {
                  padding-top: 4px;
                }
              }
            }
          }
        }
      }
    }
  }
}