/* ============================== */
/*img cover*/
.cover {width:100%; height:100%;}
/*link*/
a{text-decoration:underline; color:#48b3cc;}
a:hover{ text-decoration:underline; color:#2d2d2d;}

.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%;}
div#con-body{
background-attachment:fixed;
}

body {
  display: flex;
  flex-flow: column;
  min-height: 100vh;
}
header,
main {
  flex: 1;
}

.content p,
.content table,
.content li
{
font-feature-settings : "palt";
letter-spacing:0.08em;
font-family: rocknroll-one, sans-serif;
font-weight: 400;
font-style: normal;
color: #603813;
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;
}
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;
}

.content{
width:100vw;
}


@media all and (min-width: 768px) {
header .Nintendologo{
  width: 10vw;
}
.container{
  background-image: url(../img/bg.jpg);
  background-attachment: fixed;
  background-size:cover;
  background-position: left top;
  background-repeat: no-repeat;
}
.inner{
  background:url(../img/bg_white.png) center top 38vh no-repeat;
  background-size:cover;
}
.headerArea{
  background:url(../img/main_pc.png?new0304) center top no-repeat;
  background-size:contain;
aspect-ratio:360/189;
}
}

@media all and (max-width: 767px) {
header .Nintendologo{
  width: 15vw;
}
.headerArea{
  background:url(../img/main_smp.png?new0304) center top no-repeat;
  background-size:contain;
aspect-ratio:786/1260;
}
}


/*///////////////// gameflow ////////////////*/
#game .gameflow{
width:96%;
margin: auto;
background: url(../img/bg_game.png) center center no-repeat;
background-size: contain;
aspect-ratio: 2771/2747;
}

#game .gameflow h2{
margin:0 auto;
}

#game .gameflow h2 span{
display: block;
background:url(../img/gameflow_h2.png) center bottom no-repeat;
background-size: contain;
aspect-ratio: 908/287;
text-indent:100%;
white-space:nowrap;
overflow:hidden;
padding-top: 3em;
}



#game .gameflow p{
text-align: center;
margin:0 auto;
padding-bottom:2em;
}

#game .gameflow .map{
background:url(../img/gameflow_map.png?new20240819) center center no-repeat;
background-size: contain;
aspect-ratio: 2577/1928;
width:90%;
margin:0 auto;
}



@media all and (min-width: 768px) {
#game .gameflow h2{
width:30vw;
}
}

@media all and (max-width: 767px) {
#game .gameflow{
width:100%;
margin:0 auto;
background: url(../img/bg_game_smp.png) center top no-repeat;
background-size: contain;
aspect-ratio: 768/3108;
}
#game .gameflow h2{
width:70vw;
}
#game .gameflow p{
width: 90%;
}
#game .gameflow .map{
background:url(../img/gameflow_map_smp.png?new20240819) center center no-repeat;
background-size: contain;
aspect-ratio: 786/2303;
width:100%;
margin:0 auto;
}

}


/*///////////////// gameimage ////////////////*/
#game #gameimage h2,
#game #gameimage h3,#game #gameimage h3 span
{
text-indent:100%;
white-space:nowrap;
overflow:hidden;
}

/*listA*/
ul.listA li:nth-child(1) h3 span{
display: block;
background: url(../img/gameimage_h3_1.svg?new) left center no-repeat;
background-size: contain;
}
ul.listA li:nth-child(2) h3 span{
display: block;
background: url(../img/gameimage_h3_2.svg) left center no-repeat;
background-size: contain;
}
ul.listA li:nth-child(3) h3 span{
display: block;
background: url(../img/gameimage_h3_3.svg) left center no-repeat;
background-size: contain;
}


ul.listA li:nth-child(1){
background-image: url(../img/gameimage_bg1.png);
background-repeat: no-repeat;
background-size: contain;
}
ul.listA li:nth-child(2){
background-image: url(../img/gameimage_bg2.png);
background-repeat: no-repeat;
background-size: contain;
}
ul.listA li:nth-child(3){
background-image: url(../img/gameimage_bg3.png);
background-repeat: no-repeat;
background-size: contain;
}

ul.listB p small{
display: block;
color: #FF4747;
}



@media all and (min-width: 768px) {
#game #gameimage{
margin-top: 5vw;
}

#game #gameimage h2{
width:60vw;
}

#game #gameimage h2 span{
display: block;
background:url(../img/gameimage_h2.png) center bottom no-repeat;
background-size: contain;
aspect-ratio: 908/287;
padding-top: 3em;
}

#game #gameimage h3 span{
height:4vh;
}


/*listA*/

ul.listA{
width: 70%;
margin:0 auto 10vw;
}


ul.listA li div.item{
padding:5vw 2vw 2vw 5vw; 
}
ul.listA p{
margin:1vw 0 0 2.5vw;
font-size: 1.3vw;
}

ul.listA li{
display: flex;
justify-content: center;
align-items: center;
margin-bottom:3vw;
}
ul.listA li div{
width: 50%;
}

ul.listA li:nth-child(1),
ul.listA li:nth-child(2),
ul.listA li:nth-child(3){
background-position: left center;
}

div.vid_contents {
width: 100%;/*背景色を横幅いっぱいに広げる*/
text-align: center;
margin: auto;
}
video.vid_main {
width: 100%;
max-width: 920px;/*PC版での最大幅*/
}

/*listB*/
ul.listB p{
font-size: 1.3vw;
}
ul.listB p small{
margin-top: .5vw;
font-size: .9vw;
}
#game #gameimage ul.listB{
background: url(../img/gameimage_bg.png?new20240819) center center no-repeat;
background-size: contain;
aspect-ratio: 2880/2562;
width: 100vw;
}

ul.listB li:nth-child(1){
width: 40vw;
padding-left: 15vw;
padding-top: 18vw;
}
ul.listB li:nth-child(2){
width: 30vw;
padding-left: 36.5vw;
padding-top: 23vw;
}
ul.listB li:nth-child(3){
width: 30vw;
padding-left: 18vw;
padding-top: 18vw;
}

}


@media all and (max-width: 767px) {
#game #gameimage h2{
width:100%;
}

#game #gameimage h2 span{
display: block;
background:url(../img/gameimage_h2_smp.png) left bottom no-repeat;
background-size: contain;
aspect-ratio: 766/385;
}

#game #gameimage h3 span{
height:7vw;
}



/*listA*/
ul.listA{
width: 100%;
margin:0 auto 10vw;
}
ul.listA li{
padding-top:15vw;
}

ul.listA p{
font-size: 3.8vw;
line-height: 1.5;
margin:5vw auto;
}

ul.listA li .item{
width: 80%;
margin:0 auto;
}

ul.listA li:nth-child(1){
background-position: left -20vw top;
background-size:65%;
}
ul.listA li:nth-child(2){
background-position: left -18vw top;
background-size:65%;
}
ul.listA li:nth-child(3){
background-position: left -15vw top 10vw;
background-size:50%;
}

div.img_contents {
width: 100%;
text-align: center;
margin: auto;
aspect-ratio: 16/9;
}

ul.listA li:nth-child(1) div.img_contents{
background: url(../img/img1.jpg) center top no-repeat;
background-size: contain;
}
ul.listA li:nth-child(2) div.img_contents{
background: url(../img/img2.jpg) center top no-repeat;
background-size: contain;
}
ul.listA li:nth-child(3) div.img_contents{
background: url(../img/img3.jpg) center top no-repeat;
background-size: contain;
}

/*listB*/
ul.listB p{
line-height:1.5;
}
ul.listB p small{
margin-top: 2vw;
font-size: 2.5vw;
}
#game #gameimage ul.listB{
background: url(../img/gameimage_bg_smp.png?new20240819) center center no-repeat;
background-size: contain;
aspect-ratio: 786/3130;
width: 100%;
}
ul.listB li:nth-child(1){
width: 65%;
padding-left: 25vw;
padding-top: 55vw;
}
ul.listB li:nth-child(2){
width: 65%;
padding-left: 10vw;
padding-top: 103vw;
}
ul.listB li:nth-child(3){
width: 60%;
padding-left: 30vw;
padding-top: 98vw;
}
}


/*///////////////// movie ////////////////*/
#movie{
width: 70%;
margin:5vw auto 10vw;
}
#movie h2
{
width: 20%;
text-indent:100%;
white-space:nowrap;
overflow:hidden;
margin:0 auto 3vw;
}

#movie h2 span{
display: block;
background:url(../img/movie_h2.svg) center top no-repeat;
background-size: contain;
aspect-ratio:178/46;
}

@media all and (min-width: 768px) {
}
@media all and (max-width: 767px) {
}

/*///////////////// product ////////////////*/

#product h2
{
width: 20%;
text-indent:100%;
white-space:nowrap;
overflow:hidden;
margin:0 auto 3vw;
}

#product h2 span{
display: block;
background:url(../img/product_h2.svg) center top no-repeat;
background-size: contain;
aspect-ratio:208/50;
}

#product table{
border-top:solid 1px #BE8754;
font-size: 1.3vw;
margin: auto;
}
#product table tr{
border-bottom:solid 1px #BE8754;
}
#product table td{
padding:1vw 2vw;
}
#product table td:nth-child(1){
border-right:solid 1px #BE8754;
}

@media all and (min-width: 768px) {
#product{
width: 70%;
margin:0 auto 10vw;
}

}
@media all and (max-width: 767px) {
#product{
width: 90%;
margin:0 auto 15vw;
}
#product table{
width: 100%;
font-size: 3vw;
}
#product table td:nth-child(1){
vertical-align:top;
white-space: nowrap;
}
}

/*///////////////// main btn ////////////////*/
aside{
background: #EEEEEE;
padding:5vw 0;
}
aside p{
text-align: center;
margin-top:5vw;
font-size: 1.2vw !important;
}


.link_txt li a{
text-decoration: none;
color: #603813;
}

.link_txt li a::before{
content: '▶︎ ';
}
aside ul a:hover{
opacity: .8;
}
.link_btn{
text-align: center;
}
.link_btn:nth-child(2){
margin: 0 8vw;
}


.link_btn h4{
width: 100%;
}

.link_btn ol{
display: flex;
justify-content: center;
}

.link_btn ol a
{
display: block;
text-indent:100%;
white-space:nowrap;
overflow:hidden;
aspect-ratio: 250/304;
}

.link_btn ol li:nth-child(1) a{
display: block;
background:url(../img/icon_hp.png) center top no-repeat;
background-size: contain;
}
.link_btn ol li:nth-child(2) a{
display: block;
background:url(../img/icon_x.png) center top no-repeat;
background-size: contain;
}

.link_btn ol li:nth-child(3) a{
display: block;
background:url(../img/icon_insta.png) center top no-repeat;
background-size: contain;
}


@media all and (min-width: 768px) {
aside ul{
display: flex;
justify-content: center;
align-items: center;
width:70vw;
margin: auto;
}

.link_btn h4{
font-size: 1.3vw;
margin-bottom: 1em;
}


.link_txt li a{
font-size: 1.2vw;
}
.link_btn ol a
{
height: 5vw;
}
.link_btn ol li:nth-child(2){
margin:0 1.2vw;
}
}

@media all and (max-width: 767px) {
aside ul{
width:50vw;
margin:10vw auto;
}
aside p
{
font-size:2.5vw !important;
}
.link_btn h4{
font-size: 3.6vw;
margin-bottom: 0;
}
.link_txt li{
margin-top: 5vw;
}
.link_txt li a{
font-size: 3.6vw;
}
.link_btn ol a
{
height: 14vw;
}
.link_btn ol{
margin:4vw 0 10vw;
}
.link_btn ol li:nth-child(2){
margin:0 8vw;
}

}

/*///////////////// DL btn ////////////////*/
.dl_btn_big{
display: block;
background: url(../img/dl_btn_big.png) center center no-repeat;
background-size: contain;
aspect-ratio:600/344 ;
width: 28vw;
margin:0 auto;
position: absolute;
right: 0;
bottom: 0;
left: 0;
}
.dl_btn_big:hover{
opacity: .8;
}


.dl_btn{
display: block;
background: url(../img/dl_btn.png) center center no-repeat;
background-size: contain;
aspect-ratio:570/341 ;
width: 20vw;
position: fixed;
bottom:0;
right:0;
transition: 0.5s;
opacity: 0;
}
.dl_btn:hover{
opacity: .8 !important;
}


@media all and (max-width: 767px) {
.dl_btn_big{
width: 80vw;
bottom:4vw;
}
.dl_btn{
width: 45vw;
}
}


/*///////////////// snsCP btn ////////////////*/
.snsCP_btn{
display: block;
background: url(../img/sns_cp_btn.png) center center no-repeat;
background-size: contain;
aspect-ratio:989/670 ;
width:28vw;
position: absolute;
right:15%;
bottom: 30%;
}
.snsCP_btn:hover{
 transform: rotate(10deg);

}



@media all and (max-width: 767px) {
.snsCP_btn{
background: url(../img/sns_cp_btn_smp.png) center center no-repeat;
background-size: contain;
aspect-ratio:402/267;
width:53vw;
position: absolute;
right:1%;
top: 22%;
}
.snsCP_btn:hover{
 transform: rotate(-10deg);
}

}

/*///////////////// footer ////////////////*/
footer {
background: #000;
}
footer .bottom{
text-align:center;
color: #fff;
}
footer .bottom a{
text-decoration:none;
color: #fff;
}

@media all and (min-width: 768px) {
footer .bottom{
margin:0 auto;
}
footer .bottom small{
font-size:1vw;
line-height: 4em;
}
}

@media all and (max-width: 767px)  {
footer .bottom{
max-width: 300px;
line-height:1.1;
margin:0 auto;
padding:5vw 0;
}
footer .bottom small{
font-size:2.5vw;
}
}




/*========= モーダルCSS ===============*/
#policy{
  display: none;
}

/*モーダルの横幅を変更したい場合*/
.modaal-container{
    width:80vw;
    max-width:800px;
}

/*モーダルのボタンの色を変更したい場合*/
.modaal-close:after, 
.modaal-close:before{
  background:#ccc;  
}

.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before{
  background:#666;
}


/*========= レイアウトのためのCSS ===============*/
.modaleBox h2,
.modaleBox p
{
font-feature-settings : "palt";
letter-spacing:0.08em;
font-family: rocknroll-one, sans-serif;
font-weight: 400;
font-style: normal;
color: #603813;
word-break:break-all;
text-justify:inter-character;
}
.modaleBox h2
{
text-align : center;
}
.modaleBox p
{
text-align : justify;
}


@media all and (min-width: 768px) {
.modaleBox{
  padding:30px;
}
.modaleBox h2{
font-size: 2em;
}
.modaleBox p{
margin-top: 2em;
font-size: 1.2em;
line-height: 1.6;
}

}

@media all and (max-width: 767px)  {
.modaleBox{
  padding:0;
}
.modaleBox h2{
font-size: 1.2em;
}
.modaleBox p{
margin-top: 2em;
font-size: .8em;
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;
}
}