/* IMPORT RESET ================================================== */
@import url("sanitize.css");
/* WEB FONT ====================================================== */
@import url('5b8c577a808c4db5ab6948618f25316f.css');
@import url("all.min.css");
/* 変数設定 ======================================================== */
/*共通のサイズや色を変数で設定
　変数を使う時は数値で入れる箇所を var(--red) のように記載*/ :root {
	/*文字サイズ*/
	--x-small: 0.8rem; /*50%*/
	--small: 1.2rem; /*75%*/
	--medium: 1.6rem; /*100%*/
	--large: 2rem; /*125%*/
	--x-large: 2.4rem; /*150%*/
	/*色*/
	--red: #c00;
	--blue: #008bd5;
	--green: #009b68;
	--light-green: #8dc21f;
	--mallcolor: #b60081;
}
/* STYLES ======================================================== */
/* ルートのフォントサイズを10pxに設定（1rem=10px）*/
html {
	font-size: 62.5%;
}
/* bodyのフォントサイズを16pxに設定 */
body {
	font-size: 1.6rem;
}
/* MEMO ++++++++++++++++++++++++++++++++
  フォントサイズはremで指定すること
  例）10pxは1rem、12pxは1.2rem
+++++++++++++++++++++++++++++++++++++ */
.font-xs {
	font-size: var(--x-small);
}
.font-s {
	font-size: var(--small);
}
.font-m {
	font-size: var(--medium);
}
.font-l {
	font-size: var(--large);
}
.font-xl {
	font-size: var(--x-large);
}
/*文字色*/
.font-red {
	color: var(--red);
}
.font-blue {
	color: var(--blue);
}
.font-mcolor {
	color: var(--mallcolor);
}
* {
	box-sizing: border-box;
}
body {
	font-family: "M PLUS Rounded 1c", "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
	margin: 0;
	padding: 0;
	background-color: #fbf7ee;
}
/*下記marginやpadding、widthはサイトデザインに合わせて調整*/
header {
	margin: 0;
	padding: 10px 0 0 0;
}
main {
	margin: 0;
	padding: 10px 0 170px 0;
	background: url("../images/bg_footer.png") repeat-x bottom;
}
footer {
	margin: 0;
	padding: 10px 0;
	background-color: var(--green);
	color: #fff;
	text-align: center;
}
header h1 {
	margin: 0 auto;
	max-width: 1280px;
}
@media (max-width: 1180px) {
	header h1 {
		margin: 0 -50px;
	}
}
header .catch {
	margin: -20px calc(50% - 50vw) 0;
	background-color: var(--green);
	color: #fff;
	text-align: center;
	font-weight: 700;
	font-size: 3.2rem;
	padding: 10px;
}
main section {
	margin: 0 auto;
	max-width: 980px;
}
@media (max-width: 1000px) {
	/*mainのmax-widthよりウィンドウ幅が狭くなった時にコンテンツとウィンドウが接しないように設定
  @mediaのmax-widthと下記paddingはサイトコンテンツのmax-widthに合わせて調整*/
	header, main, footer {
		padding-right: 15px;
		padding-left: 15px;
	}
}
h2 {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 3rem;
	margin-top: 50px;
	line-height: 1.2;
	color: var(--green);
}
h2::before, h2::after {
	content: '';
	width: 70px;
	height: 3px;
	background-color: var(--light-green);
}
h2::before {
	margin-right: 20px;
}
h2::after {
	margin-left: 20px;
}
h3 {
	background: var(--green);
	color: #fff;
	font-size: var(--x-large);
	text-align: center;
	padding: 10px;
	border-radius: 5px;
	margin-top: 50px;
}
/*画像は基本的に横幅100%表示、高さは横幅に合わせて自動調整
  小さい画像を使用する際は個別にmax-widthを設定する*/
img {
	width: 100%;
	height: auto;
	vertical-align: bottom;
	image-rendering: -webkit-optimize-contrast; /*Chromeで画像がぼやけるのを防止*/
}
/*Flexbox ────────────────────────────────────────────────────────────
　子要素の間隔はgapで指定。
*/
.flexbox {
	display: flex;
	flex-wrap: wrap;
}
/*PC・スマホ共に2分割　※flexboxと一緒に設定*/
.box2 {
	--spacing: 10px; /*子要素の間隔*/
	gap: var(--spacing);
	> div, > p {
		width: calc((100% - var(--spacing)) / 2);
	}
}
/*PC2列、スマホ1列　※flexboxと一緒に設定*/
.box2-1 {
	--spacing: 20px; /*子要素の間隔*/
	gap: var(--spacing);
	> div, > p {
		width: 100%;
		padding: 0 10px;
		align-self: baseline;
	}
	@media (min-width: 768px) {
		/*PCのみ適用*/
		> div, > p {
			width: calc((100% - var(--spacing)) / 2);
		}
		.recycleOK {
			width: calc(55% - var(--spacing));
		}
		.recycleNG {
			width: 45%;
		}
	}
}
article#clothing, article#zakka {
	background: #fff;
	border-radius: 5px;
	padding-bottom: 10px;
	h4 {
		font-size: var(--x-large);
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
		color: #fff;
		text-align: center;
		margin-bottom: 0;
		padding: 5px;
	}
	.box2-1 {
		margin: 0 10px;
	}
	> p {
		margin: 0 20px;
		border-top: 2px dotted #999;
		padding-top: 10px;
	}
}
#clothing h4 {
	background: var(--light-green);
}
#zakka h4 {
	background: var(--blue);
}
@media (min-width: 768px) {
	#clothing .recycleNG img {
		margin: 15.2% 0;
	}
	#zakka .recycleNG img {
		margin: 9.8% 0;
	}
}
h5 {
	font-size: var(--x-large);
	padding: 5px;
	border-radius: 9999px;
	text-align: center;
	color: #fff;
	margin-top: 20px;
}
.recycleOK h5 {
	background: #f29600;
}
.recycleNG h5 {
	background: #898989;
}
dt {
	background: #ebebe9;
	border-radius: 9999px;
	text-align: center;
	margin-bottom: 10px;
}
dd {
	margin: 0;
	span.underline {
		border-bottom: 2px solid #ccc;
	}
}
#MallList {
	h3{
		padding: 2px;
	}
	ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin: 0;
		padding: 0;
		> li.mall {
				width: 100%;
				background-color: #fff;
				list-style: none;
				&:nth-child(even) {
					background-color: #f6f6f6;
				}
			> a {
				position: relative;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				text-decoration: none;
				color: #1a0dab;
				padding: 10px 15px;
				&::before {
					position: absolute;
					left: 10px;
					margin: auto;
					vertical-align: middle;
					font-family: "Font Awesome 6 Free";
					content: "\f08e";
					font-weight: 900;
				}
			}
			p {
				margin: 0;
				&:first-child {
					margin-left: 15px;
				}
				&:nth-child(2) {
					width: auto;
					text-align: right;
				}
			}
		}
		@media (min-width: 768px) {
			/*PCのみ適用*/
			> li.mall  {
				width: calc(100% / 3);
			}
		}
	}
}

p.icon img {
	height: 1.5em;
	width: auto;
}
@media (min-width: 768px) {
	/*PCのみ適用*/
	p.map {
		width: 65%;
	}
	p.icon {
		width: 30%;
	}
}
@media screen and (min-width: 768px){   
  .pc { display:inline; }
}
.pc { display:none; }

/*ページトップスクロール ──────────────────────────────────────────────────*/
#page-top {
	position: fixed;
	right: 10px;
	bottom: 10px;
	z-index: 10;
}
.topbtn {
	display: block;
	background: #f2961a;
	color: #fff;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	text-align: center;
	text-decoration: none;
	border: 3px solid #fff;
	i {
		padding-top: 5px;
		font-size: var(--large);
		display: block;
	}
	span {
		display: block;
		font-size: var(--small);
		font-weight: bold;
		margin-top: -2px;
	}
	/*マウスオーバーした時*/
	@media (hover: hover) {
		/* hover指定できるPCを想定したスタイル */
		&:hover {
			background-color: #fff;
			border-color: #f2961a;
			color: #f2961a;
		}
	}
	@media (hover: none) {
		/* hoverが使えないタッチ端末 */
		&:active {
			background-color: #fff;
			border-color: #f2961a;
			color: #f2961a;
		}
	}
}
/* ▲ページトップスクロールここまで▲ */
/* スマホなど幅が足りなくなったらspanで囲った単位で強制改行
   spanで囲まれている文章は自動改行がされなくなるので要注意*/
.spBr span {
	display: inline-block;
	white-space: nowrap;
}