@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:#fff !important;
	}
.tdftad li a a:hover　{
	color:#c0c0c0 !important;
	}




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

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

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

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

.box a:after {
    content: '';
    position: absolute;
    top: 50%;
	left: 50%;
	width: 190px;         /* 表示させたい横幅 */
	height: 190px;        /* 表示させたい高さ */
	margin-left: -95px;  /* マイナス「横幅÷2」の値 */
	margin-top: -95px;   /* マイナス「高さ÷2」の値 */
    border-radius: 50%;
    -webkit-animation: ripple 1.2s ease;
    animation: ripple 1.2s ease;
}

.box a:before {
    content: '';
    position: absolute;
    top: 50%;
	left: 50%;
	width: 190px;         /* 表示させたい横幅 */
	height: 190px;        /* 表示させたい高さ */
	margin-left: -95px;  /* マイナス「横幅÷2」の値 */
	margin-top: -95px;   /* マイナス「高さ÷2」の値 */
    border-radius: 50%;
    -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);}
}