@charset "Shift_JIS";

/*---------------------------------
?????? sub main ttl
-----------------------------------*/
.sub_mainttl div.sub_mainttl_wrap {position: relative;margin: 16px 4%;}
.sub_mainttl p.heading_catch{text-align: center;font-size: min(4.6vw, 18px);color: #007A88;font-weight: bold;}
.sub_mainttl div.sub_mainttl_wrap h1 {color: #007A88;font-size: min(4.8vw, 20px);text-align: center;padding-bottom: 3%;font-weight: 700;color: #007A88;}
.sub_mainttl_txt {line-height: 1.6;font-size: min(4vw, 15px);color: #252525;text-align: left;font-weight: 500;}
.sub_mainttl div.sub_mainttl_wrap div.agedday_info {font-size: min(3.6vw, 16px);margin: 3% 0 0;background: #4f3464;padding: 4% 3%;color: #fff;box-sizing: border-box;}
.sub_mainttl div.sub_mainttl_wrap div.agedday_info p {font-weight: bold;line-height: 1.6;text-align: center;color:#fff;}
.sub_mainttl div.sub_mainttl_wrap div.agedday_info p a{margin-bottom:0.5em;font-size: min(3.9vw,15px);font-weight: bold;color: #fff;letter-spacing: 1px;display:block;text-decoration: underline;}
.sub_mainttl div.sub_mainttl_wrap div.agedday_info p.agedday_info_attention {font-weight: normal!important;font-size: 12px;padding-top: 5px;color: #fff;}
.sub_mainttl div.sub_mainttl_wrap div.agedday_info table tr{line-height: 1.6;}
.area_lead_image{display:flex;margin-top: 3%;}

/*---------------------------------
?????? local navi
-----------------------------------*/
.navi_agedday {display: flex;justify-content: center;align-items: center;flex-wrap: wrap;margin:6% 0;}
.navi_agedday_box {width: 45%;margin: 1%;border-radius: 8px;}
.navi_agedday_pic {width: 180px;overflow: hidden;}
.navi_agedday_txt {color: #A47864;text-align: center;font-size: 15px;font-weight: bolder;position: relative;transform: rotate(0.03deg);display: flex;justify-content: center;align-items: center;border: 1px solid #A47864;border-radius: 15px;line-height: 1.2;padding: 6% 0;}
._ohigan .navi_agedday_txt {color: #007A88;}
._style .navi_agedday_txt {color: #007A88;}
.navi_agedday_pic img {width: 100%;height: auto;box-sizing: border-box;border-radius: 5px 5px 0px 0px;border: 1px solid #b5a695;border-bottom: none;}
.adjust_ochugen {background: linear-gradient(transparent 50%, #f9ff00 50%)}

/*---------------------------------
??? heading
-----------------------------------*/
.wrap_section_heading {text-align: center;position: relative;padding:0 4%;margin:4% 0;}
.wrap_section_heading h2._heading {font-size: min(4.7vw, 24px);color: #007A88;position: relative;text-align: center;font-weight: 600;margin: 0 0 6%;line-height: 1.6;    position: absolute;top: 50%;left: 50%;transform: translate(10px, 10px);transform: translate(-50%, -50%);width: 100%;}

/*---------------------------------
?????? txt common
-----------------------------------*/
.common_txt {font-size: min(4.1vw, 16px);line-height: 1.8;text-align: left;color: #333;margin: 1em 0;padding: 0 6%;}
._annotation{font-size:13px;display:block;}

/*---------------------------------
?????? txt common
-----------------------------------*/
.main_contents{margin:16% 0;}
.main_contents:first-of-type{margin:12% 0 16%;}

/*---------------------------------
????? btn common
-----------------------------------*/
.common_btn {padding:0 4% 4%;}
.area_btn {text-align: center;}
.area_btn {margin-top: 8%;padding: 0 4%;}
.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;}
.area_btn p.btn_text {width: 96%;position: relative;font-size: min(4.6vw, 18px);display: inline-block;color: #fff;font-weight: bold;border-radius: 5px;line-height: 1.3;transition: .2s;box-sizing: border-box;text-align: center;background: #A47864;color: #fff;border: 1px solid #A47864;padding: 3%;}
.area_btn._all p.btn_text {background: #007A88;color: #fff;border: 1px solid #007A88;}
.area_btn p.btn_text::after {content: "";position: absolute;margin: auto;top: 50%;right: 0.75em;width: 7px;height: 7px;border-top: 2px solid #fff;border-right: 2px solid #fff;transform: rotate(45deg) translateY(-50%);transition: 0.2s;}
.area_btn._all p.btn_text {background: #007A88;color: #fff;border: 1px solid #007A88;}
.area_btn._all p.btn_text::after {content: "";position: absolute;margin: auto;top: 50%;right: 1em;width: 8px;height: 8px;border-top: 2px solid #fff;border-right: 2px solid #fff;transform: rotate(45deg) translateY(-50%);transition: 0.2s;}
.area_btn._banner{margin:1em auto;border:1px solid #eee;transition:0.2s;}

/*---------------------------------
スタイルから選ぶ style
-----------------------------------*/
#style .search_style .search_style_list {justify-content: center;padding: 0;margin: 24px 0;display:flex;flex-wrap: wrap;}
#style .search_style .search_style_list .search_style_contents {width: 30%;padding:0;margin: 1%;}
#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;}

/*---------------------------------
????????? styles
-----------------------------------*/
.common_bnr._styles{box-sizing: border-box;margin-bottom: 4%;position:relative;}
.common_bnr._styles h3{font-weight: 600;font-size: min(5vw, 24px);line-height: 1.2;color: #007A88;text-align: center;}
.common_bnr._styles h3 .adjust_small{font-size:large;display: block;text-align: center;font-weight: 500;margin-bottom: 3%;}
.common_bnr._styles .area_img_txt{position:absolute;top: 50%;left: 0;transform: translateY(-50%);bottom: unset;margin:2em;margin-top:0;}
.common_bnr._styles .area_img_txt .adjust_style_heading{font-size:15px;color:#007A88;font-weight: bold;}
.heading_styles_txt{font-size: 16px;font-family: "????", Meiryo, "?????? Pro W6", "Hiragino Kaku Gothic Pro", Osaka, "?? ?????", "MS PGothic", sans-serif;line-height: 1.6;font-size: min(4.1vw, 16px);margin: 1em 4%;}

/*---------------------------------
??????? rank various
-----------------------------------*/
.area_various .rank_box{overflow: unset;display: flex;flex-wrap: wrap;margin: 0;width: 100%;padding: 0 4%;box-sizing: border-box;}
.area_various ._bnr dd.item_img{margin-top:27px;position: relative;}
.area_various ._bnr dd.item_img img{border-radius:5px;}
.area_various .wrap_bnr_txt{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);color: #fff;}
.area_various .rank_box dl{width:46%;padding:0;margin:2%;}
.area_various .wrap_bnr_txt span{font-family: "?????? ProN W6", "Hiragino Kaku Gothic ProN", Osaka, "?? ?????", "MS PGothic", sans-serif;font-size: min(4.6vw, 18px);font-weight: bold;text-align: center;margin: 12% 0;line-height: 1.2;}
.area_various > *:first-child {margin-top:2em;}
.area_various ._bnr dd::after {content: "";position: absolute;margin: auto;bottom: 4%;left: 50%;width: 6px;height: 6px;border-top: 2px solid #fff;border-right: 2px solid #fff;transform: rotate(45deg) translateX(-50%);}
.area_various .rank_box dl dd.item_name{padding-top:8px;}

/*---------------------------------
??????? arae pickup
-----------------------------------*/
.area_pickup .rank_box{overflow: unset;display: flex;flex-wrap: wrap;margin: 0;width: 100%;padding: 0 4%;box-sizing: border-box;}
.area_pickup ._bnr dd.item_img{margin-top:27px;position: relative;}
.area_pickup ._bnr dd.item_img img{border-radius:5px;}
.area_pickup .wrap_bnr_txt{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);color: #fff;}
.area_pickup .rank_box dl{width:46%;padding:0;margin:2%;}
.area_pickup .wrap_bnr_txt span{font-family: "?????? ProN W6", "Hiragino Kaku Gothic ProN", Osaka, "?? ?????", "MS PGothic", sans-serif;font-size: min(4.6vw, 18px);font-weight: bold;text-align: center;margin: 12% 0;line-height: 1.2;}
.area_pickup > *:first-child {margin-top:2em;}
.area_pickup ._bnr dd::after {content: "";position: absolute;margin: auto;bottom: 4%;left: 50%;width: 6px;height: 6px;border-top: 2px solid #fff;border-right: 2px solid #fff;transform: rotate(45deg) translateX(-50%);}
.area_pickup .rank_box dl dd.item_name{padding-top:8px;}

/* --------------------------------------
???? circle common
------------------------------------------- */
.price_outer {display: flex;align-items: center;justify-content: center;flex-wrap: wrap;align-items: flex-start;}
.price_box {width:45%;margin: 1%;}
.price_inner {align-items: center;width: 100%;position: relative;background: #E8DDD8;border: 1px solid #E8DDD8;box-sizing: border-box;}
.price_inner::after {    content: "";position: absolute;margin: auto;top: 50%;right: 1em;width: 6px;height: 6px;border-top: 2px solid #007A88;border-right: 2px solid #007A88;transform: rotate(45deg) translateY(-50%);}
.price_txt {font-size: min(4.6vw, 18px);color: #007A88;padding: 4% 0;font-weight: bold;line-height: 1.4;transition: .2s;box-sizing: border-box;text-align: center;width: 100%;}

/* --------------------------------------
???????? scroll top
------------------------------------------- */
#to-top {position: fixed;bottom: 100px;right: 24px;width: 55px;text-decoration: none;display: block;text-align: center;opacity: 0;transition: 0.2s;color: #fff;line-height: 48px;font-size: 16px;z-index: 10;transition: 0.2s;}
#to-top.fade {opacity: 1;transition: 0.2s;}
.wrap-top {position: relative;text-align: center;font-weight: bold;padding-top: 12px;height: 60px;z-index: 0;border-radius: 50%;width: 60px;box-sizing: border-box;font-size: 18px;}
.wrap-top::after {content: '';background: url(https://img.e87.com/selection/agedday/2025images/icon_top.png) no-repeat;position: absolute;width: 62px;height: 60px;left: 50%;top: 50%;transform: translate(-50%, -50%);background-size: contain;z-index: -1;}

/* ???拮?i?r ??拉?  */
section.genre .gen_nav { border-bottom: solid 4px #4f3464;height: 44px;margin: 0;}
section.genre .gen_nav ul {list-style: none;overflow: hidden;text-align: center;height: 44px;word-break: break-all;display: flex;}
section.genre .gen_nav ul li.gen_nav01 {width: 14%;height: 40px;padding: 1px;background: #4f3464;border: 3px solid #4f3464;margin-right: 2px;-webkit-border-top-left-radius: 3px;-webkit-border-top-right-radius: 3px;-moz-border-radius-topleft: 3px;-moz-border-radius-topright: 3px;box-shadow: 2px 2px rgba(0,0,0,0.1);box-sizing: border-box;}
section.genre .gen_nav ul li.gen_nav00 {width: 14%;height: 40px;padding:1px;border: solid 1px #CCC;margin-top: 1px;margin-right: 2px;-webkit-border-top-left-radius: 3px;-webkit-border-top-right-radius: 3px;-moz-border-radius-topleft: 3px;-moz-border-radius-topright: 3px;box-shadow: 2px 2px rgba(0,0,0,0.1);box-sizing: border-box;}
section.genre .gen_nav ul li.gen_nav01 p, .gen_nav ul li.gen_nav00 p {padding-top: 0 !important;display: block;font-size: min(2.6vw, 13px);}
section.genre li.gen_nav01 p {color: #fff;}

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

section#selectAgedday.search{margin: 10px; background: #ececec; border-radius: 2px; text-align: center; padding: 3px; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; box-align: center; -webkit-flex-align: center; flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; box-pack: center; -webkit-flex-pack: center; flex-pack: center; -webkit-justify-content: center; justify-content: center;}
section#selectAgedday.search p.txt{display: inline-block; color: #e73078; width: 100px; float: left; font-weight: bold; text-align: left; margin-left: 15px;}
section#selectAgedday.search p{display: inline-block;}
section#selectAgedday select{max-width:100%;width: 80%;padding: 0 35px 0 5px;-webkit-appearance: none;-moz-appearance: none;appearance: none;background: url(//img.e87.com/img/usr/sb/pulldown.png) 96% center no-repeat;color:#111111;font-size:14px;}
section#selectAgedday.search p{display: inline-block;}
.clearfix:after{content: "."; display: block; height: 0; clear: both; visibility: hidden; font-size: 0; line-height: 1; overflow: hidden;}

/* --------------------------------
pickup column ?????????
-------------------------------- */
.pickup_column{margin:8% 0;padding: 0 4%;}
.pickup_column_image{padding: 0 4%;}
.pickup_column_txt{padding: 0 4%;line-height: 1.5;font-size: 15px;margin-top:4%;}
.pickup_column_heading_3{font-size: 15px;font-weight: bold;margin:0 4%;margin-top: 1em;border-bottom: 1px solid;}

/* --------------------------------------
?????? area_feature
------------------------------------------- */
.area_feature{padding:0 4%;}
.area_feature ul li{margin:4% 3%;}
.area_feature ul li dl dd{font-size: min(4.1vw, 16px);margin-top: 1%;}
._comming{position:relative;}
._comming::before{content: '';width: 100%;height: 100%;position: absolute;background: #333;z-index: 1;background: rgba(0, 0, 0, 0.5);}
._comming::after {content: '2/10\FF08\6708\FF09\8CA9\58F2\958B\59CB';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_feature ul.feature_l._mother{margin:2em 0 1em;}
.area_feature ul.feature_l._mother .common_txt{font-weight: bold;color:#F174A0;font-size: min(4.1vw, 18px);text-align: center;margin: 1em 0 0.25em;line-height: 1.4;}

/*---------------------------------
????? nav new
-----------------------------------*/
section.genre_grade{padding:0 1%;}
.gen_grade_nav{width: 100%;height: 44px;margin: 5px 0 0 auto;text-align: center;}
.gen_grade_nav ul{display: flex;list-style: none;text-align: center;height: 44px;word-break: break-all;}
.gen_grade_nav ul li.genre_grade_navi{width: 49%;height: 38px;padding: 2px;float: left;margin-top: 2px;margin-right: 2px;background: #eee;    border-bottom: 2px solid #c9c9c9;}
.gen_grade_nav ul li.genre_grade_navi:last-child{margin-right:0;}
.genre_grade_navi p.txt10{font-size: min(3vw,11px);}
.gen_grade_nav ul li.genre_grade_navi_act{width: 49%;height: 40px;padding: 2px 4px;background: #007A88;margin-right: 2px;    border-bottom: 2px solid #007A88;}
.gen_grade_nav ul li.genre_grade_navi_act p.txt10{color:#fff;font-size:11px;}
section.search {margin: 10px 10px 0 10px;background: #ececec;border-radius: 2px;text-align: center;padding: 3px;}
section.search p.select {padding: 0 0 0 10px;vertical-align: bottom;}
section select{max-width: 100%;}

/*---------------------------------
???????????? contents single
-----------------------------------*/
.common_bnr {margin: 4% 0 8%;position: relative;}
.common_contents {margin: 0 auto 40px;display: flex;color: #333;padding: 0 20px;box-sizing: border-box;}
.common_contents h3 {font-size: 20px;margin-bottom: 1em;line-height: 1.8;}
.common_contents p.common_txt {font-size: 16px;margin-bottom: 1em;line-height: 1.8;}
.common_contents .area_right {margin-left: 3em;padding: 0 1em;}
.area_img_annotation {font-family: 'Noto Serif JP', serif;margin: 4px;font-weight: 500;font-size: min(3.8vw, 14px);display: block;position: absolute;bottom: 0;right: 0;}
.submit_right {position: relative;}
.submit_button {text-align: center;width: 94%;margin: 0 auto;}
.submit_txt {width: 100%;font-size: min(4.2vw, 16px);line-height: 1.7;color: #333;margin: 1em 0 0.5em;}
.submit_txt span {font-size: 15px;display: block;font-size: min(4.2vw, 16px);}
.submit_img {transition: 0.2s;position: relative;}
.button_txt {border: 1px solid #007A88;background: #007A88;background-size: 100% 100%;font-size: 16px;font-weight: bold;color: #fff;border-radius: 11px;padding: 8px 16px 8px 24px;line-height: 1.4;position: relative;transition: 0.2s;}
.button_txt::after {    content: "";position: absolute;margin: auto;top: 50%;right: 1em;width: 8px;height: 8px;border-top: 2px solid #fff;border-right: 2px solid #fff;transform: rotate(45deg) translateY(-50%);transition: 0.2s;}
._custom .submit_button a{display:block;margin:3% 0;}
._custom .button_txt .price{display:block;}
.contents_single_submit {padding: 0 4%;align-items: stretch;}
h3.heading_single {font-size: min(4.4vw, 18px);color: #007A88;position: relative;text-align: center;z-index: 0;line-height: 1.7;margin: 14% 4% 4%;font-weight: bold;border-bottom: 1px dotted #919191;padding-bottom: 2%;}
h3.heading_single span{color: #0E3092;}
.area_contents_single h3.heading_single:first-of-type {margin:4%;}

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

h3._heading{font-size: min(4.4vw, 18px);color: #007A88;position: relative;text-align: center;z-index: 0;font-weight: 600;margin:0 4%;line-height: 1.4;background: #E8DDD8;padding: 12px 8px 8px;}

/*---------------------------------
????? common heading
-----------------------------------*/
.area_point {position: relative;margin: 2em 1%;padding: 0% 0 4%;border: solid 3px #6bb8ff;border-radius: 8px;box-sizing: border-box;}
.area_point .box-title {position: absolute;display: inline-block;top: -13px;left: 10px;padding: 0 9px;line-height: 1;font-size: min(4.7vw, 24px);background: #FFF;color: #6bb8ff;font-weight: bold;}
.area_point p.common_txt {text-align: left;margin-bottom: 0;}