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




* { font-size :1.45vw;; 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:#fff; background:#272727 url("./img/img_mainbg.png"); background-size: 7vw; }
body *{ line-height:1.5em; }


@media screen and (min-width: 1500px) {
	* { font-size : 22px; }
}

@media screen and (max-width: 480px) {
	* { font-size : 2.0vw; }
}

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

h2{ font-weight: 500; font-size: 2.5em; }
h3{ font-weight: 500; font-size: 2.0em;  color:#F99806; }
@media screen and (max-width: 480px) {
	h2{ font-size: 2.0em; }
	h3{ font-size: 1.6em;  color:#F99806; }
}


header{ display: block; width: 100%; position: fixed; top:0; left:0; z-index: 98; background: rgba(0, 0, 0, 0.5); }
header nav{ display: block; width:100%; max-width: 1500px; margin:0 auto; text-align: right; }
header nav a{ display: inline-block; text-align: center; padding:1.3em 1.3em; }
header nav a span{ display: block; font-size: .6em; font-weight: bold; color: #F99806; }
header nav a div{ font-size: 1.2em; font-weight: bold; }
header>a{ display: none; }
@media screen and (max-width: 480px) {
	header{ text-align: right; }
	header nav{ width:100%; height:100%;  position: fixed; top:0; left:0; background: rgba(0, 0, 0, 0.9); display:none;  z-index: 1; }
	header nav a{ display: block; width:100%; margin:1em 0;  }
	header nav a span{ font-size: 1.5em; }
	header nav a div{ font-size: 3.0em;  }
	header>a{ position:relative; display:inline-block; width:3em; height:3em; border: 1px solid #fff; margin:.5em 1em;
		background: url("./img/nav_open.png") center / cover  no-repeat; z-index: 2; }
	header.open nav{ display:flex; flex-wrap: wrap; justify-content: center; align-items: center; align-content:center; }
	header.open>a{ background: url("./img/nav_close.png") center / cover  no-repeat; }
}


article#top{ width: 100%; height:100vh; overflow: hidden; position: relative; }
article#top div#pc{  width:100%; height:100%; margin:0 auto; position: absolute; z-index: 3; opacity:0; }
article#top div#pc img{ object-fit: cover; width:100%; height:100%;  }
article#top div#smp{ display: none; width:100%;  height:100%; margin:0 auto; position: absolute; z-index: 3; opacity:0; }
article#top div#smp img{ object-fit: cover; width:100%; height:100%;  }
article#top div#logo{ width:80%; max-width: 1500px; height:100%; right: 0; left:0; margin:0 auto; position: absolute; z-index: 4; opacity:0; }
article#top div#logo img{ display: block; position: absolute; width:40% ; left:0em; bottom:15%; }
article#top div#bg{ position: absolute; top:0; width: 100%; height:100%; z-index: 1; }
article#top div#bg:before{ content: ""; position: absolute; top:0; width:100%; height:100%; display: block; background:#25262E; opacity: .81;  z-index: 2; }
article#top div#bg img{ object-fit: cover; width:100%; height:100%; }
article#top.start #pc { animation: slidein 3s forwards; }
article#top.start #logo { animation: fadein 4s forwards; animation-delay:3s; }
@media screen and (max-width: 480px) {
	article#top div#pc{ display: none;  }
	article#top div#smp{ display: block; }
	article#top div#logo img{  width:90% ; left:0; right: 0; bottom:20%; margin:0 auto;  }
	article#top.start #smp{ animation: fadein 5s forwards; }
	article#top.start #logo { animation: fadein 4s forwards; animation-delay:2s; }
}
@keyframes slidein { 
	0% { opacity:0;  transform:translate(40%); }
	100% { opacity:100; transform:translate(0%); }
}
@keyframes fadein { 
	0% { opacity:0; }
	100% { opacity:100; }
}



article#about {position: relative; padding-top:1px; margin-top:-1px; }
article#about #ttl dl{ display: flex; margin:4em auto; }
article#about #ttl dt { width:50%; padding:1em 3em 0 0; text-align: right;  }
article#about #ttl dt div{ display: inline-block; text-align: left; }
article#about #ttl dd { width:50%; padding:0 0 0 5em; border-left: 1px solid #fff; line-height:2.0em;}
@keyframes infinity-scroll-left { from { transform: translateX(0); } to { transform: translateX(-100%); } }
.scroll-infinity__wrap { display: flex; overflow: hidden; }
.scroll-infinity__list { display: flex; list-style: none; padding: 0 }
.scroll-infinity__list--left { animation: infinity-scroll-left 80s infinite linear 0.5s both; }
.scroll-infinity__item { width: calc(100vw / 5); padding:.5em }
.scroll-infinity__item>img { width: 100%; }
article#about #scroll-infinity p#mess{ margin-top:4em; text-align: center; line-height: 2em; font-size: .9em; }
article#about>div{ display: flex; width:100%; max-width: 1875px; padding-bottom: 7em; margin:0 auto; }
article#about #leftimg{ width:10%; position: relative; }
article#about #leftimg img{ display: block; position: absolute; width: 70%; left:0; right:0; bottom:0; margin:0 auto; }
article#about #col{ width:80%; }
article#about #col #mov{  padding:15em 0 0 0; }
article#about #col #mov iframe{ display: block; width: 40vw; max-width: 500px; height:24vw; max-height: 300px; }
article#about #bg{ position: absolute; bottom:0; left: 0; width: 100%; z-index: -1; overflow: hidden; }
article#about #bg img{ width: 100%; clip-path: polygon(0 60%, 100% 10%, 100% 100%, 0% 100%);  }
article#about #bg img#pc{ display: block; }
article#about #bg img#smp{ display: none; }
@media screen and (max-width: 480px) {
	.scroll-infinity__item { width: calc(100vw / 3); padding:.5em }
	article#about #ttl dd { width:50%; padding:0 0 0 2em; border-left: 1px solid #fff; line-height:1.0em; font-size: 1.5em;}
	article#about #leftimg{ width:15%; }
	article#about #leftimg img{  width:80%; }
	article#about #col{ width:70%; }
	article#about #col #mov iframe{ width: 65vw; height:39vw; }
	article#about #bg img{ width: 100%; clip-path: polygon(0 40%, 100% 0, 100% 100%, 0% 100%); }
	article#about #bg img#pc{ display: none; }
	article#about #bg img#smp{ display: block; }
}



article#company{ background: url("./img/img_company_bg.jpg") center top / cover  no-repeat; position: relative; }
article#company::before{ content: ""; position: absolute; top:0; width:100%; height:100%; display: block; background:#272727; opacity: .7;  z-index: 1; }
article#company>div{ position: relative; width:80%; max-width: 1500px; margin:0 auto; z-index: 2; }
article#company #ttl{ padding:5em 1em 1em 1em; }
article#company #col{ padding-top:2em; display: flex; justify-content:space-between; }
article#company #col dl{ width:48%; padding:1em 1em 10em 1em; position: relative; }
article#company #col dt img{ display: block; width: 80%; margin: 0 auto; }
article#company #col dt span{ display: block; font-size: 1.8em; padding:1em 0; }
article#company #col dd{ line-height:2em;}
article#company #col dd a{ display: block; border: 1px solid #fff; line-height: 3em; border-radius: 1.5em; text-align: center; width: 50%;
	position: absolute; bottom: 5em; left:0; right: 0; margin: 0 auto; }
article#company #col dd a:hover{ background: rgba(255, 255, 255, .1); }
@media screen and (max-width: 480px) {
	article#company{ background-position-y: -10em; background-size: 350%; }
	article#company>div{ width:100%; }
	article#company #ttl{ width:80%; margin:0 auto; padding:5em 1em 1em 1em; }
	article#company #col{ display: block;  }
	article#company #col dl{ width:100%; padding:1em 2em 10em 2em; position: relative; }
	article#company #col dl dt{ width:80%; margin:0 auto; }
	article#company #col dl dd{ width:80%; margin:0 auto; }
	article#company #col dd a{ position: static; margin-top:5em; }
	article#company #col dl:nth-of-type(2){ background:#f00 url("./img/img_company_bg_smp.jpg") center top / cover  no-repeat; position: relative; }
	article#company #col dl:nth-of-type(2)::before{ content: ""; position: absolute; top:0; left:0; width:100%; height:100%; display: block; background:#272727; opacity: .7;  z-index: 1; }
	article#company #col dl:nth-of-type(2) dt{ position: relative; z-index: 2;  }
	article#company #col dl:nth-of-type(2) dd{ position: relative; z-index: 2;  }
}






article#business{ background: url("./img/img_business_bg.jpg") center / cover  no-repeat; position: relative; }
article#business::before{ content: ""; position: absolute; top:0; width:100%; height:100%; display: block; background:#25262E; opacity: .81;  z-index: 1; }
article#business>div{ position: relative; width:80%; max-width: 1500px; margin:0 auto; z-index: 2; }
article#business #ttl{ padding:5em 1em 1em 1em; }
article#business .col{ display:grid; grid-template-columns: 1fr 1fr 1fr 1fr; padding:3em 0 3em 5em; }
article#business .col>div>img{ display: block; width: 100%; }
article#business .col .logo{ grid-column: 1 / 2; grid-row: 1 / 3; margin-right: 2em; }
article#business .col .name{ grid-column: 2 / 5; grid-row: 1 / 2; font-size: 1.8em; }
article#business .col .mess{ grid-column: 2 / 5; grid-row: 2 / 3; font-size: 1.1em; line-height: 2em; }
article#business .col .items{ grid-column: 2 / 5; grid-row: 3 / 4; }
article#business .col .items img{ width:80%; margin:0 auto; }
article#business .col .detail{ grid-column: 2 / 5; grid-row: 4 /5; }
article#business .col .detail a{ display: block; border: 1px solid #fff; line-height: 3em; border-radius: 1.5em; text-align: center; width: 40%; margin:2em auto; }
article#business .col .detail a:hover{ background: rgba(255, 255, 255, .1); }
@media screen and (max-width: 480px) {
	article#business .col{ grid-template-columns: 1fr 1fr 1fr; padding:3em 2em; }
	article#business .col .logo{ grid-column: 1 / 2; grid-row: 1 / 2; }
	article#business .col .name{ grid-column: 2 / 4; grid-row: 1 / 2; display:grid; place-content: center; }
	article#business .col .mess{ grid-column: 1 / 4; grid-row: 3 / 4; }
	article#business .col .items{ grid-column: 1 / 4; grid-row: 2 / 3; display:grid; place-content: center; padding:2em 0; }
	article#business .col .items img{ width:100%; }
	article#business .col .detail{ grid-column: 1 / 4; grid-row: 4 /5; }
}




article#map iframe{ display: block; width: 100%; height:20em; border:0; }
@media screen and (max-width: 480px) {
	article#map iframe{ height:40em; }
}



article#contact>div{ width:80%; max-width: 1500px; margin:0 auto; }
article#contact #ttl{ padding:5em 1em 1em 1em; }
article#contact #mess{ text-align: center; line-height: 2.0em; padding:3em 0 1em 0; }
article#contact #tel{ text-align: center; margin-bottom: 3em; }
article#contact #tel li{ display: inline-block; width:25%; margin:0 1em; }
article#contact #tel li img{ display: block; width:100%; }
article#contact form div{ display: table; margin:0 auto; }
article#contact form dl{ display: table-row; }
article#contact form dl dt{ display: table-cell;  vertical-align: top; text-align: right; white-space:nowrap;  padding:.8em 4em .8em .5em;position: relative; }
article#contact form 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 form dt.need:after{ content:"必須"; background:#D64545; }
article#contact form div dl dd{ display: table-cell; vertical-align: top; padding:.8em 1em;  }
article#contact form input[type="text"]{ display:block; width:20em; padding:.2em 1em; border:0; border-radius:.6em; }
article#contact form label{ margin-right:1em; }
article#contact form input[type="checkbox"] { position: relative; width: 2em; height: 2em; margin-right:.5em; background: #fff; border-radius:.6em; vertical-align:top; appearance: none; }
article#contact form input[type="checkbox"]:checked:before { content: ''; position: absolute; top: 0; left: 0;  width: 2em; height: 2em; background: url("./img/check.png") center / cover  no-repeat; }
article#contact form textarea{ display:block; width:20em; height:8em; padding:.1em 1em; border:0; border-radius:.6em; }
article#contact form label{ display: inline-block; }
article#contact form #button{ display: block; width:8em; line-height: 2em; text-align: center; background:#fff; color:#414141; margin:0 0 0 auto; border-radius: .6em; }
article#contact form a.link{ text-decoration: underline; }
article#contact form a.link:after{ content:""; display: inline-block; width:1.5em; height:1.5em; vertical-align: top; background: url("./img/link-icon01.png") center / cover  no-repeat; }
@media screen and (max-width: 480px) {
	article#contact #tel li{ width:40%; }
	article#contact form div{ width:90%; }
	article#contact form input[type="text"]{  width:100%;  }
	article#contact form textarea{  width:100%;  }
}



footer{ display: block; font-size: .6em; text-align: center; padding:8em 0 6em 0; }





/*------------------
会社概要詳細
------------------*/
article#company_detail{ width:80%; max-width: 1500px; margin:0 auto; }
article#company_detail #ttl{ padding:5em 0 0 0;}
article#company_detail #com{ padding-top:2em;  }
article#company_detail #com dt{ font-size: 1.4em; }
article#company_detail #com dd{ padding:2em 0 5em 0; }
article#company_detail #tbl dl{ display: table; width:90%; margin:.5em auto;  }
article#company_detail #tbl dt{ display: table-cell; padding:1em 1.5em; width:20%; border: 1px solid #fff; }
article#company_detail #tbl dd{ display: table-cell; padding:1em 1.5em; border: 1px solid #fff; }
@media screen and (max-width: 480px) {
	article#company_detail #tbl dl{ width:100%; }
}

/*------------------
事業内容詳細
------------------*/
article#business_detail{ width:80%; max-width: 1500px; margin:0 auto; }
article#business_detail #ttl{ padding:5em 0 0 0;}
article#business_detail #com{ padding-top:2em;  }
article#business_detail #com dt{ font-size: 1.4em; }
article#business_detail #com dd{ padding:2em 0 5em 0; }

/*------------------
プライバシー
------------------*/
article#policy{ width:80%; max-width: 1500px; margin:0 auto; }
article#policy #ttl{ padding:5em 0 0 0;}
article#policy #mess{ padding:3em 0; }
article#policy dl dt{ padding:1em 0;  }
article#policy dl dd{ padding:0 0 2em 2em;  }