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

/* -----------------------------
TITLE BLOCK 
----------------------------- */
#title{
	width:100%;
	min-height:100vh;
	
	display: flex;
	justify-content: center;
	align-items: center;
}

#title .logo_block{
	width:22.5%;
}
#title .logo_block h1{
	display:block;
	width:100%;
}

#title .logo_block h1 img{
	width:100%;
	height:auto;
	animation-name: blur;
	animation-duration: 2s;
	animation-timing-function: ease-in;
	/*animation-fill-mode:forwards;*/
}
@keyframes blur {
    from {
        filter: blur(15px);
		opacity:0;
    }
    
    to {
        filter: blur(0);
		opacity:1;
    }
}


@media screen and (max-width:767px) {
	#title{
		min-height:60vh;
	}

	#title .logo_block{
		width:30%;
	}
	#title .logo_block h1 img{
		animation-duration: 1s;
	}
}

/* -----------------------------
WHAT BLOCK 
----------------------------- */
#what{
	margin:0;
	position:relative;
	min-height:100vh;
	display:flex;
	align-items:center;
	justify-content: center;
}
#what{
	background:url("/image/block01_bg_pc.jpg") no-repeat right top;
	background-size:100%;
}
#what .deteal_box{
	width:90%;
	max-width:1100px;
	position:relative;
	margin:0 auto;
}
#what h2{
	font-size:10.0rem;
	font-weight:700;
	line-height:1.0;
	text-align:center;
	
	display:block;
	padding-top:2.500vw;
	margin-bottom:1.071vw;
}
#what .copy_box{
	width:90%;
	max-width:1100px;
	padding:2.500vw 3.571vw;
	margin:0 auto;
	background:rgba(255,255,255,0.4);
	border-radius:20px;
	
	text-align:left;
}


@media screen and (max-width:767px) {
	#what{
		min-height:calc(100vh - 80px);
	}
	#what{
		background-size:120%;
	}
	#what .deteal_box{
		width:100%;
	}
	#what h2{
		font-size:6.0rem;
		padding-top:26.667vw;
		margin-bottom:24vw;
	}
	#what .copy_box{
		width:90%;
		padding:0 0 5vh;
		margin:0 auto 5vh;
		background:none;
		border-radius:none;
	}
}

/* -----------------------------
Three function BLOCK 
----------------------------- */
#function{
	margin:0;
	position:relative;
	min-height:100vh;
	padding:4.643vw 0 2.857vw;
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	justify-content: center;
}
#function{
	background:url("/image/block02_bg_pc.jpg") no-repeat right top;
	background-size:cover;
}
#function .deteal_box{
	width:90%;
	max-width:1100px;
	position:relative;
	margin:0 auto;
}
#function .deteal_box .flow_block{
	width:100%;
	position:relative;
	margin:0;
	padding:0;
}
#function .deteal_box .flow_block h2{
	position:absolute;
	top:0;
	left:0;
	display:block;
	width:24%;
}
#function .deteal_box .flow_box{
	width:66.3%;
	/*width:731px;*/
	position:relative;
	top:0.429vw;
	left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}
@media screen and (max-width:767px) {
	#function{
		min-height:calc(100vh - 80px);
		padding:4.643vw 0 2.857vw;
	}
	#function{
		background-size:cover;
	}
	#function .deteal_box{
		width:90%;
	}
	#function .deteal_box .flow_block h2{
		left: 50%;
		transform: translateX(-50%);
		-webkit-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
		width:70%;
	}
	#function .deteal_box .flow_box{
		width:90%;
		/*width:731px;*/
		position:relative;
		top:13.333vw;
		left: 50%;
		transform: translateX(-50%);
		-webkit-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
	}
}

.box {
	width: 100%;
	/*表示画像の縦横比より長くしない*/
	height:371px;
	/*表示画像の縦横比より長くしない*/
	overflow: hidden;
	position: relative;
}

.box.scroll_img > img {
	width: 100%;
}
.box.scroll_img > div {
	width: 100%;
}

.box1 > img {
	width: 0%;
	height: 371px;
	object-fit: cover;
	object-position: 0 50%;
	/*修正*/
	transition: width 1s ease-out 0.5s;
}
@media screen and (max-width:767px) {
	.box {
		width: 100%;
		/*表示画像の縦横比より長くしない*/
		height:500px;
		/*表示画像の縦横比より長くしない*/
		overflow: hidden;
		position: relative;
	}

	.box.scroll_img > img {
		width: 100%;
	}
	.box.scroll_img > div {
		width: 100%;
	}

	.box1 > img {
		width: 0%;
		height: 500px;
		object-fit: cover;
		object-position: 0 50%;
		/*修正*/
		transition: width 1s ease-out 2s;
	}
}
#function ul.copy_block{
	position:relative;
	margin:3.929vw auto;
	width:90%;
	max-width:1100px;
	
	display:-webkit-box;
	display: -webkit-flex;
	display:-ms-flexbox;
	display: flex;
	-webkit-flex-wrap:nowrap;
	-ms-flex-wrap:nowrap;
	flex-wrap:wrap;
	
	justify-content: space-between;
}
#function ul.copy_block li{
	width:30.9%;
	background:rgba(0,0,0,0.4);
	
	line-height:1.6;
	
	border-radius:20px;
	
	padding:0.714vw 1.786vw 0.929vw;
}
#function ul.copy_block li p{
	color:#FFF;
	font-size:1.3rem;
	text-align:left;
	
	display:block;
	margin-top:0.357vw;
}
#function ul.copy_block li h3{
	color:#FFF;
	font-size:2.2rem;
	font-weight:700;
}
@media screen and (max-width:767px) {
	#function ul.copy_block{
		margin:20vw auto 0;

		-webkit-flex-wrap:wrap;
		-ms-flex-wrap:wrap;
		flex-wrap:wrap;
	}
	#function ul.copy_block li{
		width:100%;
		padding:5.333vw;
		margin-bottom:2.667vw;
	}
	#function ul.copy_block li p{
		font-size:1.4rem;
	}
	#function ul.copy_block li h3{
	}
}
/* -----------------------------
THREE共通 BLOCK 
----------------------------- */
#factory .deteal_box .title_box{
	position:absolute;
	top:/*14.286vw*/25vh;
	left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
	
	text-align:center;
	mix-blend-mode:screen;
}
#kiosk .deteal_box .title_box,
#lab .deteal_box .title_box{
	position:absolute;
	top:/*14.286vw*/25vh;
	left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
	
	text-align:center;
	mix-blend-mode:multiply;
}
#factory .deteal_box .links,
#lab .deteal_box .links,
#kiosk .deteal_box .links{
	position:absolute;
	left: 50%;
	top:/*39.286vw*/65vh;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}
#portfolio .deteal_box .links{
	position:absolute;
	left: 50%;
	top:/*47vw*/75vh;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}
.deteal_box .links a:hover{
    opacity:0.5;
}
#factory .deteal_box .links a,
#lab .deteal_box .links a,
#kiosk .deteal_box .links a,
#portfolio .deteal_box .links a{
	font-size:1.8rem;
	transition: 1s;
}
#factory .deteal_box .links a,
#portfolio .deteal_box .links a{
	color:#FFF;
	background-color:rgba(255,255,255,0.2);
	border:solid 1px #FFF;
	
	padding:0.3vw 1.2vw 0.6vw 1.2vw;
}
#kiosk .deteal_box .links a,
#lab .deteal_box .links a{
	color:#FFF;
	background-color:rgba(0,0,0,0.4);
	border:solid 1px #000;
	
	padding:0.3vw 1.2vw 0.6vw 1.2vw;
}
#factory .deteal_box .links a::after,
#lab .deteal_box .links a::after,
#kiosk .deteal_box .links a::after,
#portfolio .deteal_box .links a::after{
	content:"▶︎";
	margin-left:1vw;
	font-size:1.2rem;
}
#factory .deteal_box .links a::after,
#lab .deteal_box .links a::after,
#portfolio .deteal_box .links a::after{
	color:#FFF;
}
#kiosk .deteal_box .links a::after{
	color:#FFF;
}
#factory .deteal_box h2,
#lab .deteal_box h2,
#kiosk .deteal_box h2,
#portfolio .deteal_box h2{
	position:absolute;
	top:0;
	right:0;
	display:block;
}
#factory .deteal_box h2 img,
#lab .deteal_box h2 img,
#kiosk .deteal_box h2 img,
#portfolio .deteal_box h2 img{
	width:100%;
	height:auto;
}
#factory .deteal_box h2 img.show,
#lab .deteal_box h2 img.show,
#kiosk .deteal_box h2 img.show,
#portfolio .deteal_box h2 img.show{
	animation-name: threefunc_blur;
	animation-duration: 1s;
	animation-timing-function: ease-in;
	animation-fill-mode:forwards;
}
@keyframes threefunc_blur {
    from {
        filter: blur(10px);
		opacity:0;
    }
    
    to {
        filter: blur(0);
		opacity:1;
    }
}
@media screen and (max-width:767px) {
	#factory .deteal_box .title_box,
	#lab .deteal_box .title_box{
		top:20vh;
	}
	#kiosk .deteal_box .title_box{
		top:20vh;
	}
	#factory .deteal_box .links,
	#lab .deteal_box .links,
	#kiosk .deteal_box .links{
		top:41vh;
	}
	#portfolio .deteal_box .links{
		top:45vh;
	}
	.deteal_box .links a:hover{
		opacity:0.5;
	}
	#factory .deteal_box .links a,
	#lab .deteal_box .links a,
	#kiosk .deteal_box .links a,
	#portfolio .deteal_box .links a{
		font-size:1.6rem;
		padding:0.5vw 2.5vw 1vw;
		transition: 1s;
	}
	#factory .deteal_box .links a::after,
	#lab .deteal_box .links a::after,
	#kiosk .deteal_box .links a::after,
	#portfolio .deteal_box .links a::after{
		content:"▶︎";
		margin-left:1vw;
		font-size:1.0rem;
		color:#FFF!important;
	}
	.deteal_box .links{
		width:50vw;
		text-align:center;
	}
	#factory .deteal_box h2 img.show,
	#lab .deteal_box h2 img.show,
	#kiosk .deteal_box h2 img.show,
	#portfolio .deteal_box h2 img.show{
		animation-duration: 1s;
	}
}
/* -----------------------------
FACTORY BLOCK 
----------------------------- */
#factory{
	margin:0;
	position:relative;
	min-height:100vh;
	padding:4.357vw 6.786vw 10.143vw;
}
#factory{
	background:url("/image/factory_bg_pc.jpg") no-repeat center top;
	background-size:cover;
}
#factory .deteal_box{
	position:relative;
}
#factory .deteal_box .title_box img{
	width:14.071vw;
}
#factory .deteal_box h2{
	width:16.5%;
}
@media screen and (max-width:767px) {
	#factory{
		min-height:60vh;
	}
	#factory{
	}
	#factory .deteal_box{
	}
	#factory .deteal_box .title_box img{
		width:25vw;
	}
	#factory .deteal_box h2{
		width:20%;
	}
}
/* -----------------------------
LAB BLOCK 
----------------------------- */
#lab{
	margin:0;
	position:relative;
	min-height:100vh;
	padding:4.357vw 6.786vw 10.143vw;
}
#lab{
	background:url("/image/lab_bg_pc.jpg") no-repeat center top;
	background-size:cover;
}
#lab .deteal_box{
	position:relative;
}
#lab .deteal_box .title_box img{
	width:13.214vw;
}
#lab .deteal_box h2{
	width:20%;
}
@media screen and (max-width:767px) {
	#lab{
		min-height:60vh;
	}
	#lab{
		background:url("/image/lab_bg_pc.jpg") no-repeat right 20% top;
		background-size:cover;
	}
	#lab .deteal_box{
		
	}
	#lab .deteal_box .title_box img{
		width:25vw;
	}
	#lab .deteal_box h2{
		width:20%;
	}
}
/* -----------------------------
KIOSK BLOCK 
----------------------------- */
#kiosk{
	margin:0;
	position:relative;
	min-height:100vh;
	padding:4.357vw 6.786vw 10.143vw;
}
#kiosk{
	background:url("/image/kiosk_bg_pc.jpg") no-repeat center top;
	background-size:cover;
}
#kiosk .deteal_box{
	position:relative;
}
#kiosk .deteal_box .title_box img{
	width:18.429vw;
}
#kiosk .deteal_box h2{
	width:16.36%;
}
@media screen and (max-width:767px) {
	#kiosk{
		min-height:60vh;
	}
	#kiosk{
		background:url("/image/kiosk_bg_pc.jpg") no-repeat right top;
		background-size:150%;
	}
	#kiosk .deteal_box{
	}
	#kiosk .deteal_box .title_box img{
		width:30vw;
	}
	#kiosk .deteal_box h2{
		width:20%;
	}
}
/* -----------------------------
PORTFOLIO BLOCK 
----------------------------- */
#portfolio{
	margin:0;
	position:relative;
	min-height:100vh;
	padding:4.357vw 6.786vw 10.143vw;
}
#portfolio{
	background:url("/image/portfolio_bg_pc.jpg") no-repeat center top;
	background-size:cover;
}
#portfolio .deteal_box{
	position:relative;
	background:url("/image/portfolio_bg_pc.jpg") no-repeat center top;
	background-size:cover;
}
#portfolio .deteal_box h2{
	width:15.86%;
}
@media screen and (max-width:767px) {
	#portfolio{
		min-height:60vh;
	}
	#portfolio{
	}
	#portfolio .deteal_box{
	}
	#portfolio .deteal_box h2{
		width:25%;
	}
}