@charset "UTF-8";
/* ベース */
@import url("https://fonts.googleapis.com/css2?family=Hachi+Maru+Pop&family=Kiwi+Maru:wght@300;400;500&display=swap");
:root {
  --color-white: #fff;
  --color-white-rgb: 255, 255, 255;
  --color-black-0: #000;
  --color-black-0-rgb: 0, 0, 0;
  --color-black: #666;
  --color-black-rgb: 102, 102, 102;
  --color-main: #2e8b57;
  --color-main-rgb: 46, 139, 87;
  --color-main_sub: #1f5a40;
  --color-main_sub-rgb: 31, 90, 64;
  --color-accent: #e4c65b;
  --color-accent-rgb: 228, 198, 91;
  --color-accent_sub: #bfbfbf;
  --color-accent_sub-rgb: 191, 191, 191;
  --color-highlight: #b44b4b;
  --color-highlight-rgb: 180, 75, 75;
  --color-green_sub: #7aa87a;
  --color-green_sub-rgb: 122, 168, 122;
  --color-background: #f5f2e9;
  --color-background-rgb: 245, 242, 233;
  --color-background_sub: #ebe8df;
  --color-background_sub-rgb: 235, 232, 223;
  --font-base: "Kiwi Maru", "-apple-system", "BlinkMacSystemFont", "Hiragino Kaku Gothic ProN", "YuGothic", "游ゴシック体", "YuGothicMedium", "Yu Gothic", "游ゴシック", "Meiryo", sans-serif;
  --font-min: "Noto Serif JP", "游明朝", "YuMincho", "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "BIZUDMincho", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", "seri";
  --font-red: "Red Hat Display", monospace;
  --space-margin: 120px;
  --space-margin_sub: 60px;
  --space-padding: 40px;
  --space-padding_sub: 20px;
}
@media only screen and (max-width: 860px) {
  :root {
    --space-margin: 16vw;
    --space-margin_sub: 8vw;
    --space-padding: 4vw;
    --space-padding_sub: 2vw;
  }
}

/************************************************
 ブラウザリセット
************************************************ */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
}

table, caption, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  border-collapse: collapse;
  border-spacing: 0px;
  empty-cells: show;
  text-align: left;
  font-weight: normal;
}

a img, iframe {
  border: none;
}

ol, ul, li {
  list-style: none;
}

input, textarea, select, button {
  font-size: 100%;
  font-family: inherit;
}

/* Headings */
/* ============================================ */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
}

/* Vertical rhythm */
/* ============================================ */
p,
table,
blockquote,
address,
pre,
iframe,
form,
figure,
dl {
  margin: 0;
}

.pc_none, .sp {
  display: none;
}
@media only screen and (max-width: 860px) {
  .pc_none, .sp {
    display: block;
  }
}

@media only screen and (max-width: 860px) {
  .sp_none, .pc {
    display: none;
  }
}

@media only screen and (max-width: 860px) {
  .pc_contents {
    display: none;
  }
}

.sp_contents {
  display: none;
}
@media only screen and (max-width: 860px) {
  .sp_contents {
    display: block;
  }
}

.no_link {
  display: none;
}

:root {
  font-size: 62.5%;
}
@media only screen and (max-width: 860px) {
  :root {
    font-size: 62.5%;
  }
}

* {
  box-sizing: border-box;
}

img {
  vertical-align: middle;
  max-width: 100%;
  height: auto;
}

svg {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

a {
  color: inherit;
  text-decoration: none;
}
a:hover {
  opacity: 0.6;
}

@media only screen and (min-width: 861px) {
  button:hover {
    opacity: 0.6;
  }
}

ul,
ol {
  list-style: none;
}

dt {
  font-weight: normal;
}

body {
  position: relative;
  font-feature-settings: "palt" 1;
  font-kerning: none;
  font-family: var(--font-base);
  font-weight: 400;
  color: var(--color-black);
  margin-left: auto;
  margin-right: auto;
  background-color: var(--color-white);
  letter-spacing: 0.1em;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}
@media only screen and (max-width: 860px) {
  body {
    max-width: none;
    min-width: auto;
    letter-spacing: 0.04em;
  }
}
@media only screen and (max-width: 860px) {
  body.fixed {
    width: 100%;
    height: 100%;
    position: fixed;
  }
}

.el_preload {
  display: none;
}

/* ==============================================
 フレーム
=============================================== */
/* 全体を包括 */
.frame_outer {
  margin: 0 auto;
  width: 100%;
  text-align: center;
}

/* コンテンツ */
#container {
  margin: 0 auto;
  width: 100%;
  max-width: 1480px;
  padding: var(--head-h) var(--space-padding) 0;
  background: #fff;
  text-align: left;
}
@media only screen and (max-width: 860px) {
  #container {
    padding: var(--space-padding) var(--space-padding) 0;
  }
}

.LC_Page_Index #container {
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
  max-width: none;
}

/* ==============================================
 カラム指定
=============================================== */
/* メイン部
----------------------------------------------- */
#main_column {
  /* 1カラム時 */
  /* 2カラム時 (共通) */
}
#main_column.colnum1 {
  margin: 0 auto;
}
#main_column.colnum2 {
  /* 2カラム時 (メイン部が左) */
  /* 2カラム時 (メイン部が右) */
}
#main_column.colnum2.left {
  padding-left: 1.5%;
  float: left;
}
/* サイドカラム
----------------------------------------------- */
#rightcolumn {
  float: right;
  width: 20%;
}

/* 他
----------------------------------------------- */
/* ヘッダーとフッターの上下 */
#topcolumn,
#bottomcolumn,
#footerbottomcolumn {
  margin: 0px;
  background: #fff;
  text-align: left;
  clear: both;
}

/* 下層コンテンツ */
#undercolumn {
  font-size: 1.6rem;
}

/* ==============================================
 ユーティリティ
=============================================== */
/* フロート回り込み解除
----------------------------------------------- */
.clearfix:after {
  display: block;
  clear: both;
  height: 0px;
  line-height: 0px;
  visibility: hidden;
  content: ".";
}

.clear {
  clear: both;
}

/* リンク指定
----------------------------------------------- */
a:link, a:visited {
  text-decoration: none;
}
@media only screen and (min-width: 861px) {
  a:link:hover, a[href]:hover {
    text-decoration: underline;
    opacity: 0.5;
  }
}

/* フォント
----------------------------------------------- */
.sale_price {
  color: #f00;
}

.normal_price {
  font-size: 90%;
}

.point {
  color: #f00;
  font-weight: bold;
}

.user_name {
  font-weight: bold;
}

.recommend_level {
  color: #ecbd00;
}

.attention {
  color: #f00;
}

.attentionSt {
  color: #f00;
  font-weight: bold;
}

.st {
  font-weight: bold;
}

.mini {
  font-size: 90%;
}

/* 行揃え
----------------------------------------------- */
.alignC {
  text-align: center;
}

.alignR {
  text-align: right;
}

.alignL {
  text-align: left;
}

.pricetd em {
  font-weight: bold;
}

/* フォーム
----------------------------------------------- */
select {
  border: solid 1px var(--color-accent_sub);
}

input[type=text], input[type=password] {
  border: solid 1px var(--color-accent_sub);
}

.box40 {
  width: 40px;
}

.box60 {
  width: 60px;
}

.box100 {
  width: 100px;
}

.box120 {
  width: 120px;
}

.box140 {
  width: 140px;
}

.box145 {
  width: 145px;
}

.box150 {
  width: 150px;
}

.box240 {
  width: 240px;
}

.box300 {
  width: 300px;
}

.box320 {
  width: 320px;
}

.box350 {
  width: 350px;
}

.box380 {
  width: 380px;
}

/* フォームが縦に重なり合う場合に併用する余白 */
/* FIXME 簡素な単語は、単独で、込み入った指定に使用しない */
.top {
  margin-bottom: 5px;
}

/* タイトル
----------------------------------------------- */
h2.title {
  margin-bottom: 0.5em;
  padding: 0.5em 1em;
  color: var(--color-accent);
  background-color: var(--color-background);
  font-size: 1.7em;
}

#main_column .sub_area h3,
#undercolumn_login .login_area h3,
#undercolumn_shopping h3,
#mypagecolumn h3,
#undercolumn_cart h3 {
  margin: 0 0 10px 0;
  padding: 5px 0 10px;
  color: #f60;
  background: url("img/background/line_01.gif") repeat-x left bottom;
  font-size: 120%;
}

#undercolumn_login .login_area h4 {
  padding-left: 15px;
  background: url("img/icon/ico_arrow_05.gif") no-repeat left;
}

/* ==============================================
 ヘッダー
=============================================== */
/* レイアウト
----------------------------------------------- */
#header {
  margin: auto;
  padding: 10px 0;
}

.header__menu__logo {
  margin: auto;
  width: 134px;
}

#header a {
  align-items: center;
  aspect-ratio: 1/1;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  display: flex;
  flex-flow: row nowrap;
  height: auto;
  justify-content: center;
  transition: opacity 0.35s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
  width: 100%;
}

/* ロゴ
----------------------------------------------- */
#site_description {
  font-size: 80%;
}

/* ==============================================
 フッター
=============================================== */
#footer {
  text-align: center;
}

#pagetop {
  width: 210px;
  float: right;
  text-align: right;
}

#copyright {
  text-align: center;
}

/* ==============================================
 パーツ
=============================================== */
/* ボタン
----------------------------------------------- */
.btn_area {
  margin-top: 10px;
  width: 100%;
  text-align: center;
}
.btn_area li {
  padding-right: 10px;
  display: inline;
}

/* 完了メッセージ
----------------------------------------------- */
div#complete_area {
  margin-bottom: 20px;
}
div#complete_area .message {
  margin-bottom: 20px;
  line-height: 150%;
  font-weight: bold;
  font-size: 120%;
}
div#undercolumn_entry .message {
  margin-bottom: 20px;
  line-height: 150%;
  font-weight: bold;
  font-size: 120%;
}
div#complete_area .shop_information {
  margin-top: 40px;
  padding: 20px 0 0 0;
  border-top: solid 1px #ccc;
}
div#complete_area .shop_information .name {
  margin-bottom: 10px;
  font-weight: bold;
  font-size: 140%;
}

/************************************************
 各ページコンテンツ用
************************************************ */
/* ==============================================
▼TOP
=============================================== */
/* メインイメージ
----------------------------------------------- */
#main_image {
  margin-bottom: 10px;
  text-align: center;
}

/* ==============================================
▼下層
=============================================== */
/* ==============================================
▼ガイド
=============================================== */
/* ◎◎について
----------------------------------------------- */
/* 特定商取引法
----------------------------------------------- */
/* お問い合わせ
----------------------------------------------- */
#undercolumn_contact {
  margin: 0 auto;
  width: 100%;
}

.zipimg img {
  vertical-align: middle;
}

/* ==============================================
▼MYページ
=============================================== */
/* 共通設定
----------------------------------------------- */
#mypagecolumn {
  width: 100%;
}

#mynavi_area {
  width: 100%;
}

#mycontents_area {
  width: 100%;
}

#mynavi_area .mynavi_list {
  margin-bottom: 20px;
  width: 100%;
}
#mynavi_area .mynavi_list li {
  margin: 0 15px 5px 0;
  padding-left: 15px;
  float: left;
  background: url("img/icon/ico_arrow_01.gif") no-repeat left;
  font-size: 120%;
}
#mynavi_area div.point_announce {
  margin-bottom: 30px;
  padding: 10px;
  border: solid 1px #ffcc62;
  background-color: #fffaf0;
}
#mynavi_area div.point_announce p {
  padding-left: 20px;
  background: url("img/icon/ico_point.gif") no-repeat left;
}

#mycontents_area p.inforamtion {
  margin-bottom: 20px;
}

#mypagecolumn h4 {
  margin: 10px auto;
  border-bottom: 1px solid #999;
  text-align: left;
  font-size: 120%;
}

/* 購入履歴一覧/詳細
----------------------------------------------- */
#mycontents_area div.mycondition_area {
  margin: 0 auto 20px 0;
  padding: 10px;
  border: solid 1px #ccc;
  width: 97%;
  background: #f9f9f9;
}
#mycontents_area div.mycondition_area p {
  float: left;
}
#mycontents_area div.mycondition_area .btn {
  width: 160px;
  margin-top: 15px;
  float: right;
}

.add_address {
  margin-bottom: 20px;
}

/* 会員登録内容変更/退会
----------------------------------------------- */
#mycontents_area .message_area {
  margin: 30px auto;
  padding: 30px;
  border: 1px solid #ccc;
  text-align: center;
}
#mycontents_area .message_area p {
  margin-bottom: 20px;
}

/* ==============================================
▼会員登録
=============================================== */
#undercolumn_entry {
  width: 100%;
}
#undercolumn_entry .kiyaku_text {
  margin: 20px auto;
  padding: 10px;
  border: solid 1px #ccc;
  width: 94%;
  background: #fff;
}

/* ==============================================
▼ログイン
=============================================== */
#undercolumn_login {
  margin: 0 auto;
  width: 100%;
}
#undercolumn_login .login_area {
  margin-bottom: 30px;
}
#undercolumn_login .login_area .inputbox {
  margin: 15px auto 15px auto;
  padding: 15px 20px 10px 20px;
  background: #f0f0f0;
}
#undercolumn_login .login_area .inputbox .btn_area {
  margin-top: 0;
}

/* ==============================================
▼エラー
=============================================== */
#undercolumn_error .message_area {
  width: 80%;
  margin: 30px auto;
  padding: 30px;
  border: 1px solid #ccc;
  text-align: center;
}
#undercolumn_error .message_area .error {
  padding: 120px 0;
}

/* ==============================================
▼商品一覧
=============================================== */
/* ページ送り
----------------------------------------------- */
.pagenumber_area {
  padding-bottom: 10px;
}

.pagecond_area {
  margin-bottom: 20px;
  padding: 10px;
}

.pagenumber_area {
  margin: 20px 0;
}

.pagecond_area {
  border: 1px solid #ccc;
}

.pagenumber_area .change {
  float: right;
  text-align: right;
  white-space: nowrap;
}

.navi {
  width: 100%;
  text-align: center;
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 0.5em;
}
.navi a,
.navi strong {
  padding: 0.5em;
}

/* レイアウト
----------------------------------------------- */
div.listphoto {
  justify-content: center;
  align-items: center;
  margin: 0 auto 5%;
}

/* メインカラム */
#main_column {
  /* 1カラム時 */
  /* 2カラム時 */
  /* 3カラム時 */
}
#main_column.colnum3 {
  float: right;
  width: 74%;
}

/* 商品情報 各種設定
----------------------------------------------- */
/* 商品ステータス */
div.listrightbloc {
  /* 商品名 */
  /* コメント */
  /* 商品詳細を見る */
  /* 価格 */
  /* 買い物カゴ */
  /* 規格 */
  /* カゴに入れる */
}
div.listrightbloc ul.status_icon {
  margin-bottom: 10px;
  width: 100%;
}
div.listrightbloc ul.status_icon li {
  margin-right: 5px;
  float: left;
}
div.listrightbloc h3 {
  font-size: 80%;
}
div.listrightbloc .listcomment {
  margin: 0 0 10px 0;
  text-align: left;
}
div.listrightbloc .detail_btn {
  margin-bottom: 20px;
}
div.listrightbloc .pricebox {
  margin: 0 0 10px 0;
}
div.listrightbloc .cart_area {
  padding: 10px;
  border: 1px solid #cef0f4;
  background-color: #ecf5ff;
  width: 94%;
}
div.listrightbloc .classlist {
  margin-bottom: 10px;
  padding-bottom: 10px;
  background: url("img/background/line_dot_02.gif") repeat-x bottom;
}
div.listrightbloc dl {
  width: 100%;
}
div.listrightbloc dt {
  display: inline-block;
  vertical-align: top;
}
div.listrightbloc dd {
  padding-bottom: 10px;
  display: inline-block;
}
div.listrightbloc dd p.attention {
  margin-top: 5px;
}
div.listrightbloc .cartin {
  margin: 0;
  float: right;
}
div.listrightbloc .cartin .quantity {
  padding: 3px 10px 0 0;
  width: 150px;
  float: left;
  text-align: right;
}
div.listrightbloc .cartin .quantity .box {
  width: 70px;
}
div.listrightbloc .cartin_btn {
  width: 160px;
  float: left;
}

/* ==============================================
▼商品詳細
=============================================== */
/* レイアウト

    tplファイルのマークアップが同じ項目
        * 1カラム時
        * 2カラム時
        * 3カラム時

----------------------------------------------- */
#detailarea,
.sub_area {
  margin-bottom: 20px;
  width: 100%;
}

/* レイアウト
----------------------------------------------- */
#main_column {
  /* 1カラム用 */
  /* 2カラム用 */
  /* 3カラム用 */
}
#main_column.colnum1 #detailphotobloc {
  width: 37%;
  float: left;
}
#main_column.colnum1 #detailrightbloc {
  width: 63%;
  float: right;
}
#main_column.colnum1 div.subtext {
  margin-bottom: 20px;
  float: left;
  width: 69%;
}
#main_column.colnum1 div.subphotoimg {
  float: right;
  width: 25%;
  text-align: right;
}
#main_column.colnum1 p.subtext {
  margin-bottom: 20px;
}
#main_column.colnum2 #detailphotobloc {
  float: left;
  width: 37%;
}
#main_column.colnum2 #detailrightbloc {
  float: right;
  width: 63%;
}
#main_column.colnum2 div.subtext {
  margin-bottom: 20px;
  float: left;
  width: 73%;
}
#main_column.colnum2 p.subtext {
  margin-bottom: 20px;
}
#main_column.colnum2 div.subphotoimg {
  float: right;
  width: 25%;
  text-align: right;
}
#main_column.colnum3 #detailphotobloc {
  float: left;
  width: 49%;
}
#main_column.colnum3 #detailrightbloc {
  float: right;
  width: 50%;
}
#main_column.colnum3 div.subtext {
  margin-bottom: 20px;
  float: left;
  width: 63%;
}
#main_column.colnum3 p.subtext {
  margin-bottom: 20px;
}
#main_column.colnum3 div.subphotoimg {
  float: right;
  width: 35%;
  text-align: right;
}

/* 商品情報 各種設定
----------------------------------------------- */
#detailrightbloc {
  /* 商品コード */
  /* 商品ステータス */
  /* 通常価格 */
  /* 販売価格 */
  /* ポイント */
  /* 規格 */
  /* メーカー */
  /* メーカーURL */
  /* 関連カテゴリ */
  /* 買い物カゴ */
}
#detailrightbloc h2 {
  margin: 0 0 10px 0;
  padding: 0 0 15px 0;
  color: #666;
  background: url("img/background/line_dot_01.gif") repeat-x bottom;
  font-weight: bold;
  font-size: 160%;
}
#detailrightbloc .point,
#detailrightbloc .relative_cat {
  margin: 0 0 10px 0;
  padding: 0 0 10px 0;
  background: url("img/background/line_dot_01.gif") repeat-x bottom;
}
#detailrightbloc .main_comment {
  margin-bottom: 20px;
}
#detailrightbloc .product_code dt,
#detailrightbloc .product_code dd {
  display: inline;
}
#detailrightbloc ul.status_icon {
  margin-bottom: 10px;
  width: 100%;
}
#detailrightbloc ul.status_icon li {
  margin-right: 5px;
  margin-bottom: 3px;
  float: left;
}
#detailrightbloc .normal_price dt,
#detailrightbloc .normal_price dd {
  display: inline;
}
#detailrightbloc .sale_price dt,
#detailrightbloc .sale_price dd {
  display: inline;
}
#detailrightbloc .point dt,
#detailrightbloc .point dd {
  display: inline;
}
#detailrightbloc div.classlist {
  margin-bottom: 10px;
  padding-bottom: 10px;
  width: 100%;
  background: url("img/background/line_dot_02.gif") repeat-x bottom;
}
#detailrightbloc .classlist {
  margin-bottom: 5px;
}
#detailrightbloc ul {
  margin-bottom: 10px;
  width: 100%;
}
#detailrightbloc ul li {
  vertical-align: top;
  float: left;
}
#detailrightbloc .maker dt,
#detailrightbloc .maker dd {
  display: inline;
}
#detailrightbloc .comment1 dt,
#detailrightbloc .comment1 dd {
  display: inline;
}
#detailrightbloc .relative_cat dd {
  margin-left: 1em;
}
#detailrightbloc .cart_area {
  padding: 10px;
  background-color: #ecf5ff;
  border: 1px solid #cef0f4;
}
#detailrightbloc .quantity dt,
#detailrightbloc .quantity dd {
  display: inline;
}
#detailrightbloc .cartin,
#detailrightbloc .cartin_btn {
  text-align: center;
}
#detailrightbloc .favorite_btn {
  text-align: center;
  margin-top: 10px;
}

/* お客様の声
----------------------------------------------- */
#customervoice_area {
  clear: both;
  margin-top: var(--space-margin);
}
#customervoice_area h2 {
  margin-bottom: 1em;
  padding: 1em 1em 0;
  border-top: solid 1px var(--color-accent);
}
#customervoice_area .review_bloc {
  margin-bottom: 20px;
  padding: var(--space-padding);
  background-color: var(--color-background_sub);
}
#customervoice_area .review_bloc p {
  padding-top: 3px;
  margin-right: 10px;
}
#customervoice_area .review_bloc .review_btn {
  margin-top: var(--space-margin_sub);
}
#customervoice_area ul li {
  padding-bottom: 15px;
  margin-bottom: 15px;
  background: url("img/background/line_dot_01.gif") repeat-x bottom;
}
#customervoice_area .voicetitle {
  margin-bottom: 5px;
  color: #333;
  font-weight: bold;
}
#customervoice_area .voicedate {
  margin-bottom: 10px;
}

/* 関連商品（商品部分はbloc.cssのおすすめ商品と共通）
----------------------------------------------- */
#whobought_area {
  clear: both;
  padding: 35px 0 0 0;
}
#whobought_area h2 {
  border-top: solid 1px #f90;
  background: url("img/background/bg_tit_sub_01.jpg") repeat-x left bottom;
  padding: 5px 0 8px 10px;
  font-size: 14px;
}

/* ***********************************************
▼カートの中
/*********************************************** */
/* 現在のカゴの中
----------------------------------------------- */
#undercolumn_cart .point_announce {
  padding: 20px;
  margin-bottom: 20px;
  border: solid 1px #ffcc62;
  background: #fffaf0;
  font-size: 120%;
  text-align: center;
  line-height: 140%;
}
#undercolumn_cart .totalmoney_area {
  margin-bottom: 20px;
}
#undercolumn_cart p {
  margin: 10px 5px;
}

#undercolumn ul#quantity_level li {
  padding: 3px;
  display: inline;
}
#undercolumn .empty {
  text-align: left;
}

div.form_area {
  margin-bottom: 30px;
}

/* お客様情報入力
----------------------------------------------- */
.flow_area {
  margin: 0 0 20px 0;
}

#undercolumn_customer th em {
  color: #000;
  font-weight: bold;
}

/* お支払い方法・お届け時間等の指定
----------------------------------------------- */
#undercolumn_shopping .pay_area {
  margin: 0 auto 30px;
  width: 100%;
}
#undercolumn_shopping .pay_area02 {
  margin: 40px auto 30px auto;
}
#undercolumn_shopping .pay_area02 .txtarea {
  margin: 5px 0 0 0;
  padding: 2px;
  border: 1px solid #ccc;
  width: 99%;
  height: 150px;
}
#undercolumn_shopping .pay_area02 .select-msg {
  margin-bottom: 10px;
}
#undercolumn_shopping .point_area {
  margin: 40px auto 0 auto;
}
#undercolumn_shopping .point_area .point_announce {
  padding: 20px;
  border: 1px solid #ccc;
}
#undercolumn_shopping .point_area p {
  margin-bottom: 20px;
}
#undercolumn_shopping .point_area .point_announce li {
  margin-bottom: 5px;
}

/* お届け先の指定
----------------------------------------------- */
#address_area {
  margin-bottom: 10px;
  width: 100%;
}
#address_area .information {
  width: 65%;
  float: left;
}

#undercolumn_shopping .information {
  margin-bottom: 15px;
}

#address_area .add_multiple {
  padding: 15px 10px;
  border: 1px solid #ffcc62;
  float: right;
  width: 30%;
  color: #555;
  background: #fffaf0;
  text-align: center;
  font-weight: bold;
}
#address_area .add_multiple p {
  margin-bottom: 10px;
}
#address_area p.addbtn {
  font-weight: bold;
  font-size: 10px;
}

/* ==============================================
▼検索結果
=============================================== */
p.condition_area {
  margin: 0 auto;
  padding: 5px;
  border: solid 1px #333;
  width: 566px;
}

/************************************************
 tables
************************************************ */
/* デフォルトテーブル
----------------------------------------------- */
table {
  margin: 15px auto 20px auto;
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
table th {
  padding: 8px;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  color: #333;
  background-color: #f0f0f0;
  font-weight: normal;
}
table td {
  padding: 8px;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}

/* 見出し
----------------------------------------------- */
#undercolumn_shopping table th[scope=col] {
  text-align: center;
}
#undercolumn_shopping table.delivname th {
  width: 155px;
}

/* MYページ */
#mycontents_area table th {
  text-align: left;
}
#mycontents_area table th.alignR {
  text-align: right;
}
#mycontents_area table th.alignL {
  text-align: left;
}
#mycontents_area table th.alignC {
  text-align: center;
}
#mycontents_area table th.resulttd {
  text-align: right;
}
#mycontents_area table caption {
  padding: 8px;
  border-top: 1px solid #ccc;
  border-right: 1px solid #ccc;
  border-left: 1px solid #ccc;
  color: #000;
  background-color: #f0f0f0;
  text-align: left;
  font-weight: bold;
}

/* その他
----------------------------------------------- */
table select {
  margin-bottom: 7px;
  border: solid 1px #ccc;
}

/************************************************
 ブロック用
************************************************ */
/*** 目次 ***

▼ブロック共通
リスト
タイトル
ヘッダー上、フッター下のブロックエリア

▼各機能ブロックの指定
-新着情報
-現在のカゴの中
-カテゴリ
-ガイドリンク
-ログイン（サイド用）
-検索
-カレンダー
-おすすめ商品
    * 商品詳細のオススメ商品   [whobought_area]
*/
/* ==============================================
ブロック共通
    * #container から指定することで、ヘッダー・フッターには適用していない。
/* ============================================= */
.side_column {
  overflow-x: hidden;
  /* IE6 表示乱れ防止 */
}
.side_column .block_body {
  border: solid 1px #ccc;
  border-top: none;
}

#main_column .block_body {
  border: solid 1px #ccc;
  border-top: none;
}

.side_column .block_body .box {
  border: solid 1px #ccc;
  width: 145px;
}

/* 外枠
----------------------------------------------- */
#container {
  /* リスト
    ----------------------------------------------- */
  /* ログイン 検索条件 */
}
#container .block_outer {
  /* #container の背景色を欠けさせないため敢えて padding */
}
#container #main_column .block_outer {
  padding: 0 0 20px;
}
#container .block_outer .block_body dl.formlist {
  margin-bottom: 8px;
}
#container .block_outer .block_body dl.formlist dd {
  margin-bottom: 5px;
}
#container .block_outer .block_body dl.formlist dt {
  margin-bottom: 3px;
  padding-left: 15px;
  background: url("img/icon/ico_arrow_03.gif") no-repeat left;
  font-size: 90%;
}
#container .block_outer .block_body dl.formlist span {
  vertical-align: top;
}

/* タイトル
----------------------------------------------- */
h2 {
  /* タイトルの背景 白 */
  /* タイトルの背景 オレンジ */
}
#login_area h2, #search_area h2, #calender_area h2, #cart_area h2, #cart h2 {
  padding: 5px 0 8px 10px;
  border-style: solid;
  border-color: #f90 #ccc #ccc;
  border-width: 1px 1px 0;
  background: url("img/background/bg_tit_bloc_01.jpg") repeat-x left bottom;
  font-size: 14px;
}
#category_area h2 {
  border-top: solid 1px #f90;
  background: url("img/background/bg_tit_bloc_01.jpg") repeat-x left bottom;
  padding: 5px 0 8px 10px;
  font-size: 14px;
}
#recommend_area h2, #news_area h2 {
  padding: 5px 0 8px 10px;
  border-style: solid;
  border-color: #f90 #ccc #ccc;
  border-width: 1px 1px 0;
  background: url("img/background/bg_btn_bloc_02.jpg") repeat-x left bottom #fef3d8;
}

/* ***********************************************
▼各機能ブロックの指定
/*********************************************** */
/* ===============================================
▼新着情報
=============================================== */
#news_area .news_contents {
  padding: 10px;
  max-height: 260px;
  height: auto !important;
  /* hack? */
  height: 260px;
  /* hack? */
  overflow: auto;
  overflow-y: scroll;
}
#news_area dl.newslist {
  background: url("img/background/line_dot_01.gif") repeat-x bottom;
}
#news_area dl.newslist:last-child {
  background: none;
}
#news_area dl.newslist dt {
  margin-bottom: 5px;
}
#news_area dl.newslist dd {
  margin-bottom: 10px;
  padding-bottom: 10px;
}

/* ===============================================
▼現在のカゴの中
=============================================== */
#cart_area .information {
  padding: 10px;
}
#cart_area .postage {
  margin-top: 10px;
  padding-top: 10px;
  background: url("img/background/line_dot_01.gif") repeat-x top;
}
#cart_area .postage .point_announce {
  padding: 2px 0 2px 20px;
  background: url("img/icon/ico_price.gif") no-repeat left top;
}
#cart_area .btn {
  padding: 10px 0;
  background: url("img/background/line_dot_01.gif") repeat-x top #f7f7e6;
  text-align: center;
}

/* ===============================================
▼カテゴリ
=============================================== */
#container #category_area .block_body {
  background-color: #fffaf0;
}

#category_area li {
  padding-left: 5px;
}
#category_area li.level1 {
  border-bottom: solid 1px #ccc;
}
#category_area li.level1 p {
  padding-left: 20px;
  margin: 7px 3px;
  background: url("img/icon/ico_arrow_01.gif") 2px 3px no-repeat;
}
#category_area li.level1 li p {
  background: url("img/icon/ico_level.gif") 7px 7px no-repeat;
}
#category_area li a {
  display: block;
  padding: 0;
}

a.onlink:link {
  color: var(--color-highlight);
  text-decoration: underline;
}
a.onlink:visited, a.onlink:hover {
  color: var(--color-highlight);
}

/* ===============================================
▼ログイン（サイド用）
※ヘッダー用はbloc_alpha.css内に記述
=============================================== */
#container {
  /* ===============================================
    ▼検索
    =============================================== */
}
#container #login_area .block_body {
  padding: 10px;
}
#container #login_area .block_body p {
  margin-bottom: 5px;
}
#container #login_area .block_body .btn {
  text-align: center;
}
#container .login_area dl.formlist {
  margin-bottom: 8px;
  width: 450px;
}
#container .login_area dl.formlist dt {
  margin-bottom: 3px;
  padding-left: 15px;
  color: #333;
  background: url("img/icon/ico_arrow_03.gif") no-repeat left;
  width: 120px;
  float: left;
  font-size: 90%;
}
#container .login_area dl.formlist dd {
  margin-bottom: 5px;
  float: right;
  width: 300px;
  vertical-align: bottom;
  text-align: left;
}
#container #login_area .block_body .mini {
  margin-top: 5px;
  letter-spacing: -0.01em;
}
#container #search_area .block_body {
  padding: 10px;
}
#container #search_area .block_body .btn {
  text-align: center;
}

/* ===============================================
▼カレンダー
=============================================== */
#calender_area {
  background-color: transparent;
  border: none;
}
#calender_area .block_body {
  padding: 10px 0;
  background-color: #f1f9fc;
}
#calender_area table {
  background: #fff;
  border: none;
  width: 150px;
  margin: 0 auto 5px;
  font-size: 90%;
}
#calender_area table td {
  padding: 1px 3px;
  border-top: 1px solid #ccc;
  border-right: none;
  text-align: center;
}
#calender_area th {
  padding: 1px 3px;
  background: #fff;
  border: none;
  text-align: center;
}
#calender_area table .month {
  margin-bottom: 5px;
  padding-left: 12px;
  background: url("img/icon/ico_arrow_04.gif") no-repeat left;
  font-size: 120%;
}
#calender_area .off {
  color: #f00;
}
#calender_area .today {
  background-color: #fff99d;
  font-weight: bold;
}
#calender_area .information {
  margin-left: 10px;
  font-size: 90%;
}

/* ===============================================
▼おすすめ商品
=============================================== */
/*
   tplファイルのマークアップが同じ項目
   メインカラム用
   サイドカラム用           [side_column]
   商品詳細のオススメ商品   [whobought_area]
=============================================== */
/* 共通
----------------------------------------------- */
#recommend_area .block_body,
#whobought_area .product_item {
  padding: 10px 0 10px;
  border: none;
  background: url("img/background/line_dot_01.gif") repeat-x bottom;
}

#recommend_area .block_body p,
#whobought_area .product_item p {
  margin: 0 0 5px 0;
}

#recommend_area .block_body img,
#whobought_area .product_item img {
  margin: 0 5px 0 0;
}

#recommend_area .block_body h3,
#whobought_area .product_item h3 {
  font-size: 100%;
  font-weight: normal;
}

/* サイドカラム用 */
.side_column #recommend_area .product_item {
  margin-bottom: 10px;
}

/* 画像
----------------------------------------------- */
/* メインカラム用 */
#main_column #recommend_area .block_body .productImage,
#whobought_area .product_item .productImage {
  margin-bottom: 10px;
  float: left;
  width: 90px;
}

/* サイドカラム用 */
.side_column #recommend_area .block_body .productImage {
  float: none;
  text-align: center;
  width: auto;
}

/* 左右の振り分け
----------------------------------------------- */
#main_column #recommend_area .product_item,
#whobought_area .product_item {
  float: left;
  width: 47.5%;
  padding-left: 1%;
  padding-right: 1%;
}

/* 商品説明テキスト
----------------------------------------------- */
/* メインカラム */
#main_column {
  /* 1カラム時 */
  /* 2カラム時*/
  /* 3カラム時*/
}
#main_column.colnum1 #recommend_area .block_body .productContents {
  float: right;
  width: 74%;
}
#main_column.colnum2 #recommend_area .block_body .productContents,
#main_column.colnum2 #whobought_area .productContents {
  float: right;
  width: 74%;
}
#main_column.colnum3 #recommend_area .block_body .productContents,
#main_column.colnum3 #whobought_area .productContents {
  float: right;
  width: 67%;
}

/* サイドカラム用 */
.side_column #recommend_area .block_body .productContents {
  clear: both;
}

/************************************************
 インヘッダーブロック
************************************************ */
#headerInternalColumn {
  margin-top: 5px;
  float: right;
  width: 520px;
  height: 35px;
}

/* ログイン（ヘッダー用）
----------------------------------------------- */
#header_login_area {
  padding: 0 10px;
  border: solid 1px #ffc979;
  height: 30px;
  background: #fef3d3;
  letter-spacing: -0.075em;
}
#header_login_area ul.formlist {
  margin-top: 5px;
}
#header_login_area ul.formlist li {
  float: left;
}
#header_login_area ul.formlist li.mail {
  padding-left: 28px;
  width: 155px;
  background: url("img/common/ico_arrow_login.gif") no-repeat left;
  font-size: 90%;
}
#header_login_area ul.formlist li.password {
  padding-right: 5px;
}
#header_login_area ul.formlist li.login_memory {
  padding-right: 5px;
  font-size: 90%;
}
#header_login_area ul.formlist li.forgot {
  margin-top: 3px;
  padding-right: 5px;
  font-size: 90%;
}
#header_login_area ul.formlist li.btn {
  padding-right: 5px;
  width: 53px;
}
#header_login_area p.btn {
  height: 20px;
  padding: 5px 0;
  vertical-align: middle;
}
#header_login_area p.btn input[type=image] {
  vertical-align: middle;
}

/* ***********************************************
追加ブロック
************************************************ */
/* 共通
----------------------------------------------- */
#container .block_outer #banner_area .block_body {
  border: none;
}

/* 【メイン】バナーエリア_02
----------------------------------------------- */
#main_column .block_outer #banner_area .block_body ul {
  width: 100%;
}
#main_column .block_outer #banner_area .block_body ul li {
  float: left;
}
#main_column .block_outer #banner_area .block_body ul li.sub_01 {
  padding-right: 8px;
}

/* 【サイド】バナーエリア_01
----------------------------------------------- */
/* 【サイド】バナーエリア_02
----------------------------------------------- */
#leftcolumn .block_outer #banner_area .block_body ul li,
#rightcolumn .block_outer #banner_area .block_body ul li {
  margin-bottom: 8px;
}

/************************************************
 ポップアップウィンドウ
************************************************ */
/* 共通
----------------------------------------------- */
#windowcolumn {
  border-top: solid 3px #f90;
  width: 560px;
  height: 100%;
  margin: 15px 15px 0 15px;
  background: #fff;
}
#windowcolumn h2 {
  margin-bottom: 10px;
  padding: 8px;
  border-top: solid 1px #ebeced;
  color: #f60;
  background: url("img/background/bg_tit_sub_01.jpg") repeat-x left bottom;
  background-color: #fef3d8;
  font-size: 170%;
}

#window_area {
  margin: 15px auto 0 auto;
  padding-bottom: 20px;
  width: 540px;
  min-height: 300px;
  height: auto !important;
  /* お客様の声の書き込み、新しいお届け先の追加・変更
    ----------------------------------------------- */
}
#window_area p.information {
  margin-bottom: 20px;
}
#window_area .message {
  margin-bottom: 20px;
  color: #f60;
  line-height: 150%;
  font-weight: bold;
  font-size: 140%;
}
#window_area table {
  width: 540px;
}
#window_area #forgot {
  margin: 0 auto;
  padding: 20px;
  width: 440px;
  border: 1px solid #ccc;
  text-align: left;
}
#window_area #forgot .mailaddres {
  margin-bottom: 10px;
}
#window_area #forgot p {
  text-align: center;
}

/* 商品詳細拡大写真、カート拡大写真
----------------------------------------------- */
#bigimage,
#cartimage {
  margin-top: 15px;
  background-color: #fff;
  text-align: center;
}

#bigimage img,
#cartimage img {
  padding: 10px;
  background-color: #fff;
}

/* 郵便番号検索
----------------------------------------------- */
#zipsearchcolumn {
  margin: 15px auto 0 auto;
  border-top: 5px solid #ffa85c;
  border-bottom: 5px solid #ffa85c;
  width: 460px;
  background-color: #fff;
}
#zipsearchcolumn h2 {
  margin: 0 0 15px 0;
  width: 460px;
}

#zipsearch_area {
  margin: 15px auto 0 auto;
  width: 460px;
}

#zipsearchcolumn .btn {
  margin: 15px 0 30px 0;
  text-align: center;
}

#zipsearch_area #completebox p {
  padding: 60px 5px;
  text-align: center;
}

/************************************************
 印刷用
************************************************ */
@media print {
  body {
    zoom: 75%;
  }
}
/* layout */
.ly_cont {
  margin: var(--space-margin) 0;
}

.ly_inner {
  max-width: 1480px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 var(--space-padding);
}

.ly_column2 {
  display: grid;
  grid-template-columns: 0.3fr 1fr;
  column-gap: var(--space-margin_sub);
}
@media only screen and (max-width: 860px) {
  .ly_column2 {
    display: flex;
    flex-direction: column-reverse;
    flex-wrap: wrap;
  }
}

.bl_head {
  --logo-w: 140px;
  --menu-p: 140px;
  --menu-m: 40px;
  padding: 20px;
  background-color: var(--color-white);
  position: relative;
  z-index: 10;
  position: sticky;
  top: 0;
}
@media only screen and (max-width: 860px) {
  .bl_head {
    padding: 4%;
  }
}
.bl_head.is_sc {
  --logo-w: 120px;
  --menu-m: 20px;
  filter: drop-shadow(0 5px 5px rgba(var(--color-black-rgb), 0.2));
}
.bl_head_desc {
  text-align: left;
  position: absolute;
  top: 1em;
  left: 1em;
}
@media only screen and (max-width: 860px) {
  .bl_head_desc {
    display: none;
  }
}
.bl_head_spLogo {
  display: none;
}
@media only screen and (max-width: 860px) {
  .bl_head_spLogo {
    display: block;
    width: 40%;
    margin-right: 0;
  }
}
@media only screen and (max-width: 860px) {
  .bl_head_top {
    padding-right: 5em;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
  }
}
.bl_head_btm {
  position: relative;
  font-size: 1.6rem;
  margin-top: var(--menu-m);
  transition: all ease-in 0.2s;
}
@media only screen and (max-width: 860px) {
  .bl_head_btm {
    position: fixed;
    z-index: 5;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: var(--color-main);
    margin: 0;
    color: var(--color-white);
    padding: 8% 0;
    display: none;
  }
}
.bl_head_nav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-size: 1.4rem;
  column-gap: 1em;
  color: var(--color-white);
}
@media only screen and (max-width: 860px) {
  .bl_head_nav {
    column-gap: 0.5em;
  }
}
.bl_head_nav_item {
  border-radius: 4em;
}
.bl_head_nav_item__login {
  background-color: var(--color-main);
}
.bl_head_nav_item__cart {
  background-color: var(--color-accent);
}
.bl_head_nav_icon {
  fill: var(--color-white);
  width: 2em;
}
.bl_head_nav_link {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1em 2em;
  column-gap: 0.5em;
}
@media only screen and (max-width: 860px) {
  .bl_head_nav_link {
    padding: 0;
    width: 3em;
    height: 3em;
  }
}
@media only screen and (max-width: 860px) {
  .bl_head_nav_txt {
    display: none;
  }
}
.bl_head_logo {
  border-radius: 100%;
  aspect-ratio: 1/1;
  filter: drop-shadow(0 0 5px rgba(var(--color-black-rgb), 0.2));
  background-color: var(--color-white);
  position: absolute;
  bottom: 50%;
  right: 50%;
  transform: translate(50%, 50%);
  width: var(--logo-w);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  transition: all ease 0.2s;
}
@media only screen and (max-width: 860px) {
  .bl_head_logo {
    position: relative;
    bottom: auto;
    right: auto;
    transform: none;
    margin-left: auto;
    margin-right: auto;
  }
}
.bl_head_logo img {
  width: 70px;
  height: auto;
}
.bl_head_menu {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: 1fr 1fr 1fr var(--menu-p) 1fr 1fr 1fr;
  align-items: center;
  column-gap: 1em;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media only screen and (max-width: 860px) {
  .bl_head_menu {
    grid-auto-flow: row;
    grid-template-columns: repeat(1, 1fr);
    text-align: left;
    margin-top: 8%;
    border-bottom: 1px solid var(--color-green_sub);
  }
}
@media only screen and (max-width: 860px) {
  .bl_head_menu_item {
    border-top: 1px solid var(--color-green_sub);
  }
}
.bl_head_menu_item:nth-child(4) {
  grid-column: 5;
}
@media only screen and (max-width: 860px) {
  .bl_head_menu_item:nth-child(4) {
    grid-column: auto;
  }
}
.bl_head_menu_item:nth-child(5) {
  grid-column: 6;
}
@media only screen and (max-width: 860px) {
  .bl_head_menu_item:nth-child(5) {
    grid-column: auto;
  }
}
.bl_head_menu_item:nth-child(6) {
  grid-column: 7;
}
@media only screen and (max-width: 860px) {
  .bl_head_menu_item:nth-child(6) {
    grid-column: auto;
  }
}
.bl_head_menu_item a {
  padding: 0.5em 0;
  display: block;
}
@media only screen and (max-width: 860px) {
  .bl_head_menu_item a {
    padding: 1em 0;
    position: relative;
  }
  .bl_head_menu_item a::after {
    content: "＞";
    display: block;
    position: absolute;
    right: 0;
    bottom: 50%;
    transform: translateY(50%);
  }
}

.bl_spMenuBtn {
  display: none;
  appearance: none;
  padding: 0;
  background-color: transparent;
  border: 0 none;
  position: fixed;
  z-index: 10;
  right: 4vw;
  top: 4vw;
  width: 3em;
  height: 3em;
  background-color: var(--color-white);
  transition: all ease-out 0.5s;
}
@media only screen and (max-width: 860px) {
  .bl_spMenuBtn {
    display: block;
  }
}
.bl_spMenuBtn span {
  display: block;
  position: absolute;
  height: 2px;
  left: 0.5em;
  right: 0.5em;
  background-color: var(--color-main);
  border-radius: 8px;
  transition: all ease 0.3s;
}
.bl_spMenuBtn span:nth-of-type(1) {
  top: 0.75em;
}
.bl_spMenuBtn span:nth-of-type(2) {
  bottom: 50%;
  transform: translateY(50%);
}
.bl_spMenuBtn span:nth-of-type(3) {
  bottom: 0.75em;
}
.bl_spMenuBtn.is_on {
  background-color: var(--color-main_sub);
  border-radius: 5px;
}
.bl_spMenuBtn.is_on span {
  background-color: var(--color-white);
}
.bl_spMenuBtn.is_on span:nth-of-type(1) {
  top: 50%;
  transform: rotate(-45deg) translateY(-50%);
}
.bl_spMenuBtn.is_on span:nth-of-type(2) {
  opacity: 0;
  right: -2em;
}
.bl_spMenuBtn.is_on span:nth-of-type(3) {
  bottom: 50%;
  transform: rotate(45deg) translateY(50%);
}

.bl_footNav {
  margin-top: var(--space-margin);
  padding: var(--space-margin) 0;
  border-radius: var(--space-margin) var(--space-margin) 0 0;
  background-color: var(--color-background);
}
.bl_footNav_inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  text-align: left;
  font-size: 1.4rem;
  column-gap: var(--space-padding);
}
@media only screen and (max-width: 860px) {
  .bl_footNav_inner {
    grid-template-columns: repeat(1, 1fr);
    row-gap: 6vw;
  }
}
.bl_footNav_ttl {
  color: var(--color-main);
  font-weight: bold;
  font-size: 1.6rem;
  margin-bottom: 1.5em;
  padding-bottom: 0.5em;
  border-bottom: 2px solid var(--color-main_sub);
}
.bl_footNav_subTtl {
  color: var(--color-accent);
  font-weight: bold;
}
.bl_footNav_subTtl:nth-of-type(n + 2) {
  margin-top: 2.5em;
}
.bl_footNav_cont:nth-of-type(n + 2) {
  margin-top: 60px;
}
@media only screen and (max-width: 860px) {
  .bl_footNav_cont:nth-of-type(n + 2) {
    margin-top: 6vw;
  }
}
.bl_footNav_txt {
  margin-top: 0.5em;
}
.bl_footNav_txt p + p {
  margin-top: 1em;
}
.bl_footNav_txt ul li {
  text-indent: -1em;
  padding-left: 1em;
  margin-top: 0.5em;
}
.bl_footNav strong {
  font-weight: bold;
  color: var(--color-main);
  padding-bottom: 0.25em;
  display: inline-block;
}

.ly_foot {
  padding-top: var(--space-padding);
  padding-bottom: var(--space-padding);
  background-color: var(--color-green_sub);
  color: var(--color-white);
}

.bl_foot {
  filter: drop-shadow(0 5px 30px rgba(var(--color-accent-rgb), 0.3));
}
.bl_foot_nav_list {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 2em;
  font-size: 1.4rem;
}
@media only screen and (max-width: 860px) {
  .bl_foot_nav_list {
    font-size: 1.2rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    text-align: left;
  }
  .bl_foot_nav_list a {
    padding: 0.5em 0;
  }
}

.el_copy {
  text-align: center;
  font-size: 1.2rem;
  margin-top: 2em;
}

.ly_list {
  margin-top: var(--space-margin_sub);
}

.bl_list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  column-gap: var(--space-padding_sub);
  row-gap: var(--space-padding);
}
@media only screen and (max-width: 860px) {
  .bl_list {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    column-gap: var(--space-padding);
    row-gap: var(--space-margin_sub);
  }
}
.bl_list_item {
  font-size: 1.6rem;
  position: relative;
}
@media only screen and (max-width: 860px) {
  .bl_list_item {
    font-size: 1.4rem;
  }
  .bl_list_item::before {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    border-radius: 10px;
  }
}
.bl_list_item_link {
  position: relative;
  display: block;
}
@media only screen and (max-width: 860px) {
  .bl_list_item_link {
    z-index: 5;
  }
}
.bl_list_img {
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 10px;
  object-fit: cover;
  display: block;
}
.bl_list_name {
  margin-top: 0.5em;
}
.bl_list_price {
  font-size: 0.875em;
  margin-top: 1em;
}
.bl_list_comment {
  font-size: 1.2rem;
  margin-top: 1em;
}
.bl_list_cartIn {
  margin-top: var(--space-padding_sub);
}

/* component */
.el_lv2hd {
  font-weight: bold;
  font-size: 4.6rem;
  letter-spacing: 0.2em;
  filter: drop-shadow(0 0 5px rgba(var(--color-accent-rgb), 0.2));
}
@media only screen and (max-width: 860px) {
  .el_lv2hd {
    font-size: 3rem;
  }
}

.el_lv5hd {
  font-weight: bold;
  font-size: 2.4rem;
  letter-spacing: 0.2em;
  filter: drop-shadow(2px 2px 2px rgba(var(--color-accent-rgb), 0.2));
}
@media only screen and (max-width: 860px) {
  .el_lv5hd {
    font-size: 1.8rem;
  }
}

.el_cont_ttl {
  writing-mode: vertical-lr;
}
@media only screen and (max-width: 860px) {
  .el_cont_ttl {
    writing-mode: horizontal-tb;
    margin-bottom: 0.5em;
  }
}

.el_btn {
  border-radius: 8em;
  background-color: var(--color-main);
  padding: 1em 2em;
  color: var(--color-white);
  display: block;
  text-align: center;
  appearance: none;
  border: 0 none;
  cursor: pointer;
  width: 100%;
}

.el_cartBtn {
  background: url(../img/nihonshubyo/common/arrow_r_wht.svg) var(--color-accent);
  background-repeat: no-repeat;
  background-position: right 0.5em center;
  background-size: 1em;
  border: 1px solid var(--color-accent);
  padding: 0.5em 1em;
  padding-right: 2.5em;
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: left;
  appearance: none;
  cursor: pointer;
  width: 100%;
  line-height: 1.2;
}
@media only screen and (max-width: 860px) {
  .el_cartBtn {
    padding-right: 1.5em;
  }
}
.el_cartBtn_icon {
  display: inline-block;
  width: 2em;
  fill: var(--color-white);
  vertical-align: -0.6em;
  margin-right: 0.5em;
}

.bl_flow_list_item {
  display: grid;
  grid-template-columns: 4em 1fr;
  column-gap: 1em;
  align-items: flex-start;
  padding: 1.5em 0;
  border-bottom: 1px solid var(--color-main_sub);
}
.bl_flow_list_item:first-of-type {
  padding-top: 0;
}
.bl_flow_ttl {
  font-weight: bold;
  color: var(--color-main);
}
.bl_flow_txt {
  margin-top: 0.5em;
}
.bl_flow_icon svg {
  display: block;
  fill: var(--color-main);
}

@media only screen and (max-width: 860px) {
  .bl_cats {
    font-size: 1.2rem;
  }
}
.bl_cats li {
  position: relative;
}
.bl_cats li:nth-of-type(n + 2) {
  margin-top: 0.75em;
}
@media only screen and (max-width: 860px) {
  .bl_cats li:nth-of-type(n + 2) {
    margin-top: 0;
  }
}
.bl_cats li .bl_cats {
  margin-top: 0.75em;
  padding-left: 1em;
}
@media only screen and (max-width: 860px) {
  .bl_cats li .bl_cats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1em;
  }
}
.bl_cats a {
  display: block;
  position: relative;
}
.bl_cats .onmark {
  padding-left: 1em;
}
.bl_cats .onmark::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  bottom: 50%;
  transform: translateY(50%) rotate(180deg);
  width: 0.8em;
  height: 0.8em;
  background-image: url(../img/nihonshubyo/common/arrow_l_blk.svg);
  background-repeat: no-repeat;
  background-size: contain;
}

.bl_cart_total {
  padding-top: 0.5em;
  margin-top: 0.5em;
  border-top: 2px solid var(--color-accent);
}
.bl_cart_postage {
  border: 1px solid var(--color-main_sub);
  padding: 0.5em;
  margin-top: 0.5em;
  background-color: var(--color-white);
  font-size: 0.85em;
  text-align: center;
  border-radius: 5px;
}
.bl_cart_btn {
  margin-top: 1.5em;
}

.bl_cartIn_box {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: var(--space-padding_sub);
}

.bl_search {
  font-size: 1.6rem;
}
.bl_search_form {
  display: grid;
  grid-template-columns: 1fr 14em;
  column-gap: 1em;
}
@media only screen and (max-width: 860px) {
  .bl_search_form {
    grid-template-columns: 1fr;
    row-gap: 0.5em;
  }
}

.el_input {
  font-size: 1.6rem;
  padding: 0.5em 1em;
  color: var(--color-black-0);
  display: block;
  width: 100%;
}

.bl_bread {
  margin-bottom: var(--space-margin_sub);
}
.bl_bread_list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  font-size: 1.4rem;
}
@media only screen and (max-width: 860px) {
  .bl_bread_list {
    font-size: 1rem;
  }
}
.bl_bread_list li {
  position: relative;
}
.bl_bread_list li:nth-last-of-type(n + 2)::after {
  content: ">";
  display: inline-block;
  margin: 0 0.5em;
}
/*# sourceMappingURL=maps/common.css.map */