@charset "utf-8";

/*=============================

建築士定期講習　スタイル

===============================*/
.flex_box{
	display: flex;
}
.flex_around{
	justify-content: space-around;
}
.flex_between{
	justify-content: space-between;
}
.flex_shrink0{
	flex-shrink: 0;
}

/*-----------------------------
　PCスマホ、共通
------------------------------*/
/*ヘッダーのマイページリンク*/
header .fix_header_area,
header .fix_header_area .mypage_link{
	display: block;
}

	/*****トップページ*****/
	#housingTop .leftcont h2{
				margin:0 0 20px;}
				
	#kenchikushiAbout .lnav ul li ol.lnav_k{
			display:block;}
			
	.lnav ul li#lnav_apply{
			display:none;}
			
	.lnav ul li.offform{
			display:none;}

	.paragraph h5{
		color:#3887BB;
		font-size:14px;
		margin-bottom:5px}

.q1color{	
	background:#fcc}
.q2color{	
	background:#ccf !important}

/*動画視聴ボタン*/
.btn_douga_area{
	display: flex;
	justify-content: space-between;
	padding-bottom: 20px;
}
.btn_douga_area li{
	width: 320px;
}
.btn_douga_area li:hover{
	opacity: 0.8;
}
.btn_douga_area li img{
	width: 100%;
	height: auto;
}

.btn_link_text{
	text-align: center;
}
.btn_link_text a{
	display: inline-block;
	font-size: 1.4em;
	line-height: 1.2;
	text-align: left;
	color: #fff;
	max-width: 94%;
	margin: 1em auto;
	padding: 1em 1em 1em 2em;
	border-radius: 0.5em;
	background-color: #ff6900;
	box-sizing: border-box;
	position: relative;
}
.btn_link_text a::before{
	content: '▼';
	display: inline-block;
	margin-right: 0.5em;
	position: absolute;
	top: 50%;
	left: 0.5em;
	transform: translateY(-50%) rotateZ(-90deg);
}

/*トップページメニューのイレギュラー*/
	.topMenu dl#apply{}
	/*.topMenu dl#apply dt{
		height: auto;
		padding-bottom: 10px;
	}*/
	.topMenu dl#apply dt .another_link,
	.topMenu dl#apply dd .another_link{
		margin-bottom: 10px;
	}
	.topMenu dl#apply dt .another_link a,
	.topMenu dl#apply dd .another_link a{
		display: block;
		font-size: 16px;
		font-weight: bold;
		line-height: 1.4;
		color: #3887bb;
		padding: 4px 5px 3px 20px;
		border: solid 1px #3887bb;
		background-image: none;
		position: relative;
	}
	.topMenu dl#apply dt .another_link a::before,
	.topMenu dl#apply dd .another_link a::before{
		content: '';
		display: block;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 5px 0 5px 6px;
		border-color: transparent transparent transparent #3887bb;
		position: absolute;
		top: 50%;
		left: 5px;
		transform: translateY(-50%);
	}

/***講習　受付・教材発送スケジュール枠(インクルード)***/
.page_shce_area{
	margin-bottom: 2em;
	padding: 0.5em;
	border: 1px solid #ADCEE3;
}
.tbl_page_shce{
	margin: 0 auto 0.5em auto;
	border-top: solid 1px #ccc;
	border-left: solid 1px #ccc;
}
.tbl_page_shce th,
.tbl_page_shce td{
	text-align: center;
	padding: 0.5em 1em;
	border-bottom: solid 1px #ccc;
	border-right: solid 1px #ccc;
}
.tbl_page_shce th{
	background-color: #eee;
}

.paragraph .page_shce_area ul{
	margin: 0;
}

	/*****講習日テーブル*****/			
#kenchikushiAbout .lessonlistTbl caption{
	text-align:left;
	font-size:14px;
	font-weight:bold;
	white-space:nowrap;
	margin-bottom:5px;}
#kenchikushiAbout .lessonlistTbl{
	margin-bottom:20px}
	
/*講習コース*/
ul.kenchikuCourselst{
	display:inline-block;
}
ul.kenchikuCourselst li{
	display:inline-block;
}

	/*****講習スケジュール*****/
.schedulettl{margin-bottom:-20px !important;
border-bottom:0 !important;
padding:5px;}

/***カリキュラム***/
table.dayscheduleTbl{
	width: 100%;
	margin-top: 20px;
	border-right: solid 1px #ccc;
}
table.dayscheduleTbl th,
table.dayscheduleTbl td{
	padding: 10px 10px 5px;
	border-bottom: solid 1px #ccc;
	border-left: solid 1px #ccc;
}
table.dayscheduleTbl th{
	background-color: #eee;
}

	/*****ヘッダー*****/
	/*.contents header p.headmoney{
		margin-top:0px !important;}*/
.contents .headinfo{
	font-size: 22px;
	color: #fff;
	text-align: center;
	background: #f00;
}

/*****オンライン講義＋会場の概要・日程*****/
.online_sche_wrap{
	display: flex;
	justify-content: space-between;
}
table.online_sche{
	width: 49%;
	margin-bottom: 20px;
	border-top: 1px solid #ccc;
	border-right: 1px solid #ccc;
	box-sizing: border-box;
}
table.online_sche th{
	padding: 5px;
	border-bottom: 1px solid #ccc;
	border-left: 1px solid #ccc;
	background-color: #eee;
	box-sizing: border-box;
}
table.online_sche td{
	text-align: center;
	width: 50%;
	padding: 5px;
	border-bottom: 1px solid #ccc;
	border-left: 1px solid #ccc;
	box-sizing: border-box;
}
table.online_sche td.th_sub{
	background-color: #eee;
}

/*****
講習について（講習の概要）ページ
*****/
/***アンカーナビ調整***/
.select_apply{
	margin-top: 1em;
}

/***オンライン講習と集合講習の相違点 表組***/
.diffe_list{
	margin-bottom: 4em;
}
.diffe_list *{
	box-sizing: border-box;
}

.tbl_diffe{
	width: 100%;
	border-top: solid 1px #3887bb;
	border-left: solid 1px #3887bb;
	border-collapse: collapse;
}

.tbl_diffe th,
.tbl_diffe td{
	padding: 0.5em;
	vertical-align: top;
	border-bottom: solid 1px #3887bb;
	border-right: solid 1px #3887bb;
}

.tbl_diffe th{
	background-color: #d9e9f3;
}
.tbl_diffe td{}

.def_w{
	text-align: center;
	width: 40%;
}
.def_width{
	text-align: center;
	width: 27%;
}

.bg_online{
	background-color: #fadae2;
}
.bg_online02{
	background-color: #fff1f5;
}
.bg_school{
	background-color: #c4e6d0;
}
.bg_school02{
	background-color: #e6f9ed;
}
.bg_webc{
	background-color: #c4dae6;
}
.bg_webc02{
	background-color: #e6f3f9;
}

/***ポイント***/
.paragraph p.point_img{}
.point_img img{
	max-width: 100%;
	height: auto;
}
.paragraph p.point_ttl{
	margin-bottom: 0.5em;
}
.point_ttl .icon_point{
	display: inline-block;
 font-size: 1.2em;
 color: #fff;
 padding: 0.5em 1em;
	border-radius: 0.25em;
 background-color: #3887BB;
	box-sizing: border-box;
}
.point_text{
	font-size: 1.3em;
	font-weight: bold;
	color: #3887BB;
}

/***お申込みの流れ***/
.apply_flow{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.apply_flow dt{
	color: #fff;
	text-align: center;
	width: 20%;
	margin: 0 0 2.5em 0;
	padding: 0.5em;
	background-color: #3887bb;
	box-sizing: border-box;
	position: relative;
}
.apply_flow dt p{
	font-size: 16px;
	margin: 0;
}
.apply_flow dd{
	width: 75%;
	margin: 0 0 2.5em 0;
	padding: 0 0.5em 0.5em 0.5em;
	border: solid 1px #3887bb;
	box-sizing: border-box;
	position: relative;
}
.apply_flow dd p{
	font-size: 14px;
	text-indent: -1em;
	margin: 0.5em 0 0 0;
	padding-left: 1em;
}

/*****
講習について（講習内容）ページ
*****/
/***スケジュールについて***/
/*オンライン講習*/
.sche_list_online{
	text-align: center;
	min-width: 60%;
	margin-bottom: 2em;
	border-collapse:collapse;
	border-spacing:0;
	border-top: solid 1px #ccc;
	border-left: solid 1px #ccc;
}
.sche_list_online th,
.sche_list_online td{
	padding: 0.5em;
	border-bottom: solid 1px #ccc;
	border-right: solid 1px #ccc;
}

.sche_list_online th{
	background-color: #eee;
}
.sche_list_online td{}

/*集合講習*/
.sche_list_box{
	width: 100%;
	margin-bottom: 2em;
	border-collapse:collapse;
	border-spacing:0;
}
.sche_list_box tr td:first-of-type{
	font-weight: bold;
	background-color: #eee;
}


/*****
お申し込みページ
*****/
.apply_mypage .applybtn,
.apply_mypage #lnav_place_limit,
.courseApply .applybtn{
 display: none;
}

.demo_btn_area{
	margin-bottom: 20px;
}
.demo_btn_area p{
	margin-bottom: 1em;
}

.demo_btn_ttl{
	font-size: 16px;
	font-weight: bold;
	text-align: center;
}

.demo_flex{
	display: flex;
 justify-content: space-between;
}

.btn_demo{}
.btn_demo a{
	display: block;
	width: 100%;
	max-width: 320px;
	margin: 0 auto;
}
.btn_demo a img{
	width: 100%;
	height: auto;
}

.demo_btn_note{
	margin-left: 1em;
	padding: 1em;
	border: solid 1px #f00;
}
.demo_note_ttl{
	font-size: 14px;
	text-align: center;
	color: #fff;
	padding: 0.25em 1em;
	background-color: #f00;
}

.btn_apply_text{
 width: 100%;
}
.btn_apply_text *{
	font-size: 1em;
}
.demo_flex .btn_apply_text{
 width: 48%;
}
.btn_apply_text a{
 /*display: block;*/
	display: flex;
	justify-content: center;
	align-items: center;
 font-size: 1.5em;
 font-weight: bold;
 text-align: center;
 color: #fff;
 height: 100%;
 padding: 0.5em;
 border-radius: 1em;
	text-shadow: 0 0 2px rgba(0,0,0,0.8);
 box-sizing: border-box;
}
.btn_apply_text a:hover{
 text-decoration: none;
 opacity: 0.8;
}

.bg_orange a{
	border: solid 2px #ff6900;
	background-image: linear-gradient(to bottom,#dda37a 0, #d4732f 100%);
}
.bg_red a{
	border: solid 2px #f00;
	background-image: linear-gradient(to bottom,#d07676 0, #b51d1d 100%);
}
.bg_blue a{
	border: solid 2px #3887bb;
	background-image: linear-gradient(to bottom,#6b8dc0 0, #11499d 100%);
}

/***apply_mypage用***/
.border_wrap{
	border: solid 2px #f00;
}

.note_inner{
	padding: 0 1em;
}

.note_ttl{
	font-size: 14px;
	text-align: center;
	color: #fff;
	padding: 0.25em 1em;
	background-color: #e73c64;
}
.note_link{
	display: inline-block;
	font-size: 1.2em;
	font-weight: bold;
	color: #fff;
	padding: 0.5em 1em 0.5em 1.5em;
	border-radius: 0.25em;
	background-color: #e73c64;
	position: relative;
}
.note_link::before{
	content: '';
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0.5em 0 0.5em 0.5em;
	border-color: transparent transparent transparent #fff;
	position: absolute;
	top: 50%;
	left: 0.5em;
	transform: translateY(-50%);
}

/***注意書き枠(上書き)***/
.pointTxt p{
	margin: 0 0 5px;
}
.pointTxt .li_indent1 li{
	margin: 0;
}

/***オンライン講習にて必要となるもの***/
.icon_important{
	display: inline-block;
	color: #ff0000;
	margin-right: 1em;
	padding: 0.25em 0.5em;
	background-color: #fff;
}
.online_preparation{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-bottom: 2em;
}
.online_need{
	width: 50%;
	padding: 1em 1em 0 1em;
	box-sizing: border-box;
	position: relative;
}
.online_need:nth-of-type(odd)::before{
	content: '';
	display: block;
	width: 1px;
	height: 80%;
	background-color: #ccc;
	position: absolute;
	top: 10%;
	right: 0;
}
.online_need:nth-of-type(n+3)::after{
	content: '';
	display: block;
	width: 80%;
	height: 1px;
	background-color: #ccc;
	position: absolute;
	top: 0;
	left: 10%;
}


/*****
講義動画のデモ視聴ページ
*****/
#demo_video{
	background-color: #fff;
}
#demo_video .demo_wrap{
	width: 94%;
	margin: 0 auto;
}
#demo_video .demo_section{
	clear: both;
}
#demo_video .demo_ttl{
	font-size: 24px;
	font-weight: normal;
	color: #fff;
	padding: 10px 0 7px 15px;
	background: #3887bb;
}
#demo_video .demo_ttl_sub{
	font-size: 16px;
	font-weight: normal;
	padding: 7px 15px 5px 15px;
	background: #e1eef6;
}
#demo_video .demo_area{
	margin: 20px auto;
}
#demo_video .demo_area div{
	margin: 0 auto;
}

/*マイページリンクの非表示*/
#demo_video .mypage_link{
	display: none;
}

/*****
ポップアップページ
*****/
.popup_page{
	width: 94%;
	margin: 0 auto;
	padding: 1em 0;
}

.popup_type01{
	display: inline-block;
	font-size: 1.2em;
	color: #3887bb;
	margin: 1em 0 0.5em 0;
	padding: 0.5em 1em;
	border: solid 1px #3887bb;
	border-radius: 0.5em;
}
.popup_type02{
	font-size: 1.4em;
	margin: 1em 0 0.5em 0;
}

.popup_note{
	color: #3887bb;
}



/*-----------------------------
　PC専用スタイル
------------------------------*/
@media screen and (min-width: 768px) {
	
	.flex_box_pc{
		display: flex;
	}
	.flex_around_pc{
		justify-content: space-around;
	}
	.flex_between_pc{
		justify-content: space-between;
	}
	
	.paragraph p{margin:0 0 15px;}
	.paragraph ul{margin:0 0 15px;}
	
	/*****ヘッダー*****/
	.contents header{
		background:url(../img/conthead_img.jpg) no-repeat right top,url(../../../img/sp_list02.png) no-repeat left bottom;
		position: relative;
	}
	

	/*****トップページ*****/
	#housingTop .leftcont h2{
		background:url(../img/ttl.jpg) no-repeat left top;
		width:663px;
		height:185px;
		overflow:hidden;
		text-indent:100%;
		white-space:nowrap;
		display:block;}

/*トップページメニューの高さ変更*/		
	.topMenu dl{
		height:150px;
		margin-bottom:10px;
	}
	
	.topMenu dl#place,
	.topMenu dl#qa{
		height:110px;
	}
	
	
	/*****
	講習について（講習の概要）
	*****/
	/***アンカーナビ調整***/
	.select_apply li.liwidth3{
		width: 30%;
	}
	
	/***ポイント***/
	.paragraph p.point_img{
		flex-shrink: 0;
		width: 270px;
		margin-right: 2em;
	}
	
	/***お申込みの流れ***/
	.apply_flow dt::after{
		content: '';
		display: block;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 1.5em 2em 0 2em;
		border-color: #3887bb transparent transparent transparent;
		position: absolute;
		bottom: -2em;
		left: 50%;
		transform: translateX(-50%);
	}
	.apply_flow dt:last-of-type::after{
		display: none;
	}
	
	/*****
	講習について（講習内容）ページ
	*****/
	/***スケジュールについて***/
	/*集合講習*/
	.sche_list_box{
		text-align: center;
		border-top: solid 1px #ccc;
		border-left: solid 1px #ccc;
	}
	.sche_list_box th,
	.sche_list_box td{
		padding: 0.5em;
		border-bottom: solid 1px #ccc;
		border-right: solid 1px #ccc;
	}
	.sche_list_box th{
		background-color: #eee;
	}

}
/*-----------------------------
　スマホ専用スタイル
------------------------------*/
@media screen and (max-width: 768px) {

	/*****ヘッダー*****/
	.contents header{
		background:url(../../../img/sp_list02.png) no-repeat left bottom,url(../img/sp_conthead_img.jpg) no-repeat right top;}
	.contents .headinfo{
		font-size: 18px;
	}
	
	.contents header p.headmoney{
		padding-bottom: 0;
	}

	/*****トップページ*****/
	#housingTop .leftcont h2{
		background:url(../img/spttl.jpg) no-repeat left bottom #d9e9f3;
		background-size:100% 100%;
		margin-top:15px;
		text-align:center;}
	#housingTop .leftcont h2 img{
		min-width:100%;height:auto;}
	
	/*動画視聴ボタン*/
	.btn_douga_area{
		display: block;
		width: 94%;
		margin: 20px auto 0 auto;
		padding-bottom: 10px;
	}
	.btn_douga_area li{
		width: 100%;
		margin-bottom: 10px;
	}
	
	/*トップページメニューのイレギュラー*/
	.topMenu dl#apply dt .another_link a,
	.topMenu dl#apply dd .another_link a{
		font-size: 14px;
	}
	
	/***講習　受付・教材発送スケジュール枠(インクルード)***/
	.page_shce_area{
		width: 94%;
		margin: 1em auto;
	}

		
	/*****講習日テーブル*****/		
#kenchikushiAbout .lessonlistTbl tbody td:nth-of-type(1):before { content: "講習日：";display:inline-block; font-weight:bold;}
#kenchikushiAbout .lessonlistTbl tbody td:nth-of-type(2):before { content: "[締切]インターネット：";display:inline-block; font-weight:bold;}

#kenchikushiAbout .lessonlistTbl tbody td:nth-of-type(3):before { content: "[締切]郵送：";display:inline-block; font-weight:bold;}
	
	/***カリキュラム***/
	table.dayscheduleTbl th,
	table.dayscheduleTbl td{
		display: block;
	}

/*結果*/

#kenchikushiAbout .result tbody td:nth-of-type(1):before { content: "講習名：";display:inline-block; font-weight:bold;}
#kenchikushiAbout .result tbody td:nth-of-type(2):before { content: "受講者数（名）：";display:inline-block; font-weight:bold;}
#kenchikushiAbout .result tbody td:nth-of-type(3):before { content: "修了者数（名）：";display:inline-block; font-weight:bold;}
#kenchikushiAbout .result tbody td:nth-of-type(4):before { content: "修了率（％）：";display:inline-block; font-weight:bold;}

	.topMenu dl br.dispBl{display:block;}
	
	/*****オンライン講義＋会場の概要・日程*****/
	.online_sche_wrap{
		display: block;
	}
	table.online_sche{
		width: 100%;
	}
	
	/*****
	講習について（講習の概要）
	*****/
	
	/***ポイント***/
	.point_img{
		width: 100%;
	}
	.point_ttl .icon_point{
		font-size: 1.2em;
	}
	.point_text{
		font-size: 1.15em;
	}
	/***お申込みの流れ***/
	.apply_flow{
		display: block;
	}
	.apply_flow dt{
		width: 100%;
		margin: 0;
	}
	.apply_flow dd{
		width: 100%;
	}
	.apply_flow dd::after{
		content: '';
		display: block;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 1.5em 2em 0 2em;
		border-color: #3887bb transparent transparent transparent;
		position: absolute;
		bottom: -2em;
		left: 50%;
		transform: translateX(-50%);
	}
	.apply_flow dd:last-of-type::after{
		display: none;
	}
	
	/*****
	講習について（講習内容）ページ
	*****/
	/***スケジュールについて***/
	/*集合講習*/
	.sche_list_box{}
	.sche_list_box th{
		display: none;
	}
	.sche_list_box td{
		display: block;
	}
	.sche_list_box tr td:first-of-type{
		margin-bottom: 0.5em;
		padding: 0.5em;
	}
	.sche_list_box tr td:last-of-type{
		margin-bottom: 1em;
	}
	.sche_list_box tr td:nth-of-type(1)::before{
		content: '講習日：';
		display: inline;
	}
	.sche_list_box tr td:nth-of-type(2)::before{
		content: '[締切]インターネット：';
		display: inline;
		font-weight: bold;
	}
	.sche_list_box tr td:nth-of-type(3)::before{
		content: '[締切]郵送：';
		display: inline;
		font-weight: bold;
	}
	.sche_list_box tr td:nth-of-type(4)::before{
		content: '修了証発送予定日：';
		display: inline;
		font-weight: bold;
	}
	
	/*****
	お申し込みページ
	*****/
	.demo_btn_ttl{
		text-align: left;
		font-size: 14px;
	}
	
	.demo_flex{
		display: block;
	}
 
 .demo_flex .btn_apply_text{
  width: 100%;
 }
 
	
	/*****
	講義動画のデモ視聴ページ
	*****/
	#demo_video .demo_ttl{
		font-size: 18px;
		padding: 0.5em;
	}
	#demo_video .demo_ttl_sub{
		padding: 0.5em;
	}
	
}