@charset "utf-8";
/*--------------------------------------
	copyright : yuyu design.
--------------------------------------*/

@import url(normalize.css);
@import url(../../../_vendor/fontawesome/css/all.min.css);
@import url(../../../_vendor/aos/aos.css);
/*@import url(../../../_vendor/OwlCarousel/assets/owl.carousel.min.css); @import url(../../../_vendor/OwlCarousel/assets/owl.theme.default.css);*/
/*@import url(../../../_vendor/lightGallery/css/lightgallery.min.css);*/
@import url(common_parts.css);
@import url(common.css);


/*
 index
==============================*/

.vertical_text { -ms-writing-mode: tb-rl; writing-mode: vertical-rl; }
#main { background-image: url(../_img/index/bg.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; }

/* mv ----------*/
#mv { position: relative; padding: 10rem 0 5rem; background-color: #E8E8E8; }
#mv::before { position: absolute; z-index: 1; top: 21.5rem; right: 0; content: ""; width: 58%; height: 90%; background-image: url(../_img/index/01_pc.png); background-repeat: no-repeat; background-position: 65% top 10%; background-size: cover; }
#mv .inner { position: relative; z-index: 10; }
#mv h1 { margin-bottom: 4rem; font-size: 4.4rem; font-family: YuGothic, "游ゴシック", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; letter-spacing: 0.3em; }
#mv h1 mark { color: #FFF; background-color: #000; }
#mv h1 mark span { display: inline-block; width: 2rem; }
@media screen and (max-width:1300px) {
	#mv { padding: 16rem 0 5rem; }
}
@media screen and (max-width:896px) { /* iPhone 横 m */
	#mv { padding: calc(143vw - 28vw) 0 50vw; background-color: #E8E8E8; }
	#mv .inner { text-align: left; }
	#mv::before { top: -5px; width: 100%; height: 143vw; background-image: url(../_img/index/01_sp.png); background-position: left 10% top; }
	#mv h1 { margin-bottom: 8vw; margin-left: -4vw; margin-right: -4vw; font-size: 6vw; letter-spacing: 0.4em; }
	#mv .vertical_text_wrap { text-align: center; height: 45rem; }
	#mv .vertical_text { display: inline-block; line-height: 9vw; }
	#mv p { margin: 0 !important; font-size: 3.2vw; }
}

/* secA ----------*/
#secA { padding-top: 20rem; }
@media screen and (max-width:896px) { /* iPhone 横 m */
	#secA { padding-top: 0; }
}

/* lineup ----------*/
#lineup {}
#lineup h2 { position: relative; z-index: 2; margin-bottom: -3rem; line-height: 2; font-size: 3.2rem; }
#lineup h2 mark { padding: 0.5rem; background-color: #FFF; }
#lineup p { color: #FFF; }
#lineup .pw { display: flex; flex-flow: wrap; }
#lineup .pw .p { width: calc((100% - 3rem) / 2); }
#lineup .pw .t { position: relative; margin-left: 2rem; padding-top: 2.5rem; }
#lineup .pw .t::before { position: absolute; top: 0; left: 0; content: ""; width: 11rem; height: 2px; background-color: #FFF; }
#lineup .pw2 { flex-direction: row-reverse; align-items: flex-end; }
#lineup .pw2 .p { margin-left: 3rem; margin-top: -6rem; }
#lineup .pw2 .t { margin-left: 0; text-align: right; }
#lineup .pw2 .t::before { left: auto; right: 0; }
#lineup .pw2 .t p { display: inline-block; }
#lineup .pw3 { padding-top: 13rem; }
#lineup .pw3 .w { text-align: center; }
#lineup .pw3 .p { margin-bottom: 5rem; }
#lineup .pw3 .t { padding-left: 2rem; border-left: solid 2px #FFF; }
@media screen and (max-width:896px) { /* iPhone 横 m */
	#lineup { position: relative; z-index: 10; margin-top: -45vw; }
	#lineup .pw .p { width: 95%; }
	#lineup .pw .t { position: relative; margin-left: 0; }
	#lineup .pw .t::before { display: none; }
	#lineup .pw2 .p { margin-left: 3rem; margin-top: 4rem; }
	#lineup .pw3 { padding-top: 5rem; }
	#lineup .pw3 .t { padding-top: 3rem; }
}

/* factory ----------*/
#factory { position: relative; z-index: 2; padding-top: 25rem; }
#factory h2 { position: absolute; z-index: 2; top: 10rem; right: 0; margin-bottom: -2rem; line-height: 2; font-size: 3.2rem; }
#factory h2 mark { padding: 0.5rem; background-color: #FFF; }
#factory p { margin: 0; color: #FFF; }
#factory .pw1 { display: flex; flex-direction: row-reverse; padding-right: 10rem; }
#factory .pw1 .p { margin-left: 5rem; }
#factory .pw2 { margin-top: 4rem; }
#factory .pw2 .w1 { display: flex; margin-bottom: 2rem; align-items: flex-end; }
#factory .pw2 .w1 span { margin-right: 2rem; } 
#factory .pw2 .w2 { display: flex; align-items: flex-end; }
#factory .pw2 .w2 span { margin-right: 4rem; }
#factory .pw2 .w2 .t { position: relative; padding-top: 2.5rem; }
#factory .pw2 .w2 .t::before { position: absolute; top: 0; left: 0; content: ""; width: 11rem; height: 2px; background-color: #FFF; }
#factory .pw3 { padding-top: 13rem; }
#factory .pw3 .t { position: relative; margin-top: 5rem; padding-top: 2.5rem; text-align: center; }
#factory .pw3 .t::before { position: absolute; top: 0; left: 0; right: 0; content: ""; width: 11rem; height: 2px; margin: auto; background-color: #FFF; }
@media screen and (max-width:896px) { /* iPhone 横 m */
	#factory { padding-top: 15rem; }
	#factory h2 { top: 5rem; }
	#factory .pw1 { display: block; padding-right: 0; text-align: center; }
	#factory .pw1 .p { width: 100%; padding-right: 13rem; padding-left: 2rem; }
	#factory .pw1 .t { margin: auto; margin-top: 4rem; line-height: 8vw; }
	#factory .pw2 .w2 { flex-flow: wrap; }
	#factory .pw2 .w2 .t { width: 100%; margin-top: 4rem; }
	#factory .pw3 { padding: 6rem 3rem 0; }
	#factory .pw3 .t { text-align: left; }
	#factory .pw3 .t::before { left: 0; right: auto; }
}

/* secB ----------*/
#secB { position: relative; }
#secB_bg { position: absolute; z-index: 1; top: 20rem; width: 100%; height: 85%; overflow: hidden; -webkit-transform-origin: right top; transform-origin: right top; -webkit-transform: skew(0, -24deg); transform: skew(0, -24deg); }
#secB_bg span { position: relative; display: block; width: 100%; height: 130%; background-image: url(../_img/index/bg2.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; -webkit-transform-origin: right top; transform-origin: right top; -webkit-transform: skew(0, 24deg); transform: skew(0, 24deg); }
@media screen and (max-width:896px) { /* iPhone 横 m */
	#secB_bg { top: 120rem; height: calc(85% - 60rem); -webkit-transform: skew(0, -6deg); transform: skew(0, -6deg); }
	#secB_bg span { -webkit-transform: skew(0, 6deg); transform: skew(0, 6deg); }
}

/* beginning ----------*/
#beginning { position: relative; z-index: 2; padding-top: 20rem; }
#beginning h2 { position: absolute; z-index: 2; top: 6rem; right: 2rem; margin-bottom: -2rem; line-height: 2; font-size: 3.2rem; }
#beginning h2 mark { padding: 0.5rem; background-color: #FFF; white-space: nowrap; }
#beginning p { margin: 0; color: #FFF; }
#beginning .pw1 { display: flex; flex-direction: row-reverse; align-items: flex-end; }
#beginning .pw1 .t { position: relative; margin-right: 4rem; padding-top: 2.5rem; text-align: right; }
#beginning .pw1 .t::before { position: absolute; top: 0; right: 0; content: ""; width: 11rem; height: 2px; background-color: #FFF; }
#beginning .tw1 { display: inline-block; float: right; margin-right: 12rem; margin-top: 12rem; padding: 4rem 8rem; background-color: #A2A5A4; }
#beginning .tw1 .t1 { float: right; margin-left: 2rem; padding-top: 2em; color: #000; text-indent: -2em; font-weight: 500; }
#beginning .tw1 .t2 { float: right; color: #000; font-weight: 500; }
#beginning .tw3 { display: flex; width: 100%; padding-top: 4rem; }
#beginning .tw3 .t1 { margin-left: -8rem; padding: 4rem 12rem; background-color: #A2A5A4; }
#beginning .tw3 .t1 p { color: #000; font-weight: 500; }
#beginning .tw3 .pw2 { margin-top: 10rem; margin-left: -2rem; }
#beginning .tw3 .pw2 .t { margin-top: 3rem; padding-top: 6rem; padding-right: 2rem; border-right: solid 2px #000; color: #000; text-align: right; font-weight: 500; }
#beginning .tw4 { display: flex; padding-top: 4rem; }
#beginning .tw4 .pw3 { margin-right: 2rem; }
#beginning .tw4 .pw3 .t { margin-top: 3rem; padding-top: 6rem; padding-left: 2rem; border-left: solid 2px #000; color: #000; text-align: left; font-weight: 500; }
#beginning .tw4 .w { margin-right: -10rem; margin-top: 10rem; }
#beginning .tw4 .ww { display: inline-block; padding: 4rem; background-color: #A2A5A4; }
#beginning .tw4 .t1 { float: right; margin-left: 2rem; padding-top: 2em; color: #000; text-indent: -2em; font-weight: 500; }
#beginning .tw4 .t2 { float: right; color: #000; font-weight: 500; }
#beginning .tw5 {}
#beginning .tw5 .w1 { display: flex; margin-bottom: 2rem; margin-top: -18rem; align-items: flex-end; }
#beginning .tw5 .w1 span { margin-right: 2rem; } 
#beginning .tw5 .t { margin-top: 3rem; padding-top: 6rem; padding-left: 2rem; border-left: solid 2px #000; color: #000; text-align: left; font-weight: 500; }
@media screen and (max-width:896px) { /* iPhone 横 m */
	#beginning h2 { right: 0; }
	#beginning .pw1 { display: block; }
	#beginning .pw1 .t { margin-right: 0; text-align: left; }
	#beginning .pw1 .t::before { display: none; }
	#beginning .tw1 { display: flex; flex-direction: row-reverse; float: none; margin-right: auto; margin-left: auto; line-height: 7vw; margin-top: 4rem; padding: 0; background-color: transparent; justify-content: center; }
	#beginning .tw1 p { color: #FFF !important; }
	#beginning .tw3 { display: block; padding-top: 14rem; text-align: center; }
	#beginning .tw3 .t1 { display: block; width: 90%; margin: auto; padding: 2rem; height: 50rem; line-height: 7vw; }
	#beginning .tw3 .pw2 { margin-top: 4rem; margin-left: 0; }
	#beginning .tw3 .pw2 .t { padding-top: 0; padding-right: 0; border-right: none; text-align: left; }
	#beginning .tw4 { display: block; }
	#beginning .tw4 .pw3 { margin-right: 0; }
	#beginning .tw4 .pw3 .t { padding-top: 0; padding-left: 0; border-left: none; text-align: left; }
	#beginning .tw4 .w { margin-right: 0; margin-top: 4rem; }
	#beginning .tw4 .ww { display: flex; flex-direction: row-reverse; padding: 1em; height: 65rem; line-height: 6vw; }
	#beginning .tw5 .w1 { margin-top: 3rem; }
	#beginning .tw5 .t { margin-top: 3rem; padding-top: 0; padding-left: 0; border-left: none; }
}

/* secC ----------*/
#secC {}

/* detailed ----------*/
#detailed { position: relative; padding-top: 24rem; }
#detailed h2 { position: absolute; z-index: 2; top: 6rem; right: 0; margin-bottom: -2rem; line-height: 2; font-size: 3.2rem; }
#detailed h2 mark { padding: 0.5rem; background-color: #FFF; white-space: nowrap; }
#detailed .pw1 { padding-right: 3rem; text-align: right; }
#detailed .tw1 { display: flex; flex-direction: row-reverse; width: 100%; margin-top: 4rem; }
#detailed .tw1 .tw {}
#detailed .tw1 .tw .w { display: inline-block; padding: 4rem; background-color: #000; }
#detailed .tw1 .tw .w .t1 { float: right; margin-left: 2rem; padding-top: 2em; color: #FFF; text-indent: -2em; font-weight: 500; }
#detailed .tw1 .tw .w .t2 { float: right; color: #FFF; font-weight: 500; }
#detailed .tw1 .pw { margin-top: 6rem; margin-right: 2rem; }
#detailed .tw1 .pw .p { margin-bottom: 1rem; }
#detailed .tw1 .pw .t { margin-bottom: 4rem; color: #FFF; }
#detailed .tw2 { display: flex; flex-direction: row-reverse; width: 100%; margin-top: 4rem; }
#detailed .tw2 .tw { margin-top: 15rem; }
#detailed .tw2 .tw .w { display: inline-block; padding: 4rem; background-color: #000; }
#detailed .tw2 .tw .w .t1 { float: right; margin-left: 2rem; padding-top: 2em; color: #FFF; text-indent: -2em; font-weight: 500; }
#detailed .tw2 .tw .w .t2 { float: right; color: #FFF; font-weight: 500; }
#detailed .tw2 .pw { margin-left: 2rem; }
#detailed .tw2 .pw .p { margin-bottom: 1rem; }
#detailed .tw2 .pw .t { margin-bottom: 4rem; padding-top: 2rem; color: #FFF; text-align: right; }
@media screen and (max-width:896px) { /* iPhone 横 m */
	#detailed { padding-top: 18rem; }
	#detailed .tw1 { display: block; margin-top: 2rem; }
	#detailed .tw1 .tw .w { display: block; width: 95%; margin: auto; padding: 1rem;height: 50rem; line-height: 5.5vw; }
	#detailed .tw1 .pw { margin-top: 6rem; margin-right: 4rem; margin-left: 4rem; }
	#detailed .tw2 { display: block;  }
	#detailed .tw2 .tw { margin-top: 4rem; text-align: center; }
	#detailed .tw2 .pw { margin-left: 0; }
	#detailed .tw2 .pw .t {  text-align: left; }
	#detailed .tw2 .tw .w { display: block; width: 85%; margin: auto; padding: 1rem; height: 55rem; line-height: 6vw;  }
	

}

/* footer ----------*/
#footer { padding: 16rem 0 18rem; }
#footer p { color: #FFF; text-justify: inter-word; text-align: left; text-justify: auto; line-height: 2; font-size: 1.8rem; font-weight: bold; letter-spacing: 0.4em; }
#footer .production { padding-top: 8rem; }
#footer a { color: #FFF; }
@media screen and (max-width:896px) { /* iPhone 横 m */
	#footer { padding: 15vw 0 5vw; }
	#footer p { font-size: 3vw; justify-content: left; }
	#footer .production { padding-top: 5vw; font-size: 2.8vw; }
}