@charset "UTF-8";
/*
Version: 1.0.0
Creation Date: 2022.8.27
Last Updated: 2022.8.29
*/


/* import
------------------------------------------------------------ */
@import "https://unpkg.com/swiper@8/swiper-bundle.min.css";


/* set
------------------------------------------------------------ */
* {
margin: 0;
padding: 0;
font-style: normal;
box-sizing: border-box;
}
html {
overflow-y: scroll;
scroll-behavior: smooth;
}
body {
-webkit-text-size-adjust: 100%;
font-family: ryo-gothic-plusn, sans-serif;
color: #000;
font-size: 16px;
font-weight: 500;
line-height: 1.5;
text-align: center;
overflow: hidden;
}
ul {
list-style: none;
}
img {
vertical-align: middle;
max-width: 100%;
height: auto;
border: 0;
}
iframe {
max-width: 100%;
max-height: 100%;
border: none;
}
a {
color: inherit;
text-decoration: none;
}
a:hover img {
opacity: .7;
}

#bnr a:hover img {
opacity: .8;
}
:hover {
transition: .3s;
}
.smd,.smp {
display: none;
}
.pc {
display: block;
}


/* common
------------------------------------------------------------ */
/* font */
/* りょうゴシック PlusN */
.ryo-go {
font-family: ryo-gothic-plusn, sans-serif;
font-weight: 500;
}
.b {
font-weight: 700;
}
/* 貂明朝テキスト */
.ten-min {
font-family: ten-mincho-text, serif;
font-weight: 400;
}
/* Poster Gothic Cond ATF Bold */
.en {
font-family: poster-gothic-cond-atf, sans-serif;
font-weight: 600;
letter-spacing: .1em;
}
/* ルイカ-０９ */
.ruika {
font-family: ruika, sans-serif;
font-weight: 100;
}

/* layout */
main {
width: 100%;
display: block;
overflow: hidden;
}
main article {
width: 100%;
padding-bottom: 50px;
position: relative;
}
section {
width: 1000px;
max-width: 90%;
margin: 0 auto;
padding: 60px 0;
}

/* style */
.flex {
display: flex;
}
.vwmax {
padding-bottom: 0;
}
.vwmax img {
width: 100vw;
}
.bg_01 {
background: url("images/bg_01.jpg") no-repeat center center;
background-size: cover;
}
.bg_02 {
background: url("images/bg_02.jpg") no-repeat center center;
background-size: cover;
}
.bg_03 {
background: url("images/bg_03.jpg") no-repeat center center;
background-size: cover;
}
.bg_04 {
background: url("images/bg_04.jpg") no-repeat center center;
background-size: cover;
}
.bg_05 {
background: url("images/bg_05.jpg") no-repeat center center;
background-size: cover;
}
.bg_06 {
background: url("images/bg_06.jpg") no-repeat center center;
background-size: cover;
}
.bg_07 {
background: url("images/bg_07.jpg") no-repeat center center;
background-size: cover;
}

/* .link */
.link {
text-align: center;
margin: 30px auto 0;
}
.link a {
background: #a69535;
background-size: 30px auto !important;
font-size: 20px;
font-weight: 700;
line-height: 60px;
width: 320px;
max-width: 100%;
height: 60px;
display: inline-block;
border-radius: 30px;
position: relative;
z-index: 1;
}
.link.l a {
width: 360px;
}
.link a:after {
content: "";
border-top: solid 9px transparent;
border-right: solid 12px transparent;
border-bottom: solid 9px transparent;
border-left: solid 12px #000;
position: absolute;
top: 50%;
right: 5px;
transition: transform 0.5s ease;
-webkit-transform: translate(0,-50%);
transform: translate(0,-50%);
}
.link a:hover:after {
-webkit-transform: translate(30%,-50%);
transform: translate(30%,-50%);
}
.link.blu a {
background: #1A1A7C;
color:  #FFF;
}
.link.nvy a {
background: #004098;
color:  #FFF;
}
.link.pnk a {
background: #E62E8B;
color:  #FFF;
}
.link.org a {
background: #F15A24;
background: #EC641A;
color:  #FFF;
}
.link.brn a {
background: #E39300;
color:  #FFF;
}
.link.yel a {
background: #FFF33F;
}
.link.blu a:after,
.link.nvy a:after,
.link.pnk a:after,
.link.org a:after,
.link.brn a:after {
border-left: solid 12px #FFF;
}

/* .swiper */
.swiper-wrapper {
margin: 50px auto;
}
.swiper-pagination-bullet {
background: #CCC;
width: 50px;
height: 5px;
margin: 0 1px;
border-radius: 0;
opacity: 1;
}
.swiper-pagination-bullet-active {
background: #1A1A7C;
}
.swiper-prev,
.swiper-next {
width: 30px;
cursor: pointer;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
z-index: 1;
}
.swiper-prev {
left: 0;
}
.swiper-next {
right: 0;
}


/* header
------------------------------------------------------------ */
header {
background: #1A1A7C;
width: 100%;
height: 90px;
justify-content: space-between;
align-items: center;
position: fixed;
top: 0;
left: 0;
z-index: 5;
}
header ul.flex li {
margin: 0 .5em;
}
header nav {
background:rgba(255,255,255,.95);
width: 100%;
height: 100vh;
position: fixed;
top: -120%;
right: 0;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
transition: all 0.6s;
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
}
header nav.active {
top: 0;
}
header nav ul {
width: 600px;
max-width: 80%;
}
header nav li {
margin-top: 5%;
}
header nav #close {
display: none;
background: #1A1A7C;
width: 60px;
height: 60px;
border-radius: 50%;
cursor: pointer;
position: fixed;
top: 1%;
right: 3%;
}
header nav #close:before {
content: "×";
color: #FFF;
font-size: 2em;
line-height: 60px;
display: block;
}


/* main
------------------------------------------------------------ */
/* #movie */
#movie section {
padding-top: 0;
}
#movie li {
width: 100%;
padding-top: 56.25%;
position: relative;
}
#movie iframe {
width: 100%;
height: 100%;
position: absolute;
top: 0;
right: 0;
}

/* #plan */
#plan h3.fadeInUp100 {
background: #1A1A7C;
color: #FFF;
font-size: 1.8rem;
width: 200px;
height: 200px;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
margin: 50px auto 0;
border-radius: 50%;
}
#plan section {
width: 1400px;
}
#plan section .swiper {
padding-top: 5%;
}
#plan figure {
background: #1A1A7C;
color: #FFF;
padding: 5%;
border-radius: 20px;
justify-content: space-between;
}
#plan figure div {
flex-basis: 60%;
margin-top: -12%;
}
#plan figure div img {
border: 5px solid #FFF;
}
#plan figcaption {
line-height: 1.8;
text-align: left;
flex-basis: 35%;
opacity: 0;
}
#plan figure.swiper-slide-visible figcaption {
opacity: 1;
}
#plan figcaption strong {
color: #FFE038;
font-size: 1.6rem;
line-height: 1.3;
margin-bottom: 20px;
display: block;
}
#plan li {
background: #FFF;
height: auto;
padding-bottom: 90px;
border-radius: 20px;
}
#plan li div img {
border-radius: 17px 17px 0 0;
}
#plan li h3 {
font-size: 18px;
font-weight: 700;
line-height: 1.3;
height: 65px;
padding: 10px 20px 0;
}
#plan li p {
font-size: 12px;
text-align: left;
padding: 0 20px;
}
#plan li dl {
padding: 10px 20px;
position: absolute;
left: 0;
bottom: 0;
}
#plan li dl dt {
background: #EC641A;
font-size: 14px;
color: #FFF;
line-height: 25px;
text-align: center;
width: 50px;
height: 25px;
margin-bottom: 10px;
float: left;
clear: both;
}
#plan li dl dd {
font-size: 16px;
font-weight: bold;
text-align: left;
line-height: 1.3;
padding: 2px 0 10px 60px;
}
#plan li dl dd em {
font-size: 18px;
letter-spacing: .1em;
}
#plan li dl dd span {
font-size: 12px;
}

/* #players */
#players section {
width: 1400px;
}
#players .swiper-slide figcaption {
text-align: left;
padding: 20px 0;
}
#players .swiper-prev {
left: 28%;
}
#players .swiper-next {
right: 28%;
}

/* #step */
#step section p {
font-size: 18px;
margin: 50px 0;
}
#step section + section {
width: 1400px;
padding-top: 0;
}
#step section + section ul.flex {
justify-content: space-between;
margin-top: 50px;
}
#step section + section ul.flex li {
flex-basis: 48%;
}
#step .link {
margin-top: 100px;
}

/* #access */
#access div { 
max-width: 700px;
margin: 50px auto 0;
}
#access .link {
margin-top: 100px;
}

/* #faq */
#faq dl {
font-weight: 700;
text-align: left;
margin: 50px auto 0;
}
#faq dl a {
color: #004098;
text-decoration: underline;
}
#faq dl a:hover {
text-decoration: none;
}
#faq dl dt {
background: #1A1A7C url("images/icon_q.png") no-repeat 20px 14px;
background-size: 40px auto;
color: #FFF;
font-size: 18px;
margin-bottom: 20px;
padding: 20px 80px;
border-radius: 10px;
position: relative;
cursor: pointer;
}
#faq dl dt.open {
margin-bottom: 0;
border-radius: 10px 10px 0 0;
}
#faq dl dt:after {
content: "";
background: url("images/icon_plus.png") no-repeat;
background-size: 40px auto !important;
width: 40px;
height: 40px;
position: absolute;
top: 50%;
right: 20px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
#faq dl dt.open:after {
background: url("images/icon_minus.png") no-repeat;
}
#faq dl dd {
display: none;
background: #FFF url("images/icon_a.png") no-repeat 20px 14px;
background-size: 40px auto;
font-size: 16px;
margin-bottom: 20px;
padding: 20px 80px;
border-radius: 0 0 10px 10px;
}

/* #mascot */
#mascot h2 {
color: #FFF;
font-size: 3rem;
font-weight: 900;
padding: 10px 0;
}
#mascot ul.flex {
justify-content: space-between;
margin-top: 50px;
}
#mascot ul.flex li {
background: #FFF;
padding: 5px;
flex-basis: 48%;
}


/* footer
------------------------------------------------------------ */
footer {
background: #000;
}

/* #sns */
#sns {
background: #FFF;
}
.share__icon {
display: flex;
justify-content: center;
margin: 0;
}
.share__icon li {
width: 20%;
}
.share__icon__item a {
color: #3e3e3e;
line-height: 1;
transition: opacity 0.2s ease;
padding: 15px 10px;
display: flex;
justify-content: center;
align-items: center;
}
.share__icon .line {
background: #00B900;
}
.share__icon .twitter {
background: #1DA1F2;
}
.share__icon .facebook {
background: #1877F2;
}
.share__icon .instagram {
background: url("images/sns_instagram_bg.png") center no-repeat;
background-size: cover;
}
.share__icon .youtube {
background: #FF0000;
}
.share__icon__inner img {
width: 40px;
}
.share__icon__name {
margin-top: 5px;
text-align: center;
font-size: 10px;
color: #fff;
}
.share__icon__btn {
border: #fff 1px solid;
padding: 5px 20px;
border-radius: 10px;
margin-top: 10px;
font-size: 10px;
color: #fff;
}

/* #information */
#information a {
background: #FFE038;
font-size: 23px;
font-weight: bold;
padding: 20px;
display: block;
}
#information a:hover {
background: #004098;
color: #FFF;
}

footer h1 {
width: 188px;
margin: 0 auto 30px;
}
footer p {
color: #FFF;
font-size: 12px;
}
footer p + p {
font-size: 11px;
}

/* #ticket */
#ticket {
position: fixed;
right: 1%;
bottom: 2%;
z-index: 3;
}





@media screen and (max-width: 1180px) and (orientation:portrait) {
/* iPad縦以下 */

/* set
------------------------------------------------------------ */
.pc {
display: none;
}
.smd {
display: block;
}

/* main
------------------------------------------------------------ */
/* #players */
#players .swiper-prev {
left: 0;
}
#players .swiper-next {
right: 0;
}

/* #mascot */
#mascot h2 {
font-size: 2rem;
}

/* footer
------------------------------------------------------------ */
/* #ticket */
#ticket {
width: 150px;
}
}


@media screen and (max-width: 740px) {
/* iPhone以下 */

/* set
------------------------------------------------------------ */
body {
font-size: 14px;
line-height: 1.4;
}
.smd {
display: none;
}
.smp {
display: block;
}
br.smp {
font-size: 0;
}

/* common
------------------------------------------------------------ */
/* layout */
main article {
padding-bottom: 30px;
}
section {
padding: 30px 0;
}
section.swiper {
padding: 30px 0;
}

/* .swiper */
.swiper-wrapper {
margin: 20px auto 50px;
}
.swiper-pagination-bullet {
width: 30px;
height: 4px;
}

/* header
------------------------------------------------------------ */
header {
height: 60px;
}
header nav #close {
width: 40px;
height: 40px;
}
header nav #close:before {
line-height: 40px;
}

/* main
------------------------------------------------------------ */
/* #nav */
#nav img {
width: 140%;
max-width: 140%;
margin-left: -20%;
}

/* #plan */
#plan h3.fadeInUp100 {
font-size: 1.3rem;
width: 150px;
height: 150px;
margin-top: 50px;
}
#plan section .swiper {
padding-top: 15%;
}
#plan figure {
min-height: 350px;
padding: 5% 30px;
display: block;
border-radius: 10px;
}
#plan figure div {
margin: -25% auto 10px;
}
#plan figcaption strong {
font-size: 1.2rem;
margin-bottom: 10px;
}

/* #step */
#step section p {
font-size: 14px;
margin: 20px 0;
}
#step h3 img {
width: 140%;
max-width: 140%;
margin-left: -20%;
}
#step section + section ul.flex {
margin-top: 20px;
display: block;
}
#step section + section ul.flex li:first-child {
margin-bottom: 20px;
}
#step .link {
margin-top: 50px;
}

/* #access */
#access div {
margin: 20px auto 0;
}
#access .link {
margin-top: 50px;
}

/* #faq */
#faq section {
padding-bottom: 0;
}
#faq dl {
margin: 20px auto 0;
}
#faq dl dt {
background: #1A1A7C url("images/icon_q.png") no-repeat 10px 10px;
background-size: 20px auto;
font-size: 15px;
padding: 10px 40px;
}
#faq dl dt:after {
background-size: 20px auto !important;
width: 20px;
height: 20px;
right: 10px;
}
#faq dl dd {
background: #FFF url("images/icon_a.png") no-repeat 10px 10px;
background-size: 20px auto;
font-size: 13px;
padding: 10px 40px;
}

/* #mascot */
#mascot h2 {
font-size: 1.5rem;
}
#mascot ul.flex {
margin-top: 20px;
}

/* footer
------------------------------------------------------------ */
footer {
padding-bottom: 60px;
}

/* #sns */
.share__icon__item a img {
width: 40px;
height: auto;
}
.share__icon__name,
.share__icon__btn {
display: none;
}

/* #information */
#information a {
font-size: 18px;
}

footer p {
font-size: 10px;
}
footer p + p {
font-size: 10px;
}

/* #ticket */
#ticket {
width: 70px;
}

}