@charset "UTF-8";

/* ninja */
.tdftad li {
	float:left !important;
	font-size: 8px !important;
	list-style-type: none !important;
	margin-left:10px !important;
}
.tdftad li a {
	color:#f5f5f5 !important;
	}
	
	
	

#sotowaku {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 200px;         /* 表示させたい横幅 */
	height: 200px;        /* 表示させたい高さ */
	margin-left: -100px;  /* マイナス「横幅÷2」の値 */
	margin-top: -100px;   /* マイナス「高さ÷2」の値 */
	overflow: visible;       /* 内容がはみ出る場合にスクロールさせるなら「auto」、隠す場合には「hidden」 */
	
}

#nakami {
	text-align: center;
	letter-spacing: 2px;
	font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
}

/* 画像の縦サイズと同じにする */
#box {
	height: 200px;	/* 画像の縦サイズと同じにする */
}

.box a {
	position: absolute;
	display: block;
	top: 50%;
	left: 50%;
	width: 200px;         /* 表示させたい横幅 */
	height: 200px;        /* 表示させたい高さ */
	margin-left: -100px;  /* マイナス「横幅÷2」の値 */
	margin-top: -100px;   /* マイナス「高さ÷2」の値 */
	text-align: center;
	background: rgba(0,204,204,1);
	border-radius: 50%;
}

.box a:after {
    content: '';
    position: absolute;
    top: 50%;
	left: 50%;
	width: 200px;         /* 表示させたい横幅 */
	height: 200px;        /* 表示させたい高さ */
	margin-left: -100px;  /* マイナス「横幅÷2」の値 */
	margin-top: -100px;   /* マイナス「高さ÷2」の値 */
    border-radius: 50%;
    box-shadow: none;
}

.box a:hover:after {
    -webkit-animation: ripple 1.2s ease;
    animation: ripple 1.2s ease;
}

.box a:before {
    content: '';
    position: absolute;
    top: 50%;
	left: 50%;
	width: 200px;         /* 表示させたい横幅 */
	height: 200px;        /* 表示させたい高さ */
	margin-left: -100px;  /* マイナス「横幅÷2」の値 */
	margin-top: -100px;   /* マイナス「高さ÷2」の値 */
    border-radius: 50%;
    box-shadow: none;
}

.box a:hover:before {
    -webkit-animation: ripple 1.2s ease .3s;
    animation: ripple 1.2s ease .3s;
}

@-webkit-keyframes ripple {
    0%{opacity:1;-webkit-transform:scale(1);transform:scale(1);box-shadow: 0 0 0 1px rgba(233,88,91,0);}
    100%{opacity:0;-webkit-transform:scale(2);transform:scale(2);box-shadow: 0 0 0 2px rgba(0,204,204,1);}
}

@keyframes ripple {
    0%{opacity:1;-webkit-transform:scale(1);transform:scale(1);box-shadow: 0 0 0 1px rgba(233,88,91,0);}
    100%{opacity:0;-webkit-transform:scale(2);transform:scale(2);box-shadow: 0 0 0 2px rgba(0,204,204,1);}
}