@charset 'utf-8';

/*↓共通：見出し↓*/
body .inner > h2 {
background:linear-gradient(#000,#006,#066);
border-bottom:solid 2px #FFF;
font-size:24px; text-shadow:0 1px 1px #0CC,0 2px 1px #033;
padding:0.75em 1em 0.5em;
}
body .inner > h2 sup { font-size:12px;}
@media screen and ( max-width:768px ){
body .inner > h2 { font-size:16px;}
body .inner > h2 sup { font-size:10px;}
}
@media screen and ( max-width:480px ){
body .inner > h2 { font-size:16px;}
body .inner > h2 sup { font-size:10px;}
}
/*↑共通：見出し↑*/
/*↓色を変化させる↓*/
@keyframes rainbow { to { filter:hue-rotate(360deg);}}
/*↑色を変化させる↑*/
/*↓御詫↓*/
.apology {
background:radial-gradient(circle at 50% 16px,#A00 32px,#602 256px,#201);
border:solid #FFF; border-width:1px 0 2px;
color:#FFF; text-shadow:0 1px 1px rgb(0 0 0 / 75%);
padding:16px calc(50vw - 512px + 32px);
}
.apology :nth-child(n+2) { margin-top:1em;}
.apology h3 { font-size:16px;}
.apology p  { font-size:14px; line-height:1.5;}
.apology p span { color:#FE0;}
.apology a  { color:#FCC;}
.apology h4 { font-size:14px;}
@media screen and ( max-width:768px ){
.apology { padding:16px;}
.apology h3 { font-size:14px;}
.apology p  { font-size:12px;}
.apology h4 { font-size:12px;}
}
/*↑御詫↑*/
/*↓履歴↓*/
.update {
background:url( ../img/bg-update.jpg ) no-repeat center center / cover;
border-bottom:solid 2px #FFF;
text-shadow:0 1px 1px #022;
padding:16px 32px;
}
.update dl {
display:flex; flex-wrap:wrap;
max-width:768px; width:100%;
font-size:14px; line-height:1.5;
margin:0 auto;
}
.update dl a { color:#FFF; text-decoration:none;}
.update dl a:hover { color:#FFC; animation:rainbow 1s linear infinite;}
.update dt { width:9em; color:#6FC; text-align:right;}
.update dt:after { content:'\FF1A';}
.update dd { width:calc(100% - 9em); color:#EFF; text-align:left;}
.update dd span { color:#FF3; margin-right:0.5em;}
.update dd span:empty { display:none;}
@media screen and ( max-width:768px ){
.update { padding:16px;}
.update dl { font-size:12px;}
}
@media screen and ( max-width:480px ){
.update dl :nth-child(n+3) { margin-top:0;}
.update dt { width:100%; text-align:left;}
.update dt:nth-of-type(n+2) { margin-top:0.5em;}
.update dd { width:auto; margin-left:2em;}
}
/*↑履歴↑*/
/*↓基本情報↓*/
.info {
background:linear-gradient(#013,#032,#051,#032,#013);
border-bottom:solid 2px #FFF;
}
.info dl {
display:flex; flex-wrap:wrap;
max-width:768px; width:100%;
font-size:14px; line-height:1.25; text-shadow:0 1px 1px #023;
padding:16px 32px; margin:0 auto;
}
.info dt { width:6em; color:#FF0; text-align:right;}
.info dt { white-space:nowrap;}
.info dt:before { content:'【';}
.info dt:after { content:'】';}
.info dd { width:calc(100% - 6em); text-align:left;}
.info dd span { color:#F44;}
.info dd :nth-child(2) { color:#BCC; font-size:12px; margin-top:0.5em;}
@media screen and ( max-width:768px ){
.info dl { font-size:14px; padding:16px;}
}
@media screen and ( max-width:480px ){
.info dl { font-size:12px;}
.info dt { width:100%; text-align:left;}
.info dt:nth-of-type(n+2) { margin-top:1em;}
.info dd { width:calc(100% - 2em); margin-left:2em;}
}
/*↑基本情報↑*/
/*↓購入↓*/
.store {
border-bottom:solid 2px #FFF;
padding:24px;
}
.store .jacket { display:flex; flex-wrap:wrap; justify-content:center;}/* 外箱 */
.store .jacket li { padding:8px;}
.store .jacket div:nth-of-type(1) {
position:relative;
display:inline-block;
overflow:hidden;
 max-width:320px;  width:calc(25.0vw - 12px - 16px);
max-height:480px; height:calc(37.5vw - 12px - 16px);
background:no-repeat center center / cover;
}
@media screen and ( max-width:768px ) {
.store .jacket div:nth-of-type(1) {
 width:calc(25.0vw - 4px - 16px);
height:calc(37.5vw - 4px - 16px);
}
}
@media screen and ( max-width:640px ) {
.store .jacket div:nth-of-type(1) {
 width:calc(50.0vw - 8px - 16px);
height:calc(75.0vw - 8px - 16px);
}
}
.store .jacket div:nth-of-type(1):before,
.store .jacket div:nth-of-type(1):after {
position:absolute; left:0; right:0; top:0; bottom:0;
content:'';
}
.store .jacket div:nth-of-type(1):before { background:repeating-linear-gradient(rgba(0,0,0,0.25),rgba(0,0,0,0.25) 1px,rgba(0,0,0,0) 1px,rgba(0,0,0,0) 2px);}
.store .jacket div:nth-of-type(1):after  { border:solid 1px#FFF;}
.store .jacket div:nth-of-type(2) {
background:linear-gradient(#233,transparent 33.33%);
text-shadow:0 1px 1px #000;
padding-top:8px;
}
.store .jacket p { position:relative; z-index:1;}
.store .jacket p:nth-of-type(1) { font-size:20px;}
.store .jacket p:nth-of-type(1):first-letter { font-size:125%; color:#F33;}
.store .jacket p:nth-of-type(2) { font-size:16px; color:#BCC; margin-top:8px;}
.store .jacket p:nth-of-type(3) { font-size:12px; line-height:1.25;}
.store .jacket p:nth-of-type(3):before { display:block; color:#899; content:'＋';}
.store .jacket span { font-size:125%;}
.store .jacket span.col-2 { color:#CF0;}
.store .jacket span.col-3 { color:#0CF;}
@media screen and ( max-width:768px ){
.store .jacket p:nth-of-type(1) { font-size:16px;}
.store .jacket p:nth-of-type(2) { font-size:14px;}
}
.store .btn { padding:8px;}/* ボタン */
.store a {
display:inline-block;
background:linear-gradient(#FC0,#F63);
box-shadow:0 1px 4px #630 inset, 0 2px 8px #660;
border:solid 4px; border-color:#FFF #CC9 #699; border-radius:8px;
color:#FFF; text-shadow:0 1px 2px #330; text-decoration:none !important;
padding:16px;
}
.store a :nth-child(1) { font-size:24px;}
.store a :nth-child(2) { font-size:16px; margin-top:4px;}
.store .caution {/* 注意 */
display:inline-block;
counter-reset:item;
padding:8px;
margin:0 auto;
}
.store .caution li:nth-child(n+2) { margin-top:0.25em;}
.store .caution li {
position:relative;
color:#BCC; font-size:14px; line-height:1.25; text-align:left;
margin-left:3em; margin-right:3em;
}
.store .caution li:before {/* カウンタ */
position:absolute; left:-3em; top:0;
width:3em;
content:'※'counter(item)'：'; counter-increment:item 1;
text-align:right;
}
.store .caution span { color:#F33;}
.store .caution span.col-2 { color:#CF0;}
.store .caution span.col-3 { color:#0CF;}
@media screen and ( max-width:768px ){
.store { padding:8px;}
.store a :nth-child(1) { font-size:20px;}
.store a :nth-child(2) { font-size:14px;}
.store .caution li { font-size:12px;}
}
/*↑購入↑*/
/*↓作品紹介↓*/
.trilogy {
position:relative;
overflow:hidden;
border-bottom:solid 2px #FFF;
}
.trilogy:before,
.trilogy:after { position:absolute; left:0; right:0; top:0; bottom:0; content:'';}
.trilogy:before { background:no-repeat center center / cover; opacity:0; transition:opacity 2s;}
.trilogy.stararthur:before { background-image:url('../img/ip/stararthur/bg.jpg');}
.trilogy.hydlide:before    { background-image:url('../img/ip/hydlide/bg.jpg');}
.trilogy.mugen:before      { background-image:url('../img/ip/mugen/bg.jpg');}
.trilogy.crimson:before    { background-image:url('../img/ip/crimson/bg.jpg');}
.trilogy.runeworth:before  { background-image:url('../img/ip/runeworth/bg.jpg');}
.trilogy.fire:before { opacity:0.75;}
.trilogy:nth-child(odd):before  { right:40vw;}
.trilogy:nth-child(even):before { left:40vw;}
.trilogy:nth-child(odd):after  { right:40vw; background:linear-gradient(to right,rgba(0,0,0,0) 50%,#000);}
.trilogy:nth-child(even):after { left:40vw;  background:linear-gradient(to left, rgba(0,0,0,0) 50%,#000);}
@media screen and ( max-width:1024px ){
.trilogy:nth-child(odd):before { right:0;}
.trilogy:nth-child(even):before { left:0;}
.trilogy:nth-child(odd):after,
.trilogy:nth-child(even):after { left:0; right:0; background:linear-gradient(rgba(0,0,0,0) 50%,#000);}
}
@media screen and ( orientation:portrait ){
.trilogy:nth-child(odd):before,
.trilogy:nth-child(even):before { bottom:initial; height:100vw;}
.trilogy:nth-child(odd):after,
.trilogy:nth-child(even):after { left:0; right:0; bottom:initial; height:100vw; background:linear-gradient(rgba(0,0,0,0) 50%,#000);}
}
.trilogy > div {
position:relative; z-index:2;
display:flex; justify-content:center; align-items:center;
max-width:1024px; width:100%;
padding:24px; margin:0 auto;
}
.trilogy .sec1,
.trilogy .sec2 { opacity:0; transition:opacity 1s, transform 1s;}
.trilogy.fire .sec1,
.trilogy.fire .sec2 { opacity:1;}

.trilogy .sec1 p {
display:block;
background:linear-gradient(to right, transparent, rgba(0,0,0,0.5) 16px, rgba(0,0,0,0.5) calc(100% - 16px), transparent);
font-size:14px; line-height:1.5; text-shadow:0 1px 1px #000;
padding:8px 16px; margin:8px;
}
.trilogy .sec1 img { display:inline-block; padding:8px;}
.trilogy .sec1 img:nth-of-type(1) { width:100.0%; filter:drop-shadow(0 2px 2px #000);}/* ゲーム */
.trilogy .sec1 img:nth-of-type(2) { width:66.66%;}/* メーカー */
.trilogy .sec2 { display:flex; flex-wrap:wrap; justify-content:center;}
.trilogy .sec2 li { width:216px;}
.trilogy .sec2 li > a {/* スクショ */
display:none; width:200px; height:128px;
background:#000 no-repeat center center / contain;
border:solid 1px #FFF;
margin:8px;
}
.trilogy .sec2 li > a:nth-of-type(1) { display:block;}
.trilogy .sec2 h3 { color:#FF0; font-size:16px; text-shadow:0 2px 2px #F00; padding:8px;}/* ゲームタイトル */
.trilogy .sec2 h3 span { white-space:nowrap;}
.trilogy .sec2 p { font-size:12px; line-height:1.5; text-shadow:0 1px 1px #000; padding:8px;}
.trilogy .sec2 div { padding:4px;}/* 機種 */
.trilogy .sec2 div span {
display:inline-block;
background:linear-gradient(#CFF,#FFF);
box-shadow:0 0 4px #0FF, 0 0 2px #0FF inset;
color:#069; font-size:12px; white-space:nowrap;
padding:0.5em; margin:4px; 
}
.trilogy .sec2 div span.new { animation:rainbow 1s linear infinite;}
@media screen and ( min-width:1025px ){
.trilogy:nth-child(even) > div { flex-direction:row-reverse;}
.trilogy:nth-child(odd) .sec1, .trilogy:nth-child(even) .sec2 { transform:translate( 16px,0);}
.trilogy:nth-child(odd) .sec2, .trilogy:nth-child(even) .sec1 { transform:translate(-16px,0);}
.trilogy.fire .sec1,
.trilogy.fire .sec2 { transform:translate(0,0);}
.trilogy .sec1 { width:calc(100% - 648px);}
.trilogy .sec2 { width:648px;}
}
@media screen and ( max-width:1024px ){
.trilogy > div { flex-wrap:wrap;}
.trilogy .sec1,
.trilogy .sec2 { transform:translate(0,32px);}
.trilogy.fire .sec1,
.trilogy.fire .sec2 { transform:translate(0,0);}
.trilogy .sec1 { max-width:328px; width:100%;}
.trilogy .sec2 { width:100%;}
}
@media screen and ( max-width:768px ){
.trilogy > div { padding:8px;}
.trilogy .sec1 h3 { font-size:16px;}
.trilogy .sec1 p { font-size:12px;}
}
/*↑作品紹介↑*/
/*↓特典・初回限定↓*/
.option { padding:24px;}
.option > h3 {
color:#0FF; font-size:18px; text-shadow:0 1px 2px #0CF,0 2px 2px #90C;
padding:8px;}
.option > h3:nth-of-type(n+2) { margin-top:16px;}
.option > p { color:#CDD; font-size:14px; line-height:1.25; padding:8px;}
.option > img {
display:inline-block;
max-width:568px; width:100%;
padding:8px;
}
.option ul { display:flex; flex-wrap:wrap; justify-content:center;}
.option li {
display:flex; flex-direction:column; justify-content:center;
max-width:calc(320px - 16px); width:calc(33.33% - 16px);/* margin分を抜く事 */
overflow:hidden;
border-radius:8px;
margin:8px;
}
@media screen and ( max-width:768px ){ .option li { width:calc( 50% - 16px);}}
@media screen and ( max-width:480px ){ .option li { width:calc(100% - 16px);}}
.option .benefit li {
background:linear-gradient(#000,#011);
box-shadow:0 0 4px #466;
border:solid 1px #233;
padding:15px;
}
.option .benefit li >:nth-child(n+2) { margin-top:0.5em;}
.option .limited li {
display:flex;
background:#000 no-repeat center 0 / contain;
box-shadow:0 0 4px #09C;
border:solid 1px #069;
}
.option .limited a {
display:block; width:100%; height:100%;
text-decoration:none;
padding-top:128px;
}
.option .limited a:nth-of-type(n+2) { display:none; width:100%; height:100%;}
.option .limited div {
background:linear-gradient(to bottom,transparent,rgba(0,0,0,0.9) 24px);
padding:15px;
}
.option .limited div >:nth-child(n+2) { margin-top:0.5em;}
.option li img { display:block; width:100%;}
.option li h4 { color:#FF0; font-size:16px; line-height:1.25; text-shadow:0 2px 2px #F00;}
.option li h4 span { color:#FF0; animation:rainbow 1s linear infinite;}
.option .limited h5 { color:#0CF; font-size:14px;}
.option li p { color:#EFF; font-size:14px; line-height:1.5;}/* キャプション */
.option li p span { color:#900; animation:option-p-span 0.5s alternate infinite;}
@keyframes option-p-span { to { color:#F33;}}
@media screen and ( max-width:768px ){
.option { padding:8px;}
.option > h3 { font-size:16px;}
.option > p { font-size:14px;}
.option li h4 { font-size:14px;}
.option li p { font-size:12px;}
}
/*↑特典・初回限定↑*/