@charset 'utf-8';

/*↓セクション↓*/
section {
background:url('../img/bg-1.jpg') 0 0 / contain;
box-shadow:0 0 24px #FC0,0 0 16px #FFC,0 0 8px #FFF;
color:#FFF;
}
section .inner { padding:32px;}
section .inner >:nth-child(n+2) { margin-top:32px;}
@media screen and ( max-width:768px ){
section .inner { padding:16px;}
section .inner >:nth-child(n+2) { margin-top:16px;}
}
/*↑セクション↑*/
/*↓h1↓*/
section > h1 {
background:linear-gradient(#010,#021);
color:#FFF; font-size:18px; text-shadow:0 1px 2px #000;
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:14px;}}
/*↑h1↑*/
/*↓メイン↓*/
.main {
position:relative;
text-shadow:0 1px 3px #000;
padding:8px;
}
.main img:nth-of-type(1) {/* パケ */
position:relative; z-index:1;
max-width:296px; width:80%; margin:0 auto;
animation:main-img1 1s infinite alternate ease-in-out;
 }
@keyframes main-img1 { 0% { transform:translateY(8px);} to { transform:translateY(-8px);}}
.main img:nth-of-type(2) {/* ロゴ */
position:relative; z-index:2;
max-width:600px; width:100%; margin:-64px auto 0;
}
@keyframes main-img3 { to { transform:scale(0.9);}}
.main p { margin-top:16px;}
.main p:nth-of-type(1) { font-size:24px; color:#FC3;}
.main p:nth-of-type(2) { font-size:20px; color:#CFC;}
.main p:nth-of-type(3) { font-size:28px;}
.main p:nth-of-type(3) span { color:#F00;}
@media screen and ( max-width:768px ){
.main img:nth-of-type(2) { margin-top:-32px;}
.main p:nth-of-type(1) { font-size:20px;}
.main p:nth-of-type(2) { font-size:16px;}
.main p:nth-of-type(3) { font-size:24px;}
}
@media screen and ( max-width:480px ){
.main img:nth-of-type(2) { margin-top:-32px;}
.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:20px;}
}
/*↑メイン↑*/
/*↓枠↓*/
.frame {
background:url('../img/bg-2.jpg') 0 0 / contain;
border:solid 4px #840; border-radius:16px;
color:#640;
padding:20px;
}
.frame >h2 { font-size:24px; padding:8px;}
.frame >h3 {
background:linear-gradient(#240,#260);
border-radius:8px;
font-size:18px; color:#FFF; text-shadow:0 1px 1px #120;
padding:0.75em; margin:8px;
}
.frame >p { font-size:14px; line-height:1.5; padding:8px;}
.frame >img {
display:block;
max-width:100%; width:auto;
padding:8px; margin:0 auto;
}
@media screen and ( max-width:768px ){
.frame { padding:4px;}
.frame >h2 { font-size:20px;}
.frame >h3 { font-size:16px;}
}
@media screen and ( max-width:480px ){
.frame >h2 { font-size:18px;}
.frame >h3 { font-size:14px;}
.frame >p { font-size:12px;}
}
/*↑枠↑*/
/*↓タイトル一覧↓*/
.lineup { display:flex; flex-wrap:wrap; justify-content:center; padding:4px;}
.lineup li {
background:#360;
border-radius:4px;
font-size:14px; color:#FFF;
padding:8px; margin:4px;
}
@media screen and (max-width:480px){
.lineup li { font-size:12px;}
}
/*↑タイトル一覧↑*/
/*↓注意↓*/
.caution {
display:inline-block;
text-align:left;
padding:8px;
}
.caution >* { position:relative; color:#F33; font-size:12px; line-height:1.25; margin-left:1em;}
.caution >:before { position:absolute; left:-1em; top:0; content:'※';}
@media screen and ( max-width:768px ){
.caution >* { font-size:10px;}
}
/*↑注意↑*/
/*↓仕様↓*/
.spec { display:flex; flex-wrap:wrap; font-size:14px; line-height:1.25; padding:8px;}
.spec :nth-child(n+3) { margin-top:0.75em;}
.spec dt {
position:relative;
width:10em;
color:#260; text-align:right;
padding-right:1em;
}
.spec dt:after { position:absolute; right:0; top:0; content:'：';}
.spec dd { width:calc(100% - 10em); text-align:left;}
@media screen and (max-width:480px){
.spec { font-size:12px;}
.spec :nth-child(n+3) { margin-top:0;}
.spec dt { width:100%; text-align:left; padding-right:0;}
.spec dt:after { position:initial;}
.spec dt:nth-of-type(n+2) { margin-top:0.75em;}
.spec dd { width:100%; padding-left:1em;}}
/*↑仕様↑*/
/*↓商標など↓*/
section .copy {
background:linear-gradient(#021,#010);
box-shadow:0 2px 3px #010 inset;
color:#FFF; text-shadow:0 1px 1px #010;
padding:24px;
}
section .copy ul { display:flex; flex-wrap:wrap; justify-content:center;}/* 商標 */
section .copy li { font-size:10px; padding:4px;}
section .copy div { display:inline-block; padding:4px;}
section .copy p {/* 注意 */
position:relative;
font-size:10px; line-height:1.25; text-align:left;
margin-left:1em;
}
section .copy p:before { position:absolute; left:-1em; top:0; content:'※';}
@media screen and ( max-width:768px ){
section .copy { padding:8px;}
section .copy li,
section .copy p { font-size:10px;}
}
/*↑商標など↑*/