@charset "utf-8";
body{
    background: #fff;
    color: #333;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    font-size: 90%;
    text-align: center;
    margin: 0 auto;
    overflow-x: hidden;
}
body{
    animation: fadeIn 2s ease 0s 1 normal;
}

@keyframes fadeIn{
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn{
    0% {opacity: 0}
    100% {opacity: 1}
}
a,a:link{
    text-decoration: none;
    color: #005bac;
}
a:hover{
    animation: btnOn 0.5s 1 forwards;
}
h2{
    color: #005bac;
    font-weight: 700;
    font-size: 90%;
}
em{
    color: #f00;
    font-style: normal;
}
header,
main{
    margin: 0 auto;
    display: block;
}
footer{
    margin: 0 auto;
}
table{
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
}
table tr th,
table tr td{
    padding: 5px 10px;
    text-align: center;
}
table tr th{
    width: 5em;
    color: #fff;
    background: #0b318f;
}
table tr:nth-child(even) th{
    background: #1e257a;
}
table tr:nth-child(odd) th:nth-child(even){
    background: #1e257a;
}
table tr td{
    background: #fff;
    color: #004da0;
}
table tr:nth-child(even) td{
    background: #f5f9fc;
}
table tr:nth-child(odd) td:nth-child(even){
    background: #f8f8f8;
}
table tr:nth-child(even) td:nth-child(even){
    background: #fff;
}
table tr:nth-child(odd) td:nth-child(odd){
    background: #eaf3f8;
}


br.sp{
    display: none;
}
p.sp{
    display: none;
}
span.sp{
    display: none;
}
img{
    max-width: 100%;
}
@media screen and (min-width: 481px) and (max-width: 999px) {
    main{
        width: auto;
    }
    table tr th,
    table tr td{
        padding: 5px 10px;
    }
    br.sp{
        display: inline !important;
    }
}
@media screen and (max-width: 480px){
	header,
    main,
    footer{
        width: auto;
    }
    img{
        max-width: 100%;
    }
    table tr th,
    table tr td{
        padding: 2px 3px;
    }
    br.pc{
        display: none;
    }
    br.sp{
        display: inline !important;
    }
    p.sp{
        padding: 1em 0 0 0;
        display: block;
        text-align: center;
    }
    span.sp{
        display: inline;
    }
    span.pc{
        display: none;
    }
    h2{
        font-size: 18px;
    }
}


/* fadein */
.fadein {
    opacity : 0;
    transform : translate(0, 300px);
    transition : all 300ms;
}

.fadein.scroll {
    opacity : 1;
    transform : translate(0, 0);
}

/*
--------------------------------------------------------
header
--------------------------------------------------------
*/
div#header{
    margin: 0;
    padding: 0;
    background: url(../img/lockerroom.jpg) no-repeat 0 0;
    background-size: contain;
    height: calc(100vw * (850 / 2000));
    display: flex;
    justify-content: center;
    align-items: flex-end;
    position: relative;
    z-index: 100;
}
div#header p.title{
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 5.5vw;
}

/*@media screen and (max-width: 480px){
    div#header{
        background:#1f2b6d url(../img/lockerroom-sp.jpg) no-repeat 50% 50%;
        background-size: contain;
        height: 50vh;
    }
}*/

/* sub header */
#sub_header{
	position:fixed;
	top: 0;
	left: 0;
	background:#fff;  
	width: 100%;
	z-index:3;
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .3);
    display: none;
}
#sub_header p{
    margin: 10px auto;
}
#sub_header p.title img{
    height: 50px;
}

header{
    position: relative;
    max-height: 80vh;
    display: block;
    margin: 0;
    padding: 0;
}
header p.title{
    margin-left: auto;
    margin-right: auto;
    display: none;
}
header p.title img{
    width: 100%;
}
/* sp nav */
#sp-nav{
    position:fixed;
    z-index: 999;
	top:0;
    right: -120%;
	width:15em;
    height: 100vh;
	background:#005bac;
	transition: all 0.6s;
    font-size: 150%;
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
}
#sp-nav.panelactive{
    right: 0;
}

header nav#sp-nav.panelactive #g-nav-list{
    position: fixed;
    z-index: 999; 
    width: 100%;
    height: 100vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
header nav#sp-nav ul {
    position: absolute;
    z-index: 999;
    top:50%;
    transform: translate(0,-50%);
	list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}
header nav#sp-nav li{
    text-align: center;
    margin: 0;
    padding: 0;
}
header nav#sp-nav li a{
	padding: 10px;
	display: block;
	text-transform: uppercase;
	color: #fff;
	text-decoration: none;
    letter-spacing: 0.1em;
}

header div.openbtn{
	position:fixed;
    z-index: 9999;
	top:10px;
	right: 10px;
	cursor: pointer;
    width: 50px;
    height:50px;
    background: #fff;
    border-radius: 5px;
}
header div.openbtn span{
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 14px;
    height: 3px;
    border-radius: 2px;
	background-color: #005bac;
  	width: 45%;
  }
header div.openbtn span:nth-of-type(1) {
	top:15px;	
}

header div.openbtn span:nth-of-type(2) {
	top:23px;
}

header div.openbtn span:nth-of-type(3) {
	top:31px;
}

header div.openbtn.active{
    background: #fff;
}
header div.openbtn.active span{
    background: #005bac;
}
header div.openbtn.active span:nth-of-type(1) {
    top: 18px;
    left: 18px;
    transform: translateY(6px) rotate(-45deg);
    width: 30%;
}
header div.openbtn.active span:nth-of-type(2) {
	opacity: 0;
}
header div.openbtn.active span:nth-of-type(3){
    top: 30px;
    left: 18px;
    transform: translateY(-6px) rotate(45deg);
    width: 30%;
}
@media screen and (max-width: 1000px){
    header nav#sp-nav,
    .openbtn{
        display: block;
    }
}
.outer{
    position: relative;
}
.inner{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit- transform: translateY(-50%) translateX(-50%);
}
@media screen and (min-width: 481px) and (max-width: 999px) {
    #sp-nav{
        font-size: 3vw;
    }
}
@media screen and (max-width: 480px){
    header{
        max-height: calc(100vw * 0.6);
    }
    #sub_header p.title img{
        max-width: calc(100% - 100px);
        height: auto;
    }
    .img-frame{
        height: calc(100vw * 0.6);
    }
    div.img-04 p{
        width: 70%;
    }
    #sp-nav{
        font-size: 4vw;
        width:100%;
    }
    header nav#sp-nav.panelactive #g-nav-list{
        width: 100%;
    }
    header div.openbtn{
        width: 30px;
        height: 30px;
    }
    header div.openbtn span{
        left: 8px;
        height: 2px;
      }
    header div.openbtn span:nth-of-type(1) {
        top:10px;	
    }
    header div.openbtn span:nth-of-type(2) {
        top:15px;
    }
    header div.openbtn span:nth-of-type(3) {
        top:20px;
    }
    header div.openbtn.active span:nth-of-type(1) {
        top: 8px;
        left: 10px;
    }
    header div.openbtn.active span:nth-of-type(2) {
        opacity: 0;
    }
    header div.openbtn.active span:nth-of-type(3){
        top: 20px;
        left: 10px;
    }
}
@media screen and (max-width: 999px){
}


/*
--------------------------------------------------------
section
--------------------------------------------------------
*/
section#concept{
    background-color: #04479c;
    background-image: radial-gradient(at 0 0, #04479c 0, transparent 50%),
        radial-gradient(at 70% 30%, #8dc21f 0, transparent 40%),
        radial-gradient(at 50% 100%, #8dc21f 0, transparent 80%);
    color: #fff;
}
section#design{
/*    background-color: #e40012;*/
    background-image: 
        radial-gradient(circle at 20% 20%, #04479cd0 0, transparent 15%),
        radial-gradient(circle at 30% 20%, #8dc21fd0 0, transparent 20%),
        radial-gradient(circle at 50% 40%, #dedddb 0, transparent 20%),
        radial-gradient(circle at 20% 70%, #ff9300d0 0, transparent 15%),
        radial-gradient(circle at 30% 65%, #e40012d0 0, transparent 20%),
        radial-gradient(circle at 60% 90%, #1d171766 0, transparent 15%),
        radial-gradient(circle at 70% 90%, #48484933 0, transparent 20%);
}
section#partner{
    background-color: #e40012;
    background-image: radial-gradient(at 0 0, #e40012 0, transparent 50%),
        radial-gradient(at 70% 30%, #ff9300 0, transparent 40%),
        radial-gradient(at 50% 100%, #ff9300 0, transparent 80%);
    color: #fff;
}
section#gallery{
    background-color: #fff;
    background-image: radial-gradient(at 0 0, #dedddb 0, transparent 30%),
        radial-gradient(at 50% 100%, #dedddb 0, transparent 30%);
}
section#name{
    background-color: #1d1717;
    background-image: radial-gradient(at 0 0, #484849 0, transparent 50%),
        radial-gradient(at 70% 30%, #484849 0, transparent 40%),
        radial-gradient(at 50% 100%, #484849 0, transparent 80%);
    color: #fff;
}
section#buy{
    background-color: #04479c;
    background-image: radial-gradient(at 0 0, #04479c 0, transparent 50%),
        radial-gradient(at 70% 30%, #8dc21f 0, transparent 40%),
        radial-gradient(at 50% 100%, #8dc21f 0, transparent 80%);
    color: #fff;
}



/* section */
section{
    margin:0 auto;
    padding: 3em 0;
    font-size: 120%;
    line-height: 1.7;
    font-feature-settings: "palt";
    letter-spacing:1px;
    text-align:justify;
}
section::before,
section::after{
    content: '';
    display: block;
    height: 2em;
}
section header{
    text-align: center;
}
section header h1{
    margin: 0 auto;
    padding: 0;
    font-size: 5.5vw;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-indent: 0.2em;
    line-height: 1;
    text-transform: uppercase;
    opacity: 0;
}
section header h1.animate{
    animation: flicker 1s ease-in-out forwards;
}
@keyframes flicker{
    0%   { opacity: 0; }
    10%  { opacity: 0.5; }
    20%  { opacity: 0.1; }
    30%  { opacity: 1; }
    40%  { opacity: 0.4; }
    100% { opacity: 1; }
}
section header p{
    margin: 0.5em auto;
    padding: 0.2em 0.5em 0.4em 0.5em;
    display: inline-block;
    overflow: hidden;
    position: relative;
    color: transparent;
    font-size: 1vw;
    font-weight: 700;
    letter-spacing: 0.5em;
    text-indent: 0.5em;
    line-height: 1;
    background-color: transparent;
    transition: color 0s 0.6s, background-color 0s 0.6s;
}
section header p.is-visible{
    color: #000;
    background-color: #fff;
}
section header p::after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; height: 100%;
    transform: translateX(-101%);
    z-index: 1;
}
section header p.is-visible::after{
    animation: reveal-mask 1.2s cubic-bezier(0.8, 0, 0.17, 1) forwards;
}
@keyframes reveal-mask{
    0%   { transform: translateX(-101%); }
    50%  { transform: translateX(0); }
    100% { transform: translateX(101%); }
}

section#design header h1,section#gallery header h1{color: #666;}
section#design header p.is-visible,section#gallery header p.is-visible{color: #fff;background: #999;}
section#design header p::after,section#gallery header p::after{background: #666;}
section#concept header p::after,section#buy header p::after{background: #04b2ff;}
section#concept header p.is-visible,section#buy header p.is-visible{color: #04479c;}
section#partner header p.is-visible{color: #e40012;}
section#partner header p::after{background: #ffb800;}
section#name header p.is-visible{color: #333;}
section#name header p::after{background: #ccc;}

section p,
section ul,
section ol,
section table,
section h2,
section h3,
section h4{
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}
section ol{
    max-width: 760px;
    padding: 0 20px;
}
section ul.attention{
    font-size: 80%;
}

section#visual{
    position: relative;
    margin: 0;
    padding: 0 !important;
    height: calc(100% * 9 / 16);
    z-index: 1;
    line-height: 1;
    overflow: hidden;
}

/* 画像関連のスタイル */
section#visual p:last-child img{
    display: block;
}
section#visual p.img::before{
    display:block;
    content:'';
    width:100vw;
    position:absolute;
    bottom:0;
    z-index: 2;
    padding: 0;
    margin: 0;
    line-height: 1;
    mix-blend-mode: multiply;
    background-image: linear-gradient(0deg, #666, #fff 25%);
}
section#visual p.img:last-child{
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100%;
}
section#visual::before,
section#visual::after{
    display: none;
    height: 0;
}

@keyframes reveal-mask {
    0%   { transform: translateX(-100%); } 
    50%  { transform: translateX(0); } 
    100% { transform: translateX(100%); } 
}
section#visual{
    position: relative;
    margin: 0;
    padding: 0 !important;
    height: calc(100% * 9 / 16);
    z-index: 1;
    line-height: 1;
    overflow: hidden;
}
section#visual p:last-child img{
    display: block;
}
section#visual p.img::before{
    display:block;
    content:'';
    width:100vw;
    height: calc(100% * 9 / 16);
    position:absolute;
    bottom:0;
    z-index: 2;
    padding: 0;
    margin: 0;
    line-height: 1;
    mix-blend-mode: multiply;
    background-image: linear-gradient(0deg, #666, #fff 25%);
}
section#visual p.img:last-child{
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100%;
}
section#visual::before,
section#visual::after{
    display: none;
    height: 0;
}

section#visual div.text{
    position:absolute;
    width: 100vw;
    bottom: 1vw;
    padding: 4px;
    z-index: 3;
    text-align: center;
}

section#visual div.text p{
    margin: 0 auto;
    font-family: 'Montserrat',sans-serif;
    text-align: center;
    width: max-content; 
    z-index: 10;
    margin: 0 auto;
    padding: 0.2em 0.5em;
    display: block;
    overflow: hidden;
    line-height: 1;
    position: relative; 
    color: transparent;
    background-color: transparent;
    transition: color 0s 0.6s, background-color 0s 0.6s;
}
section#visual div.text p.season{
    font-size: 1.5vw;
}
section#visual div.text p.name,
section#visual div.text p.uniform{
    font-weight: 700;
    font-size: 3.5vw;
    letter-spacing: 0.1em;
    text-indent: 0.1em;
    margin-bottom: 0.3em;
}
section#visual div.text p.emblem img{
    width: 20vw;
    height: auto;
    margin: 0 auto;
    filter: drop-shadow(0 0 3px #333);
}
section#visual div.text p.name::after,
section#visual div.text p.uniform::after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; 
    height: 100%;
    transform: translateX(-100%); 
    z-index: 1;
    background: #004da0;
}
section#visual div.text p.name.is-visible,
section#visual div.text p.uniform.is-visible {
    color: #004da0; 
    background: #fff;
}
section#visual div.text p.season.is-visible {
    color: #fff;
    filter: drop-shadow(0 0 3px #333);
}
section#visual div.text p.name.is-visible::after {
    background: #004da0;
}
section#visual div.text p.season.is-visible::after,
section#visual div.text p.name.is-visible::after,
section#visual div.text p.uniform.is-visible::after {
    animation: reveal-mask 1.2s cubic-bezier(0.8, 0, 0.17, 1) forwards;
}

/* movie */
section#concept div#movie{
    position: relative;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 800px;
    aspect-ratio: 16 / 9;
}
section#concept div#movie p{
    background: #ccc;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    text-align: center;
    line-height: 100%;
}
section#concept div#movie iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}
section#concept div.swiper-container{
    max-width: 800px;
    margin: 0 auto;
}
section#concept div.swiper-container *{
    border: 1px solid #ccc;
    display: none;
}
section#concept div.swiper-container ul.swiper-wrapper {
    list-style: none;
    margin: 0;
    padding: 0;
    justify-content :space-between;
    background: #000;
    display: none;
}
section#concept div.swiper-container ul.swiper-wrapper li.swiper-slide{
    cursor: pointer;
    padding: 0;
    border: 1px solid #000;
    display: block;
}
section#concept div.swiper-container ul.swiper-wrapper li.swiper-slide.swiper-slide-thumb-active {
    background: #ccc;
}
section#concept div.swiper-container ul.swiper-wrapper li:hover{
    cursor: pointer;
}
.tab-content {
    opacity: 1;
}
.swiper-container {
    padding-bottom: 20px;
}

.Tabs__presentation-slider {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: 0 0;
  transition: transform 0.25s;
  background: linear-gradient( 45deg , #bdb9ff, #67b8ff);
}

.swiper-slide {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    padding: 15px 0 10px;
}
/* カード */
article.card {
    width: 46%;
}
article.card a {
    display: flex;
    flex-direction: column;
    border-radius: 2px;
    background: #fff;
    box-shadow: 0 0 3px 0 rgb(0 0 0 / 12%), 0 2px 3px 0 rgb(0 0 0 / 22%);
    cursor: pointer;
    transition: 0.2s ease-in-out;
    padding-bottom: 12px;
    text-decoration: none;
}
article.card a:hover {
    box-shadow: 0 15px 30px -5px rgb(0 0 0 / 15%), 0 0 5px rgb(0 0 0 / 10%);
    transform: translateY(-4px);
}
article.card img {
    margin-bottom: 10px;
}
article.card time, article.card p {
    padding: 0 20px;
    color: #313131;
}
article.card time {
    font-size: 0.9rem;
    color: #aaa;
    font-weight: 600;
}
p.cardTitle {
    font-size: 1.3rem;
    margin: 0;
    font-weight: 600;
}


/* concept */
section#concept header h1{
}
section#concept p.text{
    text-align: center;
    line-height: 2;
    letter-spacing: 0.1em;
}

/* design */
section#design div.uniform {
    display: flex;
    justify-content: space-between;
    max-width: 800px;
    margin-top: 1em;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 4em;
}
section#design div.uniform:last-child{
    margin-bottom: 0;
}
section#design div.uniform ul.slide{
    max-width: auto;
}

section#design div.uniform div.main{
    width: calc(60% - 10px);
}
section#design div.uniform div.sub{
    width: calc(40% - 30px);
}
section#design div.uniform div.sub h2{
    color: #004da0;
    font-size: 250%;
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 5px;
    font-weight: 500;
    color: #666;
}
section#design div.uniform div.sub h3{
    position: relative;
    margin-top: -0.6em;
    color: #666;
    font-size: 60%;
    font-weight: 400;
    letter-spacing: 1px;
    text-indent: 1px;
}
section#design div.uniform div.sub p{
    font-size: 80%;
    color: #222;
}

section#design div.uniform div.main ul.slide {
    position: relative;
    margin: 0;
    padding: 0;
}
section#design div.uniform div.main ul.slide li {
    padding: 0;
    margin: 0;
    text-align: center;
}
section#design div.uniform div.main ul.slide li img{
}
section#design div.uniform div.main ul.slide ul.slick-dots{
    list-style: none;
    padding: 0;
    margin: 0;
    bottom: 0;
    z-index: 100;
    text-align: center;
}
section#design div.uniform div.main ul.slide ul.slick-dots li {
    position: relative;
    display: inline-block;
    height: 20px;
    width: 20px;
    margin: 0 5px;
    padding: 0;
    cursor: pointer;
}
section#design div.uniform div.main ul.slide ul.slick-dots li button {
    background: #ccc;
    border:0;
    font-size: 0pt;
    height: 10px;
    width: 10px;
    border-radius: 100%;
    cursor: pointer;
}
section#design div.uniform div.main ul.slide ul.slick-dots li.slick-active button {
    background: #004da0;
}


/* slide-navigation */
section#design div.uniform div.sub ul.slide-navigation {
    position: relative;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    list-style: none;
}
section#design div.uniform div.sub ul.slide-navigation li {
    position: relative;
    cursor: pointer;
    overflow: hidden;
    width: 25%;
    padding: 0 !important;
    margin: 0 !important;
    float: left;

}
section#design div.uniform div.sub ul.slide-navigation li::before {
    display: block;
    vertical-align: top;
    width: auto;
    height: auto;
    background: transparent;
    border-radius: 0;
    margin-right: 0;
    padding-top: 100%;
    content: "";
}
section#design div.uniform div.sub ul.slide-navigation li img{
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    width: 100%;
}
section#design div.uniform div.sub ul.slide-navigation li.current::after {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    content: "";
    opacity: 0.5;
    background: #000;
}

section#design div.uniform div.sub ul.slide-navigation li img{
    transition:.5s all;
}
section#design div.uniform div.sub ul.slide-navigation li img:hover{
    transform:scale(1.1,1.1);
}

section#design div.uniform div.sub ul.slide-navigation li:hover::before{
    animation: slideRightBg ease .2s forwards;
}

section#design p img{
    padding: 20px;
    background:rgba(0,0,0,0.1);
}


/* partner */
section#partner{
    text-align: center;
}
section#partner h2{
    display: inline-block;
    padding-top: 0.5em;
    margin: 0 auto -1em auto;
    text-align: center;
    border-bottom: 1px solid #ccc;
    letter-spacing: 0.2em;
    text-indent: 0.2em;
    font-size:2vw;
    font-weight: 400;
    font-family: 'Montserrat', sans-serif;
    color: #fff;
    text-align: center;
}
section#partner ul.modal_trigger{
    display: flex;
    list-style: none;
    flex-wrap:wrap;
    justify-content: center;
    gap : 13px;
    padding: 0;
}
section#partner ul.modal_trigger li{
    width: calc((100% / 4) - 10px);
    text-align: center;
    cursor: pointer;
    padding: 0;
    margin: 0;
    color: #ccc;
    text-align: center;
    overflow:hidden;
}
section#partner ul.modal_trigger li::before{
    display: none;
}

section#partner ul.modal_trigger li:hover{
    opacity: 0.6;
}
section#partner ul.modal_trigger li img{
    display: block;
}
section#partner ul.modal_trigger li img{
    transition:.5s all;
}
section#partner ul.modal_trigger li img:hover{
    transform:scale(1.1,1.1);
}

section#partner ul.modal_trigger li:hover::before{
    animation: slideRightBg ease .2s forwards;
}

@-webkit-keyframes slideRightBg{
  0%{
    opacity: 0;
    left: -50%;
    }
  100%{
    opacity: 1;
    left: 0;
    }
}

@keyframes slideRightBg{
  0%{
    opacity: 0;
    left: -50%;
    }
  100%{
    opacity: 1;
    left: 0;
    }
}

.modal_box{
    display: none;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;
    text-align: left;
}
.modal_bg{
    background-color: rgba(30, 30, 30, 0.6);
    height: 100%;
    width: 100%;
}
.modal_inner{
    background-color: #fff;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    max-width: 900px;
    min-width: 800px;
    color: #000;
    max-height: calc(100vh - 80px);
    overflow-y: scroll;
    z-index: 9999;
}
.modal_inner h3,
.modal_inner h4{
    margin-bottom: 0 !important;
}
.modal_inner p{
    margin-top: 0;
}

.modal_block{
    padding: 40px;
    max-height: calc(100vh - 160px);    
}
.modal_close {
    cursor: pointer;
    position: absolute;
    right: 10px;
    top: 0;
    font-size: 2rem;
}

@media screen and (max-width: 900px) {
    .modal_trigger,
    .modal_trigger2{
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    }
    .modal_trigger li{
    width: 47.5%;
        margin-top: 20px;
        max-width: inherit;
    }
    .modal_trigger li + li{
        margin-left: 0;
    }
    .modal_inner{
        max-width: calc(100% - 40px);
        min-width: auto;
        width: calc(100% - 40px);
    }
    .modal_block{
        padding: 20px;
        max-height: calc(100vh - 40px);    
    }
    .modal_close{
        top: 5px;
        font-size: 1em;
    }
}


/* gallery */
section#gallery{
    margin: 0 auto;
    text-align: center;
}
section#gallery div.main{
    margin: 1em auto;
    max-width: 70vh;
    max-height: 70vh;
    padding: 0;
    background: #ccc;
}
section#gallery div.main ul.slide {
    position: relative;
    margin: 0;
    padding: 0;
    max-height: 70vh;
}
section#gallery div.main ul.slide li {
    margin: 0;
    padding: 0;
    text-align: center;
}
section#gallery div.main ul.slide li img{
}


/* slide-navigation */
section#gallery ul.slide-navigation {
    position: relative;
    padding: 0;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    max-width: 70vh;
}
section#gallery ul.slide-navigation li {
    position: relative;
    cursor: pointer;
    overflow: hidden;
    width: calc(100% / 8);
    padding: 0 !important;
    margin: 0 !important;
    float: left;

}
section#gallery ul.slide-navigation li::before {
    display: block;
    vertical-align: top;
    width: auto;
    height: auto;
    background: transparent;
    margin-right: 0;
    padding-top: 100%;
    content: "";
}
section#gallery ul.slide-navigation li img{
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    width: 100%;
}
section#gallery ul.slide-navigation li.current::after {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    content: "";
    opacity: 0.5;
    background: #000;
}

section#gallery ul.slide-navigation li img{
    transition:.5s all;
}
section#gallery ul.slide-navigation li img:hover{
    transform:scale(1.1,1.1);
}

section#gallery ul.slide-navigation li:hover::before{
    animation: slideRightBg ease .2s forwards;
}


/* name */
section#name p{
    text-align: center;
}


/* buy */
section#buy p{
    text-align: center;
}
section#buy table{
    font-size: 90%;
}
section#buy table.time tr.cols th{
    width: auto;
    padding: 0.5em 0;
}
section#buy table.time tr th{
    width: 5em;
    padding: 0.5em 0;
}
section#buy table.size{
    font-size: 80%;
}
section#buy h2{
    color: #fff;
    text-align: center;
    font-size: 150%;
    letter-spacing: 0.1em;
}
section#buy header + h2{
    margin-top: 0;
}
section#buy * + h2{
    margin-top: 3em;
}
section#buy div.benefit{
    display: flex;
    max-width: 760px;
    background: #fff;
    margin-left: auto;
    margin-right: auto;
    color: #004ea2;
    padding: 20px;
}
section#buy div.benefit p:first-child{
    width: calc(30% - 20px);
}
section#buy div.benefit p:last-child{
    width: calc(70% - 20px);
}
section#buy div.price{
    display: flex;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}
section#buy div.price div.price_list{
    width: 50%;
    text-align: center;
}
section#buy div.price div.price_list p{
    margin: 0;
}
section#buy div.price div.price_list p:nth-child(2){
    font-size: 200%;
    font-weight: 700;
}
section#buy div.price div.price_list p:nth-child(2) span{
    font-size: 50%;
}
section#buy p.price{
    text-align: center;
}
section#buy div.sizeimage{
    max-width: 760px;
    background: #fff;
    margin-left: auto;
    margin-right: auto;
    color: #004ea2;
    padding: 20px;
    text-align: center;
}
section#buy div.sizeimage div{
    display: flex;
    flex-wrap :wrap;
    justify-content: space-between;
}
section#buy div.sizeimage div p{
    margin: 0;
}
section#buy div.sizeimage div figure{
    width: calc((100% - 40px) / 3);
    margin: 0;
    padding: 0;
    font-size: 80%;
}
section#buy div.sizeimage div figure:nth-child(-n+3) {
    margin-bottom: 1.5em;
}
.slick-prev,
.slick-next{
    font-size: 0;
    line-height: 0;
    position: absolute;
    top: 50%;
    display: block;
    width: 20px;
    height: 20px;
    margin: 0;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    background: transparent;
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus{
    color: transparent;
    outline: none;
    background: transparent;
}
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before{
    opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before{
    opacity: .25;
}
.slick-prev:before,
.slick-next:before{
    font-size: 30px;
    line-height: 1;
    opacity: .75;
    color: fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.slick-prev{
    left: -35px;
}
.slick-prev:before{
    content: '〈';
}
.slick-next{
    right: -25px;
}
.slick-next:before{
    content: '〉';
}
::-webkit-full-page-media, :future, :root .slick-prev{
    left: -25px;
}
::-webkit-full-page-media, :future, :root .slick-next{
    right: -25px;
}


@media screen and (max-width: 800px){
    header p.title{
        margin-left: 20px;
        margin-right: 20px;
    }
    section{
        width: auto;
        margin-left: 0;
        margin-right: 0;
        padding-left: 20px;
        padding-right: 20px;
        font-size: 100%;
    }
}


@media screen and (min-width: 481px){
}


@media screen and (max-width: 480px){
    section#visual{
        height: calc(100% * 1300 / 1040);
    }
    section#visual div.text{
        top: 0;
        width: 100%;
        height: calc(100% * 1300 / 1040);
    }
    section#visual div.text p.season{
        font-size: 2vw;
        padding-top: 1em;
    }
    section#visual div.text p.name,
    section#visual div.text p.uniform{
        font-size: 6.1vw;
        margin-bottom: 0;
    }
    section#visual div.text p.emblem {
        position: absolute;
        z-index: 100;
        bottom: 35vw;
        width: 100%;
    }
    section#visual div.text p.emblem img{
        width: 40vw;
    }
    section#visual p.img::before{
        height: calc(100% * 1300 / 1040);
    }
    section#visual div.text p.name::after,
    section#visual div.text p.uniform::after{
        background: #004da0;
    }
    section#visual div.text p.name.is-visible,
    section#visual div.text p.uniform.is-visible {
        color: #004da0; 
        background: #fff;
    }
    section#visual div.text p.season.is-visible {
        color: #004da0;
        filter: drop-shadow(0 0 0 #004da0);
    }
    section#visual div.text p.name.is-visible::after {
        background: #004da0;
    }
    section{
        font-size: 3.5vw;
    }
    section header h1{
        font-size: 8vw;
        letter-spacing: 0.5vw;
        text-indent: 0.5vw;
    }
    section header p{
        font-size: 2vw;
    }
    section#concept p.text,
    section#name p{
        text-align: left;
        font-feature-settings: "palt";
        text-align:justify;
    }
    section#design div.uniform {
        display: block;
        max-width: auto;
    }
    section#design div.uniform div.main{
        width: auto;
        margin: 0;
    }
    section#design div.uniform div.main ul{
        width: auto;
    }
    section#design div.uniform div.sub{
        width: auto;
    }
    section#design div.uniform div.sub ul.slide-navigation{
        display: none;
    }
    section#design p img{
        width: calc(100% - 40px);
    }
    section#buy table{
        font-size:2.8vw;
    }
    section#buy table.size{
        font-size:2.8vw;
    }
    .slick-slide {
        height: 100%;
    }
    section#buy div.benefit{
        display: block;
        max-width: auto;
    }
    section#buy div.benefit p:first-child,
    section#buy div.benefit p:last-child{
        width: auto;
    }
    section#buy table:first-of-type tr td{
        text-align: left;
        padding-left: 3vw;
    }
    section#name ul li{
        width: calc((100% - 40px) / 5);
        margin-right: 10px;
    }
    section#name ul li:nth-child(8n){
        margin-right: 10px;
    }
    section#name ul li:nth-child(5n){
        margin-right: 0;
    }
    section#buy div.sizeimage div figure{
        width: calc((100% - 20px) / 2);
        margin: 0;
        padding: 0;
        font-size: 80%;
    }
    section#buy div.sizeimage div figure:nth-child(-n+4) {
        margin-bottom: 1.5em;
    }
    .modal_inner{
        font-size: 80%;
    }
}


/*
--------------------------------------------------------
footer
--------------------------------------------------------
*/
p#pagetop {
    position: flxed;
    right: 10px;
    z-index: 100;
}
p#pagetop a {
    position: relative;
    width: 50px;
    height: 50px;
    color: #fff;
    border-radius: 100%;
    background: #005bac;
    display: block;
    line-height: 60px;
    font-size: 80%;
    font-weight: 500;
    letter-spacing: 0.3;
}
p#pagetop a:hover{
    background: #fff;
    color: #005bac;
}
p#pagetop a:focus{
}

p#pagetop a::after {
    position: absolute;
    content: "";
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    width: 10px;
    height: 10px;
    -webkit-transform: rotate(-45deg); 
    transform: rotate(-45deg);
    right: 20px;
    top: 10px;
}
p#pagetop a:hover::after{
    border-top: 2px solid #005bac;
    border-right: 2px solid #005bac;
}


/* footer */
footer{
    text-align: center;
    margin: 0 auto;
    padding: 1em 0;
}
section#buy p.logo{
    margin:0 auto;
    width: 100px;
    font-size: 180%;
    padding-bottom: 4em;
}
.flow-button {
    width: 100%;
    position: fixed;
    bottom: 0;
    z-index: 90;
    height: 4em;
    box-shadow: 0 0 5px 0 rgba(0,0,0,0.3);
    font-size: 180%;
    background-color: rgba(255, 255, 255, 0.52);

}
p.button a{
    margin-left: auto;
    margin-right: auto;
	position: relative;
	padding: 0;
    border-radius: 1em;
    height: 2em;
    display: block;
    max-width: 15em;
    line-height: 2em;
    font-weight: 700;
    margin:1em auto;
    color: #fff;
    text-indent: -1em;
	vertical-align: middle;
    background-image: linear-gradient(45deg, #005dbc 0%, #d544f7 50%, #007de3 50.1%, #e844ff 100%);
    box-shadow: 0 4px 15px 0 rgba(232, 68, 255, 0.3);
    background-position: 0 50%;
    background-size: 230% auto;
    transition: all .2s ease-out;
}
p.button a:hover {
    transform: scale(0.95);
    background-position: 100% 50%;
    box-shadow: 0 4px 15px 0 rgba(232, 68, 255, 0);
}
p.button a:focus {
    outline: none;
}
p.button a:hover{
    top: 5px;
    box-shadow: 0 0 0px 0 #e844ff;
}
p.button a::before,
p.button a::after{
	position: absolute;
	top: 0;
	bottom: 0;
	right: 20px;
	margin: auto;
	content: "";
	vertical-align: middle;
}
p.button a::before{
	width: 1em;
	height: 1em;
	border-radius: 50%;
	background: #fff;
}
p.button a::after{
	right: calc(20px + 0.3em);
	width: 0.4em;
	height: 0.4em;
	border-top: 4px solid #e844ff;
	border-right: 4px solid #e844ff;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

/*



p.button a:hover{
    border: 1px solid #aaa64d;
    background: #fff;
    color: #aaa64d;
    transform: scale(0.95);
}
p.button a::before,
p.button a::after{
	position: absolute;
	top: 0;
	bottom: 0;
	right: 20px;
	margin: auto;
	content: "";
	vertical-align: middle;
}
p.button a::before{
	width: 1em;
	height: 1em;
	border-radius: 50%;
	background: #fff;
}
p.button a::after{
	right: calc(20px + 0.3em);
	width: 0.4em;
	height: 0.4em;
	border-top: 4px solid #aaa64d;
	border-right: 4px solid #aaa64d;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
p.button a:hover::before{
    background: #aaa64d;
}
p.button a:hover::after{
   	border-top: 4px solid #fff;
	border-right: 4px solid #fff; 
}*/

@media screen and (min-width: 481px) and (max-width: 999px){
}
@media screen and (max-width: 480px){
    footer p{
        font-size: 4.5vw;
    }
    .flow-button {
        font-size: 4.5vw;
    }
    p.button a::after{
        border-width: 2px;
    }
    p#pagetop {
        position: flxed;
        right: 10px;
        z-index: 100;
    }
    p#pagetop a {
        position: relative;
        width: 25px;
        height: 25px;
        line-height: 30px;
        font-size: 6px;
    }
    p#pagetop a::after {
        border-top: 1px solid #fff;
        border-right: 1px solid #fff;
        width: 5px;
        height: 5px;
        right: 10px;
        top: 5px;
    }
    p#pagetop a:hover::after{
        border-top: 1px solid #005bac;
        border-right: 1px solid #005bac;
    }
}

div.concept_bg section#concept div.game h2{
    margin-top: 2em;
    margin-bottom: -0.5em;
    color: #fff;
    font-size: 120%;
    letter-spacing: 0.5em;
    font-weight: 700;
    text-align: center;
}
div.concept_bg section#concept div.game p{
    text-align: left;
    width: 32em;
}
div.concept_bg section#concept div.game p{
    margin-bottom: -1em;
}
@media screen and (max-width: 999px){
    div.concept_bg section#concept div.game p{
        width: auto;
        text-align: center;
        margin-bottom: auto;
    }
}
@media screen and (max-width: 480px){
    div.concept_bg section#concept div.game p{
        font-size: 3vw;
    }
}




.blur{
    /* 初期状態: ぼかしておく */
    filter: blur(20px);
    opacity: 0;
    animation: fade-focus linear forwards;
    animation-timeline: view();
    animation-range: entry 0% cover 60%;
}

@keyframes fade-focus {
    to {
        filter: blur(0);
        opacity: 1;
    }
}