@charset "utf-8";
#wrapper-shop { background: #e2f7fd;}

#kv { position: relative; z-index: 1; margin-bottom: -80px;}
#kv .inner-kv { position: relative; width: 100%; max-width: 1280px; margin: 0 auto;}
#kv .logo { width: 180px; position: absolute; left: 20px; top: 20px;}
#kv img { width: 100%;}
#kv img.sp { display: none;}

@media (max-width: 1281px) {
}
@media (max-width: 1001px) {
}
@media (max-width: 801px) {
	#kv .logo { width: 24%; max-width: 150px; left: 10px; top: 15px;}
	#kv img.pc { display: none;}
	#kv img.sp { display: block;}
}
@media (max-width: 641px) {
	#kv { margin-bottom: -8vw;}
}


#list { position: relative; z-index: 2;}
#list .inner { position: relative; width: 100%; max-width: 1280px; margin: 0 auto; padding: 120px 0 60px; };
/* #list .inner { background: url('../img/bg/shop-list.png') no-repeat 50% 0 / 1280px auto;} */
#list .ttl { margin-bottom: 30px;}
#list .ttl h2 { margin-bottom: 20px; text-align: center;}
#list .ttl h2 img { width: 36%; max-width: 300px;}
#list .ttl h3 { margin-bottom: 20px; color: #238cc4; font-size: 21px; text-align: center;}
#list .ttl p { font-size: 16px; text-align: center;}
#list .btn { width: 60%; max-width: 300px; margin: 0 auto 30px;}
#list .btn a { display: none; width: 100%; padding: 4px; background: linear-gradient(#acd4f2,#75bfe5,#85c9e6); border-radius: 14px;
 color: #6fb6df; font-size: 22px; font-weight: 700; text-align: center; text-decoration: none;
}
#list .btn a span { display: block; padding: 18px; background: #fff; border-radius: 12px;}
#list .btn a span svg{ display: inline-block; width: 32px; margin-right: 10px; fill: #6fb6df; vertical-align: middle;}
#list .btn a span em { display: inline-block; vertical-align: middle;}

#list .btn span.none { display: block; width: 100%; padding: 4px; background: linear-gradient(#acd4f2,#75bfe5,#85c9e6); border-radius: 14px;
 color: #6fb6df; font-size: 22px; font-weight: 700; text-align: center; text-decoration: none; opacity: 0.6;
}
#list .btn span.none span { display: block; padding: 18px; background: #fff; border-radius: 12px;}
#list .btn span.none span svg{ display: inline-block; width: 32px; margin-right: 10px; fill: #6fb6df; vertical-align: middle;}
#list .btn span.none span em { display: inline-block; vertical-align: middle;}

#list .ctn { width: 90%; max-width: 800px; margin: 0 auto;}
#list .ctn { padding: 100px 0 150px;}
#list .ctn p { color: #767676; font-size: 55px; font-weight: 700; letter-spacing: 0.1rem; text-align: center;}
#list .ctn ul { font-size: 0; text-align: center;}
#list .ctn ul li { display: inline-block; width: 33.33334%; padding: 15px; font-size: 17px;}
#list .ctn ul li a { position: relative; display: block; padding: 20px 6px; padding-left: 50px;
 background: linear-gradient(#acd8f2,#75c1e5,#85cce6); border-radius: 10px;
 color: #fff; font-weight: 700; text-align: left; text-decoration: none;
}
#list .ctn ul li a:before { content: ''; display: block; width: 23px; height: 100%; position: absolute; left: 15px; top: 0;
 background: url('../img/icn-shop.png') no-repeat 50% 50% / 100% auto;
}
#list .ctn ul li a:hover { opacity: 0.85;}
@media (max-width: 801px) {
	#list .ctn ul li { padding: 10px; font-size: 14px;}
}
@media (max-width: 641px) {
	#list .inner { padding: 12vw 0 40px;}
	/* #list .inner { background: url('../img/bg/shop-list@sp.png') no-repeat 50% 0 / 100% auto;} */
	#list .ctn ul li { width: 50%;}
}
@media (max-width: 481px) {
	#list .ttl h2 { margin-bottom: 12px;}
	#list .ttl h3 { margin-bottom: 12px; font-size: 16px;}
	#list .ttl p { font-size: 12px;}
	#list .btn { width: 100%; max-width: 330px;	 margin: 0 auto 20px;}
	#list .btn a { padding: 2px; border-radius: 8px; font-size: 15px;}
	#list .btn a span { padding: 10px; border-radius: 6px;}
	#list .btn a span svg{ width: 24px; margin-right: 8px;}
	#list .ctn { padding: 60px 0 80px;}
	#list .ctn p { font-size: 30px;}
	#list .ctn ul li { padding: 6px; font-size: 12px;}
	#list .ctn ul li a { padding: 8px 4px; padding-left: 30px; border-radius: 6px;}
	#list .ctn ul li a:before { width: 12px; left: 9px;}
}


#sns { background: #e2f7fd; z-index: 3;}
#sns .inner { background: url('../../img/common/bg-sns.png') no-repeat 50% 100%/ 1280px auto;}
#sns h3 a:hover svg { fill: #238cc4;}
#sns ul li a:hover svg { fill: #4aadda;}
@media (max-width: 641px) {
	#sns .inner { background: url('../../img/common/bg-sns@sp.png') no-repeat 50% 100%/ 100% auto;}
}
@media (max-width: 481px) {
}