@charset 'utf-8';

section { padding:24px; text-align:center;}
section > * { position:relative; padding:8px;}
section > h2 { font-size:24px;}
section > h2:not(:nth-child(1)) { margin-top:16px;}
section > h3 { font-size:20px;}
section > p  { font-size:16px; line-height:1.5; color:#CDD;}
section > p span { color:#F99;}
@media screen and ( max-width:768px ){
section { padding:8px;}
section > h2 { font-size:20px;}
section > h3 { font-size:18px;}
section > p  { font-size:14px;}
}

/* note */
section .note { opacity:75%;}
section .note li { position:relative; font-size:14px;}
section .note li { position:relative; font-size:14px;}

/* note */

/* step(game,music) */
.step { display:flex; flex-wrap:wrap; justify-content:center;}
.step li { width:288px; padding:8px;}
.step div {
height:100%;
background:rgba(0,0,0,25%);
border:solid 2px #FFF; border-radius:8px;
padding:16px;
}
.step div > span {/* アイコン */
display:block;
width:128px; height:80px;
background:url('/project/egg/img/introduction/icon_step.png') no-repeat 0 0 / auto 200%;
filter:drop-shadow(0 1px 1px rgb(0,0,0,50%));
margin:0 auto 16px;
}
.step div > span.g1 { background-position:0 0;}
.step div > span.g2 { background-position:-128px 0;}
.step div > span.g3 { background-position:-256px 0;}
.step div > span.m1 { background-position:0 -80px;}
.step div > span.m2 { background-position:-128px -80px;}
.step div > span.m3 { background-position:-256px -80px;}
.step h3 { font-size:20px;}
.step h3:after { display:block; border-top:solid 2px #FFF; margin:8px 0; content:'';}
.step p.col { font-size:14px; line-height:1.5; color:#FFF;}
.step p.col span { color:#F99;}
.step p.how {
position:relative;
font-size:12px; line-height:1.25; color:#CDD; text-align:left;
padding-left:1em; margin-top:8px;
}
.step p.how:before { position:absolute; left:0; top:0; content:'\203b';}
/* step */