@charset "shift_jis"; 
:root {
    --white: #fff;
    --black: #555;
    --gray: #707F89;
    --light-gray: #f0f0f0;
    --dark-gray: #3B4043;
    --blue: #004bb1;

    --font-weight-bold: 700;
}
body {width: 100%;max-width: 640px;margin: auto;}
html main {color: var(--black);margin: auto;width: 100%;letter-spacing: 0.05rem;line-height: 1.5;display: flex;flex-direction: column;align-items: center;padding-bottom: 80px;}
main ul,main li,main dl,main dd,main dt {padding: 0!important;margin: 0;box-sizing: border-box;}
main h1,main h2,main h3,main h4 {text-align: center;width: 100%;    font-weight: bold;}
main h1{font-size: min(8vw, 24px);}
main h2{font-size: min(5.4vw, 22px);margin-bottom: 3%;}
main h3,main h4 {font-size: min(5.2vw, 21px);}
main div,main p,main span,main section {box-sizing: border-box;}
main p {font-size: min(4vw, 16px);text-align: left;}
main li {list-style: none;}
main a,main a:visited {text-decoration: none!important;cursor: pointer!important;}
main section {width: 100%;padding: 0 4%;}
main section.main_contents {margin: 24% 0 4%;}
.fs24 {font-size: 24px;}
.l-spring {display: flex;flex-direction: column;align-items: center;padding: 0;margin: 0;padding: 5% 4%;}
.l-spring h2{font-size: min(5.2vw, 21px);}
.l-spring h2.sub{font-family: "?????? ProN W6", "Hiragino Kaku Gothic ProN", Osaka, "?? ?????", "MS PGothic", sans-serif;font-size: min(5vw, 20px);color: #333;position: relative;text-align: center;z-index: 0;line-height: 1.4;margin: 0 4% 8%;border-top: 1px solid #F174A0;border-bottom: 1px solid #F174A0;padding: 14px 0 11px;font-weight: normal;}
.mv img {width: 100%;object-fit: contain;}
main p._lead,p._lead {font-size: min(4vw, 16px) !important;width: 100%;margin-left:0!important;margin-right:0!important;margin-bottom:3%;}
.spring-bnr a {font-size: min(4vw, 16px)!important;}
.spring-caption {padding: 0 3%;display: flex;flex-direction: column;gap: 10px;margin: 40px 0 20px;margin:16% 0 8%;;}
.spring-caption h1 {font-size: min(6vw, 24px);margin: 0;background: linear-gradient(transparent 60%, rgba(104, 224, 15, 0.5) 60%);}
.spring-caption h2{margin-top:1em;font-size: min(4.6vw, 20px);}
.spring-caption p {padding: 6% 0 3%;text-align: center;line-height: 1.6;padding: 1% 0 0;text-align: left;}
.spring-lead ul {display: flex;}
.spring-lead ul li img {width: 100%;}
.spring-sakuramomo-ranking {background: url(//img.e87.com/s/selection/spring/2025images/spring_ranking_bg.jpg) top center / cover no-repeat;padding: 8% 6%;}
.spring-sakuramomo-ranking p {padding:0 4%;}
.spring-sakuramomo-link {display: flex;flex-direction: column;gap: 20px;padding: 0 1rem;}
.contents_inner{width:92%;margin: 0 auto;}
.spring-link {    width: 100%;letter-spacing: 0;display: block;font-weight: bold;margin: 4% auto 0;text-align: center;background: #63C118;border-radius: 7px;font-size: min(6vw, 16px) !important;padding: 8px 8px 4px;color: var(--black);color: #fff !important;box-sizing: border-box;}
.spring-link {font-size: min(4vw, 16px);color:#fff;position:relative;}
.spring-link:before {content: '';width: 6px;height: 6px;border: 0;border-top: solid 2px #fff;border-right: solid 2px #fff;position: absolute;top: 50%;right: 8px;margin-top: -4px;transform: rotate(45deg);}
main h2._main{background: url(//img.e87.com/s/selection/spring/2025images/spring_title_bg.png) center top / auto no-repeat;padding-bottom:4em;}
.spring-bnr {display: flex;flex-wrap: wrap;justify-content: center;align-items: center;    margin-bottom: 6%;}
.spring-bnr li {width: calc(100% / 2 - 30px);margin: 0 3%;}
.spring-bnr a {display: flex;flex-direction: column;align-items: center;gap: 1rem;}
.spring-bnr a img {width: 100%;}
.spring-bnr span {display: inline-block;position: relative;}
.spring-bnr span::after {content: "";position: absolute;margin: auto;top: 0;bottom: 0;right: -1rem;width: 8px;height: 8px;border-top: 2px solid #555555;border-right: 2px solid #555555;transform: rotate(45deg);transition: 0.2s;}
.l-special {padding: 8% 6%;}
.l-special h2 {margin-bottom: 4%;}
.spring-sakuramomo {background: #FCF0F0 url(//img.e87.com/s/selection/spring/2025images/spring_sakuramomo_bg.png) top center / contain no-repeat;}
.spring-tulip {background: url(//img.e87.com/s/selection/spring/2025images/spring_tulip_bg.png) top center / contain no-repeat,linear-gradient(150deg, rgba(248, 245, 239, 1), rgba(247, 247, 247, 1) 51%, rgba(248, 245, 239, 1));}
.spring-valentine {background: url(//img.e87.com/s/selection/spring/2025images/spring_valentine_bg.png) top center / contain no-repeat,linear-gradient(150deg, rgba(240, 226, 217, 1), rgba(237 230, 223, 1) 51%, rgba(240, 226, 217, 1));}
.spring-equinox {background: url(//img.e87.com/selection/spring/2025images/spring_equinox_bg.png) top center / contain no-repeat,url(//img.e87.com/selection/spring/2025images/spring_equinox_bg2.jpg) top center / cover no-repeat,linear-gradient(150deg, rgba(240, 226, 217, 1), rgba(237 230, 223, 1) 51%, rgba(240, 226, 217, 1));}
.spring-main {width: 100%;height: 300px;background: url(//img.e87.com/s/selection/spring/2025images/spring_sakuramomo_lead.jpg) top center / cover no-repeat;display: flex;align-items: center;padding-left: 1.2rem;margin-bottom: 20px;}
.spring-tulip .spring-main {background: url(//img.e87.com/selection/tulip/2025images/750-250_tulip_02.jpg) top center / cover no-repeat;}
.spring-valentine .spring-main {background: url(//img.e87.com/selection/valentine/2025images/valentine_main_image.jpg) top center / cover no-repeat;position:relative;}
.spring-equinox .spring-main {background: url(//img.e87.com/selection/ohigan/2025images/PC_top_ohigan_960-320.jpg) top center / cover no-repeat;}
.spring-main p {font-size: min(5vw, 18px)!important;font-weight: bold;color: #E04E75;text-align: left;}
.spring-tulip .spring-main p {color: #000;}
.spring-valentine .spring-main p {color: #5c383a;position: absolute;top: 2em;color: #EF3F71;}
.spring-equinox .spring-main p {color: #000;}
.spring-item-list {display: flex;flex-wrap: wrap;gap: 1rem;justify-content: space-around;letter-spacing: 0;margin-bottom: 30px;}
.spring-item-list li {width: calc(100% / 2 - 10px);font-size: min(3.4vw, 14px)!important;display: flex;flex-direction: column;}
.spring-item-list li img {width: 100%;margin-bottom: 5px;}
.spring-item-list li a span {overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
.spring-pickup h3 {font-size: min(5.3vw, 20px);background: url(//img.e87.com/s/selection/spring/2025images/spring_text_line.png) bottom center / auto no-repeat;padding-bottom: 10px;margin-bottom: 20px;}

/*---------------------------------
‘æ“ñ’e ver2
-----------------------------------*/
.new_item_info .info{margin: 4% 4% 3%;border: 1px solid #EF7F8C;padding: 8px 1em;}
.new_item_info a{display: block;font-size: min(4vw, 16px);line-height: 1.4;display: flex;align-items: baseline;font-weight: bold;flex-direction: column;}
.new_item_info a span{text-align: center;display: inline-block;padding: 4px 4px 5px;width: 100%;background: #EF7F8C;color: #fff;border-radius: 4px;font-size: 16px;margin-bottom: 3%;}
.spring-limited{margin:4% 0 4%;}
.spring-limited .l-spring{border: 1px solid #eee;}
.spring-limited .spring-main {width: 100%;height: 300px;background: url(//img.e87.com/selection/spring/2025images/spring_limited_lead.jpg) top right / cover no-repeat;display: flex;align-items: center;padding-left: 1.2rem;margin-bottom: 20px;}
.spring-limited .spring-main p{color: #000;text-shadow: 2px 2px 10px #FFF, -2px 2px 10px #fff, 2px -2px 10px #fff, -2px -2px 10px #fff;}
.wrap_new{position:relative!important;}
.wrap_new span._new{position: absolute;top: 0;left: 0;padding: 2px 3px 0px 3px;background: red;color: #fff;font-weight: bold;font-family: "????", Meiryo, "?????? Pro W6", "Hiragino Kaku Gothic Pro", Osaka, "?? ?????", "MS PGothic", sans-serif;font-size: min(3.8vw, 14px);}
.pickup1 .wrap_new span._new{position: absolute;top: 0;left: 0;padding: 5px 5px 3px 6px;background: red;color: #fff;font-weight: bold;font-family: "????", Meiryo, "?????? Pro W6", "Hiragino Kaku Gothic Pro", Osaka, "?? ?????", "MS PGothic", sans-serif;font-size: min(4.2vw, 16px);}
#body main{padding-bottom:40px;overflow: hidden;}
.navi_spring {position: relative;z-index: 1;}
.content-common{padding-top: 18%;margin-top: -4%;}

/* -----------------------------------------------------------
addition0310 
----------------------------------------------------------- */
.navi_spring_txt {height:45px!important;}
.spring-bnr span{    color: #555;font-weight: bold;}

/*---------------------------------
??????? rank all
-----------------------------------*/
.area_rank{margin: 3% 0 8%;position:relative;}
.rank_box dl dt {font-size: 36px;color: #fff;line-height: 42px;text-align: center;position: absolute;width: 28px;height: 28px;background: #cdcdcd;border-radius: 50%;text-align: center;top: 2px;left: 2px;z-index: 1;}
.rank_box dl dt span{font-family: "Times New Roman";line-height: 1;font-size: 26px;position: absolute;/* line-height: 36px; */top: 50%;left: 50%;transform: translate(-50%, -50%);color: #3c3c3c;}
.rank_box dl dd.item_img {font-size: 13px;color: #333;}
section#ranking {clear:both;overflow:hidden;}
.rank_box {display: block;width: 97%;overflow-x: auto;white-space: nowrap;overflow-scrolling: touch;-webkit-overflow-scrolling: touch;margin: 4% 0 0 3%;}
.rank_box dl {width: 145px;margin: 0 1.5% 1em;display: inline-block;vertical-align: top;position:relative;}
.rank_box dl dd.item_name {font-weight: bold;color: #333333;padding-top: 8px;white-space: break-spaces;font-size: min(4vw, 14px);line-height: 1.4;display: -webkit-box!important;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;}
.rank_box dl dd.price {color: #333333;margin-top: 4%;white-space: break-spaces;overflow: hidden;}
.rank_box dl dt._gold {background: #b09669;}
.rank_box dl dt._gold span{color:#401f1f;}
.rank_box dl dt._silver {background: #9f9a93;}
.rank_box dl dt._silver span{color:#401f1f;}
.rank_box dl dt._bronze {background: #8d5e0d;}
.rank_box dl dt._bronze span{color:#401f1f;}
.rank_box dl dd div {font-size: 18px;color: #401f1f;line-height: unset;text-align: left;position: static;width: unset;height: unset;background: none;border-radius: unset;z-index: 1;margin-bottom: 0;top:0;left:0;}
.rank_box dl dd div span{display: block;font-family: 'Noto Serif JP', serif;}
.rank_box dl dd div._gold {background:none;position:relative;padding-left:1.5em;}
.rank_box dl div._gold::before {content: '';background: url(//img.e87.com/img/icon/icon_rank_no1.gif) no-repeat;width: 24px;height: 22px;background-size: 100%;position: absolute;left: 0;top: 0px;}
.rank_box dl dd div._gold span{color:#401f1f;}
.rank_box dl dd div._silver {background:none;position:relative;padding-left:1.5em;}
.rank_box dl div._silver::before {content: '';background: url(//img.e87.com/img/icon/icon_rank_no2.gif) no-repeat;width: 24px;height: 22px;background-size: 100%;position: absolute;left: 0;top: 0px;}
.rank_box dl dd div._silver span{color:#401f1f;}
.rank_box dl dd div._bronze {background:none;position:relative;padding-left:1.5em;}
.rank_box dl div._bronze::before {content: '';background: url(//img.e87.com/img/icon/icon_rank_no3.gif) no-repeat;width: 24px;height: 22px;background-size: 100%;position: absolute;left: 0;top: 0px;}
.rank_box dl dd div._bronze span{color:#401f1f;}
.rank_box_other dl dd div span {display: block;font-size: 16px;}

.spring-sakuramomo-ranking{width:100%;padding:0;background:unset;}

/* -----------------------------------------------------------
item_box
----------------------------------------------------------- */
.item_wrap{margin:4% 0;padding:0;}
.items{padding: 4% 0;margin: 0;position:relative;z-index:1;background:#fff;}
.item_box {position: relative;padding: 0;align-items: stretch;}
.item_left {text-align: center;}
.item_left a {transition:0.2s;}
.item_img3 {display: flex;}
.item_wrap .item_img3_left {position:relative;}
.item_wrap .item_img3_left._new::before{ content: "NEW";background: #e20000;padding: 6px 8px;color: #ffff;position: absolute;left: 0;top: 0;font-size: 16px;z-index: 10;}
.item_wrap .item_img3_left ._hidden { position:absolute;opacity:0;top:0;left:0;transition:0.2s;}
.item_wrap .item_img3_left img {width:100%;height:auto;transition:0.2s;}
.item_img_top{ margin-bottom: 5px;}
.wrap_title{position:relative;text-align: center;padding: 0 0 8px;font-weight: bold;color: #fff;margin-top:0;}
.wrap_title .h4_sub {font-size:18px;position: relative;color:#fff;font-weight: bold;}
.wrap_title h4 {font-size: min(4.6vw, 20px);font-weight: 600;text-align: center;line-height: 1.4;color: #ED4B73;position:relative;z-index: 0;padding-bottom: 0;}
.wrap_title .h4_sub:before {content: '';position: absolute;top: 11px;display: inline-block;width: 20px;height: 2px;background-color: #fff;-webkit-transform: rotate(60deg);transform: rotate(60deg);left: -20px;}
.wrap_title .h4_sub:after {content: '';position: absolute;top: 11px;display: inline-block;width: 20px;height: 2px;background-color: #fff;-webkit-transform: rotate(-60deg);transform: rotate(-60deg);right: -20px;}
.item_box .right {padding-top:4px;}

.right .area_name{margin:1em 0;}
.right .area_name ._name{font-size: min(4.8vw, 20px);font-weight: bold;color: #ED4B73;text-align: left;line-height: 1.5;letter-spacing: -1px;text-align: center;}
.right .area_name ._price{display: block;text-align: right;font-size: 16px;margin-top: 2px;color:#3c3c3c;font-weight: bold;text-align: center;}
.right .area_lead {margin:0.75em 0;}
.right .area_lead ._lead{font-size:16px;line-height: 1.6;color:#3c3c3c;text-align: left;margin:0.75em 0;}
.otodoke {color: #ec1b9b;background: #ffa9de;display: inline;font-size: 14px;position: absolute;top: -13px;border-radius: 13.5px;padding: 2px 10px;font-weight: 600;left: 12px;}

.area_point_icon{display:flex;justify-content: space-between;flex-wrap:wrap;align-items: center;margin: 3% 0 4%;}
.area_point_icon span{font-size:12px;text-align: center;width: 32%;display:inline-block;background: #ffea8e;font-weight: bold;margin-bottom: 1%;display: flex;justify-content: center;align-items: center;padding: 4px 0 2px;border-radius: 25px;line-height: 1.2;height:3em;}

.area_button {position: relative;}
.area_button a{font-size: min(4vw, 16px);background: #63C118;color: #fff!important;padding: 8px 8px 4px;display: block;margin-top: 1em;text-align: center;border-radius: 8px;line-height: 1;border: 2px solid #63C118;transition:0.2s;box-sizing: border-box;position:relative;}
.area_button a:before {content: '';width: 6px;height: 6px;border: 0;border-top: solid 2px #fff;border-right: solid 2px #fff;position: absolute;top: 50%;right: 8px;margin-top: -4px;transform: rotate(45deg);}
.area_button a span{font-size: min(5vw, 20px);font-weight: bold;margin-top: 6px;display: inline-block;}
#item-body2 .area_button {width:75%;margin:0 auto;}

.other_product{display:flex;flex-wrap:wrap;}
.other_product dl{width: 48%;margin:2% 1%;}

.other_product .item_catch {font-size: min(3.8vw, 16px);font-weight: 600;text-align: center;line-height: 1.2;color: #ED4B73;position: relative;z-index: 0;margin-bottom: 0.5em;}
.other_product .item_name{margin-top:2%;}

.wrap_osusume{position:relative;}
.osusume{position: absolute;right: 0;top: -55px;}

h3.common{margin-bottom:0.75em;border-bottom: 1px solid #eee;}

.spring-equinox .spring-link{background:#3F4052;}

/*?????? local navi*/
.navi_spring {display: flex;justify-content: space-evenly;align-items: center;color: #555555;margin-bottom: 4%;padding: 0 4%;position: relative;z-index: 1;}
.navi_spring:last-of-type {padding-bottom: 40px;}
.navi_spring a {width: 48%;}
.navi_spring_box {margin: 0 7px;border-radius: 8px;transition: 0.2s;}
.navi_spring_txt {text-align: center;font-weight: 500;position: relative;transform: rotate(0.03deg);height: 50px;display: flex;justify-content: center;align-items: flex-end;line-height: 1.5;border-bottom: 2px solid #63C118;padding-bottom: 0.25em;color: #555555;font-size: min(3.8vw, 16px);}
.navi_spring_txt::before {content: '';width: 21px;height: 21px;background: #63C118;border-radius: 50%;position: absolute;bottom: -2em;transition: 0.2s;}
.navi_spring_txt::after {content: "";position: absolute;bottom: -2em;left: 50%;transform: translateX(-50%);border: 6px solid transparent;border-top: 6px solid #fff;transition: 0.2s;}
.price_outer {display: flex;align-items: center;justify-content: center;padding-top: 4%;flex-wrap: wrap;}
.price_box {width: 48%;margin: 1%;}
.price_inner {align-items: center;width: 100%;height: 80px;position: relative;border-radius: 5px;    border: 1px solid #63C118;background-image: linear-gradient(135deg, #aded7b 0%, #63C118 50%);}
.price_inner::after {content: "";position: absolute;margin: auto;bottom: 0.5em;left: 50%;width: 6px;height: 6px;border-top: 2px solid #fff;border-right: 2px solid #fff;transform: rotate(45deg) translateX(-50%);transition: 0.2s;}
.price_txt {display: flex;font-size: 16px!important;letter-spacing: 0;color: #555555;font-weight: bold;line-height: 1.3;transition: .2s;box-sizing: border-box;width: 100%;height: 87%;align-items: center;justify-content: center;margin: 0;color: #fff;}
.price_inner .price_pic {transition: 0.2s;}

#to-top {position: fixed;bottom: 18%;right: 3%;width: 50px;text-decoration: none;background-color: #a40000;display: block;text-align: center;opacity: 0;transition: 0.2s;color: #fff;line-height: 42px;font-size: 16px;z-index: 10;}
#to-top.fade {opacity: 1;transition: 0.2s;}
.wrap-top {position: relative;text-align: center;font-weight: bold;padding-top: 4px;}
.wrap-top::after {content: '';background: url(https://img.e87.com/selection/spring/2025images/60-60_icon-topes.png) no-repeat;position: absolute;width: 55px;height: 55px;left: 50%;top: 50%;transform: translate(-50%, -50%);background-size: contain;z-index: -1;border: 2px solid #fff;border-radius: 50%;}


/* -----------------------------------------------------------
?????? main_lead
----------------------------------------------------------- */

.heading_bg {
    flex-direction: column;
    text-align: center;
    position: relative;
    z-index: 0;
}

.heading_bg::before {
    content: '';
    background: url(//img.e87.com/selection/spring/2025images/spring_bg_image01.png) top center / contain no-repeat;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    height: 270px;
    z-index: -1;
}

.mv{padding:0;}

.heading_common_sub {
    position: relative;
    text-align: left;
    padding-bottom: 1em;
    text-align: center;
    margin-bottom: 1%;
}

.heading_common_sub::after {
    content: '';
    background: url(//img.e87.com/selection/spring/2025images/heading_line_bg.png) no-repeat;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: 100%;
    height: 29px;
    text-align: center;
    background-size: 100%;
}

.sakura-flowergift{padding:0;margin: 0;}