@charset "utf-8";
/* Kinsan */

/* COMMON */
.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
	}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
body{
  margin:0;
  padding:0;
	font-size: 0;
}
#kinsan *{
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color: #000;
}
#kinsan {
	background: #fff;
	text-align: center;
}
#kinsan ul,
#kinsan dl,
#kinsan p{
	margin: 0;
	padding: 0;
}
#kinsan ul li{
	list-style: none;
}
#kinsan a{
	text-decoration: none;
}
#kinsan img{
	margin: 0;
	vertical-align: bottom;
}
#kinsan h1,
#kinsan h2,
#kinsan h3{
	margin:0;
	padding:0;
}
@media only screen and (min-width: 641px) {
	.dspP {display:inline-block !important;}
	.dspS {display:none !important;}
	a:hover {opacity:0.8;filter:alpha(opacity=80);-moz-opacity:0.8;}
}
@media only screen and (max-width: 640px) {
	.dspP {display:none !important;}
	.dspS {display:inline-block !important;}
	img {max-width:100%;}
}

/* floating */
@media only screen and (min-width: 641px) {
	#kinsan #floating{
	position: fixed;
	top:250px;
	right:0;
	}
}

/* pagetop */
@media only screen and (min-width: 641px) {
	#kinsan #pagetop{
	position: fixed;
	bottom:70px;
	right:20px;
	}
}

/* header */
@media only screen and (min-width: 641px) {
	#kinsan #header{
		width: 960px;
		margin: 0 auto;
		display: table;
	}
	#kinsan #header li{
		display: table-cell;
		text-align: left;
		width: 50%;
	}
	#kinsan #header li:last-child{
		text-align: right;
	}
}
@media only screen and (max-width: 640px) {
	#kinsan #header{
		width: 100%;
		margin: 0 auto;
		display: table;
	}
	#kinsan #header li{
		display: table-cell;
		text-align: left;
		width: 50%;
	}
	#kinsan #header li:last-child{
		text-align: right;
	}
}

/* kv */
@media only screen and (min-width: 641px) {
	#kinsan #kv{
		background: url(../img/kv_bg_01.png) no-repeat center top;
		background-size: 100% auto;
	}
	#kinsan #kv .bgBottom{
		background: url(../img/kv_bg_02.png) repeat-x center bottom;
	}
	#kinsan #kv .inner{
		width: 960px;
		margin: 0 auto;
		position: relative;
	}
	#kinsan #kv .btn{
		position: absolute;
		right: 0;
		bottom: 27px;
	}
}
@media only screen and (max-width: 640px) {
	#kinsan #kv{
		background: #20338f;
		padding-bottom: 20px;
	}
	#kinsan #kv .btn{
		width: 80%;
		margin: 0 auto;
	}
}

/* merit */
#kinsan #merit{
	background: #f0f7fa;
}

/* purpose */
@media only screen and (min-width: 641px) {
	#kinsan #purpose .note{
		font-size: 12px;
		line-height: 1;
		padding-bottom: 40px;
	}
}
@media only screen and (max-width: 640px) {
	#kinsan #purpose .note{
		font-size: 12px;
		line-height: 1.2;
		padding-bottom: 30px;
	}
}

/* btnBox */
@media only screen and (max-width: 640px) {
	#kinsan .btnBox .btn{
		width: 80%;
		margin: 0 auto;
	}
}

/* area */
@media only screen and (min-width: 641px) {
	#kinsan #area{
		background: #f0f7fa;
		position: relative;
	}
	#kinsan #area .shoplist{
		position: absolute;
		bottom: 70px;
		left:50%;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform : translate(-50%, -50%);
    transform : translate(-50%, -50%);
	}
	#kinsan #area a{
		text-decoration: underline;
		font-size: 14px;
		line-height: 1;
		color: #20338f;
	}
	#kinsan #area a:hover{
		text-decoration: none;
	}
	#kinsan #area .shoplist::after{
		content: " >";
	}
}
@media only screen and (max-width: 640px) {
	#kinsan #area{
		background: #f0f7fa;
		position: relative;
	}
	#kinsan #area .shoplist{
		position: absolute;
		bottom: 7%;
		left:50%;
		-ms-transform: translate(-50%, -50%);
		-webkit-transform : translate(-50%, -50%);
		transform : translate(-50%, -50%);
	}
	#kinsan #area a{
		text-decoration: underline;
		font-size: 14px;
		line-height: 1;
		color: #20338f;
	}
	#kinsan #area .shoplist::after{
		content: " >";
	}
}

/* cm */
@media only screen and (min-width: 641px) {
	#kinsan #cm .gallery{
		padding: 30px 0;
		font-size: 14px;
	}
	#kinsan #cm .gallery a{
		text-decoration: underline;
		line-height: 1;
		color: #20338f;
	}
	#kinsan #cm .gallery a:hover{
		text-decoration: none;
	}
	#kinsan #cm .gallery::after{
		content: " >";
	}
}
@media only screen and (max-width: 640px) {
	#kinsan #cm .gallery{
		padding: 20px 0;
		font-size: 14px;
	}
	#kinsan #cm .gallery a{
		text-decoration: underline;
		line-height: 1;
		color: #20338f;
	}
	#kinsan #cm .gallery::after{
		content: " >";
	}
}

/* overview */
@media only screen and (min-width: 641px) {
	#kinsan #overview{
		width: 960px;
		margin: 0 auto;
	}
	#kinsan #overview h3{
		background: #20338f;
		color: #fff;
		font-size: 18px;
		line-height: 1;
		padding: 15px 0;
	}
	#kinsan #overview .date{
		font-size: 12px;
		line-height: 1;
		padding: 15px 0 0;
		text-align: right;
	}
	#kinsan #overview dl{
		text-align: left;
		width: 960px;
		font-size: 14px;
		line-height: 1.6;
		margin-bottom: 45px;
	}
	#kinsan #overview dt{
		padding: 15px 25px;
		margin: 0;
		float: left;
	}
	#kinsan #overview dd{
		border-bottom: 1px #000 solid;
		padding: 15px 25px 15px 205px;
		margin: 0;
	}
	#kinsan #overview .doc{
		text-align: left;
		font-size: 14px;
		line-height: 1.6;
		margin: 30px auto 45px;
		width: 910px;
	}
	#kinsan #overview .doc li{
		margin-bottom: 30px;
		text-indent: -1.4em;
		padding-left: 1.4em;
	}
	#kinsan #overview .attention{
		text-align: left;
		font-size: 14px;
		line-height: 1.6;
		margin: 30px 10px 25px 30px;
	}
	#kinsan #overview .attention li{
		margin-bottom: 25px;
		list-style: disc;
	}
	#kinsan #overview .pdf{
		text-align: left;
		font-size: 14px;
		line-height: 1;
		margin: 0 0 55px 15px;
	}
	#kinsan #overview .pdf a::before{
		content: url(../img/pdf.png);
		vertical-align: middle;
		margin-right: 10px;
		display: inline-block;
	}
	#kinsan #overview .pdf a{
		text-decoration: underline;
	}
	#kinsan #overview .pdf a:hover{
		text-decoration: none;
	}
}
@media only screen and (max-width: 640px) {
	#kinsan #overview h3{
		background: #20338f;
		color: #fff;
		font-size: 14px;
		line-height: 1;
		padding: 15px 0;
	}
	#kinsan #overview .date{
		font-size: 10px;
		line-height: 1;
		padding: 10px;
		text-align: right;
	}
	#kinsan #overview dl{
		text-align: left;
		width: 100%;
		font-size: 10px;
		line-height: 1.4;
		margin-bottom: 10px;
	}
	#kinsan #overview dt{
		padding: 10px;
		margin: 0;
		float: left;
	}
	#kinsan #overview dd{
		border-top: 1px #000 solid;
		padding: 10px 10px 10px 90px;
		margin: 0;
	}
	#kinsan #overview .doc{
		text-align: left;
		font-size: 10px;
		line-height: 1.4;
		margin: 15px;
	}
	#kinsan #overview .doc li{
		margin-bottom: 15px;
		text-indent: -1.5em;
		padding-left: 1.5em;
	}
	#kinsan #overview .attention{
		text-align: left;
		font-size: 10px;
		line-height: 1.4;
		margin: 15px 15px 15px 25px;
	}
	#kinsan #overview .attention li{
		margin-bottom: 15px;
		list-style: disc;
	}
	#kinsan #overview .pdf{
		text-align: left;
		font-size: 10px;
		line-height: 1;
		margin: 0 0 30px 10px;
	}
	#kinsan #overview .pdf a::before{
		content: url(../img/pdf.png);
		vertical-align: middle;
		margin-right: 5px;
		display: inline-block;
	}
	#kinsan #overview .pdf a{
		text-decoration: underline;
	}
}

/* footer */
@media only screen and (min-width: 641px) {
	#kinsan #footer{
		background: #20338f;
		padding: 20px;
		color: #fff;
		font-size: 12px;
		line-height: 1;
	}
}
@media only screen and (max-width: 640px) {
	#kinsan #footer{
		background: #20338f;
		padding: 15px;
		color: #fff;
		font-size: 10px;
		line-height: 1;
	}
}

 /* telban */
 
 #telbox { padding: 30px 0; }