@charset "utf-8";

@import url("common.css");
@import url("layout.css");
@import url("title.css");
@import url("move.css");
/*------------------------------------------------------------------------------------------------*/
.header-image div { width: 100%; height: 100vh; position: absolute; top: 0; left: 0; background-position: center center; background-attachment: fixed; z-index: -100; }
#scroll { position: relative; width: 100%; height: auto; max-height: calc(100vh - 300px); margin: 0px auto; overflow-y: scroll; -webkit-overflow-scrolling: touch; }

.process { display: flex; flex-wrap: wrap; width: 100%; padding: 0px; margin: 0px; list-style: none; }
.process > li { display: flex; flex: 1 1 300px; position: relative; padding: 1em 3em 1em 2em; margin: 0px 0px 10px 0px; width: 33%; height: auto; min-height: 10em; box-sizing: border-box; text-align: left; overflow: hidden; }
.process > li.box::before,
.process > li.box::after { position: absolute; content: ""; }
.process > li.box::before { top: 50%; right: -1.5em; z-index: -1; transform: translateY(-50%) scaleX(0.5) rotate(45deg); width: 12em; height: 12em; border: 0.3em solid currentColor; border-left: none; border-bottom: none; }
.process > li.box::after { top: 0px; left: 0px; bottom: 0px; z-index: -1; width: calc(100% - 51px); border: 0.2em solid currentColor; border-right: none; }
.process > li.box:last-child::before { top: 0; right: 0; z-index: -1; transform: none; width: 0; height: 0; border: 0.3em solid #000; border-left: none; border-bottom: none; }
.process > li.box:last-child::after { top: 0px; left: 0px; bottom: 0px; z-index: -1; width: calc(100% - 0px); border: 0.2em solid #000; border-right: none; }
.process > li.last { border: 0.2em solid #000; }
.process > li span.icon { position: absolute; top: 0; left: 0; background-color: #000; display: block; width: 120px; padding: 5px 0; text-align: center; color: #FFF; }
.process > li div.stepflow { position: absolute; top: 40px; left: 20px; width: 250px; }
.process > li div.stepflow h3 { font-size: 112.75%; color: #F60; }

#naisou { display: flex; flex-wrap: wrap; max-width: 960px; margin: 0 auto; }
#naisou a{ text-decoration: none; margin: 5px padding: 0; border: transparent  5px solid; }
#naisou img { width: 100%; }
/*------------------------------------------------------------------------------------------------*/
@media screen and (min-width: 960px) {
	.header-image div::before { content:""; display:block; position:absolute; top:0; left:0; z-index:-1; width:100%; height:100vh; background-image: url(../img/header-image201.jpg); background-position: center bottom; background-size: cover; background-attachment: fixed; }
	/*--------------------------------------------------------------------------------------------*/
	.headerContents .box .mymenu nav.menu ul li:nth-child(2)  a { color: #FFF; }
	.footerContents ul li:nth-child(2) a { color: #FFF; }
	/*--------------------------------------------------------------------------------------------*/
	#naisou a{ flex: 1 1 300px; }
	
}
@media screen and (min-width: 800px) and (max-width: 959.9px) {
	.header-image div { background-size: 800px auto; background-position: center top; }
	.header-image div::before { content:""; display:block; position:absolute; top:0; left:0; z-index:-1; width:800px; height:100vh; background-image: url(../img/header-image201m.jpg); background-position: center bottom; background-size: cover; background-attachment: fixed; }
	/*--------------------------------------------------------------------------------------------*/
	.headerContents .box .mymenu nav.menu ul li:nth-child(2) a { color: #666; }
	.headerContents .box .mymenu nav.menu ul li:nth-child(2) a::before { border-top: solid 4px #666; border-right: solid 4px #666; }
	.footerContents ul li:nth-child(2) a { color: #FFF; }
	/*--------------------------------------------------------------------------------------------*/
	#naisou a{  flex: 1 1 240px; }
	
}
@media screen and (max-width: 799.9px) {
	.header-image div { background-size: 640px auto; background-position: center top; background-image: url(../img/header-image201s.jpg); background-position: center top -200px; background-size: 100% auto; background-attachment: fixed; }
	/*--------------------------------------------------------------------------------------------*/
	.headerContents .box .mymenu nav.menu ul li:nth-child(2) a { color: #666; }
	.headerContents .box .mymenu nav.menu ul li:nth-child(2) a::before { border-top: solid 4px #666; border-right: solid 4px #666; }
	.footerContents ul li:nth-child(2) a { color: #FFF; }
	/*--------------------------------------------------------------------------------------------*/
	#naisou a{  flex: 1 1 190px; }
	
}