@charset "UTF-8";

/*
Theme Name: agekke
Description: 
Author: エイジェック広報部
License: Copyright AGEKKE GROUP All Rights Reserved.
*/

/*============================
共通要素
============================*/


.cont_ttl {
    text-align: center;
}

.cont_ttl h2 {
    font-size: 9.8rem;
    color: #056CF9;
    font-style: italic;
    font-family: "arial", sans-serif;
    line-height: 1.2;
    letter-spacing: 0.5rem;
}

.cont_ttl p {
    font-size: 3.9rem;
    font-weight: 700;
}

.bl_txt {
    color: #056CF9;
}

@media screen and (max-width: 780px) {
    .cont_ttl h2 {
        font-size: 4rem;
    }

    .cont_ttl p {
        font-size: 1.5rem;
    }
}

.mv {
    padding: 100px 0 100px;
    background: url(./img/mv.webp) center / cover no-repeat;
}

.mv .wrap {
    max-width: 80%;
}

.mv_catch {
    font-size: 4rem;
    font-weight: 700;
    color: #056CF9;
    background: #fff;
    transform: skew(-25deg);
    display: inline-block;
    padding: 10px 2% 0;
    margin: 0 0 25px;
}

.mv_catch span {
    transform: skew(25deg);
    display: flex;
    align-items: center;
}

.mv_catch small {
    font-size: 3rem;
}

.mv h1 {
    color: #fff;
    font-size: 9rem;
    text-shadow: 0px 4px 8px #111;
}

.mv h1 small {
    font-size: 8rem;
}

.mv p {
    color: #fff;
    text-shadow: 0px 4px 8px #111;
    font-size: 2rem;
    line-height: 2;
    width: 45%;
}

@media screen and (max-width: 1280px) {
    .mv .wrap {
        max-width: 85%;
    }
}

@media screen and (max-width: 780px) {

    .mv {
        padding: 40px 0 300px;
        background: url(./img/mv_mov.webp) center / cover no-repeat;
    }

    .mv .wrap {
        max-width: 80%;
    }

    .mv_catch {
        font-size: 1.8rem;
        padding: 5px 3% 0;
        margin: 0 0 15px;
    }

    .mv_catch small {
        font-size: 1.2rem;
    }

    .mv h1 {
        font-size: 4.2rem;
        text-shadow: 0px 3px 6px #111;
    }

    .mv h1 small {
        font-size: 3rem;
    }

    .mv p {
        font-size: 1.1rem;
        width: 100%;
        text-shadow: 0px 3px 6px #111;
        line-height: 1.7;
    }
}

/* intro */

.intro {
    padding: 120px 0;
    position: relative;
    z-index: 0;
}

.intro::before {
    content: "";
    position: absolute;
    bottom: -35%;
    left: -10%;
    width: 40%;
    height: 115%;
    z-index: -1;
    background: url(./img/intro_bg_l.png) center / contain no-repeat;
}

.intro::after {
    content: "";
    position: absolute;
    top: -10%;
    right: -26%;
    width: 69%;
    height: 90%;
    z-index: -1;
    background: url(./img/intro_bg_r.png) center / contain no-repeat;
}

.intro_txt {
    width: 50%;
}

.intro_txt span {
    font-size: 2rem;
    font-weight: 700;
    padding: 0 0 8px;
    display: inline-block;
    border-bottom: solid 4px #056CF9;
}

.intro_txt span.blue{
    color: #fff;
    border-bottom: none;
    background-color: #056CF9;
	padding:0;
    padding: 4px 5px 0;
    margin: 0 5px;
}

.intro_txt h2 {
    font-size: 5.9rem;
    color: #056CF9;
    margin: 25px 0 30px;
}

.intro_txt h2 small {
    font-size: 4.5rem;
}

.intro_txt p {
    font-size: 2rem;
    line-height: 1.7;
}

.intro_img {
    width: 40%;
}

.intro_img img{
    /* PCの右クリック禁止 */
    pointer-events: none;
}

.intro .senkou{
	background: url(./img/bg_senkou.webp) center / cover no-repeat;
	border-radius: 30px;
    padding: 3% 6% 6%;
    margin-top: 60px;
}

.intro .senkou .senkou_title{
    color: #fff;
    font-size: 4rem;
    font-weight: bold;
}

.intro .senkou .senkou_title span.number{
    font-size: 5rem;
}

.intro .senkou ul li{
	display:inline-block;
	vertical-align:top;
    width: 26%;
    margin-right: 10%;
    text-align: center;
}

.intro .senkou ul li:last-child{
    margin-right:0%;
}

.intro .senkou ul li p{
	color:#fff;
	font-weight:bold;
	font-size: 2.5rem;
    line-height: 30px;
    margin-top: 15px;
}

.intro .senkou ul li p span.mini{
	display:block;
    font-size: 1.8rem;
}

@media screen and (max-width: 780px) {
    .intro {
        padding: 60px 0;
    }

    .intro_txt {
        width: 100%;
    }

    .intro_img {
        width: 100%;
        margin: 30px 0 0;
    }

    .intro_txt span {
        font-size: 1.6rem;
    }

    .intro_txt h2 {
        font-size: 3.2rem;
        margin: 20px 0 20px;
    }

    .intro_txt h2 small {
        font-size: 2.3rem;
    }

    .intro_txt p {
        font-size: 1.6rem;
    }
	
	.intro .senkou {
        padding: 3% 6% 3%;
	}
	.intro .senkou .senkou_title {
        font-size: 2rem;
	}
	.intro .senkou .senkou_title span.number {
        font-size: 4rem;
    } 
	.intro .senkou ul{
		text-align:center;
	}
	.intro .senkou ul li {
        width: 45%;
        margin-right: 6%;
	    margin-bottom: 25px;
	}
	.intro .senkou ul li:nth-child(2){
		margin-right: 0%;
	}
	.intro .senkou ul li p span.mini {
       font-size: 1.4rem;
    }
	.intro .senkou ul li p {
        font-size: 1.8rem;
        line-height: 22px;
	    margin-top: 5px;
	}
}

/* about */

.about {
    padding: 100px 0;
    background: url(./img/about_bg.jpg) center / cover no-repeat;
}

.about_txt {
    width: 70%;
}

.about_txt h2 {
    color: #fff;
    display: inline-block;
    font-size: 3.5rem;
    background: #000;
	background: linear-gradient(45deg, #B67B03 0%, #DAAF08 45%, #FEE9A0 70%, #DAAF08 85%, #B67B03 90% 100%);
    padding: 10px 5% 5px;
    margin: 0 0 50px;
    transform: skew(-25deg);
}

.about_txt h2 span {
    transform: skew(25deg);
    display: block;
}
.about_txt h2 span span.mini{
    transform: none;
    display: inline-block;
    font-size: 2.8rem;	
}

.about_txt p {
    color: #fff;
    font-size: 2.5rem;
}

.about_txt p strong {
    color: #ffd966;
}

.about_img {
    width: 25%;
}

.about_img img {
    pointer-events: none;
}

@media screen and (max-width: 780px) {
    .about {
        padding: 80px 0;
    }

    .about_txt {
        width: 100%;
    }

    .about_img {
        width: 60%;
        margin: 30px auto 0;
    }

    .about_txt h2 {
        font-size: 2.2rem;
        padding: 10px 4% 5px;
        margin: 0 auto 40px;
	    margin-left: 13px;
    }

    .about_txt p {
        font-size: 1.8rem;
    }
	
	.about_txt h2 span span.mini{
        font-size: 2rem;	
    }
}

/* feature */

.feature {
    padding: 130px 0 150px;
    background: #F0F0F0;
    position: relative;
    z-index: 0;
}

.feature::before {
    position: absolute;
    content: "";
    top: 5%;
    left: -15%;
    width: 600px;
    height: 600px;
    background: url(./img/kidz-text.svg) center / contain no-repeat;
    animation: txtcircle 30s linear infinite;
    z-index: -1;
}

.feature::after {
    position: absolute;
    content: "";
    bottom: 5%;
    right: -15%;
    width: 600px;
    height: 600px;
    background: url(./img/kidz-text.svg) center / contain no-repeat;
    animation: txtcircle 30s linear infinite;
    z-index: -1;
}


@keyframes txtcircle {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


.feature_box {
    max-width: 80%;
    margin: 180px 0 0 auto;
    background: #fff;
    padding: 90px 3% 100px;
    position: relative;
    z-index: 0;
}

.feature_box::before {
    content: "";
    position: absolute;
    bottom: 0;
    right: -30%;
    width: 100%;
    height: 75%;
    z-index: -1;
    transform: scale(-1, 1);
    background: url(./img/feature_box_bg.png) center / contain no-repeat;
}

.feature_txt {
    width: 45%;
}

.feature_number {
    position: absolute;
    top: -7%;
    left: 7%;
    font-size: 2rem;
    font-weight: 700;
    color: #3C4754;
}

.feature_number strong {
    color: #056CF9;
    font-weight: 500;
    font-size: 8rem;
    padding: 0 0 0 10px;
    font-family: "all-round-gothic", sans-serif;
}

.feature_number span {
    position: relative;
}

.feature_number span::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: -70%;
    width: 37px;
    height: 60px;
    background: url(./img/feature_line.png) center / contain no-repeat;
}

.feature_txt h3 {
    font-size: 3.5rem;
    margin: 0 0 30px;
}

.feature_txt p {
    font-size: 1.7rem;
    line-height: 35px;
}

.feature_img {
    width: 50%;
    position: absolute;
    top: -10%;
    right: 0;
}

.feature_img img{
    /* PCの右クリック禁止 */
    pointer-events: none;
}

.feature .feature_box:nth-of-type(3) {
    margin: 180px auto 0 0;
    flex-direction: row-reverse;
    padding: 140px 3% 100px;
}


.feature .feature_box:nth-of-type(3) .feature_img {
    left: 0;
}

.feature .feature_box:nth-of-type(3) .feature_number {
    left: 58%;
    color: #056CF9;
}

.feature .feature_box:nth-of-type(3)::before {
    transform: scale(1);
    left: -32%;
    right: auto;
}

@media screen and (max-width: 1700px) {
    .feature_box {
        max-width: 85%;
    }

    .feature_txt h3 {
        font-size: 3.5rem;
        margin: 0 0 20px;
    }

    .feature_txt p {
        font-size: 1.6rem;
    }
}

@media screen and (max-width: 1280px) {
    .feature_box {
        max-width: 93%;
    }
}

@media screen and (max-width: 780px) {
    .feature {
        padding: 90px 0 100px;
    }

    .feature_number {
        font-size: 1.2rem;
        top: -4%;
    }

    .feature .feature_box:nth-of-type(3) .feature_number {
        left: 67%;
    }

    .feature_number strong {
        font-size: 6rem;
        padding: 0 0 0 5px;
    }

    .feature_number span::before {
        left: -50%;
        width: 27px;
        height: 30px;
    }


    .feature_txt {
        width: 100%;
    }

    .feature_img {
        width: 100%;
        margin: 30px 0 0;
        position: relative;
        top: 0;
        right: -5%;
    }

    .feature .feature_box:nth-of-type(3) .feature_img {
        left: -5%;
        right: auto;
    }

    .feature_box {
        margin: 80px 0 0 auto;
        padding: 60px 3% 40px;
    }

    .feature_box::before {
        width: 300px;
        height: 230px;
    }

    .feature .feature_box:nth-of-type(3) {
        margin: 60px auto 0 0;
        padding: 60px 3% 40px;
    }

    .feature_txt h3 {
        font-size: 2.2rem;
    }

    .feature_txt p {
        font-size: 1.4rem;
        line-height: 30px;
    }

    .feature::before {
        top: -3%;
        width: 300px;
        height: 300px;
    }

    .feature::after {
        bottom: -3%;
        width: 300px;
        height: 300px;
    }
}

/* cta */

.cta {
    padding: 40px 0 60px;
    background: url(./img/bg_cta.jpg) center / cover no-repeat;
    text-align: center;
}

.cta h2 {
    font-size: 7rem;
    color: #fff;
    margin: 0 0 15px;
}

.cta p {
    color: #fff;
    line-height: 2;
}

.cta a {
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    background: #ff8116;
    border: solid 2px #ff8116;
    padding: 35px 0;
    border-radius: 45px;
    display: block;
    max-width: 585px;
    margin: 30px auto 0;
}

.cta a:hover {
    background: #ffffff;
    opacity: 1;
    color: #ff8116;
    border: solid 2px #ff8116;
}

@media screen and (max-width: 780px) {
    .cta h2 {
        font-size: 4.2rem;
        margin: 0 0 20px;
    }

    .cta a {
        font-size: 1.6rem;
        padding: 25px 0;
    }
}

/* program */

.program {
    padding: 170px 0 150px;
    position: relative;
    z-index: 0;
}

.program::before {
    content: "";
    position: absolute;
    top: -20%;
    right: -35%;
    width: 70%;
    height: 70%;
    z-index: -1;
    background: url(./img/program_bg_r.png) center / contain no-repeat;
}

.program::after {
    content: "";
    position: absolute;
    bottom: 0%;
    left: -36%;
    width: 70%;
    height: 70%;
    z-index: -1;
    background: url(./img/program_bg_l.png) center / contain no-repeat;
}

.program_txt {
    font-size: 2.4rem;
    font-weight: 700;
    text-align: center;
    line-height: 2;
    margin: 70px 0 120px;
}

.program_step h3 {
    font-size: 3rem;
    border-bottom: solid 2px #000;
    max-width: 85%;
    padding: 0 0 7px;
    margin: 0 auto 40px;
}

.program_step h3 span {
    font-size: 2.4rem;
    padding: 10px 3%;
    margin: 0 3% 0 0;
    color: #fff;
    background: #000;
}

.program_step ul li {
    width: 18%;
    text-align: center;
    display: flex;
    flex-direction: column;
}

.program_step ul li img{
    /* PCの右クリック禁止 */
    pointer-events: none;
}

.program_step h4 {
    font-size: 1.4rem;
    margin: 10px 0 30px;
}

.program_detail {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.program_detail h5 {
    font-size: 2rem;
    padding: 5px 0;
    color: #fff;
    background: #056CF9;
}

.program_detail p {
    color: #056CF9;
    font-weight: 700;
    font-size: 1.7rem;
    padding: 15px 0 20px;
    line-height: 1.4;
    background: #F8FBFF;
    flex-grow: 1;
    align-content: center;
}

.program_arrow {
    max-width: 50px;
    display: block;
    margin: 50px auto 70px;
}

.program_sheet {
    background: #056CF9;
    padding: 60px 7% 70px;
    margin: 120px 0 0;
}

.program_sheet h3 {
    color: #fff;
    font-size: 3.9rem;
    text-align: center;
    margin: 0 0 30px;
}

.program_sheet table {
    border: solid 3px #000;
}

.program_sheet table th,
.program_sheet table td {
    font-size: 2.3rem;
    font-weight: 400;
    text-align: center;
    /* padding: 0 1%; */
    padding: 5px 0;
    background: #fff;
    border: solid 1px #000;
    line-height: 1.7;
}

.program_sheet table tr:nth-child(odd) th,
.program_sheet table tr:nth-child(odd) td {
    /*background: #eee;*/
}

.program_sheet table th.main {
    background-color: #000;
    color: #fff;
}

.program_sheet table th.sub {
    background-color: #e0edff;
    color: #000000;
}

.program_sheet table td {
    width: 13%;
}

@media screen and (max-width: 780px) {
    .program {
        padding: 90px 0 80px;
    }

    .program_txt {
        font-size: 1.6rem;
        margin: 60px 0 90px;
    }

    .program_step h3 {
        font-size: 2.2rem;
        max-width: 100%;
        padding: 0 0 5px;
        text-align: center;
    }

    .program_step h3 span {
        font-size: 1.8rem;
        padding: 6px 3% 3px;
        margin: 0 auto 10px;
        display: block;
        max-width: fit-content;
    }

    .program_step ul {
        justify-content: center;
    }

    .program_step ul li {
        width: 45%;
        margin: 0 2%;
    }

    .program_step h4 {
        font-size: 1.3rem;
    }

    .program_step ul li h4.sp_vision {
        margin: 10px 0 10px;
    }

    .program_step ul li img {
        display: block;
        width: 80%;
        margin: auto;
    }

    .program_arrow {
        max-width: 40px;
        margin: 30px auto 50px;
    }

    .program_detail {
        margin: 0 0 40px;
    }

    .program_detail h5 {
        font-size: 1.6rem;
    }

    .program_detail p {
        font-size: 1.4rem;
        padding: 10px 0 15px;
    }

    .program_sheet {
        margin: 40px 0 0;
        padding: 40px 3% 30px;
    }

    .program_sheet h3 {
        font-size: 2rem;
    }

    .program_sheet table {
        border: solid 2px #000;
    }

    .program_sheet table th,
    .program_sheet table td {
        font-size: 1rem;
        padding: 0;
        border: solid 1px #eee;
    }

    .program_sheet table td {
        width: 14%;
    }
}

/* science */

.science {
    padding: 220px 0 150px;
    background: url(./img/science_bg.webp) top / cover no-repeat;
    position: relative;
    z-index: 0;
}

.science::before {
    content: "";
    position: absolute;
    bottom: -130px;
    left: 0;
    width: 540px;
    height: 1200px;
    z-index: -1;
    background: url(./img/science_bg_l.png) center / contain no-repeat;
}

.science::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 540px;
    height: 1200px;
    z-index: -1;
    background: url(./img/science_bg_r.png) center / contain no-repeat;
}

.science .cont_ttl {
    text-align: left;
}

.science .cont_ttl h2,
.science .cont_ttl p {
    color: #fff;
}

.science_txt {
    font-size: 2rem;
    color: #fff;
    line-height: 2;
    margin: 120px 0;
    max-width: 70%;
}

.science_box {
    padding: 60px 7% 70px;
    background: #fff;
    position: relative;
    margin: 0 0 110px;
}

.science_box:last-child {
    margin-bottom: 0
}

.science_summary {
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
    width: 17%;
    min-width: 200px;
}

.science_summary p {
    color: #fff;
    background: #000;
    padding: 20px 10px;
    line-height: 1.6;
    font-weight: 700;
}

.science_summary div {
    font-size: 2rem;
    color: #fff;
    background: #FF4D94;
    padding: 20px 10px;
    line-height: 1.6;
    font-weight: 700;
}

.science_box:nth-of-type(3) .science_summary div {
    background: #4DBEFF;
}

.science_box:nth-of-type(4) .science_summary div {
    background: #7FC029;
}

.science_box:nth-of-type(5) .science_summary div {
    background: #013883;
}

.science_box:nth-of-type(6) .science_summary div {
    background: #FFB32E;
}

.science_head {
    text-align: center;
}

.science_head h3 {
    font-size: 9.8rem;
    color: #056CF9;
    font-style: italic;
    font-family: "arial", sans-serif;
    line-height: 1.2;
    letter-spacing: 0.5rem;
}

.science_head p {
    font-size: 3.9rem;
    font-weight: 700;
    color: #056CF9;
}

.science_movie {
    display: block;
	width: 85%;
    margin: 30px auto;
}

.science_body img{
    /* PCの右クリック禁止 */
    pointer-events: none;
}

.more_btn {
    display: block;
    max-width: 370px;
    margin: 10px auto 60px;
    text-align: center;
    font-size: 2rem;
    font-weight: 500;
    color: #056CF9;
    border: solid 3px #056CF9;
    padding: 8px 0;
    position: relative;
    cursor: pointer;
}

.more_btn::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    right: 5%;
    width: 14px;
    height: 3px;
    background: #056CF9;
}

.more_btn::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    right: calc(5% + 5.5px);
    width: 3px;
    height: 14px;
    background: #056CF9;
    transition: transform 0.3s ease;
}

.more_btn.active::after {
    transform: rotate(90deg);
}

.more_detail {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height .5s ease, opacity .4s ease;
}

.more_detail.show {
    max-height: 2000px;
    opacity: 1;
}

.science_body h4 {
    text-align: center;
    font-size: 3.9rem;
    margin: 0 0 20px;
}

.science_body p {
    text-align: center;
    font-size: 1.8rem;
    margin-bottom: 35px;
}

.science_footer {
    text-align: center;
    margin-top: 30px;
}

.science_footer h4 {
    font-size: 3.8rem;
    color: #056CF9;
    margin: 0 0 15px;
}

.science_footer h4 small {
    font-size: 3rem;
    display: block;
}

.science_footer h5 {
    font-size: 3.8rem;
    margin: 0 0 15px;
}

.science_footer p {
    font-size: 1.9rem;
}

.science_img img {
    width: 46%;
    object-fit: contain;
}

@media screen and (max-width: 780px) {
    .science h2 {
        font-size: 5rem;
        margin-top: -100px;
    }

    .science::before {
        width: 110px;
        height: 560px;
    }

    .science::after {
        width: 110px;
        height: 245px;
        right: 0;
    }

    .science_txt {
        font-size: 1.6rem;
        margin: 60px 0;
        max-width: 100%;
    }

    .science_summary p {
        font-size: 1.2rem;
        padding: 10px;
    }

    .science_summary div {
        font-size: 1.2rem;
        padding: 10px;
    }

    .science_summary {
        min-width: 120px;
    }

    .science_head h3 {
        font-size: 4rem;
    }

    .science_head p {
        font-size: 2rem;
    }

    .science_box {
        padding: 100px 3% 40px;
        margin: 0 0 50px;
    }

    .more_btn {
        margin: 10px auto 40px;
        font-size: 2rem;
        padding: 10px 0;
    }

    .science_body h4 {
        font-size: 2.2rem;
    }

    .science_footer h5 {
        font-size: 2.2rem;
    }

    .science_body p {
        font-size: 1.4rem;
        margin: 0 0 30px;
    }

    .science_footer p {
        font-size: 1.4rem;
    }

    .science_footer h4 {
        font-size: 2rem;
    }

    .science_footer h4 small {
        font-size: 1.6rem;
    }
}