@charset 'utf-8';

.register {
position:relative;
background:linear-gradient(#FFF,#DEE);
text-align:center;
padding:16px 32px;
}
.register:before {
display:inline-block; width:72px; height:84px;/* 24:28 */
background:url('/project/egg/img/register/eggy-walk.png') 0 0 / auto 100%;
animation:register-eggy-walk 0.8s steps(4) infinite;
content:'';
}
@keyframes register-eggy-walk { to { background-position:-400% 0;}}
.register:after {
position:absolute; z-index:0; left:0; right:0; bottom:0;
height:128px;
background:url('/project/egg/img/register/eggy-bg.png') center 0 / auto 100%;
content:'';
}
.register > * { position:relative; z-index:1;}
.register > p {/* キャッチ */
color:#677; font-size:28px; text-shadow:0 0 2px #ABB;
margin-top:16px;
}
.register > div {/* 枠 */
display:flex; flex-wrap:wrap;
width:976px;
margin:16px auto;
}
.register > div a {
position:relative;
display:block; width:calc(50% - 8px);
box-shadow:0 2px 2px rgba(0,0,0,75%);
border-radius:16px;
color:#FFF; text-decoration:none;
padding:24px; padding-left:192px;
}
.register > div a:hover { animation:register-link-a 1s;}
@keyframes register-link-a { 0% { filter:brightness(150%);}}
.register > div a:nth-child(1) { background:radial-gradient(circle at 20% 80%,#1DE 0%,#369 75%,#29C 125%);}
.register > div a:nth-child(2) { background:radial-gradient(circle at 80% 20%,#47B 0%,#123 75%,#259 125%); margin-left:16px;}
.register > div a:before {/* 白線 */
position:absolute; z-index:0; left:4px; right:4px; top:4px; bottom:4px;
border:#FFF 2px solid; border-radius:12px;
content:'';
}
.register > div a > * { position:relative; z-index:1;}
.register > div sup { font-size:10px;}
.register > div h4 { font-size:16px; color:#DEE;}/* 概要 */
.register > div h3 { font-size:20px; margin:8px 0;}/* 品名 */
.register > div h5 { font-size:12px; color:#BCC; }/* 補足 */
.register > div .logo {/* ロゴ */
position:absolute; left:16px; top:calc(50% - 40px);
display:block; width:160px; height:80px;
filter:drop-shadow(0 2px 2px rgba(0,0,0,50%));
background:no-repeat center center; background-size:contain;
}
.register > div p { font-size:16px; margin-top:16px;}/* 料金 */
.register > div p span { font-size:200%; margin:0 4px;}
.register > div ul { border-top:solid 1px #FFF; margin-top:8px; padding-top:7px;}
.register > div li { font-size:12px;}/* 詳細 */
.register > div li:nth-child(n+2) { margin-top:4px;}

.register > ul {
display:inline-block; counter-reset:num;
color:#566; font-size:12px; line-height:1.25; text-align:left; text-shadow:0 0 1px #677;
}
.register > ul li { position:relative; padding-left:3.5em;}
.register > ul li:nth-child(n+2) { margin-top:4px;}
.register > ul li:before {
position:absolute; left:0; top:0;
display:block;
width:3em;
text-align:right;
counter-increment:num;
content:'\203b'counter(num);
}
.register > ul a { color:#079;}
@media screen and ( max-width:1024px ){
.register > p { font-size:24px;}
.register > div { width:100%;}
.register > div a { padding:24px;}
.register > div .logo {
position:relative; left:initial; top:initial;
margin:16px auto 0;
}
}
@media screen and ( max-width:768px ){
.register { padding:16px;}
.register:before { width:48px; height:56px;}
.register > p { font-size:20px;}
.register > div a { width:100%;}
.register > div a:nth-child(n+2) { margin-left:initial; margin-top:16px;}
.register > div h4 { font-size:14px;}
.register > div h3 { font-size:16px;}
.register > div h5 { font-size:12px;}
.register > ul { font-size:10px;}
}