/*@import url('//fonts.googleapis.com/css?family=Inter:700&display=swap');*/

@font-face {
font-family: 'DunlopSans';
src: url(./DunlopSans-BoldIt.woff);
}

/*-----*/
.con01 {
line-height: 1.5em;
text-align: center;
word-spacing: 0.1em;
max-width: 100%;
margin-right: auto;
margin-left: auto; }


.con01 img {
max-width: 100%; }

/*BASIC----------*/

.boxBlk {
color: #fff;
background-color: #000; }
.boxGray {
background-color: #f5f5f5;
}
.boxWh {
color: #000;
background-color: #fff; }
.blue {
color: #09f !important; }

.red {
color: #f36 !important; }
.black {
color: #000 !important;
}

.white {
color: #fff !important;
}

/*-----*/

.hd {
background-color: #1e1e1e;
text-align: left;
position: fixed;
width: 100%;
z-index: 999999; }
.hdWh {
background-color: #fff;
text-align: left;
position: fixed;
width: 100%;
z-index: 999999;
}

/*-----*/



.boxB {
position: relative; 
z-index: 2;
mini-height: 800px; 
background-color: #fff;
background-position: center top;
background-repeat: no-repeat;
background-size: cover;
padding-top: 73px; 
}
.boxBwh {background-color:    #fff;
background-repeat:   no-repeat;
background-position: center top;
mini-height:         800px;
background-size:     cover; }
.boxS {
max-width: 1150px;
margin-right: auto;
margin-left: auto;
padding-top: 50px; }

/*WEARTOP-----*/

.app01 {
position: fixed;
width: 100%;
/*height: 100vh;
background-image: url(img/header_A_1.jpg);
background-size: cover;
background-position: center;*/ }
.PC { }

.SP {
visibility: hidden;
display: none; }

/*
.app01 {
position: fixed;
width: -moz-available; }

.app01 .topImg {
width: 100vw;
margin-left: calc(-50vw + 50%);
max-width: none;
height: auto; }
*/


/*-----*/
.app02B {
position: relative;
margin-bottom: -20px; }


.app02 {
max-width: 100%;
padding-top: 3vh;
padding-bottom: 250px; }


/*PARALLAX-BG-----*/

.paraBg {
background-color: #fff;
position: relative;
z-index: 9998; }

/*-----*/

.app03 {
color: #545353;
max-width: 1000px;
margin-right: auto;
margin-left: auto;
padding-top: 100px;
padding-bottom: 100px; }
.app03U {
margin-bottom: -100px;
display:               grid;
align-items: center;
grid-template-columns: repeat(2, 50%); }
.app03Upara {
text-align: left;
width: 90%;
margin-top: -100px;
margin-right: auto;
margin-left: auto; }
.app03D {
display:               grid;
align-items: center;
grid-template-columns: repeat(2, 50%); }
.app03Dpara {text-align:   left;
margin-top:   100px;
margin-right: auto;
margin-left:  auto;
width:        90%; }
.app03-01 {
font-size:     25px;
font-weight:   bold;
line-height:   125%;
margin-bottom: 5px;
padding-top:   15px; }
/*-----*/
.app04 {
display: grid;
grid-template-columns: repeat(3, 33.3333%);
margin-bottom: 100px;
}
/*-----*/
.app05 {
max-width: 1000px;
margin-right: auto;
margin-bottom: 100px;
display:               grid;
margin-left: auto;
grid-template-columns: repeat(2, 50%); }
/*-----*/
.wearTop05 {
padding-bottom: 65px; }

.wt05-01 {
	color: #fff;
	font-size: 1.5em;
	font-weight: bold;
	background-color: #696969;
	max-width: 200px;
	margin-right: auto;
	margin-left: auto;
	padding-top: 10px;
	padding-bottom: 10px;
	display: block; }

/*--------------------------------------------*/
/*@media screen and (max-width:850px){*/


@media screen and (max-width:1000px){
.app01 {
background-position: 0 top; }

}
@media screen and (max-width:900px){

}
@media screen and (max-width:800px){
/*DEPEND ON YOUTUBE WIDTH*/
/*FOR-YOUTUBE-SMARTPHONE----------*/
.video-container {
position: relative;
padding-bottom: 50%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.video-container iframe,  
.video-container object,  
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/*-----*/
.boxB {
padding-top: 9%;
}
.boxS {
width: 90%; }
.cmnTtl span {
display: block; }

/*-----*/
.PC {
visibility: hidden;
display: none; }
.SP {
visibility: visible;
display: block; }
/*-----*/
.app03U {margin-bottom:         50px;
grid-template-columns: repeat(1, 100%); }

.app03Upara {
margin-top:   0px;
margin-bottom: 50px; }

.app03D {
margin-bottom: 50px;
grid-template-columns: repeat(1, 100%); }

.app03Dpara {margin-top:   50px; }

/*-----*/
.app04 {grid-template-columns: repeat(2, 50%); }
/*.app02 {
width: 100%;
padding-bottom: 0px;
padding-left: 0%; }
.app02Bg {
text-align:     center;
background-color: rgba(0, 0, 0, 0.6);
padding: 0 5% 250px; }*/



}

@media screen and (max-width:600px){
.boxB {padding-top: 10%; }
.boxBwh {
padding-top: 0;	 }
.boxS {
padding-top: 20px;
padding-bottom: 20px; }
.cmnTtl {
font-size: 15px; }

/*-----*/
.app05 {grid-template-columns: repeat(1, 100%); }

/*-----*/
.wearTop05 {
padding-top: 0; }
/*-----*/
}
@media screen and (max-width:560px){


}
@media screen and (max-width:400px){
.boxB {
padding-top: 14%; }
/*--------------------------------------------*/
}