/*---------------------------------
ページ内共通 common
-----------------------------------*/
.contents img{vertical-align:top;transition:0.2s;}
#style_anc,#osusume_anc,#special_anc,#topic_anc,#ranking{padding-top:40px;margin-top:-40px;}

/*---------------------------------
パンくず breadcrumb
-----------------------------------*/
.navitopicpath_{width:960px;margin:0 auto 10px;}

/* --------------------------------------
ヘッダー header
------------------------------------------- */
#header_{position:relative;width:960px;margin:0 auto;}
.area_senko_off{display: flex;align-items: center;background: #007A89;box-sizing: border-box;padding: 8px 20px;justify-content: center;}
.area_senko_off div.area_senko_wrap_l{font-family: 'Noto Serif JP', serif;color: #d63e0f;margin-right:2em;}
.area_senko_off div.area_senko_wrap_l p{line-height: 34px;font-size:21px;font-weight: 600;color:#fff;}
.area_senko_off div.area_senko_wrap_l p span{display:inline-block;margin-left:25px;color:#fff;font-size:26px;font-weight: 600;}
.area_senko_off div.area_senko_wrap_l p span.adjust_fs{font-size: 48px;margin: 0 1px;position: relative;bottom: -3px;}
.area_senko_off div.area_senko_wrap_r p{font-size: 18px;color: #669a28;font-weight: bold;padding: 6px 15px 4px;background: #fff;border-radius: 25px;width:419px;}
.main_visual{position:relative;margin-top: 20px;}
._annotation{display: block;color: #252525;}

/* --------------------------------------
メインビジュアル期間 MV period
------------------------------------------- */
.wrap_main_heading{width: 310px;font-family: 'Noto Serif JP', serif;position: absolute;top: 50%;left: 6px;transform: translateY(-50%);}
.wrap_main_heading dl.heading_title{font-size: 23px;background: #007A89;color: #fff; text-align: center;font-weight: 600;padding: 6px;border-radius: 10px 10px 0 0;line-height: 1.2;}
.wrap_main_heading dl.heading_title dt{text-align: center;}
.wrap_main_heading dl.heading_title dd{font-size:16px;text-align: center;margin:4px 0;}
.wrap_main_heading .heading_date{padding: 1em 0.75em;background: #fff;border-radius: 0 0 10px 10px;border: 1px solid #007A89;}
.wrap_main_heading .heading_date dt{font-size: 21px;text-align: center;font-weight: 700;}
.wrap_main_heading .heading_date span._message{display:block;font-size: 18px;text-align: center;font-weight: 700;margin-bottom: 4px;}
.wrap_main_heading .heading_date table{width: 100%;}
.wrap_main_heading .heading_date table tr{font-size:15px;color:#007A89;text-align: right;display: flex;flex-direction: column;margin-bottom: 8px;}
.wrap_main_heading .heading_date table tr th{font-weight: bold;text-align: center;font-size: 18px;background: #dffbff;padding: 4px 0 6px;margin-bottom: 2px;color:#007A89;}
.wrap_main_heading .heading_date table tr td{font-weight: bold;text-align: center;font-size: 18px;margin: 4px 0 8px;color:#007A89;}

/*---------------------------------
スタイルから選ぶ style
-----------------------------------*/
.search_style{margin: 40px auto 0;}
.search_style .search_style_list {display: flex;flex-wrap: wrap;justify-content: space-between;padding: 0 40px;}
.search_style .search_style_list .search_style_contents .wrap_heading {display: block;font-weight: bold;margin: 0 auto;position: relative;font-size: min(4vw,16px);background: #177d82;border-radius: 10px;}
.search_style .search_style_list .search_style_contents .wrap_heading::after {content: "";position: absolute;margin: auto;top: 0;bottom: 0;right: 8px;width: 8px;height: 8px;border-top: 2px solid #fff;border-right: 2px solid #fff;transform: rotate(45deg);transition: 0.2s;}
.search_style .search_style_list .search_style_contents .wrap_heading:hover::after {right: 4px;}
.search_style .search_style_list .search_style_contents .wrap_heading a {font-family: 'Noto Serif JP', serif;color: #fff;display: block;padding: 9px 0 9px 9px;text-align: center;transition: 0.2s;}
.search_style .search_style_list .search_style_contents .wrap_heading a:hover {text-decoration: none;}
.search_style .search_style_list .search_style_contents {width: 47%;justify-content: space-between;padding: 2%;align-items: flex-start;margin: 0;box-sizing: border-box;}
.search_style .search_style_list .search_style_contents .wrap_heading::before {right: 3%;box-sizing: border-box;border: 4px solid transparent;border-left: 6px solid #e66784;}
#style .search_style .search_style_list .search_style_contents .wrap_heading::after{content:unset;}
#style .search_style .search_style_list {justify-content: center;padding: 0;margin: 24px 0;}
#style .search_style .search_style_list .search_style_contents {width: 24%;padding:0;}
#style .search_style .search_style_list .search_style_contents .wrap_heading {display: block;font-weight: bold;margin: 0 auto;position: relative;font-size: min(4vw,16px);border-radius: 10px;background: none;transition:0.2s;}
#style .search_style .search_style_list .search_style_contents .wrap_heading a {color: #007A88;display: block;padding:0;text-align: center;transition: 0.2s;}
#style .search_style .search_style_list .search_style_contents .wrap_heading a ._img {width: 200px;margin: 0 auto 1em;}
#style .search_style .search_style_list .search_style_contents .wrap_heading a ._img img {width:100%;height:auto;}
#style .search_style .search_style_list .search_style_contents .wrap_heading a ._heading {font-size: 17px;color: #007A88;display: inline;position: relative;text-align: center;font-weight: 600;    font-family: "???C???I", Meiryo, "?q?‰?M?m?p?S Pro W6", "Hiragino Kaku Gothic Pro", Osaka, "?l?r ?o?S?V?b?N", "MS PGothic", sans-serif;}
#style .search_style .search_style_list .search_style_contents .wrap_heading a ._heading::after {content: "";position: absolute;margin: auto;top: 0;bottom: 0;right: -1em;width: 8px;height: 8px;border-top: 2px solid #007A88;border-right: 2px solid #007A88;transform: rotate(45deg);transition: 0.2s;}
#style .search_style .search_style_list .search_style_contents .wrap_heading:hover a ._heading::after {right: -1.5em;}
#style .search_style .search_style_list .search_style_contents .wrap_heading:hover{opacity:0.8;}

/* --------------------------------------
価格から選ぶ
------------------------------------------- */
.price_outer {display: flex;align-items: center;justify-content: center;padding-bottom: 1em;margin-bottom: 3em;padding-top: 24px;flex-wrap: wrap;padding:0 90px;}
.price_box {margin: 8px;transition:0.2s;}
.price_box:hover{opacity:0.8;}
.price_inner {align-items: center;width: 180px;height: 180px;position: relative;background-image: linear-gradient(130deg,rgba(104, 224, 207, 1),rgba(32, 156, 255, 1));content: "";background:#E8DDD8;}
.price_inner::after {content: "";position: absolute;margin: auto;bottom: 2em;left: 50%;width: 6px;height: 6px;border-top: 2px solid #007A88;border-right: 2px solid #007A88;transform: rotate(45deg) translateX(-50%);transition: 0.2s;}
.price_inner:hover::after {left: 54%;width: 6px;}
.price_txt {font-size: 18px;color: #007A88;padding: 8px 12px;font-weight: bold;line-height: 1.4;transition: .2s;box-sizing: border-box;text-align: center;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 100%;}
.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;}

/*---------------------------------
特集スライダー area feature slider １
-----------------------------------*/
.swiper{height:370px!important;width: 890px;;}
.swiper-wrapper {width: 100%;height: auto !important;}
.swiper-slide {color: #ffffff;width: 170px!important;height: auto!important;text-align: center;margin:8px 4px;transition:0.2s;}
.swiper-pagination-bullets {width: 100px;}
.swiper-pagination-bullet {width: 12px !important;height: 12px !important;margin: 0 0 0 10px !important;background: #fff;}
.swiper-pagination-bullet:first-child {margin: 0 !important;}
.swiper-slide dl:hover {opacity:0.8;}
.swiper-slide dl div {font-size: 18px;color: #401f1f;line-height: 20px;z-index: 1;position: static;background: none;width: unset;height: unset;text-align: left;margin-bottom:4px;}
.swiper-slide dl div._gold::before {content: '';background: url(//img.e87.com/img/icon/icon_rank_no1.gif) no-repeat;width: 26px;height: 24px;background-size: 100%;position: absolute;left: 0;top: -4px;}
.swiper-slide dl div._silver::before {content: '';background: url(//img.e87.com/img/icon/icon_rank_no2.gif) no-repeat;width: 26px;height: 24px;background-size: 100%;position: absolute;left: 0;top: -4px;}
.swiper-slide dl div._bronze::before {content: '';background: url(//img.e87.com/img/icon/icon_rank_no3.gif) no-repeat;width: 26px;height: 24px;background-size: 100%;position: absolute;left: 0;top: -4px;}
.swiper-slide dl div._gold {padding-left: 1.55em;background: none;padding-left: 1.55em;background: none;width: unset;height: unset;border-radius: unset;text-align: left;}
.swiper-slide dl div._gold span {color: #401f1f;font-size: 21px;}
.swiper-slide dl div._silver {padding-left: 1.55em;padding-left: 1.55em;background: none;width: unset;height: unset;border-radius: unset;text-align: left;}
.swiper-slide dl div._silver span {color: #401f1f;font-size: 21px;}
.swiper-slide dl div._bronze {padding-left: 1.55em;padding-left: 1.55em;background: none;width: unset;height: unset;border-radius: unset;text-align: left;}
.swiper-slide dl div._bronze span {color: #401f1f;font-size: 21px;}
.swiper-slide._bottom dl {width:200px;}
.swiper-slide._bottom dl div {font-size: 28px;background: none;width: unset;height: unset;text-align: left;}
.swiper-slide dl div span {font-family: 'Noto Serif JP', serif;font-size: 21px;color: #333;position: static;}
.swiper-slide .item_img {position: relative;}
.swiper-slide._bottom dl dd.item_img {margin: 24px 0 0;}
.swiper-slide dl dd.item_name {color: #333;margin-top: 8px;margin-bottom: 6px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;font-size: 13px;line-height: 1.3;}
.swiper-slide dl dd.price {color: #333;}
.swiper-slide a:hover {text-decoration: none;}
.swiper-slide img {width: 100%;height: auto;transition:0.2s;}
.swiper-pagination-bullet-active{background: #007A88!important;}
.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after{color:#007A88!important;font-size:32px!important;}
.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after{color:#007A88!important;font-size:32px!important;}
.swiper-button-next, .swiper-rtl .swiper-button-prev{right:0!important;}
.swiper-button-prev, .swiper-rtl .swiper-button-next{left:0!important;}

/*---------------------------------
特集スライダー area feature slider　２
-----------------------------------*/
.swiper{height:320px!important;}
#feature .wrap_swiper{position:relative;width: 900px;margin:24px auto 0;}
#rank .wrap_swiper{position:relative;}
.swiper2{height:284px!important;width: 835px;}
.swiper-button-next2:after, .swiper-button-prev2:after {font-family: swiper-icons;font-size: var(--swiper-navigation-size);text-transform: none !important;letter-spacing: 0;font-variant: initial;line-height: 1;}
.swiper-button-next2:after, .swiper-rtl .swiper-button-prev2:after {content: 'next';}
.swiper-button-prev2:after, .swiper-rtl .swiper-button-next2:after {content: 'prev';}
.swiper-button-next2, .swiper-button-prev2 {position: absolute;top: var(--swiper-navigation-top-offset, 50%);width: calc(var(--swiper-navigation-size) / 44 * 27);height: var(--swiper-navigation-size);margin-top: calc(0px - (var(--swiper-navigation-size) / 2));z-index: 10;cursor: pointer;display: flex;align-items: center;justify-content: center;color: var(--swiper-navigation-color, var(--swiper-theme-color));}
.swiper-button-prev2, .swiper-rtl .swiper-button-next2 {left: var(--swiper-navigation-sides-offset, 10px);right: auto;}
.swiper-pagination2{position: absolute;text-align: center;transition: .3s opacity;transform: translate3d(0, 0, 0);z-index: 10;}
.swiper-button-next2:after, .swiper-rtl .swiper-button-prev2:after{color:#007A88!important;font-size:32px!important;}
.swiper-button-prev2:after, .swiper-rtl .swiper-button-next2:after{color:#007A88!important;font-size:32px!important;}
.swiper-button-next2, .swiper-rtl .swiper-button-prev2{right:0!important;}
.swiper-button-prev2, .swiper-rtl .swiper-button-next2{left:4px!important;}
.swiper-button-next2.swiper-button-disabled, .swiper-button-prev2.swiper-button-disabled {opacity: .35;cursor: auto;pointer-events: none;}
.swiper2 .swiper-slide {color: #ffffff;width: 200px!important;height: auto!important;text-align: center;margin:8px 4px;transition:0.2s;}
.navi_local{margin-top:24px;}
.father_card_img {width: 480px;}
.swiper-slide dl{transition:0.2s;}

/* --------------------------------------
メッセージカード message card
------------------------------------------- */
div#agedday_card { margin-top: 35px;}
.agedday_card_box{display: flex;margin-bottom: 8px;justify-content: center;padding-top: 8px;}
.agedday_card_img {width: 420px;padding: 0 30px 0 40px;box-sizing: border-box;}
.agedday_card_img img { width: 100%; height: auto;}
.agedday_card_txt {margin-top: 10px;width: 500px;}
.agedday_card_txt dt {background: #007A88;color: #fff;font-size: 16px;font-weight: bold;padding: 0 15px;display: inline;padding: 2px 15px 0;}
dt .card_txt_small {padding-left: 10px;}
.card_txt_small {font-size: 13px;}
.agedday_card_txt dd {margin: 10px 0 24px;font-size: 16px;line-height: 1.6;}
.agedday_card_txt dd a {text-decoration: underline;font-size: 15px;font-weight: bold;}
.agedday_card_txt .card_item a {    font-size: 18px;font-weight: bold;color: #007A88;margin-top: 0.25em;display: block;}

/* --------------------------------------
敬老の日について調べる about agedday
------------------------------------------- */
#agedday_inv {width: 960px;color: #313131;margin: 20px 0 120px;padding: 0 40px;box-sizing: border-box;}
.agedday_inv_bg:last-child #agedday_inv {margin: 20px 0 80px;}
#agedday_inv p{padding:24px;line-height:1.6;font-size:16px;background:#f7f7f7;border:1px solid #d8d8d8;}

/* --------------------------------------
コラム column
------------------------------------------- */
#n_columnArea h2.h2_ttl,#faq h2.h2_title,#about h2.h2_title  {color:#007A88;border-top:1px solid #007A88;border-bottom:1px solid #007A88;text-align:center;padding:8px 0 6px;font-size:16px;font-weight:bold;margin: 56px 0 20px;}
#n_columnArea h3:before {content:"??";font-size:38px;top:0px;left:-17px;position:absolute;color:#cfdbfd;z-index:-1;}
#n_columnArea h3 {font-weight:bold;color:#333333;font-size:15px;position:relative;margin-left:15px;border-bottom:2px solid #cfdbfd;display:inline-block;padding-right:10px;margin-top:10px;}
#n_columnArea .columnArea {margin:20px 0 20px;}
#n_columnArea .c_box {display:flex;width:240px;float:left;min-height:100px;}
#n_columnArea .c_box p {padding:5px 8px 5px 5px;}
#n_columnArea .c_box p img {width:65px;height:auto;}
#n_columnArea .c_box dt span {font-weight:bold;background: linear-gradient(transparent 40%, rgb(0 122 133 / 15%) 0%);color:#333333;font-size:13.5px;padding:0 2px;}
#n_columnArea .c_box dd {font-size:11px;color:#565656;padding-top:5px;line-height:1.4;}
#n_columnArea .columnArea dl {padding:0 5px 0 0;width:200px;}
#n_columnArea a:hover {text-decoration:none!important;opacity:0.8;color:#707070;}
#n_columnArea .c_box dt {line-height:1.4;}
#n_columnArea .c_box img:hover {opacity:0.8;}

/* --------------------------------------
よくある質問 FAQ
------------------------------------------- */
.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;color:#252525;}
.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-faq-accordion {border:1px solid #007A88;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;color:#252525;}
.e87-faq-accordion__head:hover {background-color:#b0d2fa;}
.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:8px 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:#007A88;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;} }
 
 /* --------------------------------------
お届けについて delivery
------------------------------------------- */
#delivery{margin:72px 0;}
#delivery h2.h2_title,#payment h2.h2_title,#payment h2.h2_title  {color:#007A88;border-top:1px solid #007A88;border-bottom:1px solid #007A88;text-align:center;padding:8px 0 6px;font-size:16px;font-weight:bold;margin:30px 0 20px;}
.area_delivery{padding:0 3%;}
.area_delivery p{margin: 32px 0;}

 /* --------------------------------------
お支払いについて payment
------------------------------------------- */
#payment{margin:56px 0;}
.area_payment{padding:0 3%;}
.area_payment p{font-size:15px;margin: 2% 0 3%;line-height: 1.6;}
.area_payment p._lead{padding: 0 24px;}
.area_payment p._lead a{text-decoration: underline;}
.area_payment .payment_wrap{padding: 24px;border: 1px solid #d9d9d9d9;}
.area_payment .payment_wrap h3{font-size: 16px;border-left: 6px solid #007A88;padding-left: 8px;color: #007A88;margin: 8px 0;font-weight: bold;}
.area_payment .payment_wrap dl {border-top: 1px dotted #d9d9d9;padding: 16px 10px;margin-top: 16px;}
.area_payment .payment_wrap dt{font-size: 15px;/* padding-top: 8px; */line-height: 1.5;}
.area_payment .payment_wrap ul li{margin-bottom:24px;}
.area_payment .payment_wrap ul li:last-child{margin-bottom:0;}
.area_payment .payment_wrap dd{display: flex;padding: 16px;justify-content: center;margin: 8px 0;align-items: baseline;}
.area_payment .payment_wrap dd.card img{width: 80px;height: 52px;margin-right: 8px;}
.area_payment .payment_wrap dd.card img._jcb{height: 60px;}
.area_payment .payment_wrap dd.conv img{width: auto;height: 25px;margin-right: 8px;}
.area_payment .payment_wrap dd.annotation{display:block;padding:0;}
.area_payment .payment_wrap dd.annotation p{padding:0;margin:0;font-size: 13px;line-height: 1.5;}

/*---------------------------------
届いてから払い todoite
-----------------------------------*/
.area_payment .todoite p{margin:2% 0;}
.area_payment .todoite p.todoite_img{width:405px;margin:0 auto;}
.area_payment .todoite ul li{font-size: 16px;;line-height: 1.6;margin:0;}
.area_payment .todoite h4{font-size: 16px;font-weight: bold;margin: 1em 0;color:red;}
.area_payment .payment_wrap .todoite dl{border-top: none;margin: 0;padding: 0 0 0 1em;}
.area_payment .payment_wrap .todoite dl dt{font-size:16px;font-weight: bold;}
.area_payment .payment_wrap .todoite dd{padding:0;display: block;}
.area_payment .payment_wrap .todoite a{color:red;}

/* --------------------------------------
イイハナについて about e87
------------------------------------------- */
section.area_obsession {overflow: unset;}
.area_obsession_inner {padding: 8px 0;font-weight: 500;position: relative;width: 100%;margin: 24px auto;box-sizing: border-box;}
.area_obsession_inner label._heading {color: #007A88;font-size: 18px;margin-bottom: 16px;position: relative;font-weight: 600;padding-left: 1em;padding-bottom: 16px;margin: 0 8px 0px;border-bottom: 1px dotted #d9d9d9;}
.area_obsession_inner label._heading:hover {cursor: pointer;}
.area_obsession_inner .toggle {display: none;}
.area_obsession_inner ._heading {font-family: 'Noto Serif JP', serif;padding: 0.5em;display: block;color: #fff;}
.area_obsession_inner ._heading::after {content: "";width: 6px;height: 6px;border-top: 2px solid #401f1f;border-right: 2px solid #401f1f;-webkit-transform: rotate(45deg);position: absolute;top: calc( 50% - 3px );right: 20px;transform: rotate(135deg);}
.area_obsession_inner ._heading, .area_obsession_inner .txt_wrap {-webkit-backface-visibility: hidden;backface-visibility: hidden;transform: translateZ(0);transition: all 0.3s;}
.area_obsession_inner .txt_wrap {height: 0;margin-bottom: 10px;padding: 0 2em 0px 2.5em;overflow: hidden;}
.toggle:checked + ._heading + .txt_wrap {height: auto;transition: all .3s;}
.toggle:checked + ._heading::after {transform: rotate(-45deg) !important;}
.area_obsession .area_obsession_inner p.obsession_txt {font-size: 15px;line-height: 1.8;margin-bottom: 18px;font-weight: 400;}

/* --------------------------------------
heading_catch
------------------------------------------- */
.heading_catch{color: #007A88;}
#agedday_inv .area_btn._column p.btn_text{background:#007A88;padding:8px;}
#agedday_inv .area_btn._column p.btn_text:hover{background:#fff;color:#007A88;}
