@charset "UTF-8";
@import url(reset.css);@import url(font.css);

header { width: 100%; height: 139px; position: absolute; ; top: 0; left: 0; z-index: 3;} 
header h1 { width: 130px; height: 80px; margin: 0 auto; text-align: center;} 
header h1 img { width: 110%; } 
header nav { width: 980px; height: 35px; float: left; letter-spacing: 0.1em; margin-top: 15px;} 
header nav > ul > li { font-size: 20px; float: left; height: 35px; line-height: 35px; position: relative;} 
header nav > ul > li > a { color: #fff; display: block; padding: 0 40px; } 

header nav ul li .lnb{position: absolute; width: 100%; text-align: center; font-size: 18px; padding: 20px 0; display: none;}
header nav ul li .lnb li{height: 50px; line-height: 50px;}
header nav ul li .lnb li a{color: #fff; display: block;}
header .lnb_bg{position: absolute; width: 100%; background: rgba(0,0,0,0.8); top: 0; height: 370px; left: 0; z-index: -1; display: none;}


header .board { width: 470px; height: 35px; float: right; text-align: right; letter-spacing: 0.05em; margin-top: 15px; } 
header .board a { font-size: 15px; color: #ddd; line-height: 35px; padding: 0 30px; position: relative; } 
header .board a:last-child { padding-right: 0; } 
header .board a::before { content: ""; position: absolute; width: 1px; height: 10px; background: #ddd; right: 0; top: 4px; } 
header .board a:last-child::before { display: none;} 


header.on { height: 70px; background: rgba(0,0,0,0.8); position: fixed; z-index: 10;} 
header.on .cb_1600 { width: 100%; } 
header.on h1 { position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; height: auto; } 
header.on h1 img { width: 80%;} 
header.on nav { margin-left: 50px; margin-top: 17px; } 
header.on nav > ul > li > a { padding: 0 20px; } 

header.on .board { margin-right: 50px; margin-top: 18px; } 
header.on .board a { padding: 0 10px; } 
header.on .lnb_bg{height: 225px; top: 70px;}



#visual { width: 100%; max-height: 100vh; overflow: hidden; background: #000; position: fixed; text-align: center; top: 0;} 
#visual video { width: 100%; min-width: 1920px; } 



#section_box{position: relative; z-index: 5; margin-top: 100vh;}
#section_box section { padding: 100px 0;} 
#section1 { background: #000; } 
#section1 h2 { width: 100%; height: 36px; line-height: 46px; text-align: center; font-size: 40px; font-weight: 600; color: #ff5a00; margin-bottom: 80px; letter-spacing: 0.05em; } 
#section1 .cont_box { border: 1px solid #000; width: 100%; height: 520px; } 
#section1 .cont_box img { width: 100%; } 
#section1 .cont_box .big_img { width: 710px; height: 100%; float: left; position: relative; } 
#section1 .cont_box .big_img p { position: absolute; font-size: 20px; color: #fff; bottom: 105px; left: 20px; } 






#section1 .cont_box .small_img { width: 460px; height: 100%; float: right; } 
#section1 .cont_box .small_img li { width: 220px; height: 240px; float: left; margin: 0 18px 18px 0; } 
#section1 .cont_box .small_img li:nth-child(2n) { margin-right: 0; } 

.small_img li figure { width: 220px; height: 144px; overflow: hidden; box-sizing: border-box; border: 1px solid transparent; } 
.small_img li.on figure { border: 1px solid #ff5a00;} 

.small_img li strong { display: block; margin: 10px 0; font-size: 20px; font-weight: normal; color: #fff; } 
.small_img li p { font-size: 15px; color: #9f9f9f; display: inline-block; position: relative; padding: 0 10px 0 0; } 
.small_img li p::before { content: ""; position: absolute; width: 1px; height: 13px; background: #9f9f9f; right: 0; top: 2px; } 

.small_img li span { font-size: 15px; color: #9f9f9f; margin-left: 8px; } 





#section2 { width: 100%; background: url(../images/section2_visual.jpg); background-attachment: fixed;} 
#section2 .text_box { width: 420px; height: 280px; float: left; } 
#section2 .text_box span { font-size: 20px; color: #9f9f9f; letter-spacing: 0.05em; } 
#section2 .text_box strong { font-size: 40px; color: #ff5a00; font-weight: 600; display: block; margin-bottom: 30px; letter-spacing: 0.05em; } 
#section2 .text_box p { font-size: 20px; color: #fff; line-height: 1.6em; margin-bottom: 30px; } 
#section2 .text_box a { color: #fff; font-size: 15px; font-weight: bold; display: inline-block; } 
#section2 .text_box a i { font-size: 20px; float: right; margin-left: 10px; margin-top: -1px; transition: .3s; } 
#section2 .text_box a:hover i { margin-left: 20px; color: #ff5a00; } 

#section2 .brandstory { width: 756px; height: 234px; float: right; margin-top: 25px; } 
#section2 .brandstory li { width: 234px; height: 234px; float: left; margin-right: 27px; } 
#section2 .brandstory li:last-child { margin-right: 0; } 



#section3 {background: #fff; }
#section3 h2 { width: 100%; height: 36px; line-height: 46px; text-align: center; font-size: 40px; font-weight: 600; color: #ff5a00; margin-bottom: 80px; letter-spacing: 0.05em; } 
#section3 .cont_box { width: 100%; height: 520px; } 
#section3 .cont_box ul { width: 100%; height: 120px; margin-bottom: 60px; } 
#section3 .cont_box ul li { float: left; height: 120px; line-height: 120px; text-align: center; font-size: 20px; } 
#section3 .cont_box ul li.thumnail { width: 220px; } 
#section3 .cont_box ul li.thumnail img { margin-top: 5px; } 
#section3 .cont_box ul li.content { width: 750px; text-align: left; padding-left: 50px; box-sizing: border-box; } 
#section3 .cont_box ul li.content strong { font-size: 20px; font-weight: normal; display: block; line-height: 32px; margin-top: 25px; } 
#section3 .cont_box ul li.date { width: 120px; color: #a5a5a5; float: right; font-size: 20px; } 


.view_box { width: 100%; text-align: center; } 
.view_box a { color: #fff; font-size: 15px; line-height: 15px; font-weight: bold; } 
.view_box a i { font-size: 20px; position: relative; left: 15px; top: 3px; transition: .3s; } 
.view_box a:hover i { left: 30px; color: #ff5a00; } 

.black a { color: #000; } 



.quick { position: fixed; width: 30px; z-index: 10; right: 30px; top: 50%; transform: translateY(-50%); cursor: pointer;} 
.quick li { width: 15px; height: 15px; border-radius: 50%; margin-bottom: 15px; background: rgba(255,90,0,0.8); transition: .3s; position: relative;}


.quick li.on:after{content: ""; width: 25px; height: 25px; background: transparent; border-radius: 50%; border: 2px solid rgba(255,90,0,0.8); position: absolute; top: -0.8ex; left: -0.8ex; transition: .3s;}  




/* .quick li a:before { content: ""; position: absolute; width: 60px; height: 60px; background: #ff5a00; left: 0; top: 0; transform: scale(1.02); border-radius: 50%; transition: .2s; } 
.quick li:hover a:before { transform: scale(0); } 

.quick li a:after { content: attr(data-num); position: absolute; z-index: 2; color: #fff; left: 0; top: 0; width: 100%; } 
.quick li:hover a:after { display: none; }  */



footer { width: 100%; height: 200px; background: #000; padding-top: 30px; position: relative;} 
footer .footer_box { width: 900px; height: 30px; font-size: 15px; } 
footer .footer_box a { color: #dedede; padding: 0 15px; position: relative; } 
footer .footer_box a:before { content: ""; position: absolute; width: 1px; height: 12px; background: #dedede; right: 0; top: 3px; } 
footer .footer_box a:last-child::before { display: none; } 

footer ul.address { width: 440px; height: 90px; color: #9e9e9e; font-size: 15px; float: left; margin-top: 25px; } 
footer ul.address li { float: left; padding: 0 15px; position: relative; margin-bottom: 4px; } 
footer ul.address li:last-child { margin-top: 20px; } 
footer ul.address li:nth-child(1)::before,
footer ul.address li:nth-child(4)::before { content: ""; position: absolute; width: 1px; height: 12px; background: #9e9e9e; right: 0; top: 3px; } 

footer .sns_box { width: 150px; height: 35px; float: right; font-size: 30px; text-align: center; } 
footer .sns_box a { color: #dedede; padding: 0 8px; } 
footer .sns_box a.site { font-size: 15px; font-weight: bold; letter-spacing: 0.1em; display: block; margin-top: 20px; } 
footer .sns_box a.site i { font-size: 20px; position: relative; top: 2px; left: 5px; } 


/* sub page */

#visual_sub { width: 100%; height: 370px; position: relative; background: url(../images/visual_sub.jpg) no-repeat center; background-size: cover; } 
#visual_sub .text_box { position: absolute; left: 50%; transform: translateX(-50%); top: 180px; z-index: 1; text-align: center; letter-spacing: 0.2em; line-height: 3em; } 
#visual_sub .text_box p { font-size: 20px; color: #9e9e9e; font-weight: bold; } 
#visual_sub .text_box em { color: #fff; font-style: normal; font-size: 40px; font-weight: bold; } 


#section_sub { padding-bottom: 100px; position: relative;} 
.bread { width: 100%; padding: 20px 0 50px 0;} 
.bread a { font-size: 15px; padding: 0 5px; font-weight: 500; color: #888; } 
.bread span { font-size: 15px; padding: 0 5px; font-weight: 500; color: #888; } 
.bread i { font-size: 20px; position: relative; top: 3px; color: #888; } 
.bread a.on { color: #ff5a00; } 
.bread a:hover { color: #ff5a00; } 


#section_sub .input_box { float: right; width: 422px; } 
#section_sub .input_box li { float: left; border: 1px solid #e3e3e3; } 
#section_sub .input_box li:first-child { border-right: 0; } 
#section_sub .input_box li.select_box { width: 50px; } 

#section_sub .input_box select { width: 120px; height: 40px; border: none; padding: 0 15px; } 
#section_sub .input_box .search { padding: 0 15px; } 
#section_sub .input_box input { width: 250px; height: 40px; } 

#section_sub .input_box li.select_box { margin-top: 40px; border: 0; float: right; margin-right: 65px; } 
#section_sub .input_box li.select_box select { width: 105px; } 


#section_sub .content_box { margin-bottom: 80px; } 
#section_sub .content_box ul { width: 100%; height: 360px; margin: 0 auto; } 
#section_sub .content_box ul li { width: 210px; height: 360px; float: left; margin-right: 35px; } 
#section_sub .content_box ul li:nth-child(5n) { margin-right: 0; } 

#section_sub .content_box ul li figure { width: 210px; height: 295px; background: #000; } 
#section_sub .content_box ul li figure img{ width: 210px; height: 295px;} 


#section_sub .content_box ul li p { font-size: 18px; display: block; margin-top: 5px; } 
#section_sub .content_box ul li span { font-size: 15px; color: #9f9f9f; margin-top: 3px; display: block; } 


#section_sub .content_box ul.more{display: none;}



.view_more { width: 100%; text-align: center; cursor: pointer;} 
.view_more span{ color: #000; font-size: 15px; line-height: 15px; font-weight: bold; } 
.view_more i { font-size: 20px; position: relative; left: 15px; top: 3px; transition: .3s; } 
.view_more span:hover i { left: 30px; color: #ff5a00; } 



/* sub01-1 page */
#section_detail {position: fixed; top: 0; background: rgba(0,0,0,0.8); width: 100%; height: 100vh; left: 0; display: none; z-index: 10;}
#section_detail .cont_detail {width: 1200px; margin: 0 auto; padding: 0 20px; height: 100vh; box-sizing: border-box; background: #000; display: none; position: relative;}
#section_detail article figure{float: left; width: 570px; border: 1px solid rgba(255,255,255,0.2); height: 800px;} 
#section_detail article figure img{width: 100%;}


#section_detail article .tit_box { width: 550px; float: right; margin-bottom: 50px;} 
#section_detail article h2 { font-size: 30px; float: left; line-height: 50px; color: #fff;} 
#section_detail article a { float: right; font-size: 18px; font-weight: bold; padding: 15px 25px; background: #f0f0f0; border-radius: 5px;} 
#section_detail article a i { margin-left: 10px;} 


#section_detail article .list_box { width: 550px; float: right; } 
#section_detail article .list_box li { float: left; } 
#section_detail article .list_box h3 { float: left; width: 105px; color: #ff5a00; margin-bottom: 20px; } 
#section_detail article .list_box p { float: right; width: 440px; font-size: 18px; line-height: 1.4em; color: #f0f0f0;} 
#section_detail article .list_box .slide_box { float: left; width: 100%; height: 360px; margin-top: 45px; } 



.swiper { width: 100%; height: 100%; border: 1px solid rgba(255,255,255,0.2)} 

.swiper-slide { text-align: center; font-size: 18px; display: flex; justify-content: center; align-items: center; } 

.swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; } 


#section_detail article .list_box .slide_box .swiper-button-next,
#section_detail article .list_box .slide_box .swiper-button-prev { color: #ff5a00; } 
#section_detail article .list_box .slide_box .swiper-pagination { color: #fff; } 

#section_detail .btn_close{width: 50px; height: 40px; position: absolute; top: 20px; right: 0; cursor: pointer; padding: 10px 0 0 100px;}
#section_detail .btn_close:before,
#section_detail .btn_close:after{content: ""; position: absolute; width: 30px; height: 2px; background: #fff; transition: .3s;}
#section_detail .btn_close:before{transform: rotate(45deg);}
#section_detail .btn_close:after{transform: rotate(-45deg);}
#section_detail .btn_close:hover:before{transform: rotate(135deg); background: #ff5a00;}
#section_detail .btn_close:hover:after{transform: rotate(45deg); background: #ff5a00;}