@charset "UTF-8";

/*---------------------------------------------------------
背景
---------------------------------------------------------*/
.bg-elementary{background:#fb5c65;}
.bg-junior-high{background:#3498da;}
.bg-high{background:#01A56F;}
.bg-l-elementary{background:rgba(251,92,101,0.1);}
.bg-white{background:#fff;}
.bg-yellow{background:#ffffa6;}
.bg-l-yellow{background:#FFFDE9;}
.bg-l-blue{background: #CCE3EF;}
.bg-l-green{background: #CCE3D9;}
.bg-l-wam-green{background: #F2FCE6;}
.bg-wam-green{background: #007440;}
.bg-d-red{background: #9D2A31;}
.bg-red{background: #da1c24;}
.bg-l-gray{background: #F5F5F5;}
.bg-navy{background: #07235A;}

.bg-lattice-wamgreen{
width:100%;
background-size: 16px 16px;
background-position: 50% 50%;
background-image: repeating-linear-gradient( 90deg, rgba(0,116,64,0.1) , rgba(0,116,64,0.1) 1px, transparent 1px, transparent 16px),repeating-linear-gradient( 0deg, rgba(0,116,64,0.1) , rgba(0,116,64,0.1) 1px, #fff 1px, #fff 16px);
}
.bg-lattice-gray{
width:100%;
background-size: 16px 16px;
background-position: 50% 50%;
background-image: repeating-linear-gradient( 90deg, rgba(0,0,0,0.1) , rgba(0,0,0,0.1) 1px, transparent 1px, transparent 16px),repeating-linear-gradient( 0deg, rgba(0,0,0,0.1) , rgba(0,0,0,0.1) 1px, #fff 1px, #fff 16px);
}
.bg-lattice-blue{
width:100%;
background-size: 16px 16px;
background-position: 50% 50%;
background-image: repeating-linear-gradient( 90deg, rgba(0,134,191,0.1) , rgba(0,134,191,0.1) 1px, transparent 1px, transparent 16px),repeating-linear-gradient( 0deg, rgba(0,134,191,0.1) , rgba(0,134,191,0.1) 1px, #fff 1px, #fff 16px);
}
.bg-lattice-pink{
width:100%;
background-size: 16px 16px;
background-position: 50% 50%;
background-image: repeating-linear-gradient( 90deg, rgba(251,92,101,0.1) , rgba(251,92,101,0.1) 1px, transparent 1px, transparent 16px),repeating-linear-gradient( 0deg, rgba(251,92,101,0.1) , rgba(251,92,101,0.1) 1px, #fff 1px, #fff 16px);
}
.w-shadow-box{
    background: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    border-radius: 10px;
    padding: 3vh 2vw;
}
.photo {
    padding: 8px;
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-bottom: 1px solid #c2c2c2;
    border-right: 1px solid #c2c2c2;
    background: #fff;
    width: 94%;
}
.line-bg-high{
    background: linear-gradient(transparent 20%, #c2ead8 70%);
}

/*---------------------------------------------------------
余白
---------------------------------------------------------*/
.m-1{margin:1vh 1vw;} .m-2{margin:2vh 2vw;} .m-3{margin:3vh 3vw;} .m-4{margin:4vh 4vw;} .m-5{margin:5vh 5vw;} 
.mt-1{margin-top:1vh;} .mt-2{margin-top:2vh;} .mt-3{margin-top:3vh;} .mt-4{margin-top:4vh;} .mt-5{margin-top:5vh;}
.mb-1{margin-bottom:1vh;} .mb-2{margin-bottom:2vh;} .mb-3{margin-bottom:3vh;} .mb-4{margin-bottom:4vh;} .mb-5{margin-bottom:5vh;} 
.ml-1{margin-left:1vw;} .ml-2{margin-left:2vw;}.ml-3{margin-left:3vw;}.ml-4{margin-left:4vw;}.ml-5{margin-left:5vw;}
.mr-1{margin-right:1vw;} .mr-2{margin-right:2vw;} .mr-3{margin-right:3vw;}.mr-4{margin-right:4vw;}.mr-5{margin-right:5vw;}

.p-1{padding:1vh 1vw;} .p-2{padding:2vh 2vw;} .p-3{padding:3vh 3vw;} .p-4{padding:4vh 4vw;} .p-5{padding:5vh 5vw;}
.pt-1{padding-top:1vh} .pt-2{padding-top:2vh;} .pt-3{padding-top:3vh;} .pt-4{padding-top:4vh;} .pt-5{padding-top:5vh;} 
.pb-1{padding-bottom:1vh;} .pb-2{padding-bottom:2vh;} .pb-3{padding-bottom:3vh;} .pb-4{padding-bottom:4vh;} .pb-5{padding-bottom:5vh;} 
.pl-1{padding-left:1vw;} .pl-2{padding-left:2vw;} .pl-3{padding-left:3vw;} .pl-4{padding-left:4vw;} .pl-5{padding-left:5vw;} 
.pr-1{padding-right:1vw;} .pr-2{padding-right:2vw;}  .pr-3{padding-right:3vw;}  .pr-4{padding-right:4vw;}  .pr-5{padding-right:5vw;} 
.f-box-p{padding:0 2%}

.section-pt{padding-top:6vh;}
.section-pb{padding-bottom:6vh;}
.breadcrumbs-font{font-size: 12px;}
.breadcrumbs-font a{
    text-decoration: underline;
    color: #007440;}

@media screen and (max-width: 640px) {
/* 640pxまでの幅の場合に適応される */
.sp-mt-0{margin-top:0;}
}


/*---------------------------------------------------------
header
---------------------------------------------------------*/
.header{
 /*background: rgba(0,116,64,1); */
	width:100%;
	margin:0 auto;
	padding:0;
    position: relative;
}
.head-area{
	width:100%;
	max-width:1200px;
	margin:0 auto;
	padding:0;
}
.header-container{
	display: flex;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
        position: relative;
}
.header-ttl-name{
    font-size: 4rem;
    color: #fff;
    margin-left: 1rem;
    font-weight: 700;
}

.logo{
 background: rgba(0,116,64,1); 
 width:90%; 
 max-width:250px !important; 
padding: 1rem;
 display: inline-block; 
}
.head-btn-area{
    position: absolute;
    right: 20%;
}
.header-tel{
    margin: 0 2vw;
    width: 100%;
    max-width: 300px;
}
.head-btn-areaBox{
display: flex;
    position: absolute;
    right: 0;
}
.header-btn-siryo,.header-btn-tel{
    color: #fff;
    text-align: center;
    padding: 0.5em 1em;
    text-decoration: none;
    font-weight: 700;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 300px;
    max-width: 400px;
    border-radius: 4px;
        line-height: 1.1;
        display: flex;
        align-items: center;
        height: 60px;
    position: relative;
    font-size: clamp(2rem, 4vw, 2.25rem);
}
.header-btn-siryo{
    background: linear-gradient(0deg, #e00303 0%, #ff0000 100%);
    border:2px solid #ff0000;
    padding: 1em 0em;
}
.header-btn-siryo:hover{
background: #fff;
    color: #ff0000;
}
.header-btn-tel{
    background: linear-gradient(0deg, #079945 0%, #27ae60 100%);
    border:2px solid #27ae60;
}
.header-btn-tel:hover{
background: #fff;
    color: #27ae60;
}

.highlight {
    position: absolute;
    border-radius: 100px;
    width: 100%;
    height: 30%;
    top: 0px;
    left: 0;
    background: linear-gradient(to bottom, rgba(250, 250, 255, 0.9) 10%, rgba(250, 250, 255, 0.3) 100%);
}
.header-btn-shiryo{
    position: relative;
}
.header-btn-shiryo img{
position: absolute;
    left: 5px;
    bottom: 1px;
    max-height: 75px;
}
@media screen and (max-width: 912px) {
/* 912pxまでの幅の場合に適応される */
.head-btn-area {
    right: 10px;
}
.header-tel {
    max-width: 220px;
}
.header-btn-shiryo img {
    left: -10px;
    bottom: 1px;
    max-height: 60px;
}
.header-btn-siryo{
width: 160px;
}
}

@media screen and (max-width: 640px) {
/* 640pxまでの幅の場合に適応される */
.logo{
 max-width:150px !important; 
padding: 1rem 1rem;
}
.header-ttl-name{
    font-size: 2rem;
}
.header-btn-siryo,.header-btn-tel{
        font-size: 1.2rem;
        height: 45px;
        margin: 0 5px;
        max-width: 100px;
        padding: 1em 0em;
}
.header-btn-siryo{
        font-size: 1.5rem;
    line-height: 1;
}
.header-btn-tel{
}
.header-btn-shiryo img {
    left: 8px;
    bottom: 1px;
    max-height: 40px;
}
}
@media screen and (max-width: 360px) {
/* 360pxまでの幅の場合に適応される */
} 

/*---------------------------------------------------------
キャンペーン情報
---------------------------------------------------------*/
.hp-campaignArea{
    background: #F9F9F3;
    padding: 6vh 0;
}
.hp-campaign-ttl{
    margin: 0 0 3vh;
    background: transparent !important;
}
.hp-campaign-ttl span{
    color: #007440;
    font-weight: 700;
    line-height: 1.3;
    padding: 0 0 0.1vh;
    border-bottom: 3px solid #fac54c;
    font-size: clamp(1.5rem, 2.5vw, 2.5rem);
}
.hp-campaign-list{
    display: flex;
    margin: 0 auto;
    width: 90%;
    max-width: 800px;
    align-items: center;
    justify-content: center;
}
.hp-campaign-list li{
    padding: 0 1%;
}
.hp-campaign-list li img{
    width: 100%;
    max-width: 550px;
}

@media screen and (max-width: 640px) {
/* 640pxまでの幅の場合に適応される */
.hp-campaignArea{
    padding: 4vh 0;
}
.hp-campaign-list{
    flex-direction: column;
}
.hp-campaign-list li{
    padding: 1% 0;
}
}

/*---------------------------------------------------------
満足度・成績アップエリア
---------------------------------------------------------*/
#manzokudo-Area{
background: #FFFFDC;
border-top:4px solid #D6AF45;
border-bottom:4px solid #D6AF45;
padding:2vh 0;
}

.w-1200, .w-1000,.w-1400,.w-800,.w-600,.w-500{
    width:95%;
    margin:0 auto;
    padding:0;
}
.w-800{max-width:800px;}


/*---------------------------------------------------------
コラボ動画2023
---------------------------------------------------------*/
.collab-ttl-box{
    display: flex;
    align-items: center;
    justify-content: center;
}
.collab-ttl-box li{
    padding: 0;
    display: flex;
}
.collab-ttl-box li img{
    width:110px;
}
.collab-ttl{
font-size: clamp(1.5rem, 2vw, 2rem);
    line-height: 1.2;
    font-weight: 700;
}
.collab-txt-01,.collab-txt-02{
    color: #007440;
    font-weight: 700;
}
.collab-txt-01{
    font-size: clamp(2rem, 2vw, 3rem);
}
.collab-txt-02{
font-size: clamp(1.5rem, 2vw, 2rem);
}
@media screen and (max-width: 640px) {
/* 640pxまでの幅の場合に適応される */
.collab-ttl-box li img{
    width: 80px;
}
.collab-ttl-box{
    margin: 0 0 2vh;
}
}

/*---------------------------------------------------------
今入会すると1ヶ月分月謝無料 fv-second
---------------------------------------------------------*/
#fv-second{
    background: #1E9B41;
    padding: 3rem 0 2rem;
}
.fv-second-area{
    text-align: center;
}
.fv-second-area-ttl{
    background: #fff;
    padding: 1rem 1.5rem;
    margin: 0 0 1rem;
    border-radius: 8px;
}
#fv-second h2{
    color: #FF3950;
    font-size: 3.5rem;
    font-weight: 900;
    position: relative;
    display: inline-block;
}
#fv-second h2:before{
    position: absolute;
    left: -2rem;
    top: 0;
    content: "";
    width: 3px;
    height: 100%;
    background: #FF3950;
    border-radius: 3px;
    transform: rotate(-25deg);
}
#fv-second h2:after{
    position: absolute;
    content: "";
    right: -2rem;
    top: 0;
    width: 3px;
    height: 100%;
    background: #FF3950;
    border-radius: 3px;
    transform: rotate(25deg);
}
#fv-second h3{
    color: #fff;
    font-size: 2.5rem;
    font-weight: 700;
}
#fv-second h3 span{
    font-size: 3.5rem;
    font-weight: 700;
    color: #FFFF00;
}
#fv-second p{
    color: #fff;
    font-size: 1.75rem;
    font-weight: 700;
}
#fv-second p span{
font-size: 3rem;
}

@media screen and (max-width: 820px) {
/* 820pxまでの幅の場合に適応される */
#fv-second h2 {
    font-size: 3rem;
}
#fv-second h3 {
    font-size: 2rem;
}
#fv-second h3 span {
    font-size: 3rem;
}
#fv-second p span {
    font-size: 2.5rem;
}
}

@media screen and (max-width: 640px) {
/* 640pxまでの幅の場合に適応される */
#fv-second {
    padding: 1.5rem 0 0.5rem;
}
#fv-second h2 {
    font-size: 2rem;
}
#fv-second h3 {
    font-size: 1.5rem;
    margin: 1.5rem 0 0rem;
}
#fv-second h3 span {
    font-size: 2.5rem;
    display: block;
}
#fv-second p {
    font-size: 1.5rem;
     line-height: 1;
}
#fv-second p span {
    font-size: 2rem;
    display: block;
}
}


/*---------------------------------------------------------
リーズナブルな授業料と安心のシステムで始めやすい！
---------------------------------------------------------*/
#system-price{
     background:#E8FFED;
     padding:0 0 6rem;
}
.system-price-h2{
    background: #FF3950;
    padding: 1.5rem 1.5rem;
    color: #fff;
    font-size: 3rem;
    font-weight: 700;
    border-radius: 50vh;
    text-align: center;
    margin: 0 0 4rem;
}
.system-price-ttl{
    font-size: 1.75rem;
    font-weight: 700;
    margin: 3rem 0 0;
}
.system-price-area{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.system-price-box{
    width: 46%;
    background: #fff;
    padding: 1rem;
    margin:1% .5%;
    box-shadow: 8px 9px 10px -12px rgb(0 0 0 / 80%);
}
.system-price-box p{
    line-height: 1.5;
    font-size: 1.6rem;
}
.system-price-h3{
    font-size: 2.25rem;
    color: #FF3950;
    font-weight: 700;
    margin: 0 0 1rem;
}
.ic0-01:before,.ic0-02:before,.ic0-03:before,.ic0-04:before,.ic0-05:before {
  content: "";
  display: inline-block;
  width: 80px;
  height: 80px;
  vertical-align: middle;
}

.ic0-01:before {background: url(/lp/_common/kakakusokyu/img/icon-01.png) no-repeat;background-size: contain;}
.ic0-02:before {background: url(/lp/_common/kakakusokyu/img/icon-02.png) no-repeat;background-size: contain;}
.ic0-03:before {background: url(/lp/_common/kakakusokyu/img/icon-03.png) no-repeat;background-size: contain;}
.ic0-04:before {background: url(/lp/_common/kakakusokyu/img/icon-04.png) no-repeat;background-size: contain;}
.ic0-05:before {background: url(/lp/_common/kakakusokyu/img/icon-05.png) no-repeat;background-size: contain;}
.system-price-txt01{
    margin: 4rem 0 0;
    text-align: center;
    font-size: 2.25rem;
    font-weight: 700;
}
.price-col3{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.price-col3 li{
    padding: 1%;
}
.price-col3 > li{
width:30%;
}
.price-elementary,.price-junior,.price-high{
    display: flex;
    align-items: center;
    align-content: center;
    background: #fff;
    padding: 1rem;
}
.price-elementary{
    border: 2px solid #FB5C65;
}
.price-junior{
    border: 2px solid #2D98DA;
}
.price-high{
    border: 2px solid #27AE60;
}
.price-lavel-elementary,.price-lavel-junior,.price-lavel-high{
    height: 80px;
    max-width: 80px;
    line-height: 80px;
    width: 80px;
    color: #fff;
    font-weight: 700;
    text-align: center;
    margin-right: 0.5rem;
}
.price-lavel-elementary{
    background: #FB5C65;
}
.price-lavel-junior{
    background: #2D98DA;
}
.price-lavel-high{
    background: #27AE60;
}
.price-name{
    font-size: 2.75rem;
    font-weight: 700;
    color: #FF3950;
    display: block;
}
.price-name-txt{
    font-size: 1.5rem;
    white-space: nowrap;
}

@media screen and (max-width: 820px) {
/* 820pxまでの幅の場合に適応される */
}
@media screen and (min-width:641px) and ( max-width:820px) {
/*　画面サイズが768pxから820pxまではここを読み込む　*/
#system-price { padding: 4rem 0;}
.system-price-box {width: 46%;}
.system-price-h2 {
    font-size: 2.5rem;
    margin: 0 0 2rem;
}
.system-price-txt01 {
    margin: 3rem 0 0;
    font-size: 2rem;
}

.price-name {
    font-size: 2.25rem;
}
.price-name-txt {
    font-size: 1.25rem;
}
.campaignfree {
    padding: 3rem 0 0;
}

.price-col3 {
    flex-wrap: nowrap;
}
}
@media screen and (max-width: 640px) {
/* 640pxまでの幅の場合に適応される */
#system-price {padding: 1rem 0;}
.system-price-h2{
    padding: 1rem 1.5rem;
    font-size: 1.75rem;
    line-height: 1.3;
    margin: 0 0 1.5rem;
    border-radius: 8px;
}
.system-price-box{width: 100%;}
.ic0-01:before,.ic0-02:before,.ic0-03:before,.ic0-04:before,.ic0-05:before {
  width: 60px;
  height: 60px;
}
.system-price-h3 {font-size: 2rem;    margin: 0 0 0.5rem;}
.system-price-box p{
    line-height: 1.5;
    font-size: 1.4rem;
}
.price-col3{margin: 1rem 0 0;}
.price-col3 li{
    width: 100%;
}
.price-name{
    font-size: 3rem;
    line-height: 1.1;
}
.price-elementary,.price-junior,.price-high{
flex-direction: column;
}
.price-lavel-elementary, .price-lavel-junior, .price-lavel-high {
    height: auto;
    width: 100%;
    max-width: 640px;
    line-height: 30px;
    margin: 0 0 1rem;
}
.system-price-txt01 {
    margin: 2rem 0 0;
    font-size: 2rem;
}
.system-price-txt02{
    margin-top: 2rem;
}
.system-price-txt02 a{
    padding: 1.25rem 2rem;
    background: #007440;
    color: #fff;
    border-radius: 50vh;
    text-decoration: none;
}
.price-name{
display: inline;
}
}
@media screen and (max-width: 360px) {
/* 360pxまでの幅の場合に適応される */
.system-price-txt01 {
    font-size: 1.8rem;
}
}

/*---------------------------------------------------------
CTA（English）
---------------------------------------------------------*/
.footer-cta-en-area{
    background: #ffffa6;
    padding: 0 !important
}
.footer-cta-internationalschool-area{
    background: #dcf1ea;
    padding: 0 !important
}
.footer-cta-en-bg{
position: relative;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    overflow: hidden;
}
.footer-cta-en-bg:after{
    content: " ";
    background: url(../cta-english/img/cv-bg-img.png) bottom right no-repeat;
    position: absolute;
    padding: 0;
    left: 0;
    right: 50px;
    top: 0;
    bottom: 0;
    z-index: 1;
    background-size: contain !important;
}

/*--webp対応ブラウザの場合--*/
.webp .footer-cta-en-bg:after{ 
background: url(../cta-english/img/cv-bg-img.webp) bottom right no-repeat;
 }
/*--webp非対応ブラウザの場合--*/
.no-webp .footer-contact-bg:after{ 
background: url(../cta-english/img/cv-bg-img.png) bottom right no-repeat; 
}
.footer-cta-en-box{
    padding: 6vh 0;
}
.footer-cta-en-ttl{
    font-size: clamp(2.255rem, 3vw, 4rem);
    font-weight: 700;
    margin: 3.5vh 0 3vh;
}
.footer-cta-en-box-txt{
    margin: 4rem 0 0;
    font-size: clamp(1.6rem, 2.5vw, 2.2rem);
    text-align: center;
    font-weight: 700;
    color: #8d7d17;
}

.contact-tel-box-line{
z-index: 2;
}
.contact-tel-box{
    border: 2px solid #000;
    background: #fff;
    padding: 1.5vh 1.5vw;
}
.contact-tel-box > h3{
font-size: clamp(1.5rem, 3vw, 2rem);
    line-height: 1.2;
    text-align: center;
    font-weight: 700;
    margin: 0 0 2vh;
}
.footer-cta-en-box-tel-area{
margin: 2vh 0 0;
    border-top: 1px solid #ccc;
}
.link-footer-siryo,.link-footer-line{
    position: relative;
    padding: 1vh 2.5vw 1vh 1.5vw;
    color: #fff;
    border-radius: 12px;
    font-size: clamp(1.4rem, 2.5vw, 2rem);
    line-height: 1.2;
    width: 80%;
    max-width: 300px;
    font-weight: 700;
    display: inline-block;
    text-align: center;
    box-shadow: 1px 1px 0px 0px rgba(0, 0, 0, 1);
    margin: 1vh 0;
    text-decoration: none;
}   

.link-footer-siryo{
    background: linear-gradient(#e61d2d, #ac0f1a);
    border: 1px solid #e61d2d;
}
.link-footer-line{
    background: linear-gradient(#00b200, #009500);
    border: 1px solid #00b200;
}
.link-footer-siryo::after,.link-footer-line::after {
    font-family: "Font Awesome 5 Free";
    content: "\f054";
    position: absolute;
    right: 5px;
    color: #fff;
    bottom: 0;
    font-weight: 900;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}
.link-footer-siryo:hover,.link-footer-line:hover{
    text-decoration: none;
    background:#fff;
}
.link-footer-siryo:hover{
    color: #e61d2d;
}
.link-footer-line:hover{
    color: #00b200;
}
.freedial-logo-body {
    margin: 0 0 1vh;
    max-height: 40px;
    width: 100%;
}
.head-freedial {
    display: flex;
    justify-content: center;
}
.head-freedial > li {
    display: flex;
    flex-direction: column;
}
.f-end {
    justify-content: flex-end !important;
}
.footer-tel-btn-txt {
    color: #007240;
    display: block;
    font-size: clamp(1.2rem, 1.5vw, 1.4rem);
}
.tel-number-body, .tel-number-body a {
    line-height: 1 !important;
}
@media (min-width: 751px)
a[href*="tel:"] {
    pointer-events: none;
    cursor: default;
    text-decoration: none;
    font-weight: 600;
}
.tel-number-body a {
    font-size: clamp(3rem, 3.2vw, 3.5rem);
    text-decoration: none;
    color: #000;
    font-weight: 700;
    letter-spacing: .15rem;
}

@media screen and (max-width: 1024px) {
/* 1024pxまでの幅の場合に適応される */
}
@media screen and (max-width: 912px) {
/* 912pxまでの幅の場合に適応される */
}
@media screen and (max-width: 820px) {
/* 820pxまでの幅の場合に適応される */
}
@media screen and (min-width:641px) and ( max-width:820px) {
/*　画面サイズが768pxから820pxまではここを読み込む　*/
}
@media screen and (max-width: 640px) {
/* 640pxまでの幅の場合に適応される */
.footer-cta-en-bg:after{
    right: -70px;
    top: 60px;
}
.footer-cta-en-box {
    padding: 0 2vw;
}
.footer-cta-en-box h2 {
    top: -10px;
}
.footer-cta-en-txt {
    margin: 5vh 0 0;
}
.link-footer-siryo, .link-footer-line{
    width: 60%;
}
.contact-tel-box > h3 {
    margin: 0;
}
}
@media screen and (max-width: 360px) {
/* 360pxまでの幅の場合に適応される */
} 

/*---------------------------------------------------------
講師紹介
---------------------------------------------------------*/
/* モーダルウィンドウエリア */
/* 開くボタン */
.button-open {
    display: block;
    margin: 0 auto;
    width: 100%;
    max-width: 180px;
    padding: 1em;
    background-color: #fff;
    color: #666666;
    border-radius: 8px;
    cursor: pointer;
    border: 2px solid #666666;
}
.button-open:after{
font-family: "Font Awesome 5 free";
  content: "\f30b"; /* 空の要素作成 */
  margin-left:.5rem;
  color:#666;
    font-weight: 700;
}
/* モーダルウィンドウ */
.modal-window {
  display: none;
      position: fixed;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    height: 50vh;
    max-width: 600px;
    max-height: 600px;
    background-color: #fff;
    border-radius: 5px;
    z-index: 11;
    padding: 2rem 1.5rem 8rem;
    border: 2px solid #13A075;
    overflow: scroll !important;
}
/* 閉じるボタン */
.button-close {
 /* position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, -50%);*/
    width: 150px;
    padding: 1rem;
    background-color: #fff;
    color: #666;
    border: 1px solid #666;
    border-radius: 4px;
    cursor: pointer;
}
/* オーバーレイ */
.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  z-index: 10;
}

.no_scroll {
  overflow: hidden;
}

/* 講師紹介 */
.teachers-boxArea{
margin: 2rem 0 1rem;
display: flex;
flex-wrap: wrap;
}
.teachers-boxArea li{
    width: 31%;
    padding: 1%;
}
.teachers-boxArea li img{
width: 100%;
    max-width: 180px;
}

.teachers-name-ex{
    font-family: 'Noto Serif JP',serif;
    font-size: 1.6rem;
    text-align: center;
    line-height: 1.3;
    margin: .5rem 0;
}
.subject-nameBox{
    display: flex;
    align-items: flex-start;
    margin: 1rem 0 0;
    flex-direction: column;
}
.subject-nameBox p{
    margin: 0 0 1rem;
}
.country{
font-size: 1.5rem;
    line-height: 1.3;
}
.subject-nameBox p,.modal-window p{
font-size: 1.6rem;
}
.subject-name{
    background: #13A075;
    color: #fff;
    border-radius: 8px;
    width: 35px;
    height: 35px;
    padding: 1rem;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    margin-right: 1rem;
    white-space:nowrap;
}
.text-teacher-name{
    font-family: 'Noto Serif JP',serif;
    font-size: 2.25rem !important;
    font-weight: 700;
}
.modal-window > h4{
    color: #13A075;
    font-size: 1.5rem;
    font-weight: 700;
    border-bottom: 1px solid #13A075;
    padding: 1rem 0 0.5rem;
}
.imgw-c {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.voice-box-teacher{
    display: flex;
}
.voice-box-teacher li{
    padding: 1%;
}
.pct-teacher{
    width: 30% !important;
}
.text-teacher-area{
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    width: 70%;
}
.text-teacher-name-p,.text-teacher-name-s{
font-family: Noto Serif JP, serif;
font-size: 1.65rem;
font-weight: 700;
line-height: 1.3;
    margin: 0 0 0.5rem;
}
.text-teacher-name-p{
    color: #89741a;
}
.text-teacher-name-s{
    color: #a0133e;
}
.tutor-name-box{
    font-size: 1.3rem;
    line-height: 1.3;
}
.tutor-name-s-p,.tutor-name-s-s{
    color: #fff;
    padding: 0.25rem 0.5rem;
    font-size: 1.25rem;
    display:inline-block;
    margin-bottom:.25rem;
}
.tutor-name-s-p{
    background: #89741a;
}
.tutor-name-s-s{
    background: #a0133e;
}

@media screen and (max-width: 1024px) {
/* 1024pxまでの幅の場合に適応される */
}
@media screen and (max-width: 912px) {
/* 912pxまでの幅の場合に適応される */
}
@media screen and (max-width: 820px) {
/* 820pxまでの幅の場合に適応される */
}
@media screen and (min-width:641px) and ( max-width:820px) {
/*　画面サイズが768pxから820pxまではここを読み込む　*/
}
@media screen and (max-width: 640px) {
/* 640pxまでの幅の場合に適応される */
.teachers-boxArea li {
    width: 48%;
    padding: 1% 1% 5%;
}
.modal-window {
width: 80%;
}
.button-open {
    border: 1px solid #666666;
    font-size:1.3rem;
}
.country,.subject-nameBox p,.modal-window p{
font-size: 1.4rem;
}
.subject-name{
    font-size: 1.3rem !important;
    line-height: 1.4;
}
.text-teacher-name {
    font-size: 1.8rem !important;
}
.teachers-name-ex{
    font-size: 1.4rem;
}
}
@media screen and (max-width: 360px) {
/* 360pxまでの幅の場合に適応される */
} 

/*---------------------------------------------------------
受講までの流れ
---------------------------------------------------------*/
.enflow-area{

}
.enflow-box{
    background: #fff;
    padding: 2vh 2vw;
    border-radius: 1vw;
    box-shadow: 0px 1px 7px 0px rgba(0, 0, 0, 0.25);
}
.icon-step{
background: #13875f;
    color: #fff;
    padding: 0.75vh 1.25vw;
    border-radius: 50vh;
    margin-right: 0.5vw;
}
.icon-next-arrow i{
    font-size: clamp(2.5rem, 4vw, 5rem);
    color: #13875f;
}

/*---------------------------------------------------------
よくあるご質問(英語)
---------------------------------------------------------*/
/* アコーディオン全体 */
.faq-area {
  max-width: 1000px;
  margin: 0 auto;
  margin: 6vh 0 0;
}

/* アコーディオン */
.accordion__item {
    cursor: pointer;
    margin: 0vh 0 2vh;
}

/* アコーディオンのタイトル */
.accordion__title {
    position: relative;
    cursor: pointer;
    border: 1px solid #006f4f;
    display: flex;
    align-items: center;
    padding-right: 25px;
    line-height: 1.2;
    background: #13a075;
    color: #fff;
    font-weight: 700;
}

.q-number {
    height: 100%;
    min-height: 60px;
    background: #006f4f;
    color: #fff;
}
.q-number, .a-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 60px;
    margin-right: 10px;
    font-family: "din-2014", sans-serif;
    font-size: clamp(3rem, 3vw, 3rem);
}

/* (+)アイコン */
.accordion__title::before,
.accordion__title::after {
    content: "";
    position: absolute;
    right: 10px;
    top: 0;
    bottom: 0;
    margin: auto 0;
    background-color: #fff;
    width: 16px;
    height: 4px;
    transition: all 0.3s;
}

.accordion__title::after {
  transform: rotate(90deg);
}
.ans-ttl {
    color: #13a075;
    display: inline-block;
    font-weight: 700;
}

/* アコーディオンのコンテンツ */
.accordion__content {
    display: none;
    cursor: pointer;
    border-right: 1px solid #006f4f;
    border-left: 1px solid #006f4f;
    border-bottom: 1px solid #006f4f;
}
.faq-contents {
    display: flex;
    align-items: center;
    font-size: clamp(1.3rem, 1.6vw, 1.6rem);
    background: #fff;
}
.a-number {
    height: 100%;
    min-height: 60px;
    background: #fff;
    color: #006f4f;
}

.accordion__content.is-open {
  display: block;
}
.faq-contents-txt {
    padding: 1rem 1rem 1rem 0;
}

/* アコーディオン展開時の(-)アイコン */
.accordion__item.is-active .accordion__title::before {
  transform: rotate(180deg);
}

.accordion__item.is-active .accordion__title::after {
  transform: rotate(180deg);
  opacity: 0;
}

@media screen and (max-width: 640px) {
/* 640pxまでの幅の場合に適応される */
.q-number, .a-number {
    max-width: 50px;
}
}
/*---------------------------------------------------------
学年別対策
---------------------------------------------------------*/
.p-yearlist-area{
    margin: 3vh 0;
    background: #fff;
    padding: 1.5vh 2vw;
    border-radius: .5vh;
}
.p-yearlist-box{
    display: flex;
}
.p-yearlist-box > li{
    width: calc(33.3333% - 5px / 3);
    margin: 1%;
    padding:0 10px;
}
.yearlist{
    display: flex;
    flex-direction: column;
}
.yearlist-btn{

}
.counterplan-list{
    margin: 1vh 0 0;
}
.counterplan-list > li{
    border-bottom: 1px dotted #999;
    padding: 0 0 .25vh;
}
.counterplan-list > li a{
    text-decoration: none;
    color: #333;
    display: block;
    position: relative;
}
.counterplan-list > li a:after{
    font-family: "Font Awesome 5 Pro";
    content: "\f105";
    position: absolute;
    right: 1px;
    top: 50%;
    margin-top: -10px;
    color: #00428C;
}
.counterplan-list > li a:hover:after{
    color: #d71c24;
}
.t-large,.t-small{
    line-height: 1;
}
.t-large{
    font-size: clamp(2.25rem, 2.5vw, 3rem);
}
.t-middle{
    font-size: clamp(1.8rem, 2.5vw, 2.5rem);
}
.t-small{
    font-size: clamp(1.2rem, 1.6vw, 1.8rem);
}
@media screen and (max-width: 640px) {
/* 640pxまでの幅の場合に適応される */
.p-yearlist-box {
    flex-direction: column;
}
.p-yearlist-box > li {
    width: 100%;
}
.yearlist {
    display: flex;
    flex-direction: row;
}
.yearlist-btn {
    width: 40%;
}
.counterplan-list {
    margin: 0 2vw;
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
}
/*---------------------------------------------------------
ボタン動き
---------------------------------------------------------*/
.btn-shake{
    animation: furu 3s infinite;
}
@keyframes furu {
    0% {
        transform: translate(0px, 0px) rotateZ(0deg)
    }
    2% {
        transform: translate(1px, 1px) rotateZ(1deg)
    }
    4% {
        transform: translate(0px, 1px) rotateZ(0deg)
    }
    6% {
        transform: translate(1px, 0px) rotateZ(-1deg)
    }
    8% {
        transform: translate(0px, 0px) rotateZ(0deg)
    }
    10% {
        transform: translate(1px, 1px) rotateZ(1deg)
    }
    12% {
        transform: translate(0px, 0px) rotateZ(0deg)
    }
    14% {
        transform: translate(1px, 0px) rotateZ(-1deg)
    }
    16% {
        transform: translate(0px, 1px) rotateZ(0deg)
    }
    18% {
        transform: translate(0px, 0px) rotateZ(0deg)
    }
    100% {
        transform: translate(0px, 0px) rotateZ(0deg)
    }
}
.animation{
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: 3s;
}

.keyframe5{
  animation-name: anim_sc;
  transform: scale(0.9,0.9);
}

@keyframes anim_sc {
  100% {
    transform: scale(1,1);
  }
}

.kiran-img {
position :relative;
overflow :hidden;
}
.kiran {
height:100%;
width:30px;
position:absolute;
top:-180px;
left:0;
background-color: #fff;
opacity:0;
transform: rotate(45deg);
animation: reflection 2s ease-in-out infinite;
-webkit-transform: rotate(45deg);
-webkit-animation: reflection 2s ease-in-out infinite;
-moz-transform: rotate(45deg);
-moz-animation: reflection 2s ease-in-out infinite;
-ms-transform: rotate(45deg);
-ms-animation: reflection 2s ease-in-out infinite;
-o-transform: rotate(45deg);
-o-animation: reflection 2s ease-in-out infinite;
}
@keyframes reflection {
0% { transform: scale(0) rotate(45deg); opacity: 0; }
30% { transform: scale(0) rotate(45deg); opacity: 0.5; }
31% { transform: scale(4) rotate(45deg); opacity: 1; }
100% { transform: scale(50) rotate(45deg); opacity: 0; }
}
@-webkit-keyframes reflection {
0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
30% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
31% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}
@-moz-keyframes reflection {
0% { -moz-transform: scale(0) rotate(45deg); opacity: 0; }
30% { -moz-transform: scale(0) rotate(45deg); opacity: 0.5; }
31% { -moz-transform: scale(4) rotate(45deg); opacity: 1; }
100% { -moz-transform: scale(50) rotate(45deg); opacity: 0; }
}

/*---------------------------------------------------------
SV合格速報area
---------------------------------------------------------*/
.manzokudo-SvArea{
width:100%;
background-size: 16px 16px;
background-position: 50% 50%;
background-image: repeating-linear-gradient( 90deg, rgba(0,116,64,0.1) , rgba(0,116,64,0.1) 1px, transparent 1px, transparent 16px),repeating-linear-gradient( 0deg, rgba(0,116,64,0.1) , rgba(0,116,64,0.1) 1px, #fff 1px, #fff 16px);
    padding: 6vh 0;
}
.manzokudo-SvBox{

}
.manzokudo-SvBox > h2{
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    margin: 0 0 3vh;
    color: #007440;
}
.manzokudo-SvBox-innner{
    text-align: center;
}
.movie-box{
    margin: 0 auto;
    width: 90%;
    max-width: 600px;
}
.movie-box > h3{
    font-size: clamp(1.6rem, 3vw, 1.8rem);
    font-weight: 600;
    line-height: 1.3;
    margin: 5vh 0 1vh;
    text-align: center;
}
.youtube-wrap {
  margin-bottom: 20px;
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.youtube-wrap iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}


/*---------------------------------------------------------
合格に導く完全個別カリキュラムを作成！
---------------------------------------------------------*/
.univ-exam-curriculum-innner{

}
.univ-exam-curriculum-innner-ttl{
    position: relative;
    width: 90%;
    margin: 0 auto;
    text-align: center;
}
.univ-exam-curriculum-innner-ttl::before,
.univ-exam-curriculum-innner-ttl::after{
    position: absolute;
    top: 0.8rem;
    height: 6vh;
    content: '';
    color: #da1c24;
}
.univ-exam-curriculum-innner-ttl::before{
    border-left: solid 3px;
    left: 0;
    transform: rotate(-30deg);
}
.univ-exam-curriculum-innner-ttl::after{
    border-right: solid 3px;
    right: 0;
    transform: rotate(30deg);
}
.univ-exam-curriculum-innner-ttl > h2{
font-size: clamp(2.5rem, 4vw, 4rem);
    font-weight: 600;
    line-height: 1.4;
    color: #da1c24;
}
.univ-exam-curriculum-innner-ttl > p{
    font-size: clamp(1.1rem, 3vw, 2rem);
    line-height: 1.3;
}
.univ-exam-curriculum-innner > h3 > span{
    color: #005bac;
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight:700;
    line-height:1.3;
    text-align: center;
    background: linear-gradient(transparent 60%, #fff100 70%);
}
.univ-exam-curriculum-semi-ttl{
background: #da1c24;
    color: #fff;
    text-align: center;
    border-radius: 1vh;
    margin: 0 0 2vh;
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 700;
    line-height: 1.6;
    padding: .5vh .5vw;
}
.w-40{width:40%;}
.float-r{
    float: right;
    margin-left: 2vw;
    margin-bottom: 3vh;
}
.float-l{
    float: left;
    margin-right: 2vw;
    margin-bottom: 3vh;
}
.cb {clear: both;}

@media screen and (max-width: 600px) {
/* 600pxまでの幅の場合に適応される */
.w-40{width:100%;}
}

/*---------------------------------------------------------
満足度バッチ
---------------------------------------------------------*/
.culum-3-none,.culum-4-none{
    display: flex;
}
.culum-4-none > p{
    width: 25%;
}
.culum-3-none > *,
.culum-4-none > *{
    padding:1%;
}
.pr-pct img{
    position: absolute;
    /*right: -40%;*/
        bottom: 0;
    height: 420px;
}
.semi-ttl{
font-size: clamp(1.8rem, 4vw, 3rem);
}
.top-ttl{
font-size: clamp(2.2rem, 4vw, 5rem);
}
.t-c{text-align: center;}
.fw{font-weight: 700;
    line-height: 1.3;}
.mt-2{margin-top: 2vh;}
.mb-2{margin-bottom: 2vh;}
.fc-red{color: #d63031;}
@media screen and (max-width: 1024px) {
.pr-pct img {
    right: -5%;
    height: 350px;
}
}
@media screen and (max-width: 830px) {
.pr-pct img {
    right: -5%;
    height: 300px;
}
}
@media screen and (max-width: 480px) {
.txt{margin: 0 0 2vh;}
}
@media screen and (max-width: 350px) {
.pr-pct-sp img {
    height: 110px;
    right: 0px;
    top: -25px;
}
}
/*---------------------------------------------------------
合格実績
---------------------------------------------------------*/
.jisseki-uni-box{
    background: #ebf9ff;
    padding: 2vh 2vw;
    border: 1px solid #d9f3fc;
    margin: 0 0 6vh;
    box-shadow: 8px 9px 10px -12px rgb(0 0 0 / 80%);
        position: relative;
}
.jisseki-uni-box-ttl{
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  font-family: 'Noto Serif JP', serif;
  font-weight: bold;
  color: #fff;
  --r: .3em; /* control the ribbon shape (the radius) */
  position: absolute;
  top: 10px;
  inset-inline: calc(-1*var(--r));
  text-align: center;
  line-height: 1.8; 
  padding: 0 .5em calc(2*var(--r));
  border-radius: var(--r);
  --_g:100%/var(--r) calc(2*var(--r)) no-repeat;
  background: 
    radial-gradient(100% 50% at right,#0005 98%,#0000 101%) 0    var(--_g),
    radial-gradient(100% 50% at left ,#0005 98%,#0000 101%) 100% var(--_g),
    conic-gradient(from 90deg at var(--r) calc(100% - 2*var(--r)),#0000 25%,#3FB8AF 0)
     0 0/calc(100% - var(--r)) 100%;
}
.jisseki-uni-box > p{
    margin: 8vh 0 0;
    font-family: 'Noto Serif JP', serif;
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight:600;
    line-height:1.6;
}
/*---------------------------------------------------------
Footer-fix-btn
---------------------------------------------------------*/
@media screen and (max-width: 600px) {
#btn-bottom {
        height: auto;
    }
}
.sp-btn-footer{
    display: flex;
}
.btn-price,
.btn-taiken,
.btn-siryo
{
        max-width: calc(180 / 390 * 100vw);
        height: calc(45 / 390 * 100vw);
        flex-shrink: 0;
        width: 95px;
}
.sp-btn-footer > li{
        margin: 1%;
}
.sp-btn-footer > li > a{
        font-size: 1.2rem;
        line-height: 1.2;
        font-weight: 700;
        border-radius: 6px;
}

.btn-phone{
    width: 48px;
    flex-shrink: 0;
}
.btn-phone > a,
.btn-price > a,
.btn-taiken > a,
.btn-siryo > a{
padding: 0.5em 1em;
        display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    color: #fff;
        text-decoration: none;
        font-size: 1.8rem;
        line-height: 1.4;
}
.btn-price > a,
.btn-taiken > a,
.btn-siryo > a{
    width: 100%;
    height: 100%;
        padding: 2%;
}
.btn-phone > a{
        background: #fff;
        border: 2px solid #27ae60;
        box-shadow: 0px 2px 0px #079945;
        font-size: 26px !important;
        text-align: center;
        padding-left: 0;
        padding-right: 0;
        color: #000;
}
.btn-price > a{
        background-image: linear-gradient(to bottom, #27ae60, #079945);
        box-shadow: 0px 2px 0px #079945;
        border-color: #27ae60;
}
.btn-taiken > a{
    background: #ff6e01;
    background: -webkit-gradient(linear, left bottom, left top, from(#ff6e01), to(#f39412));
    background: -webkit-linear-gradient(bottom, #ff6e01 0%, #f39412 100%);
    background: -o-linear-gradient(bottom, #ff6e01 0%, #f39412 100%);
    background: linear-gradient(0deg, #ff6e01 0%, #f39412 100%);
}
.btn-siryo > a{
        background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ff0000), color-stop(100%, #e00303));
        background-image: -moz-linear-gradient(top, #ff0000, #e00303);
        background-image: -webkit-linear-gradient(top, #ff0000, #e00303);
        background-image: linear-gradient(to bottom, #ff0000, #e00303);
        box-shadow: 0px 2px 0px #e00303;
        border-color: #ff0000;
}

/*---------------------------------------------------------
Footer-fixedBtn
---------------------------------------------------------*/
#btn-bottom-area{
    display: block;
    position: fixed;
    bottom: 0px;
    left: 0px;
    width: 100%;
    background: rgba(255, 255, 255, 0.95);
    z-index: 999;
    padding: 0;
    border-top: 2px solid #eee;
    box-shadow: 5px 10px 20px rgb(0 0 0 / 45%);
}
.w-800-9{
    max-width: 800px;
    margin: 0 auto;
    width: 95%;
}
.bottomArea-box{
    display: flex;
    align-items: center;
    padding: 1vh 0 1vh;
}
.bottomArea-box >li {
    width: 48%;
    margin: 0 1%;
}

.btn-footer-cta,.btn-footer-tel,.btn-footer-join{
    display: block;
    border-radius: 1vh;
    color: #fff;
    font-weight: 700;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        padding: 5px 0;
        margin:5px 0;
        height: 70px;
    /* font-size: clamp(2rem, 6vw, 3rem);*/
}
.btn-footer-tel:hover{
    color: #ffff00;
}
.btn-footer-tel{
    background: #27ae60;
    border: 1px solid #27ae60;
}
.btn-footer-cta-txt,.btn-footer-tel-txt{
        border-radius: 50vh;
        width: 95%;
        text-align: center;
}
.btn-footer-tel-txt{
    font-size: clamp(1.2rem, 3vw, 2rem);
    background: #fff;
    color: #000;
}

@media screen and (max-width: 640px) {
/* 640pxまでの幅の場合に適応される */
.logo-footer {
    max-width: 200px;
}
.btn-footer-cta,.btn-footer-tel,.btn-footer-join{
    display: block;
    border-radius: 1vh;
    color: #fff;
    font-weight: 700;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        text-decoration: none;
        padding: 5px 0;
        margin:5px 0;
}
.btn-footer-cta{
    background: #ec284e;
    border: 1px solid #ec284e;
}
.btn-footer-tel{
    background: #27ae60;
    border: 1px solid #27ae60;
}
.btn-footer-join{
    background: #ff9d00;
    border: 1px solid #ff9d00;
}
.btn-footer-cta-txt,.btn-footer-tel-txt{
        border-radius: 50vh;
        width: 95%;
        text-align: center;
        margin: 0 0 5px;
}
.btn-footer-cta-txt-big{
    font-size:1.6rem;
}
.btn-footer-cta-txt{
    font-size:1.2rem;
    background: #fff;
    color: #000;
}
.btn-footer-tel-txt{
    font-size:1.2rem;
    background: #fff;
    color: #000;
        padding: .5rem 0;
}
.juken-txt{
font-size: 1.4rem;
            line-height: 1.1;
}
}

/*---------------------------------------------------------
CTAボタンエリア20240705
---------------------------------------------------------*/
.section-cv-area{
    padding: 4vh 0 4vh;
    background: #F2FCE6;
}
body[data-cat="campaign-course"] .section-cv-area{
    padding: 4vh 0 6vh;
    background: #F2FCE6;
}
body[data-cat="campaign-start"] .section-cv-area{
    padding: 4vh 0 6vh;
    background: #F2FCE6;
}

.w-800{
    width:95% !important;
    max-width:850px;
    margin:0 auto;
}
.fc-red{
    color: #D00000;
}
.mb-3{
    margin-bottom:3vh;
}
.cta-btnArea-all{
    display: flex;
}
.cta-btnArea-all > li{
    width:calc(100% / 2);
    margin: 2% 2% 2% 0;
}
.cta-btnArea-all > li:last-child{
    margin: 2% 0 2% 0;
}
.cta-areaBox{
    color: #000;
    font-weight:700;
    margin: 0 0 1vh;
    font-size: clamp(2rem, 5vw, 3.5rem);
    text-align: center;
}
.cta-areaBox-ttl-big{
    font-size: clamp(3rem, 7vw, 5rem);
}
.cta-areaBox > p {
    font-size: clamp(2.25rem, 6vw, 4rem);
    line-height: 1;
}
.cta-btnBox02,
.cta-btnBox > a{
    color: #fff !important;
    text-decoration: none !important;
    font-weight: 700;
    display: block;
    padding: 2vh 1vw 2vh 50px;
    border-radius: 12px;
    position: relative;
    line-height: 1.1;
    box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.4);
    text-align: center;
}
.cta-btnBox > a{
    font-size: clamp(1.4rem, 3vw, 2.5rem);
}

.cta-comment{
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    border: 1px solid #fff;
    border-radius: 50vh;
    width: 60px;
    height: 60px;
    font-size:.6rem;
    background: #fff;
}
.cta-comment-inquiry{
    left: 25%;
}
.cta-comment > span{
position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}
.cta-comment-number{
    font-size: 1.4rem;
}
.cta-btnBox-txt-big{
    font-size: clamp(2rem, 6vw, 3.5rem);
}
.cta-btnBox > a:after,
.cta-btnBox02:after{
    font-family: "Font Awesome 5 Free";
    font-display: swap;
    content: "\f105";
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}
.highlight{
position: absolute;
    border-radius: 100px;
    width: 100%;
    height: 30%;
    top: 0px;
    left: 0;
    background: linear-gradient(to bottom, rgba(250, 250, 255, 0.9) 10%, rgba(250, 250, 255, 0.3) 100%);
}
.cta-btn_inquiry{
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ff0000), color-stop(100%, #e00303));
  background-image: -moz-linear-gradient(top, #ff0000, #e00303);
  background-image: -webkit-linear-gradient(top, #ff0000, #e00303);
  background-image: linear-gradient(to bottom, #ff0000, #e00303);
  box-shadow:
		0 2px 6px rgba(0,0,0,0.5),
		0 2px 10px rgba(0,100,255, 0.7);
  border-color: #ff0000;
  border:2px solid #ff0000;
}
.cta-btn_inquiry:hover{
  background:#fff;
  color:#ff0000 !important;
}
.cta-btn_inquiry .cta-comment{
  color:#ff0000;
}
.cta-btn_inquiry:hover .cta-comment{
border:1px solid #ff0000;
}

.cta-btn_online_inquiry{
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ff0000), color-stop(100%, #e00303));
  background-image: -moz-linear-gradient(top, #ff0000, #e00303);
  background-image: -webkit-linear-gradient(top, #ff0000, #e00303);
  background-image: linear-gradient(to bottom, #ff0000, #e00303);
  box-shadow: 0px 2px 0px #e00303;
  border-color: #ff0000;
  border:2px solid #ff0000;
}
.cta-btn_online_inquiry:hover{
  background:#fff;
  color:#ff0000 !important;
}
.cta-btn_online_inquiry .cta-comment{
  color:#ff0000;
}
.cta-btn_online_inquiry:hover .cta-comment{
border:1px solid #ff0000;
}
.cta-btn_trial{
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ff9d00), color-stop(100%, #e58905));
  background-image: -moz-linear-gradient(top, #ff9d00, #e58905);
  background-image: -webkit-linear-gradient(top, #ff9d00, #e58905);
  background-image: linear-gradient(to bottom, #ff9d00, #e58905);
  box-shadow: 0px 2px 0px #e58905;
  border-color: #ff9d00;
  border:2px solid #ff9d00;
}
.cta-btn_trial:hover{
  background:#fff;
  color:#ff9d00 !important;
}
.cta-btn_trial .cta-comment{
  color:#ff9d00;
}
.cta-btn_trial:hover .cta-comment{
border:1px solid #ff9d00;
}

.cta-btn_tuition{
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #27ae60), color-stop(100%, #079945));
  background-image: -moz-linear-gradient(top, #27ae60, #079945);
  background-image: -webkit-linear-gradient(top, #27ae60, #079945);
  background-image: linear-gradient(to bottom, #27ae60, #079945);
  box-shadow: 0px 2px 0px #079945;
  border-color: #27ae60;
  border:2px solid #27ae60;
}
.cta-btn_tuition:hover{
  background:#fff;
  color:#27ae60 !important;
}
.cta-btn_tuition .cta-comment{
  color:#27ae60;
}
.cta-btn_tuition:hover .cta-comment{
border:1px solid #27ae60;
}
.cta-btn_tel{
    padding: .5vh .5vw;
    margin: 1vh 0 0;
    display: flex;
    justify-content: center;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fff), color-stop(100%, #efefef));
  background-image: -moz-linear-gradient(top, #fff, #efefef);
  background-image: -webkit-linear-gradient(top, #fff, #efefef);
  background-image: linear-gradient(to bottom, #fff, #efefef);
  border-color: #efefef;
  border:2px solid #fff;
  color:#007440;
}
.cta-btn_tel:after{
    color: #007440 !important;
        font-size: clamp(1.4rem, 3vw, 2.5rem);
}
.cta-btn_tel a{
    text-decoration: none !important;
    line-height: 1;
}
.school-tel-txt-box{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 3vh 0 0;
}
.p-framecolumn__box_item--tel{
    justify-content: center !important;
    margin: 2vh 0 0 !important;
}
.p-framecolumn__box_item--tel-num p {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: end;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
    padding: 1.5vh 0 1vh;
}

.p-framecolumn__box_item--tel-num p small {
  width: 100%;
  font-size: clamp(1rem, 2vw, 1.6rem);
      color: #007440;
}

.p-framecolumn__box_item--tel-num p i {
    width: calc(60 / 14* 1em);
}

.p-framecolumn__box_item--tel-num p strong {
    font-size: clamp(2rem, 7vw, 5rem);
  letter-spacing: -0.05em;
    color: #007440;
        background: transparent;
}

@media screen and (max-width: 912px) {
/* 912pxまでの幅の場合に適応される */
.school-tel-txt-box{
    flex-direction: column;
}
.school-tel-txt-box > div{
    margin: 0 0 2vh;
}
.p-framecolumn__box_item--tel-num p i {
    width: calc(60 / 16* 1em);
}
}
@media screen and (max-width: 640px) {
/* 640pxまでの幅の場合に適応される */
.cta-btnArea-all > li > p > a{
        padding: 1vh 0 1vh 25px !important;
}
.cta-comment{
    width: 35px;
    height: 35px;
    font-size:.4rem;
}
.cta-comment-number{
    font-size:.8rem;
}
.cta-comment-inquiry{
    left: 15%;
}
.p-framecolumn__box_item--tel-num p i {
    width: calc(35 / 16* 1em);
}
}