@charset "utf-8";

#loading{ position:fixed; top:0; left:0; width:100%; height:100%; background-color:#fff; z-index:9999; overflow:hidden; }
#loading span{ position:absolute; text-align: center; display: block; left:50%; top:50%; transform:translate(-50%,-50%); width:500px;  }
#loading span img{ width:100%; }
#loading span:before,#loading span:after{ content:""; width:100%; height:102%; position:absolute; z-index:1; background:#fff; top:0; left:0; transition:.5s .5s;  }
#loading span:after{ width:0; transition-delay:1.8s; }
#loading.on span:before{ left:100%; }
#loading.on span:after{ width:100%; }
#loading.on{ animation: opacity .6s 2.2s linear forwards; pointer-events:none; }
@keyframes opacity {
  0% { opacity: 1;}
  to { opacity: 0; }
}



#top-nav{ position:fixed; right:0; top:100px; background-color:#fff; border-radius:20px 0 0 20px; border:4px solid #000; overflow:hidden; border-right:none; box-shadow: 0 0 10px rgba(0,0,0,0.2); z-index:10; }
#top-nav li:not(:first-child):not(:last-child){ margin-top:2px; }
#top-nav li a{ display:block; background-color:#e5e5e5; color:#333; font-size:9px; font-weight:900; text-align:center; width:60px; padding:10px 0; line-height:1.2; transition:.3s; }
#top-nav li a:hover{ background-color:#999; color:#fff; }
#top-nav li a img{ height:22px; width:auto; }
#top-nav li a span.text{ display:block; margin-top:3px; }
#top-nav li a.game{ background: rgb(249,190,62); background: linear-gradient(135deg, rgba(249,190,62,1) 0%, rgba(248,152,40,1) 100%); font-size:10px; color:#000; }
#top-nav li a.game img{ height:26px; }
#top-nav li a.game:hover{ filter:brightness(1.2) saturate(110%); }

#mv{ position:relative; border-bottom:5px solid #000; padding-bottom:90px; }
#mv-txt{ max-width:780px; width:38%; text-align:center; margin-left:4%; position:relative; z-index:1; }
#mv-txt h1{ padding:5% 0 4%; }
#mv-copy{ max-width:680px; width:90%; margin:0 auto;  }
#mv-point{ width:85%; margin:3% auto;  }
#mv-point img{ width:100%; }
#mv-nav{ display:flex; margin:2% 0 0 4%; width: 88%;  gap: 20px; position: relative; z-index: 1;}
#mv-nav li{ width:300px; position:relative; }
#mv-nav li a{ display:flex; align-items:center; background-color:#fff; border:4px solid #000; border-radius:10px; gap:8px; padding:10px; transition:.3s; position:relative; }
#mv-nav li a:hover{border-color:#f49c00; background-color:#fffce1; }
#mv-nav li a:before{ content:"→"; color: #f49c00; position: absolute; right: 10px; bottom: 6px; font-weight: 900; font-size:200%; transition:.3s; }
#mv-nav li a:after{ content:""; position: absolute; left: 9px; top: 9px;z-index: -1; width: 100%; height: 100%; background: repeating-linear-gradient(-45deg, #f49c00, #f49c00 3px, #fff 3px, #fff 6px); opacity: .5; border-radius:10px; transition:.3s; }
#mv-nav li a:hover:after{ left: 0px; top: 0px; }
#mv-nav li a:hover:before{ right:2px; }
#mv-nav li a .icon{}
#mv-nav li a .icon img{ width:54px; }
#mv-nav li a .txt{}
#mv-nav li a .txt img{ display:block; margin:8px 0; }
#top-simulation{ display:block; border:5px solid #000; border-radius:200px; background-color:#cbb69d; position:absolute; left:4%; bottom:-45px; width:500px; padding:20px 40px; overflow:hidden; }
#top-simulation img{ position:relative; z-index:1; }
#top-simulation:before{ content:""; width:0; height:100%; position:absolute; z-index:0; background-color:#f49c00; top:0; left:0; transition:.3s; }
#top-simulation:hover:before{ width:100%;}

#mv-nav li a img.plan2_sub1{ position:absolute; left:1em; top:-15px; }
#mv-nav li a .txt img.plan2_sub2{ position:absolute; right:.5em; top:-.2em; width:36%; }



#mv-slider-area{ overflow:hidden; position:absolute; left: 0; top: 0; width:100%; height:100%; }
#mv-slider{ position:relative; right: -4%; top:0; overflow:hidden; width: 100%; height:100%; display: flex; justify-content: right; gap:2%; transform:translateX(0); }
.mv-slider{
  position: relative;
  transform:rotate(15deg);
  width: 13.5%;
}
@keyframes loop {
  0% { transform: translateY(90%);}
  to { transform: translateY(-110%); }
}
@keyframes loop2 {
  0% { transform: translateY(-10%);}
  to { transform: translateY(-210%); }
}
@keyframes loop-r {
  0% { transform: translateY(-110%);}
  to { transform: translateY(90%); }
}
@keyframes loop2-r {
  0% { transform: translateY(-210%);}
  to { transform: translateY(-10%); }
}

@keyframes yoko {
  0% { transform: translateX(90%);}
  to { transform: translateX(-110%); }
}
@keyframes yoko2 {
  0% { transform: translateX(-10%);}
  to { transform: translateX(-210%); }
}
@keyframes yoko-r {
  0% { transform: translateX(-110%);}
  to { transform: translateX(90%); }
}
@keyframes yoko2-r {
  0% { transform: translateX(-210%);}
  to { transform: translateX(-10%); }
}

.mv-slider ul{ max-width:250px; }
.mv-slider ul li{ padding:5% 0; }
.mv-slider ul li img{ display:block; overflow:hidden; border-radius:25px; box-shadow:5px 5px 10px rgba(0, 0, 0, .2); }
.mv-slider ul:first-child { animation: loop 80s -40s linear infinite;}
.mv-slider ul:last-child { animation: loop2 80s linear infinite; }
.mv-slider:nth-child(2) ul:first-child { animation: loop-r 70s -35s linear infinite;}
.mv-slider:nth-child(2) ul:last-child { animation: loop2-r 70s linear infinite; }
.mv-slider:nth-child(3) ul:first-child { animation: loop 100s -50s linear infinite;}
.mv-slider:nth-child(3) ul:last-child { animation: loop2 100s linear infinite; }
.mv-slider:nth-child(4) ul:first-child { animation: loop-r 90s -45s linear infinite;}
.mv-slider:nth-child(4) ul:last-child { animation: loop2-r 90s linear infinite; }

#top-cont{ background-color:#ebe2d7; padding:6%; text-align:center;  }
#game{ max-width:1350px; margin:0 auto; }
#game > h2{ margin-bottom:1em; }
.game-cap{ margin:2em auto; display:flex; align-items:center; gap:2em; justify-content:center; flex-wrap:wrap; }
#game-cont{ margin:3em auto; }
#game-cont .game-tab{ display:flex; justify-content:center; gap:10px; }
#game-cont .game-tab p{ font-size:120%; background-color:#fff; border:2px solid #999999; border-bottom:none; border-radius:10px 10px 0 0; width:300px; padding:15px; color:#000; cursor:pointer; transition:.3s; }
#game-cont .game-tab p:not(.active):hover{ border-color:#f49c00; }
#game-cont .game-tab p.active{ background-color:#000; color:#fff; border-color:#000; cursor:default; }
#game-cont .game-tab span{ display:block; }
#game-cont .game-tab .tab-t{ font-size:130%; font-weight:bold; margin-bottom:5px; }
#game-cont .game-tab .tab-t b{ font-size:120%; }
#game-cont .game-tab .tab-c{  color:#e97575; }
#game-cont .game-tab-c{ background-color:#fff; border:4px solid #000; border-radius:3em; overflow:hidden; }
#game-cont .game-tab-c > div{ padding:5%; display:none; transition:.3s; }
#game-cont .game-tab-c > div.active{ display:block; }
#game-cont .game-tab-c .calendarArea {
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
}
#game-cont .game-tab-c .calendarArea li {
    width: calc((100% - 20px) / 2);
    position: relative;
}


@media screen and (max-width: 1440px) {
    #top-cont{ padding:10% 5%; }
    #game > h2 img{ width:52%; }
}

@media screen and (max-width: 1240px) {
    #mv-nav li a{ border-width:3px; }
    #mv-nav li a .txt img:last-child{ height:7px; width:auto; }
    #mv-nav li a:before{ font-size:150%; }
    #game-cont .game-tab p{ font-size:1.3vw; width:28%; }
    #mv-nav li a .txt img.plan2_sub2{ top:.1em; height: auto; width:35%; }
}

@media screen and (max-width: 768px) {
    #loading span{ width:70%; }
    #mv{ border-width: 4px; padding-bottom:10%; }
    #mv-txt{ max-width:580px; width:90%; margin:0 auto; }
    #mv-point{ width:100%; margin:5% auto 3%;  }
    #mv-nav{ margin:0 auto; width: 90%; flex-wrap: wrap;  gap: 4%;}
    #mv-nav li{ width:48%; padding:2% 0; }
    #mv-nav li a .txt img:last-child{ height:auto; }
    #top-simulation{ font-size: 3vw; border-width: 4px; left:5%; bottom:-2.3em; max-width:500px; width: 75%; padding:1em 2em; }

    #mv-slider-sp1{ padding-top: 5%; }
    #mv-slider-sp2{ padding: 4% 0 2%; }
    .sp .mv-slider{ display: flex; flex-flow: row nowrap; position: relative; transform:rotate(0); width: 300vw; }
    .sp .mv-slider ul{ display: flex; flex-flow: row nowrap; max-width:100%;font-size:3vw; }
    .sp .mv-slider ul li{ padding:0 .4em; }
    .sp .mv-slider ul li img{ border-radius:.8em; box-shadow:none;  }
    #mv-slider-sp1 .mv-slider ul:first-child{ animation: yoko 60s -30s linear infinite; }
    #mv-slider-sp1 .mv-slider ul:last-child{ animation: yoko2 60s linear infinite; }
    #mv-slider-sp2 .mv-slider ul:first-child{ animation: yoko-r 60s -30s linear infinite; }
    #mv-slider-sp2 .mv-slider ul:last-child{ animation: yoko2-r 60s linear infinite; }

    #top-cont{ padding:15% 5% 20%; }
    #game > h2 img{ width:70%; }
    .game-cap { gap:1em; }
    #game-cont .game-tab-c{ border-radius:1.5em; }
    #game-cont .game-tab-c > div { padding:8% 5%; }
    #game-cont .game-tab p{ font-size:1.8vw; }
    #game-cont .game-tab .tab-c{  font-size:120%; line-height:1.3; }
    #game-cont .game-tab-c .calendarArea { display: block; }
    #game-cont .game-tab-c .calendarArea li { width: 100%; }
    #game-cont .game-tab-c .calendarArea li:first-child { margin-bottom:5%; }
}

@media screen and (max-width: 480px) {
    #mv{ border-width: 3px; }
    #mv-nav li a{ padding:5px; border-width:2px; }
    #mv-nav li a .txt img:nth-child(2){ height:6px; }

    #mv-nav li a img.plan2_sub1{ width: 40%; top:-.7em; }
    #mv-nav li a .txt img.plan2_sub2{ width:32%; }

    #mv-nav li a:before{ font-size:120%; }
    #mv-nav li a:after{ left: 6px; top: 6px;}
    #top-simulation{ border-width: 3px; }

    #game-cont .game-tab-c{ border-width: 3px; }
    #game-cont .game-tab p{ padding:1em; }
    


}