@charset "UTF-8";
body.second{
background-color: #000;
}
.bg-primary{
	
background-color: #eae6e3 !important;
}

.videowipe{
	max-width: 600px;
	width: 100%;
	float: right;
	background-color: #283738;
}

.longcopy{
	max-width: 300px;
	width: 100%;
	 -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
	font-family: YakuHanJP, "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	position:relative;
}
.longcopy p.h5{
font-weight: 300 !important;
	line-height: 2em;
}

.tagline , .tagline .h1{
	font-weight: 300 !important;
}

.tagline .h1{
	font-size: 220%;
}

.tagline strong{
	font-weight: 500 !important;
}
.longtext{
	line-height: 2;
	font-weight: 300 !important;
}

.border-bottom{
	border-color: #000 !important;
}

.label{
	color: #fff;
	background-color: #283738 !important;
}

.linkbox{
	width: 100%;
	background-color: #283738 !important;
	text-align: center;
	color: #fff;
}
.makerbox{
border-radius: 50%;
	background-color: #283738 !important;
	color: #fff;
	width: 180px;
	height: 180px;
	text-align: center;
	margin:0px  auto 12%;
	line-height: 180px;
}

.videofilter{
	background: rgba(0,0,0,0.5) !important;
	width: 100%;
	height: 100%;
}

.videofilter video{
object-fit: cover;
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
	opacity: 0.6;
}


.krs-btn{
width: 288px;
height: 288px;
overflow: hidden;
margin: auto;
position: relative;
text-align: center;
}

.front-cr{
background-color:#eae6e3;
position: absolute;
z-index: 1001;
border-radius: 50%; 
width: 288px;
height: 288px;
top: -30px;
}

.front-cr img.name{
width: 80%;
margin-top: 120px;
}

.back-cr{
background-color:#283738;
position: absolute;
z-index: 1000;
border-radius: 50%;
width: 288px;
height: 288px;
}


div.krs-btn:hover .front-cr{
top: -120px !important;
transition:0.1s ease-out;
}

.krs-btn .arrow{
margin-top: -60px;

}

.krs-btn .arrow:before,
.krs-btn .arrow:after {
background: #000 !important;
}

.back-cr p{
	color: #fff;
	text-align: center;
	position: relative;
	margin-top: 200px;
	display: block;
	font-size: 200%;
}

@media (min-width: 1200px) {
	
	body.second header{
margin-top: 10%;
}

.longcopy{
	padding: 15% 40%;
}

.videowipe p{
	text-align: right;
}	
	
.linkbox .h5 br{
	display: none;
}
	
	.leftbg{
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}
	
	.wipelogo{
		position: absolute;
		margin: 400px 0px 0px 30px; 
	}
	
	.wipelogo img{
		width: 200px;
	}
	
	.sponly{
	display: none;
}
	
}
@media (max-width: 1199px) {
	body.second header{
margin-top: 18%;
}

	.videowipe{
	margin-top: 30px;
}	
	
	.videowipe p{
	text-align: center;
}	
	.longcopy{
	padding: 10% 0%;
}
	
.pconly{
	display: none;
}
	
	.linkbox .h5{
	margin: 10px 0px !important;
		font-size: 100% !important;
		line-height: 1.6em;
}	
	
	.leftbg{
		height: 200px;
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}
	
	.wipelogo{
		position: absolute;
		margin: 250px 30% 0px; 
		text-align: center;
	}
	
	.wipelogo img{
		width: 200px;
	}
	
	.caselist{
		padding: 0px !important;
	}
	
	.makerbox{
border-radius: 50%;
	width: 160px;
	height: 160px;
	line-height: 160px;
		font-size: 90% !important;
		margin-bottom: 20px;
		box-shadow: 0px 0px 10px #000;
}
	
	.caselist .h4{
		text-align: center;
		width: 70%;
		margin: 40px auto 0px;
		display: block;
		
	}
	
	.bg-primary.p-5{
		padding: 8% 5% !important;
		margin: 0px !important;
	}
	
	.nametext{
		font-size: 90% !important;
	}
	
	p.longtext{
		font-size: 90% !important;
		line-height: 1.4em;
	}
	
	.intext{
		font-size: 70% !important;
	}
	
	}