@charset "utf-8";





@media only screen and (max-width: 480px) {



.black-bg{
	background: #000;
height:100vh;
background: #ddd;
}

.loader{
	height: 100vh;
	position: relative;
	width:100%;
}
.loader__img {
	width:100%;
	height: 100vh;
	position: relative;
	width:100%;
}

.loader__img img {
	position:absolute;
	width:240px;
	height:auto;
	top: 40%;
	left: 50%;
	transform: translate(-50%,-40%);
}


.main{

min-width: 100%;
padding: 0 0px 0 0px;
position:relative;
width:100%;
overflow:hidden;
margin: 0 0 12px 0;
height:100vh;
background: #000;
}


.main__scroll{
	position:absolute;

	text-align: center;
}
.main__scroll:hover{
color:#fff;
}

.main-inner{
	width:90%;
	padding: 0 0px 0 0px;
	height:auto;
	position:absolute;
	top: 40%;
	left: 50%;
	transform: translate(-50%,-40%);
	margin:auto;
	text-align: center;
}


.main-inner h2{
	padding:0;
	margin: 0px auto;
	line-height: 1;
	font-size: 30px;
	font-weight: 500;
	color:#fff;
	}
.main-inner h2 span{
	display: block;
	padding:0;
	margin: 15px auto 0 auto;;
	line-height: 1;
	font-size: 15px;
	letter-spacing: 0.20em;
	font-family: 'Oswald', sans-serif;
	color:#f29600;
	}


.mainVisual__scroll{

	display:flex;
	position:absolute;
	bottom:45px;
	transform-origin:center top;
 	transform:rotate(90deg);
	left:calc(50% - 50px);
	width: 150px;
	margin: auto;
	}
	
	.mainVisual__scrollTxt{
	margin-right:3px;
	color:#fff;
	font-size:13px;
	line-height: 1;
	font-weight: 500;
	letter-spacing:.1em;
	opacity: 1;
	margin: 18px 0 0 0;
	}
	.mainVisual__scrollLine{
	position:relative;
	top:27px;
	width:120px;
	height:1px;
	background:#fff;
	}
	.mainVisual__scrollLine:after{
	display:block;
	position:absolute;
	top:-2px;
	left:0;
	width:15px;
	height:5px;

	background:#fff;
	-webkit-animation:scroll 2s linear infinite;
	animation:scroll 2s linear infinite;
	content:'';
	}




.main__scroll{
width:205px;
height:120px;
position:absolute;
	bottom: 0%;
	left: 50%;
	transform: translate(-50%,0%);
	margin:auto;
z-index:21;
text-align: center;
background: transparent;
}
.main__scroll:hover{
color:#fff;
}


.main__scroll_txt{
display: inline-block;
margin: 0 0px 12px 1px;
font-size:12px;
font-weight: 600;
color:#fff;
transform: rotate( 90deg );
}

/* ボタンの大きさと位置をここで指定 */
.btn__box {
    position: relative;
    width: 1px;
    height: 150px;
    line-height: 200px;
    overflow: hidden;
    margin: 10px auto 0px auto;
    border-right: 0px solid #777;
	background: transparent;
}


/* 線(ボーダー)のスタイル 共通 */
.btn__box:before,
.btn__box:after
 {
    content: '';
    position: absolute;
    background: #fff; /*線の色*/
}
/* 右のボーダー */
.btn__box:after {
    right: 0px;
    width: 1px;
    height: 100px;
}





@keyframes topAnim {
    0% {top:-120px;}
    100% {top:120px;}
}




/*======================================

	top-common
	
========================================*/
section.top-wrapper{
	padding: 0 0 0 0;
	margin: 0 0 20px 0;
	text-align: center;
	width: 100%;
}

.top-wrapper-inner{
	padding: 0 0 0 0;
	margin: 0 auto 0px auto 0;
	width: 90%;
	text-align: center;
}

.head-lead{
	width:100%;
	margin: 0 0 0px 0;
	text-align: left;
}



.lead{
	font-size:18px;
	font-weight: 500;
	line-height: 1.8;
	margin: 0 0 12px 0;
	padding: 0 0 0 0;
}

.lead-h3{
	font-size:20px;
	font-weight: 500;
	line-height: 1.5;
	padding: 0 0 0 0;
	margin: 0 0 18px 0;
}

.lead-h3 span{
	display: block;
	color:#f29600;
	font-size:15px;
	line-height: 1.5;
	font-family: 'Oswald', sans-serif;
	font-weight: 500;
	letter-spacing: 0.25em;
	padding: 0 0 0 0;
	margin: 0 0 0px 0;
}


/*======================================

	top-banner
	
========================================*/


#top-banner{
	overflow: hidden;
	width:100%;
	border-top:0px solid #ccc;
	margin:0px auto 40px auto;
	padding:12px 0 0 0;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	background: transparent;
	}

.top-banner-box{
	margin: 0 8px 0 8px;
}

.top-banner-box img{
	height: 120px;
}




/*======================================

	top-film
	
========================================*/


.top-film{
	width:90%;
	border-top:0px solid #ccc;
	margin:0px auto 60px auto;
	padding:0 0 0 0;
	display: block;
	justify-content: space-between;
	background: transparent;
	overflow-x: hidden;
}

.top-film-left{
	width:100%;
	border-top:0px solid #ccc;
	margin:0px 0px 21px 0px;
	padding:0 0 0 0;
	text-align: left;
}
.top-film-right{
	width:100%;
	border-top:0px solid #ccc;
	margin:0px 0px 0px 0px;
	padding:0 0 0 0;
	text-align: left;
}
.top-film-right img{
	width:100%;
}


.top-coating{
	width:90%;
	border-top:0px solid #ccc;
	margin:0px auto 60px auto;
	padding:0 0 0 0;
	display: block;
	justify-content: space-between;
	background: transparent;
	overflow-x: hidden;

}

.top-coating-right{
	width:100%;
	border-top:0px solid #ccc;
	margin:0px 0px 21px 0px;
	padding:0 0 0 0;
	text-align: left;
}

.top-coating-left{
	width:100%;
	border-top:0px solid #ccc;
	margin:0px 0px 0px 0px;
	padding:0 0 0 0;
	text-align: left;
}
.top-coating-left img{
	width:100%;
}



.film-note{
	font-size:12px;
	line-height: 1.8;
	margin: 0 0 0 0;
	padding: 0 0 0 ;
}

.lead{
	font-size:16px;
	font-weight: 500;
	line-height: 1.8;
	margin: 0 0 9px 0;
	padding: 0 0 0 0;
}

.lead-h3{
	font-size:21px;
	font-weight: 500;
	line-height: 1.5;
	padding: 0 0 0 0;
	margin: 0 0 18px 0;
}

.lead-h3 span{
	display: block;
	color:#f29600;
	font-size:15px;
	line-height: 1.5;
	font-family: 'Oswald', sans-serif;
	font-weight: 500;
	letter-spacing: 0.25em;
	padding: 0 0 0 0;
	margin: 0 0 0px 0;
}

a.more{
	display: block;
	width:150px;
	height:36px;
	text-align: center;
	color:#fff;
	border-radius: 45px;
	padding: 6px 0 0 10px;
	margin: 18px 0 0 0;
	font-size: 14px;
	background: #000 url(../i_top/anchor_wh.png) no-repeat 22px center ;
	background-size:15px auto;
}

a.more:hover{
	background: #f29600 url(../i_top/anchor_wh.png) no-repeat 22px center ;
	background-size:18px auto;
}



.top-xpel{
	width:90%;
	border-top:0px solid #ccc;
	margin:18px auto 0px auto;
	padding:0 0 0 0;
	display: block;
	overflow-x: hidden;
}

.top-xpel-left{
	width:210px;
	border-top:0px solid #ccc;
	margin:0px 0px 0px 0px;
	padding:0 0 0 0;
	text-align: left;
}
.top-xpel-left img{
	width:100%;
}
.top-xpel-right{
	width:100%;
	border-top:0px solid #ccc;
	margin:0px 0px 0px 0px;
	padding:0 0 0 0;
	text-align: left;
}





/*======================================

	top-pickup
	
========================================*/


.top-pickup{
	overflow-x: hidden;
	width:90%;
	border-top:0px solid #ccc;
	margin:0px auto 0px auto;
	padding:0 0 0 0;
	display: block;

}

.top-pickup-box{
	display: block;
	width:100%;
	height: 120px;
	position: relative;
	margin: 0 0 9px 0;
	padding: 0 0 0 0;
	overflow:hidden;
}

.top-pickup-box:hover{
	opacity: 0.8;
}

.top-pickup-box img{
	width:100%;
}

.top-pickup-box a img:hover{
	opacity: 1;
}
.top-pickup-box p{
	width:100%;
	font-size:18px;
	font-weight: 500;
	line-height: 1.2;
	color: #fff;
	position: absolute;
	z-index: 30;
	top: 45%;
	left: 50%;
	transform: translate(-50%,-50%);
}

.top-pickup-box p span{
	display: block;
	margin: 6px 0 0 0;
	font-size:15px;
	font-family: 'Oswald', sans-serif;
	font-weight: 500;
	letter-spacing: 0.25em;
	color:#f29600;
}




/*======================================

	delivery-list
	
========================================*/

.top-works{
	width:90%;
	border-top:0px solid #ccc;
	margin:45px auto 0px auto;
	padding:0 0 0 0;
	text-align: left;
}

#delivery-list{
	width:100%;
	border-top:0px solid #ccc;
	margin:30px 0 0 0;
	padding:0 0 0 0;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	background: transparent;
	justify-content: space-between;
	}

.delivery-list-box{
	width:31%;
	border-top:0px solid #ccc;
	margin:0 0 24px 0;
	padding:0 0 0 0;
	text-align: left;
}

.delivery-list-box img{
	width:100%;
	height:auto;
}


.customer{
	font-size:13px;
	font-weight: bold;
	line-height: 1.5;
	margin: 6px 0 0px 0;
	padding: 0px 0px 0 0;
	border-top:0px solid #ddd;
}

.title{
	font-size:11px;
	line-height: 1.5;
	margin: 6px 0 9px 0;
	word-wrap: break-word;
}

.how{
	font-size:13px;
	line-height: 1.5;
	margin: 0px 0 9px 0;
	padding: 0px 0px 9px 0;
	border-bottom:1px solid #999;
}

.note{
	font-size:11px;
	line-height: 1.5;
	margin: 0px 0 0px 0;
	padding: 9px 0px 9px 0;
	border-top:1px solid #999;
}






/*==========================================

	top-news
 
===========================================*/

.top-news{
	width:90%;
	border-top:0px solid #ccc;
	margin:15px auto 0px auto;
	padding:0 0 0 0;
	text-align: left;
}

.news-list{
	width:100%;
	border-top:1px solid #ddd;
	text-align: left;
	margin:30px auto 0px auto;
}

.news-list-box{
	width:100%;
	border-bottom:1px solid #ddd;
	padding:15px 0 15px 0;
}

.news-date{
	width:110px;
	font-size:14px;
	float:left;
	padding:0 0 0 20px;
}
.news-cat{
	width:100px;
	float:left;
	padding: 4px;
}
.news-cat span{
	display:inline-block;
	font-size:12px;
	background: #333;
	color:#fff;
	padding:2px 6px 2px 6px ;
	margin: 0 0 0 0;
	vertical-align: top;
}
.news-text{
	width:100%;
	font-size:14px;
	line-height: 1.8;
	float:left;
	padding:0 20px 0 20px;
}



/*==========================================

	calendar
 
===========================================*/
.top-calendar{
	width:90%;
	margin: 60px auto 60px auto;
	padding:0px;
	text-align: left;
	}

.calendar-wrap{
	width:100%;
	margin: 30px auto 0 auto;
	padding:0 0 0 0;
	text-align: left;
	display: block;
	flex-wrap: wrap;
	}


.calendar-col{
	width:90%;
	margin: 0 auto;
	text-align: center;
	}

.calendar-col p{
	font-size:14px;
	text-align: left;
	}
	
.calendartable{
	margin:0 0 20px 0;
	border-collapse: collapse;
	}
.calendartable caption{
	background: #333333;
	color:#fff;
	padding:8px;	
	}

.calendartable td,.calendartable th{
	border:1px solid #333;
	padding:6px 10px 6px 10px;
	font-size:16px;
	line-height: 16px;
	text-align: center;
	}






}/*//end  min-width: 481px ///////////////////////*/











@media only screen and (min-width: 481px) {





.black-bg{
	background: #000;
height:100vh;
background: #ddd;
}

.loader{
	height: 100vh;
	position: relative;
	width:100%;
}
.loader__img {
	width:100%;
	height: 100vh;
	position: relative;
	width:100%;
}
.loader__img img {
	position:absolute;
	width:300px;
	height:auto;
	top: 50%;
	left: 50%;
	transform: translate( -50%,-50%);
}

.main{

min-width: 1040px;
padding: 0 40px 0 40px;
position:relative;
width:100%;
overflow:hidden;
margin: 0 0 0px 0;
height:100vh;
z-index: 10;
background: #000;
border: 15px solid #fff;
}



.main-inner{
	width:450px;
	padding: 0 0px 0 0px;
	height:auto;
	position:absolute;
	top: 48%;
	left: 50%;
	transform: translate(-50%,-50%);
	margin:auto;
	z-index: 30;
	text-align: center;
}

.main-inner h2{
	padding:0;
	margin: 0px auto;
	line-height: 1;
	font-size: 36px;
	font-weight: 500;
	color:#fff;
	}
.main-inner h2 span{
	display: block;
	padding:0;
	margin: 15px auto 0 auto;;
	line-height: 1;
	font-size: 18px;
	letter-spacing: 0.20em;
	font-family: 'Oswald', sans-serif;
	color:#f29600;
	}




.mainVisual__scroll{

	display:flex;
	position:absolute;
	bottom:45px;
	transform-origin:center top;
 	transform:rotate(90deg);
	left:calc(50% - 50px);
	width: 150px;
	margin: auto;
	}
	
	.mainVisual__scrollTxt{
	margin-right:3px;
	color:#fff;
	font-size:13px;
	line-height: 1;
	font-weight: 500;
	letter-spacing:.1em;
	opacity: 1;
	margin: 18px 0 0 0;
	}
	.mainVisual__scrollLine{
	position:relative;
	top:27px;
	width:120px;
	height:1px;
	background:#fff;
	}
	.mainVisual__scrollLine:after{
	display:block;
	position:absolute;
	top:-2px;
	left:0;
	width:15px;
	height:5px;

	background:#fff;
	-webkit-animation:scroll 2s linear infinite;
	animation:scroll 2s linear infinite;
	content:'';
	}


/* ボタンの大きさと位置をここで指定 */
.btn__box {
    position: relative;
    width: 1px;
    height: 150px;
    line-height: 200px;
    overflow: hidden;
    margin: 10px auto 0px auto;
    border-right: 0px solid #777;
	background: transparent;
}


/* 線(ボーダー)のスタイル 共通 */
.btn__box:before,
.btn__box:after
 {
    content: '';
    position: absolute;
    background: #fff; /*線の色*/
}
/* 右のボーダー */
.btn__box:after {
    right: 0px;
    width: 1px;
    height: 100px;
}





@keyframes topAnim {
    0% {top:-120px;}
    100% {top:120px;}
}








/*======================================

	top-common
	
========================================*/
section.top-wrapper{
	padding: 0 0 0 0;
	margin: 0 0 20px 0;
	min-width: 1080px;
	text-align: center;
	overflow-x: hidden;
	
}

.top-wrapper-inner{
	padding: 0 0 0 0;
	margin: 0 auto 0px auto 0;
	width: 1000px;
	text-align: center;
}

.top-h2{
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	font-size:21px;
	padding: 0 0 0 0;
	margin: 0 0 30px 0;
}
.top-h2 span{
	display: block;
	font-size:14px;
	font-weight: 500;
	padding: 0 0 0 0;
	margin: 3px 0 30px 0;
	color:#898989;
}


.head-lead{
	width:100%;
	margin: 0 0 0px 0;
	text-align: left;
}



.lead{
	font-size:18px;
	font-weight: 500;
	line-height: 1.8;
	margin: 0 0 12px 0;
	padding: 0 0 0 0;
}

.lead-h3{
	font-size:27px;
	font-weight: 500;
	line-height: 1.5;
	padding: 0 0 0 0;
	margin: 0 0 18px 0;
}

.lead-h3 span{
	display: block;
	color:#f29600;
	font-size:16px;
	line-height: 1.5;
	font-family: 'Oswald', sans-serif;
	font-weight: 500;
	letter-spacing: 0.25em;
	padding: 0 0 0 0;
	margin: 0 0 0px 0;
}


/*======================================

	top-banner
	
========================================*/


#top-banner{
	width:100%;
	border-top:0px solid #ccc;
	margin:30px auto 90px auto;
	padding:0 0 0 0;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	background: transparent;
	}

.top-banner-box{
	margin: 0 8px 0 8px;
}

.top-banner-box img{
	height: 150px;
}




/*======================================

	top-pickup
	
========================================*/


.top-film{
	width:1000px;
	border-top:0px solid #ccc;
	margin:0px auto 45px auto;
	padding:0 0 0 0;
	display: flex;
	justify-content: space-between;
	background: transparent;
	overflow-x: hidden;
}

.top-film-left{
	width:340px;
	border-top:0px solid #ccc;
	margin:0px 0px 0px 0px;
	padding:0 0 0 0;
	text-align: left;
}
.top-film-right{
	width:600px;
	border-top:0px solid #ccc;
	margin:0px 0px 0px 0px;
	padding:0 0 0 0;
	text-align: left;
}
.top-film-right img{
	width:100%;
}


.top-coating{
	width:1000px;
	border-top:0px solid #ccc;
	margin:60px auto 60px auto;
	padding:0 0 0 0;
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
	background: transparent;
	overflow-x: hidden;
}

.top-coating-right{
	width:340px;
	border-top:0px solid #ccc;
	margin:0px 0px 0px 0px;
	padding:0 0 0 0;
	text-align: left;
}

.top-coating-left{
	width:600px;
	border-top:0px solid #ccc;
	margin:0px 0px 0px 0px;
	padding:0 0 0 0;
	text-align: left;
}
.top-coating-left img{
	width:100%;
}



a.more{
	display: block;
	width:150px;
	height: 45px;
	text-align: center;
	color:#fff;
	border-radius: 45px;
	padding: 10px 0 0 10px;
	margin: 18px 0 0 0;
	font-size: 15px;
	background: #000 url(../i_top/anchor_wh.png) no-repeat 22px center ;
	background-size:15px auto;
}

a.more:hover{
	background: #f29600 url(../i_top/anchor_wh.png) no-repeat 22px center ;
	background-size:18px auto;
}





.top-xpel{
	width:1000px;
	border-top:0px solid #ccc;
	margin:0px auto 45px auto;
	padding:0 0 0 0;
	display: flex;
	justify-content: space-between;
	background: transparent;
	overflow-x: hidden;
}

.top-xpel-left{
	width:220px;
	border-top:0px solid #ccc;
	margin:0px 0px 0px 0px;
	padding:0 0 0 0;
	text-align: left;
}
.top-xpel-right{
	width:680px;
	border-top:0px solid #ccc;
	margin:0px 0px 0px 0px;
	padding:0 0 0 0;
	text-align: left;
}





/*======================================

	top-pickup
	
========================================*/


.top-pickup{
	overflow-x: hidden;
	width:1000px;
	border-top:0px solid #ccc;
	margin:0px auto 0px auto;
	padding:0 0 0 0;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	background: transparent;
}

.top-pickup-box{
	width:32%;
	position: relative;
}

.top-pickup-box:hover{
	opacity: 0.8;
}

.top-pickup-box img{
	width:100%;
}

.top-pickup-box a img:hover{
	opacity: 1;
}
.top-pickup-box p{
	width:100%;
	font-size:18px;
	font-weight: 500;
	line-height: 1.2;
	color: #fff;
	position: absolute;
	z-index: 30;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

.top-pickup-box p span{
	display: block;
	margin: 6px 0 0 0;
	font-size:20px;
	font-family: 'Oswald', sans-serif;
	font-weight: 500;
	letter-spacing: 0.25em;
	color:#f29600;
}




/*======================================

	delivery-list
	
========================================*/

.top-works{
	width:1000px;
	border-top:0px solid #ccc;
	margin:45px auto 0px auto;
	padding:0 0 0 0;
}

#delivery-list{
	width:100%;
	border-top:0px solid #ccc;
	margin:30px 0 0 0;
	padding:0 0 0 0;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	background: transparent;
	justify-content: space-between;
	}

.delivery-list-box{
	width:140px;
	border-top:0px solid #ccc;
	margin:0 0 0 0;
	padding:0 0 0 0;
	text-align: left;
}

.delivery-list-box img{
	width:100%;
	height:auto;
}


.customer{
	font-size:13px;
	font-weight: bold;
	line-height: 1.5;
	margin: 6px 0 0px 0;
	padding: 0px 0px 0 0;
	border-top:0px solid #ddd;
}

.title{
	font-size:11px;
	line-height: 1.5;
	margin: 6px 0 9px 0;
	word-wrap: break-word;
}

.how{
	font-size:13px;
	line-height: 1.5;
	margin: 0px 0 9px 0;
	padding: 0px 0px 9px 0;
	border-bottom:1px solid #999;
}

.note{
	font-size:11px;
	line-height: 1.5;
	margin: 0px 0 0px 0;
	padding: 9px 0px 9px 0;
	border-top:1px solid #999;
}






/*==========================================

	top-news
 
===========================================*/

.top-news{
	width:1000px;
	border-top:0px solid #ccc;
	margin:45px auto 0px auto;
	padding:0 0 0 0;
}

.news-list{
	width:100%;
	border-top:1px solid #ddd;
	text-align: left;
	margin:30px auto 0px auto;
}

.news-list-box{
	width:100%;
	border-bottom:1px solid #ddd;
	padding:15px 0 15px 0;
}

.news-date{
	width:110px;
	font-size:14px;
	float:left;
	padding:0 0 0 20px;
}
.news-cat{
	width:100px;
	float:left;
	padding: 4px;
}
.news-cat span{
	display:inline-block;
	font-size:12px;
	background: #333;
	color:#fff;
	padding:2px 6px 2px 6px ;
	margin: 0 0 0 0;
	vertical-align: top;
}
.news-text{
	width:750px;
	font-size:14px;
	line-height: 1.8;
	float:left;
	padding:0 20px 0 0px;
}



/*==========================================

	calendar
 
===========================================*/
.top-calendar{
	width:1000px;
	margin: 60px auto 20px auto;
	padding:0 0 0 0;
	}

.calendar-wrap{
	width:100%;
	margin: 30px 0 0 0;
	padding:0 0 0 0;
	text-align: left;
	display: flex;
	justify-content: space-between;
	}


.calendar-col{
	width:300px;
	}

.calendar-col p{
	font-size:14px;
	text-align: left;
	}
	
.calendartable{
	margin:0 0 20px 0;
	border-collapse: collapse;
	}
.calendartable caption{
	background: #333333;
	color:#fff;
	padding:8px;	
	}

.calendartable td,.calendartable th{
	border:1px solid #333;
	padding:6px 10px 6px 10px;
	font-size:16px;
	line-height: 16px;
	text-align: center;
	}










}/*//end  min-width: 769px ///////////////////////*/


@-webkit-keyframes scroll{0%{left:0;opacity:1}80%{opacity:1}100%{left:100%;opacity:0}}
@keyframes scroll{0%{left:0;opacity:1}80%{opacity:1}100%{left:100%;opacity:0}}