@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Khand:wght@500&family=Noto+Sans+JP:wght@400;500;700&display=swap');


/*---------------------------------------------------------------------------------------
	Overall settings
----------------------------------------------------------------------------------------*/

body{
	font-family: 'Noto Sans JP', sans-serif;
	color: #141414;
	letter-spacing: .05em;
	text-align: center;
	min-width: 1200px;
}
body.ovh{ position: fixed; left: 0; top: 0; width: 100%; height: 100vh;}
#wrapper{ overflow: hidden;}
a{ color: #141414; text-decoration:none; -webkit-transition: all .2s; transition: all .2s;}
a:hover{ opacity: .7; text-decoration:none;}
.underline{ text-decoration: underline;}
/* font */
.gothic{ font-family: 'Noto Sans JP', sans-serif;}
.mincho{ font-family: 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;}
.khand{ font-family: 'Khand', sans-serif; font-weight: 500!important;}
.regular{ font-weight: 400!important;}
.medium{ font-weight: 500!important;}
.bold{ font-weight: 700!important;}
.f24{ font-size: 2.4rem; line-height: 1.4;}
.f26{ font-size: 2.6rem; line-height: 1.4;}
.ttl1{ font-size: 4.8rem; line-height: 1.4; font-weight: bold;}
.trim figure{
	position: relative;
	z-index: 0;
	padding-bottom: 75%;
	height: 0;
	overflow: hidden;
}
.trim figure img{
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	width: 100%;
	/*height: 100%;*/
	object-fit: cover;
}
/* bg */
.bg-white{ background: #fff;}
/* color */
.white{ color: #fff;}
.red{ color: #E65656;}
.blue{ color: #0F3286;}
.gray{ color: #848484;}

/*------------------------------ responsive ------------------------------*/
@media screen and (max-width: 768px) {
	body{ min-width: inherit;}
	a:hover{ opacity: 1;}
	.ttl1{ font-size: 2.8rem;}
}

.blog-jp-bnr,
.blog-jp-bnr,
.blog-award-bnr{
    margin: 50px 0 0 0;
}
.blog-typing-bnr{
    margin: 50px 0 0 0;
}
.online-bnr{
	width: 85%;
	margin: 70px auto 0;
	position: relative;
	z-index: 100;
}

/*------------------------------ responsive ------------------------------*/
@media screen and (max-width: 768px) {
	.online-bnr{
	width: 90%;
	margin: 70px auto 0;
	position: relative;
	z-index: 1;
}
}




/*---------------------------------------------------------------------------------------
	header
----------------------------------------------------------------------------------------*/

header{ position: fixed; left: 0; top: 0; width: 100%; z-index: 100; background-color: rgba(255,255,255,0.7); box-shadow: 0 0px 5px 0 rgba(0, 0, 0, .5);}
.header.change-color {
  background-color: #fff;
  transition: 0.3s;
}
header .logo{ padding: 10px 0 0 2.4%; margin-right: 20px; text-align: left; position: relative; z-index: 99999; margin-bottom: 15px;}
header .logo img{ width: 25%}
header .menu{ position: absolute; right: 2.4%; top: 20px; width: 98px; line-height: 98px; color: #fff; font-weight: bold; letter-spacing: .1em; background: #0F3286; border-radius: 50%; cursor: pointer; z-index: 99999;}
header nav{ display: none; position: absolute; left: 0; top: 0; width: 100%; height: 100vh; padding: 150px 45px 50px; text-align: center; background: #fff; z-index: 9999; overflow-y: auto;}
header.open nav:before{ display: block; content: ""; position: fixed; left: 0; top: 0; width: 100%; height: 150px; background: rgba(255,255,255,.8); z-index: 9999;}
header nav a{ color: #0F3286;}
header nav .gnav1{ margin-bottom: 20px;}
header nav .gnav1 li{ display: inline-block; vertical-align: top; margin: 0 1em;}
header nav .gnav1 li a{ display: inline-block; font-size: 1.6rem; font-weight: bold; letter-spacing: .1em;}
header nav .gnav1 li img{ margin-bottom: .5em;}
header nav .gnav2{ max-width: 600px; margin: 0 auto 20px; text-align: left;}
header nav .gnav2 dl{ padding-left: 25px; border-bottom: 3px dotted #E0E0E0; position: relative;}
header nav .gnav2 dl:before{ display: inline-block; content: ""; position: absolute; left: 3px; top: 2em; width: 8px; height: 8px; background: #81C1F8;}
header nav .gnav2 dl dt{ padding: .8em 0; color: #0F3286; font-size: 2rem; font-weight: bold; position: relative; cursor: pointer;}
header nav .gnav2 dl dt:before{ display: inline-block; content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 20px; height: 4px; background: #81C1F8;}
header nav .gnav2 dl dt:after{ display: inline-block; content: ""; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 4px; height: 20px; background: #E65656; opacity: 1; -webkit-transition: all .2s; transition: all .2s;}
header nav .gnav2 dl dt.open:after{ opacity: 0;}
header nav .gnav2 dl dd{ display: none; margin-bottom: .5em; overflow: hidden;}
header nav .gnav2 dl dd a{ display: block; margin-bottom: 1em;}
header nav .gnav3{ max-width: 600px; margin: 0 auto 30px; padding: 10px 0; font-weight: bold; text-align: left; line-height: 2.2; background: url(../img/gnav3-img.svg) right top no-repeat;}

/*------------------------------ responsive ------------------------------*/
@media screen and (max-width: 768px) {
	header .logo{ padding: 10px 0 0 2.2%; margin-right: 0;}
	header .logo img{ width: 70%; max-width: 242px;}
	header .menu{ top: 10px; width: 76px; line-height: 76px; font-size: 1rem;}
	header nav{ height: 100vh; padding: 100px 30px 140px;}
	header.open nav:before{ height: 100px;}
	header nav .gnav1 li{ margin: 0 .2em;}
}






/*---------------------------------------------------------------------------------------
	section
----------------------------------------------------------------------------------------*/

.wrap{ clear: both; box-sizing: content-box; max-width: 1000px; margin-left: auto; margin-right: auto; padding-left: 5%; padding-right: 5%;}
.maxw720{ max-width: 720px;}
.maxw833{ max-width: 833px;}
/* btn */
.btn1{ display: inline-block; min-width: 300px; padding: 26px 65px 25px 10px; line-height: 1.4; color: #fff; font-size: 1.8rem; font-weight: bold; text-align: center; background: url(../img/ic-btn.svg) right 15px center no-repeat #72BBFA; box-shadow: 3px 4px 0px 3px #328ABE; border-radius: 8px;}
.btn1.line2{ padding: 12px 65px 12px 10px;}
.btn2{ display: inline-block; min-width: 340px; padding: .9em 65px .9em 10px; line-height: 1.4; color: #fff; font-size: 2rem; font-weight: bold; text-align: center; background: url(../img/ic-btn.svg) right 15px center no-repeat #E65656; box-shadow: 3px 4px 0px 3px #BC4E4E; border-radius: 8px;}
.btn3{ display: inline-block; min-width: 220px; padding: 0 65px 0 10px; line-height: 75px; color: #0F3286; font-size: 1.8rem; font-weight: bold; text-align: center; background: url(../img/ic-btn3.svg) right 15px center no-repeat #fff; box-shadow: 3px 4px 0px 3px #D5D0D0; border-radius: 8px;}
.btn4{ display: inline-block; min-width: 220px; padding: 10px 65px 10px 10px; line-height: 1.3; color: #0F3286; font-size: 1.5rem; font-weight: bold; text-align: center; background: url(../img/ic-btn3.svg) right 15px center no-repeat #fff; box-shadow: 3px 4px 0px 3px #D5D0D0; border-radius: 8px;}
.btn5{ display: inline-block; min-width: 220px; padding: 10px 65px 10px 10px; line-height: 1.3; color: #0F3286; font-size: 1.5rem; font-weight: bold; text-align: center; background: url(../img/ic-btn3.svg) right 15px center no-repeat #fff; box-shadow: 3px 4px 0px 3px #D5D0D0; border-radius: 8px;}
    /* aside */
    .anav1{ position: fixed; left: 0; bottom: 0; width: 100%; height: auto; padding-top: 24px; padding-bottom: 18px; background: #0F3286; z-index: 999; box-shadow: 5px 0px 6px 0 rgba(0, 0, 0, .4);}
    .anav1 div{ display: flex; justify-content: center; flex-direction: row-reverse;}
    .anav1 a{ display: flex; justify-content: center; align-items: center; color: #fff; font-size: 2.8rem; font-weight: bold; white-space: nowrap; line-height: 1.15; width: 400px; padding: 15px; border-radius: 14px;}
    .anav1 a:first-child{ background: #e65656;}
    .anav1 a:last-child{ background: #4e9de0;}
    .anav1 a img{ vertical-align: middle; margin-right: .3em; width: 48px;}
    .anav1 a span{ display: inline-block; text-align: left;}
    .anav1 a:not(:first-child){ margin-right: 1.5em;}

/*------------------------------ responsive ------------------------------*/
@media screen and (max-width: 1400px) {
	.anav1{ position: fixed; left: 0; bottom: 0; width: 100%; height: auto; padding-top: 12px; padding-bottom: 12px; background: #0F3286; z-index: 999; box-shadow: 5px 0px 6px 0 rgba(0, 0, 0, .4);}/**/
    .anav1 div{ display: flex; justify-content: center; flex-direction: row-reverse;}
    .anav1 a{ display: flex; justify-content: center; align-items: center; color: #fff; font-size: 2.0rem; font-weight: bold; white-space: nowrap; line-height: 1.15; width: 400px; padding: 8px; border-radius: 10px;}
    .anav1 a:first-child{ background: #e65656;}
    .anav1 a:last-child{ background: #4e9de0;}
    .anav1 a img{ vertical-align: middle; margin-right: .3em; width: 28px;}
    .anav1 a span{ display: inline-block; text-align: left;}
    .anav1 a:not(:first-child){ margin-right: 1.5em;}
}

/*------------------------------ responsive ------------------------------*/
@media screen and (max-width: 768px) {
	.wrap{ padding-left: 8%; padding-right: 8%;}
	/* btn */
	.btn1{ min-width: inherit; width: 100%; max-width: 260px; font-size: 1.6rem;}
	.btn2{ min-width: inherit; width: 100%; max-width: 260px; padding: .7em 65px .7em 10px; font-size: 1.6rem;}
	.btn3{ min-width: inherit; width: 100%; max-width: 220px; line-height: 64px; font-size: 1.6rem;}
	.btn4{ min-width: inherit; width: 100%; max-width: 260px; font-size: 1.6rem;}
    
    /* aside */
    .anav1{ position: fixed; left: 0; bottom: 0; width: 100%; height: 80px; padding-top: 18px; background: #e65656/*#0F3286*/; z-index: 999;}
    .anav1 div{ display: flex; justify-content: center; flex-direction: row-reverse;}
    .anav1 a{ display: flex; justify-content: flex-start; align-items: center; color: #fff; font-size: 1.3rem; font-weight: bold; white-space: nowrap; line-height: 1.15; width: auto; padding: 0px; border-radius: 0px;}
    .anav1 a:first-child{ background: none;}
    .anav1 a:last-child{ background: none;}
    .anav1 a img{ vertical-align: middle; margin-right: .3em; width: 44px;}
    .anav1 a span{ display: inline-block; text-align: left;}
    .anav1 a:not(:first-child){ margin-right: 1.5em;}
}
@media screen and (max-width: 340px) {
	/* aside */
	.anav1 a:not(:first-child){ margin-right: .5em;}
}






/*---------------------------------------------------------------------------------------
	footer
----------------------------------------------------------------------------------------*/

footer{ clear: both; padding-bottom: 150px;}
footer .fnav1{ padding: 50px 0 30px; background: #0F3286;}
footer .fnav1 a{ color: #fff;}
footer .fnav1 .wrap{ display: flex; justify-content: space-between;}
footer .fnav1 .leftcol{ width: 435px; text-align: left;}
footer .fnav1 .leftcol dt{ margin-bottom: 20px;}
footer .fnav1 .leftcol dt{ margin-bottom: 20px;}

footer .fnav1 .leftcol dd{ display: flex; justify-content: space-between;}
footer .fnav1 .leftcol dd a{ display: inline-block; margin: 0 0 15px; font-size: 2.8rem;}
footer .fnav1 .leftcol dd a span{ display: inline-block; vertical-align: middle; width: calc(3.2em + 2px); line-height: 3.2; font-size: 1.2rem; text-align: center; margin-right: .5em; border: 1px solid #fff; border-radius: 50%;}
footer .fnav1 .leftcol p.btn a{ display: inline-block; padding: 0 1.5em; line-height: 65px; font-size: 1.6rem; font-weight: bold; background: #81C1F8; box-shadow: 3px 3px 0px 2px #328ABE; border-radius: 8px;}
footer .fnav1 .leftcol p.btn a:before{ display: inline-block; content: ""; width: 24px; height: 24px; margin: 0 .5em .2em 0; vertical-align: middle; background: url("../img/ic-mail.svg") center no-repeat;}
footer .fnav1 .rightcol{ text-align: left;}
footer .fnav1 .rightcol dl{ display: inline-block; vertical-align: top; margin: 0 0 50px 20px;}
footer .fnav1 .rightcol dl dt{ font-weight: bold; padding-left: 15px; margin-bottom: .5em; position: relative;}
footer .fnav1 .rightcol dl dt:before{ display: inline-block; content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; background: #81C1F8;}
footer .fnav1 .rightcol dl dd{ padding-left: 15px; margin-bottom: .5em;}
footer .fnav1 .rightcol ul{ clear: both; text-align: right;}
footer .fnav1 .rightcol ul li{ display: inline-block; vertical-align: top; margin-left: 25px;}
footer .fnav2{ max-width: 940px;}
footer .fnav2 dt{ display: inline-block; color: #0F3286; font-size: 1.8rem; font-weight: bold; padding: 40px 0 30px; position: relative;}
footer .fnav2 dt:before{ display: inline-block; content: ""; position: absolute; right: calc(100% + 40px); top: 15px; width: 112px; height: 70px; background: url("../img/fnav2-img1.svg") no-repeat;}
footer .fnav2 dt:after{ display: inline-block; content: ""; position: absolute; left: calc(100% + 30px); top: 15px; width: 74px; height: 75px; background: url("../img/fnav2-img2.svg") no-repeat;}
footer .fnav2 dd{ display: flex; flex-wrap: wrap; margin-bottom: 35px;}
footer .fnav2 dd a{ display: flex; align-items: center; justify-content: center; width: 180px; height: 62px; line-height: 1.4; margin: 0 4px 8px; border: 1px solid #E6E6E6;}
footer .fnav2 dd a:hover{ opacity: 1; background: #E6E6E6;}
footer .fnav2 p{ color: #838B9F; font-size: 1rem;}

/*------------------------------ responsive ------------------------------*/
@media screen and (max-width: 768px) {
	footer{ padding-bottom: 80px;}
	footer .fnav1{ padding: 30px 0 30px;}
	footer .fnav1 .wrap{ display: block;}
	footer .fnav1 .leftcol{ width: auto; text-align: center; margin-bottom: 40px;}
	footer .fnav1 .leftcol dt{ margin-bottom: 20px;}
	footer .fnav1 .leftcol dd{ display: block; margin-bottom: 5px;}
	footer .fnav1 .leftcol dd a{ margin: 0 0 5px;}
	footer .fnav1 .rightcol{ max-width: 315px; margin: 0 auto; position: relative;}
	footer .fnav1 .rightcol dl{ display: block; margin: 0 0 20px;}
	footer .fnav1 .rightcol dl:nth-child(3){ position: absolute; right: 0; top: 0; width: 140px; white-space: nowrap;}
	footer .fnav1 .rightcol dl:nth-child(4){ position: absolute; right: 0; top: 90px; width: 140px; white-space: nowrap;}
	footer .fnav1 .rightcol dl dd{ font-size: 1.2rem;}
	footer .fnav1 .rightcol dl dd{ font-size: 1.2rem;}
	footer .fnav1 .rightcol ul{ text-align: center; padding-top: 50px;}
	footer .fnav1 .rightcol ul li{ margin: 0 8px;}
	footer .fnav1 .rightcol ul li img{ width: 58px;}
	footer .fnav2 dt:before{ right: calc(100% + 10px); top: -5px; width: 112px;}
	footer .fnav2 dt:after{ left: calc(100% + 30px); top: 5px; width: 74px;}
	footer .fnav2 dd{ margin-bottom: 20px;}
	footer .fnav2 dd a{ width: 48%; height: 62px; line-height: 1.4; margin: 0 1% 5px; font-size: 1.2rem;}
}
@media screen and (max-width: 340px) {
	footer .fnav1 .rightcol dl:nth-child(3){ width: 130px;}
	footer .fnav1 .rightcol dl:nth-child(4){ width: 130px;}
}



/*---------------------------------------------------------------------------------------
	article　pagination
----------------------------------------------------------------------------------------*/

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
	margin-bottom: 60px;
}

.pagination a {
  margin: 0 5px;
  padding: 5px 10px;
  border: 1px solid #ccc;
  text-decoration: none;
  color: #333;
  border-radius: 4px;
}

.pagination a:hover {
  background-color: #333;
  color: #fff;
}



/*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
	Sub-page settings
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/


/*  入会金無料パターン common-foot-partsのtop15-bg-cam.svgも変更  */
.top15{ margin: -110px 0 60px; position: relative;}
.top15:before{ display: block; content: ""; position: absolute; left: 0; top: 110px; width: 100%; height: 188px; background: url("../img/bg-dots2.png") center top / 72px repeat; z-index: -1;}
.top15 .wrap{ position: relative;}
.top15 .wrap div{ position: absolute; left: calc(5% + 0px); top: 130px; width: 410px; font-size: 1.8rem; font-weight: bold; z-index: 1;}

.top15 .wrap h2{ position: absolute; right: calc(5% + 150px); top: 85px; width: 312px; font-size: 1.8rem; font-weight: bold; z-index: 1;}
.top15 .wrap p.btn{ position: absolute; right: calc(5% + 150px); top: 160px; width: 312px; z-index: 1;}
.top15 .wrap p.btn a{ min-width: 312px;}

/*------------------------------ responsive ------------------------------*/

@media screen and (max-width: 768px) {
	.top15{ margin: -50px 0 0;}
	.top15:before{ top: 166px; height: 112px;}
	.top15 .wrap{ padding: 0;}
	.top15 .wrap h2{ right: 0; top: 35px; width: 100%; font-size: 1.6rem;}
	.top15 .wrap p.btn{ right: 0; top: 100px; width: 100%;}
	.top15 .wrap p.btn a{ min-width: inherit; max-width: 246px;}
}

/*------------------------------ responsive ------------------------------*/
@media screen and (max-width: 768px) {
	.top15 div.sp{
		width: 80%;
		margin: 0 auto 20px;
	}
}

/*---------------------------------------------------------------------------------------
	/lower
----------------------------------------------------------------------------------------*/

.lower-bg{ background: url("../img/lower-bg-pc.svg") center top / 100% auto no-repeat;}
.lower-main{
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	flex-direction: row-reverse;
	margin-bottom: 20px;
}
.lower-main.disblock{
	display: block;
	padding-top: 120px;
}
.lower-main figure{
	width: 64.86%;
	height: 411px;
}
.lower-main figure img{ display: none;}
.lower-main .lower-ttl{
	text-align: left;
	padding: 0 0 45px 6.6%;
}
.lower-main.disblock .lower-ttl{ text-align: center; padding: 0;}
.lower-main .lower-ttl strong,.lower-main .lower-ttl span{ display: inline-block;}
.lower-main .lower-ttl strong{
	color: #0F3286;
	font-size: 8.8rem;
	line-height: 1.1;
	font-weight: 500;
	position: relative;
	z-index: 99;
}
.lower-main .lower-ttl strong.f48{ font-size: 4rem;}
.lower-main .lower-ttl strong.f34{ font-size: 3.4rem;}
.lower-main .lower-ttl span{
	font-size: 2rem;
	line-height: 1.5;
	font-weight: bold;
}
.lower-main .lower-ttl span:before{
	content: "■";
	color: #81C1F8;
	font-size: .8rem;
	display: inline-block;
	vertical-align: middle;
	margin: 0 .5em .4em 0;
}
.pan{
	color: #0F3286;
	font-size: 1.2rem;
	font-weight: bold;
	text-align: left;
	padding: 0 6.6%;
}
.pan ol,.pan ol li,.pan ol li:before{ display: inline-block;}
.pan ol{
	padding: 10px 0;
	border-bottom: 1px solid #E0E0E0;
}
.pan ol li:before{
	content: ">";
	font-weight: bold;
	margin: 0 .5em;
}
.pan ol li:first-child:before{ content: none;}
.pan ol li a{ color: #848484;}

/* p-top */


/*------------------------------ responsive ------------------------------*/
@media screen and (max-width: 768px) {
	.lower-bg{ background: url("../img/lower-bg-sp.svg") left top 40vw / 25% auto no-repeat;}
	.lower-main{
		display: block;
		padding-top: 72px;
		margin-bottom: 45px;
	}
	.lower-main figure{
		width: 100%;
		height: auto;
		margin-bottom: 15px;
		position: relative;
	}
	.lower-main figure:after{
		content: "";
		position: absolute;
		right: -3%;
		top: 92%;
		background: url("../img/lower-bg-sp-parts.svg") center no-repeat;
		width: 132px;
		height: 213px;
		display: block;
	}
	.lower-main figure img{ display: block;}
	.lower-main .lower-ttl{ padding: 0 0 0 5%;}
	.lower-main .lower-ttl strong{ font-size: 4.8rem;}
	.lower-main .lower-ttl strong.f48{ font-size: 2.8rem;}
	.lower-main .lower-ttl strong.f34{ font-size: 2.6rem;}
	.lower-main .lower-ttl span{ font-size: 1.2rem; }
	.pan{ display: none;}
}



/*---------------------------------------------------------------------------------------
	/school
----------------------------------------------------------------------------------------*/


.schooltop {padding-top: 90px;}

.lower-main figure.school-main{ background: url("../img/school-main-pc.jpg") left bottom / cover no-repeat;}
.school1{
	background: url("../img/school-bg.svg") center top repeat;
	padding: 70px 0 200px;
}
.school1 .school-map{
	font-size: 2rem;
	font-weight: bold;
	position: relative;
	display: flex;
	justify-content: flex-end;
	margin-bottom: 85px;
}
.school1 .school-map .lead{
	text-align: left;
	position: absolute;
	top: 90px;
	left: 130px;
}
.school1 .school-map figure{
	position: absolute;
	bottom: 95px;
	left: 50px;
}
.school1 .school-map div{
	padding-right: 120px;
}
.school1 .ac-cont{ position: relative; text-align: left;}
.school1 .ac-cont:after{
	content: "";
	position: absolute;
	top: 40%;
	right: -10px;
	background: url("../img/dec-gray-small.svg") center no-repeat;
	width: 128px;
	height: 269px;
	display: block;
}
.school1 .ac-cont .wrap{
	max-width: 530px;
	padding: 0;
}
.school1 .ac-cont h2{
	color: #fff;
	font-size: 2.2rem;
	font-weight: bold;
	background: url("../img/ac-open-white.svg") right 15px center no-repeat #81C1F8;
	padding: 10px 40px 10px 20px;
	border-radius: 8px;
	margin-top: 10px;
	cursor: pointer;
	position: relative;
}
.school1 .ac-cont h2:after{
	position: absolute;
	z-index: -1;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 8px;
	background: #C6E9FF;
	display: block;
}
.school1 .ac-cont h2.open{ background: url("../img/ac-close-white.svg") right 15px center no-repeat #81C1F8;}
.school1 .ac-cont h2.open:after{ content: "";}
.school1 .ac-cont ul{
	font-weight: bold;
	background: #C6E9FF;
	border-radius: 0 0 8px 8px;
	display: none;
}
.school1 .ac-cont ul dl dt{
	color: #0F3286;
	font-size: 1.8rem;
	padding: 10px 40px 10px 20px;
	background: url("../img/ac-open.svg") right 15px center no-repeat;
	cursor: pointer;
	border-bottom: 1px solid #fff;
}
.school1 .ac-cont ul dl dt.open{ background: url("../img/ac-close.svg") right 15px center no-repeat;}
.school1 .ac-cont ul dl dd{
	font-size: 1.6rem;
	background: #F0EFEF;
	display: none;
}
.school1 .ac-cont ul dl dd a{
	display: block;
	background: url("../img/ic-link.svg") right 15px center no-repeat;
	padding: 10px 40px 10px 20px;
	border-bottom: 1px solid #fff;
}
.school1 .ac-cont ul dl dd a p{ margin-bottom: 10px;}
.school1 .ac-cont ul dl dd a p:last-child{ margin-bottom: 0;}
.school1 .ac-cont ul dl dd small{
	font-size: 1.4rem;
	font-weight: bold;
}
.school1 .ac-cont ul dl dd span{
	color: #fff;
	font-size: 1.2rem;
	display: inline-block;
	background: #0F3286;
	padding: 3px 15px 4px;
	border-radius: 99px;
	margin-left: .5em;
}

/*------------------------------ responsive ------------------------------*/
@media screen and (max-width: 768px) {
	.lower-main figure.school-main{ background: none;}
	.school1{
		background: none;
		padding: 0 0 100px;
	}
	.school1 .school-map{
		font-size: 1.6rem;
		display: block;
		margin-bottom: 25px;
	}
	.school1 .school-map .lead{
		position: static;
		margin-bottom: 20px;
	}
	.school1 .school-map figure{
		bottom: 36%;
		left: -2%;
		width: 60%;
	}
	.school1 .school-map div{ padding-right: 0;}
	.school1 .ac-cont:after{
		top: -75px;
		right: -30%;
		background: url("../img/dec-gray-small.svg") center / 64px auto no-repeat;
		z-index: -1;
	}
	.school1 .ac-cont h2{ margin-top: 5px;}
	.school1 .ac-cont ul dl dd a p{ margin-bottom: 5px;}
}



/*---------------------------------------------------------------------------------------
	/schools/area
----------------------------------------------------------------------------------------*/

.schoolarea-ttl{ font-size: 4rem; font-weight: bold; line-height: 1.4;}
.schoolarea-lead{ font-size: 1.6rem;}
.schoolarea{ margin-bottom: 50px; overflow: hidden;}
.schoolarea article{ margin-bottom: 30px; padding: 40px; background: #eee; border-radius: 20px;}
.schoolarea article h3{ margin-bottom: 20px; padding: .2em 1em; color: #fff; font-size: 2.4rem; font-weight: bold; text-align: left; background: #0F3286;}
.schoolarea article figure{ float: left; width: 40%; margin-right: 5%; margin-bottom: 30px;}
.schoolarea article .txt{ overflow: hidden; text-align: left; margin-bottom: 30px;}
.schoolarea article .txt h4{ margin-bottom: .3em; padding-bottom: .3em; color: #0F3286; font-size: 1.6rem; font-weight: bold; border-bottom: 1px solid #ccc;}
.schoolarea article .txt ul,
.schoolarea article .txt p{ margin-bottom: 1em;}

.schoolarea article .txt ul li dl dt{
    font-weight: bolder;
    line-height: 1.4;
    display: inline-block;
    padding: 3px 8px;
    margin: 0 0 6px 0;
    border-radius: 6px;
}
.schoolarea article .txt ul li dl dt a{
    color: #fff !important;
}
.schoolarea article .txt ul li dl dt.kids{
    color: #fff !important;
    background: #FFAE00 ;
}
.schoolarea article .txt ul li dl dt.scratch1{
    background: #00A2E9;
}
.schoolarea article .txt ul li dl dt.scratch2{
    background: #E65656;
}
.schoolarea article .txt ul li dl dt.typing{
    background: #76B015;
}
.schoolarea article .txt p.tel{ font-size: 3rem;}
.schoolarea article .txt p.tel a{ color: #0F3286;}


.schoolarea article .event{ margin-bottom: 10px; padding-bottom: 10px; clear: both;}
.schoolarea article .event a,
.schoolarea article .event button{ min-width: 400px; padding: 26px 65px 25px 30px; background: url(../img/ic-btn.svg) right 15px center no-repeat #E65656; box-shadow: 3px 4px 0px 3px #BC4E4E;}
.schoolarea article .partner{ margin-bottom: 10px; padding-bottom: 10px; clear: both;}
.schoolarea article .partner a{ min-width: 400px; padding: 26px 65px 25px 30px;}
.schoolarea article .more a{ min-width: 400px; padding: 26px 65px 25px 30px;}

/*------------------------------ responsive ------------------------------*/
@media screen and (max-width: 768px) {
	.schoolarea-ttl{ font-size: 2.8rem;}
	.schoolarea-lead{ font-size: 1.4rem;}
	.schoolarea{ margin-bottom: 50px;}
	.schoolarea article{ margin-bottom: 20px; padding: 8%;}
	.schoolarea article h3{ font-size: 2rem;}
	.schoolarea article figure{ float: none; width: auto; margin-right: 0; margin-bottom: 20px;}
	.schoolarea article .txt{ margin-bottom: 20px;}
	.schoolarea article .event a,
	.schoolarea article .event button{ min-width: inherit; max-width: inherit!important; padding: .7em 65px .7em 10px;}
	.schoolarea article .more a,
	.schoolarea article .partner a{ min-width: inherit; max-width: inherit!important; padding: .7em 65px .7em 10px;}
}





/*---------------------------------------------------------------------------------------
	/schools-companies
----------------------------------------------------------------------------------------*/

.lower-main figure.schools-companies-main{ background: url("../img/schools-companies-main-sp.png") left bottom / cover no-repeat;}
.schools-companies1{
	color: #fff;
	background:
		url("../img/dec-schools-companies1.svg") right top 60px no-repeat,
		url("../img/bg-dots3.png") center / 72px auto repeat;
	padding: 60px 0 40px;
	position: relative;
}
.schools-companies1:before{
	display: inline-block;
	content: "";
	position: absolute;
	right: 75px;
	top: -20px;
	width: 122px;
	height: 95px;
	background: url(../img/courseDetail2-bg.png) center / 122px auto no-repeat;
}
.schools-companies1:after{
	content: "";
	position: absolute;
	right: 0;
	bottom: -329px;
	background: url("../img/dec-blue-right-top.svg") right top no-repeat;
	width: 157px;
	height: 329px;
	display: block;
}
.schools-companies1 .lead{
	font-size: 1.8rem;
	font-weight: bold;
}
.schools-companies1 h2{ position: relative;}
.schools-companies1 h2 strong{
	color: #3F5B9E;
	font-size: 12rem;
	line-height: 1;
}
.schools-companies1 h2 span{
	color: #FFDE3E;
	font-size: 3.2rem;
	width: 17em;
	position: absolute;
	top: 2.5rem;
	left: 50%;
	transform: translateX(-50%);
}
.schools-companies1 h2 span em{ font-size: 4rem;}
.schools-companies1 ol{
	text-align: left;
	display: flex;
	flex-wrap: wrap;
}
.schools-companies1 ol li{
	width: 31%;
	margin: 0 3.5% 30px 0;
}
.schools-companies1 ol li:nth-child(3n){ margin-right: 0;}
.schools-companies1 ol li figure{ margin-bottom: 20px; text-align: center;}
.schools-companies1 ol li figure img{ border-radius: 0 52px 0 0;}
.schools-companies1 ol li dl dt{
	font-size: 1.6rem;
	font-weight: bold;
}
.schools-companies1 ol li dl dt strong{ font-size: 2.4rem;}
.contact2.schools-companies2{
	font-size: 1.6rem;
	padding-top: 80px;
	background: url("../img/bg-dots4.png") left top / 72px auto repeat;
}
.contact2.schools-companies2 .red a{ color: #E65656;}
.schools-companies2 h2{
	font-size: 2.8rem;
	font-weight: bold;
}

/*------------------------------ responsive ------------------------------*/
@media screen and (max-width: 768px) {
	.lower-main figure.sp-after-no:after{ content: none;}
	.schools-companies1:after{
		bottom: -165px;
		background: url("../img/dec-blue-right-top.svg") right top / 78px auto no-repeat;
		width: 78px;
		height: 165px;
	}
	.lower-main figure.schools-companies-main{ background: none;}
	.lower-main .lower-ttl strong small{ font-size: 4.2rem;}
	.schools-companies1 h2 strong{ font-size: 7.2rem;}
	.schools-companies1 h2 span{
		font-size: 2rem;
		top: 2.5rem;
	}
	.schools-companies1 h2 span em{ font-size: 3rem;}
	
	.schools-companies1{ padding: 40px 0;}
	.schools-companies1:before{
		right: 25px;
		width: 62px;
		height: 48px;
		background: url("../img/courseDetail2-bg.png") center / 62px auto no-repeat;
	}
	.schools-companies1 ol{ display: block;}
	.schools-companies1 ol li{
		width: 100%;
		margin: 0 0 30px;
	}
	.schools-companies1 ol li figure{ margin-bottom: 10px;}
	.schools-companies1 ol li dl dt strong{ font-size: 2rem;}
}



/*---------------------------------------------------------------------------------------
	/school-detail1
----------------------------------------------------------------------------------------*/

.lower-bg.schooltop{ background: url("../img/lower-bg-pc2.svg") center top / 100% auto no-repeat !important;}
.lower-main figure.school-detail1-app-main{ background: url("../img/school-detail1-app-main-sp.png") left bottom / cover no-repeat;}

.info-school{
    margin-top: 10px;
    border-top: 1px solid #989898;
    padding: 20px 20px 25px;
    background: #F7F3DA;
}
.info-school h2{
    color: #FF0004;
}
.info-school p {
    width: 60%;
    margin: 0 auto;
    text-align: left;
}
.info-school a{
    color: #FF0004;
    border-bottom: 1px solid #FF0004;
    padding-bottom: 2px;
}

/*------------------------------ responsive ------------------------------*/
@media screen and (max-width: 768px) {
    .info-school p {
        width: 100%;
    }
}

/*トップスライダー関連*/
.slick-dotted.slick-slider { margin-bottom: 40px;}
.sliderSet { width:80%; margin:0 auto;}
.sliderSet img { width:35vw; height:auto;}
.sliderSet .slick-slide {
  transform: scale(0.8);
  transition: all .5s;
  opacity: 0.5;
}
.sliderSet .slick-slide.slick-center{ transform: scale(1); opacity: 1;}
/*矢印の設定*/
.sliderSet .slickSet-prev, 
.sliderSet .slickSet-next {
    position: absolute;
    top: 42%;
    cursor: pointer;
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    border-top: 2px solid #666;/*矢印の色*/
    border-right: 2px solid #666;/*矢印の色*/
    height: 18px;
    width: 18px;
}
.sliderSet .slickSet-prev { left: -1.5%; transform: rotate(-135deg);} 
.sliderSet .slickSet-next { right: -1.5%; transform: rotate(45deg);}

.sliderSet .slick-dots{bottom: -35px;}
.sliderSet .slick-dots li button:before{ background: #00A2E9;}
.sliderSet .slick-dots li.slick-active button:before{ background: #E65656;}


.sliderSet {
  display: none;
}
.sliderSet.slick-initialized {
  display: block;
}



/*青ベース　下に青のアーチ削除*/
.school-detail0{
	color: #fff;
	background: #0F3286;
	position: relative;
	padding: 40px 0 40px;
    font-size: 1.6rem;
}
.school-detail1{
	color: #fff;
	background: #0F3286;
	position: relative;
	padding: 40px 0 60px;
    font-size: 1.6rem;
}
.school-detail8{
	color: #fff;
	background: #0F3286;
	position: relative;
	padding: 40px 0 60px;
    font-size: 1.6rem;
}

/*本タイトル*/
.school-detail0 h1{
	font-size: 3.0rem;
	line-height: 1.4;
	font-weight: bold;
}
.school-detail0 h1 span{
	display: inline-block;
	font-size: 1.4rem;
	line-height: 1.8;
	font-weight: bold;
}

/*------------------------------ responsive ------------------------------*/
@media screen and (max-width: 768px) {
    .school-detail0{ padding: 30px 0 30px;}
    .school-detail1{ padding: 30px 0 100px;}
	.school-detail8{ padding: 30px 0 30px;}
    }


.school-detail1 h2,
.school-detail2 h2,
.school-detail3 h2,
.forte1-sp .forte1-inner h2,
.forte1-sp h2,
.forte3-sp .forte1-inner h2,
.forte3-sp h2,
.school-reason h2,
.school-detail7 h2,
.school-detail8 h2,
.starting-date h2{
    font-size: 3.6rem;
    line-height: 1.3;
}
.school-detail1 h2 span,
.school-detail2 h2 span,
.school-detail3 h2 span,
.forte1-sp .forte1-inner h2 span,
.forte1-sp h2 span,
.forte3-sp .forte1-inner h2 span,
.forte3-sp h2 span,
.school-reason h2 span,
.school-detail7 h2 span,
.school-detail8 h2 span,
.starting-date h2 span{
    display: inline-block;
    font-size: 1.6rem;
    line-height: 1.5;
    
}
.forte1-img{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	width: 90%;
	margin: 20px auto 10px;
	gap: 15px;
}
.forte2-img{
	display: grid;
	grid-template-columns: 1fr 1fr;
	width: 80%;
	margin: 20px auto 10px;
	gap: 30px;
}
.forte1-qr{
	/*display: grid;
	grid-template-columns: 1fr 1fr 1fr;*/
	width: 20%;
	margin: 20px auto 10px;
	gap: 15px;
}
.forte1-qr figcaption{
	line-height: 1.3;
	margin: 5px 0 0;
}
@media screen and (max-width: 768px) {
	.forte1-qr{
		width: 40%;
		margin: 20px auto 10px;
		gap: 15px;
	}
	.forte1-qr figcaption{
		line-height: 1.4;
		margin: 5px 0 0;
	}
}


.forte3-img1{
	width: 90%;
	margin: 20px auto 10px;
}
.forte3-img1 img{
	width: 35%;
	margin: 0 auto;
	border: 1px solid #AFA4A4;
}
.forte3-img2{
	width: 90%;
	margin: 20px auto 10px;
}
.forte3-img2 img{
	width: 35%;
	margin: 0 auto;
}


.school-detail1 h2 small{
    font-size: 1.2rem;
    
}    
.school-detail1 h2{
    margin: 0 0 30px 0; 
}
.school-detail1 .clm2{
	text-align: left;
	display: flex;
	justify-content: space-between;
	margin-bottom: 20px;
}
.school-detail1 .clm2 dl{
	width: 45%;
}
.school-detail1 .clm2 dl dt{
	font-size: 2.2rem;
	line-height: 1.4;
	font-weight: bold;
	position: relative;
	margin-bottom: 10px;
    border: 2px solid #fff;
    text-align: center;
    padding: 6px 0;
}

.school-detail1 .clm2 dl dd{ margin-bottom: 50px;}
.school-detail1 .clm2 dl dd.khand{
	font-size: 3.2rem;
	line-height: 1.4;
	font-weight: 500;
}
.school-detail1 .clm2 dl dd a{ color: #fff;}
.school-detail1 .w866{
	width: 866px;
	margin-left: -33px;
}

.school-detail1 .classrooms li a{
    border-bottom: 1px solid #fff;
	padding-bottom: 3px;   
}			  

.school-detail1 .classrooms ul li{
    margin-bottom: 15px;
    
}
/*営業時間*/

.school-detail1 .business-hours li.list1{
    color: #FFED00;
    margin-bottom: 10px;
}

.school-detail1 .business-hours li strong{
	font-family: 'Khand', sans-serif;
    font-weight: 500!important;
	font-size: 2.9rem;	
}
.school-detail1 .business-hours li small{
    display: inline-block;
    text-align: center;
    margin-right: 20px;
    margin-left: 10px;
	font-size: 1.4rem;
    vertical-align: middle;
    position: relative;
    line-height: 2;
    margin-bottom: 12px;
}
.school-detail1 .business-hours li small:before{
    display: inline-block;
    content: "";
    border:2px solid #fff;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    left:-8px;
    position: absolute;
}
.school-detail1 .business-hours li span{
    padding-left: 10px;
}

.school-detail1 .business-hours li.attention{
    margin-top:5px;
    font-size: 1.4rem;
}

.school-detail1 .business-hours-text{
	display: inline-block;
	margin: 20px 0 0;
	background: #fff;
	color: #0F3286;
	text-align: center;
	padding: 3px 15px;
	font-weight: 800;
}

.school-detail1 .business-hours li.hourImg{
	margin-top: 20px;
}

.school-detail1 .business-hours li.hourImg figure img{
	width: 60%;
}
.school-detail1 .business-hours li.hourImg figure figcaption{
	font-size: 1.4rem;
	margin-top: 10px;
}


/*------------------------------ responsive ------------------------------*/
@media screen and (max-width: 768px) {
	.school-detail1 h2,
    .school-detail2 h2,
    .school-detail3 h2,
    .forte1-sp .forte1-inner h2,
    .forte1-sp h2,
	.forte3-sp .forte1-inner h2,
    .forte3-sp h2,
    .school-reason h2,
    .school-detail7 h2,
    .school-detail8 h2,
    .starting-date h2{
        font-size: 2.6rem;
        line-height: 1.3;
    }
    .school-detail1 h2 span,
    .school-detail2 h2 span,
    .school-detail3 h2 span,
    .forte1-sp .forte1-inner h2 span,
    .forte1-sp h2 span,
	.forte3-sp .forte1-inner h2 span,
    .forte3-sp h2 span,
    .school-reason h2 span,
    .school-detail7 h2 span,
    .school-detail8 h2 span,
    .starting-date h2 span{
        display: inline-block;
        font-size: 1.6rem;
        line-height: 1.5;
    }
    .school-detail1 h2 small{
        font-size: 1.2rem;
    }
    .school-detail1 h2{
        margin: 0 0 20px 0;
    }
    .school-detail1 .clm2 dl dt{
        font-size: 1.8rem;
    }
	.forte1-img{
		grid-template-columns: 1fr 1fr;
		margin: 20px auto 0px;
		gap: 10px;
	}
	.forte2-img{
		width: 100%;
		display: block;
		margin: 20px auto 0px;
		gap: 10px;
	}
	.forte2-img li{
		margin: 20px 0 0px;
	}
	.forte3-img1, .forte3-img2{
		width: 90%;
		margin: 20px auto 10px;
	}
	.forte3-img1 img, .forte3-img2 img{
		width: 90%;
	}
}


/*地図*/
.map-sp{
	width: 100%;
	margin: 20px 0 10px;
}
.map-sp iframe{
	width: 100%;
}
.map-txt{
	text-align: right;
}
.map-txt a{
	color: #fff;
	text-align: right;
	/*font-size: 1.6rem;*/
	border-bottom: 1px solid #fff;
	padding-bottom: 3px;
}
/*------------------------------ responsive ------------------------------*/
@media screen and (max-width: 768px) {
	.map-sp{
		width: 330px;
		padding-top: 330px;
		margin: 0 auto 15px;
		position: relative;
	}
	.map-sp iframe {
		position: absolute;
		top: 0;
		right: 0;
		width: 100% !important;
		height: 100% !important;
	}
}

/*----------------------------------------------------------------*/
/*  道順
/*----------------------------------------------------------------*/
.school-detail1 .clm2.direct{
	text-align: left;
	display: block;
	justify-content: space-between;
	margin-bottom: 20px;
}
.school-detail1 .clm2.direct dl{
	/*padding-left: 1.2em;*/
	width: 100%;
}
.school-detail1 .clm2.direct dl dt{
	font-size: 2.2rem;
	line-height: 1.4;
	font-weight: bold;
	position: relative;
	margin-bottom: 10px;
}
.school-detail1 .clm2.direct dl dt:before{
	content: "";
	position: absolute;
	top: .4em;
	left: -1.2em;
	width: 10px;
	height: 10px;
	display: block;
}
.school-detail1 .clm2.direct dl dd{ margin-bottom: 30px;}

.school-detail1 .clm2.direct dl dd ul.directions-wrap{
	text-align: left;
	display: flex;
	justify-content: flex-start;
	flex-wrap:wrap;
}
.school-detail1 .clm2.direct dl dd ul.directions-wrap li{
	width: calc(90% / 3);
	margin-right: 3%;
}
.school-detail1 .clm2.direct dl dd ul.directions-wrap li:nth-child(3),
.school-detail1 .clm2.direct dl dd ul.directions-wrap li:nth-child(6){
	margin-right: 0px;
}

.school-detail1 .clm2.direct dl dd ul.directions-wrap li dl{
	padding-left: 0em;
	width: 100%;
	position: relative;
}

.school-detail1 .clm2.direct dl dd ul.directions-wrap li dl dt{
    border: none;
    font-family: 'Khand', sans-serif;
    display: inline-block;
    text-align: center;
    margin-right: 20px;
    margin-left: 18px;
	font-size: 2.6rem;
    vertical-align: middle;
    position: relative;
}
.school-detail1 .clm2.direct dl dd ul.directions-wrap li dl dt span{
	position: relative;
	color: #E65656;
	z-index: 100;
}
.school-detail1 .clm2.direct dl dd ul.directions-wrap li dl dt:before{
    display: inline-block;
    content: "";
    border:2px solid #fff;
	background: #fff;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    left:-13px;
    top: 4px;
    position: absolute;
	z-index: 1;
}
.school-detail1 .clm2.direct dl dd ul.directions-wrap li dl dd{
    margin-top: -10px;

}
.school-detail1 .clm2.direct dl dd ul.directions-wrap li dl dd figcaption{
    margin-top: 8px;

}
.school-detail1 .clm2.direct dl dd ul.directions-nowrap li{
    margin-bottom: 15px;
}
.school-detail1 .clm2.direct dl dd ul.directions-nowrap li a{
	border-bottom: 1px solid;
	padding-bottom: 5px;
}
.school-detail1 .clm2.direct dl dd ul.directions-nowrap li:last-child{
    margin-bottom: 0px;
}

/*------------------------------ responsive ------------------------------*/
@media screen and (max-width: 768px) {
    .school-detail1 .clm2.direct dl dt{
        font-size: 1.8rem;
    }
    .school-detail1 .clm2.direct dl dd{ margin-bottom: 20px;}
    .school-detail1 .clm2.direct dl dd ul.directions-wrap{
        display: block;
    }
    .school-detail1 .clm2.direct dl dd ul.directions-wrap li{
        width: 90%;
        margin: 0% auto;
    }
}


/*----------------------------------------------------------------*/
/*  forte1-sp 強み こんな生徒が通っています
/*----------------------------------------------------------------*/
.forte1-sp{
	max-width: 833px;
}

.forte1-sp .forte1-inner{
	background: #FFEC00;
	padding: 0px 0px 20px 0px;
	border-radius: 20px;
	position: relative;
	margin-top: -70px;
}
.forte1-sp .forte1-inner h2{
    margin: 0 0 20px 0;
}
.forte1-sp .forte1-inner .wrap dl dd{
	text-align: left;
}
.forte1-sp .forte1-inner .wrap dl dd strong{
	color: #EB123E;
}

.forte3-sp{
	max-width: 833px;
}

.forte3-sp .forte1-inner{
	border: 5px solid #0F3286;
	padding: 0px 0px 20px 0px;
	border-radius: 20px;
	position: relative;
	margin-top: 30px;
}
.forte3-sp .forte1-inner h2{
    margin: 0 0 20px 0;
}
.forte3-sp .forte1-inner .wrap dl dd{
	text-align: left;
}
/*.forte3-sp .forte1-inner .wrap dl dd strong{
	color: #EB123E;
}*/

.forte3-sp .forte1-inner .wrap dl dd figure{
	width: 100%;
    margin: 20px 0;
}
.forte3-sp .forte1-inner .wrap dl dd figure figcaption{
	text-align: center;
}
.forte3-sp .forte1-inner .wrap dl dd figure img{
    
	display: block;
	width: 280px;
	margin: 0 auto;
}
.forte3-sp .forte1-inner .wrap strong{
	background:linear-gradient(transparent 60%, #ff6 60%);
}

.forte3-sp .forte1-inner .wrap dl dd dl dt{
	font-weight: 800;
	font-size: 1.6rem;
	margin-top: 10px;
}

.school-detail6{
	color: #fff;
	background: #0F3286;
	position: relative;
	padding: 30px 0 20px;
    font-size: 1.6rem;
}

.forte1-inner strong,
.forte2-inner strong{
	font-weight: 800;
}

.forte1-inner a,
.forte2-inner a{
	border-bottom: 1px solid;
	padding-bottom: 1px;
}

.forte2-sp{
	max-width: 933px;
}

.forte2-sp .forte2-inner{
	background: #76B015;
	padding: 0px 0px 20px 0px;
	border-radius: 20px;
	position: relative;
	margin: 50px auto 0;
}
.forte2-sp .forte2-inner h2{
    margin: 0 0 20px 0;
}
 .forte2-sp .forte2-inner .wrap dl dd{
	text-align: left;
}

 .forte2-sp .forte2-inner .wrap dl dd strong{
	color:#FFEF2F ;
}


.forte2-inner dd .ratioImg{
	text-align: center;
	width: 50%;
	display: block;
	margin: 20px auto;
}



/*------------------------------ responsive ------------------------------*/
@media screen and (max-width: 768px) {
    .forte1-sp{
        max-width: 90%;
    }

    .forte1-inner h2{
        margin: 0 0 10px 0;
    }
    .forte2-inner h2{
        margin: 0 0 10px 0;
    }
    .school-detail6{
        padding: 0px 0 10px;
    }
	.forte2-inner dd .ratioImg{
		width: 100%;
		margin: 20px auto;
	}
}

.school-color-green{background: #76B015;}
.school-color-yellow{background: #FFEC00;}
.school-color-skyblue{background: #00A2E9;}
.school-color-purple{background: #8B76B2;}
.school-color-red{background: #DC000C;}
.school-color-pink{ background: #E65656}

/*----------------------------------------------------------------*/
/*  .school-reason
/*----------------------------------------------------------------*/
.school-reason{
	position: relative;
}
.school-reason .wrap{
	padding: 50px 0 50px;
}
.school-reason .wrap .reason h2{
	margin-bottom: 30px;
	/*letter-spacing: .1em;*/
}
.school-reason .wrap .reason h2 strong{
	color: #FFED00;
	font-size: 4.0rem;
    font-family: "corporate-logo-ver2", sans-serif;
}
.school-reason .wrap .reason ul{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 30px 35px;
	list-style: none;
}
.school-reason .wrap .reason ul li{
	width: 30%;
}
.school-reason .wrap .reason ul li dl dt{
	color:#fff;/*#1BCDDC*/
	font-family: "corporate-logo-ver2", sans-serif;
	text-align: center;
	font-size: 1.6rem;
	line-height: 1.3;
	/*letter-spacing: .1em;*/
	position: relative;
	margin-bottom: 1.2em;
	font-weight: 600;
}
.school-reason .wrap .reason ul li:nth-child(odd) dl dt{
	color: #FCFB02;
}
.school-reason .wrap .reason ul li dl dt:before {
    position: absolute;
    left: 0;
    top: 0;
    content: "";
    width: 2px;
    height: 100%;
    background: #fff;
    border-radius: 3px;
    transform: rotate(-25deg);
}
.school-reason .wrap .reason ul li dl dt:after {
    position: absolute;
    content: "";
    right: 0;
    top: 0;
    width: 2px;
    height: 100%;
    background: #fff;
    border-radius: 3px;
    transform: rotate(25deg);
}
.school-reason .wrap .reason ul li dl dd{
	background: #F88282;
	border-radius: 8px;
	padding: .8em 1.6em;
	text-align: center;
	line-height: 1.3;
	position: relative;
	font-weight: bold;
	color: #333;
}
.school-reason .wrap .reason ul li:nth-child(odd) dl dd{
	background:#FFFE64;
}
.school-reason .wrap .reason ul li dl dd div{
	/*font-family: "corporate-logo-ver2", sans-serif;*/
	font-weight:800;
	font-size: 1.7rem;
	position: absolute;
	top: 10px;
    left: 50%;
    transform: translate(-50%, -50%);
}
.school-reason .wrap .reason ul li dl dd div span{
	display: inline-block;
	background: #1BCDDC ;
	color: #333;
	border-radius: 50%;
	height: 60px;
	width: 60px;
}
.school-reason .wrap .reason ul li:nth-child(odd) dl dd div span{
	background:#FFFE64;
	color: #333;
}
.school-reason .wrap .reason ul li dl dd figure{
	width: 100%;
	height: auto;
	margin: .8em 0 .5em;
	position: relative;
	z-index: 5;
}
.school-reason .wrap .reason ul li dl dd figure img{
	width: 100%;
	height: auto;
}

/*-------------------------- responsive --------------------------*/
@media screen and (max-width: 768px) {
	.school-reason .wrap .reason{
		margin: 0 auto;
		width: 100%;
	}
	.school-reason .wrap{
		padding: 30px 0 10px;
	}
    .school-reason .wrap .reason h2{
        margin-bottom: 10px;
    }
	.school-reason .wrap .reason h2 strong{
		font-size: 3.4rem;
	}
	.school-reason .wrap .reason ul{
		display: block;
	}
	.school-reason .wrap .reason ul li{
		width: 80%;
		margin:0 auto 50px;
	}
	.school-reason .wrap .reason ul li dl dt{
		color: #fff;
		font-size: 1.8rem;
		line-height: 1.3;
		margin-bottom: 1.3em;
	}
	.school-reason .wrap .reason ul li dl dt:before {
		left: 0;
		top: 0;
		height: 100%;
		background: #fff;
	}
	.school-reason .wrap .reason ul li dl dt:after {
		right: 0;
		top: 0;
		background: #fff;
	}
	.school-reason .wrap .reason ul li dl dd p {
		font-size: 1.6rem;
	}	
}


/*----------------------------------------------------------------*/
/*  .starting-date 開講コース・人気の講座
/*----------------------------------------------------------------*/

.school-detail8 h2{
	margin-bottom: 30px;
	text-align: center;
}
.school-detail8 h2 small{
	font-size: 1.2rem;
}
.school-detail8 .clm2{
	text-align: left;
	display: flex;
	justify-content: space-between;
	margin-bottom: 20px;
}
.school-detail8 .clm2 dl.inner{
	/*padding-left: 1.2em;*/
	width: 45%;
}
.school-detail8 .clm2 dl.course dd ul li dl dt{
	padding: 1rem 0;
	font-size: 2.0rem;
	line-height: 1.2;
	font-weight: bold;
	position: relative;
	margin-bottom: 10px;
    /*border: 2px solid #fff;*/
	
	color: #fff;
    text-align: center;
    /*padding: 6px 0;*/
}
.school-detail8 .clm2 dl.course dd ul li dl dt.kids{
    background: #FFAE00 ;
}
.school-detail8 .clm2 dl.course dd ul li dl dt.scratch1{
    background: #00A2E9;
}
.school-detail8 .clm2 dl.course dd ul li dl dt.scratch2{
    background: #E65656;
}
.school-detail8 .clm2 dl.course dd ul li dl dt.typing{
    background: #76B015;
}

.school-color-green{background: #76B015;}
.school-color-yellow{background: #FFEC00;}
.school-color-skyblue{background: #00A2E9;}
.school-color-purple{background: #8B76B2;}
.school-color-red{background: #DC000C;}
.school-color-pink{ background: #E65656}

.school-detail8 .clm2 dl.course dd ul li dl dd li:first-child{
	/*padding: 1rem 0;
	font-size: 2.0rem;
	line-height: 1.2;*/
	color: #FFEC00;
    /*padding: 6px 0;*/
}
.school-detail8 .clm2 dl.course dd ul li dl dd li span{
	font-size: 1.2rem;
}

.school-detail8 .clm2 dl.course dd ul li dl dd li {
	display: flex;
}
.school-detail8 .clm2 dl.course dd ul li dl dd li p.text1 {
	width: 7em;
}
.school-detail8 .clm2 dl.course dd ul li dl dd li p.text2 {
	width: 30em;
}





.school-detail8 .clm2 dl.popularity dd ul li dl{
	position: relative;
}
.school-detail8 .clm2 dl.popularity dd ul li dt{
	border: 2px solid #FFEC00;
	color: #FFEC00;
	text-align: center;
	padding: 0 .3em .3em;
	letter-spacing: .5rem;
}
.school-detail8 .clm2 dl.popularity dd ul li dt strong{
	font-size: 2.6rem;
}
.school-detail8 .clm2 dl.popularity dd ul li dt i{
	font-size: 2.2rem;
}


.school-detail8 .clm2 dl.popularity dd ul li dd ul li:nth-child(1){
	font-size: 2.0rem;
	line-height: 1.2;
	font-weight: bold;
	color: #fff;
	padding:10px 0;
    border-bottom: 2px dotted #fff;
    margin: 0 0 10px 0;
}
.school-detail8 .clm2 dl.popularity dd ul li dd ul li:nth-child(2) span{
	color: #FFEC00;
}

.school-detail8 .clm2 dl.popularity dd ul li dd ul li:nth-child(2) a{
	border-bottom: 1px solid;
	padding-bottom: 1px;
}


.school-detail8 .clm2 dl.popularity .popularity-read{
	margin-bottom: 20px;
}

.school-detail8 .clm2 dl.popularity .popularity-read a{
	border-bottom: 1px solid;
	padding-bottom: 1px;
}

.school-detail8 .clm2 dl.popularity dd img{
	display: block;
	width: 100%;
	margin: 20px auto 0;
}

.school-detail8 .clm2 dl dd{ margin-bottom: 50px;}
.school-detail8 .clm2 dl dd.khand{
	font-size: 3.2rem;
	line-height: 1.4;
	font-weight: 500;
}
.school-detail8 .clm2 dl dd a{ color: #fff;}
.school-detail8 .w866{
	width: 866px;
	margin-left: -33px;
}

/* 募集情報 全体 */
.course-recruit {
  text-align: center;
  margin-top: 16px;
}

/* 白枠ボックス */
.course-recruit .recruit {
  display: inline-block;
  border: 2px solid #fff;
  padding: 12px 20px;
  color: #fff;
  border-radius: 8px;
}

/* dt（タイトル） */
.course-recruit .recruit dt {
  color: #fbd024 !important; /* 黄色 */
  font-weight: bold;
  margin-bottom: 6px;
  font-size: 1.1em;
}

/* dd（曜日など） */
.course-recruit .recruit dd {
  margin: 0;
  line-height: 1.6;
  margin-bottom: 0px !important;
  padding-top: 15px;
  border-top: 2px solid #fff;
}


/*------------------------------ responsive ------------------------------*/
@media screen and (max-width: 768px) {
    .school-detail8 h2{
        margin-bottom: 20px;
    }
	.school-detail8 .clm2{
		display: block;
	}
	.school-detail8 .clm2 dl.inner{
		width: 100%;
	}
	.school-detail8 .clm2 dl.course dd ul li dl dd li {
		display: block;
}
.school-detail8 .clm2 dl.course dd ul li dl dd li p.text1 {
	width: 100%;
}
.school-detail8 .clm2 dl.course dd ul li dl dd li p.text2 {
	width: 100%;
}
}




/*----------------------------------------------------------------*/
/*  .starting-date 開講曜日・時間
/*----------------------------------------------------------------*/

.starting-date{
    width: 100%;
    margin: 0 auto;
    padding: 30px 0 40px;
    background: #fff;
    /*border-radius: 20px;*/
    color: #2F2D2D;
}
.starting-date ul{
	width: 85%;
	margin: 0 auto 0;
	display: flex;
	justify-content: center;
}
.starting-date ul li {
	width: calc(96% / 3);
}
.starting-date ul li {
	margin-right: 20px;
}
.starting-date ul li:last-child {
	margin-right: 0px;
}


.starting-date p{
    width: 70%;
    margin: 0 auto;
    padding: 30px 0 0;
    text-align: left;
}


.starting-date p a{
    border-bottom: 1px solid #DC000C;
    padding-bottom: 2px;
    color: #DC000C;
    font-weight: 800;
}
.starting-date ul li div.medal{
	/*display: grid;
	grid-template-columns: 1fr 2.5fr;*/
	background: #FFFED3;
	position: relative;
}
.starting-date ul li div.medal p{
	text-align: left;
	 padding: 10px 0 8px;
	font-weight: 600;
	text-align: center;
	line-height: 1.3;
}
.starting-date ul li div.medal img{
	width:18%;
	/*text-align: right;*/
	position: absolute;
	left: 0px;
	top: 0px;
}

/*------------------------------ responsive ------------------------------*/
@media screen and (max-width: 768px) {
	.starting-date ul{
		width: 85%;
		margin: 0 auto 0;
		display: block;
		}
	.starting-date ul li {
		width: 100% ;
	}
	.starting-date ul li {
		margin-right: 0px;
		margin-bottom: 20px;
	}
	.starting-date p{
		width: 90%;
    margin: 0 auto;
    padding: 10px 0 0;
    text-align: left;
}


	
}


/*----------------------------------------------------------------*/
/*  .starting-date 講師紹介
/*----------------------------------------------------------------*/

.school-detail2{
	background: url("../img/bg-dots4.png") left top / 72px auto repeat;
	padding: 40px 0 30px;
	position: relative;
}
.school-detail2:after{
	content: "";
	position: absolute;
	left: 0;
	bottom: -179px;
	background: url("../img/dec-gray-left-top-s.svg") right top no-repeat;
	width: 86px;
	height: 179px;
	display: block;
}
.school-detail2 h2{
	/*font-size: 4rem;
	line-height: 1.4;
	font-weight: bold;*/
    margin-bottom: 30px;
}
/*.school-detail2 h2 span{
	display: inline-block;
	font-size: 1.8rem;
	line-height: 1.8;
	font-weight: bold;
}*/
.school-detail2 ul li{
	background: #fff;
	padding: 40px 50px;
	position: relative;
	display: flex;
	justify-content: space-between;
	margin-bottom: 70px;
}
.school-detail2 ul li:before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 22px;
	height: 22px;
	background: #E65656;
	display: block;
}
.school-detail2 ul li figure{ width: 172px;}
.school-detail2 ul li figure img{ margin-bottom: 30px;}
.school-detail2 ul li figure figcaption{
	font-size: 2.5rem;
	line-height: 1.4;
	font-weight: bold;
}
.school-detail2 ul li div{
	font-size: 1.6rem;
	text-align: left;
	width: 534px;
}
.school-detail2 ul li a{
	border-bottom: 1px solid #000;
	padding-bottom: 1px;
}

.school-detail2 ul li span{
	background: linear-gradient(transparent 50%, yellow 0%);
	
}

/*------------------------------ responsive ------------------------------*/
@media screen and (max-width: 768px) {
	.school-detail2{ padding: 40px 0 25px;}
	.school-detail2:after{
		bottom: -89px;
		background: url("../img/dec-gray-left-top-s.svg") left top / 43px auto no-repeat;
		width: 43px;
		height: 89px;
	}
	.school-detail2 h2{ margin: 0 0 20px 0;}
	.school-detail2 ul li{
		padding: 25px 20px;
		display: block;
		margin-bottom: 30px;
	}
	.school-detail2 ul li figure{ width: 100%; margin-bottom: 10px;}
	.school-detail2 ul li figure img{ margin-bottom: 20px; width: 143px;}
	.school-detail2 ul li figure figcaption{ font-size: 2rem;}
	.school-detail2 ul li figure figcaption br{ display: none;}
	.school-detail2 ul li div{
		width: 100%;
	}
	
	.comment_box *, .comment_box *:before, .comment_box *:after {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.comment_box {
	position: relative;
}
.comment_box label {
	position: absolute;
	z-index: 1;
	bottom: 0;
	width: 100%;
	height: 140px; /* グラデーションの高さ */
	cursor: pointer;
	text-align: center;
	/* 以下グラデーションは背景を自身のサイトに合わせて設定してください */
	background: linear-gradient(to bottom, rgba(250, 252, 252, 0) 0%, rgba(250, 252, 252, 0.95) 90%);
}
.comment_box input:checked + label {
	background: inherit; /* 開いた時にグラデーションを消す */
}
.comment_box label:after {
	line-height: 2.5rem;
	position: absolute;
	z-index: 2;
	bottom: 20px;
	left: 50%;
	width: 16rem;
	font-family: 'Font Awesome 5 Free';
	content: '\f107'' 続きをよむ';
	transform: translate(-50%, 0);
	letter-spacing: 0.05em;
	color: #ffffff;
	border-radius: 20px;
	background-color: #0F3286;/*rgba(27, 37, 56, 1);*/
	font-weight: 600;
}
.comment_box input {
	display: none;
}
.comment_box .cp_container {
	overflow: hidden;
	height: 150px; /* 開く前に見えている部分の高さ */
	transition: all 0.5s;
}

.comment_box input:checked + label:after {
	font-family: 'Font Awesome 5 Free';
	content: '\f106'' 閉じる';
	font-weight: 600;
}
.comment_box input:checked ~ .cp_container {
	height: auto;
	padding-bottom: 80px; /* 閉じるボタンのbottomからの位置 */
	transition: all 0.5s;
}

	
	
}


/*----------------------------------------------------------------*/
/*  school-detail3 保護者の声
/*----------------------------------------------------------------*/
.school-detail3{
	background: url("../img/school-detail3-pc.svg") left -10px bottom -125px / 90% auto no-repeat;
	padding: 40px 0 200px;
	overflow: hidden;
}
.school-detail3 h2{
    margin: 0 0 30px 0;
}
.school-detail3 h2 span{
	display: inline-block;
	font-size: 1.8rem;
	line-height: 1.8;
	font-weight: bold;
}
.school-detail3 .slick-list{ overflow: visible;}
.school-detail3 .slick-slide{
	line-height: 1.4;
	font-weight: bold;
	text-align: left;
	margin: 0 35px;
	/*opacity: .7;*/
}
.school-detail3 .slick-slide .slide-box{
	padding: 20px 20px 0;
	/*background: url("../img/voice-blue.svg") center / 100% auto no-repeat;*/
	margin-bottom: 5px;
	position: relative;
	border: 2px solid #979797;
	box-shadow: 0px 0px 1px 1px rgb(95, 96, 96, .1);
	background-color: #fff;
	height: auto !important;
    border-radius: 15px;
}

.school-detail3 .slick-slide .slide-box div h3{
	background: #76B015;
	color: #fff;
	padding: 1rem;
	font-size: 1.5rem;
	margin: 0 0 20px;

}

.school-detail3 .slick-slide .slide-box div p{
	overflow: hidden;

}


.school-detail3 .slick-slide .slide-box div.title{
	color: #E65656;
    font-size: 1.8rem;
	margin: 0 0 10px 0;
}
.school-detail3 .slick-slide .slide-box img{
	display: block;
}
.school-detail3 .slick-slide .slide-box p.name{
	background: #76B015;
    color: #fff;
	text-align: center;
	margin: 20px 0;
	padding: 8px 0 8px;
    font-size: 1.5rem;
    font-weight: 400;
}

#cboxWrapper a{
	border-bottom: 1px solid #000;
	padding-bottom: 1px;
}

.school-detail3 .slick-slide .slide-box .more{
    font-size: 1.2rem;
}

#cboxWrapper img{
    padding: 0 0 10px 0;
}
#cboxWrapper div.title{
	color: #E65656;
    font-size: 2.2rem;
	margin: 0 0 10px 0;
}
#cboxWrapper p.name{
	background: #76B015;
    color: #fff;
	text-align: center;
	margin: 20px 0;
	padding: 8px 0 8px;
    font-size: 1.5rem;
    font-weight: 400;
}
.inline-wrap .more{
    color: #E65656;
}

#cboxLoadedContent dl dt{
	color: #76B015;
	
}
#cboxLoadedContent dl dd{
	margin-bottom: 20px;
}
#cboxLoadedContent dl dd.line{
    border-bottom: 1px dotted #000;
    padding-bottom: 20px;
}
#cboxLoadedContent dl dd ul{
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin: 20px auto 0px;
	gap: 10px;
}


.school-color-green{background: #76B015;}
.school-color-yellow{background: #FFEC00;}
.school-color-skyblue{background: #00A2E9;}
.school-color-purple{background: #8B76B2;}
.school-color-red{background: #DC000C;}
.school-color-pink{ background: #E65656}



.school-detail3 .slick-track
{
    position: relative;
    top: 0;
    left: 0;
    display: flex;
	align-items: stretch;
    margin-left: auto;
    margin-right: auto;
}
.school-detail3 .slick-track:before,
.school-detail3 .slick-track:after
{
    display: none;
    content:none;
}
.school-detail3 .slick-track:after
{
    content:none;
}
.school-detail3 .slick-loading .slick-track
{
    visibility: hidden;
}

.school-detail3 .slick-slide
{
    display: flex;
	align-items: stretch;
    float: none;
    height: auto;
    min-height: 1px;
}
.school-detail3 .slick-slide > div
{
    height: auto;
}


.school-detail3 .slick-slide {
    display: flex;
    flex-direction: column; /* 子要素を縦に配置するために flex-direction を指定 */
    height: 100%; /* 要素が親要素の高さを占めるように height を 100% に設定 */
}

.school-detail3 .slick-slide .slide-box {
    flex: 1; /* 子要素を均等に伸縮させるために flex を 1 に設定 */
    display: flex;
    flex-direction: column;
}

.school-detail3 .slick-prev{ position: absolute; left: 43%; bottom: -120px; width: 74px; height: 74px; background: url("../img/ic-slideleft.svg") no-repeat; cursor: pointer;}
.school-detail3 .slick-next{ position: absolute; right: 43%; bottom: -120px; width: 74px; height: 74px; background: url("../img/ic-slideright.svg") no-repeat; cursor: pointer;}





/*------------------------------ responsive ------------------------------*/
@media screen and (max-width: 768px) {
	.school-detail3{
		background: url("../img/school-detail3-sp.svg") center bottom -80px / cover no-repeat;
		padding: 0px 0 100px;
	}
	/*.school-detail3 h2{ margin: 0 0 20px 0;}*/
    .school-detail3 h2{margin-bottom: 10px;}
    .school-detail3 .slick-slider{ padding-top: 00px;}
	.school-detail3 .slick-slide{
		margin: 0 10px;
		transform: scale(1.0);
	}
	.school-detail3 .slick-slide.slick-current{ transform: scale(1.0);}
	.school-detail3 .slick-slide .slide-box p{ font-size: 3vw;}
	.school-detail3 .slick-prev{ position: absolute; left: 30%; bottom: -90px; width: 60px; height: 60px; background: url("../img/ic-slideleft.svg") center / 60px auto no-repeat; cursor: pointer;}
	.school-detail3 .slick-next{ position: absolute; right: 30%; bottom: -90px; width: 60px; height: 60px; background: url("../img/ic-slideright.svg") center / 60px auto no-repeat; cursor: pointer;}
	.school-detail3 .slick-slide .name{
		bottom: 5px;
	}
	.school-detail3 .slick-slide.slick-current .name{ display: block; font-size: .8rem;}
    #cboxWrapper img{
        padding: 0 0 10px 0;
    }
    #cboxWrapper div.title{
        color: #E65656;
        font-size: 1.8rem;
        margin: 0 0 10px 0;
    }
    #cboxWrapper p.name{
        font-size: 1.3rem;
    }
}


/*----------------------------------------------------------------*/
/*  .school-detail7 よくあるご質問
/*----------------------------------------------------------------*/
.school-detail7{
	color: #fff;
	background: #0F3286;
	position: relative;
	padding: 40px 0 50px;
    font-size: 1.6rem;
}
.school-detail7 h2{
    margin: 0 0 30px 0;
}
.school-detail7 .faq li{
	border: 2px solid #fff;
	border-radius: 15px;
	margin: 0 0 30px 0;
}
.school-detail7 .faq li dl dt{
	background: #fff;
	color: #0F3286;
	border-radius: 12px 12px 0 0;
	text-align: left;
	padding: 20px 20px 20px 80px;
	position: relative;
	font-weight: 600;
}
.school-detail7 .faq li dl dt:before{
	display: inline;
	content: "Q";
	border: 2px solid #0F3286;
	border-radius: 50%;
	width: 45px;
	height: 25px;
	position: absolute;
	left: 20px;
	top: calc(50% - 23px);
	text-align: center;
	vertical-align: middle;
	font-size: 2.6rem;
	padding-bottom: 40px;
	font-family: 'Khand', sans-serif; font-weight: 500!important;
}
.school-detail7 .faq li dl dd{
	text-align: left;
	padding: 20px 20px 20px 80px;
	position: relative;
}

.school-detail7 .faq li dl dd:before{
	display: inline;
	content: "A";
	border: 2px solid #fff;
	border-radius: 50%;
	width: 45px;
	height: 25px;
	position: absolute;
	left: 20px;
	top: calc(50% - 23px);
	text-align: center;
	vertical-align: middle;
	font-size: 2.6rem;
	padding-bottom: 40px;
	font-family: 'Khand', sans-serif; font-weight: 500!important;
}




.school-detail7 .wrap div{
    color: #0F3286;
	background: #fff;
	padding: 20px 0 ;
    border-radius: 15px;
    font-size: 1.2rem;
    text-align: left;
}
.school-detail7 .wrap div dl{
    color: #0F3286;
	background: #fff;
	padding: 0 20px;
}

.cp_box *, .cp_box *:before, .cp_box *:after {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.cp_box {
	position: relative;
}
.cp_box label {
	position: absolute;
	z-index: 1;
	bottom: 0;
	width: 100%;
	height: 40px; /* グラデーションの高さ */
	cursor: pointer;
	text-align: center;
	/* 以下グラデーションは背景を自身のサイトに合わせて設定してください */
	background: linear-gradient(to bottom, rgba(250, 252, 252, 0) 0%, rgba(250, 252, 252, 0.95) 90%);
	border-radius: 0 0 15px 15px;
}
.cp_box input:checked + label {
	background: inherit; /* 開いた時にグラデーションを消す */
}
.cp_box label:after {
	line-height: 2.5rem;
	position: absolute;
	z-index: 2;
	bottom: 0px;
	left: 50%;
	width: 16rem;
	font-family: "Font Awesome 5 Free";
	content: '\f107'' 続きをよむ';
	transform: translate(-50%, 0);
	letter-spacing: 0.05em;
	color: #666;
	font-weight: 600;
	font-size: 1.1rem;
	
	/*background-color: rgba(27, 37, 56, 1);*/
}
.cp_box input {
	display: none;
}
.cp_box .cp_container {
	overflow: hidden;
	height: 40px; /* 開く前に見えている部分の高さ */
	transition: all 0.5s;
}

.cp_box input:checked + label:after {
	font-family: "Font Awesome 5 Free";
	content: '\f106'' 閉じる';
	font-weight: 600;
}
.cp_box input:checked ~ .cp_container {
	height: auto;
	padding-bottom: 20px; /* 閉じるボタンのbottomからの位置 */
	transition: all 0.5s;
}

/*------------------------------ responsive ------------------------------*/
@media screen and (max-width: 768px) {
}







.school-detail4{ padding-top: 50px; padding-bottom: 160px; background: #E65656; overflow: hidden; position: relative;}
.school-detail4.pattern2{ background: #E65656;}
.school-detail4:after{ display: block; content: ""; position: absolute; left: 0; top: 0; width: 100px; height: 100%; background: url("../img/school-detail4-bg.svg") left bottom no-repeat; z-index: 9;}
.school-detail4 .wrap{ text-align: left;}
.school-detail4 .wrap:after{display: block; content: ""; position: absolute; top: 0;
	height: 100%; background: #E65656; z-index: 9;
	width: 1000px;
	right: calc(50% + 190px);
}
.school-detail4 h2{ margin-left: 75px; margin-bottom: 2em; color: #fff; font-size: 2rem; letter-spacing: .1em; line-height: 1;}
.school-detail4 h2 span{ display: inline-block; padding-bottom: .2em; font-size: 5.6rem;}
.school-detail4 .wrap .leftcol{
	position: absolute;
	z-index: 99;
	top: 30%;
	right: calc(55% + 190px);
	width: 310px;
}
.school-detail4 .slick-slider{ margin-left: 320px; width: 297px;}
.school-detail4 .slick-slider .slick-list{ overflow: visible;}
.school-detail4 .slick-slider .slick-prev{ position: absolute; left: 140px; bottom: -110px; width: 74px; height: 74px; background: url("../img/ic-slideleft-white.svg") no-repeat; cursor: pointer;}
.school-detail4 .slick-slider .slick-next{ position: absolute; right: -40px; bottom: -110px; width: 74px; height: 74px; background: url("../img/ic-slideright-white.svg") no-repeat; cursor: pointer;}
.school-detail4 .slick-slider .slick-slide{ padding-right: 30px; line-height: 1.5; max-width: 327px;}
.school-detail4 .slick-slider .slick-slide a{ display: block; background: #fff; border-radius: 0 40px 0 0; box-shadow: 5px 5px 10px rgba(0,0,0,.16); overflow: hidden;}
.school-detail4 .slick-slider .slick-slide a div{ padding: 30px 25px;}
.school-detail4 .slick-slider .slick-slide a div p.tag{ display: inline-block; padding: .4em 1em; color: #fff; font-size: 1.2rem; font-weight: bold; line-height: 1.4; background: #F7A31C; border-radius: 100px;}
.school-detail4 .slick-slider .slick-slide a div .ttl{ padding: .4em 0; color: #0F3286; font-size: 1.8rem; font-weight: bold;}
.school-detail4 .slick-slider .slick-slide a div p.txt{ margin-bottom: .8em;}
.school-detail4 .slick-slider .slick-slide a div p.date{ display: inline-block; margin-right: 1em; color: #898989; font-size: 1.2rem; font-weight: bold;}
.school-detail4 .slick-slider .slick-slide a div p.loc{ display: inline-block; color: #898989; font-size: 1.2rem; font-weight: bold;}
.school-detail4 p.btn a{ width: 100%;}

.school-detail5{ padding: 50px 0 200px;}















.school-detail1 .starting-date h2{
    padding: 0 0 0 0;
    margin: 0 0 30px 0; 
    border-bottom: none;
}


.school-color-green{background: #76B015;}
.school-color-yellow{background: #FFEC00;}
.school-color-skyblue{background: #00A2E9;}
.school-color-purple{background: #8B76B2;}
.school-color-red{background: #DC000C;}
.school-color-pink{ background: #E65656}



/*ジュニア・プログラミング検定タグ部分*/
.school-detail1-tag1 {
	background-color: #fff; 
	padding: 7px 10px 5px;
	display: inline-block;
	border-radius: 20px;
	text-align: center;
	color: #333;
	font-family: 'Khand', sans-serif; font-weight: 500!important;
    font-weight: 600;
}
.school-detail1-tag1 img {
	display: block;
	width: 80%;
	margin: 0 auto;
}
.school-detail1-tag1 div {
    margin: 5px;
    background: #265BA7;
    color: #FFEC00;
    
}
.school-detail1-tag1 div span {
	font-size: 1.8rem;
}
.school-detail1-tag1 p {
    text-align: center;
	font-size: 1.7rem;
    line-height: 0.9;
    font-weight: 600;
}
.school-detail1-tag1 p strong {
	font-size: 4.8rem;
    padding-left: 10px;
    padding-right: 5px;
    color: #DC000C;
}
.school-detail1-tag1 p span {
	font-size: 2.0rem;
}
.school-detail1-tag1 p small {
	font-size: 1.0rem;
}



/*------------------------------ responsive ------------------------------*/
@media screen and (max-width: 768px) {
    .school-detail1-tag1 {
        border-radius: 13px;
        font-size: 1.4rem;
    }
    .school-detail1-tag1 img {
        width: 70%;
    }
    .school-detail1-tag1 div {
        margin: 5px 0 3px;
    }
    .school-detail1-tag1 p {
        font-size: 1.5rem;
    }
    .school-detail1-tag1 p strong {
        font-size: 4.0rem;
    }
    .school-detail1-tag1 p small {
	font-size: 1.2rem;
    }
}





/*CRA部分1 TOP*/
.school-detail-cta1{
	width: 920px;
	margin: 20px auto;
}
.school-detail-ctaWrap{
	background: url("../img/school-bg.svg") center top repeat;
	padding: 30px 0 30px;
}
.school-detail-cta2{
	background: url(../img/school-bg.svg) center top repeat;
	width: 600px;
	margin: 30px auto;
}


/*CRA部分1 TOP 入会金無料*/
.school-detail-cta1 .no_admission_fee div, .school-detail-cta2 .no_admission_fee div{
	width: 80%;
	margin: 0 auto;
}

/*-------------------------- responsive --------------------------*/
@media screen and (max-width: 768px) {
	
}

.school-detail-cta1 dl{
	display: flex;
	justify-content: space-around;
	padding: 30px 0;
}
/*img*/
.school-detail-cta1 dl dt{
	width : 320px;
	/*height: 200px;
	background: #555;*/
}
/*文章部分*/
.school-detail-cta1 dl dd{
	width : 600px;
}

.school-detail-cta1 dl dd .form-attention,
.school-detail-cta2 .form-attention{
    width: 80%;
    margin: 0 auto;
}
.school-detail-cta1 dl dd .form-attention p,
.school-detail-cta2 .form-attention p{
    width: 100%;
    font-size: 1.6rem;
    text-align: center;
	position: relative;
	margin: 25px auto 20px;
    padding: 5px 0 0;
	letter-spacing: .1rem;
	font-weight: 800;
    line-height: 1.3;
}
.school-detail-cta1 dl dd .form-attention p:before,
.school-detail-cta2 .form-attention p:before {
    position: absolute;
    left: 25px;
    top: 0;
    content: "";
    width: 5px;
    height: 80px;
    background: #265BA7;
    border-radius: 10px;
    transform: rotate(-25deg);	
}
       
.school-detail-cta1 dl dd .form-attention p:after,
.school-detail-cta2 .form-attention p:after {
    position: absolute;
    content: "";
    right: 25px;
    top: 0;
    width: 5px;
    height: 80px;
    background: #265BA7;
    border-radius: 10px;
    transform: rotate(25deg);
}
.school-detail-cta1 .form-attention p strong,
.school-detail-cta2 .form-attention p strong{
    font-family: "corporate-logo-ver2", sans-serif;
    /*font-family: 'Khand', sans-serif;*/
    font-weight: 800!important;
    letter-spacing: 1;
    font-size: 4.0rem;
    /*line-height: 1.2;*/
    color: #D00003;
}
.school-detail-cta1 .form-attention p span,
.school-detail-cta2 .form-attention p span{
    /*font-size: 1.8rem;*/
    padding: 3px 8px;
	font-weight: 800;
    background:#265BA7;
    color: #fff;
}

.school-detail-cta1 .btn,
.school-detail-cta1 a.btn,
.school-detail-cta1 button.btn,
.school-detail-cta2 .btn,
.school-detail-cta2 a.btn,
.school-detail-cta2 button.btn{
  /*font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;*/
  position: relative;
  display: inline-block;
  /*padding: 1rem 3rem;*/
  cursor: pointer;
  /*-webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;*/
  user-select: none;
  /*-webkit-transition: all 0.3s;*/
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  /*letter-spacing: 0.1em;*/
  color: #212529;
  border-radius: 0.5rem;
}

.school-detail-cta1 a.btn-c-05,
.school-detail-cta2 a.btn-c-05{
    padding: 2rem 14rem;
    font-size: 2.6rem;
    position: relative;
    border-radius: 100vh;
}

.school-detail-cta1 a.btn-c-05:before,
.school-detail-cta2 a.btn-c-05:before{
	box-sizing: inherit;
	content: "";
    font-family: 'Font Awesome 5 Free';
    font-size: 2.6rem;
    line-height: 1;
    position: absolute;
    top: calc(50% - 1.1rem);
    right: 2rem;
    margin: 0;
    padding: 0;
    content: '\f054';
}

.school-detail-cta1 a.btn--yellow,
.school-detail-cta2 a.btn--yellow{
  color: #000;
  background-color: #FFCE00 ;
  border-bottom: 5px solid #D4AB00;
  font-weight: 600;
}

.school-detail-cta1 a.btn--yellow:hover,
.school-detail-cta1 a.btn--yellow:hover{
  margin-top: 3px;
  color: #000;
  background: #fff20a;
  border-bottom: 2px solid #ccc100;
}
/*-------------------------- responsive --------------------------*/
@media screen and (max-width: 768px) {
	.school-detail-cta1{
        width: 90%;
        margin: 20px auto;
    }	
    .school-detail-cta2{
        width: 100%;
        margin: 30px auto;
    }
    .school-detail-cta1 dl{
        display: block;
        justify-content: space-around;
        padding: 15px 0;
    }
    .school-detail-cta1 dl dt{
        width : 80%;
        margin: 0 auto;
    }
    
    .school-detail-cta1 dl dd{
        width : 100%;
    }
    .school-detail-cta1 dl dd .form-attention{
        width: 100%;
        margin: 0 auto 20px;
    }
    .school-detail-cta2 .form-attention{
        width: 95%;
    }
    .school-detail-cta1 .form-attention p strong,
    .school-detail-cta2 .form-attention p strong{
        font-family: "corporate-logo-ver2", sans-serif;
        font-weight: 800!important;
        letter-spacing: 1;
        font-size: 3.0rem;
        line-height: 1.5;
    }
    .school-detail-cta1 .form-attention p span,
    .school-detail-cta2 .form-attention p span{
        font-size: 1.4rem;
    }
    .school-detail-cta1 a.btn-c-05,
    .school-detail-cta2 a.btn-c-05{
        padding: 2rem 9rem;
        line-height: 1.2;
        font-size: 2.0rem;
    }
	.school-detail-cta2 .movieSP  {
		position: relative;
		width: 90%;
		margin: 0 auto;
	}
	.school-detail-cta2 .movieSP:before {
		content:"";
		display: block;
		padding-top: 56.25%;
	}
	.school-detail-cta2 .movieSP iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
}


/*------------------------------ responsive ------------------------------*/
@media screen and (max-width: 768px) {
    
    .sliderSet {width:92%;}
    .sliderSet img {width:88vw;}
    
 	.lower-main figure.school-detail1-app-main{ background: none;}
	

	.school-detail1:after{
		bottom: -165px;
		background: url("../img/dec-blue-right-top2.svg") right top / 78px auto no-repeat;
		width: 78px;
		height: 165px;
	}
	.school-detail1 h1{
		font-size: 2.6rem;
		line-height: 1.4;
	}
	.school-detail1 h1 span{
		font-size: 1.2rem;
		line-height: 1.8;
	}
	.school-detail1 h2{ font-size: 2.8rem;}

	.school-detail1 .clm2{
		display: block;
		margin-bottom: 20px;
	}
	.school-detail1 .clm2 dl{ width: 100%;}
	.school-detail1 .clm2 dl dd{ margin-bottom: 40px;}
	.school-detail1 .w866{
		width: 100%;
		margin-left: 0;
	}



	.school-detail4{ padding-top: 30px; padding-bottom: 80px; background: #E65656;}
	
	.school-detail4:after{ content: none;}
	.school-detail4 .wrap:after{
		right: inherit;
		left: 0;
		width: 8%;
	}
	.school-detail4 h2{ margin-left: 30px; margin-bottom: 1.5em; font-size: 1.6rem;}
	.school-detail4 h2 span{ font-size: 4.8rem;}
	.school-detail4 .slick-slider{ margin-left: 0; padding-bottom: 100px; width: auto;}
	.school-detail4 .slick-slider .slick-prev{ left: calc(50% - 70px); top: auto; bottom: 20px; transform: none; width: 60px; height: 60px; background-size: contain;}
	.school-detail4 .slick-slider .slick-next{ right: calc(50% - 70px); top: auto; bottom: 20px; transform: none; width: 60px; height: 60px; background-size: contain;}
	.school-detail4 .slick-slider .slick-slide{ padding: 0 10px; max-width: inherit;}
	.school-detail4 .slick-slider .slick-slide a{ display: block;}
	.school-detail4 .slick-slider .slick-slide a img{ width: 100%;}
	.school-detail4 .slick-slider .slick-slide a div{ width: auto; padding: 20px 8%;}
	.school-detail4 p.btn{ position: relative; right: auto; top: auto; text-align: center; margin: 0; z-index: 99;}
	.school-detail4 .wrap .leftcol{
		position: static;
		width: 100%;
	}
	.school-detail5{ padding: 50px 0 100px;}
}

/*---------------------------------------------------------------------------------------
	pagetop
----------------------------------------------------------------------------------------*/
.pagetop {
    height: 60px;
    width: 60px;
    position: fixed;
    right: 50px;
    bottom: 140px;
    background: #fff100;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
	opacity: 0;
	transition: opacity 0.5s ease;
	z-index: 200;
}
.pagetop__arrow {
    height: 10px;
    width: 10px;
    border-top: 3px solid #000;
    border-right: 3px solid #000;
    transform: translateY(20%) rotate(-45deg);
}
/* fadeinクラスがついた時だけ表示する */
.pagetop.fadein {
  opacity: 1;
}

/*------------------------------ responsive ------------------------------*/
@media screen and (max-width: 1400px) {
    .pagetop {
        right: 30px;
        bottom: 80px;
    }
}

/*------------------------------ responsive ------------------------------*/
@media screen and (max-width: 768px) {
    .pagetop {
        right: 20px;
        bottom: 100px;
    }
}








/*---------------------------------------------------------------------------------------
	/trial-app
----------------------------------------------------------------------------------------*/

.lower-main figure.trial-app-main{ background: url("../img/trial-app-main-sp.png") left bottom / cover no-repeat;}

/*------------------------------ responsive ------------------------------*/
@media screen and (max-width: 768px) {
	.lower-main figure.trial-app-main{ background: none;}
}




.p-article-header__cover {
  position: relative;
  padding-bottom: 56.25%;
  /* アスペクト比 16:9 */
  height: 0;
  overflow: hidden;
  background-size: cover;
}

.p-article-header__cover-text {
  position: absolute;
  bottom: 0;
  width: 52%;
  height: 15%;
  color: #fff;
  background: rgba(0, 0, 0, 0.75);
}

@media screen and (max-width: 720px) {
  .p-article-header__cover-text {
    width: 100%;
    height: 25%;
  }
}

.p-article-header__cover-text--main {
  font-size: 1.8rem;
  margin: .5rem 0 0 .5em;
}

@media screen and (max-width: 720px) {
  .p-article-header__cover-text--main {
    font-size: 13px;
  }
}

.p-article-header__cover-text--sub {
  margin: 0;
}

@media screen and (max-width: 720px) {
  .p-article-header__cover-text--sub {
    font-size: 10px;
  }
}

.p-article__preview {
  width: 98%;
  height: auto;
  margin: 0 auto;
}

.study_playLP .typingContList .u-flex-title {
  margin: 1.3em;
}

.u-flex {
  display: flex;
  justify-content: space-between;
  width: 24%;
  margin: 2.5em 1.5em;
}

@media screen and (max-width: 720px) {
  .u-flex {
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    margin: 1.5em auto;
  }
  .u-p1 {
    width: 45%;
  }
}

.lead-left {
  text-align: left;
  margin: 2em;
}

.last .bonus ul {
  display: flex;
}

.last .bonus li {
  text-align: left;
  border: none;
  margin: 2em auto;
}

.learn06 .sep01 li {
  border: none;
  margin: 2em auto;
}

.bonus_text {
  margin-left: 3em !important;
  margin-right: 3em !important;
}

.last .info_text {
  margin-left: 2em !important;
  margin-right: 2em !important;
}

@media screen and (max-width: 720px) {
  .last .bonus ul {
    display: block;
  }
  .last .bonus li {
    margin: 15px;
  }
  .bonus_text {
    margin-left: 15px !important;
    margin-right: 15px !important;
  }
  .learn06 .sep01 li {
    margin: 0 auto;
  }
  .last .info_text {
    margin-left: 15px !important;
    margin-right: 15px !important;
  }
}

/*style.css 464-*/
.p-article__body hr {
  clear: both;
  border-width: 5px 0 0 0;
  border-style: dotted;
  border-color: #dee2e6; }
.p-article__body figure {
  margin-left: auto;
  margin-right: auto; }
  .p-article__body figure.photo {
    box-sizing: border-box;
    width: 50%;
    background: #fff; }
    @media screen and (min-width: 720px) {
      .p-article__body figure.photo {
        float: right;
        margin-left: 1.7rem !important; } }
    @media screen and (max-width: 720px) {
      .p-article__body figure.photo {
        width: 100%; } }
    @media screen and (min-width: 720px) {
      .p-article__body figure.photo--left {
        float: left;
        margin-left: 0 !important;
        margin-right: 1.7rem !important; } }
  .p-article__body figure.button {
    max-width: 400px; }
  .p-article__body figure img {
    box-sizing: border-box;
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
    margin: 0 auto;
  }
.p-article__body .chart-block-list {
  display: flex;
  justify-content: space-between;
  margin: 2em auto;
}
  .p-article__body .chart-block-list > * {
    width: 30%; }
  @media screen and (max-width: 720px) {
    .p-article__body .chart-block-list {
      display: block; }
      .p-article__body .chart-block-list > * {
        width: 96%;
        height: auto;
        margin: 2em .5em; } }
.p-article__body .chart-block {
  border-radius: .5rem;
  box-sizing: content-box; }
  .p-article__body .chart-block__heading {
    font-size: 1.2rem;
    font-weight: bold;
    text-align: center;
    line-height: 3.4rem; }
  @media screen and (max-width: 720px) {
    .p-article__body .chart-block__body {
      display: flex; } }
  .p-article__body .chart-block__chart {
    margin: 0 auto;
    max-width: 150px; }
    @media screen and (max-width: 720px) {
      .p-article__body .chart-block__chart {
        width: 35%; } }
  .p-article__body .chart-block__legends {
    list-style: none;
    position: relative; }
    @media screen and (max-width: 720px) {
      .p-article__body .chart-block__legends {
        width: 65%; } }
    .p-article__body .chart-block__legends li {
      line-height: 1rem;
      padding-left: 4rem;
      margin: 1rem 0;
      border: none; }
      .p-article__body .chart-block__legends li:before {
        content: '';
        display: block;
        position: absolute;
        left: 2rem;
        width: 1.5rem;
        height: 1rem;
        border-radius: .1rem; }
    .p-article__body .chart-block__legends--pink:before {
      background: #e1609f; }
    .p-article__body .chart-block__legends--green:before {
      background: #9cc825; }
    .p-article__body .chart-block__legends--gray:before {
      background: #adb5bd; }
.p-article__body .quiz-accordion__heading {
  line-height: 3.4rem;
  padding-left: 1rem;
  border: 1px solid #e1609f;
  border-width: 1px 0;
  cursor: pointer;
  background: #fceef4;
  transition-duration: .2s; }
  .p-article__body .quiz-accordion__heading:before {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: .5em;
    line-height: 1em;
    vertical-align: -.1667em;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23e1609f" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>');
    background-size: contain;
    transition: all 0.2s ease-in-out; }
  .p-article__body .quiz-accordion__heading:hover {
    text-decoration: underline;
    background: #f9e1ed; }
.p-article__body .quiz-accordion__body {
  height: 0;
  overflow: hidden;
  transition: all .2s ease-in-out;
  background: #fceef4; }
  .p-article__body .quiz-accordion__body--inner {
    padding: 1.7rem; }
.p-article__body .quiz-accordion.is-open .quiz-accordion__heading:before {
  transform: rotate(180deg); }
.p-article.interview .interviewer {
  color: #2e97a3;
  display: block;
  margin-bottom: -.85em; }
.p-article.interview .bonus {
  position: relative;
  border: dashed 3px #dee2e6;
  border-radius: 1rem; }
  .p-article.interview .bonus__title {
    position: absolute;
    display: inline-block;
    top: -0.85rem;
    background: #fff;
    color: #495057;
    line-height: 1.7rem; }
.p-article.interview .conclusion {
  position: relative;
  border: solid 3px #77cfd9;
  border-radius: 1rem; }
  .p-article.interview .conclusion__title {
    position: absolute;
    display: inline-block;
    top: -0.85rem;
    background: #fff;
    color: #69b6bf;
    line-height: 1.7rem; }
.p-article.interview strong {
  background: rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #ffe187 0%) repeat scroll 0 0; }
.p-article.quiz h2 {
  margin: 3.4rem 0 1.7rem 0; }
  .p-article.quiz h2:before {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: .25em;
    line-height: 1em;
    vertical-align: -.1667em;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23e1609f" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check"><polyline points="20 6 9 17 4 12"></polyline></svg>');
    background-size: contain; }
.p-article.quiz h3 {
  margin: 1.7rem 0 0.85rem 0; }
.p-article__backNumber {
  border: 2px solid #b9db3d;
  border-radius: 10px;
  overflow: hidden; }
  .p-article__backNumber h3 {
    line-height: 3.4rem;
    background: #b9db3d;
    text-align: center; }
  .p-article__backNumberIssue ol {
    padding: 0 0 0 1.5em; }

.interview_float_c {clear: both;}

.p-article__body .chart-block, .p-article__body figure.photo {
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2) !important; 
}

.u-list--checkList {
  list-style: none; }
  @media screen and (max-width: 720px) {
    .u-list--checkList {
      padding: 0; } }
.u-list--checkList li:before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: .5em;
  line-height: 1em;
  vertical-align: -.1667em;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%2369b6bf" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check-square"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>');
  background-size: contain; 
}
.u-animation--blink {
  animation: keyframesBlink 1s infinite alternate; 
  }
.u-figure--pile {
  position: relative;
  padding-bottom: 44.44%;
 /* アスペクト比 9:4 */
  height: 0;
  overflow: hidden; }
.u-figure--pile img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.learn07 .quiz-select {
  font-size: 18px;
  font-weight: 800;
  margin: 2em;
}

.learn07 .quiz-select li {
  border: none;
  display: inline;
  margin: 1em 1em 0;
}

.l_space,.l_space_p {padding: 1em 2em;}

@media screen and (max-width: 720px) {
  .l_space {padding: 0 1em;}
  .l_space_p {padding: 1em !important;}
  .learn07 .quiz-select {
    font-size: 16px;
    margin: 2em 0;
  }
  .learn07 .quiz-select li {
    display: block;
  } 
  .quiz-pic {padding: 20px 15px;}
}

.study_playLP #learn .c-wrap-12 p {margin-bottom: 1em;}






.u-animation--blink {
animation: keyframesBlink 1s infinite alternate; }

@keyframes keyframesBlink {
0% {
  opacity: 0%; }
100% {
  opacity: 100%; } }

.u-block__half {
width: 50% !important; }

.u-block__third {
width: 33.32% !important; }

.u-block__quarter {
width: 25% !important; }

.u-block__pc4sm2 {
width: 25% !important; }
@media screen and (max-width: 720px) {
  .u-block__pc4sm2 {
    width: 50% !important; } }
.u-block__pc3sm1 {
width: 33.32% !important; }
@media screen and (max-width: 720px) {
  .u-block__pc3sm1 {
    width: 100% !important; } }
.u-block__pc75sm100 {
width: 75% !important; }
@media screen and (max-width: 720px) {
  .u-block__pc75sm100 {
    width: 100% !important; } }
.u-block__pc67sm100 {
width: 66.7% !important; }
@media screen and (max-width: 720px) {
 .u-block__pc67sm100 {
  width: 100% !important; } }
.u-container {
 margin: 0 auto;
 max-width: 900px; }

.u-figure--pile {
 position: relative;
 padding-bottom: 44.44%;
/* アスペクト比 9:4 */
 height: 0;
 overflow: hidden; }
.u-figure--pile img {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%; }
.u-figure--3by4 {
 width: 75%; }
.u-figure--3by4 img {
 width: auto;
 height: auto; }

.u-float--right {
float: right !important; }

.u-float--left {
float: left !important; }

.u-float--clear {
width: 0 !important;
height: 0 !important;
overflow: hidden !important;
clear: both !important; }

.u-list--checkList {
list-style: none; }
@media screen and (max-width: 720px) {
  .u-list--checkList {
    padding: 0; } }
.u-list--checkList li:before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: .5em;
  line-height: 1em;
  vertical-align: -.1667em;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%2369b6bf" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check-square"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>');
  background-size: contain; }

.u-ml-1, .p-article__body .chart-block-list, .u-ml-1--only-pc {
margin-left: -0.425rem !important; }
@media screen and (max-width: 720px) {
  .u-ml-1--only-pc {
    margin-left: inherit !important; } }
.u-ml0, .u-m0, .p-article__backNumberIssue ol, .p-article__backNumberIssue h4, .p-article__backNumber h3, .u-mx0, .u-ml0--only-pc {
margin-left: 0 !important; }
@media screen and (max-width: 720px) {
  .u-ml0--only-pc {
    margin-left: inherit !important; } }
.u-ml1, .u-m1, .p-article__body .chart-block, .u-mx1, .p-article.interview .conclusion__title, .p-article.interview .bonus__title, .u-ml1--only-pc {
margin-left: 0.425rem !important; }
@media screen and (max-width: 720px) {
  .u-ml1--only-pc {
    margin-left: inherit !important; } }
.u-ml2, .u-m2, .p-article__backNumberIssue, .p-article__body .chart-block__legends, .u-mx2, .p-article__body .chart-block__body, .u-ml2--only-pc {
margin-left: 0.85rem !important; }
@media screen and (max-width: 720px) {
  .u-ml2--only-pc {
    margin-left: inherit !important; } }
.u-ml3, .u-m3, .u-mx3, .u-ml3--only-pc {
margin-left: 1.7rem !important; }
@media screen and (max-width: 720px) {
  .u-ml3--only-pc {
    margin-left: inherit !important; } }
.u-ml4, .u-m4, .u-mx4, .u-ml4--only-pc {
margin-left: 2.55rem !important; }
@media screen and (max-width: 720px) {
  .u-ml4--only-pc {
    margin-left: inherit !important; } }
.u-ml5, .u-m5, .u-mx5, .u-ml5--only-pc {
margin-left: 5.1rem !important; }
@media screen and (max-width: 720px) {
  .u-ml5--only-pc {
    margin-left: inherit !important; } }
.u-mt-1, .p-article__body .chart-block-list {
margin-top: -0.425rem !important; }

.u-mt0, .p-article-header__title, .u-m0, .p-article__backNumberIssue ol, .p-article__backNumberIssue h4, .p-article__backNumber h3, .u-my0 {
margin-top: 0 !important; }

.u-mt1, .u-m1, .p-article__body .chart-block, .u-my1, .p-article__body .chart-block__legends li {
margin-top: 0.425rem !important; }

.u-mt2, .u-m2, .p-article__backNumberIssue, .p-article__body .chart-block__legends, .u-my2, .p-article__body figure {
margin-top: 0.85rem !important; }

.u-mt3, .u-m3, .u-my3, .p-article__body p, .p-article {
margin-top: 1.7rem !important; }

.u-mt4, .p-article__backNumber, .u-m4, .u-my4, .p-article.interview .conclusion, .p-article.interview .bonus, .p-article__body hr, .p-article-header__cover {
margin-top: 2.55rem !important; }

.u-mt5, .u-m5, .u-my5 {
margin-top: 5.1rem !important; }

.u-mr-1 {
margin-right: -0.425rem !important; }

.u-mr0, .u-m0, .p-article__backNumberIssue ol, .p-article__backNumberIssue h4, .p-article__backNumber h3, .u-mx0 {
margin-right: 0 !important; }

.u-mr1, .u-m1, .p-article__body .chart-block, .u-mx1, .p-article.interview .conclusion__title, .p-article.interview .bonus__title {
margin-right: 0.425rem !important; }

.u-mr2, .u-m2, .p-article__backNumberIssue, .p-article__body .chart-block__legends, .u-mx2, .p-article__body .chart-block__body {
margin-right: 0.85rem !important; }

.u-mr3, .u-m3, .u-mx3 {
margin-right: 1.7rem !important; }

.u-mr4, .u-m4, .u-mx4 {
margin-right: 2.55rem !important; }

.u-mr5, .u-m5, .u-mx5 {
margin-right: 5.1rem !important; }

.u-mb-1 {
margin-bottom: -0.425rem !important; }

.u-mb0, .u-m0, .p-article__backNumberIssue ol, .p-article__backNumberIssue h4, .p-article__backNumber h3, .u-my0 {
margin-bottom: 0 !important; }

.u-mb1, .u-m1, .p-article__body .chart-block, .u-my1, .p-article__body .chart-block__legends li {
margin-bottom: 0.425rem !important; }

.u-mb2, .u-m2, .p-article__backNumberIssue, .p-article__body .chart-block__legends, .u-my2, .p-article__body figure {
margin-bottom: 0.85rem !important; }

.u-mb3, .p-article__backNumber, .p-article-header__title, .u-m3, .u-my3, .p-article__body p, .p-article {
margin-bottom: 1.7rem !important; }

.u-mb4, .u-m4, .u-my4, .p-article.interview .conclusion, .p-article.interview .bonus, .p-article__body hr, .p-article-header__cover {
margin-bottom: 2.55rem !important; }

.u-mb5, .u-m5, .u-my5 {
margin-bottom: 5.1rem !important; }

.u-mx--auto {
margin-left: auto !important;
margin-right: auto !important; }

.u-pl0, .u-p0, .p-article__body .chart-block__legends, .u-px0 {
padding-left: 0 !important; }

.u-pl1, .u-p1, .p-article__body figure.photo, .u-px1 {
padding-left: 0.425rem !important; }

.u-pl2, .u-p2, .p-article-header__cover-text, .p-article-header__title, .u-px2, .p-article.interview .conclusion__title, .p-article.interview .conclusion, .p-article.interview .bonus__title, .p-article.interview .bonus, .p-article-header__info--volume {
padding-left: 0.85rem !important; }

.u-pl3, .u-p3, .p-article, .u-px3 {
padding-left: 1.7rem !important; }

.u-pl4, .u-p4, .u-px4 {
padding-left: 2.55rem !important; }

.u-pl5, .u-p5, .u-px5 {
padding-left: 5.1rem !important; }

.u-pt0, .u-p0, .p-article__body .chart-block__legends, .u-py0 {
padding-top: 0 !important; }

.u-pt1, .u-p1, .p-article__body figure.photo, .u-py1 {
padding-top: 0.425rem !important; }

.u-pt2, .u-p2, .p-article-header__cover-text, .p-article-header__title, .u-py2, .p-article__body .chart-block {
padding-top: 0.85rem !important; }

.u-pt3, .u-p3, .p-article, .u-py3 {
padding-top: 1.7rem !important; }

.u-pt4, .u-p4, .u-py4 {
padding-top: 2.55rem !important; }

.u-pt5, .u-p5, .u-py5 {
padding-top: 5.1rem !important; }

.u-pr0, .u-p0, .p-article__body .chart-block__legends, .u-px0 {
padding-right: 0 !important; }

.u-pr1, .u-p1, .p-article__body figure.photo, .u-px1 {
padding-right: 0.425rem !important; }

.u-pr2, .u-p2, .p-article-header__cover-text, .p-article-header__title, .u-px2, .p-article.interview .conclusion__title, .p-article.interview .conclusion, .p-article.interview .bonus__title, .p-article.interview .bonus, .p-article-header__info--volume {
padding-right: 0.85rem !important; }

.u-pr3, .u-p3, .p-article, .u-px3 {
padding-right: 1.7rem !important; }

.u-pr4, .u-p4, .u-px4 {
padding-right: 2.55rem !important; }

.u-pr5, .u-p5, .u-px5 {
padding-right: 5.1rem !important; }

.u-pb0, .u-p0, .p-article__body .chart-block__legends, .u-py0 {
padding-bottom: 0 !important; }

.u-pb1, .u-p1, .p-article__body figure.photo, .u-py1 {
padding-bottom: 0.425rem !important; }

.u-pb2, .u-p2, .p-article-header__cover-text, .p-article-header__title, .u-py2, .p-article__body .chart-block {
padding-bottom: 0.85rem !important; }

.u-pb3, .u-p3, .p-article, .u-py3 {
padding-bottom: 1.7rem !important; }

.u-pb4, .u-p4, .u-py4 {
padding-bottom: 2.55rem !important; }

.u-pb5, .u-p5, .u-py5 {
padding-bottom: 5.1rem !important; }

.u-shadow--shallow, .p-article__body .chart-block, .p-article__body figure.photo {
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2) !important; }

.u-shadow--normal {
box-shadow: 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.4) !important; }

.u-shadow--deep {
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.4) !important; }

.u-text-weight--lighter {
font-weight: 300 !important; }

.u-text-weight--regular, .p-article.interview strong {
font-weight: 400 !important; }

.u-text-weight--bold, .p-article.interview .conclusion__title, .p-article.interview .bonus__title, .p-article.interview .interviewer, .c-button--large {
font-weight: 500 !important; }

.u-text-align--left {
text-align: left !important; }

.u-text-align--center {
text-align: center !important; }

.u-text-align--right {
text-align: right !important; }

.u-text-size--large, .p-article.interview .conclusion__title, .p-article.interview .bonus__title, .c-button--large {
font-size: 1.3rem !important; }
@media screen and (max-width: 720px) {
  .u-text-size--large, .p-article.interview .conclusion__title, .p-article.interview .bonus__title, .c-button--large {
    font-size: 1rem !important; } }
.u-text-size--small {
font-size: .8rem !important; }

.u-width--half {
width: 50% !important; }

.u-width--80 {
width: 80% !important; }

.c-back-button {
width: 40px;
margin: 16px; }
.c-back-button a:hover {
  opacity: .5; }
.c-back-button img {
  width: 100%;
  height: auto; }

.c-button {
display: inline-block;
padding: 0 0.85rem;
line-height: 2.55rem;
text-decoration: none;
border-radius: .5rem;
transition: .2s;
color: #1a1a1a;
background: #dee2e6;
border-bottom: 5px solid #adb5bd; }
.c-button:hover {
  margin-top: 3px;
  background: #e9ecef;
  color: #1a1a1a;
  border-bottom-width: 2px; }
.c-button--large {
  padding: 0 1.7rem;
  line-height: 3.4rem; }
.c-button--primary {
  background-color: #b9db3d;
  color: #000000;
  border-color: #a3c136; }
  .c-button--primary:hover {
    background-color: #c0df50;
    color: #000000;
    border-color: #a3c136; }
.c-button--secondary {
  background-color: #77cfd9;
  color: #000000;
  border-color: #69b6bf; }
  .c-button--secondary:hover {
    background-color: #85d4dd;
    color: #000000;
    border-color: #69b6bf; }
.c-button--tertiary {
  background-color: #2b9121;
  color: #ffffff;
  border-color: #26801d; }
  .c-button--tertiary:hover {
    background-color: #409c37;
    color: #ffffff;
    border-color: #26801d; }

/**
* アスペクト比 16:9
*/
.c-embed--16to9 {
padding-bottom: 56.25% !important; }

/**
* アスペクト比 4:3
*/
.c-embed--4to3 {
padding-bottom: 75% !important; }