@charset "utf-8";
/*--------------------------------------
copyright :
page style sheet : index
--------------------------------------*/

@import url(normalize.css);
@import url(../_plugin/fontawesome/css/all.min.css);
@import url(https://unpkg.com/aos@next/dist/aos.css);
@import url(../_plugin/OwlCarousel/assets/owl.carousel.min.css);
@import url(../_plugin/OwlCarousel/assets/owl.theme.default.css);
/*@import url(../_plugin/lightGallery/css/lightgallery.min.css);*/
@import url(common_parts.css);
@import url(common.css);


/*
 index
==============================*/
/* テキスト */
.ribbon2 { position: relative; padding: 1rem 0; color: #ffffff; background: #ddd; box-shadow: 10px 0 0 0 #ddd, -10px 0 0 0 #ddd, 0 3px 3px 0 rgba(0,0,0,0.1); }
.ribbon2:before { position: absolute; top: 100%; left: -10px; content: ""; width: 0; height: 0; border-width: 0 20px 20px 0; border-style: solid; border-color: transparent; border-right-color: #d2d2d2; }
.ribbon2:after { position: absolute; top: -20px; right: -10px; content: ""; width: 0; height: 0; border-width: 0 20px 20px 0; border-style: solid; border-color: transparent; border-bottom-color: #d2d2d2; }

/* デザイン */
.snip1563 { position: relative; display: inline-block; width: 100%; overflow: hidden; font-size: 16px; color: #ffffff; text-align: right; background-color: #fff; }
.snip1563:nth-of-type(1) { margin-right: 3rem; }
.snip1563 *,
.snip1563 *:before,
.snip1563 *:after { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.45s ease; transition: all 0.45s ease; }
.snip1563 img { width: 100%; backface-visibility: hidden; vertical-align: top; }
.snip1563:before,
.snip1563:after { position: absolute; top: 0; bottom: 0; left: 0; right: 0; content: ''; background-color: #b81212; opacity: 0.5; -webkit-transition: all 0.45s ease; transition: all 0.45s ease; }
.snip1563:before { -webkit-transform: skew(30deg) translateX(80%); transform: skew(30deg) translateX(80%); }
.snip1563:after { -webkit-transform: skew(-30deg) translateX(70%); transform: skew(-30deg) translateX(70%); }
.snip1563 figcaption { position: absolute; z-index: 1; top: 0px; bottom: 0px; bottom: 0; left: 0px; right: 0px; padding: 20px 20px 20px 40%; }
.snip1563 figcaption:before,
.snip1563 figcaption:after { position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; right: 0; content: ''; background-color: #b81212; box-shadow: 0 0 20px rgba(0, 0, 0, 0.7); opacity: 0.5; }
.snip1563 figcaption:before { -webkit-transform: skew(30deg) translateX(100%); transform: skew(30deg) translateX(100%); }
.snip1563 figcaption:after { -webkit-transform: skew(-30deg) translateX(90%); transform: skew(-30deg) translateX(90%); }
.snip1563 h3,
.snip1563 p { margin: 0; opacity: 0; letter-spacing: 1px; }
.snip1563 h3 { text-transform: uppercase; }
.snip1563 a { position: absolute; z-index: 1; top: 0; bottom: 0; left: 0; right: 0; }
.snip1563:hover h3,
.snip1563.hover h3,
.snip1563:hover p,
.snip1563.hover p { -webkit-transform: translateY(0); transform: translateY(0); opacity: 0.9; }
.snip1563:hover:before,
.snip1563.hover:before { -webkit-transform: skew(30deg) translateX(30%); transform: skew(30deg) translateX(30%); -webkit-transition-delay: 0.05s; transition-delay: 0.05s; }
.snip1563:hover:after,
.snip1563.hover:after { -webkit-transform: skew(-30deg) translateX(20%); transform: skew(-30deg) translateX(20%); }
.snip1563:hover figcaption:before,
.snip1563.hover figcaption:before { -webkit-transform: skew(30deg) translateX(50%); transform: skew(30deg) translateX(50%); -webkit-transition-delay: 0.15s; transition-delay: 0.15s; }
.snip1563:hover figcaption:after,
.snip1563.hover figcaption:after { -webkit-transform: skew(-30deg) translateX(40%); transform: skew(-30deg) translateX(40%); -webkit-transition-delay: 0.1s; transition-delay: 0.1s; }

/* mv ----------*/
#mv { overflow: hidden; }
#mv .img_box { height: 100vh; background-image: url("../_img/index/17.jpg"); background-position: center center; background-repeat: no-repeat; background-size: cover; }
#mv .img_box::after { position: absolute; top: 0; left: 0; content: ""; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); background-image: -webkit-gradient(linear, 0 0, 100% 100%,color-stop(.25, #333), color-stop(.25, transparent),color-stop(.5, transparent), color-stop(.5, #333),color-stop(.75, #000), color-stop(.75, transparent),to(transparent)); background-size: 3px 3px; }
#mv h2 { position: absolute; z-index: 2; top: 50%; width: 100%; font-size: 5rem; color: #fff; transform: translateY(-50%); }
.owl-carousel .owl-dots.disabled, .owl-carousel .owl-nav.disabled { display: block; }
.owl-carousel .owl-nav button.owl-next,
.owl-carousel .owl-nav button.owl-prev { position: absolute; top: 50%; width: 5rem; height: 5rem; background: rgba(255, 255, 255, 0.3); transform: translateY(-50%); }
.owl-prev { left: 0; }
.owl-next { right: 0; }
.owl-prev span, .owl-next span { position: absolute; top: 50%; left: 50%; font-size: 5rem; transform: translate(-50%, -50%); }
.owl-dots { margin-top: 1rem; text-align: center; }
.owl-dots button span { display: block; width: 10px; height: 10px; background: #000; border-radius: 50%; }
.owl-dots button:not(:nth-last-of-type(1)) span { margin-right: 1rem; }
.owl-dots button.active span { background: #ddd; }

/* main ----------*/
section:nth-of-type(even) { padding: 5rem 2rem; background: #e5e5e5; }
section h2 { margin-bottom: 5rem; font-size: 3rem; }
section h3 { font-size: 2.6rem; }
section p { font-size: 2rem; }

/* sec_01 */
#sec_01 .flb { position: relative; margin-bottom: 5rem; flex-wrap: wrap; }
#sec_01 .flb .img_box { width: 70%; }
#sec_01 .flb .text_box { position: absolute; bottom: 3rem; right: 0; width: 100%; max-width: 700px; padding: 4rem 2rem; background: rgba(229, 229, 229, 0.7); }
#sec_01 .flb figure { width: calc( (99.999% - 3rem) / 2 ); }
#sec_01 .flb figure:not(:nth-last-of-type(1)) { margin-right: 3rem; }
@media screen and ( max-width: 1024px ) {
	#sec_01 .flb .text_box { width: 70%; max-width: inherit; }
}
@media screen and ( max-width: 768px ) {
	#sec_01 .flb:nth-of-type(2) { display: block; }
	#sec_01 .flb .img_box { width: 100%; }
	#sec_01 .flb .text_box { position: static; width: 95%; margin: auto; margin-top: -5rem; transform: none; }
	#sec_01 .flb figure { width: 100%; margin: auto; }
	#sec_01 .flb figure:nth-of-type(1) { margin-bottom: 3rem; }
}
@media screen and ( max-width: 480px ) {
	#sec_01 .flb .text_box { padding: 2rem 1.5rem; }
}
/* sec_02 */
#sec_02 .flb_r { position: relative; margin-bottom: 5rem; flex-wrap: wrap; }
#sec_02 .flb_r .img_box { width: 70%; }
#sec_02 .flb_r .text_box { position: absolute; bottom: 3rem; left: 0; width: 100%; max-width: 700px; padding: 4rem 2rem; background: rgba(255, 255, 255, 0.7); }
#sec_02 .flb figure { width: calc( (99.999% - 3rem) / 2 ); }
#sec_02 .flb figure:not(:nth-last-of-type(1)) { margin-right: 3rem; }
@media screen and ( max-width: 1024px ) {
	#sec_02 .flb_r .text_box { width: 70%; max-width: inherit; }
}
@media screen and ( max-width: 768px ) {
	#sec_02 .flb_r .img_box { width: 100%; }
	#sec_02 .flb_r .text_box { position: static; width: 95%; margin: auto; margin-top: -5rem; transform: none; }
}
@media screen and ( max-width: 480px ) {
	#sec_02 .flb_r .text_box { padding: 2rem 1.5rem; }
}
/* sec_03 */
#sec_03 .flb { flex-wrap: wrap; }
#sec_03 li { width: calc( (99.999% - 6rem) / 4 ); overflow: hidden; margin-bottom: 2rem; }
#sec_03 li:not(:nth-of-type(4n)) { margin-right: 2rem; }
#sec_03 li img { display: block; transition-duration: 0.3s; }
#sec_03 li a { display: block; }
#sec_03 li a:hover { transform: scale(1.3, 1.3) rotate(-10deg); transition-duration: 0.3s; }
@media screen and ( max-width: 768px ) {
	#sec_03 li { width: calc( (99.999% - 4rem) / 3 ); }
	#sec_03 li:not(:nth-of-type(4n)) { margin-right: 0; }
	#sec_03 li:not(:nth-of-type(3n)) { margin-right: 2rem; }
}
@media screen and ( max-width: 650px ) {
	#sec_03 li { width: calc( (99.999% - 2rem) / 2 ); }
	#sec_03 li:not(:nth-of-type(3n)) { margin-right: 0; }
	#sec_03 li:nth-of-type(odd) { margin-right: 2rem; }
}

/* sec_04 */
#sec_04 .img_wrap { position: relative; }
#sec_04 .text_box { position: absolute; top: 50%; left: 50%; width: 90%; padding: 3rem; background: rgba(255, 255, 255, 0.7); transform: translate(-50% , -50%); }
@media screen and ( max-width: 1024px ) {
	#sec_04 .text_box { position: relative; }
}
@media screen and ( max-width: 768px ) {
	#sec_04 .text_box { position: relative; left: 0; margin: -40% auto 0; transform: none; }
}
@media screen and ( max-width: 650px ) {
	#sec_04 .text_box { width: 100%; margin: 2rem auto; padding: 2rem 1.5rem }
}