@charset "UTF-8";
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video,main {margin:0;padding:0;border:0;font-size:100%;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,main {display:block;}
body {font-family:Verdana,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif;line-height:1;}
ol,ul {list-style:none;}
blockquote,q {quotes:none;}
blockquote:before,blockquote:after,q:before,q:after {content:'';content:none;}
table {border-collapse:collapse;border-spacing:0;}
wbr:after {content:"\00200B";}

/*	TBS reset
============================== */
.alt {position:absolute;top:-5000px;left:-9999px;}
.clearfix:after {content:"";clear:both;display:block;}
.hide-txt {text-indent:110%;white-space:nowrap;overflow:hidden;}
.fp-causion {display:none;}
.nocontxt {-webkit-touch-callout: none;-webkit-user-select: none;user-select: none;-webkit-user-drag:none;}
.nocontxt img {pointer-events: none;}
@media all and (min-width:768px) {
.alt-pc {position:absolute;top:-5000px;left:-9999px;}
.clearfix-pc:after {content:"";clear:both;display:block;}
.hide-txt-pc {text-indent:110%;white-space:nowrap;overflow:hidden;}
}
@media all and (max-width:767px) {
.alt-smp {position:absolute;top:-5000px;left:-9999px;}
.clearfix-smp:after {content:"";clear:both;display:block;}
.hide-txt-smp {text-indent:110%;white-space:nowrap;overflow:hidden;}
}
div.embed-tbsplayer {
background-color:#000;
position:relative;
height:0;
padding-top:56.25%;
}
div.embed-tbsplayer .tbs-player {
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
}
div.embed-tbsplayer-audio {
background-color:#fff;
}
div.embed-tbsplayer-audio .tbs-player {
height:46px;
}
div.lbx-overlay {
z-index:10000;position:absolute;background-color:#000;width:100%;height:100%;left:0;top:0;right:0;bottom:0;opacity:0.9;
}
/* ============================== */
/*img cover*/
.cover {width:100%; height:100%;}
/*link*/
a{text-decoration:none; color:#fff;}
a:hover{ text-decoration:none; color:#fff;}

.alt{
text-indent:100%;
white-space:nowrap;
overflow:hidden;
}

@media all and (min-width:768px) {
.alt-pc {position:absolute;top:-5000px;left:-9999px;}
.clearfix-pc:after {content:"";clear:both;display:block;}
.hide-txt-pc {text-indent:110%;white-space:nowrap;overflow:hidden;}
.br-smp{display: none;}
}
@media all and (max-width:767px) {
.alt-smp {position:absolute;top:-5000px;left:-9999px;}
.clearfix-smp:after {content:"";clear:both;display:block;}
.hide-txt-smp {text-indent:110%;white-space:nowrap;overflow:hidden;}
.br-pc{display: none;}
}
/*///////////////// style ////////////////*/
body{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; min-height: 100vh;}
.container{position: relative;}
.content p,
footer p,
.content table,
.content li{
font-feature-settings : "palt";
letter-spacing:0.08em;
font-family: "m-plus-rounded-1c", sans-serif;
font-weight:500;
font-style: normal;
color: #fff;
font-size: 1.7vw;
line-height: 1.6;
}

@media all and (max-width: 767px) {
.content p,
.content table,
.content li{
font-size: 3.8vw;
line-height:2;
}
}
/*///////////////// header ////////////////*/
header .headerArea{
  position: relative;
  width:100%;
  background-size:cover;
  overflow:hidden;
}
.headerArea{
  padding:8vw 0 4vw;
  background:url(../img/main_pc.jpg?1) center bottom no-repeat;
  background-size:cover;
}
.headerArea h1{position:relative; background:url(../img/logo.png) no-repeat center top; background-size:contain; width:90%; height:0; padding:45% 0 0; margin:auto; display:block;
  animation: zoom-in-and-tilt 1s ease-in forwards;}
.headerArea h1 img,#movie .playmov span img,#news ul li span.thum img,#product figure img{position:absolute;left:0;top:0; width:100%; height:100%;}
@keyframes zoom-in-and-tilt {
  0% {
    transform: scale(0.25) rotate(0deg);
  }
  50% {
    transform: scale(1) rotate(0deg);
  }
  70% {
      transform: scale(1) rotate(-4deg);
  }
    80% {
        transform: scale(1) rotate(4deg);
    }
    100% {
    transform: scale(1) rotate(0deg);
  }
}  
header .Nintendologo{
  position: absolute;top: 0;left: 0;
  background:url(../img/switch_logo.svg) left top no-repeat;
  background-size:cover;
  aspect-ratio: 1/1;
  width: 10vw;
}
header .steam{
  position: absolute;top:2vw;left: 11vw;
  background:url(../img/steam.svg) center center no-repeat;
  background-size:contain;
  aspect-ratio: 3/1;
  width: 15vw;
}
#menu{margin:5vw auto 0; width:90vw;}
#menu ul {display: flex; flex-flow: row wrap; justify-content: center; align-items: center;}
#menu li {text-align:center; vertical-align: middle; position: relative; background-color:#20bfff; border-radius:100vh; border:3px solid #0134d7; color:#0134d7; font-size:3vw;
line-height:100%;
width: calc(100% / 4 - 4%);
box-shadow: 3px 3px 0px 0px #0134d7, 0px 0px 0px 2px #fff inset;
font-family: "dela-gothic-one", sans-serif;
font-weight: 400;
font-style: normal;
text-shadow: -1px -1px 0 #fff, 0px -1px 0 #fff, 1px -1px 0 #fff, -1px 0px 0 #fff, 1px 0px 0 #fff, -1px 1px 0 #fff, 0px 1px 0 #fff, 1px 1px 0 #fff;
background:#20bfff url(../img/tsuya.svg) right 1.25vw top .6vw no-repeat;
background-size:2vw;
margin:0 .5vw 0;
}
#menu li a{color:#0134d7; display: block; box-sizing: border-box; padding:.6em 0;}

.bnr{width:100%; padding:5.25vw 0 2.5vw; margin:0 auto;
background:linear-gradient(to top, rgba(180,224,253,1) 0%,rgba(180,224,253,0.4) 77%,rgba(180,224,253,0) 100%);
}
.bnr ul {width:40%; margin:0 auto; display: flex; flex-flow: row wrap; justify-content: center; align-items: center;}
.bnr ul li {text-align:center; vertical-align: middle; position: relative;
width: calc(100% / 2 - 2vw);
background:url(../img/bn_n.svg) center center no-repeat;
margin:0 1vw;
background-size:contain;
}
.bnr ul li:nth-child(2){background-image:url(../img/bn_s.svg);}
.bnr ul li a{display: block; aspect-ratio: 2.65/1;}

@media all and (max-width: 767px) {
.headerArea{padding:14vw 0 5vw; background:url(../img/main_sp.jpg?1) right bottom 15% no-repeat; background-size:105%;}
.headerArea h1{padding:50% 0 0;}
#menu{width:92%; margin:5vw auto 0;}
#menu li {width: calc(92% / 2 - 2vw); margin:0 1vw 2vw; font-size:6vw; background-size:4.8vw; background-position:right 1.8vw top 1vw;}
#menu li a{padding:3.4vw 0;}
header .Nintendologo{width:14vw;}
.bnr{padding:5vw 0 4vw; }
.bnr ul {width:72%;}
header .steam{width:20vw; top:3.5vw; left:15vw;}
}

/*///////////////// news ////////////////*/
#news{position: relative; padding:2.5vw 0 5vw;
background-image:url(../img/planet.png),url(../img/space.jpg);
background-repeat:no-repeat,no-repeat;
background-position:center bottom,center center;
background-size:100%,cover;
border-top:6px solid #0134d7; 
border-bottom:6px solid #0134d7; 
}
#news h2{text-align:center; padding:0 0 2vw;}
#news h2 img{height:6vw;}
#news ul{display: flex; flex-flow: row wrap; justify-content: center; align-items: stretch; max-width:980px; margin:0 auto;}
#news ul li{position: relative; margin:0 0 .8em .8em; z-index:1; background-color:#ffb8d1; border-radius:2vw; border:3px solid #0134d7; overflow:hidden;
width: calc(100% / 3 - 4%);
box-shadow: 3px 3px 0px 0px #0134d7
}
#news ul li span.thum{width:100%; height:0; padding:58% 0 0; display:block; background-size: cover; background-repeat: no-repeat; background-position: center top; position: relative;}
#news ul li p{line-height:130%; font-weight:500; font-size:90%; letter-spacing:.05em; display:block; width:88%; padding:1.5vw 0 1.5vw; color:#0134d7; margin:0 auto;}
#news ul li a{display:block; width:100%; color:#0134d7;}
#news ul li span.ymd{color:#00a0e9; font-size:85%; font-weight:600; display:inline-block; position:absolute; bottom:0; right:0; text-align:right; line-height:100%; padding:.3em .3em 0 .4em;
background-color:#ffb8d1;
border-radius:8px 0 0 0;
letter-spacing:.01em;
}
#news a.newsmore{font-size:2.8vw; display: block; width:24vw; text-align:center; color:#fff; font-weight: 600;
padding:.6em 0; margin:0 auto;
z-index:11;
border-radius:100vh;
background-color:#e4007f;
font-family: "dela-gothic-one", sans-serif;
font-weight: 400;
font-style: normal;
position:absolute; bottom:-3vw; left:0; right:0;
}
#news a.newsmore span{position: relative; padding:0 0 0 1.1em;}
#news a.newsmore span:before{
content: "";
position: absolute;
left:0;
top:0;
bottom:0;
margin:auto 0;
width:1.8vw;
height:1.8vw;
background:url(../img/arw.svg) left center no-repeat;
background-size:contain;
}

@media all and (max-width: 767px) {
#news{padding:3vw 0 9vw; background-size:105%,cover;}
#news h2 img{height:9.5vw;}
#news ul{width:100%; display: flex; flex-flow: row nowrap; align-items:stretch;
overflow:hidden;
-ms-overflow-style: none;
scrollbar-width: none;
}
#news ul::-webkit-scrollbar {display:none;}
#news ul li{width: calc(100% / 2 - 6vw); font-size:3vw; margin:0 1.5vw 0; border-radius:3vw;}
#news ul li:last-of-type{display:none;}
#news ul li p{font-size:3.2vw; padding:2vw 0 2.5vw;}
#news a.newsmore{font-size:4.5vw; width:40vw; padding:2.5vw 0; bottom:-5vw;}
#news a.newsmore span:before{width:3vw; height:3vw;}
}

/*///////////////// play ////////////////*/
#play {background:url(../img/bg.jpg) center bottom no-repeat;
background-size: cover;
padding:1.25vw 0 1vw;
position: relative;}
.spaceship{position:absolute; top:-2vw; right:2vw; width:22%; animation: fluffy 3s infinite; z-index:1;}
.heart{position:absolute; top:4vw; left:28vw; width:10%; animation: heartbeat .8s alternate infinite; z-index:1;}
@keyframes heartbeat
{
0% { transform: scale(0.8); }
100% { transform: scale(1); }
}
@keyframes fluffy {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}
#play h2{padding:2.5vw 0 1vw; width:85%; margin:0 auto;}
#play h2 img{height:5vw;}
#play .howto .inner{position: relative; display: flex; flex-flow: row wrap; justify-content: center; align-items: center; width:85%; margin:0 auto; padding:0 0 2% 2%;}

.howto{opacity:0; transition: all 1s ease; transition-delay: calc(var(--delay) * 1.5s);}
.howto.visible{opacity:1;}

#play .step1,#play .step2,#play .step3,#play .step4{width:100%; overflow:hidden; position: relative; padding:1vw 0;}
#play .step1:before,
#play .step2:before,
#play .step3:before,
#play .step4:before{
content: "";
position: absolute;
top:0;
bottom:0;
margin:auto;
left:0;
z-index:0;
width:150%;
height:70%;
background-color:rgba(255,255,255,.35);
transform: rotate(1.5deg);
animation:stepIn 2s forwards;
}
@keyframes stepIn {
  from {
    transform: translateX(-100%) rotate(1.5deg);
  }
  to {
    transform: translateX(0) rotate(1.5deg);
  }
}
#play .step2:before{background-color:rgba(1,174,240,.4); transform: rotate(-1.25deg);}
#play .step3:before{background-color:rgba(244,180,208,.4); transform: rotate(1.25deg);}
#play .step4:before{background-color:rgba(249,231,0,.4); transform: rotate(-1.25deg);}
#play .step1 .inner{background:url(../img/no1.svg) left center no-repeat; background-size:auto 8vw;}
#play .step2 .inner{background:url(../img/no2.svg) left center no-repeat; background-size:auto 8vw;}
#play .step3 .inner{background:url(../img/no3.svg) left center no-repeat; background-size:auto 8vw;}
#play .step4 .inner{background:url(../img/no4.svg) left center no-repeat; background-size:auto 8vw;}

#play .howto figure{width:40%; border-radius:2vw; border:3px solid #fff; margin:0 0 0 2%; overflow:hidden; box-sizing: border-box; box-shadow:0px 0px 0px 2px #0134d7 inset; padding:2px;}
#play .howto figure img{width:100%; border-radius:1.5vw;}
#play .howto figure.play1{transform: rotate(-5deg);}
#play .howto figure.play2{transform: rotate(5deg); margin-top:8vw;}
#play .howto figure.play3{transform: rotate(-5deg); margin-top:8vw;}
#play .howto figure.play4{transform: rotate(5deg);}
#play .howto figure.play5{transform: rotate(-5deg);}
#play .howto figure.play6{transform: rotate(5deg); margin-top:8vw;}
#play .howto figure.play7{transform: rotate(-5deg); margin-top:8vw;}
#play .howto figure.play8{transform: rotate(5deg);}
#play .step1 img.lappy{width:20vw; position:absolute; bottom:-3vw; left:30vw;}
#play .step2 img.lappy{width:20vw; position:absolute; bottom:-3vw; left:0;}
#play .step3 img.lappy{width:20vw; position:absolute; bottom: 0; right:0;}
#play .step4 img.lappy{width:20vw; position:absolute; bottom: 0; left:0;}
#play .inner span{display:block;}
#play .inner span img{width:100%;}
#play span.txt1{width:32vw; position:absolute; bottom: 0; left:5vw; animation: fadeIn-L .5s ease 1s 1 normal backwards;}
#play span.txt2{width:40vw; position:absolute; top:2vw; right:0; animation: fadeIn-R .5s ease 1.5s 1 normal backwards;}
#play span.txt3{width:37vw; position:absolute; top:1.5vw; left:5vw; animation: fadeIn-L .5s ease 2s 1 normal backwards;}
#play span.txt4{width:30vw; position:absolute; bottom: 0; right:0; animation: fadeIn-R .5s ease 2.5s 1 normal backwards;}
#play span.txt5{width:45vw; position:absolute; bottom: 0; left:3vw; animation: fadeIn-L .5s ease 3s 1 normal backwards;}
#play span.txt6{width:35vw; position:absolute; top:2vw; right:0; animation: fadeIn-R .5s ease 3.5s 1 normal backwards;}
#play span.txt7{width:30vw; position:absolute; top:2.5vw; left:7vw; animation: fadeIn-L .5s ease 4s 1 normal backwards;}
#play span.txt8{width:45vw; position:absolute; bottom: 0; right:0; animation: fadeIn-R .5s ease 4.5s 1 normal backwards;}
@keyframes fadeIn-R {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes fadeIn-L {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.book{position:absolute; bottom:6vw; right:0; width:7vw; animation: heartbeat .8s alternate infinite; z-index:1;}
.capsule{position:absolute; bottom:5vw; left:15vw; width:6vw; z-index:1; animation: bounce 1.5s ease infinite;}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0) ;
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}
#play p.note{font-size:80%; text-align:right; padding:2% 1% 0;}

@keyframes anime1 {
    0% {opacity:0; transform: translate3d(0, 100px, 0); -webkit-transform: translate3d(0, 100px, 0);}
    100% {opacity:1; transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0);}
}

@media all and (max-width: 767px) {
#play {padding:6.5vw 0 1vw;}
.spaceship{width:30%; top:-1vw;}
.heart{width:13%; top:7vw; left:32.5vw;}
#play h2{padding:0; width:94%; margin:0 auto;}
#play h2 img{height:8.5vw;}
#play .howto .inner{width:98%; padding:0 2% 2vw 0; justify-content: flex-end; margin:0;}
#play .step1 .inner,#play .step2 .inner,#play .step3 .inner,#play .step4 .inner{background-position:left 1.5vw center; background-size:auto 9vw;}
#play .howto figure{width:44.5%; margin:0;}
#play .howto figure.play2,#play .howto figure.play3,#play .howto figure.play6,#play .howto figure.play7{margin-top:10vw;}
#play .step1 img.lappy{width:24vw; bottom:-4vw; left:36.5vw;}
#play .step2 img.lappy{width:24vw; bottom:-4vw; left:-3vw;}
#play .step3 img.lappy{width:24vw; bottom:-4vw; right:-5vw;}
#play .step4 img.lappy{width:24vw; bottom:-4.5vw; left:0;}
#play span.txt1{width:40vw; bottom:0; left:5vw;}
#play span.txt2{width:45vw; top:3vw; right:1vw;}
#play span.txt3{width:46vw; top:2vw; left:8vw;}
#play span.txt4{width:36vw; bottom: 0; right:1vw;}
#play span.txt5{width:54vw; bottom: 0; left:5vw;}
#play span.txt6{width:42vw; top:2.5vw; right:1vw;}
#play span.txt7{width:40vw; top:3vw; left:9vw;}
#play span.txt8{width:58vw; bottom:0; right:1vw;}
.book{right:1vw; bottom:8vw; width:8vw;}
#play p.note{font-size:2vw;}
}

/*///////////////// movie ////////////////*/
#movie{padding:3vw 0;
background-image:url(../img/movie_en.svg),linear-gradient(to top, rgba(244,180,208,1) 0%,rgba(244,180,208,1) 100%),url(../img/stripe.png);
background-repeat:no-repeat,no-repeat,no-repeat;
background-position:center top 4.5vw,center center,center center;
background-size:38%,auto 94%,cover;
}
#movie h2{text-align:center; padding:3vw 0 1vw;}
#movie h2 img{height:5.25vw;}
#movie .inner{display: flex; flex-flow: row wrap; justify-content: center; align-items: center;}
#movie .playmov{width:45%; text-align:center; margin:2vw;}
#movie .playmov span{position: relative; border-radius:2.5vw; padding:56.25% 0 0; display:block; width:100%; height:0; border:3px solid #f9e700; background-repeat:no-repeat; background-size:cover; background-position:center center;}
#movie .playmov span:before{
content: "";
background: url(../img/play.svg) no-repeat center center;
width:6vw;
height:6vw;
position: absolute;
margin:auto;
left:0;
right:0;
top:0;
bottom:0;
z-index:1;
background-size:contain;}
#movie .playmov p{padding:2.5% 0;}
#movie p.pretxt{padding:4vw 0 6vw; font-size:4vw;
font-family: "dela-gothic-one", sans-serif;
font-weight: 400;
font-style: normal;}

@media all and (max-width: 767px) {
#movie{padding:5vw 0 6vw;
background-position:center top 6vw,center center,center center;
background-size:50%,auto 94%,cover;}
#movie h2{padding:2.5vw 0 2.5vw;}
#movie h2 img{height:8.5vw;}
#movie .playmov{margin:0 2.5vw 0 1vw;}
#movie .playmov p{font-size:3vw; padding:0;}
#movie p.pretxt{padding:3vw 0 6vw; font-size:5vw;}
}

/*///////////////// product ////////////////*/
#product {background-color:#81cde4; padding:3vw 0 7vw; width:100%;}
#product h2{text-align:center; padding:1vw 0 3.5vw;}
#product h2 img{height:5vw;}
#product .inner{display: flex; flex-flow: row wrap; justify-content: center; align-items: center;}
#product figure{position: relative; display:block; width:30%; height:0; padding:30% 0 0; background:url(../img/NS_lappygames.jpg) center center no-repeat; background-size: cover; }
#product table{
font-size: 1.5vw;
width:55%;
margin:0 0 0 2vw;
}
#product table td{
padding:.5vw 1.5vw .5vw 2.5vw;
}
#product table td:nth-child(1){
border-right:solid 1px #fff;
}

@media all and (max-width: 767px) {
#product{padding:5vw 0 7vw;}
#product h2 img{height:8.2vw;}
#product figure{width:60%; padding:60% 0 0; margin:2vw auto 5vw;}
#product table{
width:94%;
font-size: 2.9vw;
margin:0 auto 0;
}
#product table td{padding:.5vw 1vw .5vw 2.5vw;}
#product table td:nth-child(1){
vertical-align:top;
white-space: nowrap;
}
}

/*///////////////// main btn ////////////////*/
aside#snslink{
background: #00a0e9;
padding:4vw 0 5vw;
position: relative;
}
#snslink:before{
content: "";
position: absolute;
left:0;
top:-1vw;
z-index:1;
width:100%;
height:4vw;
background:url(../img/wave.svg) 0 0 repeat-x;
}
.link_txt li a{
text-decoration: none;
color: #fff;
}
.link_txt li a::before{
content: '▶︎ ';
}
aside#snslink ul a:hover{
opacity: .8;
}
.link_btn{text-align: center;}
.link_btn ol{
display: flex;
justify-content: center;
}
.link_btn ol li{text-align:center; padding:1vw; font-size:1vw;width:5vw;}
.link_btn ol li a{
display: block;
text-indent:100%;
white-space:nowrap;
overflow:hidden;
width:100%;
height:5vw;
margin:0 0 1vw;
}
.link_btn ol li:nth-child(1) a{
background-image:url(../img/hp.svg);
background-size: 100%;
background-position:center center;
background-repeat:no-repeat;
}
.link_btn ol li:nth-child(2) a{
background-image:url(../img/sns_x.svg);
background-size: 90%;
background-position:center center;
background-repeat:no-repeat;
}
.link_btn ol li:nth-child(3) a{
background-image:url(../img/sns_i.svg);
background-size: 100%;
background-position:center center;
background-repeat:no-repeat;
}

@media all and (min-width: 768px) {
.link_btn:nth-child(1){
padding: 0 5vw 0;
}
.link_btn:nth-child(2){
padding: 0 10vw 0 4vw;
border-left:1px solid rgba(255,255,255,.7);
}
aside#snslink ul{
display: flex;
justify-content: center;
align-items: center;
margin: auto;
}
.link_btn h4{
font-size: 1.5vw;
margin-bottom:1.5vw;
}
.link_txt li a{
font-size: 1.3vw;
}
}

@media all and (max-width: 767px) {
aside#snslink{padding:6vw 0 6vw;}
.link_btn h4{
font-size: 4vw;
margin-bottom:1vw;
}
.link_btn{width:50vw; margin:0 auto;}
.link_btn ol li{margin:3vw 2vw 5vw; padding:0; font-size:2.5vw; width:20vw;}
.link_btn ol li a{width:10vw;height:10vw; margin:0 auto 1vw;}
.link_txt ol{display: flex; flex-flow: row wrap; justify-content: center; align-items: center;}
.link_txt li{margin:2vw 2.5vw 0;}
.link_txt li a{font-size: 3.2vw;}
}

/*///////////////// DL btn ////////////////*/
#outgo{position:fixed !important; z-index:10; transition:.5s; opacity:0; }
#outgo.isActive {opacity: 1;}
#outgo ul li {text-align:center; vertical-align: middle; position: relative;
width:100%;
background:url(../img/bn_n.svg) center center no-repeat;
margin:.5vw 0;
background-size:contain;
}
#outgo ul li:nth-child(2){background-image:url(../img/bn_s.svg);}
#outgo ul li a{display: block; aspect-ratio: 2.65/1;}

@media all and (min-width: 768px) {
#outgo{bottom:.5vw; right:1vw; width:18vw; margin:0 0 0 auto;}
}
@media all and (max-width: 767px) {
#outgo{bottom:0; left:0; right:0; z-index:10; width:100%; margin:0 auto; padding:0 0 2vw;}
#outgo ul{display: flex; flex-flow: row wrap; justify-content: center; align-items: center;}
#outgo ul li{width: calc(72% / 2 - 2vw); margin:0 1vw;}
}


/*///////////////// footer ////////////////*/
footer {
padding:3.5vw;
background-color:#e4007f;
}
footer .copy,footer .copy_s,footer .trademark{
text-align:center;
color: #fff;
padding:.5em 0;
}
footer a{
text-decoration:none;
color: #fff;
}
footer .trademark{font-size:1.5vw;}
footer .copy,footer .copy_s{font-size:1.25vw;}
@media all and (max-width: 767px)  {
footer {padding:3.5vw 3vw 18vw;}
footer .trademark{font-size:2.6vw;}
footer .copy,footer .copy_s{font-size:1.9vw;}
}


/*modal*/
.modal {
    width: 100%;
    height: 100vh;
   display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
}
.modal_body {
    width: 80%;
    max-height: 75%;
    padding:1vw .5vw 1vw 4vw;
    margin: 0 auto;
    border-radius:2vw;
    background-color: #FFF;
    position: absolute;
    top: 45%;
    left: 50%;
    z-index: 2;
    transform: translate(-50%,-50%);
}
.modal_content{
    padding:0 2vw 0 0;
    height: 75vh;
    overflow-y: scroll;
}
.modal button {
    font-size: 2vw;
font-family: "dela-gothic-one", sans-serif;
font-weight: 400;
font-style: normal;
    color: #fff;
    text-align: center;
    width: 28vw;
    padding:2vw 0;
    appearance: none;
    display: block;
    border: none;
    border-radius:100vh;
    box-shadow: none;
    cursor: pointer;
    transition: all 0.5s;
}
.modal button:hover {
    opacity: 0.8;
}
.modal button.modal_close {
    margin:3.5vw auto 0;
    background-color: #0134d7;
}
.modal_bg {
    width: 100%;
    height: 100%;
    background-color: rgba(0,160,233,0.9);
    position: absolute;
    top: 0;
    left: 0;
    z-index:1;
}
.modal_content h2,
.modal_content p{
font-feature-settings : "palt";
letter-spacing:0.08em;
font-family: "m-plus-rounded-1c", sans-serif;
font-weight: 400;
font-style: normal;
color: #0134d7;
word-break:break-all;
text-justify:inter-character;
}
.modal_content h2{
padding:2vw 0 0;
text-align : center;
font-weight:700;
font-size:3vw;
}
.modal_content p{
text-align : justify;
}

@media all and (min-width: 768px) {
.modal_content p{
margin-top: 2em;
font-size: 1.5vw;
line-height: 1.6;
}
}

@media all and (max-width: 767px)  {
.modal_body {
    width: 80%;
    max-height:80%;
    padding:1vw .5vw 1vw 4vw;
    top: 46%;
    left: 50%;
}
.modal_content{
    padding:0 3vw 0 0;
    height: 80vh;
    overflow-y: scroll;
}
.modal button {
    font-size: 3vw;
    width: 40vw;
    padding:3vw 0;
}
.modal_content h2{
padding:4vw 0 0;font-size:4.5vw;
}
.modal_content p{
margin-top: 3vw;
font-size:2.7vw;
line-height:1.6;
}

}


/*========= youtube ===============*/

#movie ul li .mov{
 position: relative;
  width: 100%;
  padding-top: 56.25%;
}

iframe.yt-player {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
@media all and (min-width: 768px) {
#movie ul{
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
#movie ul li{
width: 48%;
}
}
@media all and (max-width: 767px)  {
#movie ul li{
width:100%;
}
#movie ul li{
margin-top:1.5em;
}
}

/*lazyload*/
.lazyload, .lazyloading { opacity: 0;}
.lazyloaded { opacity: 1; transition: all 1000ms; max-width: 100%;}

.nocontxt,figure { user-select: none; -webkit-user-select: none; -ms-user-select: none; -moz-user-select:none; -khtml-user-select:none; -webkit-user-drag:none; -khtml-user-drag: none; -webkit-touch-callout: none; text-align:center;}
.nocontxt img, .nocontxt div, figure img { pointer-events: none;}