@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;}

#rank {position: relative;}
section#ranking {clear: both;position: relative;}
.rank_box {display: flex;flex-direction:column;justify-content: center;margin-bottom: 32px; gap:20px;}
.rank_box dl {padding: 0 16px;font-family: "????", Meiryo, "?????? Pro W6", "Hiragino Kaku Gothic Pro", Osaka, "?? ?????", "MS PGothic", sans-serif;}
.rank_box._top dl {width: 230px;padding: 0 12px;}
.rank_box dl div {font-size: 18px;color: #401f1f;line-height: 20px;margin-bottom: 4px;z-index: 1;position: static;background: none;width: unset;height: unset;text-align: left;}
.rank_box dl div._gold::before {content: '';background: url(http://img.e87.com/img/icon/icon_rank_no1.gif) no-repeat;width: 30px;height: 26px;background-size: 100%;position: absolute;left: 0;top: -6px;}
.rank_box dl div._silver::before {content: '';background: url(http://img.e87.com/img/icon/icon_rank_no2.gif) no-repeat;width: 30px;height: 26px;background-size: 100%;position: absolute;left: 0;top: -6px;}
.rank_box dl div._bronze::before {content: '';background: url(http://img.e87.com/img/icon/icon_rank_no3.gif) no-repeat;width: 30px;height: 26px;background-size: 100%;position: absolute;left: 0;top: -6px;}
.rank_box dl div._gold {background: none;padding-left: 2em;background: none;width: unset;height: unset;border-radius: unset;text-align: left;}
.rank_box dl div._gold span {color: #401f1f;font-size: 21px;}
.rank_box dl div._silver {padding-left: 2em;background: none;width: unset;height: unset;border-radius: unset;text-align: left;}
.rank_box dl div._silver span {color: #401f1f;font-size: 21px;}
.rank_box dl div._bronze {padding-left: 2em;background: none;width: unset;height: unset;border-radius: unset;text-align: left;}
.rank_box dl div._bronze span {color: #401f1f;font-size: 21px;}
.rank_box._bottom dl {padding: 0 17px;}
.rank_box._bottom dl div {font-size: 28px;background: none;width: unset;height: unset;text-align: left;}
.rank_box dl div span {font-family: 'Noto Serif JP', serif;font-size: 21px;color: #4f3464;position: static;}
.rank_box .item_img {position: relative; margin-bottom: 10px;}
.rank_box .item_img span._delivery {position: absolute;bottom: 0;right: 0;padding: 4px 7px 2px;background: #304fc4;color: #fff;z-index: 1;}
.rank_box .item_img span._delivery._noshi {position: absolute;bottom: 0;padding: 4px 7px 2px;background: #bb00e7;color: #fff;z-index: 1;}
.rank_box._bottom {padding-top: 0;}
.rank_box._bottom dl dd.item_img {margin: 24px 0 0;}
.rank_box dl dd.item_name {margin-top: 8px;margin-bottom: 6px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;font-size: min(3.8vw, 16px) !important;line-height: 1.3;letter-spacing: 0;}
.rank_box dl dd.price {font-size: min(4vw, 12px);letter-spacing: 0;}
.rank_box img {width: 100%;height: auto;}

.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(5.8vw, 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;}

/*---------------------------------
‘æ“ñ’e ver2
-----------------------------------*/
.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;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);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/earlysummer/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: 1.125em;text-align: center;margin-bottom: 1%;line-height: 1.4;}
.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%;}
.heading_common_sub_txt {font-size: medium;}
.sakura-flowergift{padding:0;margin: 0;}
.newfaq_ttl {text-align: center;color: #722b1b;font-weight: 700;font-size: 16px;}
.new_ttl_eng {background: #722b1b;color: #fff;font-size: 32px;text-align: center;line-height: 42px;}

