@charset "utf-8";
/*-----------------------------
スマホのみ
-------------------------*/
.sp-mv{ display: none;}
@media screen and (max-width: 800px) {
.sp-mv{ width: 100%; height: 140vh; background: #000; display: block; position: absolute; left: 0; top: 0; z-index:100000001; }
.scroll1 .sp-mv{ pointer-events: none;}
.openMenu .sp-mv{ display: none;}
.sp-mv span{ width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center;}
.sp-mv span img{ width: 160px; height: auto;}
}
/*-----------------------------
mv
-------------------------*/
#mv{ position: relative; z-index: 1;}
#mv .sp-image{ display: none;}
#mv .image{ width: 100%; height: auto; display: flex; justify-content: center; align-items: center; z-index: 1; position: relative;}
#mv .image .pc{ display: block;}
#mv .image .sp{ display: none;}
#mv .image .maskBK{ width: 100%; height: 100%; position: absolute; z-index: 9; left: 0; top: 0; right: 0; bottom: 0; display: block; background: rgba(0,0,0,.6); opacity: 0;}
/**/
.mv-obj{ display: none;}
.mv-obj#mv-obj4{ display: block !important; opacity: 0;}
.opBody1 .mv-obj#mv-obj4{ opacity: 1;}
#mv p.movie_set{ width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; position: absolute; left: 0; top: 50%; z-index: 10;}
#mv p.movie_set > span{ display: flex; flex-direction: row; justify-content: center; align-items: center; margin-top: 5px;}
#mv p.movie_set > span br{ display: none;}
#mv p.movie_set span span{ display: inline-block; color: #fff; font-size: 30px; transform: translate(0px, 30px); opacity: 0;}
#mv p.movie_set.on_movie span.t1.setTit span:nth-child(1){ animation-delay: 0.03s !important;}
#mv p.movie_set.on_movie span.t1.setTit span:nth-child(2){ animation-delay: 0.06s !important;}
#mv p.movie_set.on_movie span.t1.setTit span:nth-child(3){ animation-delay: 0.09s !important;}
#mv p.movie_set.on_movie span.t1.setTit span:nth-child(4){ animation-delay: 0.12s !important;}
#mv p.movie_set.on_movie span.t1.setTit span:nth-child(5){ animation-delay: 0.15s !important;}
#mv p.movie_set.on_movie span.t1.setTit span:nth-child(6){ animation-delay: 0.18s !important;}
#mv p.movie_set.on_movie span.t1.setTit span:nth-child(7){ animation-delay: 0.21s !important;}
#mv p.movie_set.on_movie span.t1.setTit span:nth-child(8){ animation-delay: 0.24s !important;}
#mv p.movie_set.on_movie span.t1.setTit span:nth-child(9){ animation-delay: 0.27s !important;}
#mv p.movie_set.on_movie span.t1.setTit span:nth-child(10){ animation-delay: 0.30s !important;}
#mv p.movie_set.on_movie span.t1.setTit span:nth-child(11){ animation-delay: 0.33s !important;}
#mv p.movie_set.on_movie span.t1.setTit span:nth-child(12){ animation-delay: 0.36s !important;}
#mv p.movie_set.on_movie span.t1.setTit span:nth-child(13){ animation-delay: 0.39s !important;}
#mv p.movie_set.on_movie span.t1.setTit span:nth-child(14){ animation-delay: 0.42s !important;}
#mv p.movie_set.on_movie span.t1.setTit span:nth-child(15){ animation-delay: 0.45s !important;}
#mv p.movie_set.on_movie span.t1.setTit span:nth-child(16){ animation-delay: 0.48s !important;}
#mv p.movie_set.on_movie span.t1.setTit span:nth-child(17){ animation-delay: 0.51s !important;}
#mv p.movie_set.on_movie span.t1.setTit span:nth-child(18){ animation-delay: 0.54s !important;}
#mv p.movie_set.on_movie span.t1.setTit span:nth-child(19){ animation-delay: 0.57s !important;}
#mv p.movie_set.on_movie span.t1.setTit span:nth-child(20){ animation-delay: 0.60s !important;}
#mv p.movie_set.on_movie span.t2.setTit span:nth-child(1){ animation-delay: 0.60s !important;}
#mv p.movie_set.on_movie span.t2.setTit span:nth-child(2){ animation-delay: 0.63s !important;}
#mv p.movie_set.on_movie span.t2.setTit span:nth-child(3){ animation-delay: 0.66s !important;}
#mv p.movie_set.on_movie span.t2.setTit span:nth-child(4){ animation-delay: 0.69s !important;}
#mv p.movie_set.on_movie span.t2.setTit span:nth-child(5){ animation-delay: 0.72s !important;}
#mv p.movie_set.on_movie span.t2.setTit span:nth-child(6){ animation-delay: 0.75s !important;}
#mv p.movie_set.on_movie span.t2.setTit span:nth-child(7){ animation-delay: 0.78s !important;}
#mv p.movie_set.on_movie span.t2.setTit span:nth-child(8){ animation-delay: 0.81s !important;}
#mv p.movie_set.on_movie span.t2.setTit span:nth-child(9){ animation-delay: 0.84s !important;}
#mv p.movie_set.on_movie span.t2.setTit span:nth-child(10){ animation-delay: 0.87s !important;}
#mv p.movie_set.on_movie span.t2.setTit span:nth-child(11){ animation-delay: 0.90s !important;}
#mv p.movie_set.on_movie span.t2.setTit span:nth-child(12){ animation-delay: 0.93s !important;}
#mv p.movie_set.on_movie span.t2.setTit span:nth-child(13){ animation-delay: 0.96s !important;}
#mv p.movie_set.on_movie span.t2.setTit span:nth-child(14){ animation-delay: 0.99s !important;}
#mv p.movie_set.on_movie span.t2.setTit span:nth-child(15){ animation-delay: 1.02s !important;}
#mv p.movie_set.on_movie span.t2.setTit span:nth-child(16){ animation-delay: 1.05s !important;}
#mv p.movie_set.on_movie span.t2.setTit span:nth-child(17){ animation-delay: 1.08s !important;}
#mv p.movie_set.on_movie span.t2.setTit span:nth-child(18){ animation-delay: 1.11s !important;}
#mv p.movie_set.on_movie span.t2.setTit span:nth-child(19){ animation-delay: 1.14s !important;}
@media screen and (min-width: 800px) {
#mv p.movie_set.on_movie span.setTit span{ animation: movie_set_on 0.15s ease-out 1 forwards;}
#mv p.movie_set.off_movie span.setTit span{ animation: movie_set_off 0.2s ease-out 1 forwards;}
}
@keyframes movie_set_on{
0% { opacity: 0; transform: translate(0px, 30px);}
100% { opacity: 1; transform: translate(0px, 0px);}
}
@keyframes movie_set_off{
0% { opacity: 1; transform: translate(0px, 0px);}
100% { opacity: 0; transform: translate(0px, 30px);}
}

@media screen and (min-width:600px) and (max-width: 1100px) {
#mv .image .pc{ width: 1100px; max-width: 1100px;}
}
@media screen and (max-width: 800px) {
body, 
#mv{ overflow-y: visible !important;}
#mv{ background: #000;}
#mv .image{ display: none;}
/**/
#mv p.movie_set span span{transform: translate(0px, 0); opacity: 1;}
#mv p.movie_set{ width: 100%; position: relative; left: auto; top: auto;}
.mv-obj{ width: 100%; height: 100vh; display: block;}
.mv-obj#mv-obj1{ z-index: 5; height: 140vh;}
.mv-obj#mv-obj2{ z-index: 6;}
.mv-obj#mv-obj3{ z-index: 7;}
.mv-obj#mv-obj4{ z-index: 20; display: flex; justify-content: center; align-items: center;}
#mv .sp-back{ width: 100%; height: 100%; display: block; position: absolute; left: 0; top:0;}
#mv .sp-back > span{ width: 100vw; height: 100vh; display: block; position: sticky; top: 0; left: 0; overflow: hidden;}
#mv .sp-back > span .i{ width: 100vw; height: 100vh; display: block;}
#mv .sp-back.sp-back1{ z-index: 10;}
#mv .sp-back.sp-back1 > span .i{ background: url("../img/top/mv2.jpg") 50% 100% no-repeat; background-size: cover; opacity: 1;}
#mv .sp-back.sp-back2{ z-index: 9;}
#mv .sp-back.sp-back2 > span .i{ background: url("../img/top/mv.jpg") 50% 50% no-repeat; background-size: cover; opacity: 1;}
#mv .sp-back.sp-back3{ z-index: 8; background: #000;}
}
@media screen and (min-width:600px) and (max-width: 800px) {
#mv p.movie_set span span{ font-size:4.0vw;}
}
@media screen and (max-width: 600px) {
#mv p.movie_set > span, 
#mv p.movie_set > span br{ display: block;}
#mv p.movie_set span span{ font-size:6.8vw; font-weight: 400;}	
}

/*-----------------------------
info
-------------------------*/
#info{ padding: 85px 2% 0; position: relative; z-index: 100; background: #fff;}
#info .inner{ flex-direction: row; justify-content: space-between; align-items: flex-start; margin-bottom: 73px; position: relative; z-index: 10;}
#info .inner.row-reverse{ flex-direction: row-reverse; justify-content: space-between;}
#info .inner .item{ width: 48%; display: flex; flex-direction: column;}
#info .inner .item img {width: 100%; max-width: 500px; height: auto;}
#info .inner.row-reverse img{ text-align: right;}
#info .inner .item h1{ display: block; font-size: 26px; font-weight: 500; margin-bottom: 10px; line-height: 1.8em;}
#info .inner .item h2{ display: block; font-size: 28px; font-weight: 500; margin-bottom: 10px;}
#info .inner .item p{ display: block; font-size: 26px; letter-spacing: 0; line-height: 1.8em;}
#info .inner.row-reverse p{ padding-left: 5px; white-space: nowrap;}
#info .inner .item p a{ display: inline-block; line-height: 26px; padding: 0 30px 0 5px;  font-size: 14px; border: solid 1px #aaa; margin-top: 20px; position: relative;}
#info .inner .item p a::after{ content: ">"; font-size: 14px; line-height: 14px; position: absolute; right: 8px; top: 50%; margin-top: -7px; color: #999; transition: 0.2s;}
#info .inner .item p a:hover{ background: #333; border: solid 1px #333; color: #fff;}
#info .inner .item p a:hover::after{ color: #fff; right: 4px;}
@media screen and (max-width: 1100px) {
#info .inner.row-reverse p{ white-space:wrap;}
#info .inner .item p br{ display: none;}
#info .inner .item p br.block{ display: block;}
}
@media screen and (max-width: 1000px) {
#info .inner .item h1{ font-size:2.6vw; letter-spacing: -1px;}
}
@media screen and (max-width: 950px) {
#info .inner .item h2{ font-size:2.8vw;}
#info .inner .item p{ font-size:2.5vw;}
}

@media screen and (max-width: 600px) {
#info{ padding: 0 0 60px;}
#info .inner:nth-child(1){transform: translate(0px) !important;}

#info::after{ width: 100%; height: 200px; content: ""; background: #000; left: 0; top: 0; position: absolute; z-index: 1;}
#info .inner, 
#info .inner.row-reverse{ flex-direction: column; justify-content: center; margin-bottom: 70px;}
#info .inner .item{ width: 100%; }
#info .inner .item h1{ font-size: 7.0vw; margin: 30px 5% 0px; letter-spacing: 1px;}
#info .inner .item h2{ font-size:28px; margin: 30px 5% 10px;}
#info .inner .item p{ font-size:26px; padding: 30px 5%;}
#info .inner .item img { max-width: 600px;}
#info .inner .item p a{ line-height: 40px; padding: 0 40px 0 15px; font-weight: 500;}
}