/* common_class.css */

/* === まとめて幅変更 === */
section .wrap {
	max-width:  960px;
	margin-left:  auto;
	margin-right: auto;
}
/* ○○○○教室 ページ毎のメインビジュアル(PC) */
#page_patchwork .mv_imgBox {
	background-image: url(../img/study/mvPC_study.jpg);
}
#page_contactForm .mv_imgBox {
	background-color: #ccc;
}


/* === 最初のセクション (#sec_first) === */
#sec_first .wrap {
	padding-top: 50px;
}
#sec_first .wrap,
#sec_lesson .wrap,
#sec_curriculum .wrap,
#sec_classImg .wrap {
	padding-bottom: 0;
}

/* === 受講内容 (#sec_lesson) === */
#sec_lesson li span {
	color: #ef0000;
}

/* === カリキュラム (#sec_curriculum) === */
#sec_curriculum .arrow_list {
	display: flex;
}
#sec_curriculum .arrow_list li {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
}
#sec_curriculum .arrow_list li span {
	display: inline-block;
	border: 2px solid #ef0000;
	padding: 1em;
	font-weight: bold;
}
#sec_curriculum .arrow_list li:before {
	content: "";
	width:  25px;
	height: 1em;
	display: inline-block;
	/* background-image: url(../img/common/arrow.svg); */
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	color: #ef0000;
}
#sec_curriculum .arrow_list li:first-of-type:before {
	content: none;
}

/* === 教室開催の様子 (#sec_classImg) === */
#sec_classImg .flex_box {
	flex-wrap: wrap;
	margin-top: 10px;
}
#sec_classImg .flex_box .img_wrap {
	width: calc(100%/3 - 20px);
	margin-top: 30px;
}
#sec_classImg .flex_box .img_wrap:nth-of-type(-n+3) {
	margin-top: 0;
}


/* === 期間・日時 (#sec_date) === */
#sec_date .dateBtn_list {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
#sec_date .dateBtn_list > li {
	width: calc(100%/4 - 15px);
	display: inline-block;
	text-align: center;
	font-weight: bold;
}

#sec_date .dateBtn_list > li:nth-of-type(n+5) {
	margin-top: 20px;
}

#sec_date .dateBtn_list:before,
#sec_date .dateBtn_list:after  {
	content: "";
	display: block;
	width: calc(100%/4 - 10px);
	height: 0;
}
#sec_date .dateBtn_list:before {
	order: 1;
}

#sec_date .dateBtn_list > li a {
	width: 100%;
	display: inline-block;
	padding: .5em;
	color: #fff;
	background-color: #ef0000;
	border-radius: 10px;
}

/* --- モーダルウインドウ --- */

/* ガワ */
.uk-modal {
	z-index: 20000;	
}
.uk-modal-dialog {
	width: 98%;
	max-width: 960px !important;
}
/* 中のpadding */
.uk-modal-body {
	position: relative;
	padding: 30px;
}
/* 閉じるボタン */
.uk-modal-close {
	width:  50px;
	height: 50px;
	font-size: 35px;
	line-height: 1;
	letter-spacing: 0;
	text-align: center;
	display: flex;
	align-items:     center;
	justify-content: center;
	position: absolute;
	top:   0;
	right: 0;
	color: #fff;
	background-color: #000;
	border-radius: 100px;
	transform: translate(20px,-20px);
}
.uk-modal-close span {
	width:  auto;
	height: auto;
	display: inline-block;
	letter-spacing: 0;
}

/* 内部のコンテンツ系統 (.modal_cont_wrap) */
.modal_cont_wrap h3,
.modal_cont_wrap h4 {
	text-align: left;
}
.modal_cont_wrap h3 {
	font-size: 25px;
	margin-bottom: 30px;
}
.modal_cont_wrap h4 {
	font-size: 18px;
	font-weight: 500;
	margin-bottom: 20px;
	color: #000;
}

/* 日程 */
.modal_cont_wrap .dl_date {
	margin-bottom: 50px;
}
.modal_cont_wrap .dl_date div {
	display: flex;
}
.modal_cont_wrap .dl_date div:first-of-type {
	margin-bottom:  10px;
	padding-bottom: 10px;
	border-bottom: 1px solid #b5b5b5;
}
.modal_cont_wrap .dl_date dt,
.modal_cont_wrap .dl_date dd {
	font-size: 14px;
}
.modal_cont_wrap .dl_date dt {
	min-width: 70px;
	font-weight: bold;
	margin-right: 30px;
}
.modal_cont_wrap .dl_date dd {
	font-weight: 500;
}
/* 費用 */
.modal_cont_wrap .dl_price {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.modal_cont_wrap .dl_price > div {
	width: calc(100% / 2 - 25px);
	margin-top: 50px;
}
.modal_cont_wrap .dl_price div:nth-of-type(-n+2) {
	margin-top: 0;
}
.modal_cont_wrap .dl_price dt,
.modal_cont_wrap .dl_price dd {
	width: 100%;
	display: inline-block;
}
.modal_cont_wrap .dl_price dt {
	margin-bottom: 10px;
	padding: .25em .5em;
	background-color: #f2f2f0;
}
.modal_cont_wrap .dl_price dd {
	font-size: 14px;
	display: flex;
	justify-content: space-between;
}

/* === お申し込み (#sec_contact) === */
#sec_contact .bg_wrap {
	background-image: url(../../../img/index/check_bg01.jpg);
	background-size: 100%;
	padding-bottom: 50px;
}
#sec_contactInfo + #sec_contact form#mail_form {
	margin-top:    0 !important;
	margin-bottom: 0 !important;
}
form#mail_form {
	width: 100%;
	border-radius: 10px;
	padding: 30px;
}
form#mail_form dl {
	border-bottom: 2px dotted #ccc;
}
form#mail_form dl:last-of-type {
	border-bottom: 0;
}

form#mail_form dl dt {
	text-align: left;
}

/* 入力エリア */
form#mail_form input[type="text"],
form#mail_form input[type="email"],
form#mail_form input[type="tel"],
#sec_contact form#mail_form textarea {
	border: 1px solid #999;
	background-color: #fff;
}


/* 入力エリア選択時の色 */
form#mail_form input[type="text"]:focus,
form#mail_form input[type="email"]:focus,
form#mail_form input[type="tel"]:focus,
form#mail_form select:focus,
#sec_contact form#mail_form textarea:focus {
	border: 1px solid #ef0000;
	box-shadow: none !important;
	outline: 0;
}

form#mail_form select {
	appearance: auto;
}


/* 送信ボタン */
form#mail_form p#form_submit {
	max-width: 270px;
}
form#mail_form input[type="button"] {
	width: 100%;
	font-size: 18px;
	font-weight: bold;
	font-family: fot-cezanne-pron, sans-serif !important;
	text-align: center;
	letter-spacing: .05em;
	line-height: 1 !important;
	display: inline-block;
	padding: 25px 0;
	color: #fff;
	border: none;
	border-radius: 10px;
	background: #ef0000;
	transition: background .3s;
	margin-left: 0
}
form#mail_form input[type="button"]:hover {
	border: none !important;
	background: #ef0000 !important;
}
.class_peroid {
	margin-bottom: 20px;
}


@media screen and (max-width:768px) {
	#sec_first .wrap,
	#sec_lesson .bg_wrap,
	#sec_curriculum .bg_wrap,
	#sec_date .bg_wrap { 
		padding-top:0px;
	}
	form#mail_form     {
		margin-top: 25px;
		margin-bottom: 0;
		padding: 0 10px 20px;
	}
	#sec_first .bg_wrap {
		padding-top: 40px;
	}

	/* === #sec_curriculum(カリキュラム) === */
	#sec_curriculum .arrow_list {
		flex-wrap: wrap;
	}
	#sec_curriculum .arrow_list li,
	#sec_curriculum .arrow_list li span {
		width: 100%;
		text-align: center;
	}
	#sec_curriculum .arrow_list li {
		display: inline-block;
	}
	/* 矢印 */
	#sec_curriculum .arrow_list li:before {
		content: none;
	}
	#sec_curriculum .arrow_list li:after  {
		content: "";
		width: 25px;
		height: 1em;
		display: inline-block;
		background-image: url(../img/common/arrow.svg);
		background-size: contain;
		background-position: center;
		background-repeat: no-repeat;
		color: #ef0000;
		transform: rotate(90deg);
	}
	#sec_curriculum .arrow_list li:last-of-type:after {
		content: none;
	}

	/* === 教室開催の様子 (#sec_classImg) === */
	#sec_classImg .flex_box {
		flex-wrap: wrap;
		margin-top: 10px;
	}
	#sec_classImg .flex_box .img_wrap {
		width: calc(100%/2 - 5px);
		width: calc(100%/2 - min(1.333vw,7.5px));
		margin-top: 10px !important;
		margin-top: min(2.667vw,15px) !important;
	}
	#sec_classImg .flex_box .img_wrap:nth-of-type(-n+2) {
		margin-top: 0 !important;
	}
	#sec_classImg .bg_wrap {
		padding-top: 0;
	}
	/* === #sec_date(期間・日時) === */
	/* ボタン */
	#sec_date .dateBtn_list {
		flex-wrap: wrap;
	}
	#sec_date .dateBtn_list > li {
		width: calc(100%/2 - 10px);
		width: calc(100%/2 - min(1.333vw,7.5px));
		margin-top: 20px;
		margin-top: min(2.667vw,15px) !important;
	}
	#sec_date .dateBtn_list > li:nth-of-type(-n+2){
		margin-top: 0;
	}
	#sec_date .dateBtn_list:before,
	#sec_date .dateBtn_list:after  {
		content: none;
	}

	/* --- モーダル教室の内容 --- */
	.modal_cont_wrap h3 {
		font-size: 22px;
		margin-bottom: 20px;
	}
	.uk-modal {
		padding: 50px 20px;
	}
	.uk-modal-body {
		max-width: 540px !important;
		padding: 20px;
	}
	/* 閉じるボタン */
	.uk-modal-close {
		width:  35px;
		height: 35px;
		font-size: 25px;
		transform: translate(10px, -15px);
	}
	/* 日程 */
	.modal_cont_wrap .dl_date {
		margin-bottom: 30px;
	}
	.modal_cont_wrap .dl_date div {
		flex-wrap: wrap;
	}
	.modal_cont_wrap dt,
	.modal_cont_wrap dd {
		width: 100%;
	}
	/* 費用 */
	.modal_cont_wrap .dl_price > div {
		width: 100%;
		margin-top: 30px !important;
	}
	.modal_cont_wrap .dl_price > div:first-of-type {
		margin-top: 0 !important;
	}

	.modal_cont_wrap .dl_price dt {
		text-align: center;
	}


}