@charset "utf-8";
/* CSS Document */

@font-face {
	font-family: "Noto Sans Mono CJK JP";
	font-weight: bold;
	src: local("NotoSansMonoCJKjp-Bold"),
		local("Noto Sans Mono CJK JP Bold"),
		url("../common/NotoSansMonoCJKjp-Bold.woff2") format("woff2"),
		url("../common/NotoSansMonoCJKjp-Bold.woff") format("woff"),
		url("../common/NotoSansMonoCJKjp-Bold.otf") format("opentype");
}
@font-face {
	font-family: "Noto Sans Mono CJK JP";
	font-weight: normal;
	src: local("NotoSansMonoCJKjp-Regular"),
		local("Noto Sans Mono CJK JP Regular"),
		url("../common/NotoSansMonoCJKjp-Regular.woff2") format("woff2"),
		url("../common/NotoSansMonoCJKjp-Regular.woff") format("woff"),
		url("../common/NotoSansMonoCJKjp-Regular.otf") format("opentype");
}

html{
	font-size: 62.5%;
}
body{
	color: #2e2e2e;
	font-family: "Noto Sans Mono CJK JP", 'Noto Sans JP', sans-serif;
	font-size: 1.4rem;
	font-weight: normal;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	box-sizing: border-box;
}
img{
	width: 100%;
	height: auto;
}
iframe{
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	filter: grayscale(100%);
}
button{
	background-color: transparent;
	border: none;
	cursor: pointer;
	outline: none;
	padding: 0;
	appearance: none;
}

/*--------------------------------------------------
 loading
--------------------------------------------------*/
.loading{
	display: none;
	z-index: 500;
	position: fixed;
	top: 0;
	left: 0;
	width:100%;
	height: 120%;
	background-color: #000;
}
#fountainTextG{
	position: absolute;
	width: 210px;
	top: 40%;
	left: 50%;
	-webkit-transform: translateY(-50%) translateX(-50%);
	transform: translateY(-50%) translateX(-50%);
}
.fountainTextG{
	color: #fff;
	font-size: 1.8rem;
	text-decoration:none;
	font-weight:normal;
	font-style:normal;
	float:left;
	animation-name:bounce_fountainTextG;
		-o-animation-name:bounce_fountainTextG;
		-ms-animation-name:bounce_fountainTextG;
		-webkit-animation-name:bounce_fountainTextG;
		-moz-animation-name:bounce_fountainTextG;
	animation-duration:2.09s;
		-o-animation-duration:2.09s;
		-ms-animation-duration:2.09s;
		-webkit-animation-duration:2.09s;
		-moz-animation-duration:2.09s;
	animation-iteration-count:infinite;
		-o-animation-iteration-count:infinite;
		-ms-animation-iteration-count:infinite;
		-webkit-animation-iteration-count:infinite;
		-moz-animation-iteration-count:infinite;
	animation-direction:normal;
		-o-animation-direction:normal;
		-ms-animation-direction:normal;
		-webkit-animation-direction:normal;
		-moz-animation-direction:normal;
	transform:scale(.5);
		-o-transform:scale(.5);
		-ms-transform:scale(.5);
		-webkit-transform:scale(.5);
		-moz-transform:scale(.5);
}#fountainTextG_1{
	animation-delay:0.75s;
		-o-animation-delay:0.75s;
		-ms-animation-delay:0.75s;
		-webkit-animation-delay:0.75s;
		-moz-animation-delay:0.75s;
}
#fountainTextG_2{
	animation-delay:0.9s;
		-o-animation-delay:0.9s;
		-ms-animation-delay:0.9s;
		-webkit-animation-delay:0.9s;
		-moz-animation-delay:0.9s;
}
#fountainTextG_3{
	animation-delay:1.05s;
		-o-animation-delay:1.05s;
		-ms-animation-delay:1.05s;
		-webkit-animation-delay:1.05s;
		-moz-animation-delay:1.05s;
}
#fountainTextG_4{
	animation-delay:1.2s;
		-o-animation-delay:1.2s;
		-ms-animation-delay:1.2s;
		-webkit-animation-delay:1.2s;
		-moz-animation-delay:1.2s;
}
#fountainTextG_5{
	animation-delay:1.35s;
		-o-animation-delay:1.35s;
		-ms-animation-delay:1.35s;
		-webkit-animation-delay:1.35s;
		-moz-animation-delay:1.35s;
}
#fountainTextG_6{
	animation-delay:1.5s;
		-o-animation-delay:1.5s;
		-ms-animation-delay:1.5s;
		-webkit-animation-delay:1.5s;
		-moz-animation-delay:1.5s;
}
#fountainTextG_7{
	animation-delay:1.64s;
		-o-animation-delay:1.64s;
		-ms-animation-delay:1.64s;
		-webkit-animation-delay:1.64s;
		-moz-animation-delay:1.64s;
}
#fountainTextG_8{
	animation-delay:1.79s;
		-o-animation-delay:1.79s;
		-ms-animation-delay:1.79s;
		-webkit-animation-delay:1.79s;
		-moz-animation-delay:1.79s;
}
#fountainTextG_9{
	animation-delay:1.94s;
		-o-animation-delay:1.94s;
		-ms-animation-delay:1.94s;
		-webkit-animation-delay:1.94s;
		-moz-animation-delay:1.94s;
}
#fountainTextG_10{
	animation-delay:2.09s;
		-o-animation-delay:2.09s;
		-ms-animation-delay:2.09s;
		-webkit-animation-delay:2.09s;
		-moz-animation-delay:2.09s;
}
#fountainTextG_11{
	animation-delay:2.24s;
		-o-animation-delay:2.24s;
		-ms-animation-delay:2.24s;
		-webkit-animation-delay:2.24s;
		-moz-animation-delay:2.24s;
}
#fountainTextG_12{
	animation-delay:2.39s;
		-o-animation-delay:2.39s;
		-ms-animation-delay:2.39s;
		-webkit-animation-delay:2.39s;
		-moz-animation-delay:2.39s;
}
#fountainTextG_13{
	animation-delay:2.54s;
		-o-animation-delay:2.54s;
		-ms-animation-delay:2.54s;
		-webkit-animation-delay:2.54s;
		-moz-animation-delay:2.54s;
}
#fountainTextG_14{
	animation-delay:2.69s;
		-o-animation-delay:2.69s;
		-ms-animation-delay:2.69s;
		-webkit-animation-delay:2.69s;
		-moz-animation-delay:2.69s;
}
#fountainTextG_15{
	animation-delay:2.84s;
		-o-animation-delay:2.84s;
		-ms-animation-delay:2.84s;
		-webkit-animation-delay:2.84s;
		-moz-animation-delay:2.84s;
}
#fountainTextG_16{
	animation-delay:2.99s;
		-o-animation-delay:2.99s;
		-ms-animation-delay:2.99s;
		-webkit-animation-delay:2.99s;
		-moz-animation-delay:2.99s;
}
#fountainTextG_17{
	animation-delay:3.14s;
		-o-animation-delay:3.14s;
		-ms-animation-delay:3.14s;
		-webkit-animation-delay:3.14s;
		-moz-animation-delay:3.14s;
}
#fountainTextG_18{
	animation-delay:3.29s;
		-o-animation-delay:3.29s;
		-ms-animation-delay:3.29s;
		-webkit-animation-delay:3.29s;
		-moz-animation-delay:3.29s;
}
#fountainTextG_19{
	animation-delay:3.44s;
		-o-animation-delay:3.44s;
		-ms-animation-delay:3.44s;
		-webkit-animation-delay:3.44s;
		-moz-animation-delay:3.44s;
}
#fountainTextG_20{
	animation-delay:3.59s;
		-o-animation-delay:3.59s;
		-ms-animation-delay:3.59s;
		-webkit-animation-delay:3.59s;
		-moz-animation-delay:3.59s;
}

@keyframes bounce_fountainTextG{
	0%{
		transform:scale(1);
		color:rgb(0,0,0);
	}
	100%{
		transform:scale(.5);
		color:rgb(255,255,255);
	}
}

@-o-keyframes bounce_fountainTextG{
	0%{
		-o-transform:scale(1);
		color:rgb(0,0,0);
	}
	100%{
		-o-transform:scale(.5);
		color:rgb(255,255,255);
	}
}

@-ms-keyframes bounce_fountainTextG{
	0%{
		-ms-transform:scale(1);
		color:rgb(0,0,0);
	}
	100%{
		-ms-transform:scale(.5);
		color:rgb(255,255,255);
	}
}

@-webkit-keyframes bounce_fountainTextG{
	0%{
		-webkit-transform:scale(1);
		color:rgb(0,0,0);
	}

	100%{
		-webkit-transform:scale(.5);
		color:rgb(255,255,255);
	}
}

@-moz-keyframes bounce_fountainTextG{
	0%{
		-moz-transform:scale(1);
		color:rgb(0,0,0);
	}
	100%{
		-moz-transform:scale(.5);
		color:rgb(255,255,255);
	}
}

/*--------------------------------------------------
 header
--------------------------------------------------*/
.header{
	z-index: 50;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background-color: rgba(255,255,255,0.70);
}
.header-inner{
	display: flex;
	padding: 15px 20px;
	line-height: 1.5;
}
.header-logo{
	z-index: 150;
	width: 35px;
	height: 35px;
}
.header-logo.active{
	fill: #fff;
}
.header-text{
	z-index: 150;
	color: #000;
	font-size: 1.2rem;
	font-weight: bold;
	margin-left: 20px;
}
.header-text.active{
	color: #b2b2b2;
}
.header-text__en{
	display: block;
	font-size: 1.0rem;
	font-weight: bold;
	text-transform: uppercase;
}
.btn-trigger{
	z-index: 150;
	display: block;
	position: fixed;
	top: 10px;
	right: 15px;
	width: 40px;
	height: 40px;
	cursor: pointer;
	text-align: center;
}
.btn-trigger span {
	display: block;
	position: absolute;
	width: 30px;
	border-bottom: solid 4px #000;
	-webkit-transition: .35s ease-in-out;
	-moz-transition: .35s ease-in-out;
	transition: .35s ease-in-out;
	left: 5px;
}
.btn-trigger span:nth-child(1) {
	top: 10px;
}
.btn-trigger span:nth-child(2) {
	top: 20px;
}
.btn-trigger span:nth-child(3) {
	top: 30px;
}
.btn-trigger.active span:nth-child(1) {
    top: 20px;
    left: 5px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
	border-bottom: solid 4px #fff;
}
.btn-trigger.active span:nth-child(2),
.btn-trigger.active span:nth-child(3) {
    top: 20px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
	border-bottom: solid 4px #fff;
}
.gnav{
	display: none;
	z-index: 100;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 120%;
	background-color: #000;
}
.gnav-list{
	margin: 130px auto 60px;
	text-align: center;
}
.gnav-item{
	margin-bottom: 50px;
}
.gnav-item__en{
	display: block;
	color: #fff;
	font-size: 2.4rem;
	font-weight: bold;
	line-height: 1.5;
}
.gnav-item__ja{
	display: block;
	color: #b2b2b2;
	font-size: 1.4rem;	
}
.snav-list{
	display: flex;
	justify-content: center;
}
.snav-item{}
.snav-item__bar{
	color: #fff;
	font-size: 1.4rem;
	margin: 0 40px;
}
.snav-item > a{
	font-size: 1.4rem;
	color: #b2b2b2;
}

/*--------------------------------------------------
 footer
--------------------------------------------------*/
.footer{
	color: #fff;
	background-color: #000;
	padding: 20px;
}
.btn-top{
	position: fixed;
	bottom: 0;
	right: 0;
	width: 40px;
	height: 40px;
	color: #fff;
	font-size: 2.8rem;
	text-align: center;
	line-height: 1.2;
	background-color: #000;
}
.footer-text{
	font-size: 2.4rem;
	text-transform: uppercase;
	margin-bottom: 80px;
}
.footer-text__ja{
	display: block;
	font-size: 1.2rem;
	margin-top: 15px;
}
.f-gnav{
	text-align: center;
	margin-bottom: 70px;
}
.f-gnav-list{
	padding-bottom: 30px;
}
.f-gnav-item{
	color: #b2b2b2;
	font-size: 1.8rem;
	margin-bottom: 40px;
}
.f-snav-list{
	display: flex;
	justify-content: center;
	margin-bottom: 80px;
}
.f-snav-item__bar{
	font-size: 1.4rem;
	margin: 0 40px;
}
.f-gnav-item > a , .f-snav-item > a{
	color: #b2b2b2;
}
.copyright{
	display: block;
	font-size: 1.4rem;
	text-align: center;
	margin-bottom: 20px;
}

/*--------------------------------------------------
 common
--------------------------------------------------*/

/*アニメーション(右から左にスライドイン)*/
.right-to-left{
	opacity: 0;
}
.isPlayR {
  animation-name: playr;
  animation-duration: .5s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(.8,0,.5,1);
  position: relative;
  opacity: 1 !important;
}
@keyframes playr {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}
/*アニメーション(左から右にスライドイン)*/
.left-to-right{
	opacity: 0;
}
.isPlayL {
  animation-name: playl;
  animation-duration: 1.0s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(.8,0,.5,1);
  position: relative;
  opacity: 1 !important;
}
@keyframes playl {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}
/*アニメーション（下からふわっと表示）*/
.fadein{
    opacity : 0;
    transform : translate(0, 50px);
    transition : all 400ms;
}
.fadein.scrollin{
    opacity : 1;
    transform : translate(0, 0);
}

/*--------------------------------------------------
 top
--------------------------------------------------*/
.mv-inner{
	background-image: url("../images/mv01-sp.jpg");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	height: 100vh;
	padding-left: 20px;
}
.mv-title{
	color: #5c5c5c;
	font-size: 7.2rem;
	font-weight: bold;
	line-height: 1.2;
	text-transform: uppercase;
	padding-top: 45vh;
	margin-bottom: 30px;
}
.mv-title > span{
	color: #000;
	font-weight: bold;
}
.mv-text{
	font-size: 1.4rem;
}
.section-title__top{
	display: inline-block;
	color: #fff;
	font-size: 4.8rem;
	text-transform: uppercase;
	background-color: #000;
	padding: 15px;
	margin: 80px auto 40px;
}
.section-inner{
	position: relative;
	padding: 20px;
}
.bg-gray{
	z-index: -10;
	position: absolute;
	background-color: rgba(240,240,240,0.90);
	width: 75%;
	height: 95%;
	top: 50px;
	right: 0;
}
.line-outer{
	position: relative;
}
.line-top{
	position: absolute;
	background-color: #000;
	width: 100%;
	height: 1px;;
	top: 30px;
	left: 20px;
}
.line-right{
	position: absolute;
	background-color: #000;
	width: 100%;
	height: 1px;
	top: 40px;
	left: 0px;
}
.line-left{
	position: absolute;
	background-color: #000;
	width: 100%;
	height: 1px;
	bottom: -10px;
	left: -20px;
}

.section-subtitle__en{
	font-size: 2.7rem;
	font-weight: bold;
	line-height: 1.5;
	text-transform: uppercase;
	margin-bottom: 50px;
}
.section-subtitle__ja{
	display: block;
	font-size: 1.8rem;
	margin-top: 40px;
}
.section-text{
	font-size: 1.4rem;
	line-height: 2.0;
	margin-bottom: 30px;
}
.section-text__last{
	font-size: 1.4rem;
	line-height: 2.0;
	margin-bottom: 60px;
}
.btn-view{
	display: block;
	width: 250px;
	color: #000;
	font-size: 1.8rem;
	text-transform: uppercase;
	background-color: #fff;
	border: solid 4px #000;
	box-sizing: border-box;
	padding: 15px 40px 15px 70px;
	margin-bottom: 40px;
}
.arrow{
	width: 40px;
	vertical-align: 1px;
}
.section-subtitle__no{
	color: #b2b2b2;
	margin-bottom: 40px;
}
.section-subtitle__works{
	color: #2e2e2e;
	font-size: 1.8rem;
	margin-left: 10px;
}

/*--------------------------------------------------
 about
--------------------------------------------------*/
.page-title{
	color: #000;
	font-size: 3.6rem;
	text-transform: uppercase;
	background-color: rgba(240,240,240,0.90);
	padding: 120px 20px 50px;
	margin-bottom: 70px;
}
.page-title__ja{
	display: block;
	font-size: 1.4rem;
	margin-top: 10px;
}
.section-title{
	width: 200px;
	color: #fff;
	font-size: 2.4rem;
	text-transform: uppercase;
	background-color: #000;
	padding: 10px 20px;
	margin-bottom: 30px;
}
.section-title__ja{
	display: block;
	font-size: 1.2rem;
	margin-top: 6px;
}
.section-subtitle{
	font-size: 1.8rem;
	line-height: 2.0;
	margin-bottom: 40px;
}
.info-list{
	padding: 20px 0px 60px 20px;
}
.info-item{
	line-height: 2.0;
	border-bottom: solid 1px #b2b2b2;
}
.info-title{
	margin-top: 15px;
	margin-bottom: 10px;
}
.info-detail{
	font-weight: normal;
	display: block;
}
.info-item:first-child{
	border-top: solid 1px #b2b2b2;
}

.info-detail:last-child{
	margin-bottom: 25px;
}
.info-map{
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
	margin-top: 20px;
}

.info-map iframe, .info-map object, .info-map embed{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/*--------------------------------------------------
 works
--------------------------------------------------*/
.page-title__img{
	height: 100vh;
	color: #000;
	font-size: 3.6rem;
	text-transform: uppercase;
	background-color: #fff;
	padding: 120px 20px 0px;
	margin-bottom: -50px;
	background-image: url("../images/mv02-sp.jpg");
	background-position: center top 240px;
	background-repeat: no-repeat;
	background-size: contain;
}
.section-inner__works{
	position: relative;
	padding-bottom: 60px;
}
.bg-gray__works{
	z-index: -10;
	position: absolute;
	background-color: rgba(240,240,240,0.90);
	width: 80%;
	height: 85%;
	top: 50px;
	right: -20px;
}
.section-subtitle__list{
	font-size: 1.8rem;
	font-weight: bold;
	margin-bottom: 40px;
}
.section-subtitle__item{
	font-size: 1.6rem;
	margin-bottom: 20px;
	border-bottom: solid 1px #000;
	line-height: 2.5;
}
.products-list{
	margin-bottom: 40px;
}
.products-item{
	font-size: 1.4rem;
	line-height: 2.0;
}
.products-attention{
	font-size: 1.4rem;
	margin-bottom: 50px;
}
.products-attention > a{
	color: #2e2e2e;
	line-height: 1.5;
	border-bottom: solid 1px #000;
}


/*--------------------------------------------------
 recruit
--------------------------------------------------*/

/*--------------------------------------------------
 contact
--------------------------------------------------*/
.page-title__img.contact{
	height: 100vh;
	color: #000;
	font-size: 3.6rem;
	text-transform: uppercase;
	background-color: #fff;
	padding: 120px 20px 0px;
	margin-bottom: -50px;
	background-image: url("../images/kv03-sp.jpg");
	background-position: center top 240px;
	background-repeat: no-repeat;
	background-size: contain;
}
.section-subtitle__contact{
	font-size: 1.8rem;
	margin-bottom: 60px;
}
.contact-name{
	font-size: 1.6rem;
	margin-bottom: 20px;
}
.contact-list{
	font-size: 1.8rem;
	line-height: 2.0;
}
.contact-list > dt,dd{
	display: inline-block;
	font-weight: bold;
}
.contact-list > dd > a{
	color: #2e2e2e;
}
.contact-list:last-of-type{
	margin-bottom: 60px;
}

/*--------------------------------------------------
 terms
--------------------------------------------------*/
.page-title__ja2{
	color: #000;
	font-size: 2.0rem;
	background-color: rgba(240,240,240,0.90);
	padding: 140px 20px 70px;
	margin-bottom: 50px;
}
.section-subtitle__ja2{
	font-weight: bold;
	margin-bottom: 40px;
}

/*--------------------------------------------------
 sitemap
--------------------------------------------------*/
.page-title__img.sitemap{
	height: 100vh;
	color: #000;
	font-size: 2.0rem;
	background-color: #fff;
	padding: 140px 20px 0px;
	margin-bottom: -50px;
	background-image: url("../images/kv04-sp.jpg");
	background-position: center top 240px;
	background-repeat: no-repeat;
	background-size: contain;
}
.sitemap-1 > a{
	color: #2e2e2e;
	font-weight: bold;
	line-height: 5.0;
}
.sitemap-1:last-of-type{
	margin-bottom: 70px;
}
.sitemap-2 > a{
	color: #707070;
	line-height: 3.0;
}
.sitemap-2::before{
	content: '∟';
	color: #707070;
	font-size: 1.2rem;
	margin-right: 5px;
}

/*--------------------------------------------------
 404
--------------------------------------------------*/
.section-title__404{
	font-size: 1.8rem;
	margin-top: 40px;
	margin-bottom: 30px;
}