@import url( https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=swap );




* { font-size :1.0vw;; font-weight: bold; line-height:2.0em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0px; }
html { width:100%; min-height: 100%; position: relative; }
body { width:100%;  display:block; margin:0; padding:0;  line-height: 1.25em; min-height: 100%; position : absolute;
	font-family: 'Noto Sans JP', 'YuGothicM', 'YuGothic', 'Hiragino Kaku Gothic Pro', 'Osaka', 'MS PGothic', 'sans-serif';
	 color:#ffffff; background:#ffffff; }
body *{ line-height:1.5em; }


@media screen and (min-width: 1200px) {
	* { font-size : 12px; }
}
/*
@media screen and (max-width: 768px) {
	* { font-size : 1.5vw; }
}
*/
@media screen and (max-width: 480px) {
	* { font-size : 3vw; }
}

@media screen and (max-width: 640px) {
    .br-sp { display:none; }
}

li{ list-style-type:none; }
a:hover{ opacity: .8; }
#loader{ display: block;width: 100%; height:100%; position: fixed; top:0; left:0; z-index: 99; background: #fff; }

header{ display: block; width: 100%; position: fixed; top:0; left:0; z-index: 98; background: rgba(255, 255, 255, 0.801); }
header ol{ display: table; width:100%; max-width: 1200px; margin:0 auto; }
header ol li{ display: table-cell; vertical-align: middle; padding:1em .5em; }
header ol li img { display: block; height:5.5vw; max-height: 60px; }
header ol li:nth-of-type(2){ padding:0 .5em; }
header ol li:nth-of-type(2) img{ margin:0 0 0 auto; height:7.0vw; max-height: 70px; }
header ol li:nth-of-type(3) img{ margin:0 0 0 auto; }
header ol li .smp{ display: none; }
header ol li .pc{ display: block; }
header>.smp{ display: block; position: fixed; bottom:-30vw; z-index: 98; }
@media screen and (max-width: 480px) {
	header ol li{ display: table-cell; padding:1em 1em 1em 2em; }
	header ol li img { display: block; height:8vw; max-height: 60px; }
	header ol li:nth-of-type(2){ padding:1em 2em 1em 1em; }
	header ol li:nth-of-type(3){ display: none; }
	header ol li .smp{ display: block; }
	header ol li .pc{ display: none; }
	header>.smp{ display: block; position: fixed; bottom:3vw; right:4vw; width:50vw; }
	header>.smp img{ display: block; width:100%; }
}

article#visual_01 dl.v01 img{ display:block; width: 100%; }
article#visual_01 dl.v01 img.pc{display: block; }
article#visual_01 dl.v01 img.smp{ display: none; }

@media screen and (max-width: 480px) {
article#visual_01 dl.v01 img.pc{display: none; }
article#visual_01 dl.v01 img.smp{ display: block; }
} 


article#visual_02 dl.v01 img{ display:block; width: 100%; }
article#visual_02 dl.v01 img.pc{display: block; }
article#visual_02 dl.v01 img.smp{ display: none; }

@media screen and (max-width: 480px) {
	article#visual_02 dl.v01 img.pc{display: none; }
	article#visual_02 dl.v01 img.smp{ display: block; }
	} 


article#visual_03 dl.v01 img{ display:block; width: 100%; }
article#visual_03 dl.v01 img.pc{display: block; }
article#visual_03 dl.v01 img.smp{ display: none; }
	
	@media screen and (max-width: 480px) {
		article#visual_03 dl.v01 img.pc{display: none; }
		article#visual_03 dl.v01 img.smp{ display: block; }
		} 

		article#visual_04 dt {background: url("./img/contact_img.jpg") center / cover; position: relative; width: 100%; min-height: 100%; }
		article#visual_04 dl.v01 img{ display:block; width: 40%; max-height: 20%; padding: 1em 2em 1em 10em;}
		article#visual_04 dl.v01 img.pc{display: block; }
		article#visual_04 dl.v01 img.smp{ display: none; }
			
			@media screen and (max-width: 480px) {
				article#visual_04 dl.v01 img{ display:block;width: 70%; max-height: 20%; padding: 0.5em 2em 0.5em 3em;}
				article#visual_04 dl.v01 img.pc{display: none; }
				article#visual_04 dl.v01 img.smp{ display: block; }
				} 
				
	

article#flow{ background: url("./img/flow_bg_pc.jpg") center / cover; position: relative; width: 100%; min-height: 100%; padding:5em 0; }
article#flow h2{ color:#003360; text-align: center; font-size: 2.8em; line-height: 2.0em; }
article#flow>div{ width:90%; max-width: 1200px; margin: 3em auto 0 auto;  }
article#flow>div dl{ display: table; width:100%; margin:.5em; border: 0.2em solid #003360; }
article#flow>div dt{ display: table-cell; width:30%; background: #003360; color:#ffffff; font-size: 2.2em; padding:.8em; }
article#flow>div dt span{ font-size: .5em; }
article#flow>div dt.center{ text-align: center; padding:.8em 0; }
article#flow>div dd{ display: table-cell; font-size: 1.4em; padding:0 1em; vertical-align: middle; color:#003360;}
@media screen and (max-width: 480px) {
	article#flow{ background: url("./img/flow_bg_pc.jpg")center / cover ; padding:1em 0 2em 0; }
	article#flow h2{ font-size: 1.4em; }
	article#flow>div dt{ width:40%; font-size: 1.0em; }
	article#flow>div dd{ font-size: 1.0em; padding:.5em 1em; }
}


article#contact{ background: url("./img/cantact_bg_pc.jpg") center / cover; position: relative; width: 100%; min-height: 100%; padding:5em 0; }
article#contact h2{ color:#ffffff; text-align: center; font-size: 2.8em; line-height: 2.0em; }
article#contact p{ text-align: center; font-size: 1.4em; padding:5em 0; color:#ffffff;}


article#contact div{ display: table; margin:0 auto; }
article#contact div dl{ display: table-row; }
article#contact div dt{ display: table-cell; vertical-align: top; text-align: right; white-space:nowrap;  padding:.8em 4em .8em .5em; font-size: 1.4em; position: relative; }
article#contact div dt:after{ content:"任意"; background:#56A41C; box-shadow: .2em .2em .5em rgba(0, 0, 0, .4);
	display: block; position: absolute; top: 2.0em; right:1em; font-size:.5em; line-height: 2em; padding:.1em 1em; }
article#contact div dt.need:after{ content:"必須"; background:#D64545; }
article#contact div dd{ display: table-cell; vertical-align: top; padding:.8em 1em; }
article#contact div dd input{ display:block; width:20em; font-size: 1.4em; padding:.2em 1em; border:0; border-radius:.6em; }
article#contact div dd textarea{ display:block; width:20em; height:8em; font-size: 1.4em; padding:.1em 1em; border:0; border-radius:.6em; }
article#contact div dd a img{ display: block; margin:0 0 0 auto; width:40%; }
article#contact footer{ text-align: center; margin-top:5em; }
@media screen and (max-width: 480px) {
	article#contact{ background: url("./img/cantact_bg_smp.jpg") no-repeat; background-size: cover; padding:2em 0 3em 0; }
	article#contact h2{ font-size: 1.4em; }
	article#contact p{ font-size: 1.0em; padding:3em 0; }
	article#contact div{ width:100%; table-layout: fixed; }
	article#contact div dt{  width:40%; padding:.8em 4em .8em .5em; font-size: 1.0em; }
	article#contact div dd{ width:60%; }
	article#contact div dd input{ display:block; width:100%; font-size: 16px; padding:0 1em; border-radius:.6em; }
	article#contact div dd textarea{ display:block; width:100%; height:5em; font-size: 16px; padding:0 1em; border-radius:.6em; }
	article#contact div dd a img{ width:50%; }
	article#contact footer{ font-size: .8em; }
}