@charset "utf-8";
main > section{ background: #fff;}
@media screen and (min-width: 800px) {
#menuBtn{ display: none;}
header{ background: none !important;}
.scroll header, 
.pconMenu header{ background: #fff !important;}
}
/*================================

===================================*/
.srv-top{ width: 100vw; height: 300px; position: fixed; left: 0; top: 0; z-index: -100;}
.srv-top .mv-overray{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; display: block; background: rgba(255,255,255,.2); z-index: 10; opacity: 0; transition: 1.8s; pointer-events: none;}
.scroll2 .srv-top .mv-overray{ opacity: 1;}
.scroll2 #newMv{ filter: blur(2px);}
.srv-top2{ width: 100vw; height: 300px; display: block; position: relative; z-index: 10;}
/**/
#newMv { width: 100%; height: 100%; display: block; position: relative;}
/**/
#newMv .mvTitle{ width: 100%; height: 100%; display: flex; flex-direction: column-reverse; justify-content: center; align-items: center; position: absolute; left: 0; top: 0; background: rgba(0,0,0,.7); z-index: 100; padding-top: 50px;}
#newMv .mvTitle *{ display: block;}
#newMv .mvTitle h1 span{ font-size: 22px; color: #fff; font-weight: 900; position: relative; padding: 15px 0 0;}
#newMv .mvTitle h1 span::after{ width: 0; height: 6px; border-radius: 30px; background: #fff; transition: 0.8s; position: absolute; left: 50%; top: 0; content: "";}
.opBody #newMv .mvTitle h1 span::after{ width: 100%; left: 0;}
#newMv .mvTitle .eng{ font-size: 54px; color: #fff; text-align: center;}
#newMv .mvTitle .txt{ color: #fff; font-size: 12px;}
/**/
.scroll2 .srv-top{ height: 100vh; max-height: none;}
.scroll2 #newMv .mvTitle{ display: none !important;}

/*================================

===================================*/
#newMv #newMv_gallery{}
#newMv #newMv_gallery {width: 100%; height: 100%; display: block; position: absolute; left: 0; top: 0; z-index: 1;}
#newMv #newMv_gallery .gl-wrap{ width: 100%; height: 100%; display: block; position: relative;}

#newMv #newMv_gallery .gl-wrap .mvArea{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1;}
#newMv #newMv_gallery .gl-wrap .mvArea.play { z-index: 10;}
#newMv #newMv_gallery .gl-wrap .mvArea.play-after { z-index: 15;}
.scroll2 #newMv #newMv_gallery{ display: none;}

/*-------
個別：#newMv .mvArea
共通指定
------- */
#newMv .mvArea{}
#newMv .mvArea::after{ width: 0%; height: 100%; position: absolute; left: 0; top: 0; opacity: 0; z-index: -10000; content: ""; transition:0.4s;}
#newMv .mvArea.play::after{ width: 100%; opacity: 1; z-index: -1000; transition-delay: 1.0s;}
#newMv .mvArea.play-after::after{ width: 0%; opacity: 0; z-index: -10000;}
#newMv .mvArea .menuDesign{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 2; display: flex; flex-direction: row; justify-content: center; align-items: center;}
#newMv .mvArea .menuDesign { opacity: 0; transition:0.7s 0.1s;}
#newMv .mvArea.play .menuDesign { opacity: 1;}

#newMv .mvArea .menuDesign div { width: 100%; max-width: 1200px; height: 100%; display: block; position: relative; z-index: 10;}
#newMv .mvArea .menuDesign::before{ z-index: 3;}

/*画像*/
#newMv .mvArea .backImg{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1; display: flex; flex-direction: row; justify-content: center; align-items: center;}
#newMv .mvArea .backImg div{ width: 100%; height: 100%; display: block;}
#newMv .mvArea .backImg div.full {}
#newMv .mvArea .backImg div.min { max-width: 1200px;}
#newMv .mvArea .t1, 
#newMv .mvArea .t2{position: absolute; left: 0; top: 0; z-index: 4; display: flex;}

#newMv .mvArea .c1, 
#newMv .mvArea .c2, 
#newMv .mvArea .c3, 
#newMv .mvArea .c4, 
#newMv .mvArea .c5, 
#newMv .mvArea .c6, 
#newMv .mvArea .c7, 
#newMv .mvArea .c8, 
#newMv .mvArea .c9, 
#newMv .mvArea .c10, 
#newMv .mvArea .t1, 
#newMv .mvArea .t2{ mask-image: url("../../img/type/en.svg"); mask-repeat: no-repeat; -webkit-mask-image: url("../../img/type/en.svg"); -webkit-mask-repeat: no-repeat; mask-size: 0px 0px; -webkit-mask-size: 0px 0px;}
#newMv .mvArea.play .t1, 
#newMv .mvArea.play .t2 { mask-size: 100% 100%; -webkit-mask-size: 100% 100%;}

.hpEng2{ font-family: 'Cinzel', serif;}
#newMv .mvArea .backImg div{ animation: new_mvItemt 9000s linear infinite forwards; background-position: 50% -10000%;}
@keyframes new_mvItemt{
from { background-position: 50% -10000%;}
to { background-position: 50% 0%;}
}

/*■■ newMV0 ■■■■■■■■■■■■■■■-*/
#newMv .mvArea#newMV0::after{}
#newMv .mvArea#newMV0 .menuDesign::before{}
#newMv .mvArea#newMV0 .menuDesign div {}
#newMv .mvArea#newMV0 .menuDesign div{}
#newMv .mvArea#newMV0 .backImg div{background: url("../../img/img_create/mv_hayashi.webp"); background-size: 100% auto;}
#newMv .mvArea#newMV0 .c1{ transition: 3.8s 0.2s; mask-position: 40% 65%; -webkit-mask-position: 40% 65%;}
#newMv .mvArea#newMV0 .c2{ transition: 1.8s 1.4s; mask-position: -10% 20%; -webkit-mask-position: -10% 20%;}
#newMv .mvArea#newMV0 .c3{ transition: 3.5s 0.8s; mask-position: 50% 10%; -webkit-mask-position: 50% 10%;}
#newMv .mvArea#newMV0 .c4{ transition: 2.6s 1.2s; mask-position: 8% 30%; -webkit-mask-position: 8% 30%;}

#newMv .mvArea#newMV0 .c5{ transition: 2.2s 1.8s; mask-position: 70% 60%; -webkit-mask-position: 70% 60%;}
#newMv .mvArea#newMV0 .c6{ transition: 3.2s 1.0s; mask-position: 90% 15%; -webkit-mask-position: 90% 15%;}
#newMv .mvArea#newMV0 .c7{ transition: 2.0s 1.4s; mask-position: 80% 50%; -webkit-mask-position: 80% 50%;}
#newMv .mvArea#newMV0 .c8{ transition: 3.8s 0.6s; mask-position: 15% 85%; -webkit-mask-position: 15% 85%;}

#newMv .mvArea#newMV0.play .c1 { mask-size: 600px 600px; -webkit-mask-size: 600px 600px;}
#newMv .mvArea#newMV0.play .c2 { mask-size: 3000px 3000px; -webkit-mask-size: 3000px 3000px;}
#newMv .mvArea#newMV0.play .c3 { mask-size: 1500px 1500px; -webkit-mask-size: 1500px 1500px;} 
#newMv .mvArea#newMV0.play .c4 { mask-size: 400px 400px; -webkit-mask-size: 400px 400px;}

#newMv .mvArea#newMV0.play .c5 { mask-size: 200px 200px; -webkit-mask-size: 200px 200px;}
#newMv .mvArea#newMV0.play .c6 { mask-size: 600px 600px; -webkit-mask-size: 600px 600px;}
#newMv .mvArea#newMV0.play .c7 { mask-size: 400px 400px; -webkit-mask-size: 400px 400px;}
#newMv .mvArea#newMV0.play .c8 { mask-size: 3000px 3000px; -webkit-mask-size: 3000px 3000px;}

/*■■ newMV1 ■■■■■■■■■■■■■■■-*/
#newMv .mvArea#newMV1::after{}
#newMv .mvArea#newMV1 .menuDesign::before{}
#newMv .mvArea#newMV1 .menuDesign div {}
#newMv .mvArea#newMV1 .menuDesign div{}
/**/
#newMv .mvArea#newMV1 .backImg div{background: url("../../img/img_create/mv_umber.webp"); background-size: 100% auto;}
#newMv .mvArea#newMV1 .c1{ transition: 1.8s 0.6s; mask-position: -10% -5%; -webkit-mask-position: -10% -5%;}
#newMv .mvArea#newMV1 .c2{ transition: 3.2s 0.4s; mask-position: 10% 60%; -webkit-mask-position: 10% 60%;}
#newMv .mvArea#newMV1 .c3{ transition: 3.0s 1.2s; mask-position: 90% 70%; -webkit-mask-position: 90% 70%;}
#newMv .mvArea#newMV1 .c4{ transition: 2.4s 0.8s; mask-position: 50% 10%; -webkit-mask-position: 50% 10%;}

#newMv .mvArea#newMV1 .c5{ transition: 2.2s 0.8s; mask-position: 90% 90%; -webkit-mask-position: 90% 90%;}
#newMv .mvArea#newMV1 .c6{ transition: 3.0s 0.4s; mask-position: 35% 25%; -webkit-mask-position: 35% 25%;}
#newMv .mvArea#newMV1 .c7{ transition: 2.4s 1.4s; mask-position: 60% 90%; -webkit-mask-position: 60% 90%;}
#newMv .mvArea#newMV1 .c8{ transition: 1.8s 1.2s; mask-position: 10% 70%; -webkit-mask-position: 10% 70%;}

#newMv .mvArea#newMV1.play .c1 { mask-size: 2200px 2200px; -webkit-mask-size: 2200px 2200px;}
#newMv .mvArea#newMV1.play .c2 { mask-size: 800px 800px; -webkit-mask-size: 800px 800px;}
#newMv .mvArea#newMV1.play .c3 { mask-size: 300px 300px; -webkit-mask-size: 300px 300px;} 
#newMv .mvArea#newMV1.play .c4 { mask-size: 1400px 1400px; -webkit-mask-size: 1400px 1400px;}

#newMv .mvArea#newMV1.play .c5 { mask-size: 3000px 3000px; -webkit-mask-size: 3000px 3000px;}
#newMv .mvArea#newMV1.play .c6 { mask-size: 300px 300px; -webkit-mask-size: 300px 300px;}
#newMv .mvArea#newMV1.play .c7 { mask-size: 600px 600px; -webkit-mask-size: 600px 600px;}
#newMv .mvArea#newMV1.play .c8 { mask-size: 3000px 3000px; -webkit-mask-size: 3000px 3000px;}

/*■■ newMV2 ■■■■■■■■■■■■■■■-*/
#newMv .mvArea#newMV2::after{}
#newMv .mvArea#newMV2 .menuDesign::before{}
#newMv .mvArea#newMV2 .menuDesign div {}
#newMv .mvArea#newMV2 .menuDesign div{}
/**/
#newMv .mvArea#newMV2 .backImg div{background: url("../../img/img_create/mv_takusu.webp"); background-size: 100% auto;}
#newMv .mvArea#newMV2 .c1{ transition: 2.5s 0.6s; mask-position: 10% -10%; -webkit-mask-position: 10% -10%;}
#newMv .mvArea#newMV2 .c2{ transition: 3.2s 1.2s; mask-position: 70% 20%; -webkit-mask-position: 70% 20%;}
#newMv .mvArea#newMV2 .c3{ transition: 2.8s 0.4s; mask-position: 45% 70%; -webkit-mask-position: 45% 70%;}
#newMv .mvArea#newMV2 .c4{ transition: 2.2s 0.8s; mask-position: 75% 50%; -webkit-mask-position: 75% 50%;}

#newMv .mvArea#newMV2 .c5{ transition: 2.9s 0.8s; mask-position: 20% 10%; -webkit-mask-position: 20% 10%;;}
#newMv .mvArea#newMV2 .c6{ transition: 2.6s 0.4s; mask-position: 5% 90%; -webkit-mask-position: 5% 90%;}
#newMv .mvArea#newMV2 .c7{ transition: 2.6s 0.6s; mask-position: 90% 85%; -webkit-mask-position: 90% 85%;}
#newMv .mvArea#newMV2 .c8{ transition: 3.0s 0.8s; mask-position: 85% 15%; -webkit-mask-position: 85% 15%;}

#newMv .mvArea#newMV2.play .c1 { mask-size: 2200px 2200px; -webkit-mask-size: 2200px 2200px;}
#newMv .mvArea#newMV2.play .c2 { mask-size: 700px 700px; -webkit-mask-size: 700px 700px;}
#newMv .mvArea#newMV2.play .c3 { mask-size: 700px 700px; -webkit-mask-size: 700px 700px;} 
#newMv .mvArea#newMV2.play .c4 { mask-size: 3000px 3000px; -webkit-mask-size: 3000px 3000px;}

#newMv .mvArea#newMV2.play .c5 { mask-size: 200px 200px; -webkit-mask-size: 200px 200px;}
#newMv .mvArea#newMV2.play .c6 { mask-size: 400px 400px; -webkit-mask-size: 400px 400px;}
#newMv .mvArea#newMV2.play .c7 { mask-size: 400px 400px; -webkit-mask-size: 400px 400px;}
#newMv .mvArea#newMV2.play .c8 { mask-size: 300px 300px; -webkit-mask-size: 300px 300px;}


/*■■ newMV3 ■■■■■■■■■■■■■■■-*/
#newMv .mvArea#newMV3::after{}
#newMv .mvArea#newMV3 .menuDesign::before{}
#newMv .mvArea#newMV3 .menuDesign div {}
#newMv .mvArea#newMV3 .menuDesign div{}
/**/
#newMv .mvArea#newMV3 .backImg div{background: url("../../img/img_create/mv_fk.webp"); background-size: 100% auto;}
#newMv .mvArea#newMV3 .c1{ transition: 1.8s 0.8s; mask-position: -10% 60%; -webkit-mask-position: -10% 60%;}
#newMv .mvArea#newMV3 .c2{ transition: 1.8s 1.4s; mask-position: 15% 10%; -webkit-mask-position: 15% 10%;}
#newMv .mvArea#newMV3 .c3{ transition: 1.5s 0.8s; mask-position: 90% 0%; -webkit-mask-position: 90% 0%;}
#newMv .mvArea#newMV3 .c4{ transition: 2.8s 0.2s; mask-position: 85% 90%; -webkit-mask-position: 85% 90%;}

#newMv .mvArea#newMV3 .c5{ transition: 2.2s 1.8s; mask-position: 30% 60%; -webkit-mask-position: 30% 60%;}
#newMv .mvArea#newMV3 .c6{ transition: 2.2s 1.0s; mask-position: 70% 10%; -webkit-mask-position: 70% 10%;}
#newMv .mvArea#newMV3 .c7{ transition: 2.0s 1.4s; mask-position: 50% 0%; -webkit-mask-position: 80% 50%;}
#newMv .mvArea#newMV3 .c8{ transition: 2.8s 0.2s; mask-position: 40% 55%; -webkit-mask-position: 40% 55%;}

#newMv .mvArea#newMV3.play .c1 { mask-size: 3000px 3000px; -webkit-mask-size: 600px 600px;}
#newMv .mvArea#newMV3.play .c2 { mask-size: 900px 900px; -webkit-mask-size: 900px 900px;}
#newMv .mvArea#newMV3.play .c3 { mask-size: 2500px 2500px; -webkit-mask-size: 2500px 2500px;} 
#newMv .mvArea#newMV3.play .c4 { mask-size: 1400px 1400px; -webkit-mask-size: 1400px 1400px;}

#newMv .mvArea#newMV3.play .c5 { mask-size: 800px 200px; -webkit-mask-size: 200px 200px;}
#newMv .mvArea#newMV3.play .c6 { mask-size: 300px 300px; -webkit-mask-size: 300px 300px;}
#newMv .mvArea#newMV3.play .c7 { mask-size: 400px 400px; -webkit-mask-size: 400px 400px;}
#newMv .mvArea#newMV3.play .c8 { mask-size: 3000px 3000px; -webkit-mask-size: 3000px 3000px;}

/*■■ newMV5 ■■■■■■■■■■■■■■■-*/
#newMv .mvArea#newMV4::after{}
#newMv .mvArea#newMV4 .menuDesign::before{}
#newMv .mvArea#newMV4 .menuDesign div {}
#newMv .mvArea#newMV4 .menuDesign div{}
/**/
#newMv .mvArea#newMV4 .backImg div{background: url("../../img/img_create/mv_f_maga.webp"); background-size: 100% auto;}
#newMv .mvArea#newMV4 .c1{ transition: 2.8s 0.6s; mask-position: 20% 70%; -webkit-mask-position: 20% 70%;}
#newMv .mvArea#newMV4 .c2{ transition: 1.2s 1.8s; mask-position: 35% 5%; -webkit-mask-position: 35% 5%;}
#newMv .mvArea#newMV4 .c3{ transition: 2.0s 1.2s; mask-position: 50% 90%; -webkit-mask-position: 50% 90%;}
#newMv .mvArea#newMV4 .c4{ transition: 2.4s 0.8s; mask-position: 65% 30%; -webkit-mask-position: 65% 30%;}

#newMv .mvArea#newMV4 .c5{ transition: 3.2s 0.2s; mask-position: 80% 60%; -webkit-mask-position: 90% 60%;}
#newMv .mvArea#newMV4 .c6{ transition: 2.4s 0.4s; mask-position: 35% 25%; -webkit-mask-position: 35% 25%;}
#newMv .mvArea#newMV4 .c7{ transition: 2.0s 1.4s; mask-position: 105% 40%; -webkit-mask-position: 105% 40%;}
#newMv .mvArea#newMV4 .c8{ transition: 2.8s 0.8s; mask-position: -10% 50%; -webkit-mask-position: -10% 50%;}

#newMv .mvArea#newMV4.play .c1 { mask-size: 600px 600px; -webkit-mask-size: 600px 600px;}
#newMv .mvArea#newMV4.play .c2 { mask-size: 600px 600px; -webkit-mask-size: 600px 600px;}
#newMv .mvArea#newMV4.play .c3 { mask-size: 600px 600px; -webkit-mask-size: 600px 600px;} 
#newMv .mvArea#newMV4.play .c4 { mask-size: 600px 600px; -webkit-mask-size: 600px 600px;}

#newMv .mvArea#newMV4.play .c5 { mask-size: 600px 600px; -webkit-mask-size: 3000px 3000px;}
#newMv .mvArea#newMV4.play .c6 { mask-size: 600px 600px; -webkit-mask-size: 300px 300px;}
#newMv .mvArea#newMV4.play .c7 { mask-size: 2400px 2400px; -webkit-mask-size: 2400px 2400px;}
#newMv .mvArea#newMV4.play .c8 { mask-size: 2400px 2400px; -webkit-mask-size: 2400px 2400px;}

/*■■ newMV5 ■■■■■■■■■■■■■■■-*/
#newMv .mvArea#newMV5::after{}
#newMv .mvArea#newMV5 .menuDesign::before{}
#newMv .mvArea#newMV5 .menuDesign div {}
#newMv .mvArea#newMV5 .menuDesign div{}
/**/
#newMv .mvArea#newMV5 .backImg div{background: url("../../img/img_create/mv_fpro.webp"); background-size: 100% auto;}
#newMv .mvArea#newMV5 .c1{ transition: 2.5s 0.8s; mask-position: 30% 5%; -webkit-mask-position: 100% -5%;}
#newMv .mvArea#newMV5 .c2{ transition: 2.2s 1.2s; mask-position: 70% 70%; -webkit-mask-position: 70% 70%;}
#newMv .mvArea#newMV5 .c3{ transition: 2.8s 2.4s; mask-position: -2% -2%; -webkit-mask-position: -2% -2%;}
#newMv .mvArea#newMV5 .c4{ transition: 2.4s 2.0s; mask-position: 100% 101%; -webkit-mask-position: 100% 101%;}

#newMv .mvArea#newMV5 .c5{ transition: 2.0s 0.2s; mask-position: 25% 70%; -webkit-mask-position: 25% 70%;}
#newMv .mvArea#newMV5 .c6{ transition: 1.8s 0.3s; mask-position: 40% 20%; -webkit-mask-position: 40% 20%;}
#newMv .mvArea#newMV5 .c7{ transition: 1.6s 0.4s; mask-position: 60% 85%; -webkit-mask-position: 60% 85%;}
#newMv .mvArea#newMV5 .c8{ transition: 2.2s 0.2s; mask-position: 77% 15%; -webkit-mask-position: 77% 15%;}

#newMv .mvArea#newMV5.play .c1 { mask-size: 2200px 2200px; -webkit-mask-size: 2200px 2200px;}
#newMv .mvArea#newMV5.play .c2 { mask-size: 1000px 1000px; -webkit-mask-size: 1000px 1000px;}
#newMv .mvArea#newMV5.play .c3 { mask-size: 3000px 3000px; -webkit-mask-size: 3000px 3000px;} 
#newMv .mvArea#newMV5.play .c4 { mask-size: 3000px 3000px; -webkit-mask-size: 3000px 3000px;}

#newMv .mvArea#newMV5.play .c5 { mask-size: 200px 200px; -webkit-mask-size: 200px 200px;}
#newMv .mvArea#newMV5.play .c6 { mask-size: 400px 400px; -webkit-mask-size: 400px 400px;}
#newMv .mvArea#newMV5.play .c7 { mask-size: 400px 400px; -webkit-mask-size: 400px 400px;}
#newMv .mvArea#newMV5.play .c8 { mask-size: 300px 300px; -webkit-mask-size: 300px 300px;}




/*-----------------------------------------------------
一覧
---------------*/
#serList { padding: 80px 0; }
#serList .wrap{ width: 100%; display: flex; flex-direction: row; justify-content: flex-start; flex-wrap: wrap;}
#serList .item{ width: 44%; margin: 50px 3%; display: block;}
#serList .item a { width: 100%; display: flex; flex-direction: column; background: #fff; box-shadow: 0 8px 16px 0 rgba(0,0,0,.2);}
#serList .item a:hover{ box-shadow: 0 0 0 1px rgba(0,0,0,.8);}
#serList .item a .img{ width: 100%; height: auto; display: block;}
#serList .item a:hover .img img{ opacity: 0.7;}
#serList .item a .text{ padding: 20px 20px 0;}
#serList .item a .text, 
#serList .item a .text > *{ display: block; width: 100%;}
#serList .item a .text h2{ font-size: 16px; font-weight: bold; margin-bottom: 15px;}
#serList .item a .text p{ height: 80px; font-size: 14px; color: #666; line-height: 1.3em;}


@media screen and (max-width: 800px) {
#serList .wrap{ flex-direction: column; justify-content: center; align-items: center;}
#serList .item{ width: 90%; margin: 40px 5%; max-width: 450px;}
#serList .item a .text{ padding: 20px 20px 40px;}
#serList .item a .text p{ height: auto;}

}

@media screen and (max-width: 600px) {
#serList .item a .text h2{ font-size: 15px;}
#serList .item a .text p{ font-size: 13px;}

}