@charset "shift_jis"; 

/*---------------------------------
??????? area feature slider ?
-----------------------------------*/
.wrap_swiper{position:relative;}
.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;font-size:14px;}
.swiper-slide a:hover {text-decoration: none;}
.swiper-slide img {width: 100%;height: auto;transition:0.2s;}
.swiper-pagination-bullet-active{background: #7AC38B!important;}
.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after{color:#7AC38B!important;font-size:32px!important;}
.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after{color:#7AC38B!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:305px!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, 40%);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:#7AC38B!important;font-size:32px!important;}
.swiper-button-prev2:after, .swiper-rtl .swiper-button-next2:after{color:#7AC38B!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;}
.swiper-slide dl._comming::before{content: '';width: 100%;height: 100%;position: absolute;background: #000000;z-index: 1;background: rgba(0, 0, 0, 0.5);}
.swiper-slide dl._comming::after{    content: '11\6708\4E0A\65EC\516C\958B\4E88\5B9A';position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);color: #fff;z-index: 2;white-space: pre;font-size: 18px;font-weight: bold;}

/* -----------------------------------------------------------
???????? area sytle
----------------------------------------------------------- */
.style-bnr {display: flex;justify-content: center;gap: 24px;margin-top: 20px;width:50%;margin: 0 auto;}
.style-bnr a {width: 220px;font-size: 16px;display: flex;flex-direction: column;align-items: center;}
.style-bnr span {display: inline-block;position: relative;}
.style-bnr span::after {content: "";position: absolute;margin: auto;top: 0;bottom: 0;right: -1rem;width: 8px;height: 8px;border-top: 2px solid #000000;border-right: 2px solid #000000;transform: rotate(45deg);transition: 0.2s;}
.style-bnr a:hover span::after {right: -1.5rem;}
._style .contents_inner{margin-top: 4em;}
.wrap_bnr{margin-top:48px;}
.style-bnr li{position:relative;}
.style-bnr li._comming::before{content: '';width: 100%;height: 100%;position: absolute;background: #000000;z-index: 1;background: rgba(0, 0, 0, 0.5);}
.style-bnr li._comming::after{content: '11\6708\4E0A\65EC\8CA9\58F2\958B\59CB\FF01';position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);color: #fff;z-index: 2;white-space: pre;font-size: 18px;font-weight: bold;}
.style-bnr a img{width:100%;height:auto;}
.style-bnr span{text-align: center;font-weight: bold;color:#000;margin-top: 1em;display: block;}
.style_catch{margin:0;font-size:14px;text-align: center;position:relative;width: 100%;}

/*---------------------------------
CTA??? btn
-----------------------------------*/
.common_btn {margin: 40px 0 120px;}
.cta_link {width: 600px;display: block;margin: auto;background: #F8BEC4;border: 1px solid #E0ACB2;border-radius: 7px;font-size: 18px;font-weight: bold;padding: 18px 0;font-family: sans-serif;text-decoration: none;color: var(--black);}
.cta_link{background:#9FC75F;color:#fff!important;border:1px solid #9FC75F;transition:0.2s;position:relative;text-align: center;}
.cta_link:hover{background:#fff;color:#9FC75F!important;}
.cta_link::before {content: '';width: 6px;height: 6px;border: 0;border-top: solid 2px #fff;border-right: solid 2px #fff;position: absolute;top: 50%;right: 16px;margin-top: -4px;transform: rotate(45deg);}
.cta_link:hover::before{border-top: solid 2px #9FC75F;border-right: solid 2px #9FC75F;}

/* --------------------------------------
????? banner
------------------------------------------- */
.banner_ex,.banner_och{text-align: center;margin-top: 2em;width: 750px;margin: 2em auto;}
.banner_ex img,.banner_och img{width:100%;}
.contents_inner{margin-top:2em;}

/* FAQ
------------------------------ */
#n_columnArea h2.h2_ttl,#faq h2.h2_ttl {font-family: "????", Meiryo, "?????? Pro W6", "Hiragino Kaku Gothic Pro", Osaka, "?? ?????", "MS PGothic", sans-serif;color:#000;border-top: 1px solid #000;border-bottom: 1px solid #000;text-align: center;padding: 8px 0 6px;font-size: 16px;font-weight: bold;margin: 16px 0 20px;}
#faq .e87-base-layout {font-family: "????", Meiryo, "?????? Pro W6", "Hiragino Kaku Gothic Pro", Osaka, "?? ?????", "MS PGothic", sans-serif;}
.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-faq-accordion {border:1px solid #000;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;will-change: contents;}
.e87-faq-accordion__head:hover {opacity:0.6;}
.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:#000;right:20px;top:0;bottom:0;margin:auto;transition:transform .3s;will-change: contents;}
.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;}
.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;} }

/* -----------------------------------------------------------
????? noshi
----------------------------------------------------------- */
.wrap_usagi_heading{position:relative;text-align: center;}
#usagi .heading_common{display:inline-block;position:relative;}
#usagi .heading_common::before{content:unset;}
#usagi .heading_common img{position: absolute;left: -112px;top: 25%;transform: translateY(-50%);}
#usagi .wrap_img{text-align: center;margin:0;}
#usagi .wrap_img._ro{position: absolute;top: 330px;left: 50%;transform: translateX(-50%);z-index: -1;}
#usagi .right_img{width:280px;}
#usagi .right_img img{width:100%;}
#usagi .left_txt{width:67%}
#usagi .left_txt p{font-size:15px;line-height: 1.6;margin: 0.75em;}
#usagi .other_product {display: flex;flex-wrap: wrap;margin: 24px 0;padding:0 20px;}
#usagi .other_product dl {padding: 0 16px;width: 210px;font-family: "????", Meiryo, "?????? Pro W6", "Hiragino Kaku Gothic Pro", Osaka, "?? ?????", "MS PGothic", sans-serif;margin: 16px 10px;}
.adjust_txt_color{color:#913D19;font-weight: bold;}
.area_column{display: flex;padding: 20px;background-image: linear-gradient(90deg, rgb(210 231 255), rgba(233, 240, 250, 1));justify-content: center;width: 920px;margin: 160px auto 32px;}


.heading_img{position: absolute;}
#rank .heading_img{width: 139px;top: -60px;left: 31%;}
#style .heading_img{width: 98.5px;top: -50px;left: 31%;}

/* --------------------------------------
?????? area price
------------------------------------------- */
.price_outer {display: flex;align-items: center;justify-content: center;padding-bottom: 1em;flex-wrap: wrap;}
.price_box {margin: 8px;transition: 0.2s;}
.price_box:hover {opacity: 0.8;}
.price_inner {align-items: center;width: 170px;height: 150px;position: relative;border-radius: 5px;border:2px solid #9FC75F;}
.price_inner:hover {background:#9FC75F;}
.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;}

/*---------------------------------
??? colmun
-----------------------------------*/
section#n_columnArea { padding-top: 30px;}
#n_columnArea h2.h2_ttl {color:#9FC75F;border-top: 1px solid #9FC75F;border-bottom: 1px solid #9FC75F;text-align: center;padding: 8px 0 6px;font-size: 16px;font-weight: bold;margin: 30px 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%, #9fc75f3b 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: 157px;}
#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;}

.navi_catch{text-align: center;font-size: 14px;color: #7AC38B;font-weight: bold;position:relative;    width: 95%;margin: 0 auto 2px;line-height: 1.4;}
.navi_catch::before{content: "";width: 20px;height: 1px;background: #7AC38B;position: absolute;top: 50%;left:0;transform: translateY(-50%) rotate(45deg);} 
.navi_catch::after{content: "";width: 20px;height: 1px;background: #7AC38B;position: absolute;top: 50%;right:0;transform: translateY(-50%) rotate(-45deg);} 
.navi_agedday{align-items: flex-end;}

.item_catch{font-weight: bold;position: relative;padding: 0 4px!important;font-size: 14px;margin: 0.5em 0;line-height: 1.4;color: #609d00;}
.style-bnr .item_catch{text-align: center;    margin-top: 8px;}

/*---------------------------------
??? colmun
-----------------------------------*/
#feature .swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction{    bottom: var(--swiper-pagination-bottom, 0)!important;}
#rank .swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction{    bottom: var(--swiper-pagination-bottom, 0)!important;}

.style-bnr li a {
    position: relative;
}

.style-bnr li.style_po a::before {
content: "";
    width: 22vw;
    height: 22vw;
    border-radius: 50%;
    position: absolute;
    top: 43.5%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #C4DFF5;
    z-index: -1;
        max-width: 210px;
    max-height: 210px;
}

.style-bnr li.style_pre a::before {
    content: "";
    width: 17vw;
    height: 17vw;
    border-radius: 50%;
    position: absolute;
    top: 0;
    right: 0;
    background-color: #FFF38B;
    z-index: -1;
    max-width: 160px;
    max-height: 160px;
}

.style-bnr li.style_arr a::before {
    content: "";
    width: 22vw;
    height: 22vw;
    border-radius: 50%;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-color: #FBE9E8;
    z-index: -1;
        max-width: 210px;
    max-height: 210px;
}

.area_contents_single .common_bnr{margin-top:0;}

.area_contents {
    margin: 80px 0;
    border:1px solid #9FC75F;
}

.area_contents#xmas {
    border:1px solid #DF5B5B;
}