@charset "utf-8";

/* =============================================
	受講相談
============================================= */
.under_pink{
	padding: 0 0.15em;
	background-image: linear-gradient(to top,#efac98 0, #efac98 40%, transparent 40%);
}
.under_yell{
	padding: 0 0.15em;
	background-image: linear-gradient(to top,#ffec73 0, #ffec73 40%, transparent 40%);
}

/*****
ページヘッダー
*****/
#page_header{
	background-color: #ffffee;
	background-image: url("../img/header_bg.png");
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 100% auto;
}
.page_header{
	aspect-ratio: 1200 / 520;
	width: 94%;
	max-width: 1200px;
	margin: 0 auto;
	position: relative;
	overflow: hidden;
}
.page_ttl{
	max-width: 836px;
	position: absolute;
	bottom: 0;
	left: 50%;
}

.page_header_img01{
	max-width: 302px;
	position: absolute;
	bottom: 0;
	right: 0;
}
.page_header_img02{
	max-width: 190px;
	position: absolute;
}

.anim_effect{
	transform: translate(-50%,50%);
	animation-name: anim_effect;
	animation-delay: 1s;
	animation-duration: 1s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}

/*****
タイトルアニメーション設定
*****/
@keyframes anim_effect{
	0%{
		transform: translate(-50%,50%);
	}
	100%{
		transform: translate(-50%,0);
	}
}


/*---------------------------------------------
	section
---------------------------------------------*/
.section_wrap{
	padding: 4em 0;
}

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

/*****
リード
*****/
.lead_section{
	line-height: 1.4;
	width: 100%;
	margin: 0 auto;
}
.lead_section_inner{
	width: 94%;
	max-width: 1200px;
	margin: 0 auto;
}
.lead_title{
	font-size: clamp(2.8rem,3.2vw,3.2rem);
	text-align: center;
	color: #c40008;
	margin-bottom: 1em;
}
.lead_title .lead_title_in{
	display: inline-block;
	position: relative;
}
.lead_title_in::before,
.lead_title_in::after{
	content: '';
	display: block;
	width: 1em;
	height: 100%;
	position: absolute;
	bottom: 0;
}
.lead_title_in::before{
	right: 100%;
	background-image: linear-gradient(to right top, transparent 0, transparent 45%, #c40008 calc(45% + 1px), #c40008 calc(45% + 3px), transparent calc(45% + 4px), transparent 100%);
}
.lead_title_in::after{
	left: 100%;
	background-image: linear-gradient(to right bottom, transparent 0, transparent 45%, #c40008 calc(45% + 1px), #c40008 calc(45% + 3px), transparent calc(45% + 4px), transparent 100%);
}

.quest_img_wrap{
	margin-bottom: 4em;
	background-color: #FCF6EA;
	position: relative;
	filter: drop-shadow(0 4px 4px #ccc);
}
.quest_img_wrap::after{
	content: '';
	display: block;
	width: 10em;
	height: 3em;
	background-color: #FCF6EA;
	clip-path: polygon(0 0,100% 0,50% 100%);
	position: absolute;
	top: calc(100% - 1px);
	left: 50%;
	transform: translateX(-50%);
}

.quest_img_area{
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 3em 0;
}

.quest_cap{
	font-size: clamp(1.6rem,2.4vw,2.4rem);
	font-weight: bold;
	text-align: center;
	width: 94%;
	margin: 2em auto 0 auto;
}

.lead_conc{
	font-size: clamp(2.8rem,4vw,4rem);
	font-weight: bold;
	text-align: center;
}
.lead_conc ruby > rt{
	font-size: 0.65em;
}
.lead_conc_inner{
	position: relative;
}
.lead_conc_inner::after{
	content: '';
	display: block;
	background-image: url("../img/icon_lead_conc.png");
	background-repeat: no-repeat;
	background-size: contain;
}


/*****
相談フォーム案内
*****/
.form_area_wrap{
	padding: 2em;
	border-radius: 2em;
	box-shadow: 0 0 4px 4px #ccc;
}
.form_area_ttl{
	font-size: clamp(2.6rem,3.2vw,3.2rem);
	text-align: center;
	margin-bottom: 1em;
	padding-bottom: 1em;
	border-bottom: dashed 2px #efac98;
}
.form_area_ttl .form_ttl{
	font-size: 1.2em;
	color: #FF7C80;
}

.form_subttl{
	font-size: 2.2rem;
	text-align: center;
	margin-bottom: 1em;
	position: relative
}

/***フォームボタン***/
.form_area{
	text-align: center;
}

.form_btn_box{
	margin-top: 2em;
}
.form_kenchiku{
	color: #4E95D9;
}
.form_fudousan{
	color: #FF9933;
}
.form_kensetsu{
	color: #00B050;
}
.form_sonota{
	color: #FF7C80;
}

.btn_form{
	font-size: 1.8rem;
	line-height: 1;
	text-align: center;
	width: 90%;
	max-width: 640px;
	margin: 0.5em auto 0 auto;
	border-radius: 1em;
}
.btn_form a{
	display: block;
	padding: 1em 3em 1em 1em;
	border: solid 2px;
	border-radius: 1.5em;
	position: relative;
	transition: transform 0.5s;
}
.btn_form a::after{
	content: '';
	display: block;
	width: 1em;
	height: 1em;
	background-image: url("../img/form_btn_icon.png");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	position: absolute;
	top: 50%;
	right: 1em;
	transform: translateY(-50%);
}
.btn_form a img{
	width: auto;
	height: 1em;
	filter: drop-shadow(0 0 2px #fff);
}

.btn_form a:hover{
	transform: scale(1.1);
}

.form_kenchiku .btn_form a{
	border-color: #7ac7ec;
	background-image: linear-gradient(to bottom,#d2ecfa 0,#acddf7 15%,#7dccf3 85%,#acddf7 100%);
}
.form_fudousan .btn_form a{
	border-color: #f7d300;
	background-image: linear-gradient(to bottom,#fff3c2 0,#ffeb98 15%,#ffd900 85%,#ffeb98 100%);
}
.form_kensetsu .btn_form a{
	border-color: #b1cd4e;
	background-image: linear-gradient(to bottom,#ecf3d3 0,#d5e59c 15%,#b6d350 85%,#d5e59c 100%);
}
.form_sonota .btn_form a{
	border-color: #e998bc;
	background-image: linear-gradient(to bottom,#f9dbe8 0,#f5bed6 15%,#f09dc1 85%,#f5bed6 100%);
}

/*****
受講相談の流れ
*****/
.ttl_type01_wrap{
	background-color: #FF7C80;
}
.ttl_type01{
	font-size: clamp(2.6rem,3.2vw,3.2rem);
	color: #fff;
	width: 94%;
	max-width: 1000px;
	margin: 0 auto 1em auto;
	padding: 0.5em 0;
}
.ttl_type01::after{
	content: '';
	display: inline-block;
	height: 1.2em;
	aspect-ratio: 3 / 2;
	margin-left: 1em;
	background-image: url("../img/icon_type01.png");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
}

.ttl_type02{
	font-size: clamp(2.6rem,3.2vw,3.2rem);
	margin-bottom: 1em;
	transform: skewX(-15deg);
}
.ttl_type02 .font_size_s{
	font-size: 0.65em;
}

.step_wrap{
	padding: 2em;
	border: solid 2px #FF7C80;
	margin-bottom: 4em;
	position: relative;
}

.step_wrap::after{
	content: '';
	display: block;
	width: 4em;
	height: 2em;
	clip-path: polygon(0 0,100% 0,50% 100%);
	background-color: #FF7C80;
	position: absolute;
	top: calc(100% + 1em);
	left: 50%;
	transform: translateX(-50%);
}

.step_wrap:nth-of-type(3){
	margin-bottom: 0;
}
.step_wrap:nth-of-type(3)::after{
	display: none;
}

/*step2*/
.step_img_wrap{
	padding: 2em 25% 2em 2em;
}

.step_img{
	width: 20%;
	position: absolute;
	bottom: 0;
	right: 3%;
}


/* ===========================================
	MediaQueries
=========================================== */
/* スマホ----------------------------- */
@media (max-width: 767px){
	/*****
	ページヘッダー
	*****/
	#page_header{
		border-bottom: solid 6px #FF7C80;
	}
	.page_header{}
	.page_ttl{
		width: 70%;
	}
	.page_header_img01{
		width: 25.5%;
	}
	.page_header_img02{
		width: 16%;
		bottom: 5%;
		left: 5%;
	}
	
	/*---------------------------------------------
	section
	---------------------------------------------*/
	.section_wrap{
		padding: 2em 0;
	}
	
	.normal_section{
		font-size: 1.4rem;
	}
	
	/*****
	リード
	*****/
	.lead_title{
		font-size: clamp(2rem,3.65vw,2.8rem);
	}
	
	.quest_img_area{
		padding: 1em 0;
	}
	
	.quest_cap{
		margin: 1em auto 0 auto;
	}
	
	.lead_conc{
		font-size: clamp(1.8rem,3.65vw,2.8rem);
	}
	.lead_conc_inner{}
	.lead_conc_inner::after{
		width: 1.5em;
		height: 1.5em;
		position: absolute;
		bottom: 0;
		right: -1.5em;
	}
	
	/*****
	相談フォーム案内
	*****/
	.form_area_wrap{
		padding: 1em 0.5em;
		border-radius: 0.5em;
	}
	
	.form_area_ttl{
		font-size: clamp(1.6rem,3.4vw,2.6rem);
	}
	
	.form_subttl{
		font-size: clamp(1.4rem,2.9vw,2.2rem);
	}
	
	/***フォームボタン***/
	
	
	/*****
	受講相談の流れ
	*****/
	.ttl_type01{
		font-size: clamp(1.6rem,3.4vw,2.6rem);
	}
	
	.step_wrap{
		padding: 1em;
	}
	
	.ttl_type02{
		font-size: clamp(1.8rem,3.4vw,2.6rem);
	}
	
	
	/*step2*/
	.step_img_wrap{
		padding: 1em 30% 1em 1em;
	}
	.step_img{
		width: 30%;
		right: 0;
	}
	
}

/* PC----------------------------- */
@media (min-width: 768px){
	/*****
	ページヘッダー
	*****/
	#page_header{
		border-bottom: solid 20px #FF7C80;
	}
	.page_header{}
	.page_ttl{
		width: 70%;
	}
	.page_header_img01{
		width: 25.5%;
	}
	.page_header_img02{
		width: 16%;
		bottom: 5%;
		left: 8%;
	}
	
	/*---------------------------------------------
	section
	---------------------------------------------*/
	.section_wrap{}
	
	.normal_section{}
	
	/*****
	リード
	*****/
	.quest_img_area{}
	
	.lead_conc_inner{
		padding-right: 1.5em;
	}
	.lead_conc_inner::after{
		width: 1.5em;
		height: 1.5em;
		position: absolute;
		top: 0;
		right: 0;
	}
	
	/*****
	相談フォーム案内
	*****/
	/***フォームボタン***/
	.form_area{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	
	.form_btn_box{
		width: 48%;
	}
	
}