@charset "UTF-8";
/* normalize */
html {-ms-text-size-adjust: 100%;-webkit-text-size-adjust:100%;}body {margin:0;}main {display:block;}h1,h2,h3,h4,h5,h6 {font-weight:890;margin:0;padding:0;}hr {box-sizing:content-box;height:0;overflow:visible;}pre {font-family:monospace, monospace;font-size:1em;}a {background-color:transparent;}abbr[title] {border-bottom:none;text-decoration:underline;text-decoration:underline dotted;}b,strong {font-weight:800;}code,kbd,samp {font-family:monospace, monospace;font-size:1em;}small {font-size:80%;}sub,sup {font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sub {bottom:-0.25em;}sup {top:-0.5em;}img {border-style:none;vertical-align: bottom;}button,input,optgroup,select,textarea {font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input {overflow:visible;}button,select {text-transform:none;}button,[type="button"],[type="reset"],[type="submit"] {-webkit-appearance:button;}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner {border-style:none;padding:0;}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring {outline:1px dotted ButtonText;}fieldset {padding:0.35em 0.75em 0.625em;}legend {box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress {vertical-align:baseline;}textarea {overflow:auto;}[type="checkbox"],[type="radio"] {box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button {height:auto;}[type="search"] {-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration {-webkit-appearance:none;}::-webkit-file-upload-button {-webkit-appearance:button;font:inherit;}details {display:block;}summary {display:list-item;}template {display:none;}[hidden] {display:none;}picture,figure{display:block;}button{background-color: transparent;border: none;cursor: pointer;outline: none;padding: 0;appearance: none;}iframe{vertical-align: bottom;}
* {box-sizing: border-box; outline: none; margin: 0; padding: 0;word-wrap: break-word; overflow-wrap: break-word;font-feature-settings:"palt";}
::selection {background: #BEF;}
body::-webkit-scrollbar,.hamburger-menus::-webkit-scrollbar{display: none;}

/*Initial setting*/
html, body {width:100%; height:100%;}
html { font-size: 62.5%; line-height:1.5;overflow-y: scroll; overflow-x: hidden;}
body , textarea, input {font-family:"Noto Sans JP","Noto Sans JP fallback", sans-serif; font-weight:600; font-optical-sizing: auto; font-style: normal;letter-spacing: .1em;}
body {
	font-size: 1.6rem;
	position:relative;
	z-index:0;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	-webkit-text-size-adjust: 100%;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing:grayscale;
	background:#000;
	color:#FFF;
}
p {margin-bottom:1em;}
p:last-child {margin-bottom:0;}
a { color: #FFF; cursor:pointer; text-decoration:underline rgba(50, 50, 50,.0);text-decoration-thickness: 1px;text-underline-offset: 30px;transition: .3s;-webkit-text-decoration: none;}
a:hover {color:rgba(200, 0, 15,1);text-decoration:underline; text-decoration-color:rgba(200, 0, 15,1);text-underline-offset: 4px;}
a.img{text-decoration:none; text-underline-offset: 0; display:block;}
a.img:hover{transform: scale(1.1);}
ul,ol{list-style: none outside;}
img {max-width: 100%; width:100%; height: auto; vertical-align:top;user-select: none;-webkit-user-select: none;-webkit-user-drag: none;image-rendering: crisp-edges;user-select: none; -webkit-user-select: none;}
svg {display:block; max-width: 100%; width:100%; height: 100%; fill:#FFF;}
svg.external-link{width:1.4rem; height:1.4rem;fill:#222; display:inline; margin-left: 3px; vertical-align:-2px;}
svg.hidden{height:0;}
h1,h2,h3,h4,h5,h6 {font-family: "Noto Serif JP", serif;letter-spacing: 0;user-select: none; -webkit-user-select: none;}
h2 {font-size:clamp(4rem,6vw,6rem);margin:0 auto; width: 125%; transform: scaleX(0.8); transform-origin: center left;}
h3 {font-size:clamp(2rem,4vw,4rem);margin-bottom:.5em;}
h3:not(:first-child) {margin-top:1.5em;}
.js-glitter {
  position: relative;
  transition: all 0.4s;
  display:inline-block;
}
h4 {font-size:clamp(1.6rem,3vw,3rem);margin-bottom:.5em;}
.precautions li::before {
    content: "※";
    margin-right: 2px;
}
svg.icon {
    display:inline;
    width: 1.2rem;
    height: 1.2rem;
    vertical-align: -2px;
    fill: #000;
}


/* ========== ヘッダー(#header) ========== */
#header {position:fixed; z-index: 20; opacity:0;width: 100%;transition: .5s; padding:1vw 1vw 0;}
#header_inner{
position:relative;
transition: .5s;
height:100%;
margin:0 auto;
display:flex;
justify-content: flex-start;
}
#header-sns {
top: 3.5em;
right: 2%;
}
#header-sns svg {
width: 2rem;
height: 2rem;
vertical-align: top;
fill:#FFF;
}
#header-sns a:hover svg {fill: #111;}


#header .header_logo {
width:80px;
padding: 0;
}
#header .header_logo a {
display:block;
}
#header h1 span {
font-size: 1rem;
font-weight:900;
}

/* header-sns */
#header-sns{width:12.5%;	margin-left: auto;}
#header-sns ul{display: flex; justify-content: center;align-items: center;width:100%; height:100%;}
#header-sns ul li {position:relative;
flex-basis:calc(100% / 2);
text-align:center;
margin:0 auto;
}
#header-sns ul li a {display:block; background:rgba(255,255,255,.25);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: grid;
    place-content: center;
}
#header-sns svg {width: 20px;height: 20px;vertical-align:top;}
#header-sns ul li a svg {transition: .3s;fill:#FFF;}
#header-sns ul li a:hover svg {transform-origin: center; transform: scale(1.35);fill:#C01;}
#header.menuopen-small #header-sns { position: static; }




/* hamburger-menu */
.hamburger{
	position: relative;
	padding:0 2rem;
	z-index:2;
	-webkit-tap-highlight-color:transparent;
	cursor:pointer;
	background:#fff;
	border-radius:50%;
	width:50px;
	height:50px;
	display: grid;
	place-content: center;
}
.hamburger .line{
	display: block;
	position: relative;
	width: 20px;
	height: 2px;
	margin: 2px auto;
	background-color: #000;
	-webkit-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.hamburger:hover{cursor: pointer;
}
.hamburger.active{
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.hamburger.active .line{
width: 20px;
}
.hamburger.active .line:nth-child(2){opacity: 0;}
.hamburger.active .line:nth-child(1){transform: translateY(6px);}
.hamburger.active .line:nth-child(3){transform: translateY(-6px) rotate(90deg);}

/*hamburger-menus*/
.hamburger-menus{
position: fixed;
z-index:1;
top:0;
right:-30%;
width:25%;
visibility:collapse;
transition: 0.6s ease-out;
padding-top:10%;
user-select: none;
opacity:0;
}
.hamburger-menus.active{
right:0;
}
.hamburger-menus-bg{
    position: fixed;
    background-color: #f0f2f5;
		top:50%;
    right: -40%;
    width: 25%;
    height: 100%;
    height:120vh;
    z-index: 0;
    transform-origin: top left;
    clip-path: inset(0 0 0 100%);
    transform: rotate(0) translate3d(-10vw, -60vh, 0);
    transition: 0.6s cubic-bezier(0, 0.125, 0.25, 1);
}
.hamburger-menus-bg.active{
  clip-path: inset(0 0 0 0);
  animation: hamburgermenu .6s ease-out;
  transform: rotate(0) translate3d(-40vw, -60vh, 0);
  transition: clip-path 0.6s cubic-bezier(0, 0.125, 0.25, 1);
}
@keyframes hamburgermenu {
    0% {
        transform: rotate(0) translate3d(-10vw, -60vh, 0)
    }

    20% {
        transform: rotate(4deg) translate3d(-20vw, -60vh, 0)
    }

    60% {
        transform: rotate(-8deg) translate3d(-30vw, -60vh, 0)
    }

    to {
    transform: rotate(0) translate3d(-40vw, -60vh, 0)
    }
}
.hamburger-menus ul{padding: 0 3em 3vw;}
.hamburger-menus ul li {
position: relative;
display: flex;
flex-direction: column;
align-items: start;
font-size:2vw;
font-weight:600;
}
.hamburger-menus ul li a {
display:block;
text-align:left;
width: 100%;
opacity:0;
transition: opacity 0.2s 0.2s ease ,padding 0.2s 0.2s ease,background-color 0.3s ease;
}
.hamburger.active ~ .hamburger-menus{
visibility:visible;opacity:1;
}
.hamburger.active ~ .hamburger-menus ul li a {
opacity:1; padding: 1vw 0 1vw .75em;
border-left:5px solid #f0f2f5;
}
.hamburger.active ~ .hamburger-menus ul li a:hover {
font-weight:900;
color:#666;
border-left:5px solid #666;
}
.hamburger-menus-poster{
    position: fixed;
    background-color: rgba(0, 16, 41,.5);
		top:0;
    left:0;
    width:100%;
    height: 100%;
    height:100vh;
    padding-right:25%;
    z-index: 0;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: opacity .3s linear;
    opacity:0;
    text-align:center;
    visibility:hidden;
}
.hamburger-menus-poster.active{
    visibility:visible;
 opacity:1;
}
.hamburger-menus-poster img{
    width: auto;
    height: 100%;
    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);
}


html.scrollmenu-open, html.scrollmenu-open body {height: 100%; overflow: hidden;}

/* gnavi */
#gnavi{
	width:60px;
	display: flex;
	align-items:center;
	margin-left: 0vw;
}
.hamburger-menus ul li a {
color:#000;
text-decoration:none;
transition: 0.3s ease;
}

#hamburger-menus-sns{
margin:0 auto;
}
#hamburger-menus-sns p{
font-weight:900;
color:#EE001E;
text-align:center;
}
#hamburger-menus-sns ul {
display: flex;
justify-content: center;
align-items: center;
}
#hamburger-menus-sns ul li {
text-align:center;
margin:0 auto;
}
#hamburger-menus-sns ul li a {
padding: 0rem;
width:2vw;
border-left:none;
}
#hamburger-menus-sns svg {
width: 100%;
height: 50px;
vertical-align: top;
fill:#000;
}
#hamburger-menus-sns ul li a:hover {
background:none;
}
#hamburger-menus-sns ul li a:hover svg {
transform-origin: center;
transform: scale(1.3);
transition:.3s;
}





#body {position:relative; opacity:0;}
#body:after {
content:"";
position:absolute;
inset:0;
width:100%;
height:100%;
background: radial-gradient(circle, rgba(10, 10, 10, .95) 10%, rgba(0, 0, 0, 1) 100%);
z-index:-1;
}

#mainvisual{background:#000;}
#video-frame { position: absolute; top: calc(50%); left: 50%; width: auto; height: 100%; overflow: visible;  z-index: 1;aspect-ratio: 16 / 9;transform: translate(-50%, -50%);}
#video-frame:before {
content: '';
z-index: 0;
display: block;
position: absolute;
width: 100%;
height: 100%;
background-image:url(../img/mainvisual-02-pc.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
/*
#video-frame:after {
content: '';
display: block;
position: absolute;
z-index: -1;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(1.1,1);
width: 100%;
height: 100%;
background-image: linear-gradient(rgba(0, 238, 255,.3), rgba(0, 0, 0,1) );
filter: blur(50px);
}
*/
#video-frame iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:none;}
video { display: block; width: 100%; height: auto;  -o-object-fit: cover; object-fit: cover; filter: drop-shadow(0px 0px rgba(0,0,0,0)); outline: none; border: none;}
#mainvisual {position:relative;}
#mainvisual-inner {opacity:0;}
.mv-img {position:relative; z-index:1;}

.fullsize-video-bg { height: 100%; overflow: hidden; }
/*
.fullsize-video-bg:after { content: ""; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgTWFjaW50b3NoIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjI4RkZBQTgzNzg1NzExRTU4NTQyODc3OUM4MTZGMUREIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjI4RkZBQTg0Nzg1NzExRTU4NTQyODc3OUM4MTZGMUREIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MjhGRkFBODE3ODU3MTFFNTg1NDI4Nzc5QzgxNkYxREQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MjhGRkFBODI3ODU3MTFFNTg1NDI4Nzc5QzgxNkYxREQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz66uHInAAAAIUlEQVR42mL5//8/AyMj42YGIGBigABfEMEIkoEBgAADAKvuBwVS8BAjAAAAAElFTkSuQmCC); background-size: 3px 3px; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; opacity:.3;}
*/
.fullsize-video-bg .inner { width:100%; height: 100%; position: relative; z-index: 5; }
h1 {position: absolute; top:25%; left:50%;  transform: translate(-50%, -50%);  width:35vw;}
#catchcopy {position: absolute; top:30%; left:22%;  transform: translate(-50%, -50%); width:1.8vw; }



.scrolldown{
  position: absolute;
  z-index:5;
  bottom: 5.5vw;
  right: 5.5vw;
  width: 1px;
  height: 100px;
  background-color: transparent;
}

.scrolldown:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(transparent, #fff, #fff, transparent);
  animation: animate 2s linear infinite;
}
.scrolldown:after{
content:"ScrollDown";
  position: absolute;
transform: rotate(90deg)translate(60%, 135%);
color:#FFF;
font-size:10px;
}

@keyframes animate{
  0%{
    transform-origin: top;
    transform: scaleY(0);
  }
  50%{
    transform-origin: top;
    transform: scaleY(1);
  }
  51%{
    transform-origin: bottom;
    transform: scaleY(1);
  }
  100%{
    transform-origin: bottom;
    transform: scaleY(0);
  }
}

@media only screen and (max-width: 961px) {
.scrolldown{
        top: 65% !important;
        left: 5% !important;
        transform: translate(0%, -100%) !important;
}
}


#shortcut_menu {
  display:flex; gap:0 2vw; width:85%; margin:0 5vw;
  position: fixed; bottom:3vw; left:0; z-index:15;
}
#shortcut_menu .headline {margin-right:auto; position:relative;}
#shortcut_menu .headline:after {content:"NEW"; font-size:8px; position:absolute; z-index:2; background:rgba(186, 0, 28,1); border-radius:50%; width:37px; height:30px; left:-15px; top:-15px; display:grid;place-content: center;
transform-origin: top left;transform: scale(0.8, 1);}

#shortcut_menu .button {
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 300;
  display: inline-block;
  position: relative;
  text-align: center;
  color: #FFF;
  border: 1px solid #dde6eb;
  border-radius: 5px;
  line-height: 3em;
  padding-left: 2em;
  padding-right: 2em;
  box-shadow: 0 0 0 0 transparent;
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
  background:rgba(17, 98, 133,0.5);
}
#shortcut_menu .headline{
  padding-left: 1em;
  padding-right: 1em;
}
#shortcut_menu .button:hover {
  color: white;
  box-shadow: 0 0 30px 0 rgba(0, 199, 236, 0.5);
  background-color: #00c7ec;
  border: 1px solid #00c7ec;
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
#shortcut_menu .button:hover:before {
  -webkit-animation: shine 0.5s 0s linear;
  -moz-animation: shine 0.5s 0s linear;
  animation: shine 0.5s 0s linear;
}
#shortcut_menu .button:active {
  box-shadow: 0 0 0 0 transparent;
  -webkit-transition: box-shadow 0.2s ease-in;
  -moz-transition: box-shadow 0.2s ease-in;
  transition: box-shadow 0.2s ease-in;
}
#shortcut_menu .button:before {
  content: "";
  display: block;
  width: 0px;
  height: 86%;
  position: absolute;
  top: 7%;
  left: 0%;
  opacity: 0;
  background: white;
  box-shadow: 0 0 15px 3px white;
  -webkit-transform: skewX(-20deg);
  -moz-transform: skewX(-20deg);
  -ms-transform: skewX(-20deg);
  -o-transform: skewX(-20deg);
  transform: skewX(-20deg);
}

@-webkit-keyframes shine {
  from {
    opacity: 0;
    left: 0%;
  }
  50% {
    opacity: 1;
  }
  to {
    opacity: 0;
    left: 100%;
  }
}
@-moz-keyframes shine {
  from {
    opacity: 0;
    left: 0%;
  }
  50% {
    opacity: 1;
  }
  to {
    opacity: 0;
    left: 100%;
  }
}
@keyframes shine {
  from {
    opacity: 0;
    left: 0%;
  }
  50% {
    opacity: 1;
  }
  to {
    opacity: 0;
    left: 100%;
  }
}


.cover {position:relative;}
.cover:before{
content:"";
position:absolute;
width:100%;
height:100%;
inset:0;
background-color:rgba(255,255,255,.4);
background-image:
radial-gradient(rgba(200,200,200,.5) 50%, transparent 50%);
background-size: 3px 3px;
}
.cover::after{
content:"";
position:absolute;
display: grid;
place-content: center;
inset:0;
width:100%;
height:100%;
font-size:clamp(2.5rem,2.5vw,5rem);
color:#222;
font-weight:900;
text-shadow: 1px 3px #FFF, 1px -3px #FFF, -1px 3px #FFF, -1px -3px #FFF, 2px 2px #FFF, 2px -2px #FFF, -2px 2px #FFF, -2px -2px #FFF, 3px 1px #FFF, 3px -1px #FFF, -3px 1px #FFF, -3px -1px #FFF;}

.svg-filter{
filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(1%) hue-rotate(44deg) brightness(106%) contrast(101%); height:100%;}

.small {font-size:clamp(1.2rem,85%,1.6rem);}
.nav-links {display: flex; justify-content: center;}
.nav-links .page-numbers { display: flex; align-items: center; display:block; padding:1.5rem 2rem !important; border: .5px #777 solid;}
.nav-links .page-numbers.current { color:#000; background: rgba(255, 255, 255, .9);}


/*opening*/
#opening{
width: 100%;
height: 100vh;
background-color:#000;
position: relative;
top: 0;
left: 0;
z-index:20;
display: grid;
place-content: center;
}
#opening .inner{
display: grid;
place-content: center;
width: 15%;
height:auto;
position: absolute;
z-index:1;
opacity:0;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
animation: opening_inner 2.75s ease-in-out;
}
@media only screen and (max-width: 760px) {
#opening{
background-position:-100% 100%;
}
#opening .inner{
width: 70%;
}
}
@keyframes opening_inner{
  0%{
	 opacity:0;
  }
  20%{
	 opacity:1;
  }
  80%{
	 opacity:1;
  }
  100%{
	 opacity:0;
  }
}



.flex{display:flex; justify-content:space-between;}
.section {background:transparent; position:relative; z-index:2;}
.section-header {text-align:center;}
.section-header p {text-align:center; font-size:85%; font-weight:700; user-select: none; -webkit-user-select: none;}
.section-header,.section-body {width:80vw; max-width:1280px;margin-left:auto;margin-right:auto;}
.section-body {padding-bottom:3vw;}
.nowrap{white-space: nowrap;}




/* ==========お知らせ・最新情報========== */
#whatsnew { background:#000;position:relative;z-index:2; padding:6vw 0;}
#whatsnew .swiper{padding:0 0 3vw; overflow:visible;width:80vw; max-width:1280px;margin-left:auto;margin-right:auto;}
#whatsnew .section-header {margin-bottom: 5vw;}
#whatsnew ul { }
#whatsnew .img {grid-area: 1 / 1 / 4 / 2; display:block;}
#whatsnew .date {grid-area: 1 / 2 / 2 / 3; display:block; color:rgb(200,0,20); font-size:90%; display:grid; place-content:left center;}
#whatsnew .category {grid-area: 1 / 3 / 2 / 4; color:rgb(255,255,255); background:rgb(200,0,20); display:grid; place-content: center; font-size:90%;}
#whatsnew .title {grid-area: 2 / 2 / 3 / 4; display:block; font-family: "Noto Serif JP", serif; font-size:135%; font-weight:700; line-height:1.2; color:rgb(0,0,0);
    display: inline-block;
    transform-origin: top left;
    transform: scale(0.9, 1);
    width: 112%;
}
#whatsnew .text {grid-area: 3 / 2 / 4 / 4; display:block; color:rgb(0,0,0); width:calc(100% - 15px); font-size:85%;}
#whatsnew p {text-align:center;}
#whatsnew p a {font-weight:900;}
#whatsnew ul a {
text-decoration:none;
display:block;
position: relative;
padding:2vw;
display: grid;
grid-template-columns: 30% calc(50% - 15px) calc(20% - 15px);
grid-template-rows: 10% calc(43% - 12px) calc(47% - 12px);
grid-column-gap: 15px;
grid-row-gap: 12px;
}
#whatsnew ul a:hover {
  background:rgba(0,0,0,.02);
}
#whatsnew .swiper-slide-duplicate {/*height:calc(90vw / 3 - 20px) !important;*/}
#whatsnew .swiper-button-next:after,#whatsnew .swiper-button-prev:after {content:"" !important; display:none;}
#whatsnew .swiper-button-prev {left: auto; right:60px !important; top:15% !important; width:1vw !important;}
#whatsnew .swiper-button-next {right:20px !important; top:15% !important; width:1vw !important;}
#whatsnew .swiper-button-prev img,#whatsnew .swiper-button-next img {filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(1%) hue-rotate(44deg) brightness(106%) contrast(101%); height:100%;}
#whatsnew .swiper-slide {height: auto; background: rgba(255, 255, 255, .9);}


/* ========== みどころ(#feature) ========== */
#toppage #feature{
 position: relative;
 z-index: 0;
 min-height: 100vh;
 opacity: 0;
}
#toppage #feature-bg {
position: fixed;
top:0;
left:0;
z-index: 0;
width:100%;
height: 100vh;
background-image:url(../img/bg-feature-3.jpg);
background-size:100% auto;
background-repeat:no-repeat;
background-position:center center;
}
#toppage #feature-content {
  position: relative;
  top:100px;
  z-index: 1;
  text-shadow: #000 0 0 10px,#000 0 0 3px;
}
#toppage #feature .section-header {margin-bottom:3vw;}
#toppage #feature h3 {font-size: clamp(4rem, 6vw, 5rem);text-align:center; white-space: nowrap;}
#toppage #feature h4 {width:clamp(20rem,30vw,30rem);}
#toppage #feature h4 img {filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(1%) hue-rotate(44deg) brightness(106%) contrast(101%);}
#toppage #feature .section-body{width:70%; min-height:50vh !important;}
#toppage #feature p { font-size:135%; line-height:2;}

/* ========== とは(#about) ========== */
#about {
position: relative;
z-index: 2;
padding:0 0 6vw;
}
#about-bg {
position: absolute;
inset:0;
z-index: 0;
width:100%;
height:100%;
background-image:url(../img/bg-about.jpg);
background-size:100% 100%;
background-repeat:no-repeat;
background-position:center center;
}
#about-content {
  position: relative;
  z-index: 1;
}
#about .section-header { margin-bottom:3vw; text-shadow: #000 0 0 10px,#000 0 0 3px;}
#about .flex {align-items:center;}
#about .flex-item:nth-of-type(1) {flex-basis:35%;}
#about .flex-item:nth-of-type(2) {flex-basis:60%; background:rgba(0,0,0,.8); padding:3vw;}
#about h3 {margin-top:0;white-space: nowrap;}
@media only screen and (max-width: 1200px) { 
#about h3 {white-space: wrap;}
}


/* ========== CM(#pv) ========== */
#pv {background: rgb(100,0,170); background: linear-gradient(215deg, rgba(100,0,170,1) 0%, rgba(100,0,170,0) 50%);}
#pv .flex {flex-wrap:wrap; gap: 4vw;}
#pv .flex-item {flex-basis:47.5%; position:relative; overflow: hidden; aspect-ratio: 16 / 9;}
#pv .flex-item iframe { width:100%; height:100%; border:none;}


/* ========== 開催会場(#venue) ========== */
#venue {padding-bottom:0;}
#venue.section{padding-top:5vw;}
#venue .section-header,#venue .section-body {width:100%; max-width: none;}
#venue .venue-list {margin-bottom:4vw;}
#venue .venue-list h3 {padding:.25em .75em; color:#FFF; font-size:200%; margin-bottom:0;text-shadow:none; padding:0 12vw;}
#venue .venue-wrapper { padding:2em 0; font-size:200%;color:#FFF; min-height:20vh;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;}
#venue .venue-list p.image {width:100%;}
#venue .venue-list p img{filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(1%) hue-rotate(44deg) brightness(106%) contrast(101%); height:100%; padding:0 12vw;}
#venue .gradient-button-wrapper{
    width: 100%;
    margin: 0;
    padding: 0;
}

#venue #tokyo h3 {background: #c49c16;
background: linear-gradient(90deg,rgba(196, 156, 22, 1) 0%, rgba(209, 171, 75, 1) 20%, rgba(237, 229, 183, 0) 60%);}
#venue #fukuoka h3 {background: rgb(0,30,180);background: linear-gradient(90deg, rgba(0,30,180,1) 0%, rgba(0,30,180,0) 50%);}
#venue #nagoya h3 {background: rgb(0,150,50);background: linear-gradient(90deg, rgba(0,150,50,1) 0%, rgba(0,150,50,0) 50%);}
#venue #osaka h3 {background: rgb(100,0,170);background: linear-gradient(90deg, rgba(100,0,170,1) 0%, rgba(100,0,170,0) 50%);}


/* ========== FEATURE ========== */
#feature.singlepage{opacity:1;color:#fff;padding:6vw 0;

background:#000;
background-image:url(../img/agito_icon.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;

}
#feature .section-body{min-height:60vh;display:grid;place-content: center;}


/* ========== TOPICS ========== */
.layout-2column {
display:flex;
justify-content: space-between;
align-items: flex-start;
}
#article {
position: relative;
z-index:1;
flex-basis:100%;
width:100%;
font-size:1.8rem;
}
#page-contents.layout-1column #article {
position: relative;
z-index:1;
flex-basis:100%;
width:100%;
font-size:1.8rem;
}
#article #post h1 {
position: static;
width:auto;
transform: none;
}
#article #post .title a{
display: inline-block;
transform-origin: top left;
transform: scale(0.9, 1);
width: 113%;
letter-spacing:-1px;
color:rgb(214, 0, 65);
line-height:1.2;
text-decoration:none;
}
#article #post img {
margin:0 2rem  2rem 2rem;
min-width:240px;
}
#article #post .flex {gap:0 2%;}
#article #post.leafret img {
margin:0;
}
#article #post img.alinenone {
margin:0 auto;
}
#article #post img.size-large {
width:100%;
margin:0 0 2rem;
}
#article.archive li:last-child{
margin-bottom:0;
}
#article.archive h3 {
font-size:120%;
}
#article.archive h3 a{
display: inline-block;
position: relative;
line-height:1.4;
}
#article.archive p {
font-size:clamp(1.2rem, 1.2vw, 1.4rem);
}
#article.archive p:nth-of-type(1) {
font-size: 1.2rem;
background: rgba(200, 0, 15, 1);
padding-left:1rem;
color: #FFF;
margin-bottom: 1rem;
}
#article.archive p.img {
max-width:150px;
flex-basis:30%;
margin:0 2.5% 0 0;
background: transparent;
padding:0;
}
#article.archive div {
flex-basis:100%;
}

/* ========== #TOPICS #sidebar ========== */
#sidebar {
    flex-basis: calc(35% - 50px);
    width: calc(35% - 50px);
    border-radius: 2rem;
}
#sidebar .wp-block-heading {font-size: clamp(1.6rem, 3vw, 3rem); margin-bottom:0;}
#sidebar .sub-heading {font-family: "Noto Serif JP", serif; font-size: 1.2rem;}
#sidebar ul.wp-block-latest-posts {padding:1em 0; border-top:1px #777 solid;}
#sidebar ul.wp-block-latest-posts li {padding:1.5em 0; border-bottom:.5px #777 dotted;}
#sidebar ul.wp-block-latest-posts a {text-decoration:none;}
#sidebar ul.wp-block-latest-posts a:hover {background:rgba(255,255,255,1);}
#sidebar ul.wp-block-latest-posts a:hover .img {transform: scale(1.05);}
#sidebar .category span {background:rgba(200, 0, 15, 1); color:#FFF; padding:0 .5em; display:inline-block;}
#sidebar ul.wp-block-latest-posts .grid {
display: grid;
place-content: center;
grid-template-columns: 2fr 2.5fr 1fr;
grid-template-rows: .5fr 2fr;
grid-column-gap: 10px;
grid-row-gap: 7px;
}
#sidebar .grid p {margin:0; font-size:85%;}
#sidebar .grid .category { grid-area: 1 / 1 / 2 / 2; }
#sidebar .grid .date { grid-area: 1 / 2 / 2 / 4; text-align:right;}
#sidebar .grid .title { grid-area: 2 / 1 / 3 / 3; }
#sidebar .grid .img { grid-area: 2 / 3 / 3 / 4; }

/* ========== #TOPICS #NEWS ========== */
#news.section {
padding: 5vw 0;
background: #c49c16;
background: linear-gradient(135deg,rgba(196, 156, 22, 1) 0%, rgba(209, 171, 75, 1) 15%, rgba(237, 229, 183, 0) 40%);}
#news .archive li{
margin-bottom:30px;
}
#news .archive a{
display:block;
padding: 2rem;
text-decoration:none;
display:flex;
align-items: center;
border:.5px #777 solid;
background:rgba(0,0,0,.5);
}
#news .archive a:hover{
color:#FFF;
transform: scale(1.05);
}

/* ========== #TOPICS #SPECIAL ========== */
#special.section {
padding: 4em 0;
background: rgb(214, 0, 65);
background: linear-gradient(145deg, rgba(214, 0, 65, 1) 0%, rgba(214, 0, 65, 0) 50%);
}
#special .archive a{
display:block;
padding: 2rem;
text-decoration:none;
display:flex;
align-items: center;
border:.5px #777 solid;
background:rgba(0,0,0,.5);
}
#special .archive a:hover{
color:#FFF;
transform: scale(1.05);
}

#special.singlepage {
padding: 6vw 0;
}
#special.singlepage .section-body{
}
#special.singlepage .section-body .comingsoon{
display:grid;
place-content:center;
font-size:150%;
text-align:center;
min-height:75vh;
}

/* ========== #TOPICS .auchives ========== */
#news .section-header {margin-bottom:3vw;}
#page-contents #article.archive {flex-basis: 100%;}
#page-contents #article.archive li {margin-bottom:30px;}

/* ========== #TOPICS .single ========== */
#page-contents{}
.single-common #page-contents {background: #c49c16;
background: linear-gradient(135deg,rgba(196, 156, 22, 1) 0%, rgba(209, 171, 75, 1) 15%, rgba(237, 229, 183, 0) 40%); padding:5vw 10vw;}
#page-contents #article.single {flex-basis: 65%; width: 65%; background:rgba(0,0,0,.9); padding:3vw;}
#page-contents .sidebar {flex-basis:30%;}
#article #post .postdate {
position:relative;
font-size:1.2rem;
background: rgb(214, 0, 65);
color:#FFF;
margin:2em auto;
padding:0 .75em;
}
#page-contents #post img {margin:0;}
#page-contents #post p { font-weight:100; font-size:125%; line-height:1.6;}
.twitter-timeline { width:100% !important; }


/* ========== #venue-single ========== */
#tokyo.venue-single{padding-top:3em;
background: #e0b755;
background: linear-gradient(145deg,rgba(224, 183, 85, 1) 0%, rgba(255, 247, 201, 1) 5%, rgba(255, 209, 92, 1) 6%, rgba(186, 148, 24, 0) 16%, rgba(0, 0, 0, 1) 80%, rgba(255, 202, 97, 1) 100%);
}
.venue-single .section {padding:0;margin-bottom: 6vw;}
.venue-single {padding-top:5vw; padding-bottom:3vw;}
.venue-single .section-header,.venue-single .section-body {width:100%; max-width: none; padding:0 8vw;}


.dateplace img{filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(1%) hue-rotate(44deg) brightness(106%) contrast(101%); height:100%;}
.dateplace { margin-bottom:5em;}
.dateplace .gradient-button-wrapper {margin: 3vw auto;}
.dateplace .button-text {font-size: 250%;}
.dateplace .button-text span {display:block; font-size:40%;}

.price {padding:4em 3em 3em !important; border:1px #444 solid; margin-bottom:4em;position:relative;}
.price h3 {position:absolute; top:-1em; background:#000; padding:0 2em .2em; border:1px #444 solid;;
left: 50%; transform: translateX(-50%); line-height: 1.4; text-align: center;}
.price table {border-collapse:collapse; border:1px #FFF solid; width:100%; font-size:150%; font-weight:normal;margin-bottom:.5em;}
.price table th, .price table td { border:1px #FFF solid; padding:.3em .5em;}
.price table th{font-size:70%;
color:#000;
background: #c2af34;
background: linear-gradient(145deg,rgba(194, 160, 52, 1) 0%, rgba(255, 230, 191, 1) 24%, rgba(233, 202, 131, 1) 35%, rgba(215, 180, 101, 1) 44%, rgba(220, 180, 83, 1) 53%, rgba(235, 207, 134, 1) 68%, rgba(196, 155, 75, 1) 100%);
}
.price table td span { font-size:70%;}
.price table td:not(:first-of-type) {text-align:center;}
.price table td.left {text-align:left;}
.price .button-text {font-size:240%;}
.price td.none { display:none;}
.novelty {margin-top:2em;}
.novelty h4{font-size:115%;background: #c2af34;
background: linear-gradient(90deg, rgba(196, 156, 22, 1) 0%, rgba(209, 171, 75, 1) 20%, rgba(237, 229, 183, 0) 60%);padding-left:.5em;}
.novelty .flex-item:nth-of-type(1) {flex-basis:30%;}
.novelty .flex-item:nth-of-type(2) {flex-basis:66%;}
.novelty .flex-item:nth-of-type(2) p {font-size:125%;margin-top:2em;text-align:center; border:1px #FFF solid; padding:.5em .8em;}
.tickets table{font-size:150%; margin-top:1em;}
.tickets table {border-collapse:collapse; border:1px #FFF solid; width:100%; font-size:150%; font-weight:normal;margin-bottom:.5em;}
.tickets table th, .tickets table td { border:1px #FFF solid; padding:.3em .5em;}
.tickets table th{background: rgba(232,0,15,.8); font-size:70%;}
@keyframes gradient-spin {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}


/* ========== #precautions ========== */
#precautions.section {padding:10vw 0 0}
#precautions h3 {font-size: clamp(1.3rem, 2vw, 3rem); margin-bottom: .5em;}
#precautions h4 {font-size: clamp(1.1rem, 1.6vw, 2.4rem); margin-bottom: .5em;  padding-left: 1.5em;}
#precautions ul {
  list-style: none;
  padding-left: 1.5em;
}

#precautions li {
  position: relative;
  padding-left: 1em;
}

#precautions > div > ul {
 margin-bottom: 3em;
}
#precautions ul > li {
  margin-bottom: 0.75em;
}

#precautions ul ul > li {
  margin-bottom: 0.25em;
}

#precautions ul ul {
  margin-top: 0.25em;
}

li::marker {
  content: "";
}

#precautions ul > li::before {
  content: "\2022";
  display:grid;
  place-content:center;
  font-size:150%;
  position:absolute;
  top: -.8rem;
  left:0;
}

#precautions ul ul > li::before {
  content: "〇";
  display:grid;
  place-content:center;
  font-size:50%;
  position:absolute;
  top: .6rem;
  left:0;
}

/* ========== 認定リント #rinto ========== */
#rinto.section {padding:3em 0 3em;
background: rgb(138, 115, 0);
 background: linear-gradient(145deg, rgba(184, 150, 0, 1) 0%, rgba(138, 115, 0, 0) 20%, rgba(0, 0, 0, 1) 80%, rgba(138, 115, 0, .8) 100%);
}
#rinto ul {display:flex; flex-wrap:wrap; justify-content:start; gap:10px 10px;}
#rinto li {flex-basis:calc(100% / 5 - 10px); text-align:center; white-space:nowrap; font-size:90%;}
#rinto #thanx {margin-top:2em; text-align:center; font-size:150%;}

.gradient-button-wrapper {
     max-width: 75vw;
    display: flex;
    justify-content: center;
    align-items: center;
	margin: 3em auto;
}

.gradient-border-button {
     position: relative;
    padding: 2rem;
    border-radius: 10px;
    flex: 1 1;
    cursor: pointer;
    height: 100%;
    z-index: 1;
  text-align:center;
  text-decoration:none;
  font-weight:bold;
background: #d49f2c;
background: linear-gradient(115deg,rgba(212, 159, 44, 1) 0%, rgba(255, 241, 196, 1) 36%, rgba(230, 183, 73, 1) 42%, rgba(217, 189, 134, 1) 100%);
transition: 0.3s;
}
.gradient-border-button:hover{
background: linear-gradient(115deg,rgba(212, 159, 44, 1) 0%, rgba(255, 241, 196, 1) 24%, rgba(230, 183, 73, 1) 64%, rgba(217, 189, 134, 1) 100%);
box-shadow: 0 0 3px #BFA854, 0 0 8px #BFA854, 0 0 24px #BFA854;
text-decoration:none;
}


#fukuoka .gradient-border-button {
		background-color: rgba(0, 50, 175, .3);
}

#fukuoka .gradient-border-button:hover {
  background-color: rgba(0, 80, 220,.8);
}

#fukuoka .gradient-border::before {
		background: conic-gradient(from 180deg at 50% 50%, #03D 0deg, #0AF 112.5deg, #01A 228.75deg, #03D 360deg);
}

#nagoya .gradient-border-button {
		background-color: rgba(0, 150, 50, .3);
}

#nagoya .gradient-border-button:hover {
  background-color: rgba(0, 200, 100,.8);
}

#nagoya .gradient-border::before {
		background: conic-gradient(from 180deg at 50% 50%, rgb(0, 150, 50) 0deg, rgb(0, 200, 100) 112.5deg, rgb(0, 100, 25) 228.75deg, rgb(0, 150, 50) 360deg);
}


#osaka .gradient-border-button {
		background-color: rgba(100, 0, 170, .3);
}

#osaka .gradient-border-button:hover {
  background-color: rgba(100, 0, 170,.8);
}

#osaka .gradient-border::before {
		background: conic-gradient(from 180deg at 50% 50%, rgb(25, 0, 100) 0deg, rgb(100, 0, 170) 112.5deg, rgb(50, 0, 150) 228.75deg, rgb(25, 0, 100) 360deg);
}

.button-text {
  color: #000;
  font-weight: 700;
  text-transform: uppercase;
  font-family: "Poppins", sans-serif;
}


#calendar ol {display:flex; border-right:1px #888 solid;}
#calendar ol li.sunday {background:rgba(255,0,10,.6);}
#calendar ol li:first-of-type span.day,#calendar ol li.holiday span.day {color:rgba(255,0,10,.6);}
#calendar ol li:last-of-type span.day { color: rgba(0, 175, 255, .6);}
#calendar h4:not(:first-of-type) {margin-top:1.5em;}
#calendar li {flex-basis:calc(100% / 7); height:5em; border:1px #888 solid; position:relative; border-right:none; border-top:none; font-weight:bold; color:#269aff; text-align:center;}
#calendar ol.week { height:1.6em; border-top:1px #888 solid;}
#calendar ol.week li { height:1.6em; color:white;}
#calendar ol.week li:last-of-type {background-color: rgba(0, 175, 255, .6);}
#calendar li.today{background: rgba(150, 200, 255, .3);}

#calendar li span.day { display: block; top: 5px; left: 5px; font-size: 125%; font-family: "Arial", sans-serif; line-height:1; letter-spacing: 0; color:rgba(255,255,255,.5); text-align:left; padding:5px 5px;}
#calendar li span.day span.month { font-size: 80%; vertical-align: text-top;}
#calendar li span.holiday { display: block; font-size: 1rem;  color: rgba(255, 255, 255, .7); right: 3px; top: 5px;padding:0 5px;}
#calendar li span.shitei { color:orange;}
.organizer dl {display:flex;flex-wrap:wrap; gap:3px;}
.organizer dt {flex-basis:6em; border-bottom:#bbb .5px solid;padding:.3em .5em;}
.organizer dd {flex-basis:calc(100% - 6em - 6px); border-bottom:#bbb .5px solid;padding:.3em .5em;}

/* ========== FOOTER(#footer) ========== */
#footer {
position:relative;
overflow:visible;
z-index:2;
background:#000;
opacity:0;
padding-bottom:10vw;
}
#footer-menu-wrapper{
position:relative;
z-index:1;
display: grid;
grid-template-columns: 1fr 3fr;
grid-template-rows: repeat(3, 1fr);
margin: 0 auto;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
}
#footer:after{
content:"";
position:absolute;
z-index:0;
width:100%;
height:100%;
bottom:0;
background:#000;
background-image:url(../img/bg-footer.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center 125%;
}


/* footer-logo */
#footer-logo {
display: grid;
place-content: center;
grid-area: 1 / 1 / 4 / 2;
border-right:1px solid #FFF;
padding:3vw 3vw 3vw 10vw;
}
#footer-logo p.title {
    width: 25vw;
/* margin: 0 auto; */
}
#footer-logo img{
max-width:480px;
}


/* footer-sns */
ul#footer-sns{
grid-area: 2 / 2 / 3 / 3;
display: flex;
justify-content: center;
align-content: center;
flex-wrap: wrap;
padding: 10px 10vw 10px 0;
border-bottom: 1px solid #fff;
}
#footer-sns li {
flex-basis:30px;
margin:0 2%;
}
#footer-sns li a {
display:block
}
#footer-sns svg {
width: 100%;
height: 30px;
fill: #FFF;
transition: .3s;
}
#footer-sns a:hover svg {
transform-origin: center;
transform: scale(1.35);
fill: #C01;
}

/* footer-menu */
#footer-menu {
grid-area: 1 / 2 / 2 / 3;
display: flex;
justify-content: center;
padding: 10px 10vw 10px 0;
border-bottom: 1px solid #fff;
}
#footer-menu li {
display: flex;
align-content: center;
flex-wrap: wrap;
}
#footer-menu a{
color:#FFF;
font-size:1.5rem;
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
padding: 0 2rem;
white-space: nowrap;
text-decoration-color:rgba(255, 255, 255,0);
}
#footer-menu a:hover {color:rgba(200, 0, 15,1); text-decoration-color:rgba(200, 0, 15,1);}
@-moz-document url-prefix() {
#footer-menu a:after { margin-top: 2em; }
#footer-menu a:hover:after {width:100%;}
}



/* copyright */
#copyright {
grid-area: 3 / 2 / 4 / 3;
display: flex;
justify-content: center;
align-content: center;
flex-wrap: wrap;
padding: 10px 10vw 10px 0;
}
#copyright p{font-size: 1.2rem;}
#copyright span{font-size: 2.4rem; vertical-align: -12.5%;}


/*page-top*/
#page-top {
display:none;
position: fixed;
z-index:19;
right: 3vw;
bottom: 3vw;
background:rgba(17, 98, 133,0.5);
  border: 1px solid #dde6eb;
padding: 10px;
border-radius: 50%;
box-shadow: 0 0 5px rgba(255,255,255,.5);
width:50px;
height:50px;
opacity:0;
}
#page-top:hover {
background: #fff;
}
#page-top span {
position: relative;
display:block;
opacity: 0;
animation-iteration-count: infinite;
animation-duration: 2.0s;
animation-name: scroll;
}
#page-top span::before,#page-top span::after{
position: absolute;
display:block;
content: "";
border-bottom:3px solid #FFF;
left:0;
top:50%;
width:50%;
transform: rotate(-45deg) translateX(25%);
}
#page-top:hover span::before,#page-top:hover span::after {
border-color: #777;
}
#page-top span::after {
left:auto;
right:0;
transform: rotate(45deg) translateX(-25%);
}
#page-top span:nth-of-type(1) { animation-delay:.5s; top: 10px; }
#page-top span:nth-of-type(2) { animation-delay: .2s; top: 20px; }
@keyframes scroll { 0% {opacity: 0;} 50% {opacity: 1;} 100% {opacity: 0;} }

/*AURORA*/
#aurora_wrap{width: 100%;position: absolute;}
#aurora_lightings{bottom: -20px;position: absolute;width: 100%;}
div.aurora{border-radius: 50%;height: 0px;width: 100%;position: relative;margin: auto;}
#one{animation: one 5s ease-in-out infinite alternate;}
@keyframes one { from {box-shadow: 0 0 400px 30px #473C78;}to {box-shadow: 0 0 100px 15px #F72A3B; }}
/*
#two{width: 90%;animation: two 4s ease-in-out infinite alternate;}
@keyframes two { from {box-shadow: 0 0 400px 30px #18C499;}to { box-shadow: 0 0 100px 15px #D8F05E; }}
#three{width: 80%;animation: three 3s ease-in-out infinite alternate;}
@keyframes three { from {box-shadow: 0 0 400px 30px #FFDD00;}to { box-shadow: 0 0 100px 15px #3E33FF }}
#four{width: 70%; animation: four 2s ease-in-out infinite alternate;}
@keyframes four { from {shadow: 0 0 400px 30px #781848;}to { shadow: 0 0 100px 15px #F2BBE9; }}
#five{width: 60%;animation: five 1s ease-in-out infinite alternate;}
@keyframes five { from {box-shadow: 0 0 400px 30px #42F2A1;}to { box-shadow: 0 0 100px 15px #F4F6AD; }}
*/