@charset "utf-8";
/*======================================
index TOPページ
========================================*/
:root{}

/*------------------------------
ヘッダー
------------------------------*/
#index_header{
	font-size: clamp(1.2rem,1.66vw,1.6rem);
	padding: 1em 3%;
}
.main_copy{
	text-align: center;
}

/*------------------------------
ヘッダーナビ
------------------------------*/
.index_nav{
	font-size: clamp(1.4rem,1.33vw,2rem);
	background-color: #fafbfc;
	border-top: solid 1px #ccc;
	border-left: solid 1px #ccc;
}
.index_nav ul{
	display: flex;
}
.index_nav ul li{}
.index_nav ul li a{
	display: flex;
	justify-content: center;
	align-items: center;
	text-decoration: none;
	color: #fff;
	padding: 1em 0.5em;
	background-color: var(--main_color);
}
.index_nav ul li a::before{
	content: '';
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-right: 0.5em;
	background-image: url("../img/icon_nav_white.svg");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
}

/*------------------------------
リード
------------------------------*/
.lead_area{
	font-size: clamp(1.6rem,2.16vw,2.6rem);
	line-height: 1.8;
	text-align: center;
	width: 94%;
	max-width: 1200px;
	margin: 4em auto 0 auto;
}

/*------------------------------
コンテンツ共通
------------------------------*/
.index_section_wrap{
	font-size: clamp(1.4rem,1.28vw,1.8rem);
	line-height: 1.8;
	padding: 6em 0;
}
.index_normal_section{
	width: 94%;
	max-width: 1400px;
	margin: 6em auto 0 auto;
}
.index_section_wrap .index_normal_section:first-of-type{
	margin-top: 0;
}

/*------------------------------
カレンダー
------------------------------*/
.none_pc{}
.none_sp{}

.calendar_all_wrap{
	display: flex;
	justify-content: space-between;
	padding-top: 2em;
}

.calendar_mark_area{
	width: 28%;
	margin-top: 3.5em;
}
.calendar_mark_list{
	display: flex;
	align-items: center;
	margin-bottom: 0.75em;
}
.calendar_mark_list .icon_calendar_mark{
	flex-shrink: 0;
	display: inline-block;
	font-size: 0.85em;
	color: #fff;
	margin-right: 0.5em;
	padding: 0.25em 0.5em;
	border-radius: 0.25em;
}

/*イベントごとのカラー calendar_color*/
.cc_kenchi1q{
	background-color: #ed4646;
}
.cc_kenchi2q{
	background-color: #4691ed;
}
.cc_kanri{
	background-color: #ee9523;
}
.cc_denki{
	background-color: #c0a700;
}
.cc_hyouka{
	background-color: #34c295;
}
.cc_follow{
	background-color: #0ea547;
}
.cc_tak_touroku{
	background-color: #ad6b5c;
}
.cc_tak_jitsu{
	background-color: #975cad;
}
.cc_kosaku{
	background-color: #8d8867;
}
.cc_mankan{
	background-color: #678d88;
}
.cc_fudo{
	background-color: #df89c0;
}
.cc_chintai{
	background-color: #614949;
}
.cc_mizu{
	background-color: #3e458c;
}

/*end calendar_color*/

/*カレンダー表組*/
.calendar_area_wrap{
	width: 70%;
}

.month_area{
	width: 100%;
}

.month_title{
	font-size: clamp(1.4rem,1.66vw,2rem);
	text-align: center;
	margin-bottom: 1em;
}

.calendar_tbl{
	font-size: clamp(1.2rem,1.14vw,1.6rem);
	line-height: 1.5;
	width: 100%;
	margin: 0 auto;
	border: solid 3px var(--sub_color);
}
.calendar_tbl th,
.calendar_tbl td{
	border-right: solid 1px var(--sub_color);
}

.calendar_tbl th{
	width: calc(100% / 7);
	padding: 0.75em;
	background-color: #ffeabc;
}
.calendar_tbl th:nth-of-type(6){
	color: var(--blue_color);
}
.calendar_tbl th:nth-of-type(7){
	color: var(--red_color);
}
.calendar_tbl td{
	min-height: 1em;
}

.calendar_tbl td.td_day{
	text-align: center;
	padding: 0.75em;
	border-top: solid 1px var(--sub_color);
	background-color: #ffffcc;
}

.calendar_tbl td.sat strong{
	color: var(--blue_color);
}
.calendar_tbl td.sun strong{
	color: var(--red_color);
}
.calendar_tbl td.holiday strong{
	color: var(--red_color);
}
.calendar_tbl td.td_event_name{
	padding: 0.75em;
}
.calendar_tbl tr.tr_first_line td.td_event_name{
	padding: 0.75em 0.75em 0.375em 0.75em;
}
.calendar_tbl tr.tr_normal_line td.td_event_name{
	padding: 0.375em 0.75em;
}
.calendar_tbl tr.tr_last_line td.td_event_name{
	padding: 0.375em 0.75em 0.75em 0.75em;
}
.calendar_tbl td a{
	display: block;
	text-align: center;
	color: #fff;
	text-decoration: none;
	padding: 0.25em;
}

.event_bar{
	border-radius: 0.25em;
}

/***カレンダータブの設定***/

.course_tab{
	display: flex;
	padding-left: 0.5em;
}
.course_tab li{
	font-weight: bold;
	margin-right: -1em;
}
.course_tab li a{
	display: block;
	color: #fff;
	text-decoration: none;
	padding: 0.5em 1.5em;
	border: solid 3px #fff;
	border-bottom: none;
	border-radius: 0.5em 0.5em 0 0;
	background-color: #ccc;
	position: relative;
}
.course_tab li a:hover{}
.course_tab li a.show_box{
	cursor: default;
	color: #fff;
	background-color: var(--sub_color);
}

.tab_box .course_list_table{
	margin-top: 0;
	border-top: none;
}

/*------------------------------
タブ表示用のクラス
------------------------------*/
/*** タブにする ***/
.tab_nav{}

/*** 表示中のタブ ***/
.show_box{
 cursor: default;
}

/*** タブで表示するエリア ***/
.tab_box{
	display: none;
}
/*------------------------------
end タブ表示用のクラス
------------------------------*/

/*------------------------------
お知らせ
------------------------------*/
#top_news{}
.news_area{
	max-height: 40vh;
	overflow: auto;
}

.news_box{
	display:flex;
	align-items: flex-start;
	width: 48%;
	margin-bottom: 2em;
	border-bottom: dashed 2px var(--sub_color);
}

.news_date{
	display: flex;
	justify-content: center;
	flex-direction: column;
	flex-shrink: 0;
	text-align: center;
	color: #fff;
	aspect-ratio: 1 / 1;
	width: 5em;
	margin-right: 1em;
	border-radius: 50%;
	background-color: var(--sub_color);
}
.news_date .news_year{
	font-size: 0.85em;
	border-bottom: solid 1px #fff;
}
.news_date .news_day{}

.news_text{
	line-height: 1.5;
	padding: 2.5em 0.5em 0.5em 0.5em;
}

.news_text .news_ttl{
	font-size: 1.15em;
	color: var(--sub_color);
	margin-bottom: 0.5em;
}
.news_text .news_ttl a{
	color: var(--sub_color);
	padding-left: 2em;
	position: relative;
}
.news_text .news_ttl a::before{
	content: '';
	display: block;
	width: 1.5em;
	height: 1em;
	background-image: url("../img/icon_nav_logo_color.svg");
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	top: 0;
	left: 0;
	transform: translateY(50%);
}

/*------------------------------
講習一覧
------------------------------*/
.lesson_area{
	font-size: clamp(1.4rem,0.83vw,1.6rem);
	width: 100%;
	border-top: solid 1em var(--main_color);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}
.lesson_area:first-of-type{
	margin-top: 0;
}

#kenchiku1q{
	background-image: url("../img/index_kenchiku1q.jpg");
}
#kenchiku2q{
	background-image: url("../img/index_kenchiku2q.jpg");
}
#kanri{
	background-image: url("../img/index_kanri.jpg");
}
#denki{
	background-image: url("../img/index_denki.jpg");
}
#hyoukain{
	background-image: url("../img/index_hyoukain.jpg");
}
#hyoukain_follow{
	background-image: url("../img/index_hyoukain_follow.jpg");
}
#toroku{
	background-image: url("../img/index_touroku.jpg");
}
#jitsumu{
	background-image: url("../img/index_jitsumu.jpg");
}
#kosaku{
	background-image: url("../img/index_kosaku.jpg");
}
#mankan{
	background-image: url("../img/index_mankan.jpg");
}
#fudousan{
	background-image: url("../img/index_fudousan.jpg");
}
#chintai{
	background-image: url("../img/index_chintai.jpg");
}
#nihongo{
	background-image: url("../img/index_nihongo.jpg");
}
#other{
	background-image: url("../img/index_other.jpg");
}

.lesson_detail{
	font-size: clamp(1.4rem,1.25vw,2.4rem);
	line-height: 1.5;
	text-align: center;
	background-color: rgba(255,255,255,0.8);
}

.lesson_inner{
	width: 100%;
}

.ttl_lesson{
	font-size: clamp(2rem,2.91vw,5.6rem);
	font-weight: bold;
	color: var(--sub_color);
	text-stroke: 4px #fff;
	-webkit-text-stroke: 4px #fff;
	paint-order: stroke;
}

.btn_detail{
	font-size: 1.2em;
	text-align: center;
	margin: 1em 0;
}
.btn_detail a{
	display: inline-block;
	line-height: 1;
	text-decoration: none;
	color: #333;
	padding: 0.5em 2em 0.5em 1em;
	border: solid 2px var(--red_color);
	border-radius: 1em;
	position: relative;
	transition: background 0.5s;
}
.btn_detail a::after{
	content: '';
	display: block;
	width: 1em;
	height: 1em;
	background-image: url("../img/icon_nav_black.svg");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	position: absolute;
	top: 50%;
	right: 0.5em;
	transform: translateY(-50%);
}
.btn_detail a:hover{
	background-color: #fff;
}

.btn_index{
	text-align: center;
	width: 100%;
	margin: 0.5em auto;
	border-radius: 0.25em;
	position: relative;
}
.btn_index::before{
	content: '';
	display: block;
	width: 0;
	height: 100%;
	border-radius: 0.25em;
	background-color: rgba(0,0,0,0.35);
	position: absolute;
	top: 0;
	left: 0;
	transition: width 0.5s;
}
.btn_index:hover::before{
	width: 100%;
}

.btn_index a{
	display: block;
	color: #fff;
	text-decoration: none;
	padding: 1em 2em 1em 1em;
	border-radius: 0.25em;
	position: relative;
}

.btn_index a::after{
	content: '';
	display: block;
	width: 1em;
	height: 1em;
	background-image: url("../img/arrow_white.svg");
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	top: 50%;
	right: 0.5em;
	transform: translateY(-50%);
}

.btn_index_cap{
	font-size: clamp(1.2rem,0.88vw,1.7rem);
}


/*------------------------------
関連サイトバナー
------------------------------*/


/* ===========================================
	MediaQueries
=========================================== */
@media (min-width: 920px){
	/*------------------------------
	講習一覧
	------------------------------*/
	.lesson_area{
		aspect-ratio: 1920 / 640;
	}
}


/* PC----------------------------- */
@media (min-width: 768px){
	/*------------------------------
	ヘッダー
	------------------------------*/
	#index_header{
		margin-top: 4.5em;
	}
	
	/*------------------------------
	ヘッダーナビ
	------------------------------*/
	.index_nav{
		border-bottom: solid 1px #ccc;
	}
	.index_nav ul{
		width: 100%;
		max-width: 1200px;
	}
	.index_nav ul li{
		width: 25%;
	}
	.index_nav ul li a{
		border-right: solid 1px #ccc;
		transition: background 0.5s;
	}
	.index_nav ul li a:hover{
		color: #000;
		background-color: #fafbfc;
	}
	.index_nav ul li a:hover::before{
		background-image: url("../img/icon_nav_black.svg");
	}
	
	/*------------------------------
	リード
	------------------------------*/
	/*------------------------------
	コンテンツ共通
	------------------------------*/
	/*------------------------------
	カレンダー
	------------------------------*/
	.none_pc{
		display: none;
	}
	.none_sp{}
	
	/*------------------------------
	お知らせ
	------------------------------*/
	.news_area{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	
	/*------------------------------
	講習一覧
	------------------------------*/
	.lesson_area{
		display: flex;
		margin-top: 6em;
		padding: 0 2em;
	}
	.lesson_detail{
		display: flex;
		align-items: center;
		width: 45%;
		padding: 2em;
	}
	.lesson_area:nth-of-type(even) .lesson_detail{
		margin: 0 0 0 auto;
	}
	
	/*------------------------------
	関連サイトバナー
	------------------------------*/
	.bn_section_wrap{
		margin-top: 10em;
	}
}

/* スマホ----------------------------- */
@media (max-width: 767px){
	/*------------------------------
	ヘッダー
	------------------------------*/
	#index_header{
		text-align: center;
		margin-top: 4em;
	}
	
	/*------------------------------
	ヘッダーナビ
	------------------------------*/
	.index_nav{}
	.index_nav ul{
		flex-wrap: wrap;
	}
	.index_nav ul li{
		width: 50%;
	}
	.index_nav ul li a{
		border-bottom: solid 1px #ccc;
		border-right: solid 1px #ccc;
	}
	
	/*------------------------------
	リード
	------------------------------*/
	.lead_area{
		margin-top: 2em;
	}
	
	/*------------------------------
	コンテンツ共通
	------------------------------*/
	.index_section_wrap{
		padding: 3em 0;
	}
	
	/*------------------------------
	カレンダー
	------------------------------*/
	.none_pc{}
	.none_sp{
		display: none;
	}
	
	.calendar_all_wrap{
		display: block;
	}
	
	.calendar_mark_area{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		font-size: clamp(1.2rem,1.28vw,1.8rem);
		width: 100%;
		margin-top: 0;
	}
	.calendar_mark_list{
		display: block;
		width: 48%;
	}
	
	.calendar_area_wrap{
		width: 100%;
		margin-top: 1em;
	}
	
	/*カレンダー表組*/
	.calendar_tbl th{
		padding: 0.5em;
	}
	.calendar_tbl td.td_day{
		padding: 0.5em;
	}
	.calendar_tbl td.td_event_name{
		padding: 0.5em;
	}
	.calendar_tbl tr.tr_first_line td.td_event_name{
		padding: 0.5em 0.5em 0.25em 0.5em;
	}
	.calendar_tbl tr.tr_normal_line td.td_event_name{
		padding: 0.25em 0.5em;
	}
	.calendar_tbl tr.tr_last_line td.td_event_name{
		padding: 0.25em 0.5em 0.5em 0.5em
	}
	
	/*------------------------------
	お知らせ
	------------------------------*/
	.news_area{}
	.news_box{
		width: 100%;
		padding-bottom: 0.5em;
	}
	
	.news_text{
		padding: 0.5em;
	}
	
	/*------------------------------
	講習一覧
	------------------------------*/
	.lesson_area{
		margin-top: 3em;
		padding: 2em 1em;
	}
	
	.lesson_detail{
		width: 100%;
		padding: 1em;
	}
	
	.btn_detail{
		font-size: 1.15em;
	}
	
	/*------------------------------
	関連サイトバナー
	------------------------------*/
	
}