@charset "utf-8";

.inbox {
	box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
}

#news {
	background:rgba(0,0,0,0.1);
	border: 1px solid #aaa;
	box-shadow: 0 3px 5px rgba(20, 20, 20, 0.3);
}

#tanzaku a {
	text-decoration:none;
}

#tanzaku h3 {
	display:block;
	color: #345;
}

#tanzaku h3 + img {
   float: left;
   margin: 0 8px 0 6px;
   padding: 0;
   border: 0;
}

#tanzaku div.caption {
	min-height:80px;
	height:auto;
}

#tanzaku p {
	overflow: hidden;
	color:#555;
	font-size:13px;
	line-height:1.7em;
}

#tanzaku ul {
	overflow: hidden;
	text-align:left;
	padding:4px 8px 8px 20px;
	color:#555;
	font-size:13px;
	line-height:1.5em;
}	

#tanzaku ul li {
	list-style:square;
}

.banner_free {
	margin:16px 0 0 6px;
	background: rgba(0,0,0,0.0); 
}

.banner_free:hover {
	background: rgba(0,0,0,0.4);
	transition: all 0.2s linear 0s;
}

/*** SmartPhone, Tablet and PC Screen CSS ***/


/* スマホ向け　~ 480px */
@media only screen and (max-width:480px) {

	.banner2x {
		margin-top:12px;
		margin-left:16px;
	}
	
	.banner {
		display:block;
		width:42%; height:auto;
		max-width:218px;
		float:left;
		margin:20px 8px 0 8px;
	}

	.bannerinfo {
		width:50%;
		float:left;
		text-align:left;
		margin:28px 1.5% 0 0;
		line-height:1.7em;
	}
	
	.bloginfo {
		width:50%;
		float:left;
		text-align:left;
		margin:18px 1.5% 0 1.5%;
		line-height:1.7em;
	}
	
	.bloginfo2 {
		width:96%;
		float:left;
		text-align:left;
		margin:18px 0 0 0;
		line-height:1.7em;
	}

	#news {
		float:left;
		width:100%; /*min-height:500px;*/
		margin-top: 4px;
		padding:8px;
		font-size:12px;
		line-height:1.7em;
	}

	.post {
		min-height:105px;
	}
	
	.tz {
		background:#fff;
		border-top:1px solid #999;
		border-bottom:1px solid #999;
		padding:2px 1.5% 8px 0;
		margin-bottom:10px;
		width:98.5%; height:auto;
		float:none;		
	}

}


/* タブレット向け　481 ~ 768px */
@media only screen and (min-width:481px) {

	#massage {
		margin-top:12px;
		margin-bottom:8px;
	}
	
	.banner {
		display:block;
		width:218px; height:104px;
		margin:20px 8px 0px 8px;
	}

	.banner2x {
		display:block;
		width:218px; height:218px;
		margin:8px 8px 0px 8px;
	}

	.bannerinfo {
		clear:both; float:none;
		margin:8px; 
		max-width:300px;
		width:80%;
		line-height:1.8em; 
		text-align:left;
	}
	
	.bloginfo {
		clear:both; float:none;
		margin:0px 8px 0 4px; 
		max-width:218px;
		line-height:1.8em; 
		text-align:left;
	}

	.bloginfo2 {
		clear:both; float:none;
		margin:0px 8px 0 4px; 
		line-height:1.8em; 
		text-align:left;
	}

	#news {
		float:left;
		width:100%; /*min-height:500px;*/
		margin-top: 4px;
		padding:8px;
		font-size:12px;
		line-height:1.7em;
	}

	.post {
		min-height:105px;
	}

	#tanzaku {
		width:53%;
		margin:0;
		position:relative;
		top:-114px;
	}

	.tz {
		position: relative;
		background:#fff;
		border:1px solid #999;
		padding:2px 12px 8px 6px;
		margin-bottom:12px;
		width:100%; height:auto;
		float:none;	
	}
	
	.tz:before {
		z-index: -1;
		position: absolute;
		content: "";
		bottom: 15px;
		left: 10px;
		width: 50%;
		top: 80%;
		max-width:300px;
		background: #777;
		-webkit-box-shadow: 0 15px 10px #777;
		-moz-box-shadow: 0 15px 10px #777;
		box-shadow: 0 15px 10px #777;
		-webkit-transform: rotate(-3deg);
		-moz-transform: rotate(-3deg);
		-o-transform: rotate(-3deg);
		-ms-transform: rotate(-3deg);
		transform: rotate(-3deg);
	}
	
	.tz div {
	margin-right:3%;
	}

}


/* PC向け　769px ~ */
@media only screen and (min-width:769px) {
	
	#message {
		width:532px;
		min-height:120px; float:left;
		padding:8px;
		margin-right:8px;
	}

	#message p {
		font-size:13px;
		line-height:1.7em;
	}

	.banner {
		display:block;
		width:218px; height:104px;
		margin:20px 0;
	}
	
	.banner:hover{
		position:relative;
		top:6px;
		transition: all 0.35s linear 0s;
	}

	.banner_u {transition: all 0.18s linear 0s;}

	.banner_u:hover{
		/*position:relative;
		top:-6px;
		background:rgba(240,220,80,0.7);*/
		background: rgba(0,100,0,0.2);
		-webkit-transform: rotate(2.5deg);
		-moz-transform: rotate(2.5deg);
		-o-transform: rotate(2.5deg);
		-ms-transform: rotate(2.5deg);
		transform: rotate(2.5deg);
		transition: all 0.18s linear 0s;
	}
	
	.banner2x {
		display:block; float:left;
		width:218px; height:208px;
		margin:8px 0px 8px 0px;
	}

	.bannerinfo {
		clear:both; float:none;
		margin:-16px 0 0 4px; 
		width:218px;
		line-height:1.8em; 
		text-align:left;
	}
	
	.bloginfo {
		clear:both; float:none;
		margin:-16px 0 0 4px; 
		max-width:218px;
		line-height:1.8em; 
		text-align:left;
	}

	.bloginfo2 {
		clear:both; float:none;
		margin:8px 0 0 4px; 
		line-height:1.8em; 
		text-align:left;
	}

	.bloginfo:hover {
		text-decoration:underline;
	}
	
	.bloginfo2:hover {
		text-decoration:underline;
	}

	#news {
		float:left;
		width:260px; /*min-height:500px;*/ 	
		margin-top: 4px;
		padding:8px;
		font-size:12px;
		line-height:1.7em;
	}
	
	.post {
		min-height:105px;
	}

	#tanzaku {
		position:relative;
		top:0; right:0;
		width:auto;/*510px;*/
		margin:0 0px 0 0; 
		padding:0 4px 0 0;
	}

	#tanzaku h3 {
		width:105px;
	}


	#tanzaku h3 + img {
		float:none;
	}

	#tanzaku div.caption {
		height:140px;
	}

	#tanzaku p {
		padding:0px 10px 0 18px;
		line-height:1.5em;
	}	

	#tanzaku ul {
		padding:4px 8px 8px 36px;
		line-height:1.5em;
	}	

	#tanzaku ul li {
		list-style:square;
	}

	.kwsk {
		float:none;
		position:relative;
		right:-25px;
		top:8px;
	}

	#tz1:hover, #tz3:hover {
		position:relative;
		top:48px;
		height:326px;
		background: rgba(200,200,100,0.3);
		transition: all 0.2s linear 0s;
	}
	
	#tz2:hover {
		position:relative;
		top:73px;
		height:325px;
		background: rgba(200,200,100,0.3);
		transition: all 0.2s linear 0s;
	}	

	#tz4:hover {
		position:relative;
		top:58px;
		height:326px;
		background: rgba(200,200,100,0.3);
		transition: all 0.2s linear 0s;
	}

	#tz5:hover {
		position:relative;
		top:83px;
		height:325px;
		background: rgba(200,200,100,0.3);
		transition: all 0.2s linear 0s;
	}	

	#tz6:hover {
		position:relative;
		top:58px;
		height:326px;
		background: rgba(200,200,100,0.3);
		transition: all 0.2s linear 0s;
	}

	#tz1 {
		position:relative;
		top:40px; left:0px;
		width:157px; height:334px;
		border:none;
		float:left;
		background:url(./img/back_tanzaku1.png) no-repeat;
		transition: all 0.2s linear 0s;
	}

	#tz2 { 
		position:relative;
		top:65px; left:4px;
		width:157px; height:333px;
		border:none;
		float:left;
		background:url(./img/back_tanzaku2.png) no-repeat;
		transition: all 0.2s linear 0s;
	}
	
	#tz3 {
		position:relative;
		top:40px; left:8px;
		width:157px; height:334px;
		border:none;
		float:left;
		background:url(./img/back_tanzaku1.png) no-repeat;
		transition: all 0.2s linear 0s;
	}

	#tz4 { 
		position:relative;
		top:50px; left:0px;
		width:157px; height:334px;
		border:none;
		float:left;
		background:url(./img/back_tanzaku1.png) no-repeat;
		transition: all 0.2s linear 0s;
	}	
	
	#tz5 {
		position:relative;
		top:75px; left:4px;
		width:157px; height:333px;
		border:none;
		float:left;
		background:url(./img/back_tanzaku2.png) no-repeat;
		transition: all 0.2s linear 0s;
	}

	#tz6 { 
		position:relative;
		top:50px; left:8px;
		width:157px; height:334px;
		border:none;
		float:left;
		background:url(./img/back_tanzaku1.png) no-repeat;
		transition: all 0.2s linear 0s;
	}
	
	.tz {
		margin:0; padding:0;
	}
	
	.tz:hover{
		margin-bottom:0;
	}

	.tz:hover:before {
		z-index: -1;
		position: absolute;
		content: "";
		bottom: 0px;
		left: 0px;
		width: 0%;
		top: 0%;
		max-width:0px;
		background: #fff;
		-webkit-box-shadow: 0 0 0#777;
		-moz-box-shadow: 0 0 0 #777;
		box-shadow: 0 0 0 #777;
		-webkit-transform: rotate(-3deg);
		-moz-transform: rotate(-3deg);
		-o-transform: rotate(-3deg);
		-ms-transform: rotate(-3deg);
		transform: rotate(-3deg);
	}

}