@charset "UTF-8";

/* リスト */
ul#breadcrumbsList + #contactFlowSec { margin-top: 55px; }
ul#contactFlowList { display: flex; justify-content: center; }
ul#contactFlowList li { width: 31.5%; margin-left: 1.5%; padding-left: 2.5%; position: relative; }
ul#contactFlowList li::before { content: ""; width: 7px; height: 7px; transform: rotate(45deg); border-top: solid 1px #0a7fb0; border-right: solid 1px #0a7fb0; position: absolute; left: 0; top: calc(50% - 2px); }
ul#contactFlowList li:first-child { width: 28.5%; margin: 0; padding: 0; }
ul#contactFlowList li:first-child::before { display: none; }
ul#contactFlowList li span { font-size: 112%; display: block; padding: 10px 5px; background-color: #fff; border: solid 1px #0a7fb0; color: #0a7fb0; text-align: center; border-radius: 3px; }
ul#contactFlowList li.flowOn span { color: #fff; background-color: #0a7fb0; }

/* 背景エリア共通 */
.contactBgArea { background-color: #e8f2f7; margin-top: 30px; padding: 30px 50px; }
.contactBgArea dl dt { color: #0a7fb0; font-size: 112%; }
.contactBgArea dl dd { margin-top: 5px; line-height: 1.7; }

/* 【留意事項】 */
#attentionArea dl dt { margin-left: -12px; }
#attentionArea ul li { position: relative; padding-left: 20px; }
#attentionArea ul li::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background-color: #0a7fb0; position: absolute; top: 7px; left: 0; }

/* 個人情報の利用目的について */
#privacyArea { padding: 35px 45px; }
#privacyArea dl dd { margin-top: 15px; }
#privacyArea dl dd ol + p { margin-top: 15px; }
#privacyArea dl dd ol + p a { color: #0a7fb0; position: relative; padding-right: 15px; }
#privacyArea dl dd ol + p a::before { content: ""; width: 7px; height: 7px; transform: rotate(45deg); border-top: solid 1px #0a7fb0; border-right: solid 1px #0a7fb0; position: absolute; right: 0; top: 10px; }
#privacyArea dl dd + dd { margin-top: 25px; padding-top: 25px; border-top: solid 1px #d0d0d0; text-align: center; }

p.confirmTxt { margin-top: 50px; text-align: center; }

ul.formBtnList { display: flex; justify-content: center; margin-top: 25px; }
ul.formBtnList li { max-width: 315px; width: 100%; margin: 0 15px; }
ul.formBtnList li a { display: block; }
ul.formBtnList li a:hover { text-decoration: none; }
ul.formBtnList li .commonBtn { font-size: 125%; width: 100%; text-align: center; position: relative; padding: 10px; border: solid 1px #0862af; transition: 0.3s; }
ul.formBtnList li .commonBtn:disabled { border: solid 1px #ddd; }
ul.formBtnList li .commonBtn::after { content: ""; width: 8px; height: 8px; transform: rotate(45deg); border-top: solid 2px #fff; border-right: solid 2px #fff; position: absolute; right: 17px; top: calc(50% - 4px); }
ul.formBtnList li .cancelBtn { background-color: #fff; border: solid 1px #ccc; color: #000; }

#thanksSec { text-align: center; margin-top: 60px; }
#thanksSec h2 { font-size: 150%; font-weight: 500; }
#thanksSec h2 + p { margin-top: 20px; }
#thanksSec ul.formBtnList { margin-top: 55px; }


/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
  ■スマートフォン用CSS■
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:750px){
	
	/* リスト */
	ul#breadcrumbsList + #contactFlowSec { margin-top: 38px; }
	ul#contactFlowList { justify-content: space-around; }
	ul#contactFlowList li span { font-size: 90%; padding: 4px 0; }
	ul#contactFlowList li { width: 35%; margin-left: 0; padding-left: 5%; line-height: 1.5; }
	ul#contactFlowList li:first-child { width: 29%; }
	ul#contactFlowList li::before { left: 2.5%; }
	
	/* 背景エリア共通 */
	.contactBgArea { margin-top: 25px; padding: 25px 8%; }
	.contactBgArea dl dt { font-size: 120%; }
	.contactBgArea dl dd { font-size: 100%; }

	
	/* 【留意事項】 */
	#attentionArea ul li { font-size: 107%; }

	/* 個人情報の利用目的について */
	#privacyArea { padding: 25px 8%; }
	#privacyArea dl dd { margin-top: 7px; }
	#privacyArea dl dd ol { font-size: 107%; }
	#privacyArea dl dd ol li { margin-top: 5px; }
	#privacyArea dl dd + dd { margin-top: 15px; padding-top: 15px; text-align: left; }
	#privacyArea dl dd + dd input[type="checkbox"] + label { display: inline-block; }
	#privacyArea dl dd + dd input[type="checkbox"] + label::before { top: 15px; }
	#privacyArea dl dd + dd input[type="checkbox"] + label::after { top: 5px; transform: translateY(0); }
	
	p.confirmTxt { margin-top: 32px; font-size: 107%; }
	
	ul.formBtnList { display: block; margin-top: 20px; }
	ul.formBtnList li { max-width: calc(100% - 30px); }
	ul.formBtnList li:nth-child(n+2) { margin-top: 20px; }
	
	#thanksSec { margin-top: 30px; text-align: left; }
	#thanksSec h2 { text-align: center; }
	#thanksSec h2 + p { font-size: 107%; margin-top: 15px; }
	#thanksSec ul.formBtnList { margin-top: 33px; }

	
	
}