@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@100..900&display=swap');



/* ==============================================
setting
============================================== */

html {
font-size: calc(100vw * 1 / 375);
line-height: calc(100vw * 1 / 375);
}
@media screen and (min-width:600px) {
html {
font-size: 1.6px;
line-height: 1.6px;
}
}
* {
font-family:"Roboto","Noto Sans JP","sans-serif";
font-size: 13rem;
line-height: 21rem;
letter-spacing: 0.4rem;
font-weight: 400;
color:#fff;
margin:0;
padding:0;
box-sizing: border-box;
}
img {
border:none;
vertical-align:top;
width: 100%;
height: auto;
}
ul {
list-style:none;
}
ul:after {
content:".";
clear:both;
height:0;
display:block;
visibility:hidden;
}
a{
text-decoration: none;
}
.pc{
display:none;
}
@media screen and (min-width:600px) {
.pc{
display:block;
}
.sp{
display:none;
}
}
.none{
display: none;
}



/* ==============================================
body
============================================== */

body{
text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
@media screen and (min-width:600px) {
::-webkit-scrollbar{
width: 4px;
}
::-webkit-scrollbar-track{
background: #eeeeee;
}
::-webkit-scrollbar-thumb{
background: #0071be;
}
}



/* ==============================================
nav
============================================== */

nav{
position: fixed;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 100%;
height: 60rem;
z-index: 1;
background: #fff;
padding: 0 8rem;
border-radius: 32rem 32rem 0 0;
filter: drop-shadow(0 0 8rem rgba(0,0,0,0.32));
transition: 0.4s ease-out;
}
@media screen and (min-width:600px) {
nav{
width: 600px;
}
}
nav.off{
bottom: -120rem;
}
nav .slick-track {
transform:unset!important;
}
nav .slick-slide{
position: relative;
float: left;
}
nav .slick-slide p{
}
nav .slick-slide p a{
font-size: 13rem;
line-height: 17rem;
letter-spacing: 0.4rem;
font-weight: 900;
text-align: center;
position: relative;
display: block;
width: 100%;
height: 60rem;
padding: 9rem 0 0 0;
}
nav .slick-slide.slick-current p a::before{
content: "";
position: absolute;
top: -4rem;
left: 0;
right: 0;
margin: auto;
background: #fff;
width: 8rem;
height: 8rem;
transform: rotate(45deg);
}
nav .slick-slide:nth-child(1) p a{
color: #ff6400;
}
nav .slick-slide:nth-child(2) p a{
color: #5028c6;
}
nav .slick-slide:nth-child(3) p a{
color: #00b2da;
}
nav .slick-slide:nth-child(4) p a{
color: #ee3c3c;
letter-spacing: -0.8rem;
}
nav .slick-slide p a img{
width: auto;
height: 20rem;
display: block;
margin: 0 auto 4rem auto;
}
nav .slick-slide ul{
position: fixed;
bottom: -44rem;
left: 16rem;
transition: 0.2s ease-out;
z-index: -1;
}
nav .slick-slide.slick-current ul{
bottom: 76rem;
}
nav.off .slick-slide.slick-current ul{
bottom: -44rem;
}
nav .slick-slide ul li{
display: inline-block;
margin: 0 4rem 0 0;
}
nav .slick-slide ul li a{
font-size: 14rem;
line-height: 18rem;
letter-spacing: 0.4rem;
font-weight: 400;
display: block;
background: #000;
height: 32rem;
border-radius: 16rem;
padding: 7rem 10rem 0 10rem;
filter: drop-shadow(0 2rem 4rem rgba(0,0,0,0.16));
}
nav .slick-slide ul li a span{
font-size: 14rem;
line-height: 18rem;
display: inline-block;
vertical-align: middle;
margin: -4rem 2rem 0 0;
}
nav .slick-prev,
nav .slick-next,
nav .slick-dots{
display: none!important;
}



/* ==============================================
main
============================================== */

main{
overflow: hidden;
margin: 0.1rem 0 0 0;
}
@media screen and (min-width:600px) {
main{
width: 600px;
margin: auto;
filter: drop-shadow(0 0 32px rgba(0,0,0,0.8));
}
}
main section{
position: relative;
float: left;
}



main .slick-dots {
position: fixed;
top: 16rem;
right: 18rem;
width: 60rem;
z-index: 1;
cursor: pointer;
filter: drop-shadow(0 2rem 4rem rgba(0,0,0,0.16));
transition: 0.2s ease-out;
}
@media screen and (min-width:600px) {
main .slick-dots {
right: 0;
left: 288rem;
margin: auto;
}
}
main .slick-dots.off{
top: -64rem;
}
main .slick-dots li {
float: left;
width: 8rem;
height: 8rem;
padding: 2rem 0 0 2rem;
transition: 0.2s ease-out;
}
main .slick-dots li button {
font-size: 0;
line-height: 0;
display: block;
width: 4rem;
height: 4rem;
border-radius: 2rem;
cursor: pointer;
border: none;
background: #fff;
transition: 0.4s ease-out;
}
main .slick-dots li.slick-active {
width: calc(100% - 24rem);
}
main .slick-dots li.slick-active button {
width: calc(100% - 2rem);
}



main .slick-prev{
font-size: 0;
line-height: 0;
border: none;
outline: none;
position: fixed;
top: 26rem;
right: 48rem;
width: 32rem;
height: 32rem;
background: url("../images/smr_cmn_icn-arrow.png") center no-repeat;
background-size: 24rem 24rem;
transform: scale(-1, 1);
z-index: 1;
cursor: pointer;
filter: drop-shadow(0 2rem 4rem rgba(0,0,0,0.16));
transition: 0.4s ease-out;
}
main .slick-prev.off{
top: -64rem;
}
@media screen and (min-width:600px) {
main .slick-prev{
right: 0;
left: 254rem;
margin: auto;
}
}
main .slick-next{
font-size: 0;
line-height: 0;
border: none;
outline: none;
position: fixed;
top: 26rem;
right: 16rem;
width: 32rem;
height: 32rem;
background: url("../images/smr_cmn_icn-arrow.png") center no-repeat;
background-size: 24rem 24rem;
z-index: 1;
cursor: pointer;
filter: drop-shadow(0 2rem 4rem rgba(0,0,0,0.16));
transition: 0.4s ease-out;
}
main .slick-next.off{
top: -64rem;
}
@media screen and (min-width:600px) {
main .slick-next{
right: 0;
left: 322rem;
margin: auto;
}
}



/* ==============================================
.plan
============================================== */

.plan{
position: relative;
overflow: hidden;
overflow-y: scroll;
}



/* ==============================================
.plan .hero
============================================== */

.plan .hero{
position: relative;
padding: 0 16rem;
}
.plan .hero h1,
.plan .hero .logo{
padding: 16rem 0 0 0;
}
.plan .hero h1 a,
.plan .hero .logo a{
}
.plan .hero h1 a img,
.plan .hero .logo a img{
width: auto;
height: 16rem;
filter: drop-shadow(0 2rem 4rem rgba(0,0,0,0.16));
}
.plan .hero .bg{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.plan .hero .bg video{
width: 100%;
height: 100%;
object-fit: cover;
}
.plan .hero .bg::after{
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(0deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.0) 100%);
}
.plan .hero .inner{
position: absolute;
bottom: 0;
left: 0;
}
.plan .hero .inner h2{
filter: drop-shadow(0 2rem 4rem rgba(0,0,0,0.16));
}
.plan .hero .inner h2 img{
}
.plan .hero .inner p{
font-size: 13rem;
line-height: 21rem;
letter-spacing: 0.4rem;
font-weight: 500;
color: #fff;
margin: 14rem 0 0 16rem;
filter: drop-shadow(0 2rem 4rem rgba(0,0,0,0.16));
}



.plan .hero .inner .scroll{
margin: 28rem 0 0 0;
}
.plan .hero .inner .scroll a{
position: relative;
display: block;
width: 375rem;
height: 64rem;
animation: scroll-a 0.4s ease-out 0.2s both;
}
@keyframes scroll-a {
0% {
transform: translateY(80rem);
}
100% {
transform: translateY(0);
}
}
#plan-01 .hero .inner .scroll a{
background: url("../images/smr_pln1_hr_bg.png");
background-size: 375rem 64rem;
}
#plan-02 .hero .inner .scroll a{
background: url("../images/smr_pln2_hr_bg.png");
background-size: 375rem 64rem;
}
#plan-03 .hero .inner .scroll a{
background: url("../images/smr_pln3_hr_bg.png");
background-size: 375rem 64rem;
}
#plan-04 .hero .inner .scroll a{
background: url("../images/smr_pln4_hr_bg.png");
background-size: 375rem 64rem;
}



.plan .hero .inner .scroll a span{
position: absolute;
top: -20rem;
left: 0;
right: 0;
margin: auto;
display: block;
width: 12rem;
height: 64rem;
border-radius: 6rem;
background: #fff;
animation: scroll-span 0.2s ease-out 0.5s both;
}
@keyframes scroll-span {
0% {
opacity: 0;
transform: translateY(-16rem);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.plan .hero .inner .scroll a span::before{
content: "";
position: absolute;
bottom: 5rem;
left: -24rem;
margin: auto;
display: block;
width: 40rem;
height: 12rem;
border-radius: 6rem;
background: #fff;
transform: rotate(45deg);
}
.plan .hero .inner .scroll a span::after{
content: "";
position: absolute;
bottom: 5rem;
left: -4rem;
margin: auto;
display: block;
width: 40rem;
height: 12rem;
border-radius: 6rem;
background: #fff;
transform: rotate(-45deg);
}



/* ==============================================
.plan .page
============================================== */

.plan .page{
position: relative;
z-index: 1;
overflow: hidden;
}
.plan #plan-01-01{background: #ff6400;}
.plan #plan-01-02{background: #f05500;}
.plan #plan-01-03{background: #dc4b00;}
.plan #plan-01-04{background: #ff6400;}

.plan #plan-02-01{background: #5028c6;}
.plan #plan-02-02{background: #4123b4;}
.plan #plan-02-03{background: #4123b4;}
.plan #plan-02-04{background: #5028c6;}

.plan #plan-03-01{background: #00b2da;}
.plan #plan-03-02{background: #00a0d7;}
.plan #plan-03-03{background: #00a0d7;}
.plan #plan-03-04{background: #0093cb;}

.plan #plan-04-01{background: #ee3c3c;}
.plan #plan-04-02{background: #dc3232;}
.plan #plan-04-03{background: #cd2d2d;}
.plan #plan-04-04{background: #0093cb;}

.plan .page::before{
content: "";
position: absolute;
top: -30rem;
left: -30rem;
width: 160rem;
height: 160rem;
opacity: 0.16;
z-index: -1;
}
#plan-01 .page::before{
background: url("../images/smr_pln1_msg_icn.png");
background-size: 160rem 160rem;
}
#plan-02 .page::before{
background: url("../images/smr_pln2_msg_icn.png");
background-size: 160rem 160rem;
}
#plan-03 .page::before{
background: url("../images/smr_pln3_msg_icn.png");
background-size: 160rem 160rem;
}
#plan-04 .page::before{
background: url("../images/smr_pln4_msg_icn.png");
background-size: 160rem 160rem;
}



.plan .page .inner{
padding: 0 32rem;
}



.plan .page .inner h2{
font-size: 21rem;
line-height: 29rem;
letter-spacing: 0.4rem;
font-weight: 900;
color: #fff;
margin: 0 -32rem 0 0;
padding: 21rem 0 0 0;
}
.plan .page .inner h2 span{
font-family: "Roboto Condensed";
font-size: 11rem;
line-height: 15rem;
letter-spacing: 0.4rem;
font-weight: 400;
color: #fff;
display: block;
margin: 0 0 8rem 0;
}
.plan .page .inner h2 span img{
width: 16rem;
display: inline-block;
vertical-align: middle;
margin: -3rem 4rem 0 -1rem;
}
.plan .page .inner h2 strong{
font-size: 21rem;
line-height: 29rem;
letter-spacing: 0.4rem;
font-weight: 900;
display: inline-block;
color: #fff;
text-indent: -12rem;
}
.plan #plan-01-02 .inner h2{
line-height: 25rem;
padding: 14rem 0 0 0;
}
.plan #plan-01-02 .inner h2 strong{
line-height: 25rem;
}



.plan .page .inner .video{
position: absolute;
bottom: 92rem;
left: 32rem;
width: calc(100% - 64rem);
height: calc(100% - 192rem);
z-index: -1;
}
#plan-03 .page .inner .video{
height: calc(100% - 388rem);
}
@media screen and (max-height:600px) {
#plan-03 .page .inner .video{
height: calc(100% - 290rem);
}
}
.plan .page .inner .video img,
.plan .page .inner .video video{
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 16rem;
position: relative;
z-index: -1;
}
.plan .page .inner .video a{
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 80rem;
height: 80rem;
border-radius: 40rem;
background:rgba(0,0,0,0.8) url("../images/smr_pln_icn-play.png") top 26rem left 32rem no-repeat;
background-size: 24rem 28rem;
z-index: 1;
}
#plan-03 .page .inner .video a{
transform: scale(1.0,1.0);
}
.plan .page .inner .video span{
font-size: 10rem;
line-height: 14rem;
text-align: center;
display: block;
width: 100%;
position: absolute;
top: 8rem;
left: 0;
filter: drop-shadow(0 0 2rem rgba(0,0,0,1.6));
}



.plan .page .inner .item{
position: relative;
margin: 20rem -32rem 0 -32rem;
text-align: center;
}
@media screen and (max-height:600px) {
.plan .page .inner .item img{
width: 240rem;
}
}
.plan .page .inner .item span{
font-family: "Roboto Condensed";
font-size: 40rem;
line-height: 44rem;
letter-spacing: 0rem;
font-weight: 700;
text-align: right;
color: #fff;
display: block;
position: absolute;
bottom: 36rem;
right: 30rem;
}
.plan .page .inner .item span img{
display: inline-block;
vertical-align: middle;
width: 17rem!important;
margin: -8rem 2rem 0 0;
}
.plan .page .inner .item span small{
font-family: "Roboto Condensed";
font-size: 10rem;
line-height: 14rem;
letter-spacing: 0.4rem;
font-weight: 700;
color: #fff;
display: block;
margin: -4rem 2rem 0 0;
}



.plan .page .inner .banner{
position: absolute;
bottom: 92rem;
left: 32rem;
width: calc(100% - 64rem);
height: calc(100% - 220rem);
}
.plan .page .inner .banner img{
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 16rem;
}



.plan .page .inner h3{
font-size: 15rem;
line-height: 19rem;
letter-spacing: 0.4rem;
font-weight: 700;
color: #fff;
margin: -110rem 0 0 0;
position: relative;
z-index: 1;
}
.plan .page .inner h3 span{
font-family:"Roboto Condensed","Noto Sans JP","sans-serif";
font-size: 13rem;
line-height: 17rem;
letter-spacing: 0.4rem;
font-weight: 700;
color: #fff;
display: block;
margin: 0 0 8rem 0;
}



#plan-03 .page .inner div{
display: inline-block;
width: calc(50% - 2rem);
vertical-align: top;
}
#plan-03 .page .inner div h3{
letter-spacing: 0;
text-align: center;
margin: -126rem 0 0 0;
}
#plan-03 .page .inner div h3 span{
margin: 0 0 4rem 0;
}
#plan-03 .page .inner div p{
font-family: "Roboto Condensed";
font-size: 21rem;
line-height: 25rem;
letter-spacing: 0rem;
font-weight: 700;
text-align: center;
color: #fff;
display: block;
}
#plan-03 .page .inner div p img{
display: inline-block;
vertical-align: middle;
width: 9rem!important;
margin: -4rem 2rem 0 0;
}
#plan-03 .page .inner div p small{
font-family: "Roboto Condensed";
font-size: 10rem;
line-height: 14rem;
letter-spacing: 0.4rem;
font-weight: 700;
color: #fff;
display: inline-block;
margin: 0 0 0 2rem;
}



.plan .page .inner .button{
position: absolute;
bottom: 124rem;
right: 0;
}
.plan .page .inner .button a{
font-size: 16rem;
line-height: 24rem;
letter-spacing: 0.8rem;
font-weight: 700;
display: block;
height: 44rem;
border-radius: 22rem 0 0 22rem;
background: #fff;
padding: 10rem 8rem 0 20rem;
filter: drop-shadow(0 2rem 4rem rgba(0,0,0,0.32));
}
#plan-01 .page .inner .button a{
color: #ff6400;
}
#plan-02 .page .inner .button a{
color: #5028c6;
}
#plan-03 .page .inner .button a{
color: #00b2da;
}
#plan-04 .page .inner .button a{
color: #ee3c3c;
}
.plan .page .inner .button a span{
position: relative;
display: inline-block;
width: 23rem;
height: 23rem;
border-radius: 12rem;
vertical-align: middle;
margin: -3rem 0 0 8rem;
}
#plan-01 .page .inner .button a span{
background: #ff6400;
}
#plan-02 .page .inner .button a span{
background: #5028c6;
}
#plan-03 .page .inner .button a span{
background: #00b2da;
}
#plan-04 .page .inner .button a span{
background: #ee3c3c;
}
.plan .page .inner .button a span::before{
content: "";
width: 10rem;
height: 2rem;
border-radius: 1rem;
background: #fff;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.plan .page .inner .button a span::after{
content: "";
width: 2rem;
height: 10rem;
border-radius: 1rem;
background: #fff;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.plan .page .inner .button a img{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 12px;
}
#plan-03 .page .inner .button a span::before,
#plan-03 .page .inner .button a span::after{
display: none;
}
#plan-04 .page .inner .button a span::before{
content: "";
width: 7rem;
height: 2rem;
border-radius: 1rem;
background: #fff;
position: absolute;
top: 0;
bottom: 4rem;
left: 1rem;
right: 0;
margin: auto;
transform: rotate(45deg);
}
#plan-04 .page .inner .button a span::after{
content: "";
width: 7rem;
height: 2rem;
border-radius: 1rem;
background: #fff;
position: absolute;
top: 4rem;
bottom: 0;
left: 1rem;
right: 0;
margin: auto;
transform: rotate(-45deg);
}



.plan .page .inner .scroll{
position: absolute;
top: 24rem;
bottom: 0;
right: 0;
margin: auto;
width: 32rem;
height: 64rem;
}
.plan .page .inner .scroll a{
display: block;
}
.plan .page .inner .scroll a strong{
font-family: "Roboto Condensed";
font-size: 10rem;
line-height: 14rem;
letter-spacing: 0.4rem;
font-weight: 400;
color: #fff;
display: block;
transform: rotate(90deg);
}
.plan .page .inner .scroll a span{
display: block;
position: absolute;
bottom: 0;
left: 16rem;
width: 1rem;
height: 40rem;
border-radius: 1rem;
background: #fff;
}
.plan .page .inner .scroll a span::before{
content: "";
position: absolute;
bottom: 0;
left: -3rem;
display: block;
width: 7rem;
height: 7rem;
border-radius: 4rem;
background: #fff;
animation: next 1.2s ease-out 0.0s infinite both;
}
@keyframes next {
0% {
bottom: 36rem;
}
80% {
bottom: 0;
}
100% {
bottom: 0;
}
}



/* ==============================================
.plan .message
============================================== */

.plan .message{
position: relative;
display: table;
width: 100%;
}
.plan .message .inner{
position: relative;
display: table-cell;
vertical-align: middle;
padding: 0 0 108rem 0;
z-index: 1;
}
#plan-03 .message .inner{
padding: 0 0 60rem 0;
}
.plan .message .inner h2{
}
.plan .message .inner h2 img{
width: 60rem;
display: block;
margin: 0 auto 8rem auto;
}
.plan .message .inner h2 span{
font-family: "Roboto Condensed";
font-size: 11rem;
line-height: 15rem;
letter-spacing: 0.8rem;
font-weight: 700;
color: #fff;
text-align: center;
display: block;
}
.plan .message .inner p{
font-size: 17rem;
line-height: 29rem;
letter-spacing: 0.8rem;
font-weight: 700;
text-align: center;
margin: 24rem 0 32rem 0;
}
.plan .message .inner .button{
margin: 16rem 48rem 0 48rem;
}
.plan .message .inner .button a{
font-size: 16rem;
line-height: 24rem;
letter-spacing: 0.4rem;
font-weight: 700;
display: block;
height: 44rem;
border-radius: 22rem;
background: #fff;
padding: 10rem 0 0 0;
filter: drop-shadow(0 2rem 4rem rgba(0,0,0,0.32));
}
#plan-01 .message .inner .button a{
color: #ff6400;
}
#plan-02 .message .inner .button a{
color: #5028c6;
}
#plan-03 .message .inner .button a{
color: #00b2da;
}
.plan .message .inner .button a span{
font-size: 16rem;
line-height: 24rem;
display: inline-block;
vertical-align: middle;
margin: -4rem 4rem 0 0;
}
.plan .message .inner .copy{
font-size: 10rem;
line-height: 14rem;
letter-spacing: 0.8rem;
font-weight: 400;
text-align: center;
margin: 32rem 0 0 0;
}
.plan .message .bg{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.08;
}
.plan .message .bg video{
width: 100%;
height: 100%;
object-fit: cover;
}



/* ==============================================
#movie
============================================== */

#movie{
}
#movie .movie{
position: fixed;
top: 0;
right: 0;
width: 100%;
height: 100%;
background:rgba(0,0,0,0.8);
z-index: -1;
opacity: 0;
transition: 0.2s ease-out;
}
#movie .movie.open{
opacity: 1;
z-index: 2;
}
#movie .movie .movie-inner{
position: absolute;
top: 0;
bottom: 64rem;
left: 16rem;
right: 16rem;
width: calc(100% - 32rem);
height: 192rem;
width: 270rem;
height: 480rem;
margin: auto;
filter: drop-shadow(0 0 8rem rgba(0,0,0,0.8));
transition: 0.2s ease-out;
}
@media screen and (max-height:600px) {
#movie .movie .movie-inner{
width: 225rem;
height: 400rem;
}
}
@media screen and (min-width:600px) {
#movie .movie .movie-inner{
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 360px;
height: 640px;
}
@media screen and (max-height:600px) {
#movie .movie .movie-inner{
width: 225px;
height: 400px;
}
}
}
#movie .movie .movie-inner iframe{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 8rem;
}



#movie .movie .close{
position: fixed;
bottom: 32rem;
right: -100%;
transition: 0.2s ease-out;
}
#movie .movie.open .close{
right: 0;
}
#movie .movie .close a{
font-size: 15rem;
line-height: 23rem;
letter-spacing: 0.8rem;
font-weight: 700;
display: block;
height: 44rem;
border-radius: 22rem 0 0 22rem;
background: #fff;
padding: 10rem 8rem 0 20rem;
}
#movie #movie-01-01 .close a,
#movie #movie-01-02 .close a,
#movie #movie-01-03 .close a{
color: #ff6400;
}
#movie #movie-02-01 .close a,
#movie #movie-02-02 .close a,
#movie #movie-02-03 .close a{
color: #5028c6;
}
#movie #movie-03-01 .close a,
#movie #movie-03-02 .close a,
#movie #movie-03-03 .close a{
color: #00b2da;
}
#movie .movie .close a span{
position: relative;
display: inline-block;
width: 24rem;
height: 24rem;
border-radius: 12rem;
vertical-align: middle;
margin: -3rem 0 0 8rem;
}
#movie #movie-01-01 .close a span,
#movie #movie-01-02 .close a span,
#movie #movie-01-03 .close a span{
background: #ff6400;
}
#movie #movie-02-01 .close a span,
#movie #movie-02-02 .close a span,
#movie #movie-02-03 .close a span{
background: #5028c6;
}
#movie #movie-03-01 .close a span,
#movie #movie-03-02 .close a span,
#movie #movie-03-03 .close a span{
background: #00b2da;
}
#movie .movie .close a span::before{
content: "";
width: 10rem;
height: 2rem;
border-radius: 1rem;
background: #fff;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}



/* ==============================================
#schedule
============================================== */

#schedule{
}
#schedule .schedule{
position: fixed;
top: 0;
right: -100%;
width: 100%;
height: 100%;
z-index: 2;
transition: 0.2s ease-out;
}
#schedule .schedule.open{
right: 0;
}
#schedule .schedule .schedule-inner{
position: absolute;
top: 0;
right: 0;
width: calc(100% - 16rem);
height: 100%;
background:rgba(0,0,0,0.8);
border-radius: 32rem 0 0 32rem;
padding: 4rem 32rem 100rem 32rem;
overflow-y: scroll;
}



#schedule .schedule .schedule-inner h3{
font-family: "Roboto Condensed";
font-size: 15rem;
line-height: 19rem;
letter-spacing: 0.4rem;
font-weight: 700;
color: #fff;
height: 32rem;
border-radius: 16rem 0 0 16rem;
position: relative;
margin: 28rem -32rem 0 0;
padding: 7rem 0 0 9rem;
}
#schedule #schedule-01-01 .schedule-inner h3,
#schedule #schedule-01-02 .schedule-inner h3,
#schedule #schedule-01-03 .schedule-inner h3{
background: #ff6400;
}
#schedule #schedule-02-01 .schedule-inner h3,
#schedule #schedule-02-02 .schedule-inner h3,
#schedule #schedule-02-03 .schedule-inner h3{
background: #5028c6;
}
#schedule .schedule .schedule-inner h3 img{
width: 16rem;
display: inline-block;
vertical-align: middle;
margin: -3rem 4rem 0 0;
}
#schedule .schedule .schedule-inner h3 span{
font-family: "Roboto Condensed";
font-size: 11rem;
line-height: 15rem;
letter-spacing: 0.4rem;
font-weight: 700;
color: #fff;
position: absolute;
top: 8rem;
right: 10rem;
}
#schedule .schedule .schedule-inner h3::after{
content: "";
position: absolute;
top: 32rem;
left: 72rem;
width: 1rem;
height: 32rem;
background: rgba(255,255,255,0.4);
}
#schedule .schedule .schedule-inner dl{
position: relative;
}
#schedule .schedule .schedule-inner dl::after{
content: "";
position: absolute;
top: 0;
left: 72rem;
width: 1rem;
height: calc(100% + 32rem);
background: rgba(255,255,255,0.4);
}
#schedule .schedule .schedule-inner dl:last-child::after{
display: none;
}
#schedule .schedule .schedule-inner dl dt{
font-size: 15rem;
line-height: 23rem;
letter-spacing: 0.4rem;
font-weight: 900;
color: #fff;
position: relative;
margin: 28rem 0 0 0;
padding: 0 0 0 92rem;
}
#schedule .schedule .schedule-inner dl dt strong{
font-family: "Roboto Condensed";
font-size: 20rem;
line-height: 24rem;
letter-spacing: 0.4rem;
font-weight: 700;
text-align: right;
color: #fff;
display: block;
position: absolute;
top: 0;
left: 0;
width: 52rem;
}
#schedule .schedule .schedule-inner dl dt span{
font-size: 13rem;
line-height: 23rem;
letter-spacing: 0.4rem;
font-weight: 900;
color: #fff;
text-align: center;
display: block;
position: absolute;
top: -1rem;
left: 60rem;
width: 24rem;
height: 24rem;
border-radius: 12rem;
background: #fff;
z-index: 1;
}
#schedule .schedule .schedule-inner dl dt a{
font-size: 15rem;
line-height: 23rem;
letter-spacing: 0.4rem;
font-weight: 900;
color: #fff;
}
#schedule .schedule .schedule-inner dl dt a::after{
content: "";
background: url("../images/smr_cmn_icn-arrow.png") no-repeat;
background-size: 14rem 14rem;
width: 14rem;
height: 14rem;
display: inline-block;
vertical-align: middle;
margin: -4rem 0 0 4rem;
}
#schedule .schedule .schedule-inner dl dd{
font-size: 13rem;
line-height: 21rem;
letter-spacing: 0.4rem;
font-weight: 400;
color: #fff;
text-align: justify;
padding: 0 0 0 92rem;
margin: 4rem 0 0 0;
}
#schedule .schedule .schedule-inner dl dd:first-child{
margin: 32rem 0 0 0;
}
#schedule .schedule .schedule-inner dl dd a{
font-size: 13rem;
line-height: 17rem;
letter-spacing: 0.4rem;
font-weight: 400;
display: inline-block;
background: #fff;
height: 32rem;
border-radius: 16rem;
margin: 12rem 0 0 0;
padding: 7rem 16rem 0 16rem;
filter: drop-shadow(0 2rem 4rem rgba(0,0,0,0.32));
}
#schedule #schedule-01-01 .schedule-inner dl dd a,
#schedule #schedule-01-02 .schedule-inner dl dd a,
#schedule #schedule-01-03 .schedule-inner dl dd a{
color: #ff6400;
}
#schedule #schedule-02-01 .schedule-inner dl dd a,
#schedule #schedule-02-02 .schedule-inner dl dd a,
#schedule #schedule-02-03 .schedule-inner dl dd a{
color: #5028c6;
}
#schedule .schedule .schedule-inner .banner{
margin: 32rem 0 0 0;
}
#schedule .schedule .schedule-inner .banner a img{
border-radius: 8rem;
}
@media screen and (min-width:600px) {
#schedule .schedule .schedule-inner .banner a img{
width: 320px;
border-radius: 8px;
}
}


#schedule .schedule .close{
position: fixed;
bottom: 32rem;
right: -100%;
transition: 0.2s ease-out;
}
#schedule .schedule.open .close{
right: 0;
}
#schedule .schedule .close a{
font-size: 15rem;
line-height: 23rem;
letter-spacing: 0.8rem;
font-weight: 700;
display: block;
height: 44rem;
border-radius: 22rem 0 0 22rem;
background: #fff;
padding: 10rem 8rem 0 20rem;
}
#schedule #schedule-01-01 .close a,
#schedule #schedule-01-02 .close a,
#schedule #schedule-01-03 .close a{
color: #ff6400;
}
#schedule #schedule-02-01 .close a,
#schedule #schedule-02-02 .close a,
#schedule #schedule-02-03 .close a{
color: #5028c6;
}
#schedule .schedule .close a span{
position: relative;
display: inline-block;
width: 24rem;
height: 24rem;
border-radius: 12rem;
vertical-align: middle;
margin: -3rem 0 0 8rem;
}
#schedule #schedule-01-01 .close a span,
#schedule #schedule-01-02 .close a span,
#schedule #schedule-01-03 .close a span{
background: #ff6400;
}
#schedule #schedule-02-01 .close a span,
#schedule #schedule-02-02 .close a span,
#schedule #schedule-02-03 .close a span{
background: #5028c6;
}
#schedule .schedule .close a span::before{
content: "";
width: 10rem;
height: 2rem;
border-radius: 1rem;
background: #fff;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}



/* ==============================================
#bg
============================================== */

#bg{
display: none;
}
@media screen and (min-width:600px) {
#bg{
display: block;
}
}
#bg div{
position: fixed;
width: calc(50% - 300px);
height: 50%;
display: table;
z-index: -1;
}
#bg div:nth-child(1){
top: 0;
left: 0;
background: #ff6400;
}
#bg div:nth-child(2){
bottom: 0;
left: 0;
background: #5028c6;
}
#bg div:nth-child(3){
top: 0;
right: 0;
background: #00b2da;
}
#bg div:nth-child(4){
bottom: 0;
right: 0;
background: #ee3c3c;
}
#bg div p{
font-family: "Roboto Condensed";
font-size: 21px;
line-height: 29px;
letter-spacing: 0.8px;
font-weight: 400;
color: #fff;
display: table-cell;
text-align: center;
vertical-align: middle;
padding: 0 0 16px 0;
opacity: 0.4;
}
#bg div p img{
width: 80px;
display: block;
margin: 0 auto 24px auto;
}