@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 { line-height: 2.5; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; }

/* mv ----------*/
#mv { position: relative; padding: 10rem 0 5rem; background-color: #E8E8E8; }
#mv::before { position: absolute; z-index: 1; top: 0; left: 0; content: ""; width: 36%; height: 113%; 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; text-align: right; }
#mv h1 { margin-bottom: 4rem; font-size: 4.4rem; font-family: YuGothic, "游ゴシック", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; letter-spacing: 0.65em; }
#mv h1 mark { color: #FFF; background-color: #000; }
#mv h1 mark span { display: inline-block; width: 2rem; }
#mv .vertical_text_wrap { text-align: right; }
#mv .vertical_text { display: inline-block; }
@media screen and (max-width:1300px) {
	#mv { padding: 16rem 0 5rem; }
}
@media screen and (max-width:896px) { /* iPhone 横 m */
	#mv { padding: calc(143vw - 17vw) 0 37vw; background-color: #E8E8E8; }
	#mv .inner { text-align: left; }
	#mv::before { 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 { line-height: 9vw; }
	#mv p { margin: 0 !important; font-size: 3.2vw; }
}

/* secA ----------*/
#secA { background-image: url(../_img/index/bg_01_pc.png); background-repeat: no-repeat; background-position: center; background-size: cover; }
@media screen and (max-width:896px) { /* iPhone 横 m */
	#secA { background-image: url(../_img/index/bg_01_sp.png); }
}

/* about ----------*/
#about { position: relative; padding-top: 24rem; padding-bottom: 38rem; color: #FFF; }
#about h2 { position: absolute; line-height: 2; font-size: 3rem; letter-spacing: 0.2em; }
#about h2 mark { padding: 1.5rem 0.5rem; background-color: #FFF; }
#about .pw1 { max-width: 64.8rem; margin: auto; margin-bottom: 3rem; padding-top: 7rem; }
#about .tx1 { margin-bottom: 12rem; text-align: center; }
#about .pw2_wrap { margin: 0 -10rem; }
#about .pw2 {}
#about .pw2 .t { display: block; padding-top: 2rem; }
@media screen and (max-width:896px) { /* iPhone 横 m */
	#about { padding-top: 0; padding-bottom: 24vw; }
	#about h2 { top: 64vw; letter-spacing: 0; }
	#about .pw1 { margin: 0 -2rem; margin-bottom: 8vw; padding-top: 0; }
	#about .pw1 .p1 { margin-top: -27vw; }
	#about .tx1 { margin-bottom: 15vw; padding-left: 30vw; text-align: left; line-height: 2.8; }
	#about .pw2_wrap { margin: 0; }
	#about .pw2 .t { padding: 3rem; line-height: 2.8; }
}

/* secB ----------*/
#secB { background-image: url(../_img/index/bg_02_pc.png); background-repeat: no-repeat; background-position: center; background-size: cover; }
@media screen and (max-width:896px) { /* iPhone 横 m */
	#secB { background-image: url(../_img/index/bg_02_sp.png); }
}

/* brand ----------*/
#brand { position: relative; padding-top: 0; padding-bottom: 19rem; color: #FFF; }
#brand h2 { position: absolute; z-index: 1; top: -7rem; right: 0; line-height: 2; font-size: 3rem; letter-spacing: 0.2em; }
#brand h2 mark { padding: 1.5rem 0.5rem; background-color: #FFF; }
#brand .pw1 { position: relative; top: -15rem; max-width: 79.6rem; margin-left: auto; margin-right: 3rem; }
#brand .box1 { position: relative; margin-top: 5rem; }
#brand .tx1 { max-width: 40%; margin-left: 6rem; margin-bottom: 5rem; }
#brand .pw2 { position: absolute; top: -15rem; right: 10rem; max-width: 35%; }
#brand .pw3 { max-width: 48%; }
@media screen and (max-width:896px) { /* iPhone 横 m */
	#brand h2 { top: 48vw; padding-bottom: 15vw; }
	#brand .pw1 { top: 0; margin: 0 -2rem; }
	#brand .pw2 { position: relative; top: 0; left: -2rem; right: auto; max-width: 44%; }
	#brand .pw3 { position: absolute; bottom: -20vw; right: -2rem; max-width: 56%; }
	#brand .tx1 { max-width: 100%; margin-left: 0; margin-bottom: 10vw; padding-right: 20vw; line-height: 2.8; }
}

.wp { width: 100%; max-width: none !important; }

/* secC ----------*/
#secC { background-image: url(../_img/index/bg_03_pc.png); background-repeat: no-repeat; background-position: center; background-size: cover; }
@media screen and (max-width:896px) { /* iPhone 横 m */
	#secC { background-image: url(../_img/index/bg_03_sp.png); }
}

/* info1 ----------*/
#info1 { position: relative; }
#info1 h2 { position: absolute; z-index: 1; top: -8rem; right: 0; line-height: 2; font-size: 3rem; letter-spacing: 0.2em; }
#info1 h2 mark { padding: 1.5rem 0.5rem; color: #FFF; background-color: #000; }
#info1 .tx1 { position: absolute; top: 8rem; right: 7rem; padding: 2.5rem 4rem; color: #FFF; background-color: #000; }
#info1 .tx1 .vertical_text { line-height: 1.8; }
#info1 .pw1 { max-width: 42%; margin-bottom: 5rem; padding-top: 8rem; }
#info1 .pw1 .t { margin-top: 2rem; }
#info1 .pw2 { max-width: 42%; }
#info1 .pw2 .t { margin-top: 2rem; }
@media screen and (max-width:896px) { /* iPhone 横 m */
	#info1 .tx1 { display: block; margin-right: 6rem; position: relative; top: -5vw; left: 0; right: 0; padding: 2rem; background-color: #000; text-align: center; }
	#info1 .tx1 .vertical_text { display: inline-block; line-height: 7vw; }
	#info1 .pw1 { max-width: 90%; margin-bottom: 10vw; padding-top: 10vw; }
	#info1 .pw1 img { margin-left: -2rem; }
	#info1 .pw2 { max-width: 90%; margin-bottom: 10vw; padding-top: 10vw; }
	#info1 .pw2 img { margin-left: -2rem; }
}

/* info2 ----------*/
#info2 { position: relative; margin-top: 10rem; }
#info2 h2 { position: absolute; z-index: 1; top: -3rem; right: 0; line-height: 2; font-size: 3rem; letter-spacing: 0.2em; }
#info2 h2 mark { padding: 0.5rem 1.5rem; color: #FFF; background-color: #000; }
#info2 .pw1 { position: absolute; left: 17rem; max-width: 46%; }
#info2 .tx1 { text-align: right; }
#info2 .tx1 .w { display: inline-block; margin-right: -10rem; padding: 5rem 10rem 3rem 12rem; background-color: #A2A5A4; }
#info2 .tx1 .vertical_text { line-height: 1.8; }
@media screen and (max-width:896px) { /* iPhone 横 m */
	#info2 { margin-top: 15vw; }
	#info2 h2 { top: -3rem; left: -2rem; right: auto; }
	#info2 .pw1 { position: inherit; left: inherit; max-width: none; margin: 0 -2rem !important; }
	#info2 .tx1 { text-align: center; }
	#info2 .tx1 .w { display: block; margin-right: 0; margin: auto; padding: 15vw 0; background-color: transparent; text-align: center; }
	#info2 .tx1 .vertical_text { margin-left: auto; margin-right: auto; line-height: 8vw; }
}

/* info3 ----------*/
#info3 { position: relative; margin-top: -6rem; padding-bottom: 22rem; }
#info3 h2 { position: absolute; z-index: 1; top: 3rem; left: 32rem; line-height: 2; font-size: 3rem; letter-spacing: 0.2em; }
#info3 h2 mark { padding: 1.5rem 0.5rem; color: #FFF; background-color: #000; }
#info3 .pw1 { position: absolute; top: 16rem; left: 35rem; max-width: 46%; }
#info3 .tx1 {}
#info3 .tx1 .w { display: inline-block; margin-left: -6rem; padding: 3rem 14rem 5rem 6rem; background-color: #A2A5A4; }
#info3 .tx1 .vertical_text { line-height: 1.8; }
@media screen and (max-width:896px) { /* iPhone 横 m */
	#info3 { margin-top: 0; padding-bottom: 65vw; }
	#info3 h2 { top: 57vw; left: auto; right: auto; right: 0; line-height: 2; }
	#info3 .pw1 { position: inherit; top: 0; left: 0; left: inherit; max-width: none; margin: 0 -2rem !important; }
	#info3 .tx1 { padding-right: 15vw; text-align: right; }
	#info3 .tx1 .w { display: block; margin-left: 0; padding: 15vw 0 8vw; background-color: transparent; }
	#info3 .tx1 .vertical_text { height: 45rem; margin-left: auto; margin-right: auto; line-height: 7vw; }
}

/* secD ----------*/
#secD { background-image: url(../_img/index/bg_04_pc.png); background-repeat: no-repeat; background-position: center; background-size: cover; }
@media screen and (max-width:896px) { /* iPhone 横 m */
	#secD { background-image: url(../_img/index/bg_04_sp.png); }
}

/* profile ----------*/
#profile { color: #FFF; }
#profile .tw1 { position: relative; top: -8rem; display: flex; }
#profile .tw1 .pw { width: 57%; }
#profile .tw1 .tw { position: relative; width: 40%; margin-left: auto; }
#profile .tw1 .tw .w { position: absolute; bottom: 0; width: 100%; }
#profile .tw1 .tw .w::before { position: absolute; top: -3rem; left: 0; content: ""; width: 11rem; height: 2px; background-color: #FFF; }
#profile .tw1 .tw .w p { font-size: 1.4rem; }
#profile .tw2 { display: flex; flex-direction: row-reverse; margin-top: -4rem; justify-content: right; }
#profile .tw2 h2 { margin-left: 3rem; line-height: 2; font-size: 3rem; letter-spacing: 0.2em; }
#profile .tw2 h2 mark { padding: 1.5rem 0.5rem; color: #000; background-color: #FFF; }
#profile .tw2 p { color: #FFF; line-height: 1.95; }
#profile .tw2 .t1 { margin-left: 2rem; padding-top: 2em; text-indent: -2em; }
#profile .tw2 .t2 {}
#profile .pw1 { display: flex; margin-top: -5rem; align-items: flex-end; }
#profile .pw1 .p1 { width: 34%; }
#profile .pw1 .p2 { width: 60%; margin-left: auto; }
#profile .tw3 { display: flex; flex-direction: row-reverse; margin-top: 10rem; justify-content: center; }
#profile .tw3 p { color: #FFF; line-height: 1.95; }
#profile .tw3 .t1 { margin-left: 2rem; padding-top: 2em; text-indent: -2em; }
#profile .tw3 .t2 {}
#profile .pw2 { display: flex; margin-top: 8rem; }
#profile .pw2 .p1 { width: 54%; }
#profile .pw2 .p2 { width: 41%; margin-left: auto; padding-top: 20rem; }
@media screen and (max-width:896px) { /* iPhone 横 m */
	#profile .tw1 { top: -50vw; flex-flow: wrap; margin-bottom: -30vw; }
	#profile .tw1 .pw { width: 91vw; margin-left: -2rem; }
	#profile .tw1 .tw { width: 100%; padding-top: 8vw; }
	#profile .tw1 .tw .w { position: relative; }
	#profile .tw1 .tw .w::before { display: none; }
	#profile .tw2 { flex-flow: wrap; margin-top: 0; flex-direction: row-reverse; }
	#profile .tw2 h2 { margin-left: 1rem; font-size: 2.2rem; text-align: right; margin-bottom: 3.5rem; }
	#profile .p4 { width: 51vw; margin-bottom: 8vw; }
	#profile .pw1 { flex-flow: wrap; margin: 0; margin-top: 10vw; }
	#profile .pw1 .p2 { width: 100%; margin-bottom: 10vw; }
	#profile .tw3 { margin-top: 10vw; }
	#profile .pw2 { margin-top: 10vw; }
	#profile .pw2 .p2 { width: 41vw; margin-left: auto; padding-top: 0; }
}

/* footer ----------*/
#footer { padding: 8rem 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; }
}

