@charset "UTF-8";

section {
background:#FFF;
box-shadow:0 0 24px #0CC,0 0 16px #CFF,0 0 8px #FFF;
color:#566;
}

/*↓h1,h2↓*/
section >h1 {
background:linear-gradient(#011,#033);
color:#FFF; font-size:20px; text-shadow:0 1px 2px #011;
padding:1em;
}
section >h2 {
display:block;
background:linear-gradient(#099,#3CC);
box-shadow:0 1px 2px #033 inset;
color:#FFF; font-size:20px; text-shadow:0 1px 2px #011;
padding:0.6em 1.2em;
}
section >h1 span { color:#F66;}
@media screen and ( max-width:768px ){
section >h1 { font-size:16px;}
section >h2 { font-size:16px;}
}
@media screen and ( max-width:480px ){
section >h1 { font-size:12px;}
section >h2 { font-size:14px;}
}
/*↑h1,h2↑*/
/*↓p↓*/
section .inner >p { font-size:14px; line-height:1.5; padding:8px;}
@media screen and (max-width:480px){
section .inner >p { font-size:12px;}
}
/*↑p↑*/
/*↓メイン↓*/
.main { position:relative;}
.main >img:nth-of-type(1) { width:100%;}
.main >img:nth-of-type(2) {
position:absolute; right:16px; top:16px;
width:25%;
border-radius:50%;
}
.main div {
position:relative;
background:linear-gradient(rgba(255,255,255,0),#FFF 192px);
text-shadow:0 1px 2px #BCC;
margin-top:-200px;
padding:32px;
}
.main div >img { max-width:600px; width:100%; margin:0 auto;}
.main p { margin-top:8px; margin-top:1em;}
.main p:nth-of-type(1) { color:#09C; font-size:18px; line-height:1.25;}
.main p:nth-of-type(2) { color:#233; font-size:14px; line-height:1.25;}
.main p:nth-of-type(3) { color:#F31; font-size:16px;}
@media screen and ( max-width:768px ){
.main div {
background:linear-gradient(rgba(255,255,255,0),#FFF 120px);
margin-top:-128px;
padding:16px;
}
.main p:nth-of-type(1) { font-size:16px;}
.main p:nth-of-type(2) { font-size:12px;}
.main p:nth-of-type(3) { font-size:14px;}
}
/*↑メイン↑*/
/*↓メニュー↓*/
a.menu {
display:block;
background:linear-gradient(#F30,#F90,#F30);
font-size:16px; color:#FFF; text-shadow:0 1px 1px #630; text-decoration:none;
padding:1em;
}
a.menu span { color:#FED;}
@media screen and ( max-width:480px ){ a.menu { font-size:14px;}}
/*↑メニュー↑*/
/*↓商品↓*/
section img.item-1,
section img.item-2 {
display:block; width:100%;
filter:drop-shadow(0 2px 4px #BCC);
margin:0 auto; padding:8px;
}
section img.item-1 { max-width:640px;}
section img.item-2 { max-width:384px;}
/*↑商品↑*/
/*↓収録タイトル↓*/
.lineup h3 { color:#099; font-size:16px; padding:8px;}
.lineup h3:nth-of-type(n+2) { margin-top:16px;}
.lineup dl { display:flex; flex-wrap:wrap; align-items:center;}
.lineup dl >* { padding:8px;}
.lineup dl dt { width:264px;}
.lineup dl dd { width:calc(100% - 264px);}
	@media screen and ( min-width:481px ){
	.lineup dl:nth-of-type(even) dt { order:2;}
	.lineup dl:nth-of-type(even) dd { oeder:1;}
	}
.lineup dl img {
display:block; max-width:300px; width:100%;
box-shadow:0 1px 2px #899;
margin:0 auto;
}
.lineup dl h4 { font-size:18px;}
.lineup dl h4:after {
display:block; width:100%; height:2px;
background:#099;
margin-top:4px;
content:'';
}
.lineup dl p { color:#788; font-size:12px; line-height:1.5; margin-top:8px;}
.lineup dl ul { display:flex; flex-wrap:wrap; justify-content:center; margin-top:8px;}
.lineup dl li { padding:0 4px;}
.lineup dl li * {/* 機種 */
display:block;
background:linear-gradient(-165deg,#099,#3CC);
box-shadow:0 1px 2px rgba(0,0,0,0.5) inset;
color:#FFF !important; font-size:14px; text-decoration:none !important; text-shadow:0 1px 1px #033;
padding:8px;
}
.lineup dl li span { background:linear-gradient(-165deg,#699,#9CC);}
@media screen and ( max-width:640px ){
.lineup dl dt { width:200px;}
.lineup dl dd { width:calc(100% - 200px);}
}
@media screen and ( max-width:480px ){
.lineup h3 { font-size:14px;}
.lineup dl dt,
.lineup dl dd { width:100%;}
}

/*↑収録タイトル↑*/
/*↓仕様↓*/
.spec {
display:flex; flex-wrap:wrap;
font-size:14px; line-height:1.25;
padding:8px;
}
.spec :nth-child(n+3) { margin-top:0.25em;}
.spec dt {
position:relative;
width:8em;
color:#099; text-align:right;
}
.spec dt:after { position:absolute; right:-1em; top:0; content:'：';}
.spec dd { width:calc(100% - 8em); text-align:left; padding-left:1em;}
@media screen and ( max-width:768px ){
.spec { font-size:12px;}
}
@media screen and ( max-width:480px ){
.spec :nth-child(n+3) { margin-top:0;}
.spec dt { width:100%; text-align:left;}
.spec dt:nth-of-type(n+2) { margin-top:0.75em;}
.spec dt:after { position:initial;}
.spec dd { width:100%;}
}
/*↑仕様↑*/
/*↓商標↓*/
.copy {
background:linear-gradient(#033,#011);
font-size:10px; color:#FFF;
padding:24px;
}
.copy ul { display:flex; flex-wrap:wrap; justify-content:center; padding:4px;}
.copy li { padding:4px;}
.copy p { padding:8px;}
@media screen and ( max-width:768px ){
.copy { padding:8px;}
}
/*↑商標↑*/