@charset "utf-8";

/*
	font-family: dnp-shuei-mgothic-std, sans-serif;
	font-weight: bold;
	font-family: Arial;
*/

/*===============================================
 レスポンシブ PCサイズ 横幅 1,200px以下 以上
===============================================*/
@media screen and (min-width: 993px), print {}
/*===============================================
 レスポンシブ タブレットサイズ 横幅 992px以下
===============================================*/
@media screen and (min-width: 769px) and (max-width: 992px) {}
/*===============================================
 レスポンシブ PCサイズ 横幅 769px以上
===============================================*/
@media screen and (min-width: 769px), print {}
/*===============================================
 レスポンシブ タブレットサイズ 横幅 768px以下
===============================================*/
@media screen and (max-width: 768px) {}
/*===============================================
 レスポンシブ	タブレットサイズ　横幅 570px以下
===============================================*/
@media screen and (max-width: 570px) {}
/*===============================================
 レスポンシブ スマホサイズ　横幅 414px以下
===============================================*/
@media screen and (max-width: 414px) {}

article.page * {
	font-family: dnp-shuei-mgothic-std, sans-serif;
	font-weight: bold;
}

/* == 取扱店のご紹介ページ == */
/* タイトル */
section#titleArea {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	background: url("../img/shop-link/title_bg.jpg") no-repeat top center;
	background-size: contain;
	width: 100vw;
	height: 29.62962vw;
}
#titleArea .title {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}
#titleArea .title h2 {
	color: #fff;
	font-size: 2.4rem;
}
#titleArea .title h2 figure {
	display: block;
	margin: 0 auto 10px;
}
/* テキスト */
section#txtArea {}
#txtArea {
	padding: 5vw;
}
#txtArea p {
	font-size: 1.6rem;
	line-height: 2em;
}
/* 店舗リスト */
section#listArea {}
#listArea {
	margin-bottom: 6rem;
}

#listArea .navi {
	margin: 0 auto 6rem;
}
#listArea .navi ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}
#listArea .navi ul li {
	margin: 0.5rem;
}
#listArea .navi ul li a {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	font-size: 1.6rem;
	line-height: 2em;
	border: .2rem solid #F8EEE0;
	padding: .9rem;
	border-radius: 2.7rem;
	width: 150px;
	background: rgba(248,238,224,0.00);
}
#listArea .navi ul li a:hover {
	background: rgba(248,238,224,1.00);
}
/*===============================================
 レスポンシブ タブレットサイズ 横幅 768px以下
===============================================*/
@media screen and (max-width: 768px) {
#titleArea .title h2 {
	font-size: 2.0rem;
}
#titleArea .title h2 figure {
	width: calc( 70% );
	max-width: 320px;
}
#titleArea .title h2 figure img {
	width: 100%;
	height: auto;
}
#txtArea p {
	font-size: 1.4rem;
}
#listArea .navi {
	margin: 0 auto 4rem;
}
#listArea .navi ul {}
#listArea .navi ul li {
	margin: 0.5rem;
	width: calc( 100% / 4 - 1rem );
	max-width: 150px;
}
#listArea .navi ul li a {
	font-size: 1.4rem;
	line-height: 2em;
	border: .2rem solid #F8EEE0;
	padding: .6rem;
	border-radius: 2.6rem;
	width: calc( 100% );
	max-width: 150px;
}
}
/*===============================================
 レスポンシブ スマホサイズ　横幅 414px以下
===============================================*/
@media screen and (max-width: 414px) {
#titleArea .title h2 {
	font-size: 1.6rem;
}
#txtArea p {
	font-size: 1.1rem;
}
#listArea .navi ul li {
	width: calc( 100% / 2 - 1rem );
}
}

/* 店舗情報 */
.shoplist {
	width: calc( 90rem );
	margin: 0 auto;
}
.shoplist h3 {
	display: inline-block;
	font-size: 2.4rem;
	line-height: 1.4em;
	margin-bottom: 2rem;
	padding: 0em 0.5em;
	background: linear-gradient(transparent 60%, rgba(219,168,102, 0.5) 40%);
}
.shoplist ul {
	display: flex;
	flex-wrap: wrap;
	padding: 0 0 5rem 0;
}
.shoplist ul li {
	padding: 0 0 1rem 0;
	margin: 2rem;
	width: 26rem;
}
.shoplist ul li figure {
	width: calc( 100% - 2rem );
	max-width: 24rem;
	height: auto;
	margin: 1rem auto 0;
}
.shoplist ul li figure.line {
	border: 2px solid #F2F2F2;
}
.shoplist ul li figure img {
	width: 100%;
	height: auto;
}
.shoplist ul li .txt {
	display: block;
	margin: 1rem auto;
}
.shoplist ul li .txt h4 {
	font-size: 1.8rem;
	line-height: 1.25em;
	letter-spacing: -.075em;
	padding: 0.65rem 0;
}
.shoplist ul li .txt p {
	font-size: 1.2rem;
	line-height: 1.3em;
	margin: 0.25rem auto 1.75rem;
}
.shoplist ul li .txt a {
	font-size: 1.35rem;
	line-height: 1em;
	padding: .575rem 3rem;
	border: .2rem solid #F8EEE0;
	border-radius: 1.4rem;
	background: rgba(248,238,224,0.00);
}
.shoplist ul li .txt a:hover {
	background: rgba(248,238,224,1.00);
}
/*===============================================
 レスポンシブ タブレットサイズ 横幅 768px以下
===============================================*/
@media screen and (max-width: 768px) {
.shoplist {
	width: calc( 100% - 1rem );
}
.shoplist h3 {
	display: inline-block;
	font-size: 1.8rem;
	line-height: 1.4em;
	margin-bottom: 1rem;
}
.shoplist ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding: 0 1vw 10vw 1vw;
	margin: 0 auto;
}
.shoplist ul li {
	padding: 0 0 1vw 0;
	margin: 1vw;
	width: calc( 100% / 2 - 2vw );
	max-width: 26rem;
}
.shoplist ul li figure {
	width: calc( 100% - 2vw );
	max-width: 24rem;
	height: auto;
	margin: 1vw auto 0;
}
.shoplist ul li figure.line {
	border: 2px solid #F2F2F2;
}
.shoplist ul li figure img {
	width: 100%;
	height: auto;
}
.shoplist ul li .txt {
	margin: 0.5rem auto;
}
.shoplist ul li .txt h4 {
	font-size: 1.5rem;
	padding: 0.65rem 0;
}
.shoplist ul li .txt p {
	font-size: 1.0rem;
	line-height: 1.3em;
	margin: 0.25rem auto 1.75rem;
}
.shoplist ul li .txt a {
	font-size: 1.2rem;
	line-height: 1em;
	padding: .575rem 3rem;
	border: .2rem solid #F8EEE0;
	border-radius: 1.4rem;
	background: rgba(248,238,224,0.00);
}
}
/*===============================================
 レスポンシブ スマホサイズ　横幅 414px以下
===============================================*/
@media screen and (max-width: 414px) {
.shoplist h3 {
	font-size: 1.6rem;
}
.shoplist ul li .txt h4 {
	font-size: 1.3rem;
	padding: 0.65rem 0;
}
.shoplist ul li .txt a {
	font-size: 1.0rem;
}
}