@charset "UTF-8";
	#astralx  article::after {content: '';}
@media screen and (min-width: 920px) {
	#astralx #present .box,
	#astralx #present h2 span,
	#astralx #present > p,
	footer h2,
	#astralx #pagetop {width: 880px;}
	#astralx #present h2 span,
	#astralx #present > p {padding-left: 220px;}
	#astralx #present .box p {left: 0;}
	#astralx #present > p br:nth-of-type(even) {display: none;}
}
@media screen and (max-width: 920px) {
	#astralx .container section:nth-of-type(n+2) {
	max-width: 640px;
	margin: 0 auto;
	}
	#astralx #pagetop.Fixed {right: 10px;}
	#astralx #present > p {padding-right: 130px;}
	#astralx #present > p br {display: none;}
	#astralx #present .box p {left: 10px;}
}
@media screen and (min-width: 660px) {
	#astralx .container section:nth-of-type(n+2) h3 {font-size: 18px;}
	#astralx .container section:nth-of-type(n+2) h3 strong {font-size: 27px;}
	#astralx .container section:nth-of-type(n+2) p,
	#astralx #present p {font-size: 16px;}
	#astralx #detail .wrap:nth-of-type(-n+2) {min-height: 344px;}
	#astralx #detail .wrap:nth-of-type(n+3) {min-height: 187px;}
	#astralx #detail .wrap:nth-of-type(6) {min-height: auto;}
	#astralx #detail .popup-iframe {
	width: 330px;
	position: absolute;
	right: 0;
	z-index: 3;
	}
	#astralx #detail .wrap:nth-of-type(-n+2) .popup-iframe {top: 319px;}
	#astralx #detail .wrap:nth-of-type(n+3) .popup-iframe {top: 162px;}
	#astralx #video h3 {padding: 6px 0 2px;}
	#astralx #shoplist h3 a {padding: 6px 6px 4px;}
	#astralx #present {padding: 0 0 10px;}
	#astralx #present h2 span,
	#astralx #present > p {padding-left: 230px;}
	#astralx #present h2,
	#astralx #present h2 span {font-size: 25px;}
	#astralx #present .box p {
	width: 210px;
	height: 230px;
	bottom: 10px;
	}
	#astralx #present .box p::before {
	width: 208px;
	height: 171px;
	}
	#astralx #present .box p::after {height: 35px;}
	#astralx #present .box p a {
	width: 210px;
	height: 200px;
	}
	#astralx #present .box p span {width: 220px;}
	#astralx footer {
	padding: 10px;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	}
	#astralx footer h2 a {float: right;}
}
@media screen and (max-width: 660px) {
	#astralx .container section:nth-of-type(n+2) h3 {
	padding: 10px 0 6px;
	font-size: 14px;
	}
	#astralx .container section:nth-of-type(n+2) h3 strong {font-size: 20px;}
	#astralx .container section:nth-of-type(n+2) p,
	#astralx #present p {font-size: 14px;}
	#astralx #detail p + p .popup-iframe {margin-top: 10px;}
	#astralx #video h3 strong {display: block;}
	#astralx #shoplist h3 a {padding: 10px 6px 8px;}
	#astralx #present {padding: 0 0 180px;}
	#astralx #present h2 span,
	#astralx #present > p {padding: 0 10px;}
	#astralx #present h2,
	#astralx #present h2 span {font-size: 17px;}
	#astralx #present h2 span {text-align: center;}
	#astralx #present .box p {
	width: 154px;
	height: 175px;
	bottom: 170px;
	}
	#astralx #present .box p.slideRight {
	margin: 0 auto;
	right: 0;
	}
	#astralx #present .box p::before {
	width: 150px;
	height: 114px;
	}
	#astralx #present .box p::after {height: 25px;}
	#astralx #present .box p a {
	width: 154px;
	height: 149px;
	}
	#astralx #present .box p span {width: 165px;}
	#astralx footer {
	padding: 0;
	background: rgba(0,0,0,.4);
	}
	#astralx footer h2 {padding: 50px 10px}
	#astralx footer h2 a {margin: 0 auto;}
}
@media all and (min-width: 450px) {
	#astralx #shoplist h3 a::after {
	height: 1em;
	margin: auto 0;
	position: absolute;
	right: 10px;
	top: 0;
	bottom: 0;
	}
}
@media all and (max-width: 450px) {
	#astralx #shoplist h3 {text-align: center;}
	#astralx #shoplist h3 a:after {margin: 5px 0 0;}
}
#astralx #present .box,
#astralx #present h2 span,
#astralx #present > p,
footer h2,
#astralx #pagetop {
max-width: 900px;
margin: 0 auto;
}
body {position: relative;}
#astralx .container {
padding: 0 0 40px;
position: relative;
}
#astralx .container section:nth-of-type(n+2) {
margin-bottom: 10px;
padding: 10px;
}
#astralx .container section:nth-of-type(n+2) h2 {
margin: 0 0 15px;
padding: 6px 0 2px;
text-align: center;
line-height: 1.5em;
}
#astralx #detail .popup-iframe {
padding: 5px 10px 6px;
color: #fff;
font-size: 12px;
line-height: 1em;
text-align: center;
border: 1px solid #E60012;
background: #E60012;
display: block;
transition: border .2s ease;
box-sizing: border-box;
}
#astralx #detail .popup-iframe:hover {border-color: #fff;}
@media all and (-ms-high-contrast: none){
	#astralx #detail .popup-iframe {font-family: 'Hiragino Kaku Gothic ProN', 'Meiryo', 'MS PGothic', sans-serif;}
}
#astralx #shoplist {
color: #fff;
overflow: hidden;
background: rgba(110,110,110,.9);
position: relative;
z-index: 1;
}
#astralx #shoplist::before {
width: 60%;
height: 100%;
content: '';
background: url(../images/shoplist.png) no-repeat left bottom;
background-size: 150% auto;
position: absolute;
bottom: -10px;
right: 0;
opacity: .3;
z-index: -1;
}
#astralx #shoplist h2 {
padding: 0;
color: #EB6100;
font-family: 'Lato';
background: rgba(255,255,255,.8);
}
#astralx #shoplist h3 a {
margin: 0 0 10px;
color: #fff;
line-height: 1.5em;
background: rgba(225,225,225,.2);
display: block;
position: relative;
transition: color .2s ease, background .2s ease;
}
#astralx #shoplist h3 a:hover {
color: #fff;
background: #EB6100;
}
#astralx #shoplist h3 a::after {
padding: 4px 6px 3px;
content: 'FIND OUT MORE';
font-family: 'Lato';
font-size: 12px;
font-weight: 600;
line-height: 1em;
background: #EB6100;
border: 1px solid #fff;
display: block;
transition: background .3s ease .1s;
}
#astralx #shoplist h3 a:hover::after {background: #F39800;}
#astralx #shoplist p,
#astralx #shoplist ul {
line-height: 1.75em;
margin: 0 0 10px;
}
#astralx #shoplist ul {padding: 0 0 0 1.5em;}
#astralx #video {background: rgba(224,233,244,.8);}
#astralx #video .youtube {
width: 100%;
height: 0;
padding-bottom: 56.25%;
position: relative;
}
#astralx #video .youtube iframe {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
#astralx #video h3 {
margin: 0 0 15px;
color: #EB6100;
text-align: center;
line-height: 1.5em;
background: rgba(0,0,0,.7);
}
#astralx #video h3:nth-of-type(n+2) {margin-top: 20px;}
#astralx #video h3 span {
line-height: 1.25em;
display: block;
}
#astralx #related {
position: absolute;
right: 102px;
bottom: 10px;
}
#astralx #related a,
#astralx #pagetop a {
font-family: 'Lato';
font-size: 12px;
font-weight: 600;
line-height: 30px;
}
#astralx #related a {
height: 30px;
padding: 0 6px;
color: #fff;
border: 1px solid #E60012;
background: #E60012;
display: inline-block;
transition: border .2s ease;
}
#astralx #related a:hover {border-color: #fff;}
#astralx #pagetop {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
}
#astralx #pagetop.Fixed {position: fixed;}
#astralx #pagetop a {
width: 90px;
height: 30px;
margin: 0 0 0 auto;
border: 1px solid #E60012;
background: #E60012;
display: block;
position: absolute;
right: 0;
bottom: 10px;
z-index: 500;
transition: border .2s ease;
}
#astralx #pagetop a:hover {border-color: #fff;}
#astralx #pagetop a::before,
#astralx #pagetop a::after {
width: 100%;
height: 100%;
content: '';
background: no-repeat 68px center;
background-size: auto 12px;
position: absolute;
right: 0;
top: 0;
}
#astralx #pagetop a::before {background-image: url(../images/pagetop_mark.png);}
#astralx #pagetop a::after {
background-image: url(../images/pagetop_hover.png);
opacity: 0;
transition: opacity .2s ease;
}
#astralx #pagetop a:hover::after {opacity: 1;}
#astralx #pagetop a span {
width: 68px;
color: #fff;
line-height: 30px;
text-align: center;
display: block;
position: absolute;
left: 3px;
top: 0;
}
#astralx #present {
color: #fff;
background: rgba(0,56,148,.8);
position: relative;
}
#astralx #present::after {content: none;}
#astralx #present h2 {
padding: 6px 0 4px;
line-height: 1.25em;
text-align: left;
background: rgba(235,97,0,1);
}
#astralx #present h2 span {display: block;}
#astralx #present p {
line-height: 1.75em;
padding-top: 10px;
}
#astralx #present .box {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
}
#astralx #present .box.Fixed {position: fixed;}
#astralx #present .box::after {content: none;}
#astralx #present .box p {
position: absolute;
bottom: 10px;
transition:  transform .3s ease;
}
#astralx #present .box p.On {transform: translate(0,100%);}
#astralx #present .box p.On.slideUp {transform: translate(0,0);}
#astralx #present .box p::before {
content: '';
background: url(../images/present.jpg) no-repeat right bottom;
background-size: cover;
border: solid 2px #fff;
display: block;
position: absolute;
left: 0;
bottom: 0;
}
#astralx #present .box p::after {
width: 100%;
content: '';
background: url(../images/present_logo.png) no-repeat right bottom;
background-size: contain;
display: block;
position: absolute;
right: 5px;
bottom: 5px;
}
#astralx #present .box p a {
color: #fff;
position: absolute;
bottom: 0;
right: 0;
z-index: 1;
}
#astralx #present .box p span {
font-weight: 600;
font-size: 14px;
line-height: 1em;
text-shadow: #000 1px 1px 1px;
display: block;
position: absolute;
left: -5px;
top: 0;
z-index: 1;
}
#astralx #present .box p span::before {
width: 80px;
height: 80px;
content: '';
background: url(../images/present_mark.png) no-repeat 0 0;
background-size: cover;
display: block;
position: absolute;
left: -20px;
top: -15px;
z-index: -1;
}
#astralx #present .box p span::after {
width: 100%;
height: 80px;
content: '';
background: url(../images/present_text.png) no-repeat 0 0;
background-size: contain;
display: block;
}
#astralx footer {
width: 100%;
color: #fff;
}
#astralx footer h2 a {
width: 110px;
height: 60px;
background: url(../images/logo_arai.png) no-repeat right bottom;
background-size: contain;
display: block;
}