@charset "utf-8";

.material-symbols-outlined.stroke {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 48
}
.material-symbols-outlined.fill {
  font-variation-settings:
  'FILL' 1,
  'wght' 400,
  'GRAD' 0,
  'opsz' 48
}


.hover-opacity {
	opacity: 1;
	transition: 0.3s ease;
}
.hover-opacity:hover {
	opacity: .7;
}

/**
 * お取扱い店舗 header
 * */
.retailer-header {
	display: grid;
	align-items: center;
	justify-content: center;
	justify-items: center;
	grid-template-columns: min(55.16vw, 460px);
	width: 100%;
	height: min(25.18vw, 210px);
	background-image: url(/img/shop/retailer/retailer-header-bg.webp);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
/* お取扱い店舗 header PC 835px以上 */
@media (min-width: 835px) {
	.retailer-header {
		grid-template-columns: auto;
		background-repeat: repeat-x;
		background-size: contain;
	}
}


/**
 * お取扱い店舗 main content
 * */
.retailer-main-content {
	width: 100%;
	margin-inline: auto;
	padding: 0 min(3.6vw, 30px) min(11.99vw, 100px);
}
.kyoanishop-link {
	width: min(83.93vw, 700px);
	margin-inline: auto;
	padding-block: min(6vw, 50px);
}
.kyoanishop-link a {
	display: grid;
	justify-content: center;
	align-items: center;
	grid-template-columns: auto auto;
	gap: min(1vw, 14px);
	padding: min(4.8vw, 40px) min(2.29vw, 32px);
	font-size: min(3.12vw, 26px);
	font-weight: 700;
	color: #ee762e;
	border: 1px solid #ee955f;
}
.kyoanishop-link a:hover {
	opacity: .7;
	text-decoration: none;
}
@media (min-width: 835px) {
	.kyoanishop-link a {
		border: 2px solid #ee955f;
	}
}
.kyoanishop-link .icon-arrow {
	display: grid;
	width: min(4.8vw, 40px);
	height: min(4.8vw, 40px);
	background-color: #ee762e;
	border-radius: 50%;
}
.kyoanishop-link .icon-arrow svg {
	padding-block: .15em;
	padding-inline: .075em 0;
	width: 100%;
	height: 100%;
	fill: #FFF;
}

/* 注意事項 */
.retailer-notice {
	display: grid;
	justify-content: center;
	justify-items: start;
	gap: 0.3em;
	padding-inline: min(6vw, 50px) min(1.2vw, 10px);
	font-size: min(3.36vw, 28px);
	text-align: justify;
	line-height: 1.6;
	letter-spacing: 0.02em;
}
.retailer-notice li {
	display: list-item;
	list-style-type: disc;
}
.retailer-notice li::marker {
	color: #ee762e;
}
/* お取扱い店舗 main content PC 835px以上 */
@media (min-width: 835px) {
	.retailer-main-content {
		max-width: 1000px;
		padding: 0 20px 100px;
	}
	.kyoanishop-link {
		padding-block: 60px;
	}
	/* 注意事項 */
	.retailer-notice {
		gap: 1em;
		padding-inline: unset;
		font-size: 15px;
		/* line-height: 1; */
	}
}



/**
 * 検索ボタン
 * */
.retailer-search-select {
	display: grid;
	grid-template-columns: repeat(auto-fit, 30%);
	justify-content: space-between;
	padding: min(7.19vw, 60px) 0 40px;
}
.retailer-search-button {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: min(1.92vw, 16px);
	height: 100%;
	min-height: min(15.59vw, 130px);
	padding: min(1.92vw, 16px);
	background-color: #ee762e;
	border: 1px #ee762e solid;
	border-radius: 5px;
	text-decoration: none;
	line-height: 1;
	cursor: pointer;
}
.retailer-search-button:hover,
.retailer-search-button.select {
 background-color: #ffe9d9;
 text-decoration: none;
}

.icon-geolocation {
	width: min(4.56vw, 38px);
	height: auto;
}
.icon-area {
	width: min(7.31vw, 61px);
	height: auto;
}
.icon-map,
.icon-map-hover {
	width: min(8.15vw, 68px);
	height: auto;
}
.retailer-search-button svg {
	fill: #FFF;
}
.retailer-search-button:hover svg,
.retailer-search-button.select svg {
	fill: #ee762e;
}
.retailer-search-button .icon-map,
.retailer-search-button:hover .icon-map-hover {
	display: block;
}
.retailer-search-button:hover .icon-map,
.retailer-search-button .icon-map-hover {
	display: none;
}

.retailer-search-button p {
	color: #FFF;
	font-size: min(3.12vw, 26px);
	font-weight: 600;
	letter-spacing: 0.06em;
}
.retailer-search-button:hover p,
.retailer-search-button.select p {
	color: #ee762e;
}

.retailer-search-button .material-symbols-outlined {
	color: #FFF;
	font-size: min(2.88vw, 24px);
	vertical-align: bottom;
}
.retailer-search-button:hover .material-symbols-outlined,
.retailer-search-button.select .material-symbols-outlined {
	color: #ee762e;
}

/* 検索ボタン PC 835px以上 */
@media (min-width: 835px) {
	.retailer-search-select {
		padding: 70px 0 40px;
	}
	.retailer-search-button {
		flex-direction: row;
		gap: 15px;
		min-height: 60px;
		padding: 0;
	}

	.icon-geolocation {
		width: 22px;
	}
	.icon-area {
		width: 35px;
	}
	.icon-map,
	.icon-map-hover {
		width: 35px;
	}

	.retailer-search-button p {
		font-size: 20px;
	}

	.retailer-search-button .material-symbols-outlined {
		font-size: 19px;
	}
}




/**
 * 店舗リスト検索
 * */
.search-area-box.show--off,
.search-pref-list.show--off,
.search-pref-header.show--off {
	display: none;
}
/* .show--on {
	display: block;
} */
/* エリア・都道府県 リスト */
.search-area-header,
.search-pref-header {
	padding: min(1.44vw, 12px) min(1.8vw, 15px);
	color: #FFF;
	background-color: #9d9d9d;
	font-size: min(3.6vw, 30px);
	font-weight: 600;
	line-height: 1;
}
.search-area-list,
.search-pref-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: min(4.2vw, 35px);
	padding: min(3.6vw, 30px) min(3vw, 25px);
}
.search-area-list > li,
.search-pref-list > li {
	display: flex;
	align-items: center;
	gap: min(1.2vw, 10px);
	line-height: 1;
	letter-spacing: 0.06em;
	cursor: pointer;
}
.search-area-list > li > span,
.search-pref-list > li > span {
	font-size: min(2.4vw, 20px);
	color: #ee762e;
}
.search-area-list > li > p,
.search-pref-list > li > p {
	font-size: min(3.6vw, 30px);
}
.search-area-list > li:hover > p,
.search-area-list > li.select > p,
.search-pref-list > li:hover > p,
.search-pref-list > li.select > p {
	color: #ee762e;
}
/* 店舗リスト検索 PC 835px以上 */
@media (min-width: 835px) {
	.search-area-header,
	.search-pref-header {
		padding: 8px 10px;
		font-size: 20px;
	}
	.search-area-list,
	.search-pref-list {
		gap: 20px;
		padding: 20px;
	}
	.search-area-list > li,
	.search-pref-list > li {
		gap: 3px;
	}
	.search-area-list > li > span,
	.search-pref-list > li > span {
		font-size: 15px;
	}
	.search-area-list > li > p,
	.search-pref-list > li > p {
		font-size: 15px;
	}
}


/**
 * 店舗リスト表示
 * */
.result-spot-list {
	padding-top: min(3.6vw, 30px);
}
.spot-detail-box {
	display: grid;
	grid-template-columns: auto;
	gap: min(1.8vw, 15px);
	padding: min(3.6vw, 30px) 0 min(3.6vw, 30px) min(2.4vw, 20px);
	border-bottom: 0.35em #ffe9d9 dotted;
}
.spot-detail-box.NoSpot {
	display: block;
	text-align: center;
	border: none;
}
.spot-store-name {
	font-size: min(3.6vw, 30px);
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.06em;
}
.spot-store-data {
	font-size: min(3.12vw, 26px);
}
.spot-store-link {
	display: grid;
	align-items: center;
	width: min(35.97vw, 300px);
}
.spot-store-link a {
	display: inline-block;
	width: 100%;
	padding: min(1.92vw, 16px);
	color: #FFF;
	background-color: #f7a531;
	text-align: center;
	font-size: min(2.88vw, 24px);
	line-height: 1;
	border: 1px #f7a531 solid;
	border-radius: 5px;
	text-decoration: none;
}
.spot-store-link a:hover {
	color: #f7a531;
	background-color: #fff5e6;
	text-decoration: none;
}
/* もっと見る */
.spot-next-link {
	width: min(35.97vw, 300px);
	margin-inline: auto;
	padding-top: min(8.39vw, 70px);
}
.spot-next-link-button {
	display: grid;
	align-items: center;
	justify-items: center;
	grid-template-columns: 1fr auto;
	width: 100%;
	padding: min(2.4vw, 20px);
	color: #ee762e;
	background-color: #FFF;
	font-size: min(2.88vw, 24px);
	text-decoration: none;
	line-height: 1;
	border: 1px #ee955f solid;
	border-radius: 5px;
	cursor: pointer;
}
.spot-next-link-button:hover {
	text-decoration: none;
}
.spot-next-link-button > span {
	font-size: min(3.12vw, 26px);
}
/* 店舗リスト表示 PC 835px以上 */
@media (min-width: 835px) {
	.result-spot-list {
		padding-top: 30px;
	}
	.spot-detail-box {
		grid-template-columns: 1fr 1.7fr 145px;
		gap: 30px;
		padding: 20px 0 20px 15px;
	}
	.spot-store-name {
		font-size: 20px;
	}
	.spot-store-data {
		font-size: 15px;
	}
	.spot-store-link {
		width: auto;
	}
	.spot-store-link a {
		padding: 12px 10px;
		font-size: 15px;
	}
	/* もっと見る */
	.spot-next-link {
		width: 250px;
		padding-top: 70px;
	}
	.spot-next-link-button {
		padding: 12px 15px;
		font-size: 15px;
	}
	.spot-next-link-button > span {
		font-size: 20px;
	}
}