/* CSS Document */

/*******************

 LP style

********************/
html , body {
    box-sizing:border-box;
    margin: 0 auto;
    padding: 0;
    width: 100%;
    background: #fff;
  }
  
  /* content
  --------------------------------------------------*/
#lpbox , #lpfooter {
    font-size: 14px;
    font-size: 3.7333vw;
  }
  @media screen and (min-width:750px){
  #lpbox , #lpfooter {
      font-size: 28px;
      max-width: 750px;
      margin: 0 auto;
    }
  }
  #lpbox a , #lpfooter a{
    color: inherit;
    text-decoration: none;
    font-size: inherit;
    font-weight: inherit;
  }
  #lpbox a:hover, #lpfooter a:hover{
    text-decoration: underline;
  }

  #lpbox img ,
  #lpfooter img {
    width: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    vertical-align: bottom;
  }
  #lpbox img.img-t ,
  #lpfooter img.img-t {
    vertical-align: top;
  }

  #lpbox h1,h2,p {
    margin: 0%;
  }
  
  header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  color: #fff;
  padding: 10px;
}

.logo img {
  max-width: 100%;
  height: auto;
}

.contact a img, .social a img {
  max-width: 100%;
  height: auto;
  margin-right: 10px;
}

.hamburger {
  display: none;
  border: none;
  background-color: transparent;
  cursor: pointer;
}

.line {
  display: block;
  width: 25px;
  height: 3px;
  background-color: #fff;
  margin: 5px 0;
}

@media screen and (max-width: 750px) {
  header {
    flex-direction: column;
  }

  .contact, .social {
    margin-top: 10px;
  }

  .hamburger {
    display: block;
  }

  .contact, .social, .hamburger {
    text-align: center;
  }

  .contact a img, .social a img {
    margin-right: 0;
    margin-bottom: 10px;
  }

  .line {
    background-color: #333;
  }
}
.spmenu {
    color: #000;
}

.spmenu_btn {
    display: block;
    position: absolute;
    top: 25px;
    right: 15px;
    width: 30px;
    height: 22px;
    background: #222222;
    border-top: 10px solid #fff;
    border-bottom: 10px solid #fff;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

.spmenu_btn:before {
    content: '';
    position: absolute;
    width: 30px;
    height: 2px;
    background: #000;
    top: -9px;
    right: 0;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

.spmenu_btn:after {
    content: '';
    position: absolute;
    width: 30px;
    height: 2px;
    background: #222222;
    bottom: -9px;
    right: 0;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

.cta_display {
    width: 30%;
}

.founding {
    position: relative;
    color: #F27088;
    font-family: serif;
    font-weight: 800;
    text-align: center;
    font-size: min(8vw,64px);
}

.founding_left {
    position: absolute;
    width: 4%;
    top: 0%;
    left: 23%;
    margin: 0%;
}

.founding_right {
    position: absolute;
    width: 4%;
    margin: 0%;
    top: 0%;
    right: 23%;
}

.history {
    color: #222222;
    font-family: serif;
    font-weight: 800;
    text-align: center;
    font-size: min(5vw,40px);
}

.school {
    background: linear-gradient(102.69deg, #AAE1DF 0%, #6ECECA 17.71%, #0ABAB5 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-family: serif;
    font-weight: 800;
    text-align: center;
    font-size: min(4.8vw,36px);
}

.first_view {
    position: relative;
}

.kato_sensei {
    width: 100%;
}

.start {
    position: absolute;
    top: 0%;
    left: 20%;
    right: 20%;
    margin: auto;
    padding: 0.5em 1em;
    color: #222222;
    background:#fff;
    font-family: serif;
    font-weight: 700;
    text-align: center;
    font-size: min(2vw,16px);
}

.start span {
    color: #0ABAB5;
}

.school_features {
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    width:100%;
    max-width: 1000px;
}
.school_features .box {
    flex: 1 0 calc(30% - 2px);
    height: calc(30vw - 2px);
    text-align: center;
    font-size: min(3.8vw,24px);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    background: linear-gradient(135deg, #FFEBEE 0%, rgba(255, 235, 238, 0) 49.21%, #FFEBEE 100%);
    border: 1px solid #FFF5F7;
    filter: drop-shadow(0px 0px 16px rgba(65, 14, 23, 0.08));
    margin: 2% 0% 4% 0%;
}
.box p {
    margin: 0;
    padding: 0;
    color: #222222;
    line-height: 1.5;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.box p span {
    display: inline-block;
    color: #F27088;
    font-size: min(4.5vw,32px);
}

.cta {
    width: 90%;
    margin: 10% auto 10%;
}

.ctabtn {
    filter: drop-shadow(0px 4px 20px rgba(0, 81, 68, 0.16));
}

/* 購入ボタンのアニメーション */
.cta-btn img {
    animation: skew 2.3s linear infinite;
}
 @keyframes skew {
        0% {transform: skew(0deg, 0deg);}
        5% {transform: skew(5deg, 4.2deg);}
        10% {transform: skew(-4deg, -3deg);}
        15% {transform: skew(3deg, 2.2deg);}
        20% {transform: skew(-2deg, -1.5deg);}
        25% {transform: skew(0.9deg, 0.9deg);}
        30% {transform: skew(-0.6deg, -0.6deg);}
        35% {transform: skew(0.3deg, 0.3deg);}
        40% {transform: skew(-0.2deg, -0.2deg);}
        45% {transform: skew(0.1deg, 0.1deg);}  
        50% {transform: skew(0deg, 0deg);}
	}
	
.cta_btn_fixed {
	position: fixed !important;
	margin: 0% 0% 0% 50% !important;
    bottom: 12px !important;
    max-width: 750px;
    z-index: 100;
    width: 50%;
	}

	.cta_display {
		display: block;
		animation: fadeIn 0.5s forwards;
		opacity: 0%;
	}

	.cta_none {
		animation: fadeOut 0.5s forwards;
		opacity: 100%;
		display: none !important;
	}

	.cta_none_f {
	   display: none !important;
	}

	@keyframes fadeIn {
		0% {
			opacity: 0%;
		}

		100% {
			opacity: 100%;
		}

	}

	@keyframes fadeOut {
		100% {
			opacity: 0%;
			display: none;
		}

		0% {
			opacity: 100%;
		}
	}

.fixed_cta_animated {
    animation: move-y .8s infinite alternate ease-in-out;
}
@keyframes move-y {
    from {
        transform: translateY(-6px);
    }
    to {
        transform: translateY(6px);
    }
}

.cta_animated {
    animation: move-z .8s infinite alternate ease-in-out;
}
@keyframes move-z {
    from {
        transform: scale(0.9);
    }
    to {
        transform: scale(1);
    }
}

.thought_title {
    text-align: center;
    font-size: min(5vw,40px);
}

.thought_title h2 span {
    color: #0ABAB5;
}

.thought_text {
    margin: 0 4% 8%;
}

.thought_text h3 {
    text-align: center;
    font-size: min(5.5vw,40px);
    margin-bottom: 2%;
}

.thought_text p {
    font-size: min(3.5vw,25px);
    margin-top: 4%;
}

figure {
	float: right;
	margin: 0 0 15px 15px;
	width: 30%;
}
figure img {
	max-width: 100%;
}

.instagram {
    background: linear-gradient(175.29deg, #FFF8FD 0%, #FFF9F9 28.64%, #FFF9F6 43.23%, #F8F4E6 100%);
}

.instagram_title {
    text-align: center;
    padding-top: 8%;
    padding-bottom: 8%;
    font-size: min(5vw,40px);
}

.instagram_title h3 {
    margin: 0%;
    font-size: min(4vw,24px);
}

.instagram_title h3 span {
    color: #0ABAB5;
}


.instagram_list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    width: 90%;
    margin: 0 auto;
}

.instagram_list .box {
    width: 45%;
    margin-bottom: 4%;
  }
  .box img {
    width: 100%;
    height: auto;
    display: block;
    box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.08);
    border-radius: 6.50228px;
  }

.instagram_text {
    margin: 4% 8% 8%;
    font-size: min(3.5vw,24px);
}

.instagram_text p span {
    color: #0ABAB5;
    font-weight: 700;
}

.insta_cta {
    width: 90%;
    margin: 10% auto 0%;
    padding-bottom: 4%;
    filter: drop-shadow(0px 4px 20px rgba(0, 81, 68, 0.16));
}

.worries {
    background: linear-gradient(180deg, #E6E6E6 0%, #FFFFFF 100%);
    /* Inside auto layout */
    flex: none;
    order: 3;
    flex-grow: 0;
}

.worries_title {
    padding-top: 8%;
    padding-bottom: 4%;
    text-align: center;
    font-size: min(4vw,32px);
}

.worries_title h2 span {
    color: #0ABAB5;
}

.worries_box {
    position: relative;
    margin-bottom: 5%;
}

.worries_box_text {
    position: inherit;
    z-index: 2;
    text-align: center;
    color: #FFFFFF;
    margin: auto !important;
    width: 30%;
    padding: 2.5% 2% 2.5% 2%;
    font-size: min(4vw,24px);
    font-family: 'Lato', sans-serif;
    font-style: normal;
    font-weight: 400;
    background: #0ABAB5;
    border-radius: 4px;
}

.worries_text {
    z-index: 1;
    margin: -5% auto 5%;
    text-align: center;
    width: 75%;
    padding: 8% 0% 8% 0%;
    font-weight: 700;
    font-size: min(6vw,28px);
    background: #FFFFFF;
    border: 1px solid #0ABAB5;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.25);
    border-radius: 4px;
}

.worries_text span {
    color: #0ABAB5;
}

.explanation_title {
    text-align: center;
    padding: 5% 0%;
    font-size: min(4vw,32px);
}

.explanation_title h2 span {
    color: #0ABAB5;
}

.explanation_text {
    margin:4% 0;
    padding: 4%;
    background: #F8F4E6;
    border-radius: 4px; font-size: min(3.5vw,25px);
}

.biological_parent_title {
    text-align: center;
    padding: 5% 0%;
}

.biological_parent_title h2 span {
    color: #0ABAB5;
}

.biological_parent_text {
    margin: 4% 0;
    padding: 4%;
    background: #F8F4E6;
    border-radius: 4px;
	font-size: min(3.5vw,25px);
}

.comparison_title {
    text-align: center;
    margin: 8%;
}

.comparison_table {
    margin: auto;
    width: 90%;
}

.curriculum {
    background: linear-gradient(164.48deg, #E6FAFA 0%, #AAE1DF 100%);
}

.curriculum_title {
    text-align: center;
    padding: 8%;
}

.curriculum_title h2 span {
    color: #0ABAB5;
}

.curriculum_detail {
    margin: 0% auto;
    padding: 0% 0% 10%;
    width: 90%;
}

.instructor {
    background: linear-gradient(180deg, #FDE6EA 0%, #FFF4F8 35.42%, #FFFFFF 56.77%, #EFFDFF 71.88%, #DDF3F3 100%);
}

.instructor_title h2{
    text-align: center;
    padding-top: 2%;
    font-size: min(5vw,40px);
}

.instructor_title h3{
    text-align: center;
    padding-top: 8%;
    color: #0ABAB5;
    margin: 0%;
    font-size: min(4vw,24px);
}

.instructor_detail{
    text-align:center;
    padding: 8% 0 0;
}

.area h2{
	text-align:center;
    color: #ffffff;
}
.area{
	display:inline-block;
	padding:10px;
	background:#F27088;
	position:relative;
    z-index: 1;
	margin:0 20%;
	text-align:left;
    filter: drop-shadow(0px 0px 16px rgba(0, 109, 98, 0.24));
}
.area:before{
	content:"";
	width:20px;
	height:100%;
	left:-20px;
	top:0;
	position:absolute;
	background:linear-gradient(to bottom left, #F27088 50%, transparent 50%) top left/ 100% 50% no-repeat,
    linear-gradient(to top left, #F27088 50%, transparent 50%) bottom left / 100% 50% no-repeat;
}
.area:after{
	content:"";
	width:20px;
	height:100%;
	right:-20px;
	top:0;
	position:absolute;
	background:linear-gradient(to bottom right, #F27088 50%, transparent 50%) top left/ 100% 50% no-repeat,
    linear-gradient(to top right, #F27088 50%, transparent 50%) bottom left / 100% 50% no-repeat;
}

.instructor_img {
    position: relative;
    z-index: 0;
    margin: -5% 0 0;
}

.detail {
    position: relative;
    z-index: 1;
    margin: -8% 4% 0;
    padding: 0 4%;
    background: #ffffff;
    box-shadow: 0px 0px 16px rgba(0, 109, 98, 0.12);
}

.detail h2 {
    color: #0ABAB5;
    font-size: min(12vw,48px);
}

.detail h3 {
    color: #CA9430;
    font-size: min(4vw,24px);
    font-weight: 100;
    padding: 8% 0 4%;
}

.detail h4 {
    color: #CA9430;
    font-size: min(4vw,24px);
    text-align: left;
    padding: 0 0 1%;
    border-bottom:solid
    #CA9430 1px;
}

.detail p {
    text-align: left;
}

.detail ul, ol {
    color: #CA9430;
    margin: 0;
    padding: 0.5em 0em 2em 1.5em;
}

.detail ul li, ol li {
    line-height: 1.5;
    padding: 0.2em 0;
    text-align: left;
}

.detail li span {
    color: #222222;
}

.support {
    margin: 4% 0 0;
}

.support_title {
    text-align: center;
    padding: 8%;
}

.support_list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    width: 90%;
    margin: 0 auto;
}

.support_list .box {
    width: 45%;
    margin-bottom: 4%;
  }
.support .box img {
    width: 100%;
    height: auto;
    display: block;
  }

.user_voice {
    background: radial-gradient(50% 50% at 50% 50%, #E6FAFA 0%, rgba(230, 250, 250, 0) 100%);
}

.user_voice_title {
    text-align: center;
    padding: 8% 0 0%;
  }
      
  .swiper {
    padding: 8% 0 !important;
    max-height: 700px; /* 最大の高さ */
    min-height: 400px; /* 最小の高さ */
  }
  .swiper-slide {
    display: flex;
    justify-content: center; /* 左右の中央揃え */
  }
  .swiper-slide img {
    align-self: center; /* 上下の中央揃え */
    max-width: 62%;
    width: auto;
  }
@media screen and (max-width:500px){
  .swiper-slide img {
    max-width:90%;
  }
}
  :root {
    --swiper-theme-color: #0ABAB5 !important
}

.reason h2 { font-size: min(6vw,35px); text-align:center; margin:50px auto 10px; color:#F27088; }
.reason h2 span { position:relative; padding:0 50px; }
.reason h2 span:before, .reason h2 span:after { content:''; position:absolute; top:50%; display:inline-block; width:50px; height:2px; background-color:#F27088; }
.reason h2 span:before { left:0; -webkit-transform:rotate(60deg); transform:rotate(60deg); }
.reason h2 span:after { right:0; -webkit-transform:rotate(-60deg); transform:rotate(-60deg); }
.reason ul { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; list-style-type:none; margin:0; padding:0; }
.reason li { width:49%; margin:10px 0; padding:50px 15px; font-size: min(3.0vw,20px); font-weight:700; box-shadow:2px 2px 5px #ccc; text-align:center; box-sizing:border-box; align-items:center; background: linear-gradient(135deg, #FFEBEE 0%, rgba(255, 235, 238, 0) 49.21%, #FFEBEE 100%); color:#222; }
.reason li span { color:#F27088; font-size: min(4.0vw,25px); }
@media screen and (max-width:700px){
.reason ul { display:block; }
.reason li { width:80%; margin:15px auto; padding:30px 5px; }
}
@media screen and (max-width:450px){
.reason li { width:90%; font-size: min(3.8vw,20px); }
.reason li span { font-size: min(4.7vw,25px); }
}

.instructor1 { display:flex; padding-top:20px; }
.instructor1 .instructor_detail {width:50%; padding:1%; box-sizing:border-box; }
.instructor1 .area h2 { font-size:min(3vw,18px); }
.instructor1 .area{ width:40%; }
.instructor1 .detail { margin: -10% 2% 0; }
.instructor1 .detail h2 { font-size: min(4vw,22px); }
.instructor1 .detail h3 { font-size: min(3vw,18px); font-weight:200; padding:5% 0 2%; }
.instructor1 .detail h4 { font-size: min(3vw,17px); margin:0; padding-top:20px; }
.instructor1 .detail ul, ol { padding:15px 0em 2em 15px; }
.instructor1 .detail ul li, ol li { font-size: min(3vw,16px); margin:0; padding:0 0 5px; }
@media screen and (max-width:600px){
.instructor1 { display:block; }
.instructor1 .instructor_detail {width:100%; padding:4%; }
}

.instructor2 { display:flex; flex-wrap:wrap; justify-content:space-between; padding:50px 0 20px; }
.instructor2 .instructor_detail {width:30%; padding:1%; box-sizing:border-box; }
.instructor2 .area h2 { font-size:min(3vw,16px); }
.instructor2 .area{ width:40%; }
.instructor2 .detail { margin-bottom:30px; padding:10px 0; }
.instructor2 .detail h2 { font-size: min(3vw,20px); }
@media screen and (max-width:600px){
.instructor2 .instructor_detail {width:50%; padding:2%; }
}

#success { margin:30px 0; padding:2%; background: linear-gradient(180deg, #FDE6EA 0%, #FFF4F8 35.42%, #FFFFFF 56.77%, #EFFDFF 71.88%, #DDF3F3 100%); }
#success h2 { font-size: min(6vw,35px); text-align:center; margin:20px auto 10px; color:#F27088; }
#success .cost p { text-align:center; }
#success .cost p strong { color:#0ABAB5; }
#success .cost p span { font-size:75%; }
#success .simulation { margin:50px 0; padding:2% 3%; text-align:center; background-color:#fff; border-radius:20px; padding:25px; }
#success .simulation h3 { font-size: min(4vw,20px); text-align:center; margin:20px auto 10px; color:#0ABAB5; position:relative; display:inline-block; padding:0 60px  }
#success .simulation h3:before, #success .simulation h3:after { content:''; position:absolute; top:50%; display:inline-block; width:50px; height:2px; background-color:#0ABAB5; }
#success .simulation h3:before { left:0; -webkit-transform:rotate(60deg); transform:rotate(60deg); }
#success .simulation h3:after { right:0; -webkit-transform:rotate(-60deg); transform:rotate(-60deg); }
#success .simulation h3 br.sp { display:none; }
#success .simulation .simulation-cost { text-align:left; }
.simulation-cost dl { font-size:min(3vw,15px); display:flex; justify-content:space-between; align-items:center; background-color:#edf7f6; padding:10px; border-radius:10px; }
.simulation-cost dt { font-weight:600; padding-left:10px; }
.simulation-cost dd { margin:2px 0; }
.simulation-cost dd p { font-size:min(2.8vw,14px); display:flex; justify-content:space-between; padding:1px; }
.simulation-cost dd p.total { justify-content:flex-end; font-weight:600; }
.simulation-cost dd p span span { font-size:80%; }
.simulation-cost dd p span+span { padding-left:20px; }
.simulation-cost table { font-size:min(3vw,15px); background-color:#fcf4ea; width:100%; border-radius:10px; }
.simulation-cost th { text-align:center; padding:10px 5px; border-bottom:3px solid #fff; }
.simulation-cost td { padding:5px 10px; }
.simulation-cost td:nth-child(2) { text-align:right; }
.simulation-cost tr:last-child td { border-top:2px solid #fff; padding:15px 10px; }
@media screen and (max-width:600px){
#success .simulation h3 br.sp { display:block; }
.simulation-cost dl { display:block; }
.simulation-cost dt { text-align:center; }
.simulation-cost th, .simulation-cost td { display:block; }
.simulation-cost tr:last-child td:nth-child(2) { border-top:none; padding-top:0; }
}

#success .swiper-slide img {
    align-self: center; /* 上下の中央揃え */
    max-width: 75%;
    width: auto;
  }
@media screen and (max-width:500px){
#success .swiper-slide img {
    max-width:95%;
  }
}

#form { font-size:16px; padding:20px; margin:50px 0; }
table.form { margin:20px 0; width:100%; background-color:#efefef; border-radius:10px; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; }
.form th { padding:20px 40px 20px 20px; white-space:nowrap; text-align:left; position:relative; }
.form th span { font-size:12px; color:#d55280; position:absolute; right:0; }
.form td { padding:20px; position:relative; vertical-align:middle; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; }
@media screen and (max-width:650px){
.form th { display:block; width:100%; padding:20px 10px 0 10px; }
.form td { display:block; width:100%; padding:10px 10px 20px 10px; }
}

.form .textbox { padding:10px; border:1px solid #ccc; border-radius:8px; font-size:16px; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;}
.form .w-l { width:100%; }
.form .w-s { width:150px; }
.form input[type="checkbox"] { position:relative; width:18px; height:18px; border:1px solid #ccc; vertical-align:-5px; -webkit-appearance:none; -moz-appearance:none; appearance:none; }
.form input[type="checkbox"]:checked:before { position:absolute; top:2px; left:4px; transform:rotate(50deg); width:6px; height:10px; border-right:2px solid #d55280; border-bottom:2px solid #d55280; content:''; }
.mwform-checkbox-field.horizontal-item { display:inline-block; margin:5px 15px 0 0; }
.mwform-checkbox-field.horizontal-item:nth-of-type(1) { margin-left:10px;}
span.error { font-size:1.2rem; color:darkred; position:absolute; botom:0; left:20px; }
::placeholder{ color:#ddd; }
.form-btn { text-align:center; pacccing:30px 0; }
.backbtn { width:150px; padding:20px 0; background-color:#ccc; border-radius:10px; margin:8px; font-size:15px; }
.submitbtn { width:200px; padding:20px 0; background-color:#d55280; border:none; color:#fff; border-radius:10px; margin:8px; font-size:16px; }

.contents { padding:80px 0; }
h3.ttl-lv2 { text-align:center; font-size:24px; color:#0ABAB5; }
.block-s p { line-height:2.8; font-size:17px; }