@charset "utf-8";

/* =============================================
	賃貸不動産経営管理士　講座紹介
============================================= */
/*****
common
*****/
.font_red{
	color: #e04536;
}
.font_blue{
	color: #99cdff;
}
.font_blue_d{
	color: #2066ce;
}
.font_green{
	color: #7cc035;
}
.font_orange{
	color: #fd780b;
}
.font_pink{
	color: #ef4783;
}

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

.del_red{
	text-decoration-color: #e04536;
	text-decoration-thickness: 2px;
}

.btn_bg_yell{
	background-color: #fdd903;
}
.btn_bg_green{
	background-color: #7cc035;
}
.btn_bg_pink{
	background-color: #ef4783;
}
.btn_bg_blue{
	background-color: #99cdff;
}


/*---------------------------------------------
	page header
---------------------------------------------*/
.page_header{
	background-image: url("../img/page_header_bg.jpg");
	position: relative;
}
.page_header .page_header_top{
	width: 94%;
	max-width: 1200px;
	min-width: 970px;
	margin: 0 auto;
	padding: 4em 0;
	position: relative;
	z-index: 999;
}
.page_header_top h1{
	width: 54%;
	max-width: 640px;
	margin-left: 6%;
}
.page_header_top .header_illust{
	width: 27%;
	max-width: 320px;
	position: absolute;
	bottom: 0;
	right: 0;
}

.sub_header{
	background-color: #d3e8c4;
}
.sub_header .page_header_bottom{
	width: 94%;
	max-width: 1200px;
	min-width: 970px;
	margin: -5% auto 0 auto;
	padding: 0 0 2em 0;
	position: relative;
	z-index: 999;
}
@media (min-width: 1201px){
	.sub_header .page_header_bottom{
		margin: -60px auto 0 auto;
	}
}
.page_header_bottom .sub_ttl{
	width: 67%;
	max-width: 802px;
	margin: 0 0 0 4%;
}
.page_header_bottom .sub_ttl02{
	width: 30%;
	max-width: 350px;
	position: absolute;
	bottom: 2em;
	right: 3%;
}

.page_header img,
.sub_header img{
	width: 100%;
	height: auto;
}

.anim01{
	animation-name: anim_fade;
	animation-duration: 2s;
	animation-delay: 1s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
.anim02{
	animation-name: anim_fade;
	animation-duration: 2s;
	animation-delay: 2s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
.anim03{
	animation-name: anim_fade;
	animation-duration: 2s;
	animation-delay: 3s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
.anim04{
	animation-name: anim_fade;
	animation-duration: 2s;
	animation-delay: 4s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}

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


/*---------------------------------------------
	section
---------------------------------------------*/
.section_wrap{
	margin-top: 4em;
	padding: 20px 0;
	background-color: #d3e8c4;
}
.normal_section{
 font-size: 1.6rem;
	line-height: 1.6;
	width: 970px;
	margin: 4em auto 0 auto;
	padding: 20px;
	background-color: #fff;
}
.section_wrap .normal_section{
	margin: 0 auto;
}

/*****
ページリード
*****/
.page_lead{
	font-size: 1.8rem;
	line-height: 1.8;
}

/*****
コンテンツ
*****/
.ttl_type01{
	font-size: 2.4rem;
	color: #fff;
	margin-bottom: 1em;
	padding: 0.5em 0.5em 0.5em 160px;
	border-radius: 1.5em;
	/*background-color: #14a161;*/
	background-image: linear-gradient(to bottom, #66c298, #14a161);
	text-shadow: 0 2px 2px #000;
	position: relative;
}
.ttl_type01 .icon_type01{
	display: block;
	position: absolute;
	bottom: 0;
	left: 1em;
}

/*****
02 業務管理者について
*****/
.flow_chart{
	text-align: center;
	margin: 1em 0;
}

/*****
03 対策講座
*****/
.web_tanki,
.web_kai,
.web_moshi{
	margin: 4em 0 1em 0;
	padding: 2em;
	border-radius: 1em;
	position: relative;
}
.web_tanki{
	background-color: #beb7c5;
}
.web_kai{
	background-color: #fff68c;
}
.web_moshi{
	background-color: #dff8d0;
}

.web_tanki::before,
.web_kai::before,
.web_moshi::before{
	content: '';
	display: block;
	width: 150px;
	height: 150px;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center bottom;
	position: absolute;
	top: -50px;
	left: -30px;
}
.web_tanki::before{
	background-image: url("../img/web_tanki_icon.png");
}
.web_kai::before{
	background-image: url("../img/web_kai_icon.png");
}
.web_moshi::before{
	background-image: url("../img/web_moshi_icon.png");
}

.ttl_type02{
	font-size: 2.4rem;
	line-height: 1;
	text-align: center;
	color: #fff;
	margin: 0 0 1em 5em;
	padding: 0.5em;
	border-radius: 1.5em;
}
.web_tanki .ttl_type02{
	background-color: #6d1684;
}
.web_kai .ttl_type02{
	background-color: #ea6000;
}
.web_moshi .ttl_type02{
	background-color: #5e8f41;
}

.detail_wrap{
	display: flex;
	justify-content: space-between;
}
.detail_wrap .detail_text{}
.detail_wrap .detail_img{
	padding: 1em;
	background-color: #fff;
}

.ttl_type03{
	font-size: 2rem;
	font-weight: bold;
	color: #e04536;
	margin: 1em 0 0.5em 0;
	border-bottom: dashed 2px #e04536;
}
.ttl_type03 .ttl_icon{
	display: inline-block;
	font-size: 1.6rem;
	font-weight: normal;
	color: #333;
	margin-left: 1em;
}

.web_price{
	flex-shrink: 0;
	font-size: 2.4rem;
	color: #fff;
	min-width: 492px;
	margin: 1em 0 1em 1em;
	padding: 0.5em 1em;
	border: solid 2px #fff;
	border-radius: 0.25em;
}
.web_tanki .web_price{
	background-color: #976999;
}
.web_kai .web_price{
	background-color: #f29600;
}
.web_moshi .web_price{
	background-color: #42a307;
}

/***割引価格***/
.wari_cp{
	font-size: 1.2em;
	font-weight: bold;
	text-align: center;
	color: #e04536;
	margin: 2em auto 0 auto;
	padding: 0.25em 0.5em;
	border-radius: 1em;
	background-color: #fff;
	box-shadow: 0 4px 0 0 rgba(0,0,0,0.25);
}
.wari_price{
	font-size: 1.8rem;
	color: #fff;
	text-align: center;
	margin: 1em 0;
	padding: 0.5em 1em;
	border: solid 2px #fff;
	border-radius: 0.25em;
}
.web_tanki .wari_price{
	background-color: #976999;
}
.web_kai .wari_price{
	background-color: #f29600;
}
.web_moshi .wari_price{
	background-color: #75b051;
}

.wari_price_flex{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 1em;
}
.wari_price_flex .wari_price{
	width: 45%;
	position: relative;
}
.wari_price_flex .wari_price::after{
	content: '';
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 1em 0 1em 1.5em;
	border-color: transparent transparent transparent #e04536;
	position: absolute;
	top: 50%;
	left: 108%;
	transform: translateY(-50%);
}

.wari_price_flex .price_down{
	width: 45%;
}
.price_down{
	font-size: 2.4rem;
	color: #333;
	text-align: center;
	padding: 0.5em;
	border-radius: 0.25em;
	background-color: #fff;
}
.price_down img{
	max-width: 100%;
	height: auto;
}
.web_tanki .price_down{
	border: solid 2px #976999;
}
/***end 割引価格***/



/* ===========================================
	MediaQueries
=========================================== */
/* PC----------------------------- */
@media (min-width: 768px){
	/*---------------------------------------------
		section
	---------------------------------------------*/
	.btn_area_flex{
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	
	/*****
	03 対策講座
	*****/
	.detail_wrap .detail_text{
		width: 41%;
		max-width: 352px;
	}
	.detail_wrap .detail_img{
		width: 57%;
		max-width: 492px;
	}
	
}

/* スマホ----------------------------- */
@media screen and (max-width: 767px){
	/*---------------------------------------------
		page header
	---------------------------------------------*/
	.page_header .page_header_top{
		min-width: 0;
		padding: 1em 0;
	}
	
	.sub_header .page_header_bottom{
		min-width: 0;
		margin: -3% auto 0 auto;
		padding: 0 0 1em 0;
	}
	.page_header_bottom .sub_ttl{
		width: 80%;
		margin: 0;
	}
	.page_header_bottom .sub_ttl02{
		bottom: 1em;
		right: 0;
	}
	
	
	/*---------------------------------------------
		section
	---------------------------------------------*/
	.section_wrap{
		margin-top: 2em;
		padding: 1em 0;
	}
	.normal_section{
		font-size: 1.4rem;
		width: 94%;
		margin: 2em auto 0 auto;
		padding: 1em 0.5em;
	}
	
	.ttl_type01{
		font-size: 1.8rem;
		padding: 0.5em 0.5em 0.5em 4.5em;
	}
	.ttl_type01 .icon_type01{
		width: 4em;
		left: 0.5em;
	}
	
	/*****
	03 対策講座
	*****/
	.web_tanki,
	.web_kai,
	.web_moshi{
		margin: 3em 0 1em 0;
		padding: 1em;
	}
	.web_tanki::before,
	.web_kai::before,
	.web_moshi::before{
		width: 6em;
		height: 6em;
		top: -3em;
		left: 0;
	}
	
	.ttl_type02{
		font-size: 1.6rem;
	}
	
	.detail_wrap{
		display: block;
	}
	
	.ttl_type03{
		font-size: 1.6rem;
	}
	.ttl_type03 .ttl_icon{
		font-size: 1.4rem;
	}
	
	.detail_wrap .detail_img{
		margin-top: 1em;
	}
	
	.web_price{
		font-size: 1.8rem;
		margin: 0;
		width: 100%;
		min-width: 0;
	}
	
	/***割引価格***/
	.wari_price{
		font-size: 1.6rem;
		text-align: left;
	}
	
	.wari_price_flex{
		display: block;
	}
	
	.wari_price_flex .wari_price{
		width: 100%;
	}
	.wari_price_flex .wari_price::after{
		border-width: 1.5em 1em 0 1em;
		border-color: #e04536 transparent transparent transparent;
		top: auto;
		bottom: -2em;
		left: 50%;
		transform: translateX(-50%);
	}
	
	.wari_price_flex .price_down{
		width: 100%;
	}
	.price_down{
		font-size: 1.8rem;
	}
	
}