@charset "utf-8";

/* =============================================
	スキルアップ
============================================= */
/*****
common
*****/
.font_red{
	color: #e04536;
}
.font_yell{
	color: #ffde00;
}
.font_blue{
	color: #448fe4;
}
.font_orange{
	color: #ff4f11;
}
.font_pink{
	color: #e4447c;
}

.bg_red{
	background-color: #e04536;
}
.bg_blue{
	background-color: #00A4DE;
}
.bg_orange{
	background-color: #ff4f11;
}
.bg_yell{
	background-color: #f7ba27;
}
.bg_pink{
	background-color: #e4447c;
}

.rotate90{
	display: inline-block;
	margin-right: 0.5em;
	transform: rotateZ(-90deg);
}

.underblock_yellow{
	display: inline-block;
	padding: 0 0.5em;
	background-image: linear-gradient(to top,#ffde00 0, #ffde00 40%, transparent 40%);
}

.text_through{
	text-decoration: line-through;
}

a.outer_link{
	display: inline-block;
	text-indent: 0;
	color: #1e83c5;
	margin: 0.25em 0;
	padding: 0.5em 1em;
	border: solid 1px #1e83c5;
}


/*---------------------------------------------
	page_header
---------------------------------------------*/
#spring{}
#autumn{}

#spring #page_header{
	background-image: url("../img/header_kazari_lt.png"),url("../img/header_kazari_rb.png"),url("../img/page_header_bg.png"),linear-gradient(to right top,#e7f9ff 0,#a9e8fd 100%);
	background-repeat: no-repeat,no-repeat,repeat,repeat;
	background-position: left top,right bottom,center, center;
}

#autumn #page_header{
	background-image: url("../img/header_koyo_lt.png"),url("../img/header_koyo_rb.png"),url("../img/page_header_bg.png"),linear-gradient(to right top,#fffde3 0,#f39b49 100%);
	background-repeat: no-repeat,no-repeat,repeat,repeat;
	background-position: left top,right bottom,center, center;
}

.page_header{
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
}
.page_header h1{}

.header_bar{
	font-size: clamp(1.4rem,1.6vw,2rem);
	text-align: center;
	color: #fff;
	padding: 0.5em;
}
#spring .header_bar{
	background-color: #FF9999;
}
#autumn .header_bar{
	background-color: #ebab5f;
}

.header_bar .period{
	display: inline-block;
	font-weight: bold;
	line-height: 1;
	color: #e4447c;
	padding: 0.5em 1em;
	border-radius: 1em;
	background-color: #fff;
}
.header_bar .off20{
	font-size: 1.25em;
	font-weight: bold;
}

.anim_slide{
	opacity: 0;
	animation-name: anim_img;
	animation-duration: 1s;
	animation-delay: 0;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}


/*****
タイトルアニメーション設定
*****/
@keyframes anim_img{
	0%{
		opacity: 0;
		transform: translateX(50%);
	}
	100%{
		opacity: 1;
		transform: translateX(0);
	}
}

/*---------------------------------------------
	section
---------------------------------------------*/
.section_wrap{
	width: 100%;
	margin: 0 auto;
	padding: 4em 0;
}
.normal_section{
 font-size: 1.6rem;
	line-height: 1.6;
	width: 970px;
	margin: 4em auto 0 auto;
}
.normal_section li{
 font-size: 1.6rem;
}

.section_bg{}

/*****
リード
*****/
.lead_area{}

.lead_ttl{
	text-align: right;
}
#spring .lead_ttl{
	background-color: #FF9999;
}
#autumn .lead_ttl{
	background-color: #ebab5f;
}


.lead_ttl h2{
	position: relative;
	z-index: 99;
}

.lead_inner{
	display: flex;
}
#spring .lead_inner{
	border-right: solid 8px #FF9999;
	border-bottom: solid 8px #FF9999;
	border-left: solid 8px #FF9999;
}
#autumn .lead_inner{
	border-right: solid 8px #ebab5f;
	border-bottom: solid 8px #ebab5f;
	border-left: solid 8px #ebab5f;
}

.lead_img{
	background-image: url("../img/lead_img.jpg");
	background-repeat: no-repeat;
	position: relative;
}
.lead_img::after{
	content: '';
	display: block;
}
.lead_text{
	padding: 1em;
	background-color: #fff;
}

.period_bar{
	/*text-align: center;*/
	color: #fff;
	margin-bottom: 1em;
	text-indent: -3em;
	padding: 0.5em 1em 0.5em 4em;
	border-radius: 1em;
	background-color: #e4447c;
}
#spring .period_bar{
	background-color: #e4447c;
}
#autumn .period_bar{
	background-color: #ff4f11;
}
.lead_h{
	font-size: 2.4rem;
	margin-bottom: 0.5em;
}


/*****
キャンペーン　対象講座
*****/
.ttl_type01{
	text-align: center;
	font-size: 2rem;
	color: #fff;
	margin-bottom: 1em;
	padding: 0.5em 1em;
	
	background-image: url("../img/ttl_bg_l.png"), url("../img/ttl_bg_r.png");
	background-repeat: no-repeat, no-repeat;
	background-size: contain, contain;
	background-position: left 0.5em top 0, right 0.5em top 0;
}
#spring .ttl_type01{
	background-color: #00adb9;
}
#autumn .ttl_type01{
	background-color: #ff4f11;
}

.cp_area{}

.cp_single{
	font-size: 1.4rem;
	text-align: center;
	padding: 1.5em;
	border-radius: 1em;
	background-color: #fff;
	box-shadow: 0 0 4px 4px rgba(0,0,0,0.2);
}
.cp_single h3{
	font-size: 1.6rem;
	text-align: left;
	margin-bottom: 1em;
}
.cp_single .cp_price{
	display: inline-block;
	font-size: 1.15em;
	padding: 0 0 0 1.5em;
	background-image: url("../img/price_arrow.png");
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 1em auto;
}
.cp_price b{
	color: #e4447c;
}
.cp_single .cp_period{
	display: inline-block;
	margin-right: 0.5em;
	padding: 0 0.5em;
	border: solid 1px #ccc;
}


/*****
注意事項
*****/
.attention{}

.attention li{
	font-size: 1.4rem;
}

/* ===========================================
	MediaQueries
=========================================== */
/* PC----------------------------- */
@media (min-width: 768px){
 /*---------------------------------------------
	page_header
	---------------------------------------------*/
	.header_bar{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.header_bar .period{
		margin-right: 2em;
		position: relative;
	}
	.header_bar .period .icon_period{
		position: absolute;
		top: 50%;
		right: 100%;
		transform: translateY(-50%);
	}
	
	/*---------------------------------------------
	section
	---------------------------------------------*/
	#spring .section_bg{
		background-image: url("../img/section_bg_l.jpg"),url("../img/section_bg_r.jpg");
		background-repeat: repeat-y, repeat-y;
		background-position: left top,right top;
		background-size: 25% auto,25% auto;
	}
	#autumn .section_bg{
		background-image: url("../img/section_bg_l_autumn.jpg"),url("../img/section_bg_r_autumn.jpg");
		background-repeat: repeat-y, repeat-y;
		background-position: left top,right top;
	}
	
	/*****
	リード
	*****/
	.lead_ttl{
		padding-right: 2em;
	}
	.lead_ttl h2{
		margin-bottom: -5em;
		transform: translateY(-2.5em);
	}
	.lead_inner{
		justify-content: space-between;
		flex-direction: row-reverse;
		/*background-position: right center;
		background-size: auto 100%;*/
	}
	.lead_img{
		flex-grow: 1;
		background-position: right center;
		background-size: auto 100%;
	}
	.lead_img::after{
		width: 4em;
		height: 100%;
		background-image: linear-gradient(to right,#fff 0, transparent 100%);
		position: absolute;
		top: 0;
		left: 0;
	}
	.lead_text{
		width: 540px;
		/*width: 580px;
		padding: 1em 4em 1em 1em;
		background-image: linear-gradient(to left,transparent 0,#fff 3em, #fff 100%);*/
	}
	
	/*****
	キャンペーン　対象講座
	*****/
	.cp_area{
		display: flex;
		flex-wrap: wrap;
	}
	
	.cp_single{
		width: 32%;
		margin: 0 2% 2em 0;
	}
	.cp_single:nth-of-type(3n){
		margin-right: 0;
	}
	
	.cp_single h3{
		min-height: 2.6em;
	}
	
	.cp_single .btn_normal,
	.cp_single .btn_nolink{
		margin: 1em auto 0 auto;
	}
}

/* スマホ----------------------------- */
@media screen and (max-width: 767px){
 /*---------------------------------------------
	page_header
	---------------------------------------------*/
	#page_header{
		background-size: 40% auto,10% auto,30px auto, auto;
	}
	
	.page_header{}
	
	.header_bar{
		font-size: 1.6rem;
	}
	.header_bar .period{
		line-height: 1.4;
		margin: 0.5em auto;
	}
	.header_bar .period .icon_period{
		display: none;
	}
	
	/*---------------------------------------------
	section
	---------------------------------------------*/
	.section_wrap{
		padding: 2em 0;
	}
	.normal_section{
		font-size: 1.4rem;
		width: 94%;
		margin: 2em auto 0 auto;
	}
 .normal_section li{
  font-size: 1.4rem;
 }
	
	#spring .section_bg{
		background-image: url("../img/section_bg_l.jpg");
		background-repeat: repeat-y;
		background-position: left top;
		background-size: 30% auto;
	}
	#autumn .section_bg{
		background-image: url("../img/section_bg_l_autumn.jpg");
		background-repeat: repeat-y;
		background-position: left top;
		background-size: 30% auto;
	}
	
	/*****
	リード
	*****/
	.lead_ttl h2{
		margin-bottom: -2em;
	}
	.lead_inner{
		flex-direction: column;
		/*background-position: right top;
		background-size: 100% auto;*/
	}
	.lead_img{
		width: 100%;
		height: 0;
		padding-top: 60%;
		background-size: 100% auto;
	}
	.lead_img::after{
		width: 100%;
		height: 25%;
		background-image: linear-gradient(to top,#fff 0, transparent 100%);
		position: absolute;
		bottom: 0;
		left: 0;
	}
	.lead_text{
		/*padding: 20vh 1em 1em 1em;
		background-image: linear-gradient(to bottom,transparent 0,#fff 20vh, #fff 100%);*/
	}
	
	.period_bar{
		font-size: 1.6rem;
		text-align: left;
	}
	.lead_h{
		font-size: 1.8rem;
	}
	
	/*****
	キャンペーン　対象講座
	*****/
	.ttl_type01{
		font-size: 1.6rem;
	}
	
	.cp_single{
		width: 100%;
		margin: 0 auto 1em auto;
		padding: 1em 1em 0.01em 1em;
	}
	
}