@charset 'utf-8';

/*↓セクション↓*/
section { position:relative; overflow:hidden;}
section >.inner {
display:flex; flex-direction:row; justify-content:center; align-items:center;
max-width:768px; width:100%;
text-shadow:0 1px 1px rgba(0,0,0,25%);
padding:24px; margin:0 auto;
}
@media screen and ( max-width:768px ){
section >.inner {
flex-direction:column !important;
padding:8px;
}
section .co1,
section .co2 { width:100% !important;}
}
/*↑セクション↑*/

/*↓スタンプ↓*/
section.stump { background:#FFF;}
section.stump .co1 { width:272px; padding:8px;}
section.stump .co1 img { display:inline-block;}
section.stump .co1 img:nth-child(1) { width:224px; animation:stump-logo 0.5s alternate infinite;}
@keyframes stump-logo { to { transform:scale(1.1);}}
section.stump .co1 img:nth-child(2) { width:256px; margin:8px auto -96px;}
section.stump .co1 img:nth-child(3) { width:104px; margin-right:100%; border:solid 4px #0C0;}
section.stump .co2 { width:calc(100% - 272px);}
section.stump .co2 h2 { font-size:32px; color:#0C0; padding:8px;}
section.stump .co2 p { font-size:16px; line-height:1.5; padding:8px;}
section.stump .co2 a {
display:inline-block;
background:#0C0;
box-shadow:0 2px 2px rgba(0,0,0,50%);
color:#FFF !important; font-size:16px; text-shadow:none; text-decoration:none;
padding:1em; margin:8px;
}
section.stump .co2 div { display:flex; flex-wrap:wrap; justify-content:center;}
section.stump .co2 div img { width:96px; margin:8px;}
@media screen and ( max-width:768px ){
section.stump .co2 h2 { font-size:24px;}
section.stump .co2 p { font-size:14px;}
}
/*↑スタンプ↑*/
/*↓コンパイルサウンド↓*/
section.sound { background:linear-gradient(#9C0, #690); color:#FFF;}
section.sound .co1 > h2 { font-size:24px; padding:8px;}
section.sound .co1 > p  { font-size:16px; padding:8px;}
section.sound ul { display:flex; align-items:center;}
section.sound ul:nth-of-type(1) { flex-direction:row;}
section.sound ul:nth-of-type(2) { flex-direction:row-reverse;}
section.sound ul li { padding:8px;}
section.sound ul img { width:256px;}
section.sound ul h3 { font-size:20px; margin:8px 0;}
section.sound ul p { font-size:14px; line-height:1.25;}
section.sound ul a {
display:inline-block;
background:#FFF;
box-shadow:0 2px 2px rgba(0,0,0,50%);
color:#690; font-size:16px; text-shadow:none; text-decoration:none;
padding:1em; margin-top:16px;
}
@media screen and ( max-width:768px ){
section.sound ul:nth-of-type(1),
section.sound ul:nth-of-type(2) { flex-direction:column;}
section.sound .co1 > h2 { font-size:20px;}
section.sound .co1 > p  { font-size:14px;}
section.sound ul h3 { font-size:16px;}
section.sound ul p { font-size:12px;}
section.sound ul a { font-size:14px;}
}
/*↑コンパイルサウンド↑*/
/*↓ザナック↓*/
section.zanac {
background:#000 url( ../img/zanac/bg.jpg ) no-repeat center center / cover;
color:#FFF;
}
section.zanac >.inner { flex-direction:row-reverse;}
section.zanac .co1 { width:272px;}
section.zanac .co1 img { width:256px;}
section.zanac .co2 { width:calc(100% - 272px);}
section.zanac .co2 > h2 { font-size:32px; padding:8px;}
section.zanac .co2 > p { font-size:14px; line-height:1.5; padding:8px;}
section.zanac .co2 ul { display:flex; flex-wrap:wrap; justify-content:space-around;}
section.zanac .co2 li { width:112px; padding:8px;}
section.zanac .co2 li a { color:#FFF; text-decoration:none;}
section.zanac .co2 li img { display:inline-block; width:80px;}
section.zanac .co2 li h3 { font-size:14px; margin:8px 0 4px;}
section.zanac .co2 li p { font-size:12px; color:#6FC;}
@media screen and ( max-width:768px ){
section.zanac .co2 > h2 { font-size:24px;}
section.zanac .co2 > p { font-size:12px;}
section.zanac .co2 li { width:160px;}
}
/*↑ザナック↑*/
/*↓iPhone↓*/
section.iphone {
background:#000 url( ../img/iphone/bg.jpg ) no-repeat center center / cover;
color:#FFF;
}
section.iphone .co1 > h2 { font-size:32px; padding:8px;}
section.iphone .co1 > p { font-size:14px; line-height:1.5; padding:8px;}
section.iphone ul { display:flex; flex-wrap:wrap; justify-content:center;}
section.iphone li { width:160px; padding:8px;}
section.iphone li a { color:#FFF; text-decoration:none;}
section.iphone li div {
display:inline-block; width:96px; height:96px;
border-radius:8px;
box-shadow:0 2px 2px rgba(0,0,0,50%);
background:no-repeat / cover;
}
section.iphone li h3 { font-size:12px; line-height:1.25; margin:8px 0 4px;}
section.iphone li p { font-size:12px; color:#FC6;}
@media screen and ( max-width:768px ){
section.iphone .co1 > h2 { font-size:24px;}
section.iphone .co1 > p { font-size:12px;}
}
/*↑iPhone↑*/
/*↓どみのん↓*/
section.dominon { background:#006; color:#FFF;}
section.dominon .co1 { width:304px; padding:8px;}
section.dominon .co2 { width:calc(100% - 304px);}
section.dominon p { font-size:14px; line-height:1.25; padding:8px;}
section.dominon a {
display:inline-block;
background:#F00;
color:#FFF !important; font-size:16px; text-decoration:none;
padding:1em; margin:8px;
}
section.dominon img { display:inline-block; width:100%;}
section.dominon img.game { max-width:288px;}
section.dominon img.logo { max-width:256px; margin:8px;}
section.dominon .copy {
display:flex; flex-wrap:wrap; justify-content:center;
font-size:10px;
padding:4px;
}
section.dominon .copy li { padding:4px;}
@media screen and ( max-width:768px ){
section.dominon p { font-size:12px;}
section.dominon a { font-size:14px;}
}
/*↑どみのん↑*/