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

@import url(reset.css);
@import url(common.css);
@import url(../libs/fontawesome/css/all.min.css);
@import url(../libs/aos/aos.css);
@import url(../libs/OwlCarousel/assets/owl.carousel.min.css); @import url(../libs/OwlCarousel/assets/owl.theme.default.min.css);
/* @import url(../libs/lightGallery/css/lightgallery.min.css); */
/* @import url(../libs/Remodal/remodal.css); @import url(../libs/Remodal/remodal-default-theme.css); */


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

/* header ----------*/
#header { position: fixed; }

/* main ----------*/
#main { background-color: #F2F5F8; }

/* mv ----------*/
#mv { position: fixed; z-index: -1; top: 0; left: 0; width: 100%; max-height: 100vh; min-height: 80rem; overflow: hidden; aspect-ratio: 192 / 108; }
#mv .carousel { position: relative; z-index: 1; opacity: 0; } 
#mv .carousel li { position: absolute; width: 100%; max-height: 100vh; min-height: 80rem; background-repeat: no-repeat; background-position: center; background-size: cover; aspect-ratio: 192 / 108; } 
#mv .cbg { position: absolute; z-index: 2; top: 0; left: 0; content: ""; width: 100%; height: 100%; opacity: 0; background-color: rgba(3, 28, 132, 0.24); }
#mvTitle { position: relative; z-index: 2; width: 100%; padding-bottom: 60vh; }
#mvTitle .w { position: relative; width: 100%; max-height: 100vh; min-height: 80rem; aspect-ratio: 192 / 108; }
#mvTitle .w .tw { position: absolute; z-index: 1; bottom: 0; width: 100%; padding: 0 3rem 12rem; }
#mvTitle .w .tw .arrow { position: absolute; bottom: 0rem; left: 50%; display: block; width: 0; height: 7rem; }
#mvTitle .w .tw .arrow span { display: block; }
#mvTitle .w .tw .arrow .l1 { position: relative; width: 2px; height: 7rem; background-color: #F2F5F8; }
#mvTitle .w .tw .arrow .l1::before { position: absolute; top: 0; content: ""; width: 2px; height: 7rem; background-color: #4C8CED; animation: mvArrowL1 3.5s cubic-bezier(0.77, 0, 0.175, 1) infinite; }
#mvTitle .w .tw .arrow .l2 { position: absolute; bottom: -1px; left: 0; width: 1.5px; height: 1.8rem; background-color: #F2F5F8; transform-origin: right bottom; transform: rotate(40deg); }
#mvTitle .w .tw .arrow .l2::before { position: absolute; bottom: 0; content: ""; width: 1.5px; height: 0; background-color: #4C8CED; animation: mvArrowL2 3.5s cubic-bezier(0.77, 0, 0.175, 1) infinite; }
#mvTitle .w .tw .arrow .l3 { position: absolute; bottom: -1px; left: 0; width: 1.5px; height: 1.8rem; background-color: #F2F5F8; transform-origin: left bottom; transform: rotate(-40deg); }
#mvTitle .w .tw .arrow .l3::before { position: absolute; bottom: 0; content: ""; width: 1.5px; height: 0; background-color: #4C8CED; animation: mvArrowL2 3.5s cubic-bezier(0.77, 0, 0.175, 1) infinite; }
#mvTitle h2 { color: #FFF; opacity: 0; text-align: center; text-shadow: 5px 5px 20px rgba(1, 23, 95, 0.53); font-size: 13rem; font-family: 'Cinzel', serif; font-weight: 400; }
#mvTitle h3 { color: #F2F5F8; opacity: 0; text-align: center; font-size: 3.4rem; font-weight: 600; letter-spacing: 0.1em; text-shadow: 5px 5px 20px rgba(1, 23, 95, 0.53); }
#mvTitle h4 { padding: 0 3rem; margin-top: 30vh; margin-bottom: 7rem; color: #F2F5F8; text-align: center; font-size: 3.4rem; font-weight: 600; letter-spacing: 0.1em; }
#mvTitle p { padding: 0 3rem; color: #F2F5F8; text-align: center; font-size: 1.8rem; font-weight: 600; letter-spacing: 0.1em; word-break: auto-phrase; }
@media screen and (max-width:896px) { /* m */
	#mv, #mv .carousel li, #mvTitle .w { min-height: 70rem; aspect-ratio: inherit; }
	#mvTitle h2 { font-size: 16vw; }
	#mvTitle h3 { font-size: 3rem; }
}
@media screen and (max-width:480px) { /* s */
	#mv, #mv .carousel li, #mvTitle .w { min-height: 60rem; }
}
@keyframes mvArrowL1 {
	0% { height: 0; }
	50% { height: 7rem; }
	51% { height: 7rem; }
	80% { height: 0; }
	100% { top: auto; bottom: 0; height: 0; }
}
@keyframes mvArrowL2 {
	0% { height: 0; }
	40% { height: 0; }
	50% { height: 1.8rem; }
	81% { height: 1.8rem; }
	100% { top: 0; bottom: auto; height: 0; }
}

/* topics ----------*/
#topics { padding: 10rem 0 0; }
#topics h2 { margin-bottom: 4rem; color: #01398D; font-family: 'Cinzel', serif; font-weight: 400; font-size: 5.4rem; }
.topics_categorys li a { padding: 0.8rem 1.2rem; font-size: 1.6rem; }
#topics .topics_list { margin-top: 4rem; }
#topics .btw { margin-top: 4rem; text-align: right; }
.topics_list li span { padding-top: 1.2rem; padding-bottom: 1.2rem; }
.topics_list li .d { font-size: 1.6rem; }
.topics_list li .cw .c { padding: 0.8rem 1.2rem; font-size: 1.6rem; }
.topics_list li .t { font-size: 1.6rem; }
@media screen and (max-width:896px) { /* m */
	#topics { padding: 6rem 0; }
	#topics .topics_list { margin-top: 3rem; }
}

/* about ----------*/
#about { position: relative; z-index: 1; padding-top: 10rem; padding-bottom: 10rem; }
#about h2 { position: relative; z-index: 1; margin-top: 7rem; padding-top: 3rem; text-align: right; }
#about h2::before, #about h2::after { position: absolute; content: ""; }
#about h2::before { top: 0; right: -100%; width: 300%; height: 0; border-top: solid 1px #BCA317; }
#about h2::after { top: -34rem; right: -12rem; width: 0; height: 150rem; border-left: solid 1px #BCA317; }
#about h2 .e { position: absolute; top: 4.2em; right: -12.5rem; color: #01398D; line-height: 1; font-size: 7rem; font-family: 'Cinzel', serif; font-weight: 400; transform: rotate(90deg); transform-origin: right top; }
#about h2 .j { color: #01398D; font-size: 2.8rem; font-weight: 600; }
#about .w { position: relative; z-index: 2; display: grid; margin-top: -15rem; grid-template-columns: 1fr 29%; }
#about .w .pw { margin-left: -24rem; grid-column: 1; grid-row: 1; }
#about .w .tww { position: relative;  grid-column: 2; grid-row: 1; }
#about .w .tww .tw { position: relative; margin-left: calc(100% - 71rem); z-index: 1; width: 71rem; padding: 3rem 0 3rem 5rem; background-color: #F2F5F8; margin-top: 103%; }
#about .w .tww .tw h3 { position: relative; margin-bottom: 4rem; font-size: 3.4rem; font-weight: 700; }
#about .w .tww .tw h3 .cursive { z-index: -1; bottom: -5rem; right: 12rem; width: 9em; }
#about .w .tww .tw .name { text-align: right; font-size: 1.8rem; vertical-align: baseline; margin-top: 3rem; }
#about .w .tww .tw .name span { font-size: 2.8rem; vertical-align: baseline; }
#about .w .tww .tw .btw { margin-top: 6rem; }
@media screen and (max-width:1720px) {
	#about h2::after { right: 0; }
	#about h2 .e { right: -0.1em; font-size: 5rem; }
	#about h2 .j { padding-right: 6rem; }
	#about .w { margin-top: -10rem; }
	#about .w .tww .tw { margin-right: 6rem; margin-top: 70%; }
	#about .w .pw { margin-left: -2rem; }
}
@media screen and (max-width:1030px) {
	#about .w { margin-top: 2rem; }
	#about .w .tww .tw { margin-top: 100%; }
}
@media screen and (max-width:896px) { /* m */
	#about h2::after { top: -10rem;  height: 90rem; }
	#about .w { display: block; }
	#about .w .tww .tw { margin-top: 0; width: calc(100% - 6rem); margin-left: 0; }
	#about .w .tww .tw h3 .cursive { right: auto; left: 0; }
	#about .w .tww .tw .btw { margin-top: 3rem; }
}
@media screen and (max-width:480px) { /* s */
	#about .w .tww .tw h3 .cursive { transform: scale(0.8,0.8); transform-origin: left bottom; left: -8rem; }
	#about .w .tww .tw .btw { text-align: center; }
}

/* message ----------*/
#message { position: relative; z-index: 1; padding-top: 10rem; padding-bottom: 10rem; }
#message h2 { position: relative; z-index: 1; margin-top: 7rem; padding-top: 3rem; }
#message h2::before, #message h2::after { position: absolute; content: ""; }
#message h2::before { top: 0; left: -100%; width: 300%; height: 0; border-top: solid 1px #BCA317; }
#message h2::after { top: -34rem; left: -12rem; width: 0; height: 150rem; border-left: solid 1px #BCA317; }
#message h2 .e { position: absolute; top: -1rem; left: -5.5rem; color: #01398D; line-height: 1; font-size: 7rem; font-family: 'Cinzel', serif; font-weight: 400; transform: rotate(90deg); transform-origin: left top; }
#message h2 .j { color: #01398D; font-size: 2.8rem; font-weight: 600; }
#message .w { position: relative; z-index: 2; display: grid; margin-top: -15rem; grid-template-columns: 29% 1fr; }
#message .w .pw { margin-right: -24rem; }
#message .w .tww { position: relative; }
#message .w .tww .tw { position: relative; z-index: 1; width: 71rem; padding: 3rem 5rem 3rem 0; background-color: #F2F5F8; margin-top: 103%; }
#message .w .tww .tw h3 { position: relative; margin-bottom: 4rem; font-size: 3.4rem; font-weight: 700; }
#message .w .tww .tw h3 .cursive { z-index: -1; top: -14rem; right: 0; width: 9em; }
#message .w .tww .tw .btw { margin-top: 6rem; text-align: right; }
@media screen and (max-width:1720px) {
	#message h2::after { left: 0; }
	#message h2 .e { left: 1em; font-size: 5rem; }
	#message h2 .j { padding-left: 6rem; }
	#message .w { margin-top: -10rem; }
	#message .w .tww .tw { margin-left: 6rem; margin-top: 70%; }
	#message .w .pw { margin-right: -2rem; }
}
@media screen and (max-width:1030px) {
	#message .w { margin-top: 2rem; }
	#message .w .tww .tw { margin-top: 100%; }
}
@media screen and (max-width:896px) { /* m */
	#message h2::after { top: -10rem;  height: 90rem; }
	#message .w { display: block; }
	#message .w .tww .tw { margin-top: 0; width: calc(100% - 2rem); }
	#message .w .tww .tw .btw { margin-top: 3rem; }
}
@media screen and (max-width:480px) { /* s */
	#message .w .tww .tw h3 .cursive { right: -6rem; transform: scale(0.8,0.8); }
}

/* aboutPicup ----------*/
#aboutPicup { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr 1fr; }
#aboutPicup a { position: relative; display: grid; overflow: hidden; text-decoration: none; place-items: center; aspect-ratio: 64 / 82; }
#aboutPicup a::after { position: absolute; z-index: 2; top: 0; left: 0; content: ""; width: 100%; height: 100%; background-color: rgba(3, 28, 132, 0.24); transition: all 0.3s ease-out; }
#aboutPicup h3 { position: absolute; z-index: 3; color: #FFF; text-align: center; font-size: 4rem; font-weight: 700; }
#aboutPicup .bg { position: absolute; z-index: 1; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center; background-size: cover; transition: all 0.3s ease-out; }
#aboutPicup .specializes .cursive { left: -20%; width: 9.35em; }
#aboutPicup .introduction .cursive { top: -5rem; left: -34%; width: 9em; }
#aboutPicup .works .cursive { top: 0; left: 20%; width: 8em; }
#aboutPicup a:hover { opacity: 1; }
#aboutPicup a:hover::after { opacity: 0; }
#aboutPicup a:hover .bg { transform: scale(1.1, 1.1); }
@media screen and (max-width:1600px) {
	#aboutPicup .cursive { transform: scale(0.8,0.8); }
}
@media screen and (max-width:1400px) {
	#aboutPicup h3 { font-size: 3rem; }
	#aboutPicup .cursive { transform: scale(0.6,0.6); }
	#aboutPicup .works .cursive {}
}
@media screen and (max-width:896px) { /* m */
	#aboutPicup { grid-template-columns: 1fr; }
	#aboutPicup a { aspect-ratio: 1 / 0.8; }
	#aboutPicup .cursive { transform: scale(1,1); }
}
@media screen and (max-width:480px) { /* s */
	#aboutPicup a { aspect-ratio: 1 / 0.6; }
}

/* people ----------*/
#people { padding-top: 13rem; padding-bottom: 13rem; }
#people h2 { position: relative; font-size: 7rem; }
#people h2 .e { display: block; color: #01175F; text-align: center; font-weight: 400; font-family: 'Cinzel', serif; }
#people h2 .j { display: block; color: #01398D; text-align: center; font-size: 2.8rem; font-weight: 600; }
#people h2 .cursive { top: -10rem; left: 17%; width: 5.8em; }
#people h3 { margin-top: 4rem; margin-bottom: 3rem; text-align: center; font-size: 3.4rem; font-weight: 600; }
#people .people_list { padding: 0 38rem 0 13rem; }
#people .people_list .owl-stage-outer { overflow: visible; }
#people .people_list .owl-nav { position: absolute; top: 14vw; left: 0; display: flex; width: 100%; padding: 0 3rem; }
#people .people_list .owl-nav .owl-prev {}
#people .people_list .owl-nav .owl-next { margin-left: auto; }
#people .people_list .owl-nav .disabled { opacity: 0.3; cursor: default; }
#people .people_list .owl-item:nth-child(4n+1) { margin-top: 5rem; }
#people .people_list .owl-item:nth-child(4n+2) { margin-top: 16rem; }
#people .people_list .owl-item:nth-child(4n+3) {}
#people .people_list .owl-item:nth-child(4n+4) { margin-top: 7rem; }
#people .people_list li .tw { margin-top: 80%; margin-left: 7rem; }
#people .people_list li .bg { aspect-ratio: 442 / 522; }
#people .btw { text-align: right; }
@media screen and (max-width:1400px) {
	#people .people_list { padding: 0 19rem 0 6.5rem; }
}
@media screen and (max-width:480px) { /* s */
	#people { padding-top: 10rem; padding-bottom: 6rem; }
	#people h2 .cursive { transform: scale(0.8,0.8); }
	#people .people_list { padding: 0 12rem 0 4rem; }
	#people .people_list .owl-nav { top: 35vw; left: 0; padding: 0 1rem; }
	#people .people_list .owl-nav img { width: 4rem; }
}

/* ourStory ----------*/
#ourStory { padding-top: 10rem; padding-bottom: 15rem; background-color: #01175F; color: #FFF; }
#ourStory h2 { position: relative; text-align: center; font-size: 3.4rem; margin-bottom: 7rem; }
#ourStory h2 .j { display: inline-block; min-width: 70rem; padding-top: 1rem; border-top: solid 1px #FFF; color: #FFF; font-weight: 700; }
#ourStory h2 .cursive { width: 12.4em; top: -20rem; left: 27%; }
#ourStory .c_w { display: flex; margin-top: 12rem; }
#ourStory .c_w.-r { flex-direction: row-reverse; }
#ourStory .c_w .pw { position: relative; z-index: 1; width: 65%; }
#ourStory .c_w .tw { max-width: 66rem; position: relative; z-index: 2; width: 35%; margin-top: 20%; padding: 6rem 7rem; margin-left: -17rem; }
#ourStory .c_w.-r .tw { margin-left: 0; margin-right: -17rem; }
#ourStory .c_w .tw { background-color: #01175F; }
#ourStory .c_w .tw h3 { margin-bottom: 3rem; font-size: 3rem; position: relative; font-weight: 700; }
#ourStory .c_w .tw h3 .cursive { width: 18em; top: -15rem; left: -19rem; }
#ourStory .c_w .tw h3 p { font-size: 1.6rem; font-weight: 500; }
#ourStory .c_w .tw .btw { margin-top: 8rem; }
@media screen and (max-width:1400px) {
	#ourStory .c_w { margin-top: 8rem; }
	#ourStory .c_w .tw { margin-left: -5rem; margin-top: 10%; }
	#ourStory .c_w.-r .tw { margin-left: 0; margin-right: -5rem; }
	#ourStory .c_w .tw h3 .cursive { top: -16rem; left: -14rem; }
}
@media screen and (max-width:1200px) {
	#ourStory .c_w { display: block; }
	#ourStory .c_w .pw { width: 90%; }
	#ourStory .c_w.-r .pw { margin-left: 10%; }
	#ourStory .c_w .tw { width: 80%; max-width: none; margin-left: 20% !important; margin-top: -20%; }
	#ourStory .c_w.-r .tw { margin-left: 0 !important; }
	#ourStory .c_w .tw h3 .cursive { transform: scale(0.8,0.8); }
	#ourStory .c_w .tw .btw { margin-top: 3rem; }
}
@media screen and (max-width:480px) { /* s */
	#ourStory { padding-bottom: 6rem; }
	#ourStory h2 { margin-bottom: -4rem; }
	#ourStory h2 .j { min-width: auto; width: 100%; }
	#ourStory h2 .cursive { left: 12%; transform: scale(0.8,0.8); }
	#ourStory .c_w { margin-top: 6rem; }
	#ourStory .c_w .tw { padding: 3rem; }
	#ourStory .c_w .tw { width: 90%; max-width: none; margin-left: 10% !important; }
	#ourStory .c_w.-r .tw { margin-left: 0 !important; }
	#ourStory .c_w .tw h3 .cursive { transform: scale(0.6,0.6); }
}

/* crossTalk ----------*/
#crossTalk { padding-top: 13rem; padding-bottom: 13rem; }
#crossTalk .c_w { display: flex; margin-top: 12rem; }
#crossTalk .c_w.-r { flex-direction: row-reverse; }
#crossTalk .c_w .pw { position: relative; z-index: 1; width: 65%; }
#crossTalk .c_w .tw { max-width: 66rem; position: relative; z-index: 2; width: 35%; margin-top: 20%; padding: 6rem 7rem; margin-left: -17rem; }
#crossTalk .c_w.-r .tw { margin-left: 0; margin-right: -17rem; }
#crossTalk .c_w .tw { background-color: #F2F5F8; }
#crossTalk .c_w .tw h3 { margin-bottom: 3rem; font-size: 3rem; position: relative; font-weight: 700; }
#crossTalk .c_w .tw h3 .cursive { width: 18em; top: -19rem; left: -8rem; }
#crossTalk .c_w .tw h3 p { font-size: 1.6rem; font-weight: 500; }
#crossTalk .c_w .tw .btw { margin-top: 8rem; }
@media screen and (max-width:1120px) {
	#crossTalk .c_w { margin-top: 8rem; }
	#crossTalk .c_w .tw { margin-left: -5rem; margin-top: 10%; padding: 5rem 3rem; }
	#crossTalk .c_w.-r .tw { margin-left: 0; margin-right: -5rem; }
	#crossTalk .c_w .tw h3 .cursive { top: -16rem; left: -14rem; }
	#crossTalk .c_w .tw h3 .cursive { transform: scale(0.8,0.8); }
}
@media screen and (max-width:896px) { /* m */
	#crossTalk { padding-top: 0; padding-bottom: 6rem; }
	#crossTalk .c_w { display: block; }
	#crossTalk .c_w .pw { width: 90%; }
	#crossTalk .c_w.-r .pw { margin-left: 10%; }
	#crossTalk .c_w .tw { width: 80%; max-width: none; margin-left: 20% !important; margin-top: -20%; }
	#crossTalk .c_w.-r .tw { margin-left: 0 !important; }
	#crossTalk .c_w .tw h3 .cursive { transform: scale(0.6,0.6); }
	#crossTalk .c_w .tw .btw { margin-top: 3rem; }
}
@media screen and (max-width:480px) { /* s */
	#crossTalk { padding-top: 6rem; padding-bottom: 3rem; }
	#crossTalk .c_w { margin-top: 0; }
}

/* movie ----------*/
#movie { position: relative; height: 754px; }
#movie .tw { position: absolute; z-index: 2; top: 0; left: 0; right: 0; height: 100%; max-width: 53rem; margin: auto; padding: 29rem 5rem 0; background-color: rgba(1, 23, 95, 0.71); }
#movie .tw h2 { position: relative; margin-bottom: 5rem; font-size: 7rem; }
#movie .tw h2 span { display: block; text-align: center; }
#movie .tw h2 .e { color: #A6C7F8; font-weight: 400; font-family: 'Cinzel', serif; }
#movie .tw h2 .j { position: relative; color: #FFF; font-size: 2.8rem; font-weight: 600; }
#movie .tw h2 .cursive { width: 7.2em; top: -15rem; left: -4rem; }
#movie .tw p { color: #FFF; text-align: center; font-size: 1.8rem; font-weight: 600; }
#movie .tw .btw { position: absolute; width: 100%; left: 0; bottom: 5rem; text-align: center; }
#movie .bgs { position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; }
#movie .bgs .bg { position: absolute; width: 100%; height: 50%; background-size: auto 100%; }
#movie .bgs .bg1 { top: 0; }
#movie .bgs .bg2 { top: 50%; }
@media screen and (max-width:1120px) {
	#movie { height: 45rem; }
	#movie .tw { padding: 15rem 4rem 0; }
	#movie .tw h2 { margin-bottom: 3rem; font-size: 6rem; }
	#movie .tw h2 .cursive { transform: scale(0.8,0.8); top: -10rem; }
	#movie .tw .btw { bottom: 3rem; }
}
@media screen and (max-width:480px) { /* s */
	#movie .tw { max-width: 80%; }
}