@charset "utf-8";
/* CSS Document */

img{
	border:0;
}

hr{
	border:0;
	border-bottom:#09c 1px dotted;
	margin:20px 0;
}

#pic{
	width:884px;
	margin:auto;
}
#pic > p{
	width:100%;
	margin-top:0;
	margin-bottom:10px;
	font-size:14px;
	text-align:center;
	line-height:1.5em;
	clear:left;
}

#pic figure{
	margin:0;
	padding:0;
	float:left;
	width:362px;
	display:block;
	margin:10px 40px;
}

#pic figure div{
    position: relative;
    width: 100%;
	border:#CCC solid 1px;
	box-sizing:border-box;
}

#pic figure div:before {
    content:"";
    display: block;
    padding-top: 75%; /* 高さを幅の75%に固定 */
}


#pic figure div img{	
    position: absolute;
	display:block;
	
	width:auto;
	height:auto;
	max-width:98%;
	max-height:98%;
		
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%,-50%);
	-moz-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	-o-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}

#pic figure.w100{
	width:100%;
	margin:10px 0;
}
#pic figure.w100 div:before{
	padding-top:0;
}
#pic figure.w100 div{
	padding:2%;
}
#pic figure.w100 div img{
	position:static;
	margin:auto;
	-webkit-transform: translate(0%,0%);
	-moz-transform: translate(0%,0%);
	-ms-transform: translate(0%,0%);
	-o-transform: translate(0%,0%);
	transform: translate(0%,0%);
}

#pic figure figcaption{
	width:100%;
	margin:0;
	margin-top:10px;
	font-size:14px;
	text-align:center;
	line-height:1.5em;
	height:3em;
}

.toi p{
	width:68%;
	margin:0;
	float:left;
}

.toi a{
	width:30%;
	box-sizing:border-box;
	float:right;
	background-color:#09c;
	color:#fff;
	text-decoration:none;
	padding:1em 0;
	text-align:center;
	line-height:1em;
	border-radius:10px;
	position:relative;
	display:inline-block;
	font-weight:bold;
}
.toi a i{
	font-size:18px;
}
.toi a:before{
	border-radius:7px;
	display:inline-block;
	position:absolute;
	border:#FFF solid 1px;
	top:3px;
	left:3px;
	right:3px;
	bottom:3px;
	content:"";
}

@media screen and ( max-width:800px) {
#pic{
	width:100%;
}

#pic figure{
	width:48%;
	margin:10px 1%;
}

}

@media screen and (min-width:0px) and ( max-width:750px) {
#pic figure{
	width:100%;
	margin:10px 0;
}
#pic figure div{
	padding:5px;
}
#pic figure div:before {
	display:none;
	position:static;
}
#pic figure div img{
	position:static;
	-webkit-transform: translate(0%,0%);
	-moz-transform: translate(0%,0%);
	-ms-transform: translate(0%,0%);
	-o-transform: translate(0%,0%);
	transform: translate(0%,0%);
	width:auto;
	max-width:100%;
	height:auto;
	margin:auto;
	box-sizing:border-box;
}
#pic figure figcaption{
	height:auto;
}

.toi p{
	float:none;
	width:100%;
}

.toi a{
	float:none;
	width:100%;
	margin-top:10px;
}

}