@charset "UTF-8";

html,body{
width:100%;
height:100%;
position: relative;
background:#000;
color:#fff;
}

body.fixed {
width: 100%;
height: 100%;
position: fixed;
}

img{ vertical-align:middle; }

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

body{ letter-spacing:0.05em; }

}

*, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}

/*----------------------------------------------------------------------------------------------------------------------mouse_stalker----------*/

#stalker {
pointer-events: none;
position: fixed;
top: -15px;     
left: -15px;    
width: 30px;   
height: 30px;  
/*background: rgba(233,44,0,.75);*/
background: linear-gradient(to bottom right, rgba(255,0,0,0.75), rgba(255,153,0,0.75));
/*border:1px solid #ccc;*/
border-radius: 50%;
transition: transform 0.2s, top, 0.5s, left 0.5s, width .5s, height .5s, background-color .5s;
transition-timing-function: ease-out;
z-index: 999;
opacity: 0;
animation: 2s fadeIn 1s cubic-bezier(0.19, 1, 0.22, 1) forwards;
mix-blend-mode: overlay;
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

#stalker.hov_{
top: -32px; 
left: -32px;
width: 64px;
height: 64px;
transition: .5s;
/*background: rgba(233, 44, 0, .75);*/
background: linear-gradient(to bottom right, rgba(255,0,0,0.75), rgba(255,153,0,0.75));
border:1px solid rgba(233, 44, 0, 0);
}

@media screen and (max-width:1024px){
	
#stalker { display:none; }

}


/*----------------------------------------------------------------------------------------------------------------------header----------*/

header{ 
position:fixed;
top:0;
width: 100%;
z-index:100;
padding:38px 50px 0 50px;
display:flex;
align-items: center;
justify-content: space-between;
}

header .instagram{
width:26px;
height:auto;
}

header .instagram a{
opacity:1;
transition: all 0.5s 0s cubic-bezier(0.23,1,0.32,1);
}

header .instagram a:hover{ opacity:0.5; }

header img{
width:100%;
height:auto;
}

#brand_name{
display:flex;
align-items:center;
}

#brand_name h1{
width:52%;
max-width:300px;
line-height:1;
}

#brand_name h2{
font-size:13px;
line-height:1;
letter-spacing:0.01em;
margin-left:20px;
}


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

header{ padding:35px 40px 0 40px; }

}


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

header{ padding:20px 20px 0 20px; }

#brand_name h1{
width:52%;
max-width:200px;
line-height:1;
}

#brand_name h2{
font-size:12px;
margin-left:12px;
}

}


/*----------------------------------------------------------------------------------------------------------------------#gnav----------*/

#gnav{
position:fixed;
top: 33%;
left:80px;
z-index:100;
font-size:15px;
}

#gnav li{
line-height:1;
margin-bottom:24px;
}

#gnav li a{
color:#fff;
opacity: 1;
position: relative;
transition: all 0.75s cubic-bezier(0.19, 1, 0.22, 1);
letter-spacing: 0.08em;
}

#gnav li a:after{ 
position: absolute;
bottom: -2px;
left: 0;
content: "";
width: 100%;
height: 1px;
background:rgba(255,255,255,0.7);
transform: scale(0, 1);
transform-origin: right top;
transition: transform 0.3s;
}

#gnav li a:hover::after{ 
transform-origin: left top;
transform: scale(1, 1);
}

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

#gnav{ left:60px; }

}

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

#gnav{ 
left:30px;
display: none;
}

}


/*----------------------------------------------------------------------------------------------------------------------.copy_right----------*/

.copy_right{
position:fixed;
bottom:34px;
left:50px;
z-index:100;
font-size:12px;
}

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

.copy_right{
position:absolute;
left:20px;
font-size:10px;
bottom:30px;
}

}

/*----------------------------------------------------------------------------------------------------------------------.btn_contact----------*/

.btn_contact{
width:50px;
height:auto;
position:fixed;
top:50%;
right:0;
z-index:100;
margin-top:-126px;
}

.btn_contact img{
width:100%;
height:auto;
}

.btn_contact a{
opacity:1;
transition: all 0.5s 0s cubic-bezier(0.23,1,0.32,1);
}

.btn_contact a:hover{ opacity:0.5; }


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

.btn_contact{
width:40px;
margin-top:-132px;
}

}


/*----------------------------------------------------------------------------------------------------------------------#main_v----------*/

#wrapper_content{
width:83%;
margin-left:17%;
background:#000928 url('../images/bg_fire_2.jpg') no-repeat center bottom;
background-size: contain;
}

#main_v{ 
position:relative;
width:100%;
}

#video-area{
position: absolute;
z-index: 0;
top:0;
left:0;
overflow: hidden;
width:100%;
height: calc(100%);
border-radius:0 0 0 0;
}

#video {
position: absolute;
z-index: -1;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 177.77777778vh;
height: 56.25vw;
min-height:100%;
min-width: 100%;
}

#main_v .main_copy{
position:absolute;
bottom:140px;
left:10%;
z-index:1;
width:50%;
/*mix-blend-mode: overlay;*/
}

#main_v .main_copy img{ 
width:100%; height:auto;
filter:drop-shadow(0 0 0.75rem rgba(0,40,0,0.8));
}



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

#wrapper_content{
width:100%;
margin-left:0;
}

#main_v .main_copy{
position:absolute;
bottom:100px;
left:8.3%;
width:83.4%;
}

}


/*----------------------------------------------------------------------------------------------------------------------about----------*/

#about{
margin-top:125px;
background: url('../images/bg_fire_1.jpg') no-repeat left bottom;
background-size:40% auto;
}

#about img{
width:100%;
height: auto;
display: block;
}

.main_about{
width:90%;
margin-left:10%;
}

.logo_center{
width:20%;
margin-left: 70%;
margin-top:-56px;
position: relative;
z-index: 100;
}

.txt_about{
margin-left:30%;
width: 60%;
}

.txt_about h2{
font-size:48px;
letter-spacing:0.1em;
line-height:1;
}

.txt_about h3{
margin-top:100px;
font-size:36px;
letter-spacing:0.1em;
line-height: 1.6;
}

.txt_about p{ margin-top:20px; }


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

#about{
margin-top:80px;
background: url('../images/bg_fire_1.jpg') no-repeat left bottom;
background-size:90% auto;
}

.main_about{
width:95%;
margin-left:5%;
}

.logo_center{
width:22%;
margin-left: 68%;
margin-top:-35px;
position: relative;
z-index: 100;
}

.txt_about{
margin-left:10%;
width: 75%;
}

.txt_about h2{
font-size:36px;
}

.txt_about h3{
margin-top:30px;
font-size:24px;
}

}



/*----------------------------------------------------------------------------------------------------------------------gallery----------*/

#gallery{
display: flex;
margin-top: 50px;
width:100%;
}

#gallery img{ 
display: block;
width:100%;
height: auto;
}

#gallery p:nth-child(1){ 
width:40%;
margin-top: 120px;
}

#gallery p:nth-child(2){ 
width:40%;
margin-left:-10%;
margin-top: 225px;
}

#gallery p:nth-child(3){ 
margin-left:5%;
width:25%;
}

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

#gallery{
margin-top: 30px;
}

#gallery p:nth-child(1){ 
width:40%;
margin-top: 30px;
}

#gallery p:nth-child(2){ 
width:40%;
margin-left:-10%;
margin-top: 70px;
}

#gallery p:nth-child(3){ 
margin-left:5%;
width:25%;
}

}



/*----------------------------------------------------------------------------------------------------------------------feature----------*/

#feature{
margin-top:90px;
position: relative;
width:100%;
}

#feature img{
width:100%;
height: auto;
}

#feature .bg_graphic{
position: absolute;
top:0;
right:0;
z-index:0;
width:40%;
overflow-x:hidden;
}

#feature h2{
font-size:48px;
letter-spacing:0.1em;
line-height:1;
padding-top: 200px;
margin-left: 10%;
}

#feature h3{
margin-top:26px;
font-size:36px;
letter-spacing:0.1em;
line-height: 1.6;
margin-left: 10%;
}

#feature .ft_01{
display:flex;
justify-content: space-between;
width:90%;
margin-top:90px;
}

#feature .ft_01 .ph{ width:44.4%; }

#feature .ft_01 .detail{ width:50%; }

#feature .detail span{
position: relative;
font-size:14px;
letter-spacing: 0.1em;
}

#feature .detail span:after{ 
position: absolute;
bottom: -7px;
left: 0;
content: "";
width: 100%;
height: 1px;
background:rgba(255,255,255,0.5);
transform: scale(1, 1);
transform-origin: right top;
transition: transform 0.3s;
}

#feature .detail h4{
margin-top:35px;
font-size:30px;
letter-spacing:0.1em;
line-height: 1.6;
}

#feature .detail p{ margin-top:26px; }

#feature .detail p:last-child{ margin-top:70px; }

#feature ul{
display: flex;
justify-content: space-between;
margin-top: 90px;
}

#feature li{ width:30%; }

#feature li:nth-child(2){ margin-top: 100px;}
#feature li:nth-child(3){ margin-top: 200px;}

#feature li p{
margin-bottom: 30px;
}

#feature li span{
position: relative;
font-size:14px;
letter-spacing: 0.1em;
}

#feature li span:after{
position: absolute;
bottom: -5px;
left: 0;
content: "";
width: 100%;
height: 1px;
background:rgba(255,255,255,0.5);
transform: scale(1, 1);
transform-origin: right top;
transition: transform 0.3s;
}

#feature li h4{
margin-top:15px;
font-size:22px;
letter-spacing:0.1em;
line-height: 1.5;
}


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

#feature{
margin-top:80px;
}

#feature .bg_graphic{
width:50%;
}

#feature h2{
font-size:36px;
padding-top:100px;
}

#feature h3{
margin-top:10px;
font-size:30px;
}

#feature .ft_01{
display:block;
width:100%;
margin-top:30px;
}

#feature .ft_01 .ph{ 
width:100%;
margin-left:0;
margin-bottom:40px;
}

#feature .ft_01 .detail{ 
width:75%;
margin-left: 10%;
}

#feature .detail h4{
margin-top:25px;
font-size:24px;
}

#feature .detail p{ margin-top:20px; }

#feature .detail p:last-child{ margin-top:40px; }

#feature ul{
display: block;
margin-top:60px;
}

#feature li{
width:75%;
margin-left:10%;
}

#feature li:nth-child(2){ margin-top: 50px;}
#feature li:nth-child(3){ margin-top: 50px;}

#feature li p{ margin-bottom:20px; }

}


/*----------------------------------------------------------------------------------------------------------------------spec----------*/

#spec{
margin-top:200px;
position: relative;
width:90%;
margin-left:10%;
}

#spec img{
width:100%;
height: auto;
}

#spec .tit_group{ display: flex; }

#spec .tit_group h2{
font-size:48px;
letter-spacing:0.1em;
line-height:1;
}

#spec .tit_group h3{
font-size:36px;
letter-spacing:0.1em;
line-height:1.6;
margin-left:30px;
}

#spec .main_spec{ 
margin-top: 40px;
position: relative;
}

#spec .main_spec h4{ 
position:absolute;
letter-spacing: 0.07em;
font-size: 28px;
left:25px;
bottom:5px;
}

#spec .txt{ 
margin-top: 40px;
display: flex;
}

#spec .txt p{ width:44%; }

#spec ul{ 
margin-top: 100px;
width:88.8%;
display: flex;
justify-content:space-between;
} 

#spec li{ width:32%; }

#spec li p{ 
margin-top:22px;
font-size:13px;
font-weight:bold;
} 

#spec li h4{ 
font-size:22px;
} 


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

#spec{
margin-top:100px;
width:95%;
margin-left:5%;
}

#spec .tit_group h2{
font-size:36px;
}

#spec .tit_group h3{
font-size:30px;
margin-left:20px;
line-height:1.4;
}

#spec .main_spec{ margin-top: 20px; }

#spec .main_spec h4{ 
font-size: 22px;
}

#spec .txt{ 
margin-top: 30px;
display:block;
}

#spec .txt p{ 
width:90%;
margin-left: 5%;
}

#spec ul{ 
margin-top:0;
width:100%;
display: block;
} 

#spec li{ 
width:80%;
margin-left: 5%;
margin-top:40px;
}

}



/*----------------------------------------------------------------------------------------------------------------------footer----------*/


footer{
border-top:1px solid rgba(255,255,255,0.2);
margin-top: 250px;
}

#contact{
width:80%;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
padding: 150px 0 180px;
}

#contact img{
width:100%;
height: auto;
}

#contact .tit_group{ display: flex; }

#contact .tit_group h2{
font-size:48px;
letter-spacing:0.1em;
line-height:1;
}

#contact .tit_group h3{
font-size:36px;
letter-spacing:0.1em;
line-height:1.6;
margin-left:30px;
}

#contact .read{ 
margin-top:10px;
font-weight: bold;
}

#contact .company{ 
display: flex;
align-items: center;
margin-top: 30px;
padding-top: 20px;
position: relative;
}

#contact .company:before{
content: "";	
background-color:rgba(255,255,255,0.8);
display: block;
height: 1px;
position: absolute;
top: 0;
left: 0;
width: 15px;
}

#contact .company .comp_logo{ 
width:52px;
margin:0 20px 0 30px;
}

#contact .company .name{ 
display:flex;
align-items: center;
}

#contact .btn{ 
width:164px;
height: 164px;
border: 1px solid rgba(255,255,255,0.8);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}

#contact .btn img{ 
width:46px;
height: auto;
}

#contact a .btn { 
background-color: rgba(0,9,40,0);
transition: all 0.5s 0s cubic-bezier(0.23,1,0.32,1);
}

#contact a:hover .btn { 
background-color: rgba(0,9,40,0.8);
}


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

footer{
margin-top: 100px;
}

#contact{
width:80%;
display: block;
padding: 50px 0 80px;
}

#contact .tit_group{ display: block; }

#contact .tit_group h2{
font-size:36px;
}

#contact .tit_group h3{
font-size:30px;
margin-left:0;
margin-top: 10px;
}

#contact .read{ 
margin-top:10px;
}

#contact .company{ 
display: block;
padding-top: 25px;
position: relative;
}

#contact .company .comp_logo{ 
width:50px;
margin:0 15px 0 0;
}

#contact .company .name{ margin-top: 15px; }

#contact .btn{ 
width:130px;
height: 130px;
margin-top: 40px;
margin-left: auto;
margin-right: 10%;
}

}





/*----------------------------------------------------------------------------------------------------------------------共通要素----------*/

.br_pc{ display:inline; }

.br_sp{ display:none; }

.mincho{ font-family: Times, YuMincho, "Yu Mincho", serif; }

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

.br_pc{ display:none; }

.br_sp{ display:inline; }

}



/*----------------------------------------------------------------------------------------------------------------------banner----------*/

#banner{
width:80%;
margin:125px auto 0;
}

#banner img{
width:100%;
height: auto;
display: block;
}

#banner img.bnr_sp{
display: none;
}

#banner a{
opacity: 1;
transition: all 0.5s 0s cubic-bezier(0.23,1,0.32,1);
}

#banner a:hover{
opacity: 0.6;
}

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

#banner{
width:80%;
margin:80px auto 0 5%;
}

#banner img.bnr_pc{
display: none;
}


#banner img.bnr_sp{
display: block;
}

}

/*----------------------------------------------------------------------------------------------------------------------spec_new----------*/

#spec_new{
margin-top:100px;
border-top:1px dotted #666b7e; 
padding-top: 80px;
width:80%;
margin-left:10%;
}

#spec_new img{
width:100%;
height: auto;
}

#spec_new .tit_group h2{
font-size:36px;
letter-spacing:0.1em;
line-height:1;
text-align: center;
}

#spec_new .tit_group h2 span{
text-decoration: underline; 
text-decoration-thickness: 0.35em; /* 太さ */
text-decoration-color: rgba(76, 75, 78, 1);
text-underline-offset: -0.35em; /* 位置*/
text-decoration-skip-ink: none; 
}

#spec_new .tit_group h3{
font-size:16px;
letter-spacing:0.1em;
margin-top: 15px;
line-height:1;
text-align: center;
padding-bottom: 30px;
}

#spec_new ul{ 
margin-top:35px;
width:100%;
display: flex;
justify-content:space-between;
} 

#spec_new li{ 
width:32%;
position: relative;
}

#spec_new li h4{ 
font-size:28px;
letter-spacing:0.1em;
border-bottom: 1px dotted #666b7e; 
}

#spec_new li p{ margin-top: 15px; }

#spec_new li .caption{
position: absolute;
bottom:10px;
left:20px;
font-size: 13px;
font-weight: bold;
}


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

#spec_new{
margin-top:60px;
padding-top: 60px;
width:90%;
margin-left:5%;
}

#spec_new .tit_group h2{
font-size:30px;
line-height:1.2;
text-align: center;
}

#spec_new .tit_group h3{
font-size:14px;
padding-bottom: 0;
}

#spec_new ul{ 
margin-top:50px;
width:80%;
margin-left: 5%;
display: block;
} 

#spec_new li{ 
width:100%;
margin-top:20px;
}

#spec_new li h4{ font-size:24px; }

#spec_new li p{ margin-top: 12px; }

#spec_new li .caption{
left:15px;
font-size: 14px;
}

}