@charset 'utf-8';

/*↓セクション・枠↓*/
section {
position:relative; overflow:hidden;
text-shadow:0 1px 1px rgba(0,0,0,25%);
}
section .inner {
display:flex; flex-wrap:wrap; flex-direction:row; justify-content:center;
max-width:768px; width:100%;
padding:24px; margin:0 auto;
}
section .co0 { position:relative; width:100%;}
section .co1,
section .co2 { position:relative;}
section .co0 > *,
section .co1 > *,
section .co2 > * { padding:8px;}
@media screen and ( max-width:768px ){
section >.inner {
flex-direction:column !important;
padding:8px;
}
section .co1,
section .co2 { width:100% !important;}
}
/*↑セクション・枠↑*/
/*↓購入↓*/
section a.mall {
display:inline-block;
border:solid 2px; border-color:#FC0 #930 #600;
background:linear-gradient(#F60, #C00);
box-shadow:inset 0 0 4px #F90, 0 2px 4px #111, 0 2px 8px #222;
border-radius:8px;
color:#FFF; font-size:20px; text-shadow:0 1px 1px #321; text-decoration:none;
padding:14px; margin:8px;
}
/*↑購入↑*/
/*↓汎用↓*/
section .description { font-size:14px; line-height:1.5; padding:8px;}
section .record {
display:inline-block;
font-size:14px; line-height:1.25; text-align:left;
padding:6px;
}
section .record li { position:relative; padding:2px; padding-left:calc(1em + 2px);}
section .record li:before { position:absolute; left:2px; top:2px; content:'\30fb';}/* ・ */

section .detail {
display:flex; flex-wrap:wrap;
font-size:14px; line-height:1.25;
padding:6px;
}
section .detail dt {
position:relative;
width:33.33%;
text-align:right;
padding:2px; padding-right:calc(1em + 2px);
}
section .detail dt:after {
position:absolute; right:2px; top:2px;
content:'\ff1a';
}
section .detail dd {
width:66.66%;
text-align:left;
padding:2px;
}

section .caution { font-size:12px; line-height:1.25; text-align:left;}
section .caution p { position:relative; margin-left:1em;}
section .caution p:before { position:absolute; left:-1em; top:0; content:'\203b';}/* ※ */

section .copy {
display:flex; flex-wrap:wrap; justify-content:center;
padding:4px;
}
section .copy li { font-size:10px; padding:4px;}

@media screen and ( max-width:768px ){
section .description { font-size:12px;}
section .record { font-size:12px;}
section .detail { font-size:12px;}
section .caution { font-size:10px;}
}
/*↑汎用↑*/

/*↓アルル↓*/
section.aruru { background:#EED; color:#630;}
section.aruru > .inner { text-shadow:0 0 2px #630, 0 0 2px #F90;}

section.aruru .bg {
position:absolute; left:calc(50% - 512px); top:0;
display:block;
width:512px; height:100%;
background:url( ../img/aruru/bg.jpg ) no-repeat center top / cover;
}
section.aruru .bg:before,
section.aruru .bg:after {
position:absolute; top:0; bottom:0;
width:128px;
background:linear-gradient(to left, rgba(238,238,221,0%), #EED);
content:'';
}
section.aruru .bg:before { left:0;}
section.aruru .bg:after { right:0; transform:scaleX(-1);}
section.aruru .co1 { margin-left:256px;}

section.aruru h2 { font-size:16px;}
section.aruru .logo {
display:inline-block;
max-width:384px; width:100%;
filter:drop-shadow(0 2px 4px #630);
padding:8px;
}
section.aruru .gallery { display:flex; flex-wrap:wrap; justify-content:center; padding:4px;}
section.aruru .gallery a {
display:block;
width:80px; height:80px;
background:no-repeat center center / cover;
border:solid 2px #FFF;
box-shadow:0 2px 2px rgba(0,0,0,50%);
margin:4px;
}
@media screen and ( max-width:768px ){
section.aruru .inner { padding-top:50vw;}
section.aruru .bg {
left:0; right:0;
width:100%; height:75vw;
background:url( ../img/aruru/bg.jpg ) no-repeat center top / cover;
}
section.aruru .bg:before {
top:auto; bottom:0;
width:100%; height:calc(25vw + 32px);
background:linear-gradient(rgba(238,238,221,0%), #EED);
}
section.aruru .bg:after { display:none;}
section.aruru .co1 { margin-left:0;}
}
/*↑アルル↑*/
/*↓ファンブック↓*/
section.fanbook { background:linear-gradient(#048, #06A, #048);}
section.fanbook .inner { color:#FFF; text-shadow:0 0 2px #0C9, 0 0 2px #CFF;}

section.fanbook .co0 .logo { max-width:376px; width:100%;}
section.fanbook .co1 {/* 商品とリンク */
display:flex; flex-direction:column; align-items:center;
width:272px;
}
section.fanbook .co2 { width:calc(100% - 272px);}

section.fanbook h2 { color:#FF0; font-size:18px; line-height:1.25;}
section.fanbook .item {
max-width:272px; width:100%;
filter:drop-shadow(0 0 4px #0C9) drop-shadow(0 0 4px #CFF);
}
section.fanbook .present { color:#FC0;}
section.fanbook .present h3 { font-size:14px;}
section.fanbook .present p { font-size:12px; line-height:1.25; margin-top:8px;}
@media screen and ( max-width:768px ){
section.fanbook h2 { font-size:14px;}
}
/*↑ファンブック↑*/
/*↓魔導大全↓*/
section.taizen {
background:#000;
color:#FFF; text-shadow:0 0 2px #FE9, 0 0 2px #FC0;
}
section.taizen .co1 {/* 商品とリンク */
display:flex; flex-direction:column; align-items:center;
width:272px;
}
section.taizen .co2 { width:calc(100% - 272px);}

section.taizen .logo {
max-width:496px; width:100%;
filter:drop-shadow(0 0 16px #FFE);
}
section.taizen h2 { color:#FE9; font-size:18px; line-height:1.25;}
section.taizen .item {
max-width:256px; width:100%;
filter:drop-shadow(0 0 8px #FE9);
}
@media screen and ( max-width:768px ){
section.taizen h2 { font-size:14px;}
}
/*↑魔導大全↑*/
/*↓魔導物語4↓*/
section.madou4 {
background:#410;
color:#FFF; text-shadow:0 1px 2px #830, 0 1px 2px #620, 0 1px 2px #410;
}

section.madou4 .bg {
position:absolute; left:50%; top:0;
display:block;
width:1080px; height:100%;
background:url( ../img/madou4/bg.jpg ) repeat-y center top / 100% auto;
transform:translateX(-50%);
}
section.madou4 .bg:before,
section.madou4 .bg:after {
position:absolute; top:0; bottom:0;
width:64px;
background:linear-gradient(90deg, #410, transparent);
content:'';
}
section.madou4 .bg:before { left:0;}
section.madou4 .bg:after { right:0; transform:scaleX(-1);}

section.madou4 .co0.flex { display:flex; flex-direction:column; align-items:center;}
section.madou4 .co1,
section.madou4 .co2 { width:50%;}

section.madou4 iframe {
display:block;
width:400px; height:200px;
background:#000;
padding:0; margin:8px;
filter:drop-shadow(0 2px 2px #410);
}
section.madou4 h2 { font-size:20px;}
section.madou4 .logo { max-width:456px; width:100%;}
section.madou4 .limited {/* 期間限定生産 */
background:linear-gradient(90deg, transparent, #C00 32px, #F00, #C00 calc(100% - 32px), transparent);
width:100%;
color:#FFF; text-shadow:none; font-size:20px;
padding:8px; margin:8px;
}
section.madou4 h3 { color:#FE9; font-size:16px;}
section.madou4 .case {
display:flex; flex-wrap:wrap; justify-content:space-around;
filter:drop-shadow(0 2px 2px #410);
padding:0;
}
section.madou4 .case a { display:block; margin:8px;}
section.madou4 .case img { max-width:152px; width:100%;}

section.madou4 .item { max-width:360px; width:100%;}
@media screen and ( max-width:768px ){
section.madou4 h2 { font-size:16px;}
section.madou4 h3 { font-size:14px;}
section.madou4 .limited { font-size:16px;}
}
@media screen and ( max-width:480px ){
section.madou4 iframe {
width:calc(100vw - 32px);
height:calc((100vw - 32px)*0.5);
}
}
/*↑魔導物語4↑*/
/*↓その他↓*/
section.other {

background:radial-gradient(ellipse at center top, #334953, #031923, #001);
text-shadow:0 1px 1px #000;
}
section.other ul {
display:flex; flex-wrap:wrap; justify-content:space-around;
max-width:768px; width:100%;
padding:24px; margin:0 auto;
}
section.other li { width:208px; padding:8px;}
section.other a { color:#FFF; text-decoration:none;}
section.other figure {
display:block; background:no-repeat center center / contain;
width:192px; height:192px;
}
section.other h3 { font-size:16px; margin:8px 0;}
section.other p { color:#CDD; font-size:12px; opacity:0.8;}
@media screen and ( max-width:768px ){
section.other { padding:8px;}
}
/*↑その他↑*/