@charset "UTF-8";
*{padding:0;margin:0;font-family: "Times New Roman", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "メイリオ", Meiryo, serif;}

/* Notice Me Senpai */


header{clear:both;height:40px;border-bottom:1px solid #000;margin-top:8px;}
header h1{float:left;letter-spacing:-3px;}
header p{position:relative;font-size:18px;left:-4px;letter-spacing:1px;float:left;width:3em;
    -webkit-animation: flipInY 1.5s ease-out;
    -moz-animation: flipInY 1.5s ease-out;
    -o-animation: flipInY 1.5s ease-out;
    animation: flipInY 1.5s ease-out;}

/* Angel */

footer{clear:both;border-top:150px dashed #000;text-align:center;}
footer img{margin:0 auto;}

/* Main links */
dl#link{margin:20px 40px;min-height:400px;}
dl#link dt,dl#link dt a{border-radius:50%;display:inline-block;shape-outside: circle(50%);}
dl#link dt{position:relative;
	margin:15px;transition: margin 0.3s linear;
	left:0px;transition: left 0.3s linear;
	top:0px;transition: top 0.3s linear;
}
dl#link dt:hover{
	margin:15px;
}

dl#link dt:nth-child(1){background:url(../img/img.jpg) 10px 10px;}
dl#link dt:nth-child(3){background:url(../img/img.jpg) -130px 20px;}
dl#link dt:nth-child(5){background:url(../img/img.jpg) -290px 10px;}
dl#link dt:nth-child(7){background:url(../img/img.jpg) -440px 10px;}
dl#link dt:nth-child(9){background:url(../img/img.jpg) 10px -140px;}

dl#link dt:nth-child(11){background:url(../img/img.jpg) -140px -140px;}
dl#link dt:nth-child(13){background:url(../img/img.jpg) -280px -150px;}
dl#link dt:nth-child(15){background:url(../img/img.jpg) -450px -150px;}
dl#link dt:nth-child(17){background:url(../img/img.jpg) 0px -300px;}
dl#link dt a{margin:10px;display:block;height:150px;width:150px;border:4px dashed;border-color:rgba(255,51,102,0.6);}
dl#link dt a{transition: border-width 0.3s linear;
    -webkit-animation: spin .3s ease-out;
    -moz-animation: spin .3s ease-out;
    -o-animation: spin .3s ease-out;
    animation: spin .3s ease-out;}
dl#link dt a:hover{border:4px dashed;border-color:rgba(255,51,102,0.6);
    -moz-animation: spinoff 10s infinite linear;
    -webkit-animation: spinoff 10s infinite linear;
    -o-animation: spinoff 10s infinite linear;
    -ms-animation: spinoff 10s infinite linear;
    animation: spinoff 10s infinite linear;
}
@-moz-keyframes spin {
    0% {-moz-transform: rotate(0deg);}
    50% {-webkit-transform: rotate(370deg);}
    75% {-webkit-transform: rotate(350deg);}
    100% {-webkit-transform: rotate(360deg);}
    ;}

@-moz-keyframes spinoff {
    0% {-moz-transform: rotate(0deg);}
    100% {-moz-transform: rotate(-360deg);}
    ;}

@-webkit-keyframes spin {
    0% {-webkit-transform: rotate(0deg);}
    50% {-webkit-transform: rotate(370deg);}
    75% {-webkit-transform: rotate(350deg);}
    100% {-webkit-transform: rotate(360deg);}
    ;}

@-webkit-keyframes spinoff {
    0% {-webkit-transform: rotate(0deg);}
    100% {-webkit-transform: rotate(-360deg);}
    ;}

@-moz-keyframes spinpai {
    0% {-webkit-transform: rotate(0deg);}
    12% {-webkit-transform: rotate(370deg);}
    18% {-webkit-transform: rotate(350deg);}
    25% {-webkit-transform: rotate(360deg);}
    72% {-webkit-transform: rotate(360deg);}
    80% {-webkit-transform: rotate(370deg);}
    88% {-webkit-transform: rotate(350deg);}
    94% {-webkit-transform: rotate(360deg);}
    100% {-webkit-transform: rotate(360deg);}
    ;}
@-webkit-keyframes spinpai {
    0% {-webkit-transform: rotate(0deg);}
    12% {-webkit-transform: rotate(370deg);}
    18% {-webkit-transform: rotate(350deg);}
    25% {-webkit-transform: rotate(360deg);}
    72% {-webkit-transform: rotate(360deg);}
    80% {-webkit-transform: rotate(370deg);}
    88% {-webkit-transform: rotate(350deg);}
    94% {-webkit-transform: rotate(360deg);}
    100% {-webkit-transform: rotate(360deg);}
    ;}

dl#link dt a p{display:inline-block;position:absolute;}
dl#link dt a p i{
	position:relative;float:left;text-align:center;width:150px;line-height:30px;top:100px;left:-5px;font-size:17px;font-style:normal;letter-spacing:0.1em;
	background:
    -moz-linear-gradient(left,  rgba(255,0,192,0) 0%, rgba(255,0,192,1) 15%, rgba(255,192,0,1) 85%, rgba(255,192,0,0) 100%);
	background: -webkit-linear-gradient(left,  rgba(255,0,192,0) 0%,rgba(255,0,192,1) 15%,rgba(255,192,0,1) 85%,rgba(255,192,0,0) 100%);
	background: linear-gradient(to right,  rgba(255,0,192,0) 0%,rgba(255,0,192,1) 15%,rgba(255,192,0,1) 85%,rgba(255,192,0,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ff00c0', endColorstr='#00ffc000',GradientType=1 );
	-ms-transform: rotate(7deg);
    -webkit-transform: rotate(7deg);
    transform: rotate(7deg);
}


dl#link dd{display:none;}
dl#link dt{transition: all .2s linear;}
dl#link dt:hover{
	box-shadow: 0 0 18px 18px rgba(255,160,124,0.2);
}
dl#link dt a:hover{
	box-shadow: 0 0 12px 12px rgba(20,51,202,0.1);
}

/* Wood Info */

dl#wood{margin:30px;}

*::selection {
  background: red;
  color: yellow;
}

*::-moz-selection {
  background: orange;
  color: yellow;
}