@charset "utf-8";
/* =============================================
	宅建通信合格コース
============================================= */
.pdd_t3{
	padding-top: 3em;
}
.pdd_l1{
	padding-left: 1em;
}

.font_orange{
	color: #ff6600;
}
.font_yell{
	color: #ed9c01;
}

.bg_orange{
	background-color: #ff6600;
}
.bg_yell{
	background-color: #ed9c01;
}
.bg_yell_light{
	background-color: #FFFFEF;
}
.bg_pink{
	background-color: #fceae0;
}

/*---------------------------------------------
	ページヘッダー
---------------------------------------------*/
#page_header{
	background-color: #fceae0;
}

.page_header{
	width: 100%;
	max-width: 1600px;
	margin: 0 0 0 auto;
	position: relative;
}

.page_copy{
	max-width: 782px;
}
.page_ttl{
	max-width: 1136px;
}
.page_img{}
.page_jisseki{
	max-width: 570px;
}

.deco01,
.deco02,
.deco03{
	display: inline-block;
	max-width: 77px;
	background-image: url("../img/header_mark.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	position: absolute;
	opacity: 0;
	animation-name: anim_deco;
	animation-iteration-count: infinite;
}
.deco01{
	width: 6%;
	top: 74%;
	left: 76%;
	animation-delay: 2.5s;
	animation-duration: 2s;
}
.deco02{
	width: 6.8%;
	top: 0;
	left: 23.5%;
	transform: translateY(-38%);
	animation-delay: 1.7s;
	animation-duration: 1.7s;
}
.deco03{
	width: 10%;
	top: 30%;
	left: 30%;
	animation-delay: 2s;
	animation-duration: 1.5s;
}

/*.anim_fadein{
	opacity: 0;
	animation-name: anim_fadein;
	animation-duration: 2s;
	animation-delay: 1s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}*/


/*****
タイトルアニメーション設定
*****/
@keyframes anim_deco{
	0%{
		opacity: 0;
	}
	35%{
		opacity: 1;
	}
	65%{
		opacity: 1;
	}
	100%{
		opacity: 0;
	}
}

/*****
申し込みボタンエリア
*****/
.app_area{
	width: 94%;
	max-width: 640px;
	margin: 0 auto;
}
.btn_app{
	font-size: 1.8rem;
	font-weight: bold;
	text-align: center;
	margin-top: 2em;
}
.btn_app a{
	display: block;
	color: #fff;
	padding: 1em 2em;
	border-radius: 2em;
	box-shadow: 0 4px 0 0 #ae4d1e;
	position: relative;
	transition: transform 0.5s,box-shadow 0.5s;
}
.btn_app a::after{
	content: '';
	display: block;
	width: 0.5em;
	height: 0.5em;
	border-top: solid 1px #fff;
	border-right: solid 1px #fff;
	position: absolute;
	top: 50%;
	right: 0.5em;
	transform: translateY(-50%) rotateZ(45deg);
}

.btn_app a:hover{
	box-shadow: 0 0 0 0 transparent;
	transform: translateY(4px);
}
.btn_app a .icon_free_txt{
	position: relative;
}
.btn_app a .icon_free_txt .icon_free{
	width: 2.5em;
	height: 2.5em;
	margin-right: 0.5em;
	position: absolute;
	bottom: 0;
	right: 100%;
	transform: translateY(-25%);
}


/*****
リード
*****/
.ttl_lead{
	font-size: 2.4rem;
	text-align: center;
	margin-bottom: 0.5em;
}
.ttl_lead_sub{
	font-size: 3.2rem;
	text-align: center;
}

.page_nav_box{
	display: flex;
	margin-top: 2em;
	border: solid 2px #000;
	background-color: #fff;
}

/***ページナビ***/
.page_nav_area{}
.page_nav{
	font-size: clamp(1.8rem,2.4vw,2.4rem);
	margin-bottom: 1em;
}
.page_nav li{
	text-indent: -2.1em;
}
.page_nav li a{
	display: block;
	color: #000;
	padding: 0.5em 1em 0.5em 2.1em;
	border-bottom: solid 1px #000;
}
.page_nav li a img{
	width: 1.6em;
	vertical-align: text-bottom;
	margin-right: 0.5em;
}

.page_nav_img{}


/*---------------------------------------------
	section
---------------------------------------------*/
.section_wrap{
	margin: 0 auto;
	padding: 6em 0;
}

.normal_section{
	font-size: 1.8rem;
	line-height: 1.6;
	width: 94%;
	max-width: 1000px;
	margin: 0 auto;
}

.ttl_allsets_box{
	text-align: center;
}
.ttl_allsets{
	font-size: 4rem;
	color: #fff;
	margin-bottom: 1.5em;
	padding: 0.5em;
	background-color: #db2929;
	position: relative;
}
.ttl_allsets::after{
	content: '';
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-color: #db2929 transparent transparent transparent;
	border-width: 1em 0.25em 0 0.75em;
	position: absolute;
	top: 100%;
	left: 6%;
	transform: skewX(30deg);
}

.ttl_type01{
	font-size: 3.2rem;
	color: #ff6600;
	margin-bottom: 1em;
}
.ttl_type01 img{
	vertical-align: text-bottom;
	margin: 0 0.5em 0 0.25em;
}
.ttl_type01_cap{
	font-size: 0.8em;
	font-weight: normal;
	color: #000;
}

.inner_section{
	padding: 2em;
	border: solid 4px #F6C6AD;
	border-radius: 2em;
	background-color: #fff;
}

.ttl_type02{
	font-size: 2.8rem;
	text-align: center;
	margin: 2em 0 1em 0;
	padding: 0.5em;
	border-bottom: solid 4px #575f64;
	position: relative;
}
.ttl_type02::before,
.ttl_type02::after{
	content: '';
	display: block;
	width: 0.5em;
	height: 0.5em;
	border-top: solid 2px #575f64;
	position: absolute;
	top: 0;
}
.ttl_type02::before{
	border-left: solid 2px #575f64;
	left: 0;
}
.ttl_type02::after{
	border-right: solid 2px #575f64;
	right: 0;
}

/*****
point01
*****/
.all_text_img{
	text-align: center;
}

.point01_graph{}
.point01_img{}

.point01_ttl_box{
	text-align: center;
	margin: 2em 0 1em 0;
}
.point01_ttl_sub{
	display: inline-block;
	font-size: 2rem;
	color: #000;
	margin-bottom: 1em;
	padding: 0.5em 1em;
	border-bottom: solid 1px #db2929;
	position: relative;
}
.point01_ttl_sub::before,
.point01_ttl_sub::after{
	content: '';
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	position: absolute;
	top: 100%;
	left: 70%;
	transform: translateX(-50%);
}
.point01_ttl_sub::before{
	border-width: 1em 1em 0 1em;
	border-color: #db2929 transparent transparent transparent;
}
.point01_ttl_sub::after{
	border-width: calc(1em - 1px) calc(1em - 1px) 0 calc(1em - 1px);
	border-color: #fff transparent transparent transparent;
}
.point01_ttl{
	display: flex;
	align-items: center;
	font-size: 2.6rem;
	color: #db2929;
}
.point01_ttl_inner{
	display: inline-block;
	margin: 0 1em;
}
.point01_ttl::before,
.point01_ttl::after{
	flex-grow: 1;
	content: '';
	display: inline-block;
	width: auto;
	height: 2px;
	background-color: #db2929;
}

.point01_kaisei{}

/*****
point02
*****/
.cc_box{}
.ttl_point02{
	font-size: 2rem;
	margin-bottom: 0.5em;
}

.point02_tbl{
	font-size: 1.4rem;
	width: 100%;
	margin-bottom: 2em;
	border-top: solid 1px #555;
	border-left: solid 1px #555;
}
.point02_tbl th,
.point02_tbl td{
	vertical-align: middle;
	padding: 0.5em;
	border-bottom: solid 1px #555;
	border-right: solid 1px #555;
}
.point02_tbl th{
	text-align: center;
	color: #fff;
	background-color: #ff6600;
}
.point02_tbl th.th_col_k{
	width: 5em;
}
.point02_tbl th.th_col_t{
	width: 7em;
}
.point02_tbl td{}

.ttl_type03{
	display: inline-block;
	font-size: 1.2em;
	margin-bottom: 0.5em;
	background-image: linear-gradient(to top,#fefe94 0, #fefe94 40%, transparent 40%);
}

/*****
point03
*****/
.point03_img{}

/*****
ズバリ解説
*****/
.option_line{
	border-top: dashed 2px #000;
}
.option_mark{
	display: inline-block;
	font-size: 0.8em;
	line-height: 1;
	color: #000;
	margin-right: 1em;
	padding: 0.25em 0.5em;
	border: solid 1px #000;
	border-radius: 1em;
	background-color: #fff;
}

.tbl_zubari .outline_table{
	width: auto;
}
.tbl_zubari .outline_table th{
	width: auto;
}

.zubari-info__img{
	width: 65%;
	margin: 0 auto;
}


/* ===========================================
	MediaQueries
=========================================== */
/* PC----------------------------- */
@media (min-width: 768px){
	/*---------------------------------------------
 	ページヘッダー
 ---------------------------------------------*/
	.page_header{}
	.page_copy{
		width: 49%;
		position: absolute;
		top: 6%;
		left: 2%;
	}
	.page_ttl{
		width: 71%;
		position: absolute;
		top: 38%;
		left: 2%;
	}
	.page_img{
		width: 54%;
		max-width: 857px;
		margin: 0 0 0 auto;
	}
	.page_jisseki{
		width: 36%;
		position: absolute;
		top: 56%;
		left: 8%;
	}
	
	
	/*****
	申し込みボタンエリア
	*****/
	.btn_app{
		width: 48%;
	}
	
	
	/*****
	リード
	*****/
	.page_nav_box{
		padding: 2em 2em 0 2em;
	}
	
	/***ページナビ***/
	.page_nav_area{
		width: 65%;
	}
	.page_nav{
		font-size: clamp(1.8rem,2.4vw,2.4rem);
	}
	
	.page_nav_img{
		text-align: center;
		width: 35%;
	}
	
	/*---------------------------------------------
	section
	---------------------------------------------*/
	.ttl_type01_cap{
		display: inline-block;
		font-size: 1.6rem;
		margin-left: 1em;
	}
	
	/*****
	point01
	*****/
	.all_text_img{
		width: 41%;
		max-width: 375px;
	}
	
	.point01_graph{
		width: 50%;
	}
	.point01_img{
		width: 48%;
	}
	.point01_kaisei{
		display: flex;
		flex-wrap: wrap;
	}
	.point01_kaisei li{
		margin-right: 2em;
	}
	
	/*****
	point02
	*****/
	.cc_box{
		width: 48%;
	}
	
	/*****
	point03
	*****/
	.point03_img{
		float: right;
		width: 42%;
		margin-left: 1em;
	}
}

/* スマホ----------------------------- */
@media screen and (max-width: 767px){
	/*---------------------------------------------
 	ページヘッダー
 ---------------------------------------------*/
	.page_header{
		padding: 2em 0;
	}
	.page_copy{
		width: 80%;
		margin: 0 auto 1em 3%;
		position: relative;
	}
	.page_ttl{
		width: 94%;
		margin: 0 auto;
		position: relative;
	}
	.page_img{
		width: 100%;
		max-width: 858px;
		margin: 1em auto;
	}
	.page_jisseki{
		width: 70%;
		margin: 0 auto;
		position: relative;
	}
	
	/*****
	申し込みボタンエリア
	*****/
	.app_area{}
	.btn_app{
		font-size: 1.6rem;
	}
	
	/*****
	リード
	*****/
	.ttl_lead{
		font-size: 1.6rem;
	}
	.ttl_lead_sub{
		font-size: 1.8rem;
	}
	
	.page_nav_box{
		justify-content: space-between;
		padding: 0.5em;
	}
	
	/***ページナビ***/
	.page_nav_area{
		width: 70%;
	}
	.page_nav{
		font-size: clamp(1.4rem,2.4vw,1.8rem);
	}
	.page_nav_img{
		text-align: center;
		width: 28%;
		margin-top: 1.5em;
	}
	
 /*---------------------------------------------
	section
	---------------------------------------------*/
	.section_wrap{
		padding: 2em 0;
	}
	
	.normal_section{
		font-size: 1.4rem;
	}
	
	.ttl_allsets{
		font-size: 2rem;
	}
	
	.ttl_type01{
		font-size: 2rem;
	}
	.ttl_type01 img{
		width: 1.6em;
	}
	
	.inner_section{
		padding: 0.5em;
		border-radius: 0.5em;
	}
	
	/*****
	point01
	*****/
	.ttl_type02{
		font-size: 1.8rem;
	}
	
	.all_text_img{}
	
	.point01_graph{}
	.point01_img{
		margin-top: 1em;
	}
	
	.point01_ttl_sub{
		font-size: 1.4rem;
	}
	.point01_ttl{
		font-size: 1.6rem;
	}
	
	/*****
	point02
	*****/
	.cc_box{}
	.ttl_point02{
		font-size: 1.4rem;
	}
	
	/*****
	point03
	*****/
	.point03_img{
		text-align: center;
	}
 
}