/** pagetop **/
#page-top {
	position: fixed;
	bottom: -100px;
	right: 30px;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	box-sizing: border-box;
	display: block;
	background-image: url(../img/arr-upper-wh.png);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 30px;
	background-color: rgba(0,0,0,0.7);
	text-indent: -9999px;
	cursor: pointer;
	z-index: 9;
}

html{
	scroll-behavior:smooth;
	letter-spacing: 1;
}
header{
	display: block;
	width: 100%;
	height: 80px;
	z-index: 3;
	position: fixed;
	top: -100px;
	left: 0;
	background-color: #000;
}
.slide-down {
	animation-name: slideDown;
	animation-timing-function: ease-in;
	animation-iteration-count: 1;
	animation-delay: 0s;
	transform-origin: 50% 50% 0;
	animation-duration: .5s;
	top: 0;
}
@keyframes slideDown {
	0% {
		top: -100px;
	}
	100% {
		top: 0;
	}
}
.slide-up {
	animation-name: slideUp;
	animation-timing-function: ease-in;
	animation-iteration-count: 1;
	animation-delay: 0s;
	transform-origin: 50% 50%  0;
	animation-duration: .5s;
	top: -100px;
}
@keyframes slideUp {
	0% {
		top: 0;
	}
	100% {
		top: -70px;
	}
}
.burger-btn{
	width: 35px;
	height: 35px;
	position: fixed;
	left: 60px;
	top: 20px;
	border: 1px solid #fff;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	z-index: 3;
}
.burger-btn.on.mv{
	position: fixed;
	left: 60px;
	top: 13px;
}
.burger-btn:before,
.burger-btn:after,
.burger-btn span{
	display: block;
	width: 70%;
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
	-webkit-transition: .35s ease-in-out;
	-moz-transition: .35s ease-in-out;
	transition: .35s ease-in-out;
}
.burger-btn span{
	height: 1px;
	background-color: #fff;
	top: calc(50% - 1px);
}
.burger-btn:before{
	content: "";
	top: calc(25% - 1px);
	border-top: 1px solid #fff;
}
.burger-btn:after{
	content: "";
	bottom: calc(25% - 1px);
	border-bottom: 1px solid #fff;
}
.burger-btn.on span{
	display: none;
}

.burger-btn.on:before{
	width:80%;
	top: calc(50% - 1px);
	-webkit-transform: rotate(315deg);
	-moz-transform: rotate(315deg);
	transform: rotate(315deg);
}
.burger-btn.on:after{
	width:80%;
	bottom: calc(50% - 0px);
	-webkit-transform: rotate(-315deg);
	-moz-transform: rotate(-315deg);
	transform: rotate(-315deg);
}
header .header-logo{
	display: block;
	height: 65px;
	position: absolute;
	right: 70px;
	top: 9px;
}
header .header-logo img{
	height: 100%;
}
#pagetop{
	display:block;
	width:1px;
	height:1px;
}
nav{
	display: block;
	width: 33%;
	height: 100vh;
	z-index: 2;
	position: fixed;
	top:0;
	left: -100%;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+10,000000+95&1+0,0.81+34,0.57+59,0.34+80,0+100 */
	background: -moz-linear-gradient(left, rgba(0,0,0,1) 0%, rgba(0,0,0,0.94) 10%, rgba(0,0,0,0.81) 34%, rgba(0,0,0,0.57) 59%, rgba(0,0,0,0.34) 80%, rgba(0,0,0,0.09) 95%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(0,0,0,0.94) 10%,rgba(0,0,0,0.81) 34%,rgba(0,0,0,0.57) 59%,rgba(0,0,0,0.34) 80%,rgba(0,0,0,0.09) 95%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, rgba(0,0,0,1) 0%,rgba(0,0,0,0.94) 10%,rgba(0,0,0,0.81) 34%,rgba(0,0,0,0.57) 59%,rgba(0,0,0,0.34) 80%,rgba(0,0,0,0.09) 95%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 */
	-webkit-transition: .35s ease-in-out;
	-moz-transition: .35s ease-in-out;
	transition: .35s ease-in-out;
}
nav.active{
	left:0;
}
nav ul{
	margin-top: 20vh;
	padding-left: 50px;
}
nav ul li{
	margin-bottom: 20px;
}
nav ul li a{
	color:#fff;
}
nav ul li a strong{
	display: block;
	font-size: 18px;
}
nav ul li a span{
	display: block;
	font-size: 15px;
	letter-spacing: 0.8px;
}
nav .sns{
	text-align: center;
	position: absolute;
	bottom: 30px;
	margin: 0 auto 0 0;
	left: 0;
	right: 0;
	width: 270px;
}
nav .sns .sns-fb,
nav .sns .sns-ins,
nav .sns .sns-tw,
nav .sns .sns-yt{
	display: inline-block;
	width: 40px;
	margin: 0 2px;
}
nav .sns .sns-fb img,
nav .sns .sns-ins img,
nav .sns .sns-tw img,
nav .sns .sns-yt img{
	width: 100%;
}


h2{
	display: none;
	position: fixed;
	color: #fff;
	top: 23px;
	left: 115px;
	z-index: 4;
	font-size: 20px;
}
h2.act{
	display: inline;
}
#page1{
	display: block;
	width: 100%;
	height: 100vh;
	min-width: 100%;
	min-height: 100vh;
	position: fixed;
	top:0;
	overflow: hidden;
}
#page1:before{
	display: block;
	width: 100%;
	height: 100vh;
	min-width: 100%;
	min-height: 100%;
	position: absolute;
	top:0;
	left: 0;
	background-image: url(../img/movie-cover.png);
	background-size:contain;
	content: "";
}
#page1 .main-logo{
	position: absolute;
	margin: 0 auto;
	left: 0;
	right: 0;
	top:50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}
#page1 .page1-txt-img{
	position: absolute;
	right: 40px;
	bottom: 50px;
}
#page1 .page1-txt-img-sp{
	display: none;
}
#page1 video{
	display: block;
	margin: 0 auto;
	position: absolute;
	top:0;
	left: 0;
	right: 0;
	z-index: -10;
}
#page2{
	display: block;
	width: 100%;
	min-width: 100%;
	margin-top: 100vh;
	position: relative;
	overflow: hidden;

}
#page2 .half-mov{
	display: block;
	height: -webkit-calc(50vh - 35px);
	height: calc(50vh - 35px);
	overflow: hidden;
	position: relative;
}
#page2 .half-mov video{
	display: block;
	width: 100%;
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}
#page2 .half-mov .page2-t1{
	font-size: 26px;
	color:#fff;
	text-shadow: 1px 1px 1px #000;
	position: absolute;
	top: 40%;
	width: 100%;
	text-align: center;
	-webkit-transform: translateX(-120px);
	-ms-transform: translateX(-120px);
	transform: translateX(-120px);
}
#page2 .half-mov .page2-t2{
	font-size: 26px;
	color:#fff;
	text-shadow: 1px 1px 1px #000;
	position: absolute;
	bottom: 30%;
	width: 100%;
	text-align: center;
	-webkit-transform: translateX(120px);
	-ms-transform: translateX(120px);
	transform: translateX(120px);
}
#page2 .text-page2{
	display: block;
	padding: 70px 0 50px;
	background-color: #fff;
	font-size: 18px;
	position: relative;
}
#page2 .text-page2 strong{
	display: block;
	margin: 0 auto;
	line-height: 1.8;
}

#page3{
	display: block;
	width: 100%;
	min-width: 100%;
	position: relative;
	overflow: hidden;
}
#page3 .slider-box{
	background-color: #fff;
}
#page3 .title-box{
	background-color:#161515;
	padding: 30px 0;
}
#page3 .title-box img{
	display: block;
	width: 115px;
	margin:0 auto;
}
#page3 .slider-box{
}
#page3 .text-page3{
	display: block;
	padding: 80px 0 60px 0;
	margin-top: -27px;
	background-color: #fff;
	font-size: 18px;
	position: relative;
}
#page3 .text-page3 .news-frame{
	width: 550px;
	margin: 0 auto;
}
#page3 .text-page3 .news-frame strong{
	display: block;
	font-weight: bold;
	text-align: left;
	font-size: 16px;
	border-bottom: 1px solid #231815;
}
#page3 .text-page3 .news-frame iframe{
	display: block;
	width: 550px;
	height: 165px;
	margin: 0 auto;
	border-bottom: 1px solid #231815;
}


#page4 .product{
}
#page4 .product li{
	position: relative;
	padding:40px 0;
}
#page4 .product li a{
	display: inline-block;
	padding: 3px 25px 1px 0;
	background-repeat: no-repeat;
	background-position: right;
	background-size: contain;
	line-height: 1;
	position: absolute;
	bottom: 0;
}
#page4 .product li:nth-child(odd){
	background-color: #161515;
	color:#fff;
}
#page4 .product li:nth-child(odd) a{
	color:#fff;
	background-image: url(../img/tocart1.png);
}
#page4 .product li:nth-child(even){
	background-image: url(../img/text-bg.jpg);
	color:#090909;
}
#page4 .product li:nth-child(even) a{
	color:#090909;
	background-image: url(../img/tocart2.png);
}
#page4 .product li div{
	width: 950px;
	margin: 0 auto;
}
#page4 .product li div img.item-main-img{
	width: 350px;
	margin-right: 5px;
	vertical-align: top;
}
#page4 .product li div img.item-main-sub{
	width: 130px;
	margin-right: 5px;
	vertical-align: top;
	border: 2px solid #cfd0d0;
}
#page4 .product li div p{
	display: inline-block;
	width: 447px;
	vertical-align: top;
}
#page4 .product li div p strong{
	display: block;
	font-size: 16px;
	margin-bottom: 5px;
}
#page4 .product li div p b{
	display: block;
	margin-top:15px;
	font-size: 26px;
	font-weight: normal;
}
#page4 .product li div p b em{
	font-size: 12px;
	margin-left: 5px;
}
#page4 .product li:nth-child(even) div{
	display: flex;
}
#page4 .product li:nth-child(even) div img.item-main-img{
	height: 241.5px;
	order:3;
}
#page4 .product li:nth-child(even) div img.item-main-sub{
	height:158.967px;
	order:2;
}
#page4 .product li:nth-child(even) div p{
	order:1;
}
#page5{
	position: relative;
}
#page5{
}
#page5 .aboutlogo{
	width: 100px;
}
#page5 .slider-box{
	background-color: #fff;
}
#page5 .page5-txt{
	margin-top: -26px;
	padding:50px 0 25px;
	position: relative;
}
#page5 .page5-txt .about-txt{
	display: block;
	width: 350px;
	text-align: left;
	margin: 40px auto 0 auto;
	font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', '游ゴシック  Medium', meiryo, sans-serif;
}
#page5 .page5-txt .about-txt strong{
	display: block;
	font-size: 18px;
	font-weight: bold;
}
#page5 .page5-txt .about-txt b{
	font-size: 18px;
	font-weight: normal;
}
#news-box{
	padding-top: 100px;
	padding-bottom: 50px;
}
#news-box .news-inbox{
	width: 850px;
	min-height: -webkit-calc(100vh - 301px);
	min-height: calc(100vh - 301px);
	margin: 0 auto;
	position: relative;
}
#news-box .news-inbox h3{
	text-align: left;
	font-size: 20px;
	border-bottom: 2px solid #560b0f;
	color:#560b0f;
}
#news-box .news-inbox #up_ymd{
}
#news-box .news-inbox #detail{
	text-align: left;
}


.text-bg{
	color:#231815;
	text-align: center;
	background-image: url(../img/text-bg.jpg);
}
footer{
	background-color: #000;
	height: 200px;
	padding:20px 0 10px 0;
	position: relative;
}
footer .contact{
	display: block;
	width: 200px;
	height: 40px;
	line-height: 40px;
	margin: 0px auto;
	border:1px solid #767676;
	border-radius: 4px 4px 4px 4px;
	-moz-border-radius: 4px 4px 4px 4px;
	-webkit-border-radius: 4px 4px 4px 4px;
	color:#767676;
	text-align: center;
}
footer .sns{
	text-align: center;
	font-size: 0;
	margin: 40px 0;
}
footer .sns .sns-fb,
footer .sns .sns-ins,
footer .sns .sns-tw,
footer .sns .sns-yt{
	display: inline-block;
	width: 30px;
	margin: 0 5px;
}
footer .sns .sns-fb img,
footer .sns .sns-ins img,
footer .sns .sns-tw img,
footer .sns .sns-yt img{
	width: 100%;
}

footer span{
	display: block;
	text-align: center;
}

#contact{
	padding: 100px 0 0 0;
	background-image: url(../img/text-bg.jpg);
}
section.mailform{
	width: 850px;
	margin: 0 auto;
}
section.mailform .form-t{
}
section.mailform .form-t tr{
	border-bottom: 1px dotted #333;
}
section.mailform .form-t th{
	width: 190px;
	padding: 10px;
	vertical-align: top;
}
section.mailform .form-t th .require{
	display: block;
	color:#ff1422;
	font-size: 13px;
}
section.mailform .form-t td{
	padding: 10px;
}
section.mailform .form-t td p{
	color:#ff1422;
}

section.mailform .form-t td .txt-field{
}
section.mailform .form-t td input[type="text"],
section.mailform .form-t td input[type="tel"]{
	width: 100%;
	vertical-align: middle;
	border: 1px solid #cccccc;
	padding: 10px;
	border-radius: 4px 4px 4px 4px;
	-moz-border-radius: 4px 4px 4px 4px;
	-webkit-border-radius: 4px 4px 4px 4px;
}
section.mailform .form-t td textarea {
	width: 100%;
	vertical-align: middle;
	border: 1px solid #cccccc;
	margin: 5px 0;
	padding: 10px;
	height: 150px;
	border-radius: 4px 4px 4px 4px;
	-moz-border-radius: 4px 4px 4px 4px;
	-webkit-border-radius: 4px 4px 4px 4px;
}

.select input {
	display: none;
}
.select input[type="radio"]:checked + label {
	color: #3275bc;
	border: 2px solid #3275bc;
	background-color: #d0e6fd;
}
.select label {
	color: #999;
	border: 2px solid #999;
	text-align: center;
	display: inline-block;
	padding: 5px 0px;
	width: 120px;
}
.select label:hover {
	color: #666;
	border: 2px solid #666;
	cursor: pointer;
}
section.mailform{
	padding-bottom: 80px;
}
section.mailform .privacy-box{
	margin:20px 0;
}
section.mailform .privacy-box .toggle{
	transition: all 0.3s ease 0s;
	color:#444;
	border:1px solid #333;
	background-color: #eaeaea;
	line-height: 40px;
	font-size: 16px;
	text-align: center;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	cursor: pointer;
}
section.mailform .privacy-box .toggle:hover{
	background-color: #666;
	color:#fff;
}
section.mailform .label-box-l{
	color:#ea0000;
}
section.mailform .privacy-box .privacy{
	display: none;
	width: 100%;
	padding:10px;
}
section.mailform .privacy-box .privacy .subtxt{
	margin-bottom: 15px;
	color: #000;
}
section.mailform .privacy-box .privacy h3{
	font-size: 16px;
	font-weight: bold;
	color: #000;
}
section.mailform .privacy-box .privacy .p-txt{
	margin-bottom: 15px;
}


section.mailform .buttons{
	margin:30px 0 0 0;
	text-align: center;
}
section.mailform .buttons button{
	width: 250px;
	height: 50px;
	font-size: 16px;
}

#mailform {
    padding: 100px 0 50px 0;
    background-image: url(../img/text-bg.jpg);
}
#mailform h3{
	font-size: 18px;
	color: #333;
	font-weight: bold;
}
#mailform > p{
	text-align: left;
	color: #333;
	font-weight: bold;
}

#mailform #formWrap{
	width: 850px;
	margin: 0 auto
}
#mailform #formWrap .formTable2{
	width: 100%;
	border-collapse: separate;
	border-spacing: 6px;
}
#mailform #formWrap .formTable2 th{
	width: 150px;
	padding:10px;
	background-color: #fff;
	border-radius: 10px 10px 10px 10px;
	-moz-border-radius: 10px 10px 10px 10px;
	-webkit-border-radius: 10px 10px 10px 10px;
	border:1px solid #999;
	text-align: left;
	box-shadow: 1px 1px 3px #999;
	vertical-align: top;
}
#mailform #formWrap .formTable2 td{
	padding:10px;
	background-color: #fff;
	border-radius: 10px 10px 10px 10px;
	-moz-border-radius: 10px 10px 10px 10px;
	-webkit-border-radius: 10px 10px 10px 10px;
	border:1px solid #999;
	box-shadow: 1px 1px 3px #999;
	vertical-align: top;
}
#mailform #formWrap .button-box{
	margin-top:40px;
	text-align: center;
}

#mailform #formWrap .button-box input[type=submit],
#mailform #formWrap .button-box input[type=button]{
    width: 200px;
    height: 50px;
    font-size: 16px;
    margin:0 10px;
}



/* PC用
-----------------------------------------------------------------------------------------*/
@media only screen and (min-width: 960px){
}



/* ----- 幅960px以下のPC 
-----------------------------------------------------------------------------------------*/
@media only screen and (max-width:900px){

.spnone{
	display: none;
}

}



/* ----- スマートフォン 横(ランドスケープ)
-----------------------------------------------------------------------------------------*/
@media only screen and (max-width:640px){

	.burger-btn{
		right: 20px;
		left: auto;
		top: 16px;
	}
	.burger-btn.on.mv{
		right: 20px;
		left: auto;
		top: 16px;
	}
	nav{
		width:210px;
	}
	nav ul{
		margin-top:90px;
		padding-left: 15px;
	}
	nav ul li a strong{
		font-size: 15px;
		line-height: 1.4;
	}
	nav ul li a span{
		font-size: 12px;
	}
	nav .sns{
		position: static;
		padding-left: 15px;
		text-align: left;
	}
	nav .sns .sns-fb,
	nav .sns .sns-ins,
	nav .sns .sns-tw,
	nav .sns .sns-yt{
		width: 30px;
	}
	header .header-logo{
		left: 15px;
		right: auto;
	}
	#page1{
		background-image: url(../img/page1-sp2.gif);
		background-size: cover;
	}
	#page1:before{
		background-image: none;
	}
	#page1 video{
		display: none;
	}


	#page1 .main-logo{
		display: none;
	}
	#page1 .page1-txt-img{
		display: none;
	}
	#page1 .page1-txt-img-sp{
		display: block;
		height: 60vh;
		margin: 0 auto;
		position: absolute;
		bottom: 40px;
		left: 0;
		right: 0;
	}
	#page2{
		height: auto;
		min-height: auto;
	}
	#page2 .half-mov{
		width: 100%;
		height:-webkit-calc((100vh - 70px) / 2);
		height:calc((100vh - 70px) / 2);
		min-height:-webkit-calc((100vh - 70px) / 2);
		min-height:calc((100vh - 70px) / 2);
		background-color: #fff;
		background-size: cover;
	}
	#page2 .half-mov .page2-t1,
	#page2 .half-mov .page2-t2{
		display: none;
	}

	#page2 .half-mov video{
		display: none;
	}
	#page2 .text-page2{
		height:auto;
		min-height:auto;
	}
	#page2 .text-page2 strong{
		font-size: 16px;
		padding: 20px;
		-webkit-transform: none;
		-ms-transform: none;
		 transform: none;
		 text-align: left;
	}
	#page2 .text-page2 strong .spnone{
		display: none;
	}
	#page3{
		height: auto;
		min-height: auto;
	}
	#page3 .title-box img{
		width: 130px;
	}
	#page3 .text-page3{
		height: auto;
		min-height: auto;
		padding:40px 15px 15px 15px;
	}
	#page3 .text-page3 .news-frame{
		width: 100%;
	}
	#page3 .text-page3 .news-frame iframe{
		width: 100%;
	}
	#page4 .product li{
		padding:15px;
	}
	#page4 .product li a{
		position: static;
		margin-top:20px;
	}
	#page4 .product li div{
		width: 100%;
	}
	#page4 .product li div img.item-main-img{
		width: 100%;
		margin-right: 0;
		margin-bottom: 35px;
	}
	#page4 .product li div img.item-main-sub{
		display: inline-block;
		width: 110px;
		margin-right: 10px;
		vertical-align: top;
	}
	#page4 .product li div p{
		width: -webkit-calc(100% - 130px);
		width: calc(100% - 130px);
		position: relative;
		vertical-align: top;
	}
	#page4 .product li div p strong{
		position: absolute;
		left: -120px;
		top: -28px;
		font-size: 16px;
		font-weight: bold;
	}
	#page4 .product li:nth-child(even) div{
		display: block;
	}
	section.mailform{
		width: 100%;
		padding:0 15px 40px 15px;
	}
	section.mailform .form-t{
		margin-top: 30px;
	}
	section.mailform .form-t th,
	section.mailform .form-t td{
		display: block;
	}
	section.mailform .form-t th{
		width: 200px;
		padding-bottom: 5px;
	}
	section.mailform .form-t th .require{
		display: inline-block;
	}
	section.mailform .form-t td{
		padding-top:5px;
	}
	#news-box{
		padding-right: 15px;
		padding-left: 15px;
	}
	#news-box .news-inbox{
		width: 100%;
	}
	#news-box .news-inbox h3{
	}
	#news-box .news-inbox #up_ymd{
	}
	#news-box .news-inbox #detail{
		font-size: 16px;
	}
	#mailform #formWrap{
	}





}



/* ----- スマートフォン 縦(ポートレート)
-----------------------------------------------------------------------------------------*/
@media only screen and (max-width:414px){
}




/* ----- スマートフォン 縦(ポートレート)
-----------------------------------------------------------------------------------------*/
@media only screen and (max-width:375px){
}




/* ----- スマートフォン 縦(ポートレート)
-----------------------------------------------------------------------------------------*/
@media only screen and (max-width:360px){
}




/* ----- スマートフォン 縦(ポートレート)
-----------------------------------------------------------------------------------------*/
@media only screen and (max-width:320px){
}