@charset "UTF-8";
/*---------------------------------------------------------
header
---------------------------------------------------------*/
.header-main .header-logo {
    width: 400px;
}
.header-london{
    background: #007440;
}
.header-main {
    padding: 1.5vh 0;
}
@media screen and (max-width: 640px) {
.header-main {
    padding: 1vh 0;
}
}
/*---------------------------------------------------------
下層ページ用CSS
---------------------------------------------------------*/
p,span,th,td,dd,dt{
font-size: clamp(1.4rem, 4vw, 1.8rem);
}
.fs-mini{
font-size: clamp(1.2rem, 3vw, 1.4rem);
line-height: 1.2;
}
.top-ttl{
    font-size: clamp(2.25rem, 3.5vw, 4rem);
    font-weight: 700;
    line-height: 1.4;
}
.top-ttl001{
    font-size: clamp(2.25rem, 3.25vw, 3.25rem);
    font-weight: 700;
    line-height: 1.4;
}
.top-ttl-big{
    font-size: clamp(3rem, 5vw, 5.5rem);
    font-weight: 700;
    line-height: 1.4;
}
.top-ttl02 {
    font-size: clamp(2rem, 3.5vw, 4rem);
    font-weight: 700;
    line-height: 1.4;
}
.semi-ttl01{
    font-size: clamp(2rem, 3vw, 3.5rem);
    font-weight: 700;
    line-height: 1.4;
}
.semi-ttl{
    font-size: clamp(2rem, 2.5vw, 3rem);
    font-weight: 700;
    line-height: 1.3;
}
.third-ttl{
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 700;
    line-height: 1.3;
}
.fourth-ttl{
    font-size: clamp(1.6rem, 2vw, 2.25rem);
    font-weight: 700;
    line-height: 1.3;
}
/*---------------------------------------------------------
余白
---------------------------------------------------------*/
.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;} 

.w-1000,.w-1200.w-800,.w-600{margin: 0 auto;width: 90%;}
.w-1000{max-width: 1000px;}
.w-1200{max-width: 1200px;}
.w-800{max-width: 800px;}
.w-600{max-width: 600px;}
.pt-section{
    padding-top:6vh;
}
.pb-section{
    padding-bottom:6vh;
}
.bg-highgreen,.ao_rec-ttlBg{
    background: #01A56F;
}
.bg-reason{
    background-color: rgba(0, 75, 112, 1);
}
.ao_rec-ttlBg{
color:#fff;
padding:1.5vh 1vw;
    margin: 0 0 4vh;
}
.bg-lattice-wamgreen{
width:100%;
background-size: 16px 16px;
background-position: 50% 50%;
background-image: repeating-linear-gradient( 90deg, rgba(239,239,239,0.9) , rgba(239,239,239,0.9) 1px, transparent 1px, transparent 16px),repeating-linear-gradient( 0deg, rgba(239,239,239,0.9) , rgba(239,239,239,0.9) 1px, #fff 1px, #fff 16px);
}
.column-20{width: 20%;}
.column-30{width: 30%;}
.column-40{width: 40%;}
.column-50{width: 50%;}
.column-60{width: 60%;}
.column-70{width: 70%;}
.column-80{width: 80%;}
.plan-box {
    background: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    border-radius: 10px;
    text-align: left;
    padding: 3vh 3vw;
    margin: 2.5vh 0 6vh;
}
#flow-step .plan-box{
    margin: 1vh 0 1vh;
}
.list04 {
  list-style: none;
  margin: 0;
  padding: 0;
}
.list04 > li {
  text-indent: -.5em;
  padding-left: 1em;
}
.list04 > li:first-child{
    padding-left: 1em;
}
.list04 > li:before {
  content: "\203B"; /* 空の要素作成 */
  width: 5px; /* 幅指定 */
  height: 5px; /* 高さ指定 */
  display: inline-block; /* インラインブロックにする */
  position: relative;
  padding-right:2px;
}
@media screen and (max-width: 640px) {
/* 640pxまでの幅の場合に適応される */
.pt-section{
    padding-top:4vh;
}
.pb-section{
    padding-bottom:4vh;
}
.column-20,.column-30,.column-40,.column-50,.column-60,.column-70,.column-80{
width: 100%;
}
.img-sp-w80{width:80% !important;display: block !important;margin-left: auto !important;margin-right: auto !important;}
.img-sp-w60{width:60% !important;display: block !important;margin-left: auto !important;margin-right: auto !important;}
.img-sp-w50{width:50% !important;display: block !important;margin-left: auto !important;margin-right: auto !important;}
.sp-f-column{
flex-direction: column;
}
.order-1{
    order: 1;
}
.order-2{
    order: 2;
}
.show-text{
padding: 0 2vw;
}
}

/*---------------------------------------------------------
FV
---------------------------------------------------------*/
 :root { 
 --main-color: #005abc;
 --sub-color: rgba(0,90,188,0.1);
 --dark-color: #0b4199;
 --white-color: #fff;
 --btn-red-color: #d70720;
  } 
.fc-london { color: var(--main-color); } 
.fc-white { color: var(--white-color); } 
.bg-white { background: var(--white-color); } 
.bg-london { background: var(--main-color); } 
.bg-l-london { background: var(--sub-color); } 

.fv-london{
    background: #d6eaf9;
}
.fv-london-innner{
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.header-links02{
    width: 100%;
    max-width: 300px;
}
.cta-btn-set{
    padding: 1vh 1vw;
    display: block;
    text-align: center;
    border-radius: 1vh;
    text-decoration: none !important;
}
.cta-btn-red{
    background: var(--btn-red-color);
    color: var(--white-color) !important;
    font-weight: 700;
    border:2px solid var(--btn-red-color);
}
.cta-btn-red:hover{
    background: var(--white-color);
    color: var(--btn-red-color) !important;
    border:2px solid var(--btn-red-color);
}
.cta-btn-txt-header{
    font-size: clamp(1.6rem, 3vw, 2rem);
}
.cta-btn-txt-contents{
font-size: clamp(2.5rem, 3vw, 2.5rem);
line-height: 1.2;
    font-weight: 700;
}
.cta-btn-txt-contents-mini{
font-size: clamp(1.2rem, 3vw, 1.5rem);
}
/*詳細はこちらボタン*/
.btn-area{
    margin: 0 auto;
    width: 95%;
    max-width: 700px;
    padding: 3vh 0;
    text-align: center;
}

.address-box{
display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    width: 95%;
    margin: 0 auto;
}
.address-box dt,.address-box dd{
padding:1vh 1vw;
    border: 1px solid #D9D9D9;
}

.address-box dt{
    background: #F8F8F8;
}
.map {
  width: 100%;
  position: relative;
}

.map iframe {
  width: 100%;
}

/* 教室長からのメッセージ */
.sv-voicebox {
    border: 2px solid var(--main-color);
    margin: 6vh 0 0;
    padding: 50px 2vw 4vh;
    position: relative;
    border-radius: 1vw;
}
.sv-voicebox-ttl{
    position: relative;
    white-space: nowrap;
}
.sv-voicebox-ttl span{
    font-size: clamp(1.5rem, 2.5vw, 2.25rem);
        color: #fff;
    text-align: center;
    padding: 2vh 2vw;
    font-weight: 700;
}
.sv-voicebox-ttl span::before,
.sv-voicebox-ttl span::after {
border: none;
border-bottom: solid 15px transparent;
content: '';
position: absolute;
top: -10px;
}

.sv-voicebox-ttl span::before {
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 12px 10px;
border-color: transparent transparent var(--dark-color); transparent;
left: -10px;
}

.sv-voicebox-ttl span::after {
width: 0;
height: 0;
border-style: solid;
border-width: 12px 0 0 10px;
border-color: transparent transparent transparent #333333;
    right: -10px;
}
.sv-voicebox-ttl-area{
    position: absolute;
    top: -3px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}
.sv-voicebox-ttl-area:before{

}
.sv-voicebox-ttl-area::after{

}
.sv-voice-name{
display: block;
    text-align: center;
    font-size: clamp(1.2rem, 4vw, 1.4rem);
    line-height: 1.2;
    margin: 1vh 0 0;
}
.sv-voice-txt-box{
    margin: 3vh 0 0;
}
.sv-voice-txt-box-ttl{
    color: #005064;
    font-size: clamp(2rem, 3vw, 3.25rem);
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 2vh;
}

@media screen and (max-width: 1024px) {
/* 1024pxまでの幅の場合に適応される */
.header-links02{
    margin-right: 1rem;
}
}

@media screen and (max-width: 640px) {
/* 640pxまでの幅の場合に適応される */
.header-links02{
    max-width: 150px;
    margin-right: 1rem;
}
.sv-voice-txt-box {
    margin: 0 0 0;
}
.address-box dt,.address-box dd{
width: 100%;
}
}

/* 一人ひとりに合わせた学習プラン */
.course-area-box{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}
.course-area-box li{
width: 22%;
}
.course-area-box li{
    position: relative;
    padding: 1rem 1rem 1rem 2rem;
    margin: 5px;
    outline: 2px solid;
    background-image:
        linear-gradient(-45deg, transparent 0 20px, #fff 20px calc(100% - 20px), transparent calc(100% - 20px)),
        repeating-linear-gradient(135deg, var(--sub-color) 0 2px, transparent 2px 4px);
    color: var(--main-color);
    font-weight: 600;
    text-align: center;
    font-size: clamp(1.2rem, 1.6vw, 1.4rem);
}

@media screen and (max-width: 1024px) {
/* 1024pxまでの幅の場合に適応される */
}
@media screen and (max-width: 912px) {
/* 912pxまでの幅の場合に適応される */
.course-area-box li {
    width: 31%;
}
}
@media screen and (max-width: 640px) {
/* 640pxまでの幅の場合に適応される */
.course-area {
    padding: 0 0 1vh !important;
}
.course-area-box li {
    width: 44%;
    padding: 1rem 0.51rem 1rem 0.5rem;
    background-image: linear-gradient(-45deg, transparent 0 20px, #fff 20px calc(100% - 20px), transparent calc(100% - 20px)), repeating-linear-gradient(135deg, var(--sub-color) 0 2px, transparent 2px 4px);
    color: var(--main-color);
}
}
/* 理由 */
.reason-number{
    display: inline-block;
    padding: 1vh 2vw;
    margin: 1.5vh 0 2vh;
    font-family: "din-condensed", sans-serif;
    color: var(--white-color);
    background: var(--main-color);
    line-height: 1.2;
    font-weight: 700;
    font-size: clamp(1.2rem, 3vw, 2rem);
}
.u-line-b {
    border-bottom: 2px solid var(--main-color);
    padding-bottom: 5px;
}
/* 講師の声カルーセル */

.wrapper .swiper-container .swiper-wrapper {
    transition-timing-function: linear !important;
}
.swiper{
position: relative;
}
.reason-teacher-area{
width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	padding: 2rem 0 1rem;
}
.t-voice-slide{
padding:0 20px:
}
.slick-prev:before, .slick-next:before {
    font-size: 40px;
    opacity: .75;
    color: #01A56F;
}
.slick-prev {
    left: -10px;
}
.slick-next{
right: 10px;
}
.slick-prev, .slick-next {
    z-index: 3;
}
.slick-slide {
    margin: 0 10px;
}

/*---------------------------------------------------------
受講までの流れ
---------------------------------------------------------*/
.flow-area{
    padding: 0 0 1vh;
}

.flow-box {
    background: #fff;
    padding: 2vh 2vw;
    border-radius: 1vw;
    box-shadow: 0px 1px 7px 0px rgba(0, 0, 0, 0.25);
}

.icon-step{
background: var(--main-color);
    color: #fff;
    padding: 0.75vh 1.25vw;
    border-radius: 50vh;
    margin-right: 0.5vw;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
}
.icon-next-arrow i{
    font-size: clamp(2.5rem, 6vw, 6rem);
    color: var(--main-color);
}

@media screen and (max-width: 640px) {
/* 640pxまでの幅の場合に適応される */
.icon-step {
    margin-right: 1rem;
    border-radius: 4px;
}
}
.annotation-box {
    margin: 0 auto 4vh;
    width: 90%;
    max-width: 680px;
    border: 1px solid #666;
    padding: .5rem 0.25rem;
}
.footer-london {
    overflow: hidden;
    padding-bottom: 90px;
}
.footer-logo-london{
width: 50%;
    max-width: 200px;
    margin: 0 0 1vh;
}
.copy {
    text-align: center;
    padding: 15px 0;
    background: #fff;
    font-size: 10px;
}
@media screen and (max-width: 640px) {
/* 640pxまでの幅の場合に適応される */
.footer-london {
    padding-bottom: 50px;
}
.fnav-bottom li a {
    font-size: 10px;
}
.footer-logo-london{
    max-width: 150px;
}
}