/* mhsp2.css — スマホ用の追加 CSS。スマホのスタイルシート（func07、上限10万文字）が満杯のため 2026-10-24 から追加分はここに置く。FTP /docs/resource/css/mhsp2.css、読み込みはアクセス集計タグ設定の 1 行。セレクタはスマホの #contents 構造に限定。 */
/* mhpd v1.8 2026-10-24 スマホ 会員ID・パスワードがわからない場合（/CART/smp_forget.php）。ユーザー依頼「デザインと UI/UX を改善」。
   案内文の 4 コマ漫画は 会員機能 › マイページ設定 PwdIdGuidance から外した（PC と共通の文）。
   ・2 つのフォームを白いカードに、見出しを紺＋金の縦線、2 つ目の見出しは案内文と合わせて「パスワードの再発行」に
   ・入力欄 46px、姓・名は横並び、補足（全角・半角数字）は小さく
   ・仮パスワードの説明は 3 段の手順に詰める（<br><br> の空行を消す）
   ・ボタンは紺の主ボタンを全幅、「ログイン画面に戻る」は文字リンク、最下部は「困ったときは」と重ならないよう余白
   左波かっこの直後は必ず空白。 */
#contents:has(input[name="PwdAccount"]) { padding-bottom: 90px; }
#contents:has(input[name="PwdAccount"]) > section > p.info { margin: 12px 16px 4px !important; font-size: 14px !important; line-height: 1.7 !important; color: #4a5060; text-align: left; }
#contents:has(input[name="PwdAccount"]) > section > p.info img { display: none !important; }
#contents:has(input[name="PwdAccount"]) .formbox { margin: 14px 16px !important; padding: 0 0 18px !important; border: 1px solid #e3e0d8 !important; border-radius: 12px !important; background: #fff !important; box-shadow: 0 2px 8px rgba(2, 32, 104, .05); text-align: left !important; }
#contents:has(input[name="PwdAccount"]) .formbox_n { margin: 6px 16px 0 !important; padding: 0 !important; text-align: center !important; }
#contents:has(input[name="PwdAccount"]) .formbar { margin: 0 !important; padding: 16px 18px 6px !important; background: none !important; border: 0 !important; }
#contents:has(input[name="PwdAccount"]) .formbar h3 { margin: 0 !important; padding: 0 0 0 10px !important; border: 0 !important; border-left: 4px solid #c2a849 !important; background: none !important; color: #022068 !important; font-family: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Noto Serif JP", serif; font-size: 18px !important; font-weight: 600 !important; line-height: 1.5 !important; }
#contents:has(input[name="PwdAccount"]) section:has(input[name="PwdAccount"]) .formbar h3 { font-size: 0 !important; }
#contents:has(input[name="PwdAccount"]) section:has(input[name="PwdAccount"]) .formbar h3:before { content: "パスワードの再発行"; font-size: 18px; }
#contents:has(input[name="PwdAccount"]) .formbox > section > p.info { box-sizing: border-box; width: auto !important; margin: 6px 18px 0 !important; padding: 10px 12px; border-radius: 8px; background: #f1f3fa; color: #1d2433; font-size: 13px !important; line-height: 1.7 !important; text-align: left; }
#contents:has(input[name="PwdAccount"]) .formbox > section > p.info br + br { display: none; }
#contents:has(input[name="PwdAccount"]) .formcontents { width: auto !important; margin: 0 !important; padding: 0 18px !important; }
#contents:has(input[name="PwdAccount"]) .formcontents dl { width: auto !important; margin: 0 !important; }
#contents:has(input[name="PwdAccount"]) .formcontents dd { margin: 14px 0 0 !important; text-align: left !important; }
#contents:has(input[name="PwdAccount"]) .form_t > p { margin: 0 0 6px !important; padding: 0 !important; border: 0 !important; background: none !important; color: #1d2433 !important; font-size: 14px !important; font-weight: 700; }
#contents:has(input[name="PwdAccount"]) .form_t > p:before, #contents:has(input[name="PwdAccount"]) .form_t > p:after { display: none !important; }
#contents:has(input[name="PwdAccount"]) .input_l { display: flex; gap: 8px; }
#contents:has(input[name="PwdAccount"]) .input_l input { box-sizing: border-box; flex: 1; width: 100% !important; min-width: 0; height: 46px !important; margin: 0 !important; padding: 8px 12px !important; border: 1px solid #c9c4b8 !important; border-radius: 8px !important; background: #fff !important; color: #1d2433 !important; font-size: 16px !important; }
#contents:has(input[name="PwdAccount"]) .input_l input:focus { outline: none; border-color: #022068 !important; box-shadow: 0 0 0 3px rgba(2, 32, 104, .15); }
#contents:has(input[name="PwdAccount"]) .text_s { display: block; margin: 4px 0 0; color: #6b7280 !important; font-size: 12px !important; }
#contents:has(input[name="PwdAccount"]) .formcontents .button { margin: 18px 0 0 !important; }
#contents:has(input[name="PwdAccount"]) .formcontents .btg_r { display: block !important; }
#contents:has(input[name="PwdAccount"]) .formcontents .btg_r input { display: block !important; box-sizing: border-box; width: 100% !important; height: auto !important; padding: 15px 12px !important; border: 0 !important; border-radius: 8px !important; background: #022068 !important; box-shadow: 0 2px 0 #c2a849 !important; color: #fff !important; font-size: 16px !important; font-weight: 700; }
/* /mhpd v1.8 */

/* mhlist-sp v1 2026-10-24 スマホ 商品一覧（/smp/list.php：カテゴリ・商品グループ・全商品）。ユーザー指摘「見え方がだいぶバグっている」。
   原因：全商品の .box が 1 つの <li> に入り、テーマの inline-block・幅 49% の並びが崩れて 1 行に 1 つ・幅半分で左に寄っていた。
   ・li を 2 列の格子に、カードは幅いっぱい・白地・角丸
   ・写真は正方形で全体表示、商品名は 2 行まで、価格は左寄せの紺の太字、定価は小さく取り消し線
   ・★は小さく、「お気に入りに追加」は控えめな文字ボタン
   左波かっこの直後は必ず空白。 */
#contents .cataloglist {
  padding: 0 12px;
}
#contents .cataloglist ul.clearof {
  display: block !important;
  margin: 8px 0 20px !important;
  padding: 0 !important;
  font-size: 14px;
  list-style: none;
}
#contents .cataloglist ul.clearof > li {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 10px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
  background: none !important;
  border: 0 !important;
  width: auto !important;
}
#contents .cataloglist .box {
  display: flex !important;
  flex-direction: column;
  box-sizing: border-box;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 0 10px !important;
  border: 1px solid #e3e0d8 !important;
  border-radius: 10px !important;
  background: #fff !important;
  overflow: hidden;
}
#contents .cataloglist .box > a:first-child {
  display: block;
  aspect-ratio: 1 / 1;
  background: #f7f5f0;
}
#contents .cataloglist .box .catalogimg {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  border: 0 !important;
}
#contents .cataloglist .bg {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 8px 10px 0 !important;
  text-align: left !important;
  background: none !important;
}
#contents .cataloglist .itemname {
  margin: 0 0 6px !important;
  padding: 0 !important;
  color: #1d2433 !important;
  font-size: 13px !important;
  font-weight: 600;
  line-height: 1.45 !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#contents .cataloglist .original_price, #contents .cataloglist .list_price {
  margin: 0 !important;
  color: #8a8f99 !important;
  font-size: 11px !important;
  text-align: left !important;
  text-decoration: line-through;
}
#contents .cataloglist .initial_price, #contents .cataloglist .sales_price, #contents .cataloglist .price > div {
  text-align: left !important;
}
#contents .cataloglist .initial_price {
  margin: 0 !important;
  color: #022068 !important;
  font-size: 14px !important;
  font-weight: 700;
}
#contents .cataloglist .recommend {
  display: block;
  margin: 4px 0 0 !important;
  color: #8a6d1d !important;
  font-size: 11px !important;
  text-align: left !important;
}
#contents .cataloglist .recommend img {
  width: 11px !important;
  height: 11px !important;
}
#contents .cataloglist .wish_area {
  margin: auto 0 0 !important;
  padding: 8px 0 0 !important;
  text-align: left !important;
}
#contents .cataloglist .wish_area .wish_add, #contents .cataloglist .wish_area .wish_add_ok {
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 4px 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: #143994 !important;
  font-size: 12px !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}
#contents .cataloglist .wish_area .wish_add:before {
  content: "\2661\00a0";
  text-decoration: none;
}
#contents .product_search .sort {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px !important;
  font-size: 13px;
  color: #4a5060;
}
#contents .product_search .sort br {
  display: none;
}
#contents .product_search select {
  height: 38px;
  padding: 0 10px;
  border: 1px solid #c9c4b8;
  border-radius: 8px;
  background: #fff;
  font-size: 14px;
}
/* /mhlist-sp v1 */

/* mhsm v1 2026-10-24 スマホ サイトマップ（/smp/sitemap.php）。ユーザー依頼「かっこよく見やすく」。
   HTML はショップサーブの自動生成なので CSS だけ。サイトマップだけに効くよう「商品一覧（type=pickup）」と「フリーページ一覧」の両方を含む #contents に限定。
   ・商品を選ぶ：商品一覧（紺）とイチオシ（白）の 2 ボタン
   ・中身が「全体」1 行だけのカテゴリは、押せるカードにして 2 列（カード全体が「全体」へのリンク）。左の色線で温度帯を区別
   ・果実別カテゴリーは丸いボタンの並び、コンテンツ一覧は 1 行ずつの白いリスト
   ・折りたたみは使わず常に開いた状態（default.js の開閉より !important が勝つ）
   カテゴリの名前・並び・リンク先は変えていない。左波かっこの直後は必ず空白。 */
#contents:has(a[href*="type=pickup"]):has(a[href*="freepage_index.php"]) { padding-bottom: 90px; background: #faf8f3; }
#contents:has(a[href*="type=pickup"]):has(a[href*="freepage_index.php"]) section.titlebar_list { margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; }
#contents:has(a[href*="type=pickup"]):has(a[href*="freepage_index.php"]) .title h1,
#contents:has(a[href*="type=pickup"]):has(a[href*="freepage_index.php"]) section.titlebar_list:has(.accordion li:only-child)::before { display: block; margin: 22px 16px 10px !important; padding: 0 0 0 10px !important; border: 0 !important; border-left: 4px solid #c2a849 !important; background: none !important; color: #022068 !important; font-size: 18px !important; font-weight: 700 !important; line-height: 1.5 !important; }
/* 商品を選ぶ：2 ボタン */
#contents:has(a[href*="type=pickup"]):has(a[href*="freepage_index.php"]) ul.listmenu:has(a[href*="type=pickup"]) { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 16px !important; padding: 0 !important; border: 0 !important; background: none !important; }
#contents:has(a[href*="type=pickup"]):has(a[href*="freepage_index.php"]) ul.listmenu:has(a[href*="type=pickup"]) li { margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; list-style: none; }
#contents:has(a[href*="type=pickup"]):has(a[href*="freepage_index.php"]) ul.listmenu:has(a[href*="type=pickup"]) a { display: flex !important; align-items: center; justify-content: center; height: 52px; padding: 0 8px !important; border: 1.5px solid #022068 !important; border-radius: 26px !important; background: #fff !important; color: #022068 !important; font-size: 16px !important; font-weight: 700 !important; text-decoration: none !important; }
#contents:has(a[href*="type=pickup"]):has(a[href*="freepage_index.php"]) ul.listmenu:has(a[href*="type=pickup"]) a[href*="type=pickup"] { background: #022068 !important; color: #fff !important; }
#contents:has(a[href*="type=pickup"]):has(a[href*="freepage_index.php"]) ul.listmenu:has(a[href*="type=pickup"]) a::after,
#contents:has(a[href*="type=pickup"]):has(a[href*="freepage_index.php"]) ul.listmenu:has(a[href*="type=pickup"]) a::before { display: none !important; }
/* カテゴリ：2 列のカード */
#contents:has(a[href*="type=pickup"]):has(a[href*="freepage_index.php"]) section.titlebar_list:has(.accordion li:only-child) { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 16px !important; }
#contents:has(a[href*="type=pickup"]):has(a[href*="freepage_index.php"]) section.titlebar_list:has(.accordion li:only-child)::before { content: "カテゴリから探す"; grid-column: 1 / -1; margin: 22px 0 0 !important; }
#contents:has(a[href*="type=pickup"]):has(a[href*="freepage_index.php"]) .accordion:has(li:only-child) { position: relative; display: flex; align-items: center; min-height: 64px; margin: 0 !important; padding: 0 30px 0 14px !important; border: 1px solid #e3e0d8 !important; border-left: 5px solid #8a6a45 !important; border-radius: 12px !important; background: #fff !important; box-shadow: 0 2px 6px rgba(2, 32, 104, .05); }
#contents:has(a[href*="type=pickup"]):has(a[href*="freepage_index.php"]) .accordion:has(a[href*="mcat=215327"]) { border-left-color: #022068 !important; }
#contents:has(a[href*="type=pickup"]):has(a[href*="freepage_index.php"]) .accordion:has(a[href*="mcat=215326"]) { border-left-color: #5b8fc7 !important; }
#contents:has(a[href*="type=pickup"]):has(a[href*="freepage_index.php"]) .accordion:has(a[href*="mcat=230876"]) { border-left-color: #b03a2e !important; }
#contents:has(a[href*="type=pickup"]):has(a[href*="freepage_index.php"]) .accordion:has(a[href*="mcat=239408"]) { border-left-color: #c2a849 !important; }
#contents:has(a[href*="type=pickup"]):has(a[href*="freepage_index.php"]) .accordion:has(li:only-child)::after { content: "›"; position: absolute; right: 12px; top: 50%; transform: translateY(-52%); color: #022068; font-size: 22px; line-height: 1; pointer-events: none; }
#contents:has(a[href*="type=pickup"]):has(a[href*="freepage_index.php"]) .accordion:has(li:only-child) .titlebar { margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; }
#contents:has(a[href*="type=pickup"]):has(a[href*="freepage_index.php"]) .accordion:has(li:only-child) .titlebar h1 { margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; color: #1d2433 !important; font-size: 15px !important; font-weight: 700 !important; line-height: 1.4 !important; }
#contents:has(a[href*="type=pickup"]):has(a[href*="freepage_index.php"]) .accordion .titlebar h1::after,
#contents:has(a[href*="type=pickup"]):has(a[href*="freepage_index.php"]) .accordion .titlebar h1::before { display: none !important; }
#contents:has(a[href*="type=pickup"]):has(a[href*="freepage_index.php"]) .accordion:has(li:only-child) aside { display: block !important; position: static !important; margin: 0 !important; padding: 0 !important; border: 0 !important; }
#contents:has(a[href*="type=pickup"]):has(a[href*="freepage_index.php"]) .accordion:has(li:only-child) ul.listmenu,
#contents:has(a[href*="type=pickup"]):has(a[href*="freepage_index.php"]) .accordion:has(li:only-child) li { margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; }
#contents:has(a[href*="type=pickup"]):has(a[href*="freepage_index.php"]) .accordion:has(li:only-child) li a { position: absolute !important; inset: 0; z-index: 2; display: block !important; padding: 0 !important; border: 0 !important; background: none !important; color: transparent !important; font-size: 0 !important; }
#contents:has(a[href*="type=pickup"]):has(a[href*="freepage_index.php"]) .accordion:has(li:only-child) li a::after,
#contents:has(a[href*="type=pickup"]):has(a[href*="freepage_index.php"]) .accordion:has(li:only-child) li a::before { display: none !important; }
/* 果実別カテゴリー：丸いボタン */
#contents:has(a[href*="type=pickup"]):has(a[href*="freepage_index.php"]) .accordion:has(a[href*="group="]) { grid-column: 1 / -1; margin: 12px 0 0 !important; padding: 0 !important; border: 0 !important; background: none !important; }
#contents:has(a[href*="type=pickup"]):has(a[href*="freepage_index.php"]) .accordion:has(a[href*="group="]) .titlebar,
#contents:has(a[href*="type=pickup"]):has(a[href*="freepage_index.php"]) .accordion:has(a[href*="freepage_index.php"]) .titlebar { margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; pointer-events: none; }
#contents:has(a[href*="type=pickup"]):has(a[href*="freepage_index.php"]) .accordion:has(a[href*="group="]) .titlebar h1 { margin: 10px 0 10px !important; padding: 0 0 0 10px !important; border: 0 !important; border-left: 4px solid #c2a849 !important; background: none !important; color: #022068 !important; font-size: 18px !important; font-weight: 700 !important; }
#contents:has(a[href*="type=pickup"]):has(a[href*="freepage_index.php"]) .accordion:has(a[href*="group="]) aside { display: block !important; margin: 0 !important; padding: 0 !important; border: 0 !important; }
#contents:has(a[href*="type=pickup"]):has(a[href*="freepage_index.php"]) .accordion:has(a[href*="group="]) ul.listmenu { display: flex !important; flex-wrap: wrap; gap: 8px; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; }
#contents:has(a[href*="type=pickup"]):has(a[href*="freepage_index.php"]) .accordion:has(a[href*="group="]) li { margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; width: auto !important; }
#contents:has(a[href*="type=pickup"]):has(a[href*="freepage_index.php"]) .accordion:has(a[href*="group="]) li a { display: inline-block !important; padding: 9px 16px !important; border: 1px solid #c9c4b8 !important; border-radius: 22px !important; background: #fff !important; color: #1d2433 !important; font-size: 15px !important; line-height: 1.3 !important; text-decoration: none !important; }
#contents:has(a[href*="type=pickup"]):has(a[href*="freepage_index.php"]) .accordion:has(a[href*="group="]) li a::after,
#contents:has(a[href*="type=pickup"]):has(a[href*="freepage_index.php"]) .accordion:has(a[href*="group="]) li a::before { display: none !important; }
/* コンテンツ一覧：見出しは上の「コンテンツを見る」に任せ、白いリストに */
#contents:has(a[href*="type=pickup"]):has(a[href*="freepage_index.php"]) .accordion:has(a[href*="freepage_index.php"]) { margin: 0 16px !important; padding: 0 !important; border: 1px solid #e3e0d8 !important; border-radius: 12px !important; overflow: hidden; background: #fff !important; }
#contents:has(a[href*="type=pickup"]):has(a[href*="freepage_index.php"]) .accordion:has(a[href*="freepage_index.php"]) .titlebar { display: none !important; }
#contents:has(a[href*="type=pickup"]):has(a[href*="freepage_index.php"]) .accordion:has(a[href*="freepage_index.php"]) aside { display: block !important; margin: 0 !important; padding: 0 !important; border: 0 !important; }
#contents:has(a[href*="type=pickup"]):has(a[href*="freepage_index.php"]) .accordion:has(a[href*="freepage_index.php"]) ul.listmenu { margin: 0 !important; padding: 0 !important; border: 0 !important; }
#contents:has(a[href*="type=pickup"]):has(a[href*="freepage_index.php"]) .accordion:has(a[href*="freepage_index.php"]) li { margin: 0 !important; border: 0 !important; border-bottom: 1px solid #eee9de !important; background: none !important; }
#contents:has(a[href*="type=pickup"]):has(a[href*="freepage_index.php"]) .accordion:has(a[href*="freepage_index.php"]) li:last-child { border-bottom: 0 !important; }
#contents:has(a[href*="type=pickup"]):has(a[href*="freepage_index.php"]) .accordion:has(a[href*="freepage_index.php"]) li a { display: block !important; padding: 15px 16px !important; color: #1d2433 !important; font-size: 15px !important; text-decoration: none !important; }
#contents:has(a[href*="type=pickup"]):has(a[href*="freepage_index.php"]) section.titlebar_list, #contents:has(a[href*="type=pickup"]):has(a[href*="freepage_index.php"]) ul.listmenu, #contents:has(a[href*="type=pickup"]):has(a[href*="freepage_index.php"]) .accordion { box-sizing: border-box !important; max-width: 100% !important; }
#contents:has(a[href*="type=pickup"]):has(a[href*="freepage_index.php"]) section.titlebar_list:has(.accordion li:only-child) { width: auto !important; }
#contents:has(a[href*="type=pickup"]):has(a[href*="freepage_index.php"]) ul.listmenu:has(a[href*="type=pickup"]) { width: auto !important; }
#contents:has(a[href*="type=pickup"]):has(a[href*="freepage_index.php"]) .accordion:has(li:only-child) { width: auto !important; min-width: 0; }
#contents:has(a[href*="type=pickup"]):has(a[href*="freepage_index.php"]) .title { margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; }
/* /mhsm v1 */
/* 商品グループのヘッダの説明文（itemgroup.php のグループ専用ヘッダ、2026-10-24 ブルーベリー） */
#contents .mh-group-lead {
  margin: 12px 16px 4px;
  color: #4a5060;
  font-size: 13px;
  line-height: 1.7;
}