#apl_wrap{font-size: 1.3em}
#apl_wrap img{max-width: 100%;}

/*カラー ------------------------------------
濃緑 #20645e
薄緑 #e0f0eb
オレンジ #f4732e
濃茶 #5e4a10
薄茶 #f9f5f0
*/

/*メインイメージ -------------------------------------*/
.apl_topwrap{
width: 100%;
background-color: #8ad4c7;
/*border-bottom: solid 1px #fff;*/
height: 600px;
}
.apl_topbox{
width: 1100px;
height: 600px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
.main_sp,.top_sub,.top_title,.ball_4,.ball_option,.ball_coupon,.ball_500,.top_bestrate,.top_ill1,.top_ill2{position: absolute;}
.main_sp{
width: 300px;
bottom: -51px;
left: 553px;
transform: rotate(16deg);
}
.top_sub{top: 3px;}
.top_title{top: 91px;left: 10px;}
.ball_4{left: 314px;bottom: 12px;}
.ball_option{width: 160px;bottom: 77px;right: 95px;}
.ball_coupon{width: 190px;bottom: -40px;right: 180px;}
.ball_500{width: 190px;bottom: 205px;right: 110px;}
.top_bestrate{top: 0;right: -5px;}
.top_ill1{bottom: 0;left: -10px;}
.top_ill2{bottom: 0;right: -10px;}

@media screen and (max-width: 767px){
.apl_topwrap{height: auto;}
.apl_topbox{height: 460px;width: 375px;}
.main_sp{width: 170px;bottom: -50px;left: 26%;}
.top_sub{width: 80%;right: 0;top: 4%;}
.top_title{width: 90%;top: 18%;left: 5%;z-index: 1;}
.ball_4{width: 40%;left: 4px;bottom: 100px;}
.ball_option{width: 105px;right: 0px;bottom: 58px;}
.ball_coupon{width: 120px;right: 52px;bottom: -23px;}
.ball_500{width: 135px;right: 0px;bottom: 146px;}
.top_bestrate{width: 27%;top: 0;right: unset;left: 0;z-index: 1;}
.top_ill1{width: 170px;left: -5px;}
.top_ill2{display: none;/*width: 90px;right: -5px;*/}
}

/*TOPインフォ -------------------------------------*/
.apl_bg{
background: #f9f5f0;
padding: 3em 0;
}
.apl_top_wrap{
width: 1000px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.apl_top_text{width: 70%;}
.apl_top_text h2{
font-size: 2em;
text-align: center;
margin-bottom: 0.3em;
}
.apl_top_text h3{
font-size: 1.4em;
text-align: center;
color: #ff6a48;
border: double #ff6a48;
width: 70%;
background: #fff;
padding: 0.5em;
margin: 0 auto 1em;
margin-bottom: 0.5em;
}
.apl_top_icon{width: 26%;}
.apl_bg p{
font-size: 1.4em;
line-height: 1.8;
color: #333;
}
.apl_bg p span {
color: #f4732e;
font-weight: bold;
}
.list-13.list-apltop{
margin: 1em auto 0;
font-size: 1.2em;
/*color: #ff6a48;*/
background: #fff;
padding: 1em 1em 0.7em;
border-radius: 6px;
}
.list-13.list-apltop li{
margin-left: 1.2em;
margin-bottom: 0.2em;
}
.list-13.list-apltop li::before{font-weight: bold;}
.kako{font-size: 0.9em;margin: 0 -0.3em;}
.apl_btnbox{
width: 460px;
margin: 5em auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.apl_btnbox a{margin: 0 15px;}
.apl_btnbox h2{
font-size: 1.5em;
text-align: center;
color: #20645e;
padding-bottom: 1.8em;
position: relative;
}
.apl_btnbox h2::before {
font-family: "Font Awesome 5 Free";
content: "\f078";
font-weight: 900;
position: absolute;
font-size: 2.5em;
transform: translate(-50%, -50%);
bottom: -0.7em;
left: 50%;
color: #f4732e;
}

@media screen and (max-width: 767px){
.apl_bg{padding: 2em 0;}
.apl_top_wrap{width: 96%;}
.apl_top_text{width: 100%;}
.apl_top_icon{width: 130px;margin: 0 auto 1em;}
.apl_top_text h2{font-size: 1.7em;}
.apl_top_text h3{font-size: 1.1em;width: 93%;margin: -0.5em auto 1em;}
.apl_bg p{font-size: 1.2em;line-height: 1.6;}
.list-13.list-apltop{font-size: 1.1em;padding: 1em 0.6em 0.6em 0.6em;}
.list-13.list-apltop li{line-height: 1.4;margin-bottom: 0.4em;}
.list-13.list-apltop li::before{padding-right: 0em;}
.kako{font-size: 1em;}
.apl_btnbox h2{font-size: 1.4em;margin-bottom: 0.5em;}
.apl_btnbox h2::before {font-size: 2em;}
}

/*新規DL特典 -------------------------------------*/
.apl_bg2{
background: #ffdac5;
padding: 3em 0;
margin-bottom: 3em;
}
.benefits_wrap{
width: 800px;
margin: 2em auto 0;
background: #fff;
font-size: 1.2em;
position: relative;
padding: 0 1.5em 1.5em;
border-top: solid 7px #f4732e;
border-bottom: solid 7px #f4732e;
box-shadow: 6px 6px 0 rgba(0,0,0,0.2);
}
.benefits_wrap h2{
position: absolute;
transform: translate(-50%, -50%);
left: 50%;
font-size: 1.6em;
text-align: center;
padding: 0.4em 1.5em 0.3em;
color: #f4732e;
border-radius: 50px;
border: solid 7px;
background: #fff;
margin-bottom: 1.0em;
top: -5px;
}
.benefits_co{padding-top: 3em;}
.benefits_wrap h3{
font-size: 1.3em;
text-align: center;
margin-bottom: 0.5em;
border-bottom: solid 1px #f4732e;
}
.benefits_wrap h3 span{
font-size: 1.3em;
color: #f4732e;
}
.benefits_wrap p{margin-bottom: 1em;}
.coupon_cd{}
dl.apl_coupon{
display: flex;
flex-wrap: wrap;
border: solid 1px #dcdcdc;
padding: 3px;
}
.apl_coupon dt,.apl_coupon dd{padding: 0.5em;}
.apl_coupon dt{
background: #5e4a10;
color: #fff;
font-weight: bold;
width: 17%;
text-align: center;
}
.apl_coupon dd{width: 33%;}
dd.cd{font-weight: bold;}

@media screen and (max-width: 767px){
.benefits_wrap{
width: 96%;
border-top: solid 5px #f4732e;
border-bottom: solid 5px #f4732e;
padding: 0 1em 1em;
}
.benefits_wrap h2{font-size: 1.3em;border: solid 5px;width: 280px;}
.benefits_co{padding-top: 2em;}
.benefits_wrap h3{font-size: 1.2em;}
.benefits_wrap h3 span{display: block;}
.benefits_wrap p{margin-bottom: 1em;}
.coupon_cd{box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.1);border: solid 1px #dcdcdc;}
dl.apl_coupon{margin-bottom: 1em;}
.apl_coupon dt,.apl_coupon dd{width: 100%;text-align: center;}
dd.cd{font-size: 1.4em;}
}

/*メイン -------------------------------------*/
.apl_wrap{
width: 1000px;
margin: 0 auto;
}
.apl_co{
width: 1000px;
font-size: 1.2em;
margin: 0 auto;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.apl_co h2{
width: 100%;
font-size: 1.3em;
text-align: center;
padding: 0.7em;
color: #fff;
border-radius: 50px;
border: solid 4px;
background: #20645e;
box-shadow: 3px 6px 0 rgba(0,0,0,0.2);
margin-bottom: 1.0em;
display: flex;
justify-content: center;
align-items: center;
}
.apl_co h2 i.heg-vip-hibiscus{
font-size: 1.4em;
margin-right: 0.3em;
color: #fff06c;
}
.apl_co h2 i.heg-vip-hibiscus::before{line-height: 1;}
.list-apl{
width: 100%;
margin: 0em 2em 2em;
font-size: 1.2em;
}
.list-apl li{
padding: 0.5em 0 0.5em 1.7em;
position: relative;
border-bottom: dashed 1px #20645e;
margin-bottom: 0.6em;
}
.list-apl li:before {
font-family: "Font Awesome 5 Free";
content: "\f3cd";
position: absolute;
/*color: #f4732e;*/
color: #20645e;
font-weight: bold;
font-size: 1.7em;
top: 5px;
left: 0;
transform: rotate(18deg);
}
.list-apl li span{font-weight: bold;}

@media screen and (max-width: 767px){
.apl_wrap{width: 100%;}
.apl_co{width: 96%;}
.apl_co h2{
font-size: 1.2em;
margin-bottom: 1em;
padding: 0.6em 0;
}
.list-apl{margin: 0em auto 2em;width: 96%;}
}

/*追加2609 -------------------------------------*/
/*公式アプリがおトク*/
.value{}
.h3_value{
width: 100%;
text-align: center;
font-size: 1.5em;
}
.value_text{
margin: 1em auto 2em;
width: 94%;
}
.value_wrap{
margin: 0 0em 1em;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.value_co{
padding: 0.6em 0.8em;
margin: 0em 0em 1em;
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);
background: #fff;
width: calc(100% / 4 - 0.7em);
}
.value_co img{
width: 50%;
margin: 0 25% 0.3em;
}
.value_co h4{
font-size: 1.1em;
color: #b49844;
border-bottom: dotted;
margin-bottom: 0.4em;
}
.value_co h4 i{
transform: rotate(18deg);
margin-right: 0.5em;
font-size: 1.2em;
}
.value_co p{}

.rank_version{
background: #f7f4ec;
margin: 0 1.5em 3em;
border-radius: 10px;
width: calc(100% - 3em);
padding: 1em 1.5em 0;
}
.rank_version h3 {
position: relative;
padding: 0 0.3em;
border-radius: unset;
box-shadow: unset;
text-align: left !important;
width: fit-content;
color: #20645e;
border: unset;
border-bottom: solid 3px;
margin: 0 0 1em;
font-size: 1.4em;
background: #f7f4ec;
}
.rank_version h3:before {
position: absolute;
bottom: -14px;
left: 1em;
width: 0;
height: 0;
content: '';
border-width: 14px 12px 0 12px;
border-style: solid;
border-color: #20645e transparent transparent transparent;
}
.rank_version h3:after {
position: absolute;
bottom: -10px;
left: 1em;
width: 0;
height: 0;
content: '';
border-width: 14px 12px 0 12px;
border-style: solid;
border-color: #f7f4ec transparent transparent transparent;
}
.rank_version h3 span{color: #ff6a48;}
.rank_version h3 i{
transform: rotate(18deg);
margin-right: 0.4em;
font-size: 1.3em;
padding-bottom: 0.2em;
}
.rank_version_co{margin: 0 0 1em;}
.rank_version_co h4{
font-size: 1.15em;
color: #b49844;
margin-bottom: 0.4em;
}
.rank_version_co p{}
.rank_version_btn{
width: 40%;
margin: 1em auto 1em;
}
.rank_version_btn a{
font-weight: bold;
font-size: 1.1em;
text-align: center;
padding: 0.6em;
text-decoration: none;
display: block;
background: #20645e;
color: #fff;
position: relative;
}
.rank_version_btn a::after {
font-family: "Font Awesome 5 Free";
position: absolute;
color: #fff;
font-size: 1.2em;
content: "\f078";
font-weight: bold;
transform: translate(0, -50%);
top: 50%;
right: 0.6em;
}

/*おトクな特典*/
.useful{margin-bottom: 1em;}
.useful_text{
margin: 1em auto 2em;
width: 94%
}
.useful_co{
width: 46%;
margin: 0 2% 2em;
}
.useful_co h3{
border-bottom: dashed 1px #f4732e;
margin-bottom: 0.3em;
font-size: 1.1em;
}
.useful_co h3 i{
transform: rotate(18deg);
margin-right: 0.5em;
font-size: 1.2em;
color: #f4732e;
}
.useful_co p{}

.user{margin-bottom: 2em;}
h3.h3_arrow {
position: relative;
padding: 0 0.3em;
border-radius: unset;
box-shadow: unset;
text-align: left !important;
width: fit-content;
color: #20645e;
border: unset;
border-bottom: solid 3px;
margin: 0 0 1em 1em;
font-size: 1.4em;
background: #fff;
}
h3.h3_arrow:before {
position: absolute;
bottom: -14px;
left: 1em;
width: 0;
height: 0;
content: '';
border-width: 14px 12px 0 12px;
border-style: solid;
border-color: #20645e transparent transparent transparent;
}
h3.h3_arrow:after {
position: absolute;
bottom: -10px;
left: 1em;
width: 0;
height: 0;
content: '';
border-width: 14px 12px 0 12px;
border-style: solid;
border-color: #fff transparent transparent transparent;
}
.user p{
margin: 0em auto 0em;
width: 94%;
}
.user_btn{
width: 40%;
margin: 1em auto 1em;
}
.user_btn a{
font-weight: bold;
font-size: 1.1em;
text-align: center;
padding: 0.6em;
text-decoration: none;
display: block;
background: #f4732e;
color: #fff;
position: relative;
}
.user_btn a::after {
font-family: "Font Awesome 5 Free";
position: absolute;
color: #fff;
font-size: 1.3em;
content: "\f054";
font-weight: bold;
transform: translate(0, -50%);
top: 48%;
right: 0.6em;
}

@media screen and (max-width: 767px){
.value{}
.h3_value{}
.value_text{}
.value_wrap{}
.value_co{padding: 0.3em 0.8em 0.6em;margin: 0em 0em 1.5em;width: 48%;}
.value_co img{width: 50%;margin: 0 25% 0.3em;}
.value_co h4{}
.value_co h4 i{}
.value_co p{}

.rank_version{margin: 0 auto 3em;padding: 1em 0.8em 0;}
.rank_version h3 {font-size: 1.2em;}
.rank_version h3:before {}
.rank_version h3:after {}
.rank_version h3 span{}
.rank_version h3 i{}
.rank_version_co{}
.rank_version_co h4{font-size: 1.1em;}
.rank_version_co p{}
.rank_version_btn{width: 100%;margin: 0.5em auto 1em;}
.rank_version_btn a{}
.rank_version_btn a::after {}

/*おトクな特典*/
.useful{}
.useful_text{}
.useful_co{width: 100%;}
.useful_co h3{}
.useful_co h3 i{}
.useful_co p{}
.user{}
h3.h3_arrow {font-size: 1.2em;margin: 0 0 1em 0;}
h3.h3_arrow:before {}
h3.h3_arrow:after {}
.user p{}
.user_btn{width: 94%;}
.user_btn a{}
.user_btn a::after {}
}

/*会員ランクアッププログラム -------------------------------------*/
.apl_rankup_bg{
background: #f7f4ec;
padding: 3em 0;
}
.apl_rankup_wrap{
background: #fff;
padding: 1.5em;
border-radius: 1em;
/*font-size: 1.2em;*/
}
.rankup_lead{margin: 0 2em 0.5em;}
.rankup_lead span{
color: #f4732e;
font-weight: bold;
font-size: 1.4em;
padding: 0 0.2em;
}
.list-13.rankup_note{
margin: 1em 1.4em 0;
font-weight: bold;
}
.rankup_list_wrap{
margin: 0 1em;
background: #f9f5f0;
padding: 1.5em;
border-radius: 0.5em;
}
.rankup_list{}
.rankup_list li{
list-style-type: disc;
margin-left: 1em;
margin-bottom: 0.3em;
}
.apl_rankup_wrap h3.note{
color: #ff6a48;
background: #ffe6e0;
}
.rankup_list_note{
margin: 1em 0.5em 0
}
.rankup_list_note li{
position: relative;
padding:0 0 0 1.5em;
margin:0.5em 0;
}
.rankup_list_note li::before{
font-family: "Font Awesome 5 Free";
content: '\f14a';
font-weight: bold;
font-size: 1.3em;
position: absolute;
left: 0.0em;
color: #ff6a48;
}
.rank_table{
width: 600px;
margin: 1em auto 1em;
border-collapse: collapse;
border: solid 1px #dcdcdc;
}
.rank_table th,
.rank_table td{
text-align: center;
border: solid 1px #dcdcdc;
}
.rank_table th{background: #f1f1f1;padding: 1em;}
.rank_table td{padding: 0.5em 1em;}
.per{color: #f4732e;font-weight: bold;font-size: 1.4em;}
.reg{background: #90f5d9;font-weight: bold;  color: #1f655d;}
.sv{background: #c9caca;font-weight: bold;  color: #616161;}
.gld{background: #fff06c;font-weight: bold;  color: #b18401;}
.reg,.sv,.gld{
display: flex;
align-items: center;
flex-wrap: wrap;
}
.rank_table img{width: 70px;margin-right: 1em;}

.apl_rankup_wrap h3{
background: #e0f0eb;
color: #20645e;
padding: 0.7em 1em 0.5em;
margin:3em 0  0.5em;
font-size: 1.1em;
border-bottom: solid 1px;
border-left: solid 6px;
}
.ranku01{margin: 0 1em 1em;}
.member_rank_wrap{
width: 920px;
height: 350px;
margin: 0 auto;
position: relative;
}
.member_rank_co{
overflow: auto;
padding: 0.5em 1em;
}
.member_rank_wrap i.fa-arrow-right{
position: absolute;
color: #ccc;
font-weight: bold;
font-size: 2.5em;
bottom: -0.5em;
right: 0;
}

.member_rank_wrap img{
max-width: unset !important;
height: 330px;
}
.rankup_ab{
margin: 2em 0.5em 0;
display: flex;
flex-wrap: wrap;
}
.rankup_ab dt,.rankup_ab dd{padding: 0.7em 0.5em;margin-bottom: 2px;}
.rankup_ab dt{
background: #20645e;
font-weight: bold;
color: #fff;
text-align: center;
width: 20%;
}
.rankup_ab dd{width: 80%;}

@media screen and (max-width: 767px){
.apl_rankup_wrap{padding: 0.8em;border-radius: 0.5em;width: 100%;}
.rankup_lead{margin: 0 0 0.5em;}
.rankup_lead span{font-size: 1.1em;}
.list-13.rankup_note{margin: 0.7em 0 0;}
.list-13.rankup_note li{margin-left: 1.3em;}
.rankup_list_wrap{margin: 0;padding: 1em 0.5em 0.5em;}
.rank_table{width: 100%;}
.rank_table th{padding: 1em 0.5em;}
.rank_table td{padding: 1em 0.5em;}
.per{font-size: 1.2em;}
.rank_table img{width: 50px;margin: 0 0 0.7em;}
.reg,.sv,.gld{display: block;}

.apl_rankup_wrap h3{
font-size: 1.1em;
padding: 0.5em 1em 0.3em 0.6em;
margin: 2em 0 0.5em;
}
.ranku01{margin: 0 0.5em 0em;}
.member_rank_wrap{width: 100%;height: 260px;padding: 0;}
.member_rank_wrap img{height: 250px;}
.member_rank_co{}
.member_rank_wrap i.fa-arrow-right{font-size: 2em;bottom: -0.7em;}
.rankup_ab{margin: 2em 0 0;}
.rankup_ab dt,.rankup_ab dd{width: 100%;margin: 0;}
.rankup_ab dd{padding: 0.5em 0.5em 1em;}

/*既存機能----------------------------------------------------------*/
.apl_btnbox{width: 94%;justify-content: center;margin: 3em auto;}
.apl_btnbox a{margin-bottom: 10px;}
.apl_co{width: 96%;}
.apl_list{width: 96%;margin: 0 auto;order: 2;}
.apl_img{order: 1;width: 50%;margin: 0 auto 1em;}
}

/*ランクアップページ----------------------------------------------------------*/
.apl_top_rank_wrap{
width: 100%;
background: #2ba48f;
border-bottom: solid 1px #fff;
height: 600px;
}
.apl_top_rank_co{
width: 1100px;
height: 600px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
.main_rank_title,.main_rank_up,.main_rank{position: absolute;}
.main_rank_title{
transform: translate(-50%, 0);
top: 15px;
left: 50%;
z-index: 1;
}
.main_rank_up{
top: 100px;
left: 20px;}
.main_rank{
transform: translate(-50%, 0);
left: 50%;
bottom: 0;
}

@media screen and (max-width: 767px){
.apl_top_rank_wrap{height: auto;}
.apl_top_rank_co{height: 330px;width: 375px;}
.main_rank_title{width: 360px;}
.main_rank_up{width: 220px;top: 40px;left: 10px;}
}

/*朝食OP----------------------------------------------------------*/
.apl_op_bg{padding: 0 0 3em;}
.apl_co.op_wrap{
align-items: center;
padding: 0 2em 4em;
}
.apl_co.op_wrap h3{
width: 100%;
font-size: 1.2em;
text-align: center;
background: #b49844;
color: #fff;
padding: 0.5em;
margin-bottom: 1em;
box-shadow: 3px 6px 0 rgba(0,0,0,0.2);
}
.op_img{width: 44%;}
.op_text{width: 52%;}
.op_btn{
width: 400px;
margin: 1.5em auto 0;
}
.op_btn a{
font-weight: bold;
font-size: 1.1em;
text-align: center;
padding: 0.6em;
text-decoration: none;
display: block;
background: #f4732e;
color: #fff;
position: relative;
}
.op_btn a::after {
font-family: "Font Awesome 5 Free";
position: absolute;
color: #fff;
font-size: 1.3em;
content: "\f054";
font-weight: bold;
transform: translate(0, -50%);
top: 48%;
right: 0.6em;
}

@media screen and (max-width: 767px){
.apl_co.op_wrap{padding: 0 0 3em;}
.apl_co.op_wrap h3{}
.op_img{width: 80%;margin: 0 auto;}
.op_text{width: 96%;margin: 1em auto 0;}
.op_btn{width: 94%;margin: 1em auto 0;}
}