@charset "utf-8";
/*--------------------------------------
	copyright : Lampros co.,Ltd.
--------------------------------------*/

@import url(../../_css/normalize.css);
@import url(../../_plugin/fontawesome/css/all.min.css);
@import url(../../_plugin/aos/aos.css);
@import url(../../_plugin/OwlCarousel/assets/owl.carousel.min.css); @import url(../../_plugin/OwlCarousel/assets/owl.theme.default.css);
@import url(../../_css/animate.css);
@import url(../../_css/common_parts.css);
@import url(../../_css/common.css);


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

.h2 { font-size: 2.4rem; }

/* mv ----------*/
#mv { position: relative; width: 100%; height: 80vh; min-height: 60rem; overflow: hidden; background-image: url(../../_img/common/logo_mark.svg); background-position: center center; background-repeat: no-repeat; transition: filter 0.5s ease-out; }
#mv .pg { width: inherit; height: inherit; min-height: inherit; background-color: #000; }
#mv .pg li { width: 100%; height: 100.1vh; min-height: 60rem; background-repeat: no-repeat; background-position: 90% center; background-size: cover; }
#mv .pg li a { display: block; width: inherit; height: inherit; min-height: inherit; text-decoration: none; }
#mv .pg li a:hover { opacity: 1; }
#mv .pg li a h2 { position: relative; top: 40%; padding: 0 8.5rem; line-height: 1.4; opacity: 0; color: #FFF; text-align: center; font-size: 3rem; font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W6", "Hiragino Mincho ProN", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", 'Noto Serif JP', "Times New Roman", Meiryo, serif; -webkit-transform: translateY(-50%); transform: translateY(-50%); text-shadow:2px 2px 8px rgba(0,0,0,0.90); }
#mv .pg li a h2 small { font-size: 1.8rem; }
#mv .scroll { position: absolute; z-index: 997; bottom: 2rem; left: 50%; padding-bottom: 6rem; -webkit-transform: translateX(-50%); transform: translateX(-50%); }
#mv .scroll:after { position: absolute; top: calc(100% - 5rem); left: 0; right: 0; content: ""; width: 1px; margin: auto; background-color: #FFF; animation: scrollAnime 2s ease 0s infinite; }
#mv .scroll:before { position: absolute; top: calc(100% - 5rem); left: 0; right: 0; content: ""; width: 1px; height: 5rem; margin: auto; background-color: rgba(255, 255, 255, 0.2); }
#mv .scroll p { margin-bottom: 1rem; color: #FFF; text-align: center; line-height: 1; font-size: 1rem; font-weight: bold; }
#mv .owl-dots { position: absolute; z-index: 998; bottom: 15rem; left: 0%; right: 0; display: block; text-align: center; }
#mv .owl-dots .owl-dot span { display: block; width: 0.6rem; height: 0.6rem; }
#mv .owl-nav { pointer-events: none; }
#mv .owl-nav .owl-prev { position: absolute; z-index: 998; bottom: 55%; left: 5%; pointer-events: auto; }
#mv .owl-nav .owl-next { position: absolute; z-index: 998; bottom: 55%; right: 5%; pointer-events: auto; }
#mv .owl-nav button { width: 4rem; height: 8rem; border-radius: 0.5rem; background: rgba(255, 255, 255, 0.75) !important; font-size: 250% !important; }
#mv .owl-nav button:hover { color: rgba(21, 20, 20, 0.85) !important; background: rgba(255, 255, 255, 0.60) !important; }
@media screen and (max-width:1024px) { /* iPad 横 l */
	.nav_open #mv { filter: blur(5px); }
	#mv .owl-dots { bottom: 8.5rem; }
}
@media screen and (max-width:768px) { /* iPad 縦 m */
	#mv .topics .topics-wrap { display: block; padding: 2rem 0 1rem; }
	#mv .topics h2 { position: absolute; top: -2.5rem; padding: 0; border-right: none; }
	#mv .topics ul { padding: 0; }
	#mv .topics ul li .d { top: 0; padding-top: 0.1rem; }
	#mv .topics .more { position: absolute; top: -3.2rem; right: 0; height: auto; border-left: none; }
	#mv .owl-dots { bottom: 5.5rem; }
}
@media screen and (max-width:736px) { /* iPhone 横 */
	#mv .scroll:before { height: 40px; }
	#mv .scroll:after { bottom: 0; animation: scrollAnimeSp 2s ease 0s infinite; }
	#mv .owl-nav .owl-prev { left: 0; }
	#mv .owl-nav .owl-next { right: 0; }
}
@media only screen and (orientation:portrait) { /* 縦 */
	#mv, #mv .pg li { height: 80vh; min-height: auto; }
	#mv .pg .active li { background-position: 55% center; animation: bgAnime 4.5s ease-in-out 1.5s; -webkit-transform: rotate(0.1deg); transform: rotate(0.1deg); }
}
@keyframes scrollAnime {
	0% { top: calc(100% - 50px); bottom: auto; height: 0; }
	24% { top: calc(100% - 50px); bottom: auto; }
	25% { top: auto; bottom: 0; height: 50px; }
	50% { top: auto; bottom: 0; height: 0; }
	100% { top: auto; bottom: 0; height: 0; }
}
@keyframes scrollAnimeSp {
	0% { top: auto; bottom: 0; height: 0; }
	24% { top: auto; bottom: 0; }
	25% { top: calc(100% - 40px); bottom: auto; height: 40px; }
	50% { top: calc(100% - 40px); bottom: auto; height: 0; }
	100% { top: calc(100% - 40px); bottom: auto; height: 0; }
}
@keyframes bgAnime {
	0% { background-position: 55% center; -webkit-transform: rotate(0.1deg); transform: rotate(0.1deg); }
	100% { background-position: 90% center; -webkit-transform: rotate(0deg); transform: rotate(0deg); }
}


/* access ----------*/
#access { background-repeat: no-repeat; background-image: url(../../_img/index/img_10.jpg); background-position: center center; }
#access .h2 { margin-bottom: 1.25em; padding-left: 1.5rem; border-left: solid 3px #333; border-color: #FFF; color: #FFF; text-align: left; }
#access .h2 span { text-align: left; }
#access h3 { margin-bottom: 0; color: #FFF; }
#access .list { margin-top: 0; color: #FFF; font-size: 1.6rem; }
#access .btw .bt { border-color: rgba(255, 255, 255, 0.4); color: #FFF !important; background-color: transparent; text-align: center; }

/* section ----------*/
.bg-light_gray { background-color: #f6f6f6; }
.section {}
.section .inner { position: relative; padding-left: 4rem !important; }
.section .inner::before { content: ""; width: 1px; height: 100%; border-left: solid 1px #333; position: absolute; top: -10rem; left: 0; }
.section .pw { position: relative; }
.section .pw::before { opacity: 0.5; content: ""; z-index: 3; position: absolute; top: 1rem; left: 1rem; width: calc(100% - 2rem); height: calc(100% - 2rem); border: solid 1px #FFF; }
.section .pw h2 { position: absolute; z-index: 2; top: 50%; width: 100%; text-align: center; -webkit-transform: translateY(-50%); transform: translateY(-50%); }
.section .pw h2 span { display: block; letter-spacing: 0.05em; padding: 1rem; color: #FFF; background-color: rgba(0, 0, 0, 0.8); line-height: 1.4; font-weight: normal; font-size: 2.4rem; font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W6", "Hiragino Mincho ProN", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", 'Noto Serif JP', "Times New Roman", Meiryo, serif; }
.section .pw .pgw { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 25vw 25vw; }
.section .pw .pgw .p { background-repeat: no-repeat; background-position: center; background-size: cover; }
.section .pw .pgw .p1 { grid-column: 1 / 4; }
.section .pw .pgw .p2 {}
.section .pw .pgw .p3 {}
.section .pw .pgw .p4 {}
.section2 {}
.section2 h2 { text-align: center; }
.section2 h2 span { display: inline-block; padding-bottom: 1rem; border-bottom: solid 1px #333; letter-spacing: 0.05em;line-height: 1.4; margin-bottom: 4rem; font-weight: normal; font-size: 2.4rem; font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W6", "Hiragino Mincho ProN", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", 'Noto Serif JP', "Times New Roman", Meiryo, serif; }
@media screen and (max-width:768px) { /* iPad 縦 m */
	.section .pw .pgw { grid-template-rows: 40vw 30vw; }
	.section .inner::before { top: -5rem; left: 2rem; }
	.section .pw::before { top: 0.5rem; left: 0.5rem; width: calc(100% - 1rem); height: calc(100% - 1rem); }
}

.search-widget-search-container-bf1818 {
	box-shadow: none !important;
	border-radius: 0px !important;
	border: solid 1px #E5E5E5 !important;	
}
@media only screen and (max-width: 992px){
	#tripla-searching-app .search-widget-search-container-bf1818 {
		 width: 100%!important;
	}
}

#main .section .inner {
  padding-top: 6rem !important;
}