@charset "UTF-8";

/* =========================================================
   01. 共通設定・見出し周り
========================================================= */
.main_visual { position: relative; margin-top: 0; }
.adjust_color { color: #FD827A; font-weight: bold; }
#n_columnArea h2.h2_title, #faq h2.h2_title, #delivery h2.h2_title, #payment h2.h2_title, #about h2.h2_title { background: #3585B8; color: #fff; }
#n_columnArea h2.h2_ttl, #faq h2.h2_ttl, #delivery h2.h2_ttl, #payment h2.h2_ttl, #about h2.h2_ttl { color: #3585B8; border-top: 1px solid #3585B8; border-bottom: 1px solid #3585B8; text-align: center; padding: 8px 0 6px; font-size: 16px; font-weight: bold; margin: 80px 0 20px; }
h1 { font-size: 17px; display: flex; align-items: center; justify-content: center; font-family: 'Noto Serif JP', 'Hiragino Mincho ProN', 'Hiragino Mincho Pro', 'Yu Mincho', YuMincho, serif; color: #3585B8; }
h1::before, h1::after { content: "\FF5E"; color: #3585B8; margin: 0 8px; font-weight: normal; vertical-align: middle; }
.heading_common_sub { color: #3585B8; }

/* =========================================================
   02. キャッチコピー周辺 (#Catch)
========================================================= */
#Catch { margin: 2em 0 1em; font-family: 'Noto Serif JP', 'Hiragino Mincho ProN', 'Hiragino Mincho Pro', 'Yu Mincho', YuMincho, serif; text-align: center; }
#Catch h2 { font-size: 18px; font-weight: 500; margin-bottom: 8px; }
#Catch p._catch { font-size: 28px; position: relative; z-index: 0; line-height: 1.4; margin-bottom: 8px; text-align: center; color: #3585B8; }
#Catch p._lead { font-size: 16px; line-height: 1.8; text-align: center; font-weight: 500; margin: 1em; }
.area_catch span { display: inline-block; margin-top: 8px; font-size: 17px; font-weight: bold; color: #333; padding: 0 32px; position: relative; letter-spacing: 0.05em; }
.area_catch span::before, .area_catch span::after { content: ''; position: absolute; top: 50%; transform: translateY(-50%); width: 16px; height: 1px; background-color: #3585B8; }
.area_catch span::before { left: 0; }
.area_catch span::after { right: 0; }

/* =========================================================
   03. ローカルナビ (#navi)
========================================================= */
.navi_local_box { width: 18%; margin: 0 1% 2%; border-radius: 8px; transition: 0.2s; }

/* =========================================================
   04. ランキング (#rank)
========================================================= */
#rank .common_btn { margin: 8px 0 0; }
#rank .area_btn { margin-top: 1em; }
.tab_content { display: none; }
.tab_content.active { display: block; }

/* =========================================================
   05. 価格帯から選ぶ (#price)
========================================================= */
.price_outer { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 24px; }
.price_box { transition: 0.2s; }
.price_inner { align-items: center; width: 160px; height: 150px; position: relative; border-radius: 25px 0px 0px 0px; border: 2px solid #3585B8; }
.price_inner:hover { background: #3585B8; }
.price_inner:hover .price_txt { color: #fff; }
.price_inner::after { content: ""; position: absolute; margin: auto; bottom: 1em; left: 50%; width: 6px; height: 6px; border-top: 2px solid #000; border-right: 2px solid #000; transform: rotate(45deg) translateX(-50%); transition: 0.2s; }
.price_inner:hover::after { left: 54%; width: 6px; border-top: 2px solid #fff; border-right: 2px solid #fff; }
.price_txt { font-size: 18px; color: #000; padding: 8px 12px; font-weight: bold; line-height: 1.6; transition: .2s; box-sizing: border-box; text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; margin: 0; }
.price_txt:hover:after { right: 10px; }
.price_inner:hover .price_txt.pink::after { right: 8px; }
.price_inner .price_pic { transition: 0.2s; }
.price_inner:hover .price_pic { opacity: 0.8; }
section#price a:hover { text-decoration: none !important; }

/* =========================================================
   06. 商品パーツ・リスト共通
========================================================= */
.item_box .right .area_point_icon span.point { background: #3585B8; }
.other_product .item_catch { color: #3585B8; }

/* =========================================================
   07. ボタン・バナー共通
========================================================= */
.area_btn p.btn_text { position: relative; font-size: 20px; padding: 16px 40px 11px; display: inline-block; color: #000; font-weight: bold; border-radius: 5px; line-height: 1.3; transition: .2s; box-sizing: border-box; text-align: center; border: 1px solid #FFE7C0; background: #FFE7C0; width: 600px; }
.area_btn p.btn_text::after { content: ""; position: absolute; margin: auto; top: 50%; right: 2em; width: 8px; height: 8px; border-top: 2px solid #000; border-right: 2px solid #000; transform: rotate(45deg) translateY(-50%); transition: 0.2s; }
.area_btn p.btn_text:hover { background: #fff; color: #000; }
.area_btn p.btn_text:hover:after { right: 1.5em; border-top: 2px solid #000; border-right: 2px solid #000; }
.common_btn._style .area_btn p.btn_text { position: relative; font-size: 20px; padding: 16px 40px 11px; display: inline-block; color: #fff; font-weight: bold; border-radius: 5px; line-height: 1.3; transition: .2s; box-sizing: border-box; text-align: center; border: 1px solid #3585B8; background: #3585B8; width: 600px; }
.common_btn._style .area_btn p.btn_text::after { content: ""; position: absolute; margin: auto; top: 50%; right: 2em; width: 8px; height: 8px; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(45deg) translateY(-50%); transition: 0.2s; }
.common_btn._style .area_btn p.btn_text:hover { background: #fff; color: #3585B8; }
.common_btn._style .area_btn p.btn_text:hover:after { right: 1.5em; border-top: 2px solid #3585B8; border-right: 2px solid #3585B8; }
.banner { display: block; text-align: center; margin-top: 2em; width: 760px; margin: 2em auto 0; transition: 0.2s; }
.banner:hover { opacity: 0.8; }

/* =========================================================
   08. 喪中見舞い (#condolence)
========================================================= */
.condolence_heading { font-family: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif; font-size: 18px; font-weight: bold; text-align: center; margin: 1.5em 1em 1em; }
.area_condolence { max-width: 900px; margin: 16px auto 32px; padding: 16px 15px; border-top: 1px solid #ede7de; border-bottom: 1px solid #ede7de; box-sizing: border-box; }
.area_condolence .fl_inner { display: flex; align-items: center; justify-content: center; gap: 16px; width: 740px; margin: 0 auto; }
.area_condolence .fl_img { flex: 0 0 32%; max-width: 40%; }
.area_condolence .fl_img img { width: 100%; height: auto; display: block; border-radius: 2px; }
.area_condolence .fl_text { font-family: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif; color: #333333; flex: 0 0 86%; }
.area_condolence .fl_group { margin-bottom: 12px; }
.area_condolence .fl_group:last-child { margin-bottom: 0; }
.area_condolence .fl_title { font-size: 18px; letter-spacing: 0.08em; margin: 0; line-height: 1.4; text-align: center; }
.area_condolence .fl_title .name_red { color: #b42b2b; font-weight: 600; }
.area_condolence .fl_desc { font-size: 16px; line-height: 1.8; letter-spacing: 0.06em; color: #444444; margin: 0; text-align: left; font-weight: 500; }

/* =========================================================
   09. 季節の特集ラインナップ (#schedule)
========================================================= */
.seasonal_banners { max-width: 960px; margin: 40px auto; font-family: sans-serif; }
.banner_block { margin-bottom: 50px; }
.banner_title { display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: bold; margin: 0 0 20px 0; color: #333; }
.banner_title::before, .banner_title::after { content: ""; display: inline-block; width: 40px; height: 2px; margin: 0 15px; border-radius: 2px; }
.banner_title._active::before, .banner_title._active::after { background-color: #b73225; }
.banner_title._upcoming::before, .banner_title._upcoming::after { background-color: #999; }
.banner_link { display: block; position: relative; border-radius: 8px; overflow: hidden; transition: opacity 0.3s ease; }
.banner_link img { display: block; width: 100%; height: auto; }
.banner_link:not(._disabled):hover { opacity: 0.85; }
.banner_link._disabled { cursor: default; }
.banner_link._disabled img { filter: grayscale(40%) blur(1px); }
.coming_soon_mask { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #999; display: flex; justify-content: center; align-items: center; color: #fff; text-align: center; font-weight: bold; font-size: 24px; line-height: 1.4; letter-spacing: 0.1em; }
.coming_soon_mask small { font-size: 16px; font-weight: normal; }

/* =========================================================
   10. コラムエリア (#n_columnArea)
========================================================= */
#n_columnArea .wrap_column { padding: 0 8px; display: flex; flex-wrap: wrap; list-style: none; margin: 0; }
#n_columnArea .wrap_column li { width: 31%; margin-right: 2.3%; }
#n_columnArea .wrap_column li a { display: block; text-decoration: none; }
#n_columnArea h3 { font-weight: bold; color: #333333; font-size: 15px; position: relative; display: inline-block; padding-right: 10px; border-bottom: none; }
#n_columnArea .columnArea { margin: 32px 20px 56px; }
#n_columnArea .c_box { position: relative; border-bottom: 1px dotted; padding: 24px 0 8px; }
#n_columnArea .c_box .c_title { display: block; font-weight: normal; padding: 0 0 0 0.5em; font-size: 13px; color: #333; }
#n_columnArea .c_box::before { content: ''; position: absolute; left: 0; top: 65%; transform: translateY(-50%); box-sizing: border-box; width: 4px; height: 4px; border: 4px solid transparent; border-left: 4px solid #bb2649; }

/* =========================================================
   11. よくある質問 (#faq)
========================================================= */
.e87-lower-text { margin: 0; line-height: 1.8; font-size: 1.1em; }
.e87-lower-text + .e87-lower-text { margin-top: 2em; }
.e87-js-toggle-accordion { padding: 0 20px; }
.e87-faq-accordion { border: 1px solid #3585B8; border-radius: 5px; margin-bottom: 10px; overflow: hidden; }
.e87-faq-accordion:last-of-type { margin-bottom: 0; }
.e87-faq-accordion__head { padding: 20px 60px 20px 63px; background-image: url("https://img.e87.com/corp/faq/img/icon_q.png"); background-repeat: no-repeat; background-position: left 18px top 15px; background-size: 30px; cursor: pointer; transition: background-color .2s; }
.e87-faq-accordion__head:hover { background-color: #d6ecff; }
.e87-js-toggle-accordion__trigger--active:hover { background-color: transparent; }
.e87-faq-accordion__body__inner { background-image: url("https://img.e87.com/corp/faq/img/icon_a.png"); background-repeat: no-repeat; background-size: 30px; padding: 12px 60px 30px 63px; background-position: left 18px top 7px; }
.e87-faq-accordion__body[data-status="closed"] { display: none; }
.e87-js-toggle-accordion__trigger { position: relative; }
.e87-js-toggle-accordion__trigger::before, .e87-js-toggle-accordion__trigger::after { content: ""; position: absolute; width: 16px; height: 1px; background: #000; right: 20px; top: 0; bottom: 0; margin: auto; transition: transform .3s; }
.e87-js-toggle-accordion__trigger::after { transform: rotate(90deg); }
.e87-js-toggle-accordion__trigger--active::after { transform: rotate(0); }
.e87-faq-accordion__head__text { font-weight: bold; margin: 0; font-size: 1.3em; }
.e87-faq-accordion__text { margin: 0; }
.e87-faq-accordion__btn__wrap { margin: 30px auto 0; width: 85%; }
@media all and (min-width: 769px) { .e87-faq-accordion__btn__wrap { width: 344px; } }

#moomin.area_contents{border-top: 3px double #3585B8;border-bottom: 3px double #3585B8;padding: 40px 0 0;}