@charset "utf-8";
/* =============================================
	願書取り寄せサービス
============================================= */

/*---------------------------------------------
	common
---------------------------------------------*/
.simple_section{
 font-size: 1.4rem;
	line-height: 1.6;
	width: 94%;
	max-width: 970px;
 margin: 6em auto 0 auto;
}

.bg_yell{
	background-color: #ffc000;
}

/*** ページリンク ***/
.page_btn{
 font-size: 1.3rem;
 line-height: 1;
 margin: 0.5em 0;
}
.page_btn a{
 display: inline-block;
 color: #e04536;
 padding: 0.5em 1em;
 border: solid 1px #e04536;
}
.page_btn a::before{
 content: '';
 display: inline-block;
 vertical-align: middle;
 width: 0;
 height: 0;
 margin-right: 0.5em;
 border-style: solid;
 border-width: 0.25em 0 0.25em 0.5em;
 border-color: transparent transparent transparent #e04536;
}


/***各資格タイトル***/
.ttl_service{
 font-size: 1.8rem;
 line-height: 1;
 margin: 0 0 2em 0;
 border-top: solid 4px #f0630d;
 border-bottom: solid 2px #f0630d;
 position: relative;
}
.ttl_service .ttl_first{
 display: block;
	text-align: center;
 font-size: 2em;
	font-weight: bold;
 padding: 0.5em 1.25em 1em 1.25em;
}
.ttl_service .ttl_last{
 display: inline-block;
 color: #fff;
 padding: 0.5em 1em;
 min-width: 10em;
 background-color: #f0630d;
 position: relative;
}
.ttl_service .ttl_last::after{
 content: '';
 display: block;
 width: 0;
 height: 0;
 border-style: solid;
 border-width: 2em 0 0 1em;
 border-color: transparent transparent transparent #f0630d;
 position: absolute;
 top: 0;
 left: 100%;
}


/*---------------------------------------------
	page header
---------------------------------------------*/
#header_ttl{
 width: 100%;
	background-image: url("../img/header_bg.jpg");
	background-repeat: no-repeat;
	background-position: left bottom;
	background-size: cover;
}

.page_header{
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	width: 100%;
	max-width: 1226px;
	margin: 0 auto;
	padding: 2em 1em 0 1em;
}

.page_header .header_left{
	width: 56%;
	max-width: 672px;
	padding: 0 0 2em 0;
}
.header_left .page_ttl{}
.header_left .shikaku_li{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 2em auto;
}
.header_left .shikaku_li li{
	font-size: 2rem;
	font-weight: bold;
	width: 13em;
	padding: 0.25em 0.5em;
	background-color: rgba(255,255,255,0.8);
}
.header_left .header_box{
	display: flex;
	justify-content: space-between;
}
.header_left .header_box p{
	width: 30%;
	max-width: 200px;
}

.page_header .header_right{
	text-align: center;
	width: 35.5%;
	max-width: 426px;
}


/*---------------------------------------------
	願書取り寄せサービス お申込みの流れ
---------------------------------------------*/
#flow{}

.ttl_flow{
 font-size: 4rem;
	font-weight: bold;
 text-align: center;
}

.step_area{
 display: flex;
 justify-content: space-between;
 margin: 2em auto 0 auto;
}

.step_area li{
	font-size: 1.4rem;
	text-align: center;
 width: 30%;
	padding: 1em;
	border: solid 1px #ccc;
}

.step_area .icon_step{
 font-size: 1.2em;
 line-height: 1;
 color: #fff;
 text-align: center;
 padding: 0.5em;
 background-color: #c00000;
}
.step_area .step_sub{
	font-size: 1.4em;
	text-align: center;
	margin: 1em 0;
}

.step_area .icon_illust{
	margin-bottom: 1em;
}
.step_area .ttl_step_last{
 text-align: center;
 font-size: 2em;
 color: #fff;
 padding: 0.5em 0.5em 0.38em 0.5em;
 border: solid 1px #fff;
}

/*---------------------------------------------
	お申込み前にご確認ください
---------------------------------------------*/
#check_before{}

.ttl_check{
 font-size: 2.4rem;
	font-weight: bold;
 color: #c00000;
 text-align: center;
 margin-bottom: 1em;
 border-bottom: solid 4px #c00000;
	position: relative;
}
.ttl_check::after{
	content: '';
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 1em 0.5em 0 0.5em;
	border-color: #c00000 transparent transparent transparent;
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
}

.ttl_check02{
	display: inline-block;
 font-size: 2rem;
	font-weight: bold;
 text-align: center;
 color: #e04536;
 margin-bottom: 0.5em;
	padding: 0 1.5em;
	background-image: url("../img/icon_attent.png");
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 1em auto;
}

/*****
ご注意事項
*****/
.notice_area{
 margin: 1em auto;
 padding: 2em;
 border: solid 4px #c00000;
}
.notice_area li{
 font-size: 1.4rem;
}
.notice_area li .img_tel{
 width: auto;
 height: 1em;
 margin: 0 0.5em -0.16em 0.5em;
 vertical-align: baseline;
}
.notice_area p{
	margin-bottom: 0.5em;
}

/*** 学校案内リンク ***/
.school_btn{
 line-height: 1;
 max-width: 12em;
}
.school_btn a{
 display: inline-block;
 font-size: 1.2em;
 color: #555555;
 padding: 0.5em 1em;
 border: solid 1px #858585;
}
.school_btn a::before{
 content: '';
 display: inline-block;
 vertical-align: middle;
 width: 0;
 height: 0;
 margin-right: 0.5em;
 border-style: solid;
 border-width: 0.25em 0 0.25em 0.5em;
 border-color: transparent transparent transparent #858585;
}


/*---------------------------------------------
	願書取り寄せサービス 資格一覧
---------------------------------------------*/
#service_note{
 margin-top: 4em;
}

nav.page_nav{}
nav.page_nav ul{
 display: flex;
 flex-wrap: wrap;
}
nav.page_nav ul li{
 font-size: 1.6rem;
 width: 24%;
 margin: 0 1% 1em 0;
}
nav.page_nav ul li.link_1q{
 border: solid 1px #ec8a16;
 background-color: #ec8a16;
}
nav.page_nav ul li.link_2q{
 border: solid 1px #ecad16;
	background-color: #ecad16;
}
nav.page_nav ul li.link_1q a{
 color: #fff;
}
nav.page_nav ul li.link_2q a{
 color: #fff;
}

nav.page_nav ul li a{
 display: block;
 padding: 0.5em 1em;
 transition: color 1s, background-color 1s;
}
nav.page_nav ul li a:hover{
 text-decoration: none;
}
nav.page_nav ul li.link_1q a:hover{
	color: #fff;
	background-color: #ecad16;
}
nav.page_nav ul li.link_2q a:hover{
	color: #ecad16;
	background-color: #fff;
}


/*---------------------------------------------
	願書取り寄せサービス 願書一覧
---------------------------------------------*/
#application_list{
 margin-top: 6em;
}

.ttl_list{
 font-size: 2rem;
	font-weight: bold;
 margin-bottom: 0.5em;
 padding: 0.5em 1em;
 border: solid 1px #f0630d;
}
.ttl_list::before{
 content: '';
 display: inline-block;
 width: 0.5em;
 height: 0.5em;
 margin-right: 0.5em;
 border-style: solid;
 border-width: 2px;
 transform: translateY(-25%) rotateZ(-45deg);
}

.ttl_1q{
 color: #fff;
 background-color: #f0630d;
}
.ttl_1q::before{
 border-color: transparent transparent #fff #fff;
}
.ttl_2q{
 color: #fff;
	background-color: #f0630d;
}
.ttl_2q::before{
 border-color: transparent transparent #fff #fff;
}


/*** オープン時のタイトルクラス ***/
.btn_open{}
.ttl_list.btn_open a::before{
 transform: translateY(25%) rotateZ(135deg);
}

/*** 開閉パネルターゲット ***/
.show_box{}

/*** オープン時のパネルクラス ***/
.panel_open{}

.list_single{
 margin-bottom: 1em;
 border: solid 1px #858585;
}

.list_single h4{
 font-size: 1.6rem;
	font-weight: bold;
 padding: 0.5em;
 background-color: #ffdb6c;
}
.list_single h4 span{
 font-size: 0.85em;
 font-weight: normal;
}

.list_single dl{
 display: flex;
 flex-wrap: wrap;
 font-size: 1.4rem;
}
.list_single dl dt{
 width: 30%;
 padding: 0.5em;
 background-color: #fff2c9;
 border-bottom: solid 1px #858585;
}
.list_single dl dd{
 width: 70%;
 padding: 0.5em;
 border-bottom: solid 1px #858585;
}

.list_single .type{
 display: inline-block;
 text-align: center;
 vertical-align: middle;
 width: 4em;
 margin: 0 0.5em 0.5em 0;
 padding: 0.25em 0;
 font-size: 0.85em;
 border:  solid 1px #ccc;
}

.simple_close_btn{
 margin: 1em auto;
}

/*** 関連講座リンク ***/
.relation_btn{
 line-height: 1;
 margin: 2em 0 4em 2em;
}
.relation_btn a{
 font-size: 1.2em;
 color: #555555;
 margin-left: 0.5em;
 padding: 0.25em 1em;
 border: solid 1px #858585;
}
.relation_btn a::before{
 content: '';
 display: inline-block;
 vertical-align: middle;
 width: 0;
 height: 0;
 margin-right: 0.5em;
 border-style: solid;
 border-width: 0.25em 0 0.25em 0.5em;
 border-color: transparent transparent transparent #858585;
}


/* ===========================================
	MediaQueries
=========================================== */
/* PC----------------------------- */
@media screen and (min-width: 768px){}

/* スマホ----------------------------- */
@media screen and (max-width: 767px){
 /*---------------------------------------------
 	common
 ---------------------------------------------*/
 .btn_normal{
  font-size: 1.6rem;
 }
 
 .ttl_service{
  font-size: 1.6rem;
 }
	.ttl_service .ttl_first{
		font-size: 1.25em;
	}
 
 /*---------------------------------------------
 	page header
 ---------------------------------------------*/
 #header_ttl{
		background-size: auto 100%;
	}
	
	.page_header{
		display: block;
	}
	.page_header .header_left{
		width: 100%;
	}
	.header_left .shikaku_li li{
		font-size: 1.2rem;
	}
	.page_header .header_right{
		width: 60%;
		margin: 0 auto;
	}
 
 
 .simple_section{
  margin-top: 2em;
 }
 
	
 /*---------------------------------------------
 願書取り寄せサービス お届けの流れ
 ---------------------------------------------*/
 #flow{}
 
 .ttl_flow{
		font-size: 1.8rem;
	}
 
 .step_area{
		flex-wrap: wrap;
	}
 
 .step_area li{
  width: 49%;
		margin-bottom: 1em;
 }
	
	.step_area .step_sub{
		font-size: 1.25em;
	}
	.step_area .icon_illust{
		width: 60%;
		margin: 0 auto 1em auto;
	}
	
	/*---------------------------------------------
 お申込み前にご確認ください
 ---------------------------------------------*/
 #check_before{}
 
 .notice_area{
  margin: 0 auto;
  padding: 1em;
 }
 .ttl_check{
  font-size: 1.8rem;
 }
 .ttl_check02{
  font-size: 1.6rem;
 }


 /*---------------------------------------------
 願書取り寄せサービス 資格一覧
 ---------------------------------------------*/
 #service_note{
  margin-top: 2em;
 }
 
 nav.page_nav ul{
  justify-content: space-between;
 }
 nav.page_nav ul li{
  width: 49%;
  margin: 0 0 0.5em 0;
 }
 
 
 /*---------------------------------------------
 願書取り寄せサービス 願書詳細
 ---------------------------------------------*/
 #application_list{
  margin-top: 2em;
 }
 
 .ttl_list{
  font-size: 1.8rem;
 }
 
 /*** 資格タイトルID ***/
 #ttl_architect1q,
 #ttl_architect2q,
 #ttl_construction1q,
 #ttl_construction2q,
 #ttl_engineering1q,
 #ttl_engineering2q,
 #ttl_pavement,
 #ttl_pipe1q,
 #ttl_pipe2q,
 #ttl_gardening1q,
 #ttl_gardening2q{
  background-position: right -5em center;
  background-size: contain;
 }
 
 /*** オープン時のタイトルクラス ***/
 .btn_open{}

 /*** 開閉パネルターゲット ***/
 .simple_section > section{
  padding: 0;
 }
 .show_box{}

 /*** オープン時のパネルクラス ***/
 .panel_open{}
 
 .list_single dl{
  display: block;
 }
 
 .list_single dl dt,
 .list_single dl dd{
  width: 100%;
 }
 .list_single dl dt{
  border-bottom: none;
 }
 
 /*** 関連講座リンク ***/
 .relation_btn{
  margin: 1em 0 3em 0.5em;
 }
 .relation_btn a{
  font-size: 1em;
 }

}