@charset "utf-8";
html {-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;}
* {-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,input,p,th,td,img{margin:0;padding:0;}
table {border-collapse:collapse;border-spacing:0;}
ol,ul {list-style:none;}
li {display: inline-block;*display: inline;*zoom: 1;} 
a img {border-style:none;//IE8}
img{max-width: 100%;}
a {
	text-decoration:none;
	-webkit-touch-callout:none;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	outline:none;
	color:#0064FF;
}
a:link{color:#0064FF;}
a:visited{color:#0064FF;}
a:hover{color:#FFA0A0;}
a:focus{outline:0}
a:hover,a.selected,a:link{text-decoration:none;}
a,img{vertical-align:top}
.clrfx:before,.clrfx:after { content: " ";display: table;clear: both;}
.clrfx {*zoom: 1;}
.fl {float: left;}
.fr {float: right;}
.tac{text-align: center;}
.ml_05 {margin-left: -0.5em;}
.hoverOp:hover{filter: alpha(opacity=60);opacity: 0.6;}

/* Common
 * --------------------------------------------------------*/
body {
	letter-spacing: 1px;
	font:normal 16px/28px "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	background-repeat: repeat-y;
	background-position: center top;
	background-image: url(../images/base.gif);
}

/* wrapper
 * --------------------------------------------------------*/
#wrapper {
  	width: 800px;
	margin: 0 auto;
	text-align: center;
	color: #3E3A39;
}
/* header */
#header {
	position: relative;
	padding: 60px 0 85px 0;
	left: -30px;
}

/* contents */
#contents {
	margin: 30px auto 100px auto;
}

/* topic */
.topic {
	width: 800px;
	margin: 0 auto;
	text-align: left;
	padding-bottom: 245px;
}
.topic h2 {
	margin: 50px 0 60px 0;
}
.topic .photo{
	width: 300px;
	padding-right: 20px;
}
.topic .photo li{
	padding-bottom: 10px;
}

.topic .txt{
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 16px;
	line-height: 31px;
}
.topic .txt p{
	margin-top: -6px;
}
.topic .txt a{
	display: inline-block;
	padding-top: 65px;
}


/* making*/
#making {
	text-align:center;
	padding-bottom: 40px;
}
#making h2{
	margin-bottom: 20px;
}
#making p {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 20px;
	line-height: 36px;
	letter-spacing: 1px;
}

#making .txt {
	text-align: left;
	padding-left: 120px;
}

#making .yodogawa{
	margin: 60px auto 140px auto;
}

#making .reason .txt {
	margin: 60px auto 100px auto;
}

#making .gray16px {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 16px;
	line-height: 30px;
	letter-spacing: 1px;
	color: #666666;
}

/* related */
#related .info {
	border: 3px #3E3A39 solid;
	margin-top: 60px;
}

#related #info1 .ttl {
	margin: 68px 0 35px 0;
}
#related .info1_credit{
	padding-top: 10px;
	text-align: left;
}

#related #info2 {
	padding: 40px 0 40px 75px;
}
#related #info2 .fr{
	text-align: left;
}
#related #info2 p {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 14px;
	line-height: 28px;
	padding: 20px 0;
}
#info3 .hoverOp {
	display: block;
}

#related #info3 .photo{
	display: table;
}
#related #info3 .photo img{
	display: inline-table;
}
#related #info3 .ttl{
	padding: 20px 0;
}

/* footer */
#footer {
	padding-top: 120px;
	padding-bottom: 30px;
	width: 800px;
	margin: 0 auto;
	text-align: center;
}
#footer ul {
	margin-bottom: 50px;
}
#footer li {
	padding: 0 20px;
}

#footer li a:hover{
	filter: alpha(opacity=60);
	opacity: 0.6;
}
#footer .copy {
	padding-top: 40px;
	margin: 0 auto;
}



@media only screen and (max-width: 479px) {
	#wrapper{
		width: 100%;
	}
	img{
		width: 100%;
	}
	.fl,.fr {float: none;}
	#header{
		width: 100%;
		padding: 20px 0 30px 0;
		left:auto;
	}
	/* [smp]topic */
	.topic {
		width:90%;
		padding-bottom: 90px;
	}
	.topic h3 {
		width: 60%;
	}
	.topic h2 {
		margin: 30px 0 40px 0;
	}
	.topic .photo{
		margin: 0 auto;
		padding-right: 0;
	}
	.topic .photo li.limit{
		display: none;
	}
	.topic .txt p{
		margin-top: 30px;
		font-size: 14px;
		line-height: 26px;
	}
	.topic .txt a{
		padding-top: 30px;
	}
	.topic .hoverOp{
		width: 90%;
		display: table;
		margin: 0 auto;
	}
	
	/* [smp] making */
	#making {
		padding-bottom: 10px;
	}
	#making p {
		font-size: 14px;
		line-height: 26px;
	}
	#making .txt {
		padding-left: 0;
	}
	#making .reason .txt {
		width:97%;
		padding-left: 0;
	    margin: 20px auto 70px auto;
	}
	#making .yodogawa {
		width:90%;
		margin: 30px auto 70px auto;
	}
	#making .reason{
		width:90%;
		margin: 0 auto;
	}
	/* [smp] related */
	#related{
		padding-top: 40px;
	}
	#related .info {
		width: 98%;
		margin: 60px auto 0 auto;
	}
	
	#related #info1 {
		padding-bottom: 40px;
	}
	#related #info1 .ttl img{
		width: 60%;
	}
	#related #info1 a img,
	#related #info2 a img{
		width: 300px;
	}
	#related #info2 .ttl img{
		padding-top: 5px;
		width: 78%;
	}
	#related #info1 .ttl {
		margin: 35px 0;
	}
	
	#related #info2 {
		padding: 40px 0 40px 0;
	}
	#related #info2 .fl{
		width: 60%;
	}
	
	#related #info2 .fr {
		text-align: center;
	}
	#related #info2 p{
		display: table;
		margin: 0 auto;
		text-align: left;
	}
	#related #info2 .ttl {
		padding-top: 20px;
	}
	#related #info3 .ttl{
		width: 94%;
		margin: 20px auto;
	}
	
	
	/* [smp]footer */
	#footer {
		width: 100%;
		padding-top: 60px;
	}
	#footer li{
		display: inline-block;
		padding: 0;
	}
	#footer li{
		width: 28%;
	}
	  
	
}