@charset "UTF-8";

.head-leed-list li a:hover{
  color: #EE4D47
}
.header-leed-box-link a{
font-size: clamp(1.2rem, 1.6vw, 1.4rem);
    text-decoration: none;
    color: #111;
}
.head-menu-btn-box{
    display: flex;
}
.header-leed-list-box{
    display: flex;
    flex-direction: row-reverse;
    width: 95%;
    max-width: 1600px;
    margin: 0 auto;
}
.header-leed-list-box-bg{
    background: #F7F7F7;
    width: 100%;
}

/*---------------------------------------------------------
メインビュー
---------------------------------------------------------*/

#TopMain{
background: #006f4f;
}
#TopMain img{
    width: 100%;
    max-width: 1920px;  
    display: block;
    margin-left: auto;
    margin-right: auto;
}
@media screen and (max-width: 1024px) {
/* 1024pxまでの幅の場合に適応される */

}
@media screen and (max-width: 768px) {
/* 768pxまでの幅の場合に適応される */

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

}

/*---------------------------------------------------------
紹介
---------------------------------------------------------*/
#intro{
background: url(../img/top/sv-bg-pc.webp) no-repeat center center, -moz-linear-gradient(left, #fff 0%, #d1f5fb 100%);
  background:url(../img/top/sv-bg-pc.webp) no-repeat center center, -webkit-linear-gradient(left, #fff 0%, #d1f5fb 100%); 
}
.intro-box{
padding:8rem 0;
position: relative;
height: 450px;
}
.intro-box h2{
    text-align: center;
    font-size: 3.5rem;
    color: #89741a;
    line-height: 1.3;
    font-weight: 700;
    margin: 0 0 4rem;
}
.sv-txtbox{
    color: #4d4d4d;
    font-weight: 700;
    position: absolute;
    right: 0;
}
.sv-mainpct{
position: absolute;
bottom: 0;
}
.intro-box img{
width: 90%;
max-width: 450px;
}
.intro-teacher-box{
position: absolute;
right: 0;
width: 60%;
bottom: 5%;
background: rgba(255,255,255,0.8);
padding: 1.5rem;
}
.g-trame{
background: #89741a;
padding: 0.75rem;
color: #fff;
margin: 0 0.5rem 0 0;
border-radius: 4px;
}
.w-g-trame{
background: #fff;
border: 1px solid #89741a;
padding: 0.75rem 1rem;
border-radius: 4px;
margin-right: 0.75rem;
color: #89741a;
}
.standard-trame{
background: #a0133e;
padding: 0.75rem;
color: #fff;
margin: 0 0.5rem 0 0;
border-radius: 4px;
}

.g-trame,.w-g-trame,.standard-trame{font-size: 1.4rem;}
.intro-teacher-name{
font-weight: 700;
margin: 0 0 0.5rem;
font-size: 2rem;
}
.intro-course{
font-weight: 700;
margin: 0 0 1rem;
}
.intro-from{margin: 0 0 1.5rem;}
.intro-from,.intro-from span{font-size: 1.5rem;}
.intro-from span{font-weight: 700;}

@media screen and (max-width: 1024px) {
/* 1024pxまでの幅の場合に適応される */

}
@media screen and (max-width: 820px) {
/* 820pxまでの幅の場合に適応される */
.intro-box h2 {
    margin: 0 0 3rem;
}
}

@media screen and (max-width: 768px) {
/* 768pxまでの幅の場合に適応される */
.intro-box {
    padding: 6rem 0;
    height: 450px;
}
.intro-teacher-box {
    width: 65%;
}
.intro-box h2 {
    font-size: 3rem;
    margin: 0 0 2rem;
}
.sv-txtbox{
    position: relative;
    text-align: center;
}
.sv-mainpct {
    left: -20px;
}
}
@media screen and (max-width: 640px) {
/* 640pxまでの幅の場合に適応される */
.intro-box {
    padding: 3rem 0;
    height: 650px;
}
.intro-box h2 {
    font-size: 2rem;
    margin: 0 0 2rem;
}
.sv-txtbox{
    position: relative;
    text-align: center;
}
.sv-mainpct{
position: relative;
}
.intro-box img{
    width: 100%;
    display: block;
    margin: auto;
}
.intro-teacher-box {
    position: relative;
    right: 0;
    width: 95%;
    bottom: 10%;
    background: rgba(255,255,255,0.9);
    padding: 1rem;
}
}

/*---------------------------------------------------------
共通タイトル
---------------------------------------------------------*/
.h-title{
text-align: center;
}
.h-title span{
color: #a7a7a7;
font-family: din-condensed,sans-serif;
font-size: 3rem;
line-height: 1.1;
display: block;
}
.h-title h2{
font-size: 3.5rem;
color: #13a075;
font-weight: 700;
padding: 1rem 0;
display: inline-block;
 border-bottom: 3px solid;
}

@media screen and (max-width: 1024px) {
/* 1024pxまでの幅の場合に適応される */

}
@media screen and (max-width: 768px) {
/* 768pxまでの幅の場合に適応される */

}
@media screen and (max-width: 640px) {
.h-title h2 {
    font-size: 2.5rem;
}
.h-title span {
    font-size: 2rem;
}

}
/*---------------------------------------------------------
共通背景
---------------------------------------------------------*/
.bg-lattice{
width:100%;
background-size: 16px 16px;
background-position: 50% 50%;
background-image: repeating-linear-gradient( 90deg, rgba(0,111,79,0.1) , rgba(0,111,79,0.1) 1px, transparent 1px, transparent 16px),repeating-linear-gradient( 0deg, rgba(0,111,79,0.1) , rgba(0,111,79,0.1) 1px, #fff 1px, #fff 16px);
}
/*---------------------------------------------------------
講師紹介
---------------------------------------------------------*/
#teacher{
padding: 8rem 0;
}
.tutor-Area{
margin: 6rem 0;
    background: #f3faf8;
    border: 1px solid #13a075;
    box-shadow: 10px 10px 0px -5px rgb(0 0 0 / 30%);
}
.tutor-Area h3{
background: #13a075;
    text-align: center;
    padding: 2rem 0;
    color: #ffff00;
    font-size: 3rem;
    font-weight: 700;
}
.tutor-group{
display: flex;
flex-wrap: wrap;
    padding: 4rem 4rem 0;
}
.tutor-box {
    width: 48%;
    margin: 1%;
}
.tutor-box p{font-size:1.5rem;line-height: 1.7;}
.tutor-pct-box{width:30% !important;}
.tutor-text-box{width:70% !important;}
.tutor-name,.tutor-course{font-weight:700;margin: .5rem 0 .5rem;}
.tutor-name{margin: 0 0 1rem;}

@media screen and (max-width: 1024px) {
/* 1024pxまでの幅の場合に適応される */

}
@media screen and (max-width: 768px) {
/* 768pxまでの幅の場合に適応される */
.tutor-group{
    padding: 0;
}
#teacher {
    padding: 6rem 0;
}
.tutor-Area {
    margin: 4rem 0;
}
}
@media screen and (max-width: 640px) {
#teacher {
    padding: 3rem 0;
}
.tutor-Area {
    margin: 2rem 0;
}
.tutor-Area h3 {
    padding: 1.5rem 0;
    font-size: 2rem;
}
.tutor-group {
    padding: 0;
}
.tutor-box {
    width: 100%;
    margin: 2% 1% 2%;
    border-bottom: 1px solid #ccc;
}
.tutor-font{font-size: 1.3rem;}
.tutor-name{margin: .5rem 0 .5rem;}
.tutor-box p{font-size:1.3rem;line-height: 1.7;}
}

/*---------------------------------------------------------
こんな不安を感じています・6つの理由
---------------------------------------------------------*/
#ibo-solution{
padding: 8rem 0 4rem;
}
#ibo-reason{
padding: 0 0 2rem;
}
#ibo-solution, #ibo-reason{
background: #ffffee;
}

#ibo-solution h2{
    color: #0287c1;
    text-align: center;
    font-size: 3rem;
    font-weight: 700;
    margin: 0 0 4rem;
}

/* 吹き出し */
.check-box{
    position:relative;
    background:#FFFFFF;
    border:5px solid #0287C1;
    border-radius:12px;
    -webkit-border-radius:12px;
    -moz-border-radius:12px;
}
.check-box:after,.check-box:before{
    border: solid transparent;
    content:'';
    height:0;
    width:0;
    pointer-events:none;
    position:absolute;
    top:100%;
    left:50%;
}
.check-box:after{
    border-color: rgba(255, 255, 255, 0);
    border-top-width:30px;
    border-bottom-width:30px;
    border-left-width:30px;
    border-right-width:30px;
    margin-left: -30px;
    border-top-color:#0287C1;
}
.check-box:before{
    border-color: rgba(2, 135, 193, 0);
    border-top-width:32px;
    border-bottom-width:32px;
    border-left-width:32px;
    border-right-width:32px;
    margin-left: -32px;
    margin-top: 2px;
    border-top-color:#0287C1;
}
.check-box-area{
    padding: 4rem 25rem 4rem 5rem;
}
.check-pct{
    position: absolute;
    bottom: 0;
    right: 0;
}
.check-box-area h3 span{
    font-family: din-condensed,sans-serif;
    font-size: 5rem;
    color: #999;
    background: linear-gradient(transparent 70%, #c0e1ef 0%);
}

.check-box-list li {
    position: relative;
    font-size: 2.25rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
    padding-bottom: 0% !important;
    padding-top: 0% !important;
    color: #0287c1;
    padding: 0.5rem 0.5rem 0.5rem 3.5rem;
}
.check-box-list li:before {
    position: absolute;
    content: "";
    background: 100% / 100% url(../img/top/icon-check-b.svg) no-repeat;
    width: 24px;
    height: 23px;
    top: 0.8rem;
    left: 0.5rem;
}
/* 解決 */
.solution-ans{
    margin: 5rem 0 0 0;
    text-align: center;
    color: #13a075;
}
.solution-ans span{
    font-size: 5rem;
    font-weight: 700;
    background: linear-gradient(transparent 70%, #ffff00 0%);
}
.solution-ans-big{
    font-size: 7rem !important;
}
.ttl-reason {
  border-radius: 2px;
  background-color: #13A075;
	border: solid 1px #fff;    	/* 内側の線になる一本線の枠線をひく*/
	outline: solid 5px #13A075;    /* 外側の線になる5pxの一本線の枠線をひく*/
	outline-offset: 1px;        /* 内側の線になる一本線の枠線をひく*/
	margin: 5px;            	/* outlineの値＋outline-offsetの値*/
	padding: 2rem 1rem;
    text-align: center;
}
.sub-ttl-reason{
    color: #fff;
    font-size: 2.5rem;
    font-weight: 700;
}
.ttl-reason h2{
    font-size: 4rem;
    color: #ffff00;
    font-weight: 700;
}
.reason-ttl-big{
    font-size: 7rem;
    font-weight: 700;
    color: #ffff00;
}
.reason-group{
    display: flex;
    flex-wrap: wrap;
    padding: 4rem 0;
    justify-content: space-evenly;
}
.reason-box{
position: relative;
    width: 44%;
    margin: 1%;
    background: #fff;
    padding: 0 2rem 2rem;
    border: 1px solid #13a075;
    box-shadow: 10px 10px 0px -5px rgb(19 160 117 / 50%);
}

.reason-box-Flg1 {/*三角形左上*/
  position: absolute;
    top: 0;
    left: 0;
    border-left: 80px solid #b8e2d6;
    border-bottom: 80px solid transparent;
}
.reason-number{
    font-family: din-condensed,sans-serif;
    font-size: 4rem;
    color: #999;
    position: relative;
    top: 0;
}
.reason-box h3{
color: #13a075;
    font-size: 2.75rem;
    line-height: 1.2;
    font-weight: 700;
    margin: 0 0 2rem;
}
@media screen and (max-width: 1104px) {
.reason-box {width: 43%;}
.reason-box h3 {font-size: 2.5rem;}
}
@media screen and (max-width: 1024px) {
/* 1024pxまでの幅の場合に適応される */
.check-box-area {
    padding: 2rem 25rem 4rem 3rem;
}
.reason-box {
    width: 42%;
}
.solution-ans span {
    font-size: 4rem;
}
.solution-ans-big {
    font-size: 6rem !important;
}
.reason-ttl-big {
    font-size: 6rem;
}
.ttl-reason h2 {
    font-size: 3.5rem;
}
.reason-box h3 {
    font-size: 2.25rem;
}

}
@media screen and (max-width: 768px) {
/* 768pxまでの幅の場合に適応される */
.check-box-area {
    padding: 2rem 3rem 4rem 3rem;
}
.check-pct {
    display: none;
}
#ibo-solution h2 {
    line-height: 1.5;
}
#ibo-solution {
    padding: 6rem 0 4rem;
}
.solution-ans {
    margin: 2rem 0 0 0;
}
.solution-ans span {
    font-size: 3rem;
}
.solution-ans-big {
    font-size: 5rem !important;
}
.reason-ttl-big {
    font-size: 5rem;
}
.ttl-reason h2 {
    font-size: 3rem;
}
.reason-box {
    width: 100%;
}
}
@media screen and (max-width: 640px) {
#ibo-solution {
    padding: 2rem 0 2rem;
}
#ibo-reason {
    padding: 0;
}
#ibo-solution h2 {
    margin: 0 0 2rem;
    font-size: 1.75rem;
}
.check-box-area {
    padding: 1rem 1rem 2rem 1rem;
}
.check-box-area h3 span {
    font-size: 3rem;
}
.check-box-list li {
    font-size: 1.6rem;
    margin-bottom: 0.25rem;
    padding: 0.5rem 0.5rem 0.5rem 3rem;
}
.check-box-list li:before {
    width: 18px;
    height: 19px;
    top: 0.5rem;
}
.solution-ans span {
    font-size: 2rem;
}
.solution-ans-big {
    font-size: 3rem !important;
}
.sub-ttl-reason {
    font-size: 1.6rem;
}
.ttl-reason h2 {
    font-size: 1.75rem;
}
.reason-ttl-big {
    font-size: 3rem;
}
.reason-group {
    padding: 2rem 0 0;
}
.reason-number {
    font-size: 3rem;
}
.reason-box h3 {
    font-size: 2rem;
    line-height: 1.4;
    margin: 0 0 2rem;
}
.reason-box {
    margin: 1% 0 5%;
}
.reason-box-Flg1 {
    border-left: 60px solid #b8e2d6;
    border-bottom: 60px solid transparent;
}
}

/*---------------------------------------------------------
IBOの特長
---------------------------------------------------------*/
#feature{
padding: 8rem 0 0;
}
.feature-group{
    display: flex;
    flex-wrap: wrap;
    padding: 5rem 0;
}
.feature-text-box{
    width: 60%;
    z-index: 20;
    position: relative;
    background: rgba(19,160,117,0.8);
}
.feature-pct-box{
    width: 40%;
    z-index: 10;
}
.feature-text-area{

    padding: 2rem;
}
.feature-text-area-right{
right: -70%;
}
.feature-text-area-left{
left: -70%;
}
.feature-text-area h3{
    color: #ffff00;
    text-align: center;
    font-size: 3rem;
    line-height: 1.4;
    font-weight: 700;
    margin: 0 0 2rem;
}
.feature-text-area p{
    color: #fff;
}
.feature-pct-box img{
    height: 100%;
    object-fit: cover;
}

@media screen and (max-width: 1104px) {
.feature-text-area h3 {font-size: 2.5rem;}

}
@media screen and (max-width: 1024px) {
/* 1024pxまでの幅の場合に適応される */
.feature-text-area h3 {
    font-size: 2.25rem;
}
}
@media screen and (max-width: 900px) {
/* 900pxまでの幅の場合に適応される */
.feature-group {
    padding: 2rem 0;
    flex-direction: column;
}
.feature-pct-box{
order: 1;
width: 100%;
}
.feature-text-box{
order: 2;
width: 100%;
}
.feature-text-area {
    position: inherit;
}
.feature-text-area-right {
    right: 0;
}
.feature-text-area-left {
    left: 0;
}
.feature-pct-box img{
display: block;
margin: 0 auto;
}
}
@media screen and (max-width: 640px) {
/* 640pxまでの幅の場合に適応される */
#feature{
padding: 3rem 0;
}
.feature-group {
    padding: 2rem 0 0;
    flex-direction: column;
}
.feature-text-area h3 {
    font-size: 2rem;
}
}
/*---------------------------------------------------------
科目紹介
---------------------------------------------------------*/
#course{
    padding: 3rem 0 0;
}
.course-c-txt{
    text-align: center;
    font-weight:700;
}

/* コース共通 */
.text-box2-culum {
    padding: 0 !important;
   }
.course-ttl,.course-ttl span{
color: #fff;
}
,.course-frame-myp,.course-frame-dp{
    padding: 0 !important;
}
.course-ttl{font-size:3.2rem;}
.course-ttl span{font-size:2.8rem;}
.course-subttl{font-size:2.25rem;}
.course-ttl-pyp, .course-ttl-myp, .course-ttl-dp{font-size:2.8rem;line-height: 1.5;margin: 0 0 2rem;}
.list-theme-pyp,.list-theme-myp,.list-theme-dp{
font-size:1.8rem;
padding: 2rem 0 0 2rem;
list-style: disc;
margin: 0;
}
.list-theme-pyp li,.list-theme-myp li,.list-theme-dp li{padding:0;}
.course-box-pyp,.course-box-myp,.course-box-dp{
display: flex;
align-items: stretch;
font-size:2.8rem;
color: #fff;
}
.course-list-pyp li,.course-list-myp li,.course-list-dp li{font-size:1.8rem; padding:0;}
.course-list-pyp,.course-list-myp,.course-list-dp {
  list-style: none;
  margin: 0;
  padding: 0;
  color: #000;
}
.course-list-pyp li,.course-list-myp li,.course-list-dp li {
  text-indent: -1em;
  padding-left: 1em;
}
.course-list-pyp li:before,.course-list-myp li:before,.course-list-dp li:before {
  content: ""; /* 空の要素作成 */
  width: 8px; /* 幅指定 */
  height: 8px; /* 高さ指定 */
  display: inline-block; /* インラインブロックにする */
  border-radius: 50%; /* 要素を丸くする */
  position: relative;
  top: -1px;
  margin-right: 5px;
}
.course-ttl,.course-subttl{padding:1rem;}
.course-Area{padding:2rem;background: #fff;}

/* pypコース */
.course-frame-pyp{border: 1px solid #f48003;    background: #fff;}
.bg-pyp{background: #f48003;}
.bg-pyp-sub{background: #fdecd9;}
.course-ttl-pyp{color: #f48003;}
.list-theme-pyp{color: #f48003;}
.course-list-pyp li:before {
  background-color: #f48003; /* 背景色指定 */
}

/* mypコース */
.course-frame-myp{border: 1px solid #d12e22; background: #fff;}
.bg-myp{background: #d12e22;}
.bg-myp-sub{background: #ffdfd9;}
.course-ttl-myp{color: #d12e22;}
.list-theme-myp{color: #ff2d00;}
.course-list-myp li:before {
  background-color: #d12e22; /* 背景色指定 */
}

/* dpコース */
.course-frame-dp{border: 1px solid #008fd2;}
.bg-dp{background: #008fd2;}
.bg-dp-sub{background: #d9eef8;}
.course-ttl-dp{color: #008fd2;}
.list-theme-dp{color: #d9eef8;}
.course-list-dp li:before {
  background-color: #008fd2; /* 背景色指定 */
}
.dp-group{
display: flex;
flex-wrap: wrap;
}
.dp-group-box{
width: 48%;
margin: 1%;
}
.dp-group-ttl{
color: #fff;
text-align: center;
padding: 0.25rem;
}
.dp-group-mainttl{
text-align: center;
font-size: 1.75rem;
font-weight: 700;
margin: 0 0 1rem;
color: #008fd2;
 line-height: 1.3;
}

.dp-group-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
flex-wrap: wrap;
}
.dp-group-list li {
  text-indent: -1em;
  padding-left: 1em;
  font-size:1.3rem;
  margin-right: 1rem;
}
.dp-group-list li:before {
  content: ""; /* 空の要素作成 */
  width: 8px; /* 幅指定 */
  height: 8px; /* 高さ指定 */
  display: inline-block; /* インラインブロックにする */
  background-color: #008fd2; /* 背景色指定 */
  border-radius: 50%; /* 要素を丸くする */
  position: relative;
  top: -1px;
  margin-right: 5px;
}
.dp-group-3box{
    width: 29%;
    margin: 1%;
}
.dp-core-ttl{
color: #008fd2;
    font-size: 2.25rem;
    text-align: center;
    border: 2px solid #008fd2;
    padding: 0.75rem;
    margin: 4rem 0 1rem;
    letter-spacing: 1rem;
    font-weight: 700;
}
.ib-awarded{
border: 3px dotted #008fd2;
margin: 1%;
padding: 1% !important;
}
.ib-awarded-ttl{
width: 32%;
color: #fff;
padding: 1rem;
display: flex;
    align-items: center;
        justify-content: center;
}
.ib-awarded-txtbox{
padding: 0 0 0 1rem !important;
}
.fc-dp{color: #008fd2;}
   
@media screen and (max-width: 1180px) {
/* 1180pxまでの幅の場合に適応される */
.course-ttl {
    font-size: 2rem;
}
.course-ttl span {
    font-size: 1.5rem;
}
.course-subttl {
    font-size: 1.75rem;
}
.course-ttl-pyp, .course-ttl-myp, .course-ttl-dp {
    font-size: 1.75rem;
}
.course-box-pyp, .course-box-myp, .course-box-dp {
    flex-direction: column;
}
.course-list-pyp li, .course-list-myp li, .course-list-dp li {
    font-size: 1.4rem;
}
}
@media screen and (max-width: 640px) {
#course{
padding: 3rem 0 0;
}
.course-ttl-pyp, .course-ttl-myp, .course-ttl-dp {
    font-size: 2rem;
}
.course-Area{padding:1rem;}
.course-c-txt{
    text-align: left;
}
.list-theme-pyp, .list-theme-myp, .list-theme-dp {
    padding: 2rem 0 0 1rem;
}
.course-list-pyp li, .course-list-myp li, .course-list-dp li {
    font-size: 1.4rem;
}
.course-frame-myp{margin-top: 2rem;}
.dp-group-box {width: 98%;}
.dp-group-mainttl { font-size: 1.5rem;}
.dp-core-ttl {
    font-size: 2rem;
    margin: 2rem 0 1rem;
}
.dp-group-3box {width: 98%;}
.ib-awarded-ttl {
    width: 98%;
    text-align: center;
}
.ib-awarded-txtbox { padding: 1rem !important;}

}

/*---------------------------------------------------------
国際バカロレアについて
---------------------------------------------------------*/
#about_ib{
padding:0 0 1rem;
}
.about_ib-ttl{
background:#008fd2 url(../img/top/about_ib-bg.webp) no-repeat center right;
background-size:contain;
height: 20vh;
display: flex;
align-items: center;
justify-content: center;
margin: 0 0 5rem;
}
.about_ib-ttl h2{
    color: #fff;
    font-size: 3rem;
}

#about_ib h3{
background: #cdeaf6;
border-left: 10px solid #034380;
padding: 1rem;
font-size: 2rem;
color: #034380;
font-weight: 700;
margin: 2rem 0 1rem;
}

/* 国際バカロレアの学習者像 */
.ib-10peple{
display: flex;
flex-wrap: wrap;
}
.ib-10peple li{
    background: #1396cb;
    color: #fff;
    font-size: 1.4rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1%;
    text-align: center;
}

/* 国際バカロレアの教科横断型スキル */
.ib-skill-box th, .ib-skill-box td{
font-size:1.1rem;
padding: 0.2rem;
}
.ib-skill-box th{
text-align: center;
color: #105a80;
font-weight: 600;
}
.ib-skill-box tr{border-top: 1px solid #105a80;}
.ib-skill-box tr:last-child{border-bottom: 1px solid #105a80;}
.slill-thinking{background: #a2e4f3;}
.slill-communication{background: #fdc7b3;}
.slill-sociality{background: #c2e6b1;}
.slill-self-management{background: #b0e1df;}
.slill-research{background: #eecadc;}

@media screen and (max-width: 640px) {
.ib-10peple li { width: 48%;}
.about_ib-ttl{
height: 15vh;
margin: 0 0 2.5rem;
}
.about_ib-ttl h2 {
    font-size: 2.5rem;
}
}

/*---------------------------------------------------------
よくある質問
---------------------------------------------------------*/
#faq{
padding:6rem 0;
background: #ededed;
}
.faq-area{
background: #fff;
padding: 2rem;
border: 1px solid #13a075;
box-shadow: 8px 9px 10px -12px rgb(0 0 0 / 60%);
margin: 4rem 0;
}
.cp_actab-FAQ {
	position: relative;
	overflow: hidden;
	width: 100%;
	margin: 0 auto;
	color: #fff;
	padding:3px 0;
}
.cp_actab-FAQ input {
	position: absolute;
	z-index: -1;
	opacity: 0;
}
.cp_actab-FAQ label {
	font-weight: bold;
	line-height: 3;
	position: relative;
	display: block;
	padding: 0 2em 0 0;
	cursor: pointer;
	margin: 0 0 0px 0;
	background:#13a075;
	border:1px solid #13a075;
}
.cp_actab-FAQ .cp_actab-content-FAQ {
	overflow: hidden;
	max-height: 0;
	-webkit-transition: max-height 0.35s;
	transition: max-height 0.35s;
	color: #333333;
	background:#fff;
}
.cp_actab-FAQ .cp_actab-content-FAQ p {
	margin: 1em;
}
/* :checked */
.cp_actab-FAQ input:checked ~ .cp_actab-content-FAQ {
	max-height: 1000em;
	background:#fff;
    position: relative;
}
/* Icon */
.cp_actab-FAQ label::after {
	line-height: 3;
	position: absolute;
	top: 0;
	right: 0;
	display: block;
	width: 3em;
	height: 3em;
	-webkit-transition: all 0.35s;
	transition: all 0.35s;
	text-align: center;
	font-size: 2rem;
}
.cp_actab-FAQ input[type=checkbox] + label::after {
	content: '+';
}
.cp_actab-FAQ input[type=checkbox]:checked + label::after {
	transform: rotate(315deg);
}

.qus, .ans{
    width: 100%;
	max-width:50px;
    text-align: center;
	color:#fff;
    font-size: 2rem;
    font-weight: 700;
    margin-right: 0.5rem;
    font-family: 'Poppins';
}
.qus{
    background: #006f4f;
    display: inline-block;
    font-family: 'Poppins';
}
.ans{
    background: #fff;
    color: #13a075;
}
.ans-ttl{
color: #13a075;
display: block;
font-weight: 700;
}

.ansBox, .qusBox{
    display: -webkit-flex;
    display: flex;
}

.ansBox li, .qusBox li{
padding:1.5rem;
}

.qus-txt{
font-weight: 700;
line-height: 1.7;
}

@media screen and (max-width: 640px) {
/* 640pxまでの幅の場合に適応される */
#faq {
    padding: 3rem 0 1rem;
}
.faq-area {
    margin: 2rem 0;
}
.qus, .ans {
    max-width: 20px;
    padding: 1rem !important;
}
.qusBox li {
    padding: 0rem;
    font-size:1.35rem;
}

.qus-txt {
    line-height: 1.6;
    padding: 0.5rem 2.5rem 1rem .5rem !important;
}
.ansBox li{
    padding: 1rem;
}
.cp_actab-FAQ label::after {
width: 2em;
height: 1em;
font-size: 1.5rem;
}
.cp_actab-FAQ input:checked ~ .cp_actab-content-FAQ {
    display: flex;
    align-items: center;
}
}


/*---------------------------------------------------------
お問い合わせ
---------------------------------------------------------*/
#main-cv{
    padding: 8rem 0;
}
.main-cv-box{
    border: 3px solid #13a075;
    padding: 4rem 6rem;
    border-radius: 8px;
}
.main-cv-box h2,.main-cv-box-ttl{
    font-size: 3rem;
    text-align: center;
    font-weight: 700;
    line-height: 1.2;
    color: #13a075;
}
.main-cv-box h2{margin: 0 0 3rem;}
.main-cv-box-ttl{margin: 3rem 0 0;}
.main-cv-box h3{
    font-size: 2.5rem;
    text-align: center;
    font-weight: 700;
}


@media screen and (max-width: 640px) {
/* 640pxまでの幅の場合に適応される */
#main-cv{
    padding: 3rem 0;
}

.main-cv-box{
    padding: 2rem 1rem;
}

.main-cv-box h2,.main-cv-box-ttl{
    font-size: 2rem;
    margin: 1rem 0;
}
}

/*---------------------------------------------------------
mini-sp対策
---------------------------------------------------------*/
@media screen and (max-width: 360px) {
/* 360pxまでの幅の場合に適応される */
.intro-box {
    height: auto;
}
#feature {
    padding: 3rem 0 1rem;
}
check-box-list li {
    padding: 0.5rem 0.5rem 0.5rem 3.5rem;
}
.check-box:before {
    border-top-width: 16px;
    border-bottom-width: 16px;
    border-left-width: 16px;
    border-right-width: 16px;
    margin-left: -16px;
    margin-top: 2px;
}
.list-theme-pyp, .list-theme-myp, .list-theme-dp {
    padding: 2rem 0 0 2rem;
}
.cp_actab-FAQ input:checked ~ .cp_actab-content-FAQ {
    max-height: 10000em;
}
.cp_actab-FAQ label::after {
    width: 2em;
}
}

/*---------------------------------------------------------
夏期講習用2022講師紹介
---------------------------------------------------------*/
#intro-summer{
    padding: 8rem 0;
    background: url(../img/summer2022/sv-bg-summer-pc.webp) no-repeat center center, -moz-linear-gradient(left, #fff 0%, #d1f5fb 100%);
  background:url(../img/summer2022/sv-bg-summer-pc.webp) no-repeat center center, -webkit-linear-gradient(left, #fff 0%, #d1f5fb 100%); 
}
.intro-summer-box{position: relative;height: 400px;}
.intro-summer-box img {
    width: 90%;
    max-width: 450px;
}
.sv-txtbox-summer {
    color: #13a075;
    font-weight: 700;
    position: absolute;
    right: 0;
}
.intro-summer-ttl{
    font-size: 2.25rem;
    text-align: center;
    font-weight: 700;
    margin: 5rem 0 2rem;
}

/* 講師紹介 */
.swiper {
    position: relative;
}

#tearcher-premier h3,#tearcher-standard h3{
    text-align: center;
    font-size: 2.5rem;
    padding: 1rem;
    color: #fff;
    margin: 3rem 0 2rem;
    font-weight: 700;
    font-family: Noto Serif JP, serif;
}
#tearcher-premier h3{
    background: #89741a;
}
#tearcher-standard h3{
    background: #a0133e;
}
.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までの幅の場合に適応される */
.intro-summer-box img {
    left: -5rem;
}
}
@media screen and (max-width: 900px) {
/* 900pxまでの幅の場合に適応される */
#intro-summer {
    padding: 6rem 0;
} 
.intro-summer-box {
    height: 440px;
}
.intro-teacher-box {
    width: 65%;
}
.intro-summer-box img {
    left: -2rem;
}
}
@media screen and (min-width:641px) and ( max-width:820px) {
/*　画面サイズが768pxから820pxまではここを読み込む　*/
.intro-summer-box img {
    left: -7rem;
}
.intro-teacher-box {
    width: 70%;
}
}
@media screen and (max-width: 640px) {
/* 640pxまでの幅の場合に適応される */
#intro-summer{
    padding: 3rem 0;
}
#tearcher-premier h3,#tearcher-standard h3{
    font-size: 2rem;
}
.intro-teacher-name,.intro-course,.intro-from{font-size: 1.4rem;}
.intro-summer-box {
    padding: 1rem 0;
    height: 550px;
}
.sv-txtbox-summer{
    position: relative;
    text-align: center;
}
.sv-txtbox-summer img{
    width: 100%;
    display: block;
    margin: auto;
}
.intro-summer-ttl{
    font-size: 2rem;
    margin: 1rem 0 1rem;
    line-height: 1.4;
}
.intro-teacher-box {
    position: relative;
    right: 0;
    width: 95%;
    bottom: 10%;
    background: rgba(255,255,255,0.9);
    padding: 1rem;
}
}

@media screen and (min-width:360px) and ( max-width:639px) {
/*　画面サイズが420pxから820pxまではここを読み込む　*/
.intro-summer-box{height: 540px;}
.intro-summer-ttl {
    margin: 7rem 0 1rem;
}
}
@media screen and (max-width: 360px) {
/* 360pxまでの幅の場合に適応される */
.intro-summer-box {
    height: 370px;
}
}
@media screen and (max-width: 280px) {
/* 280pxまでの幅の場合に適応される */
.intro-summer-box {
    height: 410px;
}
}
/* 前ページ、次ページボタン共通のスタイル */
.swiper-button-prev,
.swiper-button-next {
	background-image: none !important; /* デフォルトのボタン画像を消す */
	width: 28px !important; /* ボタンの幅 */
	height: 25px !important; /* ボタンの高さ */
	margin-top: -10px !important; /* 縦中央配置用：ボタンの高さの半分のネガティブマージン（top:50%がすでに設定されている） */
}
/* 前ページボタンのスタイル */
.swiper-button-prev:before {
	font-family: "Font Awesome 5 Pro";
	content: "\f137"; /* angle-double-leftのUnicode */
	font-size: 2rem;
	color: #13a075;
}
/* 次ページボタンのスタイル */
.swiper-button-next:before {
	font-family: "Font Awesome 5 Pro";
	content: "\f138"; /* angle-double-rightのUnicode */
	font-size: 2rem;
	color: #13a075;
}
.swiper-button-prev{left: -20px !important;}
.swiper-button-next{right: -25px !important;}

@media screen and (max-width: 1024px) {
/* 1024pxまでの幅の場合に適応される */
.swiper-button-prev{left: 10px !important;}
.swiper-button-next{right: 5px !important;}
.swiper-button-prev:before {color: #fff !important;}
}
@media screen and (max-width: 820px) {
/* 820pxまでの幅の場合に適応される */
}
@media screen and (max-width: 640px) {
/* 640pxまでの幅の場合に適応される */
}
@media screen and (max-width: 360px) {
/* 360pxまでの幅の場合に適応される */
}

/*---------------------------------------------------------
夏期講習用2022カリキュラム
---------------------------------------------------------*/
#summer-curriculum{
padding: 8rem 0;
    background: #008fd2;
}
.summer-curriculum-ttl-box{
    text-align: center;
    width: 90%;
    margin: 0 auto;
    max-width: 550px;
    padding: 0 0 3rem;
    position: relative;
}

.summer-curriculum-ttl-box:before{
content: "";
display: inline-block;
    background: url(../img/summer2022/summer-curriculum-ttl-box-left.png);
    background-size: cover;
    width: 100px;
    height: 109px;
    position: absolute;
    left: 0;
    top:20%;
}
.summer-curriculum-ttl-box:after{
content: "";
display: inline-block;
    background: url(../img/summer2022/summer-curriculum-ttl-box-right.png);
    background-size: cover;
    width: 100px;
    height: 109px;
    position: absolute;
    right: 0;
    top:20%;
}
.summer-c-catch{
    font-family: din-condensed,sans-serif;
    color: #fff;
    font-size: 3rem;
}
.summer-c-mainttl{
    color: #ffff00;
    font-size: 4rem;
    font-weight: 700;
}
.summer-c-subttl{
color: #ffff00;
    font-family: din-condensed,sans-serif;
    font-size: 2.5rem;
    font-weight: 500;
}
.summer-c-subttl span{
    font-size: 4rem;
}
.summer-c-introttl{
    margin: 3rem 0;
    text-align: center;
    color: #ffff00;
    font-size: 2.5rem;
    font-weight: 700;
}
.summer-c-introttl span{
   font-size: 4rem;
}
.summer-c-contact-txt {
    margin: 4rem 0 3rem;
    text-align: center;
    color: #fff;
    font-size: 3.25rem;
    font-weight: 700;
}
@media screen and (max-width: 1024px) {
/* 1024pxまでの幅の場合に適応される */
}
@media screen and (max-width: 820px) {
/* 820pxまでの幅の場合に適応される */
#summer-curriculum {
    padding: 6rem 0;
}
.summer-c-contact-txt {font-size: 2.4rem;}
}
@media screen and (min-width:641px) and ( max-width:820px) {
/*　画面サイズが768pxから820pxまではここを読み込む　*/
}
@media screen and (max-width: 640px) {
/* 640pxまでの幅の場合に適応される */
#summer-curriculum{
padding: 3rem 0;
}
.summer-c-catch {font-size: 2rem;}
.summer-c-mainttl {font-size: 3rem;}
.summer-curriculum-ttl-box {padding: 0 0 1rem;}
.summer-c-introttl {
    margin: 1rem 0 2rem;
    font-size: 2rem;
}
.summer-c-introttl span {
    font-size: 3rem;
    line-height: 1.3;
}
.summer-c-contact-txt {
margin: 0rem 0 1rem;
font-size: 1.75rem;
}
.summer-curriculum-ttl-box{
    width: 95%;
}
.summer-curriculum-ttl-box:before{
content: "";
display: inline-block;
    background: url(../img/summer2022/summer-curriculum-ttl-box-left-sp.png);
    background-size: cover;
    width: 47px;
    height: 100px;
    left: 0;
    top:10%;
}
.summer-curriculum-ttl-box:after{
content: "";
display: inline-block;
    background: url(../img/summer2022/summer-curriculum-ttl-box-right-sp.png);
    background-size: cover;
    width: 47px;
    height: 100px;
    position: absolute;
    right: 0;
    top:10%;
}
}
@media screen and (max-width: 360px) {
/* 360pxまでの幅の場合に適応される */
.summer-curriculum-ttl-box:before,.summer-curriculum-ttl-box:after{
    width: 38px;
    height: 80px;
}
}

/* 夏期講習カリキュラム表 */
.tbl-w15{width:15%;}
.tbl-w20{width:20%;}
.tbl-w25{width:25%;}
.tbl-w40{width:40%;}

.tbl-summer-intro{
  margin: 2rem auto;
}
.tbl-summer-intro th {
  background: #666666;
  border: solid 1px #008fd2;
  color: #fff;
  padding: 1rem;
}
.tbl-summer-intro td {
 background: #fff;
  padding: 1rem;
  border: solid 1px #008fd2;
}
  .tbl-name-course{
    color: #008fd2;
    font-weight: 700;
    }
    .tbl-name-purpose{
  list-style: none;
  margin: 0;
  padding: 0;
  color: #000;
    }
.tbl-name-purpose li{
text-indent: -1em;
    padding-left: 1em;
    color:#13a075;
    font-weight: 700;
}
.tbl-name-purpose li:before {
    content: "";
    width: 10px;
    height: 10px;
    display: inline-block;
    border-radius: 50%;
    position: relative;
    top: -1px;
    margin-right: 5px;
        background-color: #13a075;
}

@media screen and (max-width: 820px) {
/* 820pxまでの幅の場合に適応される */
}
@media screen and (max-width: 640px) {
.tbl-summer-intro {
    width: 100%;
    margin: 0 auto;
  } 
.tbl-summer-intro .thead {
    display: none;
  }
.tbl-summer-intro tr,
.tbl-summer-intro td{
    display: block;
    position: relative;
  }

.tbl-summer-intro tr {
    margin-bottom: 2rem;
  }
.tbl-name-course {font-size: 2rem;}
}