@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@300;500&family=Noto+Serif+JP:wght@200..900&display=swap');

.noto-serif-jp-<uniquifier> {
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
.m-plus-rounded-1c-regular {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.m-plus-rounded-1c-bold {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 500;
  font-style: normal;
}

body {
  background:url('bg2.png') #c00;
  background-attachment: fixed;
  display: flex; /* Flexboxを有効にする */
  justify-content: center; /* 水平方向の中央揃え */
  align-items: center; /* 垂直方向の中央揃え */
}

/* 真ん中に表示するコンテンツエリア */
.main-content {
  width: 100%; /* 親要素の幅いっぱいに広げる */
  max-width: 600px; /* スマホの一般的な幅（例）に設定 */
  height: 100%; /* 親要素の高さに合わせる */
  box-sizing: border-box; /* paddingとborderを幅・高さに含める */
  background:url('bg.png') #f9f9f9;
  padding:0; /* 内側の余白 */
}


header { max-width:600px; margin:0 auto; padding:0; box-shadow:0 3px 5px #933; }
header h1 { line-height:0; margin:0; }
header img { width:100%; }

main { max-width:600px; margin:0 auto; padding:0.5em; }

main h1 { 
text-align:center; color:#fff; font-size:2.5em; margin:0.8em;
font-family: "Noto Serif JP", serif; font-optical-sizing: auto; font-weight: 900;
text-shadow:1px 2px 1px #820;
}
@media only screen and (max-width:480px) { 
	main h1 { font-size:1.7em; }
}

#t2 { text-align:center; font-size:1.3em; margin:1em; color:#fff;
font-family: "M PLUS Rounded 1c", sans-serif;
font-weight: 500; }

#search { background:url('bg_s.jpg') #fff;  border-radius: 1em; padding:0.5em; box-shadow:0 3px 4px #933; text-align:center; }
#search strong { margin:1em; border-top:2px dotted #ca6; border-bottom:2px dotted #ca6; color:#420; display:block; }
#search div { margin:1.5em auto 1em; line-height:2; }
#search_t { margin:1em; background-color:#b95; font-size:1.2em; color:#fff; font-weight:bold; border-radius: 1em; }

input[type="checkbox"] {
    display: none; /* チェックボックスを隠す */
}

label {
    display: inline-block;
	font-family: "M PLUS Rounded 1c", sans-serif;
	font-weight: 500;

	margin:0.3em 0.1em;
    padding: 0.5em 0.8em 0.4em;
    background-color: #fff;
    color: #642;
    border-radius: 2em;
    cursor: pointer;
    transition: background-color 0.3s; /* ホバー時のトランジション */
	border:1px solid #ca6; 
	box-shadow:0px 1px 2px #999;
}

label:hover {
    background-color: #db7; /* ホバー時の背景色 */
}

/*label { background-color: #fff; border-radius: 6px; border:1px solid #ca6; color:#420; box-shadow:0px 1px 2px #999; }*/

/* チェックされたときにラベルの色を変更 */
label.checked {
	background-color: #db7;
	color: #fff; 
}
label:not(.checked) { background-color: #fff; }

button {
	font-size:16px;
    margin: 1em auto;
    padding: 10px 15px;
	width: 50%;
    background-color: #06b4bd;
    color: #ffffff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
	box-shadow:0px 1px 3px #999;
	border-top:2px solid #2dd;
	border-bottom:2px solid #088;
}

button:hover {
    background-color: #1cc;
}


h2 {
	clear:both; 
	/*background:url('bg_h2.jpg') center center #000; */
	/*background-image: linear-gradient(0deg, rgba(68, 68, 68, 1), rgba(69, 57, 57, 1) 0%, rgba(0, 0, 0, 1) 32% 72%, rgba(61, 61, 61, 1) 99%);*/
	/*color:#fe8;*/
	color:#fff;
	border:1px solid #fff; text-align:center; margin:2em 0 1em; padding:0.3em 0 0.5em; box-shadow:0 3px 5px #933;
	font-family: "Noto Serif JP", serif;
	font-optical-sizing: auto;
	font-weight: 900;
	font-style: normal; 
	font-size: 1.5em; 
	border-radius: 12px;
	display:block;
	width: 100%;
}

.genre-fashion {
    background-color:#6b6; /* ファッションの見出し */
}

.genre-fashion-goods {
    background-color:#485; /* ファッショングッズの見出し */
}

.genre-goods-hobby {
    background-color:#48b; /* 雑貨・ホビーの見出し */
    font-weight: bold;
}

.genre-gourmet {
    background-color:#c94; /* グルメの見出し */
}




#productList {
    display: flex;
    flex-wrap: wrap; /* 複数行に折り返す */
	justify-content: flex-start;
    margin-top: 20px; /* 見出しとの間隔 */
}

.product-box {
    flex: 0 1 calc(50% - 10px);
    margin-bottom: 20px; /* 下の余白 */
    border: 1px solid #ccc;
    padding: 1em;
    display: flex;
    flex-direction: column; /* 縦に並べる */
    align-items: center; /* 中央に寄せる */
	justify-content: space-between;
}

.product-link {
    display: flex;
	flex-grow: 1;
    text-decoration: none;
    color: inherit; /* 親要素の色を継承 */
}

.inner {
    border: 5px double #a94;
	border-radius: 10px;
    margin: 0.5em 0.3em;
    padding: 1em;
	box-shadow:1px 3px 5px #933;
    background-color: #fff;
}


h3 { margin:1em 0; font-family: "Noto Serif JP", serif;
	font-optical-sizing: auto;
	font-size:1.2em;
	font-weight: 900;
 }


.reservation-open { padding:0.3em 0.5em 0.2em; background-color: #e63; color:#fff; 
border-radius: 5px; font-size:12px; border:2px solid #f96; box-shadow:0px 1px 2px #666; font-weight:bold; }

.reservation-in-store { padding:0.3em 0.5em 0.2em; background-color: #36a; color:#fff; 
border-radius: 5px; font-size:12px; border:2px solid #9ad; box-shadow:0px 1px 2px #666; font-weight:bold; }

.product-image {
    width: 100%; /* 幅を100%に設定 */
    height: auto; /* 高さを自動に設定 */
    object-fit: cover; /* 縦横比を保ちながらカバー */
    margin-bottom: 1em; /* 画像とテキストの間隔 */
	border:1px solid #ddd;
}

.product-info {
   flex-grow: 1; /* 残りのスペースを占有 */
    display: flex;
    flex-direction: column; /* 縦に並べる */
    justify-content: flex-end; /* 下に揃える */
    flex-grow: 1; /* 残りのスペースを占める */
	width:100%;
}

.price { text-align:right; color:#c00; margin:0.5em 0; }

.store-name span { background-color:#0bb; color:#fff; padding:0.3em 0.4em 0.1em; border-radius:5px; } /* 階数 */
.store-name a { color:#027; text-decoration:none; }
.store-name a:hover { color:#34c; }
.store-name a:visited { color:#027; }

.sold-out {
    color: red;
    font-weight: bold;
}

/* ページトップ */
#page-top { position: fixed; bottom: 20px; right: 20px; }
#page-top a { display: block; background:url('pagetop.png') no-repeat; text-indent:100%; white-space:nowrap; overflow:hidden; width:60px; height:60px; filter: alpha(opacity=80); -moz-opacity:0.8; opacity:0.8; }
#page-top a:hover { filter: alpha(opacity=100); -moz-opacity:1; opacity:1; }


footer { text-align:center; margin-top:2em; }
footer #logo { background:#fff; padding:3em; }
footer #logo img { width:300px; }
footer #copyright { background:#ccc; color:#003; font:16px bold; padding:1em; }


/* デスクトップ表示でのスタイル */
@media (min-width: 768px) {
  .main-content {
    /* デスクトップで見た目を変えたい場合 */
    height: 95%; /* 高さを少し短くする */
  }
}