@charset "UTF-8";

/* =========================================================
   01. 共通設定・ボタン周り (Common)
========================================================= */
.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: #AE0C00; color: #fff; }

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: #AE0C00;}
h1::before, h1::after {content: "\FF5E";color: #AE0C00;margin: 0 8px;font-weight: normal;vertical-align: middle;}

/* =========================================================
   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: #AE0C00; }
#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: #AE0C00; }
.area_catch span::before { left: 0; }
.area_catch span::after { right: 0; }

/* =========================================================
   03. 商品リスト共通ベース (.style_list_box)
========================================================= */
.style_list_box .item_img { position: relative; margin: 0; }
.style_list_box dl > a { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }
.style_list_box .item_text_wrap { padding: 32px 12px 16px; background: #ffffff; box-sizing: border-box; margin: 0 0 8px 0; line-height: 1.5; flex-grow: 1; display: flex; flex-direction: column; }
.area_column_style_heading_wrap { text-align: center; margin-top: 16px; }
.area_column_style_heading_wrap img { max-width: 650px; }
.area_column_style_heading_wrap h3 { border: none; font-weight: bold; margin-top: 8px; margin-bottom: 0; }

/* =========================================================
   04. ランキング・タブ (#rank)
========================================================= */
#rank .common_btn { margin: 8px 0 0; }
#rank .area_btn { margin-top: 1em; }

.rank_tab { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 40px 0; align-items: center; }
.rank_tab li { width: 120px; padding: 10px 25px 6px; background: #fff; border: 1px solid #AE0C00; cursor: pointer; font-weight: bold; color: #AE0C00; font-size: 15px; list-style: none; transition: 0.2s; height: 2em; display: flex; justify-content: center; align-items: center; text-align: center; box-sizing: content-box; }
.rank_tab li.active, .rank_tab li:hover { background: #AE0C00; color: #fff; }

.tab_content { display: none; }
.tab_content.active { display: block; }

.static_5items { display: flex; justify-content: center; flex-wrap: nowrap; width: 100%; }
.static_5items .item_slide { width: calc(20% - 10px); box-sizing: border-box; }

/* =========================================================
   05. 豆知識・コラム (#main_column, #n_columnArea)
========================================================= */
.area_column .area_column_txt { width: 920px; margin: 0 auto; background: #f9f9f9; padding: 32px; }
.area_column .column_txt { font-size: 15px; margin: 1em 0; line-height: 1.8; }
.area_column .column_txt a { font-weight: bold; text-decoration: underline; color: #AE0C00; transition: 0.2s; }
.area_column .column_txt a:hover { opacity: 0.8; }
.area_column .area_column_txt ul li { font-size: 15px; line-height: 1.8; }

#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; }

/* =========================================================
   06. お届け・FAQ (#delivery, #payment, #faq)
========================================================= */
.wrap_txt { padding: 0 12px 0; }
.wrap_txt ._txt { border-top: 1px dotted #d9d9d9; padding: 16px 10px; margin-top: 16px; }
.wrap_txt ._txt p._lead { font-size: 15px; line-height: 1.5; }
.wrap_txt ._txt p._anno { padding: 0; margin: 0; font-size: 13px; line-height: 1.5; }
.wrap_txt ._txt p._lead span._add { color: #AE0C00; font-size: 18px; font-weight: bold; }
.wrap_txt h3 { font-size: 16px; border-left: 6px solid #AE0C00; padding-left: 8px; color: #333; margin: 40px 0 8px; font-weight: bold; }
.wrap_txt h3 p { display: inline-block; margin-right: 3px; margin-left: 1em; }
.wrap_txt h3 p img { width: 69px; vertical-align: sub; margin-right: 3px; }

.wrap_early { width: 700px; margin: 0 auto; }
.sw_deco { display: block; text-align: center; font-size: 18px; }
.sw_deco::before, .sw_deco::after { color: inherit; font-weight: bold; }
.sw_deco::before { content: "＼"; margin-right: 4px; }
.sw_deco::after { content: "／"; margin-left: 4px; }

.e87-lower-layout { margin-top: 40px; margin-bottom: 60px; }
.e87-lower-section { margin-top: 80px; }
.e87-lower-text { margin: 0; line-height: 1.8; font-size: 1.1em; }
.e87-lower-text + .e87-lower-text { margin-top: 2em; }
.e87-lower-anchor__item .e87-link-box--anchor { height: 100%; display: flex; align-items: center; }
.e87-lower-anchor__item .e87-link-box--anchor::after { right: 9px; top: calc(50% - 13px); transform: rotate(90deg) translateY(-50%); }
.e87-faq-lists { margin-top: 60px; }
.e87-js-toggle-accordion { padding: 0 20px; }
.e87-faq-accordion { border: 1px solid #AE0C00; 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: #ffe1ec; }
.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; } }

/* =========================================================
   07. 価格から選ぶ (#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 #AE0C00; }
.price_inner:hover { background: #AE0C00; }
.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; }

/* =========================================================
   08. 特殊セクション (クリスマスについて調べる等)
========================================================= */
#xmas_inv { width: 960px; height: 334px; background: url(/selection/xmas/2015images/xmas_column_bg.jpg) no-repeat top left; color: #fff; }
#xmas_inv p { width: 760px; float: right; padding: 116px 16px 0 0; line-height: 1.6; font-size: 14px; color: #fff; text-align: left; text-shadow: -1px -1px 4px #fff; }

#n_columnArea h2.h2_ttl, #faq h2.h2_ttl, #delivery h2.h2_ttl, #payment h2.h2_ttl, #about h2.h2_ttl {color: #AE0C00;border-top: 1px solid #AE0C00;border-bottom: 1px solid #AE0C00;text-align: center;padding: 8px 0 6px;font-size: 16px;font-weight: bold;margin: 80px 0 20px;}

/* =========================================================
   09. 季節の特集ラインナップバナー (.seasonal_banners)
========================================================= */
.seasonal_banners { max-width: 960px; margin: 40px auto; font-family: sans-serif; }
.banner_block { margin-bottom: 32px; }
.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._winter_::before, .banner_title._winter_::after { background-color: #3E4F70; }
.banner_title._xmas_::before, .banner_title._xmas_::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. ムーミン特設 (#moomin)
========================================================= */
#moomin.area_contents { border-top: 3px double #AE0C00; border-bottom: 3px double #AE0C00; padding: 40px 0; }

   .h2_ttl{    color: #AE0C00;
    border-top: 1px solid #AE0C00;
    border-bottom: 1px solid #AE0C00;
    text-align: center;
    padding: 8px 0 6px;
    font-size: 16px;
    font-weight: bold;
    margin: 80px 0 20px;}