@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;
	font-family: serif;
	width: 100%;
	font-weight: bold;
}
main h1{
	font-size: min(8vw, 24px);
}
main h2,
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: center;
}
main li {
	list-style: none;
}
main a,
main a:visited {
	text-decoration: none!important;
	cursor: pointer!important;
}
main section {
	width: 100%;
}
.fs24 {
	font-size: 24px;
}
.mb0 {
	margin-bottom: 0!important;
}


/*ローカルナビ local navi*/
.navi_spring {display: flex;align-items: center;color: #555555;margin-bottom: 30px;gap: 1.5rem 1rem;justify-items: center;flex-wrap: wrap;justify-content: center;}
.navi_spring_box {margin: 0 7px;border-radius: 8px;transition: 0.2s;}
.navi_spring_pic {width: 180px;overflow: hidden;}
.navi_spring_txt {font-family:sans-serif; font-size: min(4vw, 16px)!important;font-weight: 500;position: relative;transform: rotate(0.03deg);height: 55px;display: flex;justify-content: center;align-items: flex-end;line-height: 1.5;border-bottom: 2px solid #EF7F8C;padding-bottom: 0.25em;color: #555555;font-size: min(3.4vw, 16px);letter-spacing: 0;}
.navi_spring_txt::before {content: '';width: 24px;height: 24px;background: #EF7F8C;border-radius: 50%;position: absolute;bottom: -2.5em;transition: 0.2s;}
.navi_spring_txt::after {content: "";position: absolute;bottom: -2.5em;left: 50%;transform: translateX(-50%);border: 7px solid transparent;border-top: 7px solid #fff;transition: 0.2s;}
.navi_spring_pic img {width: 100%;height: auto;box-sizing: border-box;border-radius: 5px 5px 0px 0px;border: 1px solid #b5a695;border-bottom: none;}
.navi_spring a {width: 45%;}

#rank {position: relative;}
section#ranking {clear: both;position: relative;}
/*---------------------------------
全体ランキング 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: 6% 0 6% 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{font-family: 'Noto Serif JP', serif;display: block;}
.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 {font-family: 'Noto Serif JP', serif;display: block;font-size: 16px;}
/*---------------------------------
???R?????WOK edit OK
-----------------------------------*/

/*???o?? heading*/
.wrap_heading {text-align: center;}
h2._heading {font-size: min(5.3vw, 20px);color: #555555;position: relative;text-align: center;z-index: 0;font-weight: 600;margin: 20% 0 4%;line-height: 1.4;padding: 0 4%;}
h3._heading {font-size: min(4.3vw, 17px);color: #555555;position: relative;text-align: center;z-index: 0;margin: 4%;line-height: 1.4;margin: 0 4% 4%;}
h2._heading span::before {content: '';position: absolute;width: 30px;height: 30px;background: rgba(16,103,30,0.5);left: -1em;top: -0.5em;z-index: -1;}

/*---------------------------------
?{?^?? CTA
-----------------------------------*/
.common_btn {margin: 40px 0 120px;}
.area_btn {text-align: center;}
.area_btn._top {margin: 1em 1em 0;}
.area_btn p.btn_text {position: relative;font-size: 18px;padding: 18px 64px 13px;display: inline-block;color: #fff;font-weight: bold;border-radius: 5px;line-height: 1.3;transition: .2s;box-sizing: border-box;text-align: center;border: 1px solid #D01C1C;background: #D01C1C;width: 600px;}
.area_btn p.btn_text::after {content: "";position: absolute;margin: auto;top: 50%;right: 2em;width: 8px;height: 8px;border-top: 2px solid #fff;border-right: 2px solid #fff;transform: rotate(45deg) translateY(-50%);transition: 0.2s;}


.price_outer {
	display: flex;
	align-items: center;justify-content: center;padding-bottom: 1em;margin-bottom: 20px;padding-top: 24px;flex-wrap: wrap;gap: 1rem;}
.price_box {width: 40%;transition: 0.2s;}
.price_inner {align-items: center;width: 100%;height: 80px;position: relative;border-radius: 5px;background-image: linear-gradient(130deg, rgba(104, 224, 207, 1), rgba(32, 156, 255, 1));background: #b2c064;border: 1px solid #E0ACB2;background-image: linear-gradient(135deg, #FFE3C9 0%, #FFAFB8 50%);}
.price_inner::after {content: "";position: absolute;margin: auto;bottom: 0.5em;left: 50%;width: 6px;height: 6px;border-top: 2px solid #E97171;border-right: 2px solid #E97171;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;}
.price_inner .price_pic {transition: 0.2s;}

#to-top {position: fixed;bottom: 16%;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/winter/2024images/60-60_icon-top.png) no-repeat;position: absolute;width: 60px;height: 60px;left: 50%;top: 50%;transform: translate(-50%, -50%);background-size: contain;z-index: -1;}