.mypage_reward {}
.mypage_reward h2 { font-size: 22px; font-weight: normal; text-align: center;}
.mypage_reward h2 span {display: block; color: #ffa723; font-weight: bold; font-size: 16px;}

@media only screen and (min-width: 768px) {
	.mypage_reward h2 { font-size: 28px;}
	.mypage_reward h2 span { font-size: 20px;}
}


.kv_reward { margin: 0 auto 20px; background: #ffa723; text-align: center;}

.reward_stage { text-align: center; padding: 10px 0;}
.reward_stage a { display: block; text-decoration: underline; margin-top: 10px;}
.reward_stage img {width: 80px;}

.reward_stage_rank { display: flex; align-items: center; justify-content: center;}
.reward_stage_rank i { font-size: 30px; color: #ccc; margin: 0 3px;}
.reward_stage_rank_icon { margin: 0 3px; opacity:0.3; filter: grayscale(100%);}
.reward_stage_rank_icon.active { opacity:1; filter: grayscale(0%);}

.reward_bpoint { text-align: center; padding: 10px; }
.reward_bpoint span { font-size: 32px; font-weight: bold; }
.reward_bpoint a { display: block; text-decoration: underline; margin: 4px auto;}
.reward_stage_memo { border: 3px solid #CCC; padding:10px 20px; margin-top: 15px;}

.mypage_reward .mp_block_contents { padding: 0 8px 15px; }

@media only screen and (min-width: 768px) {
	.mypage_reward .mp_block { height: 97%; margin-bottom: 3%;}
	.mypage_reward .mp_block_contents { padding: 0 0 0px; }
	.reward_stage { padding: 10px;}

	.reward_bpoint span { font-size: 3.0vw; }
}


.reward_notice { margin-top: 20px; padding: 20px 10px; border: 3px solid #d80000; font-weight: bold; color: #d80000;}

@media only screen and (min-width: 768px) {
	.reward_present { margin: 40px auto;}
}


.mp_reward_news { padding-top: 20px;}
.reward_news { list-style: disc; margin: 10px 10px 10px; line-height: 25px; max-height: 120px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.reward_news li { line-height: 18px; margin-bottom: 3px;}
.reward_news span { display: inline-block; vertical-align: middle;}
.reward_news span.reward_news_date { width: 100px; font-size: 90%; color: #777;}
.reward_news span.reward_news_point { width: 95px; text-align: center; border: 2px solid #000; font-weight: bold; padding: 2px 0px; margin: 2px 5px 5px 0; font-size: 12px;}
.reward_news span.reward_news_txt { display: block;}

@media only screen and (min-width: 768px) {
	/*.reward_news li { display: flex; align-items: center; justify-content: left; }
	.reward_news span { display: block; }*/
  
}


.reward_birthday { max-width: 640px; text-align: center; margin: 20px auto 40px; padding: 0px 0px 20px; animation: blinkAnimation 1s ease infinite alternate; background: #fff;}

@keyframes blinkAnimation {
  0% {
    border: 5px solid #EEE;
  }
  100% {
    border: 5px solid #C2A284;
  }
}
.reward_birthday img { width: 400px;}
.reward_birthday p { font-size: 14px; line-height: 30px; margin-right: 10px; margin-left: 10px;}
.reward_birthday a { font-size: 14px;}

@media only screen and (min-width: 768px) {
	.reward_birthday p { font-size: 15px; line-height: 35px}
	.reward_birthday a { font-size: 15px;}
}

.reward_present_none_notice { text-align: center;}
.reward_present_none_notice span { display: inline-block; border: 1px solid #ccc; background: #f6f6f6; padding: 20px; margin: 20px auto 30px; text-align: center; font-weight: bold;}


.reward_present_active .mp_block { border: 3px solid #8BD6CB; box-shadow: 0 0 0 5px rgba(231,250,247,1.0); }
.reward_present_active .mp_block_title { background: #8BD6CB; text-align: center; color: #fff; font-weight: bold; border: none; font-size: 15px;}

.reward_present_notice { text-align: center; font-weight: bold; color: #d80000; font-size: 14px; margin-top: 15px; }
.reward_present_notice span { font-weight: normal;}

.reward_present_selected { padding: 20px 0; border-top: 1px solid #ddd; text-align: center;}

.reward_present_selected_item_in { display: flex; justify-content: left; text-align: left; padding-top: 20px; margin: 0 auto 20px; border-top: 1px dashed #ccc;}
.reward_present_selected_item_in:first-child { border: none; }
.reward_present_selected_item_img { width: 100px; height: 100px; border: 1px solid #ddd; margin:0 5px 5px;}
.reward_present_selected_item_name { display: block; vertical-align: top; text-align: left; font-size: 15px; font-weight: bold; padding: 0; width: 100%;}
.reward_present_selected_item_name h3 {border: none; margin: 0; padding: 0;}
.reward_present_selected_notice { color: #666; font-size: 13px; display: block; font-weight: normal; margin-bottom: 30px;}
.reward_present_expire { font-size: 12px; font-weight: normal;}

.reward_present_selected_item .list_btn { text-align: center;}
.reward_present_selected_item .list_btn .btn_popup {display: block; font-size: 12px; font-weight: normal; margin-top: 5px;}

.reward_present_item .list_btn .btn_cart { width: auto; display: block; font-size: 1.5rem; padding: 10px}

@media only screen and (min-width: 768px){
	.reward_present_selected_item { padding: 0 20px; display: grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); }
	.reward_present_selected_item_in { border: none;}
	.reward_present_selected_item_img { display: inline-block; vertical-align: top; margin:0 10px 10px 0; }
	.reward_present_selected_item_name { display: inline-block; vertical-align: top; width: 270px;}
	.reward_present_selected_item .list_btn { text-align: left;}
}






.reward_present_point {
    width: 80px;
    padding: 2px 10px;
    text-align: center;
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    position: relative;
    margin: 4px 0 -10px -8px;
    background: #FFA723;
    z-index: 4;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.reward_present_point:before {
    position: absolute;
    top: 100%;
    content: "";
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-top: 3px solid #4b2d00;
    opacity: 0.5;
    left: 0;
    border-right: 3px solid #4b2d00;
}

.reward_present_new { position: absolute; left: 5px; bottom: 5px; background: #c00; padding: 1px 6px; color: #fff; font-weight: 700; font-size: 11px; z-index: 1; }


.reward_present_in { display: grid;grid-template-columns: 1fr 1fr; /*grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));*/ grid-auto-rows: 1fr; grid-gap: 25px 10px; padding: 10px 0 15px; text-align: center; }
.reward_present_in > reward_present_item { background: #ddd; overflow: auto; min-width: 0; padding: 1em; }

@media only screen and (min-width: 768px){
	.reward_present_in { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); padding: 15px 15px 25px;  }
	.reward_present_block .row.row-eq-height { margin-bottom: 20px;}
}

.reward_present_item { margin-bottom: 20px; position:relative; padding: 0 5px 10px; display: flex; flex-direction: column;
/*
border: 1px solid #eee;
border-radius: 2px;
-webkit-box-shadow:0 2px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow:0 2px 2px rgba(0, 0, 0, 0.1);
box-shadow:0 2px 2px rgba(0, 0, 0, 0.1);
*/ }

.reward_present_item span.reward_present_item_sp_sub { position: absolute; border: 2px solid #cc0000; padding: 2px 5px; color: #cc0000; font-weight: bold; z-index: 2;}
 
.reward_present_item.selected { border: 1px solid #8BD6CB; box-shadow: 0 0 0 5px rgba(231,250,247,1.0);  }

.reward_present_selected_icon { position: absolute; z-index: 5; right: 5px; top: -12px; width: 60px; height: 60px; line-height: 60px;font-size: 12px; border-radius: 50%; text-align: center; background:#8BD6CB; color: #fff; font-weight: bold; }

.reward_present_item .item_photo { position: relative; text-align: center; border: 1px solid #ddd; margin-bottom: 5px;}
.reward_present_item .item_photo img { width: 180px; }
.reward_present_item .prod_type { margin-left: 0; font-size: 11px; line-height: 15px; color: #777;}
.reward_present_item .prod_colorbox { display: none;}

.reward_present_item .item_name { font-size: 12px; display: flex; flex-direction: column;}
.reward_present_item .prod_subtitle { font-size: 11px; line-height: 18px; font-weight: normal; margin:5px 0 0;}
.reward_present_item dl { padding: 0px; text-align: left; height: 100%; display: flex; flex-direction: column;}

.reward_present_item .prod_notice2 { font-size: 10px; color: #777; text-align: center; border-top: 1px dashed #ddd; margin-top: 5px; padding-top: 5px; text-align: left; }
@media only screen and (min-width: 768px){
	.reward_present_item .prod_notice2 { text-align: center;}
}

.reward_present_item .list_btn { text-align: center; padding: 0px 0; margin-top: auto;}
.reward_present_item .list_btn .btn_cart { width: auto; display: block; font-size: 1.5rem; padding: 10}
.reward_present_item .list_btn .btn_popup { display: block; margin: 5px 0 0; font-size: 12px;}
.reward_present_item .list_btn .btn-default[disabled] { color: #aaa; cursor: not-allowed;}

.btn_cart_cancel { background: #000 !important; border: 1px solid #000; font-size: 13px; white-space: normal;}
.btn_cart_cancel:hover { background: #777;}
.btn_cart_cancel:before { display: none;}

.reward_present_notice_btm { border: 1px dashed #ddd; padding: 15px; font-size: 11px; color: #555; margin: 20px 0 0px;}

@media only screen and (min-width: 768px){
	.reward_present_selected_icon {right: 2px; top: -12px; width: 75px; height: 75px; line-height: 75px; font-size: 14px;}
	.reward_present_item { height: 100%; padding: 0px 10px 5px; }
	.reward_present_item .item_name { font-size: 13px;}
	.reward_present_notice_btm { margin: 20px 15px 20px;}
	.reward_present_item .item_name { font-size: 13px; /*height: 60px;*/ line-height: 18px;}
}


/*popup*/
.reward_present_inline{padding:0 10px;color:#333}
.reward_present_inline_img{text-align:center;margin-bottom:0}
.reward_present_inline_img img{width:150px;height:auto}
.reward_present_inline .item_name{line-height:1.3;margin:0 0 8px 0;padding:0;border:none}
.reward_present_inline .prod_type{display:block;margin:0 0 3px 0;font-size:11px;color:#666}
.reward_present_inline .prod_colorbox{display:none}
.reward_present_inline .item_name span:last-child{display:block;font-size:16px;font-weight:bold;color:#222}
.reward_present_inline .prod_subtitle{font-size:13px;font-weight:bold;margin:0 0 12px 0;padding-bottom:8px;line-height:1.4;color:#333;border-bottom:1px solid #ddd}
.reward_present_inline .prod_capacity{display:block}
.reward_present_inline .prod_comment{font-size:12px;line-height:1.6;color:#444;background-color:#f7f7f7;padding:10px 12px;border-radius:4px;margin-bottom:12px}
.reward_present_inline .prod_comment a{text-decoration:underline;display:inline-block;margin:5px 0 0}
.reward_present_inline .prod_include{font-size:11px;line-height:1.6;color:#555;padding-left:10px;border-left:3px solid #ccc;margin-bottom:15px}
.reward_present_inline .madein{display:inline-block;margin-top:10px;color:#555;border:1px solid #bbb;padding:2px 8px;font-size:10px;font-weight:bold;background-color:#fff;border-radius:2px}
.reward_present_inline span.small{font-size:80%}

.apply_contents,
.applicate_contents { text-align: center; padding: 15px 0; font-size: 16px; line-height: 22px;}
.apply_txt,
.applicate_txt { padding: 0px 0 15px;}
.apply_btn,
.applicate_btn { padding: 0 20px;}

@media only screen and (min-width: 768px){
	.reward_present_inline_img img { width: 300px;}
	.applicate_contents { text-align: center;}
}


.reward_earnpoint { margin-bottom: 40px; }
.reward_earnpoint_in a {display: block;max-width: 500px; margin: 0 auto; }
.reward_earnpoint_in a:hover { text-decoration: none; background: #E7FAF7;}
.reward_earnpoint_in dl { border: 2px solid #8BD6CB; max-width: 500px; margin: 10px auto; padding: 15px 10px;  display: flex; align-items: center; justify-content: left;}
.reward_earnpoint_in dt.reward_earnpoint_comp { display: none; background: #8BD6CB; color: #fff; font-size: 12px; font-weight: bold; margin: 0 10px 0 0; padding: 10px 0; width: 40px; text-align: center; }
.reward_earnpoint_in dd.reward_earnpoint_name { font-size: 13px;}
.reward_earnpoint_in dd.reward_earnpoint_name small {display: block; font-size: 11px; line-height: 16px; margin-top: 5px; color: #555;}
.reward_earnpoint_in dd.reward_earnpoint_point { font-size: 15px; font-weight: bold; margin-left: auto; line-height: 16px;}
.reward_earnpoint_in dd.reward_earnpoint_point small { font-weight: normal; display: block; font-size: 11px;}
.reward_earnpoint_in i { color: #ccc; font-size: 20px; margin-left: 10px;}

.reward_earnpoint_in.active a { border: 1px solid #ccc; background: #f6f6f6; }
.reward_earnpoint_in.active a:hover { background: #f0f0f0;}
.reward_earnpoint_in.active dt.reward_earnpoint_comp { background: #fff; color: #000; }
.reward_earnpoint_in.active dd.reward_earnpoint_name { color: #777}
.reward_earnpoint_in.active dd.reward_earnpoint_point { color: #777}
.reward_earnpoint_in.active i { color: #eee}


@media only screen and (min-width: 768px){
	.reward_earnpoint_in dl { padding: 20px 20px;}
	.reward_earnpoint_in dt.reward_earnpoint_comp { margin: 0 20px 0 0; width: 60px; font-size: 14px;}
	.reward_earnpoint_in dd.reward_earnpoint_name { font-size: 16px; line-height: 20px;} 
	.reward_earnpoint_in dd.reward_earnpoint_point { font-size: 18px; line-height: 20px;}
	.reward_earnpoint_in i { font-size: 25px;}
}


.backtoibim { padding: 10px; width: 100%; text-align: center; background: rgba(0, 0, 0, 0.1); text-align: center;}
.backtoibim a { max-width: 350px; margin: 0 auto; background: #000;}

.fixed_btn {
  position: fixed;
  top: 100px;
  right: 10px;
  padding: 6px 20px;
  border-radius: 30px;
  background-color: rgba(255, 136, 0, 0.7);
  color: #fff;
  font-weight: bold;
  border: none;
  z-index: 999;
}
@media only screen and (min-width: 768px){
  .fixed_btn { top: 200px; }
}

.birthday_popup p {font-size: 110%;}
.birthday_popup p span {text-decoration: underline; font-weight: bold;}
.reward_memo { border: 1px dashed #ccc; text-align: left; padding: 15px 20px; font-size: 12px; }