@charset "UTF-8";
/* CSS Document */



@keyframes anim {
  0% {
  transform: translateX(-900px);
  }

  100% {
  transform: translateX(0px);
  }
}


@keyframes anim2 {
  0% {
  transform: translateX(900px);
  }

  100% {
  transform: translateX(0px);
  }
}

#fs .feature_item01{ animation: anim 1s forwards;}
#fs .feature_item02{ animation: anim2 1.5s forwards;}
#fs .feature_item03{ animation: anim 1s forwards;}
#fs .feature_item04{ animation: anim2 1.5s forwards;}

/*PC*/
@media print, screen and (min-width: 769px) {

.jp_tit{
line-height: 1.2em;
letter-spacing: -0.06em;
margin: 0 0 60px;
text-align: left;
font-size: 110px;}
    
    

/*mv
---------------------------------*/
.section01 {
position: relative;
height: 100vh;
margin: 0 auto;
background: #FFF;
}

.section01 .section01_inner {
position: relative;
height: 100%;
min-width: 980px;
}

.section01_inner .move {
overflow: hidden;
position: relative;
width: 100%;
height: 100%;
margin: 0 auto;
z-index: 1;
}

.section01_inner .move video {
position: absolute;
top: 50%;
left: 50%;
object-fit: cover;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
}


.read_tit_wrap {
position: absolute;
bottom: 10%;
left: 42%;
z-index: 5;
width: 1200px;
margin-left: -450px;
}

.read_txt2 {
font-size: 50px;
line-height: 1.3;
position: relative;
font-weight: 700;
}

.read_txt2 .top_big{
display: block;
text-align: center;
font-size: 110px;
color: #f18700;
margin-bottom: 20px;}
    



/*about
---------------------------------*/
#about .about_wrap{
background: url("../images/index/sec01_img01.jpg") center 100px no-repeat #FFFFFF;
background-size:cover;
width: 100%;
min-width: 980px;
margin: 0 auto;
padding: 200px 0;
box-sizing: border-box;
position: relative;
}

#about .txt_box{
width: 100%;
height: 800px;
}

#about .button_box{
position: absolute;
top: 46%;
width: 270px}


/*thought
---------------------------------*/
#thought .thought_wrap{
background: url("../images/index/sec02_img01.png") center 500px no-repeat #f18700;
background-size:100% auto;
width: 100%;
min-width: 980px;
margin: 0 auto;
padding: 250px 0 350px;
box-sizing: border-box;
position: relative;
overflow: hidden;
}

#thought .thought_wrap::before{
content: "";
position: absolute;
top: 0;
right: 0;
background: url("../images/index/logo_w.png") 0 0 no-repeat;
background-size: cover;
width: 800px;
height: 168px;
opacity: 0.5;
}

#thought .txt_box{
width: 90%;
height: 800px;
}

#thought .button_box{position: absolute; top: 53%; width: 230px;}
#thought .button_text{color: #000;}
    
#thought .thought_txt{text-shadow: #f18700 1px 0 13px;}
    

    
/*fs
---------------------------------*/
#fs .fs_wrap{
background:url("../images/index/fs_bg.jpg") center bottom no-repeat;
background-size: 100% auto;
width: 100%;
min-width: 980px;
margin: 0 auto;
padding: 200px 0 60%;
box-sizing: border-box;
position: relative;
overflow: hidden;
}

#fs .fs_wrap::before{
content: "";
position: absolute;
top: 0;
right: 0;
background: url("../images/index/logo_w.png") 0 0 no-repeat;
background-size: cover;
width: 800px;
height: 168px;
opacity: 0.5;
}

#fs .txt_box{
width: 65%;
margin: 0 0 60px;
}

#fs .fs_list_wrap {
width: 100%;
padding: 0;
margin: 0;
}

#fs .fs_list_wrap li{
display: flex;
flex-wrap: wrap;
justify-content: center;
box-sizing: border-box;
border-radius: 10px;
align-items: center;
margin: 0 0 30px;
display: block;
}

#fs .fs_list_wrap li a{
display: block;
padding: 50px;
text-align: center;
color: #f18700;
}

#fs .fs_list_wrap li:hover{
transition: 0.3s;
}
        

#fs .fs_list_wrap li .list_item h4:hover{
font-size: 170px;
line-height: 1;
}
    
    
#fs .fs_list_wrap li .img{
width: 50%;
position: relative;
}

#fs .fs_list_wrap li .txt{
width: 46%;
position: relative;
}

#fs .fs_list_wrap li .list_item h4{
font-size: 170px;
line-height: 1;
letter-spacing: 20px;
}

#fs .fs_list_wrap li .txt p{
font-size: 20px;
font-weight: 600;
line-height: 1.4;
}

    
    
    
/*policy
---------------------------------*/
#policy .policy_wrap{
background: #FFF;
width: 100%;
min-width: 980px;
margin: 0 auto;
padding: 200px 0;
box-sizing: border-box;
position: relative;
overflow: hidden;
}

#policy .policy_wrap::before{
content: "";
position: absolute;
top: 0;
right: 0;
border-right: 130vw solid #f18700;  /* 好みで高さ色を変えてください */ 
border-bottom: 130vw solid #f18700;  /* 好みで高さ色を変えてください */ 
border-left: 130vw solid transparent;
border-top: 130vw solid transparent;
z-index: 0;
}

#policy .policy_wrap::after{
content: "";
position: absolute;
bottom: 0;
right: -70px;
background: url("../images/index/logo_w.png") 0 0 no-repeat;
background-size: cover;
width: 800px;
height: 168px;
opacity: 0.5;
/*transform: rotate(-90deg);*/
}

#policy .policy_box{
width: 800px;
margin: 0 auto;
position: relative;
z-index: 2;
}

#policy .button_box{
position: absolute;
bottom: 5%;
right: 50%;
width: 230px;
}

/*products
---------------------------------*/
#products .products_wrap{
background:url("../images/index/pd_bg.jpg") center center no-repeat;
background-size:cover;
width: 100%;
min-width: 980px;
margin: 0 auto;
padding: 200px 0;
box-sizing: border-box;
position: relative;
overflow: hidden;
}

#products .products_box{
width: 100%;
margin: 0 auto;
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}

#products .products_box_txt{
width: 50%;
}

#products .products_box_txt h4{
width: 80%;
margin: 0 0 30px;
}

#products .products_box_txt p{
font-size: 20px;
font-weight: 500;
line-height: 1.6;
}

#products .products_box_img{
width: 40%;
}

#products .button_box{
position: absolute;
bottom: 23%;
width: 230px;
}
    
#products .button_text{color: #fff;}



/*promotion_mv
---------------------------------*/

#promotion{position: relative; overflow: hidden; background: #000;}

#promotion .pd3{padding: 100px 0;}


#promotion::after {
   content: "";
    position: absolute;
    bottom: 36%;
    left: -320px;
    background: url("../images/index/logo_w.png") 0 0 no-repeat;
    background-size: auto;
    background-size: auto;
    background-size: cover;
    width: 800px;
    height: 168px;
    opacity: 0.5;
    transform: rotate(90deg);
  }


#promotion .jp_tit{color: #fff;}

#promotion .en_tit{font-size: 35px; line-height: 1; margin: 0 0 30px; text-align: center; letter-spacing: 1px; position: relative; z-index: 1;}


/*全て共通：hideエリアをはじめは非表示*/
#promotion .hide-area{
	display: none;
}

/*全て共通：モーダルのボタンの色を変更したい場合*/
#promotion .modaal-close:after, 
#promotion .modaal-close:before{background:#ccc;	}

.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before{
	background:#666;
}

/*確認を促すモーダル：タイトルの色を変更したい場合*/
#modaal-title{
	font-size:1.2rem;
	text-align: center;
	margin: 0 0 20px 0;
}

/*動画表示のモーダル：余白を変更したい場合*/
.modaal-video .modaal-inner-wrapper{
	padding:0;
    background: #4b412d;
}

.modaal-noscroll{background: #4b412d;}


#promotion .promotion_mv video{filter: brightness(.5);}
#promotion .promotion_mv{text-align: center; z-index: 1; position: relative;  position: relative;}
    
#promotion .promotion_mv .promo_btn{position: absolute; width: 150px; height: 150px;  top: 45%;left: 50%;transform: translate(-50%, -50%);-webkit-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);}


/*sustainability
---------------------------------*/
#sustainability .sustainability_wrap{
background:url("../images/index/sustainability_img.png") center bottom no-repeat #FFFFFF;
background-size: 100% auto;
width: 100%;
min-width: 980px;
margin: 0 auto;
padding: 200px 0 500px;
box-sizing: border-box;
position: relative;
overflow: hidden;
}

#sustainability .txt_box{position: relative;}

#sustainability .button_box{
position: absolute;
bottom: -57%;
left: 0%;
width: 230px;
}


/*faq
---------------------------------*/
#faq .faq_wrap{
background:#f18700;
background-size: 100% auto;
width: 100%;
min-width: 980px;
margin: 0 auto;
padding: 200px 0 200px;
box-sizing: border-box;
position: relative;
overflow: hidden;
}


.faq_list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 80px 0 0;
}

.faq_list li{
width: 48%;
position: relative;
padding-bottom: 30px;
box-sizing: border-box;
border-bottom: 1px solid #FFFFFF;
margin-bottom: 30px;
}

.faq_list li dl{
color: #FFF;
}

.faq_list li dl dt{
position: relative;
padding-left: 30px;
font-weight: 600;
}

.faq_list li dl dt::before{
content: "Q";
position: absolute;
top: -5px;
left: 0;
font-size: 1.2em;
font-weight: 600;
}

.faq_list li dl dd{
position: relative;
padding-left: 30px;
}

.faq_list li dl dd::before{
content: "A";
position: absolute;
top: -5px;
left: 0;
font-size: 1.2em;
font-weight: 600;
}

}


/*sp*/
@media only screen and (max-width: 768px) {

/*mv
---------------------------------*/
.section01 {
position: relative;
height: 100vh;
margin: 0 auto;
background: #FFF;
}

.section01 .section01_inner {
position: relative;
height: 100%;
}

.section01_inner .move {
overflow: hidden;
position: relative;
width: 100%;
height: 100%;
margin: 0 auto;
z-index: 1;
}

.section01_inner .move video {
position: absolute;
top: 50%;
left: 50%;
object-fit: cover;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
}


.read_tit_wrap {
position: absolute;
bottom: 10%;
left: 3%;
z-index: 5;
width: 90%;
}

.read_txt2 {
font-size: 20px;
line-height: 1.2;
position: relative;
font-weight: 700;
}


.read_txt2 .top_big{
display: block;
text-align: left;
font-size: 50px;
color: #f18700;
margin-bottom: 20px;
line-height: 1.2;}
    
    
.com_p_img {
/*background: #000;
width: 100%;
height: 100%;
position: absolute;
bottom: 0%;
left: 0;
opacity: 0.35;
z-index: 3;*/
}



/*about
---------------------------------*/
#about .about_wrap{
background: url("../images/index/sec01_img01.jpg") center 100px no-repeat #FFFFFF;
background-size:cover;
width: 100%;
margin: 0 auto;
padding: 80px 0;
box-sizing: border-box;
position: relative;
}

#about .txt_box{
width: 100%;
height: 400px;
box-sizing: border-box;
}



/*thought
---------------------------------*/
#thought .thought_wrap{
background: url("../images/index/sec02_img01.png") center 300px no-repeat #f18700;
background-size:100% auto;
width: 100%;
margin: 0 auto;
padding: 80px 0;
box-sizing: border-box;
position: relative;
overflow: hidden;
}

#thought .thought_wrap::before{
content: "";
position: absolute;
top: 0;
right: 0;
background: url("../images/index/logo_w.png") 0 0 no-repeat;
background-size: cover;
width: 40%;
height: 80px;
opacity: 0.5;
}

#thought .txt_box{
width: 100%;
height: 400px;
box-sizing: border-box;
}


/*fs
---------------------------------*/
#fs .fs_wrap{
background:url("../images/index/fs_bg.jpg") center bottom no-repeat;
background-size: 100% auto;
width: 100%;
margin: 0 auto;
padding: 150px 0 200px;
box-sizing: border-box;
position: relative;
overflow: hidden;
}

#fs .fs_wrap::before{
content: "";
position: absolute;
top: 0;
right: 0;
background: url("../images/index/logo_w.png") 0 0 no-repeat;
background-size: cover;
width: 40%;
height: 80px;
opacity: 0.5;
}

#fs .txt_box{
width: 100%;
margin: 0 0 60px;
}

#fs .fs_list_wrap {
width: 100%;
padding: 0;
margin: 0;
}

#fs .fs_list_wrap li{
box-sizing: border-box;
border-radius: 10px;
align-items: center;
margin: 0 0 30px;
display: block;
}
    
#fs .fs_list_wrap li a{
display: block;
padding: 30px;
text-align: center;
    }

#fs .fs_list_wrap li .img{
width: 100%;
position: relative;
}

#fs .fs_list_wrap li .txt{
width: 96%;
position: relative;
margin: 10px auto 0;
}

#fs .fs_list_wrap li h4{
color: #f18700;
font-size: 26px;
line-height: 1;
}

#fs .fs_list_wrap li .txt p{
font-size: 18px;
font-weight: 600;
line-height: 1.4;
}


/*promotion
---------------------------------*/ 
    


/*promotion_mv
---------------------------------*/

#promotion{position: relative; overflow: hidden; background: #000;}

#promotion .pd3{padding: 50px 0;}



#promotion::after {
content: "";
    position: absolute;
    bottom: 50px;
    left: -160px;
    background: url("../images/index/logo_w.png") 0 0 no-repeat;
    background-size: auto;
    background-size: auto;
    background-size: auto;
    background-size: auto;
    background-size: contain;
    width: 250px;
    height: 168px;
    opacity: 0.5;
    transform: rotate(90deg);
  }

#promotion .jp_tit{color: #fff;}

#promotion .en_tit{font-size: 25px; line-height: 1; margin: 0 0 30px; text-align: center; letter-spacing: 1px; position: relative; z-index: 1;}


/*全て共通：hideエリアをはじめは非表示*/
#promotion .hide-area{
	display: none;
}

/*全て共通：モーダルのボタンの色を変更したい場合*/
#promotion .modaal-close:after, 
#promotion .modaal-close:before{background:#ccc;	}

.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before{
	background:#666;
}

/*確認を促すモーダル：タイトルの色を変更したい場合*/
#modaal-title{
	font-size:1.2rem;
	text-align: center;
	margin: 0 0 20px 0;
}

/*動画表示のモーダル：余白を変更したい場合*/
.modaal-video .modaal-inner-wrapper{
	padding:0;
    background: #4b412d;
}

.modaal-noscroll{background: #4b412d;}


#promotion .promotion_mv video{filter: brightness(.5);}
#promotion .promotion_mv{text-align: center;
    position: relative;
    z-index: 100;
    width: 90%;
    margin: 0 auto;}


#promotion .promotion_mv .promo_btn{position: absolute; width: 80px; height: 80px;  top: 45%;left: 50%;transform: translate(-50%, -50%);-webkit-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);}


/*policy
---------------------------------*/
#policy .policy_wrap{
background: #FFF;
width: 100%;
min-width: 100%;
margin: 0 auto;
padding: 80px 0;
box-sizing: border-box;
position: relative;
overflow: hidden;
z-index: 0;
}

#policy .policy_wrap::before{
content: "";
position: absolute;
top: 0;
right: 0;
border-right: 100vw solid #f18700;  /* 好みで高さ色を変えてください */ 
border-bottom: 100vw solid #f18700;  /* 好みで高さ色を変えてください */ 
border-left: 100vw solid transparent;
border-top: 100vw solid transparent;
z-index: -1;
bottom: 0;
}

#policy .policy_wrap::after{
content: "";
position: absolute;
bottom: 0;
right: 0;
background: url("../images/index/logo_w.png") 0 0 no-repeat;
background-size: cover;
width: 40%;
height: 80px;
opacity: 0.5;
}

#policy .policy_box{
width: 100%;
margin: 0 auto;
position: relative;
z-index: 2;
}

#policy .button_box{
position: relative;
bottom: 5%;
right: 0%;
width: 0%;
}

/*products
---------------------------------*/
#products .products_wrap{
background:url("../images/index/pd_bg.jpg") center center no-repeat;
background-size:cover;
width: 100%;
margin: 0 auto;
padding: 80px 0;
box-sizing: border-box;
position: relative;
overflow: hidden;
min-width: 100%;
}

#products .products_box{
width: 100%;
margin: 0 auto;
position: relative;
}

#products .products_box_txt{
width: 100%;
margin: 0 auto 30px;
}

#products .products_box_txt h4{
width: 80%;
margin: 0 0 30px;
}

#products .products_box_txt p{
font-size: 16px;
font-weight: 500;
line-height: 1.4;
}

#products .products_box_img{
width: 40%;
margin: auto;
}
    
#products .button_box{
position: relative;
    }


/*sustainability
---------------------------------*/
#sustainability .sustainability_wrap{
background:url("../images/index/sustainability_img.png") center bottom no-repeat #FFFFFF;
background-size: 100% auto;
width: 100%;
margin: 0 auto;
padding: 80px 0 200px;
box-sizing: border-box;
position: relative;
overflow: hidden;
min-width: 100%;
}

    
#sustainability .button_box{position: relative;}


/*faq
---------------------------------*/
#faq .faq_wrap{
background:#f18700;
background-size: 100% auto;
width: 100%;
margin: 0 auto;
padding: 80px 0;
box-sizing: border-box;
position: relative;
overflow: hidden;
min-width: 100%;
}


.faq_list {
margin: 40px auto 0;
}

.faq_list li{
width: 100%;
position: relative;
padding-bottom: 30px;
box-sizing: border-box;
border-bottom: 1px solid #FFFFFF;
margin-bottom: 30px;
}

.faq_list li dl{
color: #FFF;
}

.faq_list li dl dt{
position: relative;
padding-left: 30px;
font-weight: 600;
}

.faq_list li dl dt::before{
content: "Q";
position: absolute;
top: -5px;
left: 0;
font-size: 1.2em;
font-weight: 600;
}

.faq_list li dl dd{
position: relative;
padding-left: 30px;
}

.faq_list li dl dd::before{
content: "A";
position: absolute;
top: -5px;
left: 0;
font-size: 1.2em;
font-weight: 600;
}


}