html,body,hgroup,h1,h2,h3,p,ul,li{
margin:0;padding:0;
}
body {
text-align: center;
background:url(popcorn.jpg) 0 0 no-repeat;
background-size:cover;
}
hgroup{
width:20em;
margin:5em auto;
padding:1em;
background:rgba(255,255,255,0.8);
font-family:'Hiragino Mincho ProN',serif;
font-size:1.5em;
}
h1{line-height:1.2;font-size:2.6em;letter-spacing:-0.15em;
}
h1 span{display:block;font-size:1.55em;letter-spacing:-0.2em;}
h2{line-height:1.2;font-size:1.4em;}
/*ロゴマーク*/
.logo{
font-size:0.6em;
margin:1em auto;
width:4em;
height:5em;
position:relative;
overflow: hidden;
border-radius:0 0.5em 0 0;
}
.logo span {
position:absolute;
display:block;
text-align:center;
font-size:0.9em;
z-index:8;
background:#fff;
line-height: 1;
}
.logo .si {
color: green;
font-family: Arial;
font-size: 0.88em;
left: 0.1em;
top: 2.4em;
z-index: 9;
}
.logo .pr {
bottom: 0;
color: #32d;
font-family: Georgia;
font-size: 0.7em;
left: 0.1em;
z-index: 8;
}
.logo:before,
.logo:after,
.pr:before,
.pr:after {
content:"";
display:block;
position:absolute;
font-size:1em;
}
.logo:before{
font-size:0.8em;
display:block;
background:orange;
top:0;
left:0.2em;
width:4em;
height:1.2em;
z-index:2;
}
.logo:after {
font-size:0.8em;
display:block;
border:1.1em solid transparent;
border-color:red #fff #fff red;
border-radius: 90% 0 0;
box-shadow:0 0 0 0.3em #fff;
height: 4.2em;
width: 2.8em;
left: 1.2em;
top:-0.3em;
z-index:3;
}
.pr:before{
background:green;
height:4.2em;
right: 0.2em;
top: -4.2em;
width: 1.1em;
z-index: 3;
}
.pr:after {
background:green;
border-radius: 50%;
box-shadow: 0 0 0 0.3em #fff;
height: 1.3em;
right: 0;
top: -6em;
width: 1.3em;
z-index: 6;
}
ul{padding:1em;display:inline-block;font-size: 1.2em;}
li{display:inline-block;line-height:1.2;}
li:first-of-type {font-size:2em;padding:0.2em;}
li:nth-of-type(2) {font-size:0.7em;width:8em;position:relative;}
li:nth-of-type(2):before {
border-left: 2px solid #000;
content: "";
font-size: 2.3em;
width: 1em;
height: 1em;
left: -0.3em;
top: 0.2em;
position: absolute;
}
li:nth-of-type(2) strong {display: block;font-size:1.5em;}
p{display:inline-block;
width:4em;
height:4em;padding:1em;text-align:center;background:#fff;border-radius:50%;border:2px solid #000;position:relative;}
.hyaku {display:block;font-size:2em;line-height:1;font-weight: bold;position:relative;top:0.3em;left:-0.1em;}
.hyaku small {display:block;font-size:0.5em;}
.vp {
display: block;
font-size: 0.6em;
height: 50%;
left: 4.5em;
position: absolute;
top: 0;
width: 1em;
-webkit-transform-origin:center bottom;
-moz-transform-origin:center bottom;
transform-origin:center bottom;
}
.vp:nth-of-type(2){
-webkit-transform:rotateZ(120deg);
-moz-transform:rotateZ(120deg);
transform:rotateZ(120deg);
}
.vp:nth-of-type(3){
-webkit-transform:rotateZ(240deg);
-moz-transform:rotateZ(240deg);
transform:rotateZ(240deg);
}
.vp span{
position: absolute;
display:block;
width: 1em;
height: 100%;
left: 0;
top: 0;
-webkit-transform-origin:center bottom;
-moz-transform-origin:center bottom;
transform-origin:center bottom;
}
.vp span:nth-of-type(1){-webkit-transform:rotateZ(-50deg);-moz-transform:rotateZ(-50deg);transform:rotateZ(-50deg);}
.vp span:nth-of-type(2){-webkit-transform:rotateZ(-40deg);-moz-transform:rotateZ(-40deg);transform:rotateZ(-40deg);}
.vp span:nth-of-type(3){-webkit-transform:rotateZ(-30deg);-moz-transform:rotateZ(-30deg);transform:rotateZ(-30deg);}
.vp span:nth-of-type(4){-webkit-transform:rotateZ(-20deg);-moz-transform:rotateZ(-20deg);transform:rotateZ(-20deg);}
.vp span:nth-of-type(5){-webkit-transform:rotateZ(-10deg);-moz-transform:rotateZ(-10deg);transform:rotateZ(-10deg);}
.vp span:nth-of-type(6){-webkit-transform:rotateZ(0deg);-moz-transform:rotateZ(0deg);transform:rotateZ(0deg);}
.vp span:nth-of-type(7){-webkit-transform:rotateZ(10deg);-moz-transform:rotateZ(10deg);transform:rotateZ(10deg);}
.vp span:nth-of-type(8){-webkit-transform:rotateZ(20deg);-moz-transform:rotateZ(20deg);transform:rotateZ(20deg);}
.vp span:nth-of-type(9){-webkit-transform:rotateZ(30deg);-moz-transform:rotateZ(30deg);transform:rotateZ(30deg);}
.vp span:nth-of-type(10){-webkit-transform:rotateZ(40deg);-moz-transform:rotateZ(40deg);transform:rotateZ(40deg);}
.vp span:nth-of-type(11){-webkit-transform:rotateZ(50deg);-moz-transform:rotateZ(50deg);transform:rotateZ(50deg);}