@charset "utf-8";

/* =======================================

柴犬図書カードNEXT販売店一覧

======================================= */

body {
	background: none;
	font-size: 16px;
	line-height:160%;
	font-family: "Zen Maru Gothic", sans-serif;
}

header { width:100% !important; }
header.scrl { display:none; }
.first_header h1 { width:10% !important; margin-top:0.4em !important; }
.first_header { height:70px !important; }

section {
	position: relative;
	width: 100%;
	margin: 0 auto;
	clear:both;
	text-align:center;
	overflow:hidden;
	/*padding-bottom:150px;*/
}

#Limitstore {
	max-width:1150px;
	padding-bottom:0;
	z-index: 1000;
}

.plink_fixed {
	position: fixed;
	top: 0;
	left:50%;
	transform: translateX(-50%);
	background:#FFF;
	z-index: 1500;
	padding-bottom:1em !important;
}

#Storelist {
	max-width:1150px;
	overflow:hidden;
	_zoom:1;
}

.liststart { margin-top:40px !important; }

_:lang(x)::-moz-placeholder, .liststart {
  margin-top:1.9em !important;
}

h2 {
	background: #D2EDFB;
	/*border-radius: 10px;*/
	color: #15257E;
	font-size:20px;
	font-weight:normal;
	padding:25px 0 25px 0;
	margin:15px 0;
	text-align:center;
	line-height:70% !important;
	position: relative;
	border: clamp(0px, 1.1vw, 16px) solid #ABCDD9;
	outline: clamp(0px, 0.2vw, 4px) solid #ABCDD9;
	outline-offset: clamp(-30px, -2.1vw, 0px);
}

h2::before {
	content: "";
	position: absolute;
	display: inline-block;
	width: 5.8vw;
	height: 100px;
	background: url("../assets/img/cmn__odoroki-l-b.png") no-repeat;
	background-size:100%;
	top:-25px;
	left:5px;
}
h2::after {
	content: "";
	position: absolute;
	display: inline-block;
	width: 5.8vw;
	height: 100px;
	background: url("../assets/img/cmn__odoroki-r-b.png") no-repeat;
	background-size:100%;
	top:-25px;
	right:5px;
}

@media screen and (min-width: 1490px) {

h2::before,
h2::after {
	width: 4.5vw;
}
}

h2 .areaname {
	display: inline-block;
	font-size:32px;
	color:#15257E;
	font-weight:bold;
	margin-top:0.75em;
}

h2 > img { width:40%; margin-top:-60px;}

.attention {
	text-align: center;
	font-size:12px;
	color:#E40E12;
	line-height:130%;
}

.prefLink {
	margin-top: 20px;
	padding-right:50px;
	padding-left:50px;
	text-align: center;
}

a.toMap {
	position: relative;
	display: inline-block;
	margin: 1em auto 0 auto;
	padding-right:30px;
}

a.toMap::before {
	position:absolute;
	right:0;
	top:0;
	content:"";
	width: 25px;
	height: 25px;
	display:inline-block;
	background:url("images/icon_map.svg") no-repeat;
	background-size:contain;
}

.area {
	position: relative;
	background: #D2EDFB;
	border-radius: 10px;
	padding:15px 25px 25px 25px;
	margin-top:150px;
	text-align: center;
	clear: both;
}

.area::before {
	position:absolute;
	left:10px;
	top:10px;
	content:"";
	width: 85%;
	height:56px;
	display:inline-block;
	background:url("../assets/img/kv__dog-01.png") no-repeat;
	background-size:contain;
}

.area > h3 {
	font-size:22px;
	font-weight: 500;
	padding:10px 0 20px 0;
	text-align: center;
	color:#15257E;
}

.area .listtable {
	background: #FFF;
	border-radius: 10px;
}

.area .listtable .datattl {
	display:flex;
	justify-content: flex-start;
	background:#EFDBC5;
	border-radius: 10px  10px 0 0;
}

.area .listtable .datattl .storeN,
.area .listtable .datattl .storeAd {
	font-size:18px;
	padding:0.5em 1em;
	text-align:center;
}

.storeN,
.storename { width:35%; }
.storeN { border-right:#FFF 1px solid; }
.storeAd,
.storeadress { width:65%; }

.area .listtable .datastore {
	display:flex;
	justify-content: flex-start;
	border-bottom:#CCC 1px solid;
	width:100%;
}

.area .listtable .datastore .storename,
.area .listtable .datastore .storeadress {
	padding:0.5em 0.5em 0.5em 1em;
}

.dataend { border-bottom: none !important; }


footer {
	text-align: center;
	background: #91D0CB;
	padding:2em 1em;
	margin-top:5em;
}

footer p {
	color: #15257E;
	font-size:12px;
	text-align: center;
	line-height: 160%;
}

/*
@media screen and (min-width: 1580px) {

	footer { margin-top:-50px; }

}
*

/*-----------------------------------------------------	*/
/*	for - 768px					*/
/*-----------------------------------------------------	*/

@media screen and (min-width: 769px) {

	.sp-only { display:none; }

}

@media screen and (max-width: 768px) {

.pc-only { display:none; }
	
	body { font-size:13px; }
	
	.first_header {
		height: auto !important;
	}
	
	.first_header h1 {
		margin-top:0 !important;
		width:20% !important;
		padding: 10px 0 7px 0;
	}
	
	section {
		width:95%;
		padding: 0 2.5%;
	}
	
	#Limitstore {
	padding-bottom:5px;
	}
	
	h2 {
	font-size:20px;
	/*padding:0 0 25px 0;
	margin-top:55px;*/
	line-height:120%;
	vertical-align: middle;
	}

	h2 > img { width:80%; margin-top:-50px; }
	
	h2::before,
	h2::after {
	top:-15px;
	}
	
	.areaname {
	/*padding-left:0.5em;*/
	
	}
	
	.prefLink {
	margin-top: 15px;
	padding-right:15px;
	padding-left:15px;
	font-size:14px;
	line-height: 150%;
	}

	a.toMap {
	margin: 0.5em auto 0 auto;
	}
	
	.liststart { margin-top:40px !important;}
	
	.area {
	margin-top: 70px;
	padding:10px 15px 15px 15px;
	}
	
	.area::before {
	/*left:15px;
	width:35px;*/
	height:30px;
	}
	
	.area > h3 {
	font-size:16px;
	padding:3px 0 10px 0;
	}
	
.area .listtable .datattl {	display:none; }
.area .listtable .datastore { display:block; border-bottom: none; }

.storename,
.storeadress {
	width:90%;
	padding:0.5em 5% 0.5em 5% !important;
	}
	.storename { background:#EFDBC5; }
	.stnfir { border-radius: 10px 10px 0 0 ; }

	footer {
	background: #56BFC7;
	}
	
	footer p { font-size:10px; width:100%; }

}


@media screen and (max-width: 375px) {

	h2 {
	font-size:16px;
	padding:10px 10px 15px 10px;
	line-height:130%;
		}
	
	h2 .areaname {
	font-size:28px;
	}
	
	.attention {
	text-align: left;
	font-size:11px;
	line-height: 140%;
	}
	
}

@media screen and (max-width: 320px) {

	h2 {
	font-size:14px;
	line-height:120%;
	}
	
	h2 .areaname {
	font-size:26px;
	}
	
	.attention {
	font-size:10px;
	}
	
}