@charset "UTF-8";

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

/*↓h1↓*/
section > h1 {
background:linear-gradient(#161623,#126);
color:#FFF; font-size:20px; text-shadow:0 1px 2px #012;
padding:1em;
}
section > h1 span { color:#F66;}
@media screen and ( max-width:768px ){ section > h1 { font-size:16px;}}
@media screen and ( max-width:480px ){ section > h1 { font-size:12px;}}
/*↑h1↑*/
/*↓h2～h4↓*/
section .inner > h2,
section .inner > h3,
section .inner > h4 { padding:8px;}
section .inner > h2 { color:#C00; font-size:24px;}
section .inner > h3 {
position:relative;
color:#37B; font-size:20px;
}
section .inner > h3:after {
display:block;
width:100%; height:2px; background:#C00;
margin-top:4px;
content:'';
}
section .inner > h4 { color:#126; font-size:18px;}
@media screen and ( max-width:768px ){
section h1 { font-size:16px;}
section .inner > h2 { font-size:20px;}
section .inner > h3 { font-size:18px;}
section .inner > h4 { font-size:16px;}
}
@media screen and ( max-width:480px ){
section .inner > h2 { font-size:18px;}
section .inner > h3 { font-size:16px;}
section .inner > h4 { font-size:14px;}
}
/*↑h2～h4↑*/
/*↓p,li,img↓*/
section .inner > p { font-size:16px; line-height:1.5; padding:8px;}
section .inner > p span { color:#E03; margin-left:0.5em;}
section .inner > ul { display:inline-block; font-size:14px; line-height:1.5; text-align:left; padding:8px;}
section .inner > ul li { position:relative;padding-left:1em;}
section .inner > ul li:before { position:absolute; top:0; left:0; content:'・';}
	section .inner > ul.caution { color:#899;}
	section .inner > ul.caution li:before { content:'※';}
section .inner > img { display:block; max-width:100%; width:auto; margin:0 auto; padding:8px;}
@media screen and ( max-width:768px ){
section .inner > p,
section .inner > ul { font-size:14px;}
}
@media screen and (max-width:480px){
section .inner > p,
section .inner > ul { font-size:12px;}
}
/*↑p,li,img↑*/
/*↓メイン↓*/
.main {
background:linear-gradient(#EFF,#FFF 65%,#CDD 65%,#FFF);
color:#C00;
padding:32px;
}
.main >div {
position:relative;
text-shadow:0 1px 2px #ABB;
}
.main img { display:block;}
.main img:nth-of-type(1) { max-width:80%; width:auto; margin:0 auto;}
.main img:nth-of-type(2) { max-width:480px; width:100%; margin:-96px auto 16px;}
.main img:nth-of-type(3) {
position:absolute; right:-8px; top:-8px;
max-width:160px; width:33.33%;
animation:main-img3 0.5s infinite alternate;
}
@keyframes main-img3 { to { transform:scale(0.9);}}
.main p { margin-top:8px;}
.main p:nth-of-type(1) { font-size:20px; color:#126;}
.main p:nth-of-type(2) { font-size:28px; color:#C90;}
.main p:nth-of-type(2) span { color:#E03; margin-left:0.5em;}
@media screen and ( max-width:768px ){
.main { padding:16px;}
.main img:nth-of-type(2) { margin-top:-64px;}
.main p:nth-of-type(1) { font-size:14px;}
.main p:nth-of-type(2) { font-size:20px;}
}
/*↑メイン↑*/
/*↓仕様↓*/
.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:25%;
color:#126; text-align:right;
}
.spec dt:after { position:absolute; right:-1em; top:0; content:'：';}
.spec dd { width:75%; 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 {
display:flex; flex-wrap:wrap; justify-content:center;
background:linear-gradient(#126,#161623);
font-size:10px; color:#FFF;
padding:28px;
}
.copy li { font-size:10px; padding:4px;}
@media screen and ( max-width:768px ){
.copy { padding:12px;}
}
/*↑商標↑*/