@charset "UTF-8";
@media all and (min-width: 920px) {
	#astralx header h1,
	#astralx #kv h2,
	#astralx #kv > p,
	#astralx .container {
	max-width: 880px;
	margin: 0 auto;
	}
	#astralx #kv h2 {
	padding: 17px 0 12px;
	font-size: 18px;
	}
	#astralx #kv h2::before {
	height: 180px;
	right: -10px;
	}
	#astralx #kv h2 strong {font-size: 62px;}
	#astralx #kv > p {
	padding: 70px 0 70px 220px;
	font-size: 27px;
	text-align: center;
	}
	#astralx #kv > p span {margin: 20px auto 0;}
	#astralx .container section {margin: 0 0 0 220px;}
}
@media all and (max-width: 920px) {
	#astralx header,
	#astralx #kv .title {padding: 0 10px;}
	#astralx header h1 {z-index: 2;}
	#astralx #kv h2::before {right: -20px;}
	#astralx #kv > p,
	#astralx #detail {
	max-width: 640px;
	margin: 0 auto;
	}
	#astralx #kv > p {
	padding: 40px 0;
	font-size: 22px;
	text-align: right;
	}
	#astralx #kv > p span {margin: 20px 0 0 auto;}
	#astralx .container {margin: 0 10px;}
}
@media all and (min-width: 660px) {
	#astralx #kv h2 {
	padding: 17px 0 12px;
	font-size: 18px;
	}
	#astralx #kv h2::before {height: 150px;}
	#astralx #kv h2 strong {font-size: 40px;}
	#astralx #kv > p br:nth-of-type(odd) {display: none;}
	#astralx #kv > p span {
	width: 500px;
	padding: 5px 94px 55px 0;
	font-size: 14px;
	}
	#astralx #detail h3 {
	font-size: 18px;
	padding: 6px 0 2px;
	}
	#astralx #detail h3 strong {font-size: 27px;}
	#astralx #detail p {font-size: 16px;}
	#astralx #detail .wrap {
	padding: 0 340px 0 0;
	position: relative;
	}
	#astralx #detail .wrap:nth-of-type(-n+2) {min-height: 310px;}
	#astralx #detail .wrap:nth-of-type(n+3) {min-height: 152px;}
	#astralx #detail .wrap .box {
	width: 330px;
	position: absolute;
	right: 0;
	}
	#astralx #detail .wrap .box:nth-of-type(1) {top: 5px;}
	#astralx #detail .wrap .box:nth-of-type(2) {top: 162px;}
	#astralx #detail figure {
	width: 160px;
	position: relative;
	}
	#astralx #detail .wrap:nth-of-type(1) .box:nth-of-type(1) figure {width: 330px;}
	#astralx #detail figure:nth-of-type(1) {float: left;}
	#astralx #detail figure:nth-of-type(2) {float: right;}
	#astralx #detail figcaption {font-size: 10px;}
}
@media all and (max-width: 660px) {
	#astralx #kv h2 {
	padding: 15px 0 12px;
	font-size: 14px;
	}
	#astralx #kv h2::before {height: 110px;}
	#astralx #kv h2 strong {font-size: 27px;}
	#astralx #kv > p {
	padding: 85px 10px 18px 10px;
	font-size: 16px;
	position: relative;
	}
	#astralx #kv > p span {
	width: 300px;
	padding: 6px 56px 32px 0;
	font-size: 10px;
	}
	#astralx #kv > p span{
	position: absolute;
	top: 5px;
	right: 5px;
	}
	#astralx #detail h3 {
	padding: 10px 0 6px;
	font-size: 14px;
	}
	#astralx #detail h3 strong {font-size: 20px;}
	#astralx #detail p {font-size: 14px;}
	#astralx #detail .wrap .box {
	padding: 5px 0;
	position: relative;
	}
	#astralx #detail figure {
	width: 49%;
	width: calc(50% - 5px);
	position: relative;
	}
	#astralx #detail .wrap:nth-of-type(1) .box:nth-of-type(1) figure {width: 100%;}
	#astralx #detail figure:nth-of-type(1) {float: left;}
	#astralx #detail figure:nth-of-type(2) {float: right;}
	#astralx #detail figcaption {font-size: 9px;}
}
@media all and (max-width: 400px) {
	#astralx #kv h2 strong {font-size: 21px;}
}
#astralx,
#astralx h2 {font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Meiryo', 'MS PGothic', sans-serif;}
@media all and (-ms-high-contrast: none){
	#astralx h2,
	#astralx h3 {font-family: 'Hiragino Kaku Gothic ProN', 'Meiryo', 'MS PGothic', sans-serif;}
	#astralx #shoplist h3 a::after {font-family: 'Lato';}
}
#astralx header,
#astralx #kv .title {border-top: 5px solid #EB6100;}
#astralx header {
	width: 100%;
	background: rgba(0,56,148,.8);
	position: fixed;
	z-index: 500;
	opacity: 0;
	transform: translate(0,-100%);
	transition: opacity .2s ease, transform 0s ease 1s;
}
#astralx header.On {
	opacity: 1;
	transform: translate(0,0);
	transition: transform .5s ease;
}
#astralx header h1 {
	padding: 11px 0 10px;
	max-height: 100%;
	position: relative;
}
#astralx header h1 a {
	width: 154px;
	padding: 1px 35px 20px 0;
	color: #fff;
	font-size: 7px;
	font-weight: 600;
	text-align: right;
	background: url(../images/logo.png) no-repeat left bottom;
	background-size: contain;
	display: block;
}
#astralx #kv::before {
	min-width: 700px;
	width: 100%;
	height: 100%;
	content: '';
	background-image: url(../images/kv.jpg);
	background-position: center top;
	background-size: cover;
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
}
#astralx #kv .title {
	background: rgba(0,56,148,.8);
	position: relative;
	z-index: 501;
}
#astralx #kv h2 {
	max-height: 100%;
	color: #fff;
	font-weight: 600;
	line-height: 1.5em;
	text-align: left;
	position: relative;
	z-index: 1;
}
#astralx #kv h2::before {
	width: 100%;
	content: '';
	background: url(../images/img.png) no-repeat right top;
	background-size: contain;
	position: absolute;
	top: -10px;
	z-index: -1;
}
#astralx #kv h2 strong {
	line-height: 1.25em;
	display: block;
}
#astralx #kv > p {
	line-height: 1.5em;
	color: #fff;
}
#astralx #kv > p span {
	color: #fff;
	font-weight: 600;
	line-height: 1em;
	text-align: right;
	background: url(../images/logo.png) no-repeat right bottom;
	background-size: contain;
	display: block;
}
#astralx #detail {
	margin-bottom: 10px;
	padding: 10px;
	background: rgba(224,233,244,.8);
}
#astralx #detail h3 {
	margin: 0 0 15px;
	color: #EB6100;
	text-align: center;
	line-height: 1.5em;
	background: rgba(0,0,0,.7);
}
#astralx #detail h3:nth-of-type(n+2) {margin-top: 20px;}
#astralx #detail h3 span {
	line-height: 1.25em;
	display: block;
}
#astralx #detail p {
	text-align: justify;
	line-height: 1.75em;
}
#astralx #detail .wrap:nth-of-type(-n+3) .box:nth-of-type(2)::before,
#astralx #detail .wrap:nth-of-type(2) .box:nth-of-type(1)::before {
	width: 100%;
	height: 100%;
	margin: auto;
	content: '';
	background: url(../images/arrow.png) no-repeat center center;
	background-size: 50px auto;
	display: block;
	position: absolute;
	left: auto;
	top: auto;
	z-index: 2;
}
#astralx #detail figure img {width: 100%;}
#astralx #detail figcaption {
	width: 100%;
	padding: 4px 0 2px;
	color: #fff;
	line-height: 1.5em;
	text-align: center;
	background: rgba(0,0,0,.4);
	display: block;
	position: absolute;
	left: 0;
	bottom: 2px;
}