@charset "utf-8";
/*
zIndex Level
- 10 Header
*/
@import url(' https://fonts.cdnfonts.com/css/bellefair ');
:root {--main_color : #f03e3e;}
:root {--main_color_alpha : #ffe4e0;}
/* Common Css images url */
:root {--hdt_logo : url("../images/inc/top_logo.png");}

html {width: 100%; height: 100%; position: relative;} 
body {width: 100%; height: 100%; margin: 0; padding: 0;}
* {transition: all ease 0.3s;}
strong {font-weight: bold; display: inline-block;}
article {width: 900px; height: 100%; margin: 0 auto; padding: 0;}
body i {display: inline-block; vertical-align: middle;}
body input {color: #222; border: 1px solid #dadada; background: #fff; font-family: sans-serif;}
body input[type=date] {text-indent: 5px !important;}
body input.error {border: 1px solid #f80000; background: #ffeeee;}
body input[readonly], 
body input[disabled] {background: #eeee; color: #666; cursor: not-allowed;} 
body button[disabled] {cursor: not-allowed;} 
body input.tc {text-indent: 0;}
body input::placeholder {color: #6e869e; font-size: 12px;}
body select {color: #222; border: 1px solid #dadada; cursor: pointer; background: #fff;}
body select[readonly], 
body select[disabled] { background:#eee url(../images/inc/select_arrow1.png) no-repeat calc(100% - 10px) center !important; color: #333 !important; cursor: not-allowed !important;}
body select[disabled]:hover {border: 1px solid #ddd !important; cursor: not-allowed !important; background:#eee url(../images/inc/select_arrow1.png) no-repeat calc(100% - 10px) center !important;}
body textarea {font-family: sans-serif;}
body textarea::placeholder {color: #6e869e; font-size: 13px;}
/******** Etc *********/

/******** Layout *********/
	#header .menu {display: none;}
	#header h1 {text-align: center; margin: 70px 0; position: absolute; left: 0; top: 0; width: 100%;}
	#header h1 a {color: #fff; font-weight: 300; font-size: 30px; font-family: 'Bellefair', sans-serif;}
	#nav {padding-top: 175px;}
	#nav ul {display: flex; justify-content: space-between; align-items: center; margin: 0 30px;}
	#nav ul a {display: block; padding: 10px 15px; font-weight: 300; font-size: 18px; font-family: 'Bellefair', sans-serif;}
	#nav ul a.on {color: #fff;}
	#nav ul a:hover {color: #fff;}
	
	#container {padding: 50px 0; }
	
	#footer {border-top: 1px solid #fff; display: flex; justify-content: space-between; align-items: center; padding: 25px 0;}
	#footer * {font-size: 12px;}
	#footer ul {display: flex; justify-content: flex-end; align-items: center; }
	#footer ul li:first-child {margin-right: 10px;}
	#footer ul a {display: flex; justify-content: flex-start; align-items: center; flex-flow: row wrap;}
	#footer ul a img {width: 12px; margin-right: 5px; opacity: 0.6;}
	
	#footer .link_top {width: 40px; height: 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 40px; background: #0a294d; position: fixed; bottom: 20px; right: calc(50% - 520px);}
	#footer .link_top i {color: #9aacbf;}
	#footer .link_top:hover i {color: #fff;}
	
/**************/
	.img_list {display: flex; justify-content: flex-start; align-items: flex-start;  flex-flow: row wrap; gap:45px;}
	.img_list img {width: 100%;}
	.img_list li {width: 270px; text-align: center; margin-bottom: 0; cursor: pointer;}
	.img_list li:hover p {position: relative;}
	.img_list li:hover p:after {content:""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0.1;}
	.img_list li span {font-size: 14px; display: block; text-align: center; padding: 10px 0 10px;}
	
	.difxu.detail {flex-direction: row-reverse;}
	.img_lfbox p {width: 600px; margin-bottom: 30px;}
	.img_lfbox img {width: 100%; max-width:600px;}
	.img_rginfobox {width: calc(100% - 640px); margin-top: -4px;}
	/* .img_rginfobox dl {opacity: 0.7;} */
	.img_rginfobox dl * {font-size: 14px;}
	.img_rginfobox dl dt {margin-bottom: 20px; position: relative; font-size: 16px; margin: 0 0 35px 0 !important;}
	.img_rginfobox dl dt:after {content:""; display: block; position: absolute; width: 10px; height: 1px; background: #c3d5e6; left: 0; bottom: -18px;}
	.img_rginfobtn {display: flex; justify-content: flex-start; align-items: center; gap:15px; margin-top: 30px;}
	.img_rginfobtn a {background: #c3d5e6; color: #193656; border: 1px solid #c3d5e6; font-size: 14px; padding:5px 20px; display: inline-block;}
	.img_rginfobtn a:hover {background: #193656; color: #c3d5e6; border: 1px solid #c3d5e6;}
	
	.aboutus {margin-bottom: 100px;}
	.aboutus .img_lfbox p {width: 500px; margin-bottom: 30px;}
	.aboutus .img_rginfobox {width: calc(100% - 550px);}
	/* .aboutus .img_rginfobox dl {opacity: 0.7;} */
	.aboutus .img_rginfobox dl * {font-size: 14px;}
	.aboutus .img_rginfobox dl dt {margin-bottom: 50px; position: relative;}
	.aboutus .img_rginfobox dl dt p {font-size: 16px;}
	.aboutus .img_rginfobox dl dt:after {content:""; display: block; position: absolute; width: 10px; height: 1px; background: #c3d5e6; left: 0; bottom: -27px;}
	.aboutus .img_rginfobox dl dd div {margin-bottom: 5px;}
		
	.ord_title * {font-size: 16px;}
	.ord_input_wrap {display: flex; justify-content: space-between; align-items: start; }
	.ord_input_wrap li {padding: 15px 0 10px;}
	.ord_input_wrap .ordip_left {width: 35%;}
	.ord_input_wrap .ordip_right {width: calc(100% - 35% - 50px);}
	.ord_input_wrap input {background:transparent; border: 0; border-bottom: 1px solid #90a6bb; color: #90a6bb !important; font-size: 14px; height: 30px; width: 100%; background: rgba(255,255,255,0.05); text-indent: 5px; padding-bottom: 3px;}
	.ord_input_wrap input:focus {background:transparent; background: rgba(255,255,255,0.05);}
	.ord_input_wrap span {display: block; width: 100%;height: 24px; font-size: 14px;}
	.ord_input_wrap span + p {display: block;}
	.ord_input_wrap .fta2_box textarea {background:transparent; border: 0; border-bottom: 1px solid #90a6bb; color: #90a6bb !important; font-size: 14px; height: 109px; width: 100%; resize:none; margin-top: 0px; padding: 5px; background: rgba(255,255,255,0.05);}
	.ord_input_wrap .fta3_box textarea {background:transparent; border: 0; border-bottom: 1px solid #90a6bb; color: #90a6bb !important; font-size: 14px; height: 187px; width: 100%; resize:none; margin-top: 0px; padding: 5px; background: rgba(255,255,255,0.05);}
	.fta4_box span {display: block; width: 100%;height: 24px; font-size: 14px;}
	.fta4_box textarea {background:transparent; border: 0; border-bottom: 1px solid #90a6bb; color: #90a6bb !important; font-size: 12px; height: 100px; width: 100%; resize:none; margin-top: 0px; padding: 5px; background: rgba(255,255,255,0.05); line-height: 1.7;}
	
	
	.ord_txt_list {margin-top: 50px;}
	.ord_txt_list * {font-size: 14px;}
	.ord_txt_list li {margin-bottom: 5px;}
	
	.btn_base_link {background: #c3d5e6; color: #193656; border: 1px solid #c3d5e6; font-size: 14px; padding: 5px 20px; display: inline-block; margin-top: 30px;}
	
	@media (max-width:900px){
		article {width: calc(100% - 40px); margin: auto;}
		#header .menu {display: block;}
		#header h1 {position: static; margin: 30px 0;}
		#header h1 a {font-size: 26px;}
		#header #nav {max-height: 0; overflow: hidden; padding: 0;}
		#header #nav.on {max-height: 288px;}
		#header #nav ul {display: block; margin: 0; padding: 10px 0;}
		#header #nav ul a {display: block; padding: 7px 0; font-weight: 300; font-size: 16px; font-family: 'Bellefair', sans-serif; text-align: center;}
		#header .menu {width: 100%; height: 70px; font-size: 18px; color: #90a6bb; border-top: 1px solid #90a6bb; border-bottom: 1px solid #90a6bb; margin-top: -1px;}
		
		#container {padding: 0 0 50px 0; }
		
		.img_list {display: block;}
		.img_list li {width: 100%; margin-bottom: 20px;}
				
		.img_lfbox p {width: 600px; margin-bottom: 30px;}
		.img_lfbox img {width: 100%; max-width:none;}
		.img_rginfobox {width: calc(100% - 640px);}
		
		.img_rginfobox {width: 100%;}

		#container > div.difxu {margin-bottom: 100px; display: block;}
		.aboutus .img_lfbox p {width: 100%; margin-bottom: 30px;}
		.aboutus .img_rginfobox {width: 100%;}
		
		.detail .img_rginfobox {margin-bottom: 40px;}
		
		.ord_input_wrap {display: block;}
		.ord_input_wrap .ordip_left {width: 100%;}
		.ord_input_wrap .ordip_right {width: 100%;}	
		
		#footer {display: block;}
		#footer ul {display: flex; justify-content: flex-start; align-items: center; margin-top: 10px;}
	}