/****color****/
/* new/myroom_theme/に引越し前 */
.myroom_bg_purple{
background: linear-gradient(90deg,#CC30FC 0%, #E592FF 100%);
}
.myroom_bg_red{
background: linear-gradient(90deg,#ff0844 0%, #ffb199 100%);
}
.myroom_bg_green_to_blue{
background: linear-gradient(90deg,#2af598 0%, #009efd 100%);
}
.myroom_bg_limegreen{
background: linear-gradient(90deg,#3CD500 0%, #FFF720 100%);
}
.myroom_bg_red{
background: linear-gradient(90deg,#ff0844 0%, #ffb199 100%);
}


/****like on****/
.myroom_like_off{
padding:3px;
border-radius:6px;
}
.myroom_like_on{
padding:3px;
border-radius:6px;
}

/********/

.myroom_container{
background:#f4f4f4;
}

.myroom_container a{
text-decoration:none;
color:#2c2c2c;
}

.myrooom_index_m{
font-size:15px;
font-weight:bold;
}

.myroom_hr{
border:none;
border-top:24px solid #EBEBEB;
margin:32px auto;
}

.myroom_setting_icon{
margin-left:auto;
text-align:center;
}

.myroom_grey_backbtn{
display:inline-block;
margin:12px 0 0 12px;
padding:8px 16px;
background:rgba(0,0,0,.4);
font-size:12px;
font-weight:bold;
color:#fff;
border-radius:8px;
}

.myroom_top_button_master{
position:absolute;
top:12px;
left:8px;
display:inline-block;
padding:8px 16px;
background:rgba(0,0,0,.4);
font-size:12px;
font-weight:bold;
color:#fff;
border-radius:8px;
}

.myroom_contents_add_button{
margin-left:auto;
padding:6px;
background:rgba(0,0,0,.4);
font-size:11px;
color:#fff !important;
text-decoration:none;
border-radius:25px;
}

/**** profile ****/

.myroom_profile{
position:relative;
padding:24px 0;
}


.myroom_profile_icon_area{
position:relative;
width:100px;
margin:0 auto;
}


.myroom_profile_icon{
display:block;
width:128px;
//height:100px;
border:4px solid rgba(255,255,255,.5);
border-radius:50%;
box-sizing:border-box;
}

.myroom_profile_icon_new{
display:block;
width:100px;
height:100px;
border:4px solid rgba(255,255,255,.5);
border-radius:50%;
box-sizing:border-box;
}

.myroom_profile_icon_editbtn{
position:absolute;
bottom:0;
right:0;
width:32px;
height:32px;
background:#fff;
border-radius:50%;
box-shadow:0 3px 6px rgba(0,0,0,.2);
}

.myroom_profile_name{
font-size:14px;
font-weight:bold;
color:#fff;
}

.myroom_profile_name_editbtn{
width:24px;
height:24px;
background:#fff;
border:3px solid rgba(0,0,0,.1);
border-radius:50%;
box-sizing:content-box;
}

.myroom_public{
display:inline-block;
text-align:center;
margin:8px auto 0 auto;
padding:8px 12px;
font-size:12px;
font-weight:bold;
background:rgba(255,255,255,.6);
border-radius:32px;
}

.myroom_contets_nothing{
position:relative;
width:280px;
margin:12px auto;
padding:12px 16px;
background:#4b71ff;
border-radius:8px;
box-sizing:border-box;
}

.myroom_contets_nothing p{
font-weight:bold;
font-size:14px;
color:#fff;
line-height:1.4em;
color:#fff;
}


/**** status ****/

.myroom_status{
background:#fff;
}

.myroom_status .status_box{
position:relative;
text-align:center;
width:calc(100% / 3);
min-height:72px;
padding:16px 8px;

}

.myroom_status .status_box::before{
position:absolute;
top:calc(50% - 30px);
left:0;
content: '';
height:60px;
border-left:1px solid #a3a3a3;
}

.myroom_status .status_box:first-child::before{
border:none;
}

.myroom_status .status_box .index{
font-weight:bold;
font-size:12px;
}

.myroom_status .status_box .rank{
font-weight:bold;
font-size:21px;
}

.myroom_status .status_box .rank span{
font-size:12px;
}

.myroom_status .status_box .count{
display:inline-block;
font-weight:bold;
font-size:13px;
padding:4px 8px;
border-radius:6px;
}

.review_post_count{
position:relative;
min-width:40px;
max-width:60px;
box-shadow:0 3px 0 rgba(0,0,0,.4);
}

.review_post_count{
display:block;
position:relative;
text-align:left;
min-width:60px;
padding:8px 0;
box-shadow:0 3px 0 rgba(0,0,0,.4);
}


/**** actless ****/

.swiper_actor_container{
margin-top:6px;
padding:10px;
background:#fff;
box-sizing:border-box;
}

.swiper_actor_ul li{
position:relative;
}

.swiper_actor_ul li img{
border-radius:50%;
border:3px solid #fff;
margin-right:4px;
box-sizing:border-box;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=0, Color=#000000)";
-moz-box-shadow: 0 2px 8px rgba(0,0,0,0.12);
-webkit-box-shadow: 0 2px 8px rgba(0,0,0,0.12);
box-shadow: 0 2px 8px rgba(0,0,0,0.12);
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color=#000000);
}

.actor_right_link{
position:absolute;
top:-5px;
right:8px;
}

.actor_right_link a{
color:#5D34FF;
font-size:12px;
font-weight:bold;
}

.actor_list_more_link{
text-align:center;
width:200px;
margin:0 auto;
background:#fff;
border-radius:25px;
box-sizing:border-box;
}

.actor_list_more_link a{
display:block;
padding:12px;
margin:24px auto 0 auto;
font-weight:bold;
}

ul.act_carousel {
width:100%;
overflow-x:scroll;
-webkit-overflow-scrolling:touch;
overflow-scrolling:touch;
white-space:nowrap;
line-height:1;
}

@media screen and (max-width:320px) {
    ul.act_carousel li {
    background:#fff;
    width:64px;
    margin:4px 2px;
    text-align:center;
    display:inline-block;
    }
}

@media screen and (min-width:321px) { 
    ul.act_carousel li {
    background:#fff;
    width:80px;
    margin:4px 2px;
    text-align:center;
    display:inline-block;
    }
}

.myactor_pickup_listname{
text-align:center;
margin-top:6px;
font-size:11px;
font-weight:bold;
}


/***review layout***/

#new_review_contents{
position:relative;
margin:6px;
padding:4px 6px;
border:1px solid #eee;
border-radius:6px;
box-shadow:0 3px 3px rgba(0,0,0,.05);
}

#new_review_contents img#thumb{
width:80px;
}

#new_review_contents p#title{
font-size:12px;
font-weight:bold;
line-height:1.4em;
}


#new_info_review #review_pagenation{
margin:40px auto 20px auto;
}

#pagenation_link{
text-align:center;
width:74px;
margin:0 6px;
background:#ddd;
border-radius:8px;
}

#pagenation_link a{
display:block;
padding:10px 0;
font-size:13px;
}

.review_switch{
margin:10px auto 40px auto;
}

.review_switch input {
display: none;
}
.review_switch label{
text-align:center;
width: 100px;
padding: 10px;
border:1px solid #0500cc;
background: #fff;
color: #0500cc;
font-size: 12px;
font-weight:bold;
line-height: 1;
transition: .2s;
}
.review_switch label:first-of-type{
border-radius: 3px 0 0 3px;
}
.review_switch label:last-of-type{
border-radius: 0 3px 3px 0;
}
.review_switch input[type="radio"]:checked + .switch-on {
background-color: #0500cc;
color: #fff;
}
.review_switch input[type="radio"]:checked + .switch-off {
background-color: #0500cc;
color: #fff;
}


.user_raview_thumbs{
flex-shrink:0;
margin-right:6px;
box-sizing:border-box;
}

.user_raview_thumbs img{
display:inline-block;
width:60px;
}

.new_user_review .review_good_box{
width:100%;
padding:8px 12px;
background:#FFE3CD;
font-size:12px;
font-weight:bold;
line-height:1.6em;
color:#673004;
border-radius:8px;
box-sizing:border-box;
}

.new_user_review .review_bad_box{
width:100%;
padding:8px 12px;
background:#D7D5FF;
font-size:12px;
font-weight:bold;
line-height:1.6em;
color:#050092;
border-radius:8px;
box-sizing:border-box;
}

.new_user_review .revtxt{
line-height:1.4em;
padding:0 6px;
}

.new_user_review .review_rate_box{
flex-shrink: 0;
text-align:center;
width:48px;
min-width:48px;
margin-right:12px;
}

.new_user_review .review_rate_box > img{
display:inline-block;
width:28px;
}

.new_user_review .review_right_box{
text-align:left;
margin-top:4px;
padding:6px;
}

.new_user_review .review_rate_good_txt{
flex:1;
margin-top:3px;
font-weight:bold;
font-size:10px;
color:#673004;
}

.new_user_review .review_rate_bad_txt{
flex:1;
font-weight:bold;
font-size:10px;
color:#050092;
}

.new_user_review .review_wrap{
list-style:none;
margin:0 12px;
box-sizing:border-box;
}


.new_user_review .review_wrap li{
margin-bottom:6px;
background:#fff;
border:1px solid #eee;
border-radius:8px;
box-shadow:0 3px 6px rgba(0,0,0,.1);
}

.new_user_review .review_wrap li a{
width:100%;
margin:0;
padding:6px;
}

.new_user_review .review_user_name{
margin-bottom:3px;
font-weight:bold;
font-size:11px;
line-height:1.3em;
}

.myroom_purchase_history li a.myroom_purchase_history_link{
padding:0 !important;
}

.myroom_purchase_history li img{
width:70px;
border-radius:6px 0 0 6px;
}

.rev_icon{
flex-shrink:0;
width:24px;
}

@media screen and (max-width:320px) {
    .rev_icon_m{
    flex-shrink:0;
    width:25px;
    margin-right:6px;
    }
}
@media screen and (min-width:321px) { 
    .rev_icon_m{
    flex-shrink:0;
    width:30px;
    margin-right:6px;
    }
}


.review_like_count{
flex-shrink: 0;
min-width:50px;
margin-left: auto;
padding:6px 6px;
background:#fff;
color:#888;
border:2px solid #f6f6f6;
border-radius:8px;
box-shadow:0 3px 8px rgba(0,0,0,.1);
box-sizing:border-box;
}

.review_like_count_v{
flex-shrink: 0;
text-align:center;
min-width:40px;
margin-left: auto;
background:#fff;
color:#888;
border:2px solid #f6f6f6;
border-radius:8px;
box-shadow:0 3px 8px rgba(0,0,0,.1);
box-sizing:border-box;
}

.review_like_count,.review_like_count_v p{
margin-top:3px;
color:#2c2c2c;
font-size:11px;
}

.review_like_count,.review_like_count_v img{
width:18px;
}

.review_like_count,.review_like_count_v .off{
color:#2c2c2c;
}

.review_like_count,.review_like_count_v .on{
color:#ff0000;
}


/**** mygenre_taglist ****/

.myroom_mygenre_ul{
list-style:none;
padding:12px;
margin:0 16px;
background:#fff;
box-sizing:border-box;
}

.myroom_mygenre_ul li{
display:inline-block;
margin:0 0 10px 8px;
}

.myroom_mygenre_ul li a{
display:inline-block;
padding:8px 8px;
font-size:12px;
font-weight:bold;
border-radius:8px;
box-shadow:0 3px 5px rgba(0,0,0,.1) ;
}


.myrooom_mygrenre_tag{
display:inline-block;
padding:6px 8px;
font-size:12px;
font-weight:bold;
border-radius:8px;
//box-shadow:0 3px 5px rgba(0,0,0,.1);
}


/**** myroom preview ****/

.myroom_preview{
margin:12px 12px;
padding:12px 12px;
background:#ff4453;
border-radius:6px;
}

.myroom_preview_index{
text-align:center;
width:160px;
padding:6px 6px;
margin:0 auto 12px auto;
background:rgba(255,255,255,.3);
font-size:18px;
font-weight:bold;
color:#fff;
border-radius:25px;
}

.myroom_preview_txt{
text-align:center;
font-size:13px;
font-weight:bold;
line-height:1.3em;
color:#fff;
}



/**** myroom closed ****/

.myroom_deleted_information{
text-align:center;
margin:12px auto;
width:260px;
padding:12px 12px;
background:#767676;
font-size:13px;
font-weight:bold;
line-height:1.3em;
color:#fff;
border-radius:6px;
box-sizing:border-box;
}

.myroom_closed_information{
margin:12px 16px 0 16px;
padding:12px 12px;
background:#767676;
border-radius:6px;
box-sizing:border-box;
}

.myroom_closed_information_index{
text-align:center;
width:220px;
padding:6px 6px;
margin:0 auto 12px auto;
background:rgba(255,255,255,.3);
font-size:15px;
font-weight:bold;
color:#fff;
border-radius:25px;
}

.myroom_closed_information_txt{
text-align:center;
font-size:13px;
font-weight:bold;
line-height:1.3em;
color:#fff;
}

.myroom_bg_closed{
background:#b1b1b1;
}



/**** myroom setting ****/

.myroom_setting{
background:#fff;
}

.myroom_setting_index_s{
padding:24px 8px 8px 12px;
background:#EBEBEB;
font-weight:bold;
font-size:14px;
}

.previewlink{
display:block;
width:100%;
padding:16px;
}

.myroom_setting_ul{
list-style:none;
}

.myroom_setting_ul li{
position:relative;
display:-webkit-flex;
display:flex;
-webkit-justify-content:left;
justify-content:left;
-webkit-align-items:center;
align-items:center;
padding:16px 16px;
font-size:13px;
font-weight:bold;
}

.myroom_setting_ul li:first-child{
padding:0 !imporatant;
}

.myroom_setting_ul li::before{
content: '';
position:absolute;
bottom:0;
right:0;
width:calc(100% - 16px);
border-bottom:1px solid #9F9F9F;
box-sizing:border-box;
}

.myroom_setting_ul li:last-child::before{
border-bottom:none;
}

.myroom_setting_ul li .right{
margin-left:auto;
}

.myroom_setting_icon_link{
display:block;
width:40px;
height:40px;
background:#ccc;
border:2px solid #eee;
border-radius:50%;
box-sizing:border-box;
}

.myroom_setting_icon_link_2{
position:absolute;
top:0;
right:30px;
display:block;
width:40px;
height:40px;
border:2px solid #eee;
border-radius:50%;
box-sizing:border-box;
z-index:3;
}

.public_setting_link_col{
color:#656565;
font-weight:bold;
}

/*** toggle switch ***/

.setting_check+label {
background-color: #d9d9d9;
}
.setting_check+label::before {
color: #919191;
}
.setting_check:checked+label {
background-color: #3498db;
}
.setting_check:checked+label::before {
color: #fff;
}

.setting_check {
display: none;
}
.setting_check+label,
.setting_check+label::before,
.setting_check+label::after {
-webkit-transition: all .2s;
transition: all .2s;
}
.setting_check+label {
display: inline-block;
position: relative;
width: 80px;
height: 35px;
border-radius: 24px;
cursor: pointer;
}
.setting_check+label::before {
display: block;
content: attr(data-off-label);
position: absolute;
top: 12px;
right: 7px;
color: #fff;
font-size: 13px;
}
.setting_check+label::after {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 30px;
height: 30px;
background-color: #fff;
border-radius: 50%;
}
.setting_check:checked+label::before {
content: attr(data-on-label);
left: 14px;
right: auto;
color: #fff;
}
.setting_check:checked+label::after {
left:48px;
background-color: #f7f7f7;
}

.setting_check+label {
background-color: #d9d9d9;
}
.setting_check+label::before {
color: #919191;
}
.setting_check:checked+label {
background-color: #3498db;
}
.setting_check:checked+label::before {
color: #fff;
}





/**** scroll_modal ****/
.scroll_modal_overlay {
display: none;
position: fixed;
top:0;
left:0;
right:0;
bottom:0;
background-color:#fff;
overflow: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
z-index:9999;
}
.scroll_modal_container {
padding: 0 0 0 0;
width: 100%;
height: 100%;
}
.scroll_modal_inner {
padding:0 0;
}
.scroll_modal {
position:relative;
margin: 0 auto;
padding-bottom:20px;
max-width: 640px;
border-radius: 7px;
}
.scroll_modal::after {
content: '';
clear: both;
}

.scroll_modal_close {
border: 0;
outline: 0;
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}



/**** 公開設定ボタンポップアップ ****/

#public_setting_overlay{
display:none;
position:fixed;
top: -10px;
left: 0;
right: 0;
bottom: -10px;
background-color: rgba(255, 255, 255, .5);
overflow: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
z-index:auto;
}


#public_setting{
display:none;
position:absolute;
width:200px;
padding:8px;
top:0;
right:0;
background:#fff;
box-sizing:border-box;
border-radius:12px;
box-shadow: 0 3px 14px 2px rgba(87,62,4,0.3);
z-index:50000;
}

#public_setting:after {
bottom: 100%;
right: 19px;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(136, 183, 213, 0);
border-bottom-color: #FFFFFF;
border-width: 12px;
margin-right: 0px;
}


.public_setting_radio{
display: none;
}
.public_setting_radio + label{
position:relative;
min-height:46px;
padding-left:32px;
margin-bottom:6px;
background:#eee;
border-radius:6px;
box-sizing:border-box;
}

.public_setting_radio:checked + label{
color: #fff;
background:#0080FF;
}

.public_setting_radio + label:last-child{
margin-bottom:0;
}

.public_setting_radio:checked + label::after{
content: "";
display: block;
position: absolute;
top:calc(50% - 11px);
left: 12px;
width: 7px;
height: 14px;
transform: rotate(40deg);
border-bottom: 4px solid #fff;
border-right: 4px solid #fff;
}



/**** myroom_icon_setting ****/

.myroom_icon_setting_list{
list-style:none;
flex-wrap: wrap;
padding:16px 8px;
box-sizing:border-box;
}

.myroom_icon_setting_list li{
width:calc(100% / 4);
padding:0 10px;
box-sizing:border-box;
}

.myroom_icon_setting_list_radio{
display: none;
}
.myroom_icon_setting_list_radio + label{
position:relative;
min-height:46px;
margin:8px 4px;


border-radius:6px;
box-sizing:border-box;
}

.myroom_icon_setting_list_radio + label > img{
border-radius:100%;
border:4px solid #ccc;
background: #d5d5d5;
}

.myroom_icon_setting_list_radio:checked + label{
color: #fff;
}

.myroom_icon_setting_list_radio:checked + label > img{
border-radius:100%;
border:4px solid #002BFF;
}

.myroom_icon_setting_list_radio + label:last-child{
margin-bottom:0;
}


@media screen and (max-width:320px) {
    .myroom_icon_setting_list_radio:checked + label::before{
    content: "";
    position: absolute;
    top:0px;
    right: -7px;
    width: 24px;
    height: 24px;
    display: block;
    background:#002BFF;
    border-radius:100%;
    }

    .myroom_icon_setting_list_radio:checked + label::after{
    content: "";
    display: block;
    position: absolute;
    top:3px;
    right:0px;
    width:6px;
    height:11px;
    transform: rotate(40deg);
    border-bottom: 4px solid #fff;
    border-right: 4px solid #fff;
    }
}

@media screen and (min-width:321px) { 
    .myroom_icon_setting_list_radio:checked + label::before{
    content: "";
    position: absolute;
    top:0px;
    right: -6px;
    width: 32px;
    height: 32px;
    display: block;
    background:#002BFF;
    border-radius:100%;
    }

    .myroom_icon_setting_list_radio:checked + label::after{
    content: "";
    display: block;
    position: absolute;
    top:4px;
    right:5px;
    width:7px;
    height:14px;
    transform: rotate(40deg);
    border-bottom: 4px solid #fff;
    border-right: 4px solid #fff;
    }
}




/**** myroom_color_setting ****/

.myroom_color_setting_list{
list-style:none;
flex-wrap: wrap;
padding:16px 8px;
box-sizing:border-box;
}

.myroom_color_setting_list li{
width:calc(100% / 4);
padding:0 6px;
box-sizing:border-box;
}

.myroom_color_setting_list_radio{
display: none;
}
.myroom_color_setting_list_radio + label{
position:relative;
min-height:46px;
margin:16px 4px;
border-radius:6px;
box-sizing:border-box;
}

.myroom_color_ellipse{
width:40px;
height:40px;
border:4px solid #ccc;
border-radius:50%;
}

.myroom_color_setting_list_radio:checked + label > .myroom_color_ellipse{
border-radius:100%;
border:4px solid #002BFF;
}

.myroom_color_setting_list_radio + label:last-child{
margin-bottom:0;
}


@media screen and (max-width:320px) {
    .myroom_color_setting_list_radio:checked + label::before{
    content: "";
    position: absolute;
    top:-2px;
    right: 0px;
    width: 24px;
    height: 24px;
    display: block;
    background:#002BFF;
    border-radius:100%;
    }

    .myroom_color_setting_list_radio:checked + label::after{
    content: "";
    display: block;
    position: absolute;
    top:0px;
    right:7px;
    width:5px;
    height:12px;
    transform: rotate(40deg);
    border-bottom: 4px solid #fff;
    border-right: 4px solid #fff;
    }
}

@media screen and (min-width:321px) { 
    .myroom_color_setting_list_radio:checked + label::before{
    content: "";
    position: absolute;
    top:-2px;
    right:18px;
    width:24px;
    height:24px;
    display:block;
    background:#002BFF;
    border-radius:100%;
    }

    .myroom_color_setting_list_radio:checked + label::after{
    content: "";
    display: block;
    position: absolute;
    top:0px;
    right:25px;
    width:5px;
    height:12px;
    transform: rotate(40deg);
    border-bottom: 4px solid #fff;
    border-right: 4px solid #fff;
    }
}



/**** recommend_select ****/

.myroom_check_counter {
position: fixed;
text-align: center;
bottom: 18px;
right: 12px;
width: 96px;
height: 96px;
font-size: 24px;
color: rgba(0, 0, 0, .74);
background: rgba(255,255,255,.7);
border-radius: 10px;
z-index: 9;
}

.myroom_check_counter p{
font-size:15px;
font-weight:bold;
}

.recommend_count_num{
position:relative;
top:10px;
font-size:30px;
font-weight:bold;
}

.recommend_count_num span{
font-size:16px;
font-weight:normal;
}

.recommend_submit_button{
display:block;
margin:16px 8px 0 8px;
padding:6px 0;
text-decoration:none;
color:#fff;
font-weight:bold;
font-size:16px;
box-sizing:border-box;
}

.myroom_recommend_select_chkbox{
display: none;
}

.myroom_recommend_select_chkbox + label{
position:relative;
padding:6px 6px 6px 34px;
margin-bottom:12px;

border:1px solid #eee;
border-radius:8px;
border:3px solid #fff;
box-shadow:0 3px 6px rgba(0,0,0,.1);
box-sizing:border-box;
}

/*
.myroom_recommend_select_chkbox + label::before{
content: "";
position: absolute;
top:calc(50% - 12px);
left:4px;
width:24px;
height:24px;
display:block;
background:#eee;
border-radius:100%;
}


.myroom_recommend_select_chkbox:checked + label{
border:3px solid #002BFF;
box-sizing:border-box;
}

.myroom_recommend_select_chkbox:checked + label::before{
content: "";
position: absolute;
top:calc(50% - 12px);
left:4px;
width:24px;
height:24px;
display:block;
background:#002BFF;
border-radius:100%;
}

.myroom_recommend_select_chkbox:checked + label::after{
content: "";
display: block;
position: absolute;
top:calc(50% - 10px);
left:12px;
width:5px;
height:12px;
transform: rotate(40deg);
border-bottom: 4px solid #fff;
border-right: 4px solid #fff;
}
*/

.recommend_wrap{
list-style:none;
margin:0 12px;
box-sizing:border-box;
}

.recommend_wrap li a{
width:100%;
margin:0 0 0 0;
}

.recommend_details{
flex-shrink:0;
display:block;
text-align:center;
width:50px !important;
margin-left:auto;
padding:8px 8px;
background:#fff;
font-size:12px;
font-weight:bold;
background:#fafafa;
border:2px solid #e0e0e0;
border-radius:6px;
box-sizing:border-box;
}

.recommend_ttl{
font-size:12px;
font-weight:bold;
line-height:1.3em;
padding:0 3px;
}

.myroom_recommend_noreview{
position:relative;
text-align:center;
display:block;
width:220px;
margin:4px auto 0 auto;
padding:8px 12px;
background:#01CC95;
color:#fff;
font-weight:bold;
font-size:13px;
text-decoration:none;
border-radius:8px;
box-sizing:border-box;
}

.myroom_recommend_nocontents{
padding:32px 12px;
background:#c100f8;
border-radius:6px;
box-sizing:border-box;
}

.myroom_recommend_nocontents_txt{
text-align:center;
font-size:13px;
font-weight:bold;
line-height:1.3em;
color:#fff;
}

.myroom_recommend_select_review{
margin:4px 4px 4px 0;
padding:1px 4px;
background:#fff;
border:2px solid #ffc600;
border-radius:4px;
}

.myroom_recommend_select_review_txt{
font-size:12px;
line-height:1.3em;
}

.recommend_ttl{
font-weight:bold;
line-height:1.3em;
padding:0 5px;
}
.myroom_recommend_select_chkbox + label{
display:block;
width:100%;
padding:6px 6px 6px 34px;
background: -webkit-gradient(linear,left top,left bottom,from(#fff),to(#eee));
background: -moz-linear-gradient(top,#fff,#eee);
border:2px solid #ccc;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
box-sizing:border-box;
}

.myroom_recommend_select_chkbox + label::before{
content: "";
position: absolute;
top:calc(50% - 12px);
left:4px;
width:24px;
height:24px;
display:block;
background:#ccc;
border-radius:100%;
}

.myroom_recommend_select_chkbox:checked + label{
content: "";
display:block;
width:100%;
border:2px solid #002BFF;
background:#d5e0ff;
}

.myroom_recommend_select_chkbox:checked + label::before{
content: "";
position: absolute;
top:calc(50% - 12px);
left:4px;
width:24px;
height:24px;
display:block;
background:#002BFF;
border-radius:100%;
}

.myroom_recommend_select_chkbox:checked + label::after{
content: "";
display: block;
position: absolute;
top:calc(50% - 10px);
left:12px;
width:5px;
height:12px;
transform: rotate(40deg);
border-bottom: 4px solid #fff;
border-right: 4px solid #fff;
}


.myroom_recommend_edit_btn{
flex-shrink:0;
text-align:center;
width:50px !important;
margin:0 4px 0 auto !important;
padding:8px 0;
background:#e5e5e5;
font-size:13px;
font-weight:bold;
color:#2c2c2c;
text-decoration:none;
border:none;
border-radius:4px;
box-shadow:0 2px 0 rgba(0,0,0,.25);
box-sizing:border-box;
}


/**** tutorial ****/

    /* Pagination Styles */
    .swiper-pagination {
      bottom:1px !imporant;
      position: absolute !important;
      text-align: center !important;
      -webkit-transition: 300ms !important;
      -moz-transition: 300ms !important;
      -o-transition: 300ms !important;
      transition: 300ms !important;
      -webkit-transform: translate3d(0, 0, 0) !important;
      -ms-transform: translate3d(0, 0, 0) !important;
      -o-transform: translate3d(0, 0, 0) !important;
      transform: translate3d(0, 0, 0) !important;
      z-index: 10 !important;
    　background:rgba(0,0,0,0) !important;
    }
    .swiper-pagination.swiper-pagination-hidden {
      opacity: 0 !important;
    }
    /* Common Styles */
    .swiper-pagination-fraction,
    .swiper-pagination-custom,
    .swiper-container-horizontal > .swiper-pagination-bullets {
      bottom: -12px !important;
      left: 0 !important;
      width: 100% !important;
    }
    /* Bullets */
    .swiper-pagination-bullet {
      width: 8px !important;
      height: 8px !important;
      padding: 0 !important;
      display: inline-block !important;
      border-radius: 100% !important;
      background: #000 !important;
      opacity: 0.2 !important;
    }
    button.swiper-pagination-bullet {
      border: none !important;
      margin: 0 !important;
      padding: 0 !important;
      box-shadow: none !important;
      -moz-appearance: none !important;
      -ms-appearance: none !important;
      -webkit-appearance: none !important;
      appearance: none !important;
    }
    .swiper-pagination-clickable .swiper-pagination-bullet {
      cursor: pointer !important;
    }
    .swiper-pagination-white .swiper-pagination-bullet {
      background: #fff !important;
    }
    .swiper-pagination-bullet-active {
      opacity: 1 !important;
      background: #007aff !important;
    }
    .swiper-pagination-white .swiper-pagination-bullet-active {
      background: #fff !important;
    }
    .swiper-pagination-black .swiper-pagination-bullet-active {
      background: #000 !important;
    }
    .swiper-container-vertical > .swiper-pagination-bullets {
      right: 10px !important;
      top: 50% !important;
      -webkit-transform: translate3d(0px, -50%, 0) !important;
      -moz-transform: translate3d(0px, -50%, 0) !important;
      -o-transform: translate(0px, -50%) !important;
      -ms-transform: translate3d(0px, -50%, 0) !important;
      transform: translate3d(0px, -50%, 0) !important;
    }
    .swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
      margin: 5px 0 !important;
      display: block !important;
    }
    .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
      margin: 0 5px !important;
    }
    .swiper-pagination-bullet-active:after{
      display:none;
    }

    @media (max-width:375px) {
        #myroom_tut_bg{
        position:relative;
        width:100vw;
        height:83vh;
        background-image: url(https://mpo.atimg.tokyo/mpo/movie_thumb/myroom/tutorial/myroom_bg_b.jpg);background-size:cover;
        z-index:100000;
        }


        .tut_imgs{
        display:block;
        width:100%;
        max-width:276px;
        margin:0px auto 0px auto;
        border:none !important;
        }

        .tut_txt_l{
        display:block;
        text-align:center;
        color:#fff;
        font-size:24px;
        font-weight:bold;
        margin:26px auto 22px auto;
        }

        .tut_txt_s{
        display:block;
        text-align:center;
        color:#fff;
        font-size:13px;
        line-height:1.5em;
        margin:0 auto;
        }

        .tut_step{
        display:block;
        text-align:center;
        width:80px;
        padding:4px;
        color:#fff;
        font-size:13px;
        font-weight:bold;
        line-height:1.5em;
        margin:10px auto;
        color:#7e71ff;
        border-radius:20px;
        background:rgba(255,255,255,.7);
        }
    }

    @media (min-width:361px) {
        #myroom_tut_bg{
        position:relative;
        width:100vw;
        height:82vh;
        background-image: url(https://mpo.atimg.tokyo/mpo/movie_thumb/myroom/tutorial/myroom_bg_b.jpg);background-size:cover;
        z-index:100000;
        }

        .tut_imgs{
        display:block;
        width:100%;
        max-width:340px;
        margin:0 auto auto auto;
        border:none !important;
        }
    }

    @media (min-width:375px) {

        #myroom_tut_bg{
        position:relative;
        width:100vw;
        height:83vh;
        background-image: url(https://mpo.atimg.tokyo/mpo/movie_thumb/myroom/tutorial/myroom_bg_a.jpg);
        background-size:cover;
        background-repeat: repeat;
        z-index:100000;
        }

        .tut_imgs{
        display:block;
        width:100%;
        max-width:380px;
        margin:0 auto auto auto;
        border:none !important;
        }

        .tut_txt_l{
        display:block;
        text-align:center;
        color:#fff;
        font-size:28px;
        font-weight:bold;
        margin:38px auto 24px auto;
        }

        .tut_txt_s{
        display:block;
        text-align:center;
        color:#fff;
        font-size:15px;
        line-height:1.5em;
        margin:0 auto;
        }

        .tut_step{
        display:block;
        text-align:center;
        width:80px;
        padding:4px;
        color:#fff;
        font-size:14px;
        font-weight:bold;
        line-height:1.5em;
        margin:10px auto;
        color:#7e71ff;
        border-radius:20px;
        background:rgba(255,255,255,.7);
        }
    }


    .myroom_tut_start_btn{
    width:170px;
    height:44px;
    margin:0 auto;
    background:#fff;
    border:4px solid #c5beff;
    border-radius:25px;
    box-sizing:border-box;
    }

    .myroom_tut_start_btn a{
    position:relative;
    display:block;
    text-align:center;
    width:170px;
    height:44px;
    color:blue;
    font-size:16px;
    font-weight:bold;
    box-sizing:border-box;
    }

    .myroom_test{
    display:block;
    text-align:center;
    width:44px;
    margin:20px auto;
    padding:8px 12px;
    background:rgba(255,255,255,0.5);
    border-radius:12px;
    font-size:13px;
    }

.swiper-button-next_wht {
    position: absolute;
    bottom: 20px;
    left:calc(50% - 30px);
    text-align:center;
    width:60px;
    padding:8px 0;
    font-weight:bold;
    cursor: pointer;
    background: rgba(75,113,255,.8);
    border-radius:20px;
    z-index: 10;
}

.swiper-button-next_wht.swiper-button-disabled {
      opacity: 0;
      cursor: auto;
      pointer-events: none;
}

.next_right_arrow{
    position:fixed;
    top:calc(50% - .5em);
    right:12px;
    z-index:9999;
}

.next_right_arrow.swiper-button-disabled{
      opacity: 0;
      cursor: auto;
      pointer-events: none;
}


.myroom_start_link{
text-align:center;
margin:0;
padding:12px 0;
background:#657bff;
font-size:14px;
font-weight:bold;
}


.myroom_tutorial_end_btn_wrap{
position:absolute;
bottom:20px;
width:100%;
}

.myroom_tutorial_end_btn{
position:relative;
display:block;
text-align:center;
width:240px;
margin:0 auto;
background:#5a21ff;
background: linear-gradient(-135deg, #078ee3, #7800f2);
padding:16px 24px;color:#fff;
font-weight:bold;
text-decoration:none;
border-radius:24px;
box-shadow:0 3px 6px rgba(0,0,0,.3);
box-sizing:border-box;
z-index:9999;
}



/****mpo_top****/

.myroom_introduce{
width:240px;
margin:0 6px 0 auto;
padding:8px 10px;
background:#fff;
line-height:1.5em;
font-size:13px;
font-weight:bold;
border:2px solid #ccc;
border-radius:6px;
box-sizing:border-box;
}

.myroom_introduce {
position: relative;
background: #FFFFFF;
border: 3px solid #0dd59f;
}
.myroom_introduce:after,
.myroom_introduce:before {
bottom: 100%;
right: 12px;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.myroom_introduce:after {
border-color:border-color:#0dd59f;;
border-bottom-color: #FFFFFF;
border-width: 12px;
margin-right: 0px;
}
.myroom_introduce:before {
border-color: rgba(194, 225, 245, 0);
border-bottom-color: #0dd59f;
border-width: 16px;
margin-right: -4px;
}






/***** ranking *****/

.myroom_ranking_index_icon{
text-align:center;
margin:24px auto 12px auto;
color:#FEB63F;
}

.myroom_ranking_index{
text-align:center;
margin:0 auto 24px auto;
font-size:18px;
font-weight:bold;
}

.myroom_ranking_wrap{
position:relative;
padding:8px;
}

.myroom_ranking_eyecatch{
display:block;
width:100%;
max-width:480px;
margin:0 auto;
box-sizing:border-box;
}

.myroom_ranking_date{
position:absolute;
left:calc(50% - 100px);
bottom:4px;
width:200px;
padding:4px 0;
color:#2c2c2c;
background:rgba(255,255,255,.7);
border-radius:6px;
z-index:100;
}

.myroom_ranking_ul{
list-style:none;
background:#fff;
border-radius: 8px;
box-shadow: 0 3px 6px rgba(0,0,0,.1);
}

.myroom_ranking_ul li{
padding:10px 6px;
border-bottom: 1px solid #eee;
}

.myroom_ranking_ul li:last-child{
border-bottom:none;
}

.ranking_information{
position:relative;
}

.myroom_ranking_ul li .icon{
flex-shrink:0;
width:28px;
margin-right:6px;
}

.myroom_ranking_ul li .rank_arrow{
padding-right:6px;
width:2.2em;
}

.myroom_ranking_ul li .rank_arrow .col_up{
color:#ff135d;
}

.myroom_ranking_ul li .rank_arrow .col_stay{
color:#5D5D5D;
}

.myroom_ranking_ul li .rank_arrow .col_down{
color:#7D33FF;
}

.myroom_ranking_numbox{
min-width:28px;
height:28px;
margin-right:6px;
padding:1px;
background:#e0e0e0;
color:#2c2c2;
font-weight:bold;
border-radius:4px;
}

.myroom_ranking_ul li .ellipse_thumbs{
flex-shrink:0;
width:36px;
border:2px solid #eee;
border-radius:50%;
}

.ellipse_thumbs_regular,.ellipse_thumbs_bronze,.ellipse_thumbs_silver,.ellipse_thumbs_gold,.ellipse_thumbs_platinum,.review__user-icon,.ellipse_thumbs_deafault,.ellipse_thumbs_empty,.ellipse_thumbs_{
flex-shrink:0;
width:40px;
height:40px;
border: 3px solid #e0e0e0;
border-radius: 100%;
box-sizing: border-box;
}

.ellipse_thumbs_diamond,.ellipse_thumbs_black_diamond{
flex-shrink:0;
width:40px;
height:40px;
border:3px solid #8a89dd;
border-radius: 100%;
box-sizing: border-box;
}

.myroom_ranking_details{
padding:0 6px;
}

.myroom_ranking_nickname{
margin-bottom:4px;
font-size:13px;
line-height:1.3em;
}

.myroom_ranking_nickname span{
font-weight:bold;
}

.myroom_ranking_point_count{
display:none;
color:blue;
font-size:18px;
font-weight:bold;
}

.myroom_ranking_reviewbox{
display:block;
background:#eee;
margin:6px auto 0 auto;
padding:6px;
border-radius:6px;
box-sizing:border-box;
}

.myroom_ranking_reviewbox_innder{
padding:4px 5px;
margin-top:4px;
background:#fff;
border-radius:6px;
box-sizing:border-box;
}

.myroom_ranking_contents{
position:relative;
box-sizing:border-box;
}

.myroom_ranking_contents .thumbs_box{
flex-shrink:0;
width:50px;
}

.myroom_ranking_contents .thumbs_box img{
width:100%;
}

.myroom_ranking_contents p{
padding:6px 15px 6px 6px;
font-size:12px;
font-weight:bold;
line-height:1.3em;
}

.myroom_ranking_reviewbox_innder p{
margin-left:6px;
font-size:12px;
line-height:1.3em;
}

.rev_stars{
flex-shrink:0;
width:30px;
margin-left:6px;
}

.myroom_ranking_morebtn{
text-align:center;
width:200px;
padding:12px 0;
margin:36px auto;
background:#20d6b1;
font-size:13px;
font-weight:bold;
color:#fff;
border-radius:25px;
}


.myroom_ranking_roomlink{
margin-left:auto;
background:#fff;
padding:6px 8px;
border:2px solid #eee;
border-radius:6px;
box-shadow:0 2px 6 rgba(0,0,0,.2);
box-sizing:border-box;
}

.myroom_ranking_me{
background:#d9fff9;
border:2px solid #30d1b8 !important;
}

.myroom_ranking_me_index{
display:inline-block;
text-align:center;
margin:0 0 8px 4px;
padding:3px 6px;
background:#fff;
font-size:11px;
font-weight:bold;
border-radius:4px;
}

.past_month_link{
position:relative;
width:140px;
margin:12px 0;
padding:8px 0;
background:#09c1a5;
border-radius:6px;
}

.past_month_link_right{
position:relative;
width:140px;
margin:12px 0 0 auto;
padding:8px 0;
background:#09c1a5;
border-radius:6px;
}

.myroom_ranking_recommend_icon{
display:inline-block;
padding:2px 4px ;
margin-bottom:4px;
background:#fff;
border-radius:6px;
}


/**** ranking enter ****/

.myroom_ranking_enter_btn{
position:relative;
display:block;
padding:12px 0;
background:#f2f2f2;
border-radius:12px;
box-shadow:0 3px 0 rgba(0,0,0,.1);
box-sizing:border-box;
}


/***** badge_list *****/

.badge_list{
flex-wrap: wrap;
position:relative;
text-align:center;
width:100%;
list-style:none;
margin:16px auto 0 auto;
padding:4px 6px;
border-radius:6px;
box-sizing:border-box;
}

.badge_list li{
flex-shrink:0;
width:25%;
margin-bottom:20px;
padding:0 8px;
box-sizing:border-box;
}

.badge_list li img{
width:100%;
max-width:80px;
box-sizing:border-box;
}

.badge_list_counter{
display:inlien-block;
margin:8px 6px;
padding:3px 0;
background:#f0f0f0;
font-weight:bold;
font-size:13px;
border-radius:8px;
box-sizing:border-box;
}

.badge_list_name{
font-size:12px;
font-weight:bold;
line-height:1.2em;
}

.badge_index{
text-align:center;
margin:0 auto;
padding:32px 0 12px 0;
}

.badge_acquired{
width:200px;
margin:0 auto 30px auto;
padding:6px;
background:#f0f0f0;
border-radius:8px;
font-size:13px;
font-weight:bold;
}

.badge_acquired .num{
margin-left:8px;
font-size:26px;
color:#00D3B6;
}




/***** myroom top *****/

.modal_scroll_get_badge_container{
display: none;
position: fixed;
top: -10px;
left: 0;
right: 0;
bottom: -10px;
background-color: rgba(0, 0, 0, .7);
overflow: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
box-sizing:border-box;
z-index:9999;
}

.get_badge_txt{
text-align:center;
margin:24px auto 12px auto;
font-weight:bold;
font-size:19px;
line-height:1.3em;
}

.get_badge_txt span{
text-align:center;
font-weight:bold;
font-size:15px;
line-height:1.3em;
}

.get_badge_icon{
position:absolute;
bottom:-4px;
left:calc(50% - 80px);
width:160px;
z-index:999;
}

.badge_list_icon{
position:absolute;
bottom:calc(50% - 100px);
left:calc(50% - 80px);
width:160px;
z-index:999;
}

/***** myroom top badge list *****/

.badge_list_s_link{
display:block;
max-width:280px;
margin:16px auto 0 auto;
}

.badge_list_s{
position:relative;
text-align:center;
padding:4px 6px;
color:#fff;
background:rgba(255,255,255,.4);
border-radius:6px;
list-style:none;
}

.badge_list_s li{
}

.badge_list_s img{
width:36px;
margin-right:6px;
}












/***** recommend select page / review_edit *****/

/*** modal review write***/

.modal_scroll_overlay {
display: none;
position: fixed;
top: -10px;
left: 0;
right: 0;
bottom: -10px;
background-color: rgba(0, 0, 0, .7);
overflow: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
box-sizing:border-box;
z-index:9999;
}

.modal_scroll_container {
padding: 0 0 0 0;
width: 100%;
height: 100%;
box-sizing:border-box;
z-index:19999;
}
.modal_scroll_inner {
width:100%;
vertical-align:middle;
box-sizing:border-box;
z-index:19999;
}

.modal_scroll_main {
position:relative;
top:10vh;
margin:0 auto;
padding: 24px 12px;
text-align: justify;
text-justify: inter-ideograph;
border-radius: 7px;
background-color: #fff;
z-index:19999;
}

.modal_scroll_close_btn{
text-align:center;
margin:24px auto 0 auto;
width:90px;
padding:7px 0;
font-size:14px;
background:#eee;
border-radius:6px;
}


/*** modal review edit***/

.modal_scroll_overlay_edit{
display: none;
position: fixed;
top: -10px;
left: 0;
right: 0;
bottom: -10px;
background-color: rgba(0, 0, 0, .7);
overflow: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
box-sizing:border-box;
z-index:9999;
}

.myroom_recommend_edit_btn{
flex-shrink:0;
text-align:center;
width:50px !important;
margin:0 0 0 auto !important;
padding:8px 0;
background:#b0b0b0;
font-size:13px;
font-weight:bold;
color:#fff;
text-decoration:none;
border:none;
border-radius:6px;
box-shadow:0 3px 0 rgba(0,0,0,.5);
box-sizing:border-box;
}

.review_edit_textarea{
display:block;
text-align:left;
width:100%;
min-height:100px;
margin:20px auto 30px auto;
padding:12px;
background:#eee;
color:#2c2c2c;
font-size:13px;
line-height:1.5em;
border:none;
border-radius:12px;
box-sizing:border-box;
}

.myroom_recommend_review_grade_chkbox{
display: none;
}

.myroom_recommend_review_grade_chkbox + label{
position:relative;
width:calc(100%/3);
min-height:84px;
padding:8px 0;
margin:0 3px;
background: -webkit-gradient(linear,left top,left bottom,from(#fff),to(#eee));
background: -moz-linear-gradient(top,#fff,#eee);
border:2px solid #ccc;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
box-shadow:0 3px 6px rgba(0,0,0,.1);
box-sizing:border-box;
}

.myroom_recommend_review_grade_chkbox + label::before{
content: "";
position: absolute;
bottom:8px;
left:calc(50% - 12px);
width:24px;
height:24px;
display:block;
background:#ccc;
border-radius:100%;
}

.myroom_recommend_review_grade_chkbox:checked + label{
content: "";
border:2px solid #002BFF;
background:#d5e0ff;
}

.myroom_recommend_review_grade_chkbox:checked + label::before{
content: "";
position: absolute;
bottom:8px;
left:calc(50% - 12px);
width:24px;
height:24px;
display:block;
background:#002BFF;
border-radius:100%;
}

.myroom_recommend_review_grade_chkbox:checked + label::after{
content: "";
display: block;
position: absolute;
bottom:12px;
left:calc(50% - 4px);
width:5px;
height:12px;
transform: rotate(40deg);
border-bottom: 4px solid #fff;
border-right: 4px solid #fff;
}

.myroom_review_edit_caution{
text-align:left;
max-width:280px;
padding:6px 8px;
margin:12px auto;
background:#ffe8f1;
border:1px solid #ff3081;
color:#ff3081;
font-size:12px;
line-height:1.3em;
box-sizing:border-box;
}

.myroom_recommend_review_grade_icon{
display:block;
width:46px;
margin:0 auto;
}


.myroom_recommend_select_ul li{
background:#fff;
margin:0 10px 6px 10px;
padding:6px;
border-radius:4px;
box-sizing:border-box;
}

.myroom_recommend_select_review{
padding:6px;
margin:0;
}

.myroom_recommend_select_review_txt{
padding:2px 4px 2px 0;
}

.myroom_recommend_select_chkbox_new + label{
position:relative;
width:100%;
padding:6px 6px 6px 34px;
border:2px solid #cecece;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius:6px 6px 0 0;
box-sizing:border-box;
}

.myroom_recommend_select_chkbox_new + label::before{
content: "";
position:absolute;
top:calc(50% - 12px);
left:6px;
width:24px;
height:24px;
display:block;
background:#ccc;
border-radius:100%;
}

.myroom_recommend_select_chkbox_new:checked + label{
content: "";
width:100%;
border:2px solid #002BFF;
background:#d5e0ff;
border-radius:6px 6px 0 0;
}

.myroom_recommend_select_chkbox_new:checked + label::before{
content: "";
position: absolute;
top:calc(50% - 12px);
left:4px;
width:24px;
height:24px;
display:block;
background:#002BFF;
border-radius:100%;
}

.myroom_recommend_select_chkbox_new:checked + label::after{
content: "";
display: block;
position: absolute;
top:calc(50% - 10px);
left:12px;
width:5px;
height:12px;
transform: rotate(40deg);
border-bottom: 4px solid #fff;
border-right: 4px solid #fff;
}

.myroom_recommend_all_delete{
position: fixed;
text-align: center;
bottom: 18px;
left:12px;
width:106px;
padding:12px 6px;
background:#838383;
font-size:13px;
color:#fff;
border:none;
border-radius:4px;
z-index:1000;
}


/***review_edit_list***/

.review_edit_list{
list-style:none;
margin:12px 8px;
box-sizing:border-box;
}

.review_edit_list li{
-webkit-align-items:center;
align-items:center;
width:100%;
margin:12px 0 0 0;
padding:6px;
margin-bottom:6px;
border:1px solid #eee;
box-shadow:0 3px 6px rgba(0,0,0,.1);
border-radius:8px;
box-sizing:border-box;
}

.review_edit_list li a{
width:100%;
margin:0 0 0 0;
}

.review_edit_list .review_user_name{
margin-bottom:3px;
font-weight:bold;
font-size:11px;
line-height:1.3em;
}

.review_edit_list .review_ttl{
margin-bottom:3px;
font-weight:bold;
font-size:11px;
line-height:1.3em;
}


.review_txt_box{
width: 100%;
padding: 8px 12px;
background: #eee;
font-size: 12px;
font-weight: 700;
line-height: 1.6em;
color: #2c2c2c;
border-radius:0 0 6px 6px;
box-sizing: border-box;
border-left: 2px solid #cecece;
border-right: 2px solid #cecece;
border-bottom: 2px solid #cecece;
}

.recommend_search_box{
padding:12px 6px;
background:#eee;
box-sizing:border-box;
}

.recommend_search_box .search_form{
width:100%;
min-height:36px;
margin-right:6px;
padding:8px;
background:#fff;
color:#2c2c2c
font-weight:bold;
border:none;
border-radius:6px;
box-sizing:border-box;
}
.recommend_search_box .search_button{
flex-shrink:0;
width:72px;
min-height:32px;
box-sizing:border-box;
}

.myroom_recommend_pagenation_ul{
list-style:none;
margin:32px auto 32px auto;
}

.myroom_recommend_pagenation_ul li{
display:-webkit-flex;
display:flex;
-webkit-justify-content: center;
justify-content:center;
-webkit-align-items:center;
align-items: center;
margin:0 3px;
border:1px solid #dedede;
box-sizing:border-box;
}

.myroom_recommend_pagenation_ul li.active{
background:#eee;
}

.myroom_recommend_pagenation_ul li.dot{
border:none !important;
}

.myroom_recommend_pagenation_ul li a{
display:-webkit-flex;
display:flex;
-webkit-justify-content: center;
justify-content:center;
-webkit-align-items:center;
align-items: center;
width:48px;
height:48px;
}


.modal_scroll_overlay_edit_alert {
display: none;
position: fixed;
top: -10px;
left: 0;
right: 0;
bottom: -10px;
background-color: rgba(0, 0, 0, .7);
overflow: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
box-sizing: border-box;
z-index: 9999;
}



/*** like list information ***/

.like_list_information_ballown{
position: relative;
text-align:center;
width:200px;
box-shadow:0 3px 10px rgba(0,0,0,.2);
margin:0px 6px 24px auto;
padding:8px;
font-size:14px;
font-weight:bold;
color:#fff;
background: #FF3D3D;
border: 2px solid #FF3D3D;
border-radius:8px;
}

.like_list_information_ballown:after,
.like_list_information_ballown:before {
bottom: 100%;
right: 44px;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.like_list_information_ballown:after {
border-color: rgba(136, 183, 213, 0);
border-bottom-color: #FF3D3D;
border-width: 10px;
margin-right: 0px;
}
.like_list_information_ballown:before {
border-color: rgba(194, 225, 245, 0);
border-bottom-color: #FF3D3D;
border-width: 13px;
margin-right: -3px;
}




/***** follow *****/


.followlist_link{
padding:4px;
color:#fff !important;
}

.followlist_link > span{
color:#fff !important;
font-size:10px; !important;
margin-left:2px;
}

.myroom_public_new{
display:block;
text-align:center;
margin:8px auto 0 auto;
padding:8px 12px;
font-size:12px;
font-weight:bold;
color:#fff;
background:rgba(0,0,0,.2);
}

.follow_btn_top{
display:inline-block;
position:absolute;
top:0;
right:8px;
text-align:center;
width:10.5em;
padding:4px;
font-size:11px;
font-weight:bold;
color:#fff;
margin:12px auto 12px auto;
border:3px solid #fff;
border-radius:8px;
box-sizing:border-box;
}

.following_btn_top{
display:inline-block;
position:absolute;
top:0;
right:8px;
text-align:center;
width:10.5em;
margin:12px auto 12px auto;
padding:4px;
font-size:11px;
font-weight:bold;
color:#fff;
background:#4b71ff;
border:3px solid #fff;
border-radius:8px;
box-sizing:border-box;
}

.myroom_bg_new{
background:
linear-gradient(to bottom,rgba(0,0,0,0) 50%,rgba(0,0,0,.2) 100%),
linear-gradient(90deg,#38d4ca 0%,#54dfb7 100%);
}



























/**** myroom_contents_list toko ****/

.contents_ul_myroom{
max-width:640px;
margin:0 auto;
width:100%;
padding:2px 2px;
border-radius:4px;
box-sizing:border-box;
}

.contents_ul_myroom li{
display:-webkit-flex;
display:flex;
-webkit-justify-content:left;
justify-content:left;
-webkit-align-items:center;
align-items:center;
list-style:none;
position:relative;
background:#fafafa;
padding:2px;
margin-bottom:1px;
border:2px solid #eee;
border-radius:4px;
box-sizing:border-box;
}

.contents_ul_myroom > li > a{
position:relative;
display:-webkit-flex;
display:flex;
-webkit-justify-content:left;
justify-content:left;
-webkit-align-items:flex-start;
align-items:flex-start;
}


.contents_ul_myroom > li > a .contents_li_txt{
width:100%;
padding:4px 8px 4px 6px !important;
}

.contents_ul_myroom > li > a .c_thumb{
width:80px;
height:60px;
flex-grow: 0;
flex-shrink: 0;
}

.contents_ul_myroom > li > a .c_ttl{
text-align:left;
line-height:1.3em;
font-weight:bold;
margin-bottom:4px;
word-break: break-all;
z-index:2200;
}

.contents_ul_myroom > li > a .c_ttl_s{
text-align:left;
line-height:1.3em;
font-weight:normal;
word-break: break-all;
}


.contents_ul_myroom > li > a .c_price{
text-align:left;
line-height:1.3em;
font-weight:bold;
color:#767676;
word-break: break-all;
}

.contents_ul_myroom > li > a .c_price_normal{
text-align:left;
line-height:1.3em;
font-weight:bold;
word-break: break-all;
color:#008679;
}





/**** toko_select_fixed_button ****/

.toko_select_all_delete{
position: fixed;
display:inline-block;
text-align: center;
bottom: 32px;
left:12px;
padding:8px 12px;
background:#838383;
font-size:11px;
color:#fff;
border:none;
border-radius:4px;
z-index:1000;
}

.toko_select_check_counter {
position: fixed;
text-align: center;
bottom: 18px;
right: 12px;
width: 96px;
height: 96px;
font-size: 24px;
color: rgba(0, 0, 0, .74);
border-radius: 10px;
z-index: 15;
}

.toko_select_check_counter p{
font-size:15px;
font-weight:bold;
}

.toko_select_count_num{
position:relative;
top:10px;
font-size:30px;
font-weight:bold;
}

.toko_select_count_num span{
font-size:16px;
font-weight:normal;
}

.toko_select_submit_button{
display:block;
margin:16px 8px 0 8px;
padding:6px 0;
text-decoration:none;
color:#fff;
font-weight:bold;
font-size:16px;
box-sizing:border-box;
}

/**** toko_select_contents_checkbox ****/

.contents_ul_toko_select{
max-width:640px;
margin:0 auto;
width:100%;
padding:2px;
border-radius:4px;
box-sizing:border-box;
}


.contents_ul_toko_select li{
display:-webkit-flex;
display:flex;
-webkit-justify-content:left;
justify-content:left;
-webkit-align-items:center;
align-items:center;
list-style:none;
position:relative;
background:#fafafa;
margin-bottom:1px;
border:2px solid #eee;
border-radius:4px;
box-sizing:border-box;
}

.contents_ul_toko_select > li > label{
position:relative;
display:-webkit-flex;
display:flex;
-webkit-justify-content:left;
justify-content:left;
-webkit-align-items:flex-start;
align-items:flex-start;
width:100%;
}


.contents_ul_toko_select > li > label > .contents_li_txt{
width:100%;
padding:4px 8px 4px 6px !important;
}

.contents_ul_toko_select > li > label .c_thumb{
width:80px;
height:60px;
flex-grow: 0;
flex-shrink: 0;
}

.contents_ul_toko_select > li > label .c_ttl{
text-align:left;
line-height:1.3em;
font-weight:bold;
margin-bottom:4px;
word-break: break-all;
z-index:2200;
}

.contents_ul_toko_select > li > label > .c_ttl_s{
text-align:left;
line-height:1.3em;
font-weight:normal;
word-break: break-all;
}


.contents_ul_toko_select > li > label > .c_price{
text-align:left;
line-height:1.3em;
font-weight:bold;
color:#767676;
word-break: break-all;
}

.contents_ul_toko_select > li > label > .c_price_normal{
text-align:left;
line-height:1.3em;
font-weight:bold;
word-break: break-all;
color:#008679;
}


.c_price_sale{
color:#F7450F;
}

.c_playtime_txt{
color:#2c2c2c;
}

.tag_series{
font-weight:bold;
color:#fff;
background:#00B9A7;
border-radius:3px;
}

@media (max-width:375px) {
    .c_ttl{
    font-size:11px;
    }

    .c_ttl_s{
    font-size:8px;
    }

    .c_price{
    font-size:9px;
    }

    .c_price_normal{
    font-size:14px;
    }

    .c_playtime_txt{
    font-size:9px;
    }

    .c_li_tag{
    font-size:8px;
    padding:2px 3px;
    }

    .tag_series{
    padding: 2px 3px;
    font-size:8px;
    }

    .contents_ul_toko_select > li > a .srto{
    min-height:114px;
    }

    .c_playtime_txt{
    position:absolute;
    bottom:4px;
    right:4px;
    padding:0 0 2px 0;
    }
}

@media (min-width:375px) {
    .c_ttl{
    font-size:12px;
    }

    .c_ttl_s{
    font-size:10px;
    }

    .c_price{
    font-size:10px;
    }

    .c_price_normal{
    font-size:16px;
    }

    .c_li_tag{
    font-size:9px;
    padding:3px 4px;
    }

    .tag_series{
    padding: 2px 5px;
    font-size:9px;
    }

    .contents_ul_toko_select > li > a .srto{
    min-height:104px;
    }

    .c_playtime_txt{
    position:absolute;
    bottom:4px;
    right:4px;
    font-size:10px;
    border-left:1px solid #a5a5a5;
    padding:4px 0 4px 8px;
    }
}


.ch_circle_r .c_ttl{
padding-right:22px;
}

.ch_circle_r::before {
content: "";
position: absolute;
top: 0;
right: 0;
width:32px;
height:32px;
border-radius: 0 3px 0 100%;
z-index:100;
}

.ch_circle_area{
display:-webkit-flex;
display:flex;
-webkit-justify-content: center;
justify-content:center;
-webkit-align-items:center;
align-items: center;
flex-wrap:wrap;
position:absolute;
top:-2px;
right:-3px;
width:32px;
height:32px;
z-index:502;
}



.ttag_bg_toko_onsei::before{
background:#6449FF;
}

.ttag_bg_toko_mv::before{
background:#00C7AE;
}


.toko_select_chkbox + label{
position:relative;

padding:2px 2px 2px 34px;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius:4px 0 4px 0;
box-sizing:border-box;
}

.toko_select_chkbox + label::before{
content: "";
position:absolute;
top:calc(50% - 12px);
left:6px;
width:24px;
height:24px;
display:block;
background:#ccc;
border-radius:100%;
}

.toko_select_chkbox:checked + label{
content: "";
}

.toko_select_chkbox:checked ~ .selected_bg{
content: "";
background:#d5e0ff;
}

.toko_select_chkbox:checked + label::before{
content: "";
position: absolute;
top:calc(50% - 12px);
left:6px;
width:24px;
height:24px;
display:block;
background:#002BFF;
border-radius:100%;
}

.toko_select_chkbox:checked + label::after{
content: "";
display: block;
position: absolute;
top:calc(50% - 10px);
left:13px;
width:5px;
height:12px;
transform: rotate(40deg);
border-bottom: 4px solid #fff;
border-right: 4px solid #fff;
}



.toko_select_pagenation_ul li{
display:-webkit-flex;
display:flex;
-webkit-justify-content: center;
justify-content:center;
-webkit-align-items:center;
align-items: center;
margin:0 3px;
border:1px solid #dedede;
box-sizing:border-box;
}

.toko_select_pagenation_ul li.active{
background:#eee;
}

.toko_select_pagenation_ul li.dot{
border:none !important;
}

.toko_select_pagenation_ul li a{
display:-webkit-flex;
display:flex;
-webkit-justify-content: center;
justify-content:center;
-webkit-align-items:center;
align-items: center;
width:48px;
height:48px;
}




.myroom_icon_setting_headarea{
padding:24px 0 !important;
}

.myroom_icon_circle_box{
position:relative;
width:92px;
height:92px;
margin:0 auto 24px auto;
}

.myroom_icon_circle{
display:block;
width:92px;
height:92px;
margin:20px auto;
background:#eee;
border:4px solid #eee;
border-radius:100%;
}

.myroom_icon_camera_btn{
position:absolute;
bottom:-12px;
right:-12px;
display:-webkit-flex;
display:flex;
-webkit-justify-content: center;
justify-content:center;
-webkit-align-items:center;
align-items: center;
width:2em;
height:2em;
background:#fff;
color:#828282;
border:3px solid #e0e0e0;
border-radius:100%;
box-shadow:0 0 12px rgba(0,0,0,.1)
}


#myroom_icon_setting_overlay{
display:none;
position:fixed;
top: -10px;
left: 0;
right: 0;
bottom: -10px;
background-color: rgba(0, 0, 0, .2);
overflow: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
z-index:400 !important;
}


#myroom_icon_setting{
display:none;
position:absolute;
width:270px;
left:28px;
background:#fff;
border:2px solid #ccc;
border-radius:6px;
box-shadow: 0 3px 14px rgba(0,0,0,0.1);
box-sizing:border-box;
z-index:500 !important;
}

#myroom_icon_setting > .setting_link_box{
display:-webkit-flex;
display:flex;
-webkit-justify-content:left;
justify-content:left;
-webkit-align-items:center;
align-items:center;
padding:12px;
margin:4px;
background:#efefef;
font-size:13px;
font-weight:bold;
color:#3c3c3c;
border-radius:4px;
box-sizing:border-box;
}

#myroom_icon_setting:after{
top:-24px;
left:12px;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: none;
border-bottom-color: #fff;
border-width: 12px;
margin-right: 0px;
}

.myroom_icon_setting_bottom{
display:-webkit-flex;
display:flex;
-webkit-justify-content: center;
justify-content:center;
-webkit-align-items:center;
align-items: center;
width:100%;
box-sizing:border-box;
}

.myroom_icon_setting_bottom > div{
width:50%;
margin:8px 4px;
box-sizing:border-box;
}

.myroom_icon_setting_bottom > div > a{
display:block;
text-align:center;
width:100%;
padding:4px 0;
font-size:10px;
box-sizing:border-box;
}

/**** icon_uploader ****/

.icon_upload_btn{
position:relative;
width:100%;
background:#eee;
border: 4px solid #ccc;
border-radius:50%;
}

.icon_upload_btn > .abs_icon{
position:absolute;
top:calc(50% - .5em);
left:calc(50% - .5em);
}


@media (max-width:375px) {
    .mini_abs_icon{
    position:absolute;
    bottom:-8px;
    right:-10px;
    width:28px;
    height:28px;
    background:#fff;
    font-size:13px;
    border:3px solid #e0e0e0;
    border-radius:100%;
    }
}

@media (min-width:375px) {
    .mini_abs_icon{
    position:absolute;
    bottom:-8px;
    right:-10px;
    width:32px;
    height:32px;
    background:#fff;
    font-size:20px;
    border:3px solid #e0e0e0;
    border-radius:100%;
    }
}


.icon_Setting_scroll_wrap{
top: 0;
left: 0;
width: 100%;
z-index:500;
}

.is-fixed {
position:fixed;
}

.add_margin_top{
margin-top:180px;
}

.myroom_icon_preview{
position:absolute;
top:-12px;
left:8px;
padding:4px 8px;
background:rgba(255,255,255,.4);
font-size:12px;
font-weight:bold;
border-radius:6px;
}



/*** myroom renewal 2021_12 ***/


.myroom_profile_abs_name{
font-size:14px;
font-weight:bold;
color:#2c2c2c;
}

.myroom_profile_abs_name_editbtn{
width:24px;
height:24px;
background:#fff;
border:3px solid rgba(0,0,0,.1);
border-radius:50%;
box-shadow:none;
box-sizing:content-box;
}

.myroom_profile_txt_editbtn{
width:24px;
height:24px;
padding:2px;
background:#fff;
border:3px solid rgba(0,0,0,.1);
border-radius:50%;
box-shadow:none;
box-sizing:content-box;
}

.myroom_profile_area{
padding:0 16px;
margin:76px auto 16px auto;
font-size:13px;
line-height:1.4em;

}

.myroom_mpo_back_button{
position:absolute;
top:8px;
left:8px;
display:inline-block;
padding:6px 10px;
background:rgba(0,0,0,.3);
font-size:11px;
font-weight:bold;
color:#fff;
border-radius:8px;
}

.myroom_profile_icon_area{
position:relative;
width:100px;
margin:0 auto;
padding:0 12px;
box-sizing:border-box;
}

.myroom_top_profile_icon{
display:block;
//position:absolute;
//bottom:-50px;
//left:12px;
width:100px;
height:100px;
background:#fff;
border:4px solid rgba(0,0,0,.07);
border-radius:50%;

}

.myroom_profile_icon_editbtn{
position:absolute;
bottom:0;
right:0;
width:28px;
height:28px;
background:#fff;
border-radius:50%;
border:3px solid rgba(0,0,0,.1);
box-shadow:none !important;
}

.myroom_profile_area_abs{
position:absolute;
bottom:-50px;
height:100px;
width:100%;
padding:0 8px 0 9px;
box-sizing:border-box;
}

.followlist_link_grey{
padding:4px 0;
color:#2c2c2c !important;
}

.followlist_link_grey > span{
color:#afafaf !important;
font-size:10px; !important;
margin-left:2px;
}

.mrm_profile_edit_btn{
position:absolute;
top:4px;
left:128px;
padding:8px;
background:#fff;
color:#626262;
font-size:12px;
font-weight:bold;
border:1px solid #dadada;
border-radius:6px;
box-shadow:0 2px 0 #dadada;
box-sizing:border-box;
}


.myroom_public_new2{
display:block;
text-align:center;
margin:8px auto 0 auto;
padding:12px 12px;
font-size:12px;
font-weight:bold;
color:#909090;
background:#eee;
}

.myroom_preview_btn2 {
position: absolute;
top: calc(50% - 1.3em);
right: 4px;
padding: 6px;
font-size: 10px;
color: #2c2c2c;
background: #fff;
border: 1px solid #c6d4e7;
border-radius: 4px;
box-shadow: 0 2px 0 rgb(33 54 110 / 50%);
box-sizing: border-box;
}


/**** profile edit****/

.profile_textarea{
width:100%;
height:10em;
padding:8px;
border:2px solid #eee;
font-weight:bold;
font-size:14px;
line-height:1.4em;
color:#363636;
border-radius:6px;
}

.profile_textarea::placeholder {
color:#afafaf;
}

.nickname_input::placeholder{
color:#afafaf;
}

.myroom_profile_setting_heading{
width:100%;
background:#f5f5f5;
}

.myroom_profile_setting_heading > div{
display:-webkit-flex;
display:flex;
-webkit-justify-content:left;
justify-content:left;
-webkit-align-items:center;
align-items:center;
max-width:640px;
margin:0 auto;
padding:20px 12px 8px 12px;
box-sizing:border-box;
}

.myroom_profile_setting_heading > div > p{
font-size:13px;
font-weight:bold;
}

.myroom_profile_setting_heading > div > button{
border:none;
background:none;
margin-left:4px;
padding:0 4px;
}

.mrm_profile_modal_close{
position:absolute;
top:-48px;
right:-12px;
color:#fff;
}









/**** follow_suggest ****/

.card_follow_check_btn_abs_area{
display:-webkit-flex;
display:flex;
-webkit-justify-content: center;
justify-content:center;
-webkit-align-items:center;
align-items: center;
position:absolute;
top:-3px;
right:8px;
font-weight:bold;
}

.card_follow_check_btn+label {
background-color: #fff;
box-sizing:border-box;
}
.card_follow_check_btn+label::before {
color: #919191;
}
.card_follow_check_btn:checked+label {
border:1px solid #6B32FC;
background-color: #fff;
}
.card_follow_check_btn:checked+label::before {
color: #fff;
}

.card_follow_check_btn {
display: none;
}
.card_follow_check_btn+label,
.card_follow_check_btn+label::before,
.card_follow_check_btn+label::after {
-webkit-transition: all .3s;
transition: all .3s;
}

.card_follow_check_btn+label {
display:-webkit-flex;
display:flex;
-webkit-justify-content: center;
justify-content:center;
-webkit-align-items:center;
align-items: center;
position: relative;
width:7.2em;
height:2.2em;
border-radius:25px;
cursor: pointer;
font-weight:bold;
}

.card_follow_check_btn+label::before {
display: block;
content: attr(data-off-label);
position: absolute;
color:#fff;
font-size:13px;
}

.card_follow_check_btn:checked+label::before {
content: attr(data-on-label);
color: #fff;
}

.card_follow_check_btn:checked+label::after {
background-color: #f7f7f7;
}

.card_follow_check_btn+label {
border:2px solid #6B32FC;
background-color:#fff;
color:#6B32FC;
box-sizing:border-box;
}

.card_follow_check_btn+label::before {
color:#6B32FC;
}

.card_follow_check_btn:checked+label {
background:#6B32FC;
border:3px solid rgba(255,255,255,.75);
//border:3px solid rgba(0,0,0,.1);
}

.card_follow_check_btn:checked+label::before {
color: #fff;
}

.matome_follow_cl_usericon {
width: 40px;
height: 40px;
margin-right: 8px;
border: 2px solid #e0e0e0;
border-radius: 100%;
box-sizing: border-box;
}

.follow_card_cl_list{
list-style:none;
padding:0 8px;
}

.follow_card_cl_list > li{
background:#fff;
border:2px solid #ddd;
margin-bottom:8px;
border-radius:4px;
//box-shadow:0 2px 12px rgba(0,0,0,.1);
box-sizing:border-box;
}

.follow_card_cl_list > li > a{
display:-webkit-flex;
display:flex;
-webkit-justify-content:left;
justify-content:left;
-webkit-align-items:flex-start;
align-items:flex-start;
}


.follow_suggest_cl_tag_list_grey{
list-style:none;
}

.follow_suggest_cl_tag_list_grey > li{
display:inline-block;
padding:4px 5px;
margin-right:3px;
margin-bottom:4px;
color:#767676;
font-size:10px;
font-weight:bold;
background:#eee;
border-radius:4px;
box-sizing:border-box;
}

.myroom_card_abs_name{
font-size:16px;
font-weight:bold;
color:#2c2c2c;
}

.myroom_card_bg_area{
position:relative;
min-height:56px;
border-radius:4px 4px 0 0;
}

.myroom_card_txt_editbtn{
width:24px;
height:24px;
padding:2px;
background:#fff;
border:3px solid rgba(0,0,0,.1);
border-radius:50%;
box-shadow:none;
box-sizing:content-box;
}

.myroom_card_genre_area{
padding:0 16px;
margin:68px auto 8px auto;
font-size:13px;
line-height:1.4em;
}

.myroom_mpo_back_button{
position:absolute;
top:8px;
left:8px;
display:inline-block;
padding:6px 10px;
background:rgba(0,0,0,.3);
font-size:11px;
font-weight:bold;
color:#fff;
border-radius:8px;
}

.myroom_card_icon_area{
position:relative;
width:100px;
margin:0 auto;
padding:0 12px;
box-sizing:border-box;
}

.myroom_card_profile_icon{
display:block;
width:84px;
height:84px;
background:#fff;
border:4px solid rgba(0,0,0,.07);
border-radius:50%;
}


.myroom_card_area_abs{
position:absolute;
bottom:-58px;
height:100px;
width:100%;
padding:0 8px 0 9px;
box-sizing:border-box;
}



/*** follow button - in suggest ***/

.follow_check_btn+label {
background-color: #fff;
box-sizing:border-box;
}
.follow_check_btn+label::before {
color: #919191;
}
.follow_check_btn:checked+label {
border:1px solid #6B32FC;
background-color: #fff;
}
.follow_check_btn:checked+label::before {
color: #fff;
}

.follow_check_btn {
display: none;
}
.follow_check_btn+label,
.follow_check_btn+label::before,
.follow_check_btn+label::after {
-webkit-transition: all .3s;
transition: all .3s;
}

.follow_check_btn+label {

display:-webkit-flex;
display:flex;
-webkit-justify-content: center;
justify-content:center;
-webkit-align-items:center;
align-items: center;
position: relative;
width:6.3em;
height:2em;
border-radius:24px;
cursor: pointer;
}

.follow_check_btn+label::before {
display: block;
content: attr(data-off-label);
position: absolute;
color:#fff;
font-size:13px;
}

.follow_check_btn:checked+label::before {
content: attr(data-on-label);
color: #fff;
}

.follow_check_btn:checked+label::after {
background-color: #f7f7f7;
}

.follow_check_btn+label {
border:2px solid #6B32FC;
background-color:#fff;
color:#6B32FC;
box-sizing:border-box;
}

.follow_check_btn+label::before {
color:#6B32FC;
}

.follow_check_btn:checked+label {
background:#6B32FC;
}

.follow_check_btn:checked+label::before {
color: #fff;
}

/******/

.post_ttl_num_count{
display:inlin-block;
margin:8px 4px 2px auto;
font-size:11px;
font-weight:bold;
color:#828282;
}


.post_num_count{
text-align:right;
margin:8px 4px 2px 0;
font-size:11px;
font-weight:bold;
color:#828282;
}

.post_contents_add{
position:relative;
display:block;
text-align:center;
background:#28B9A6;
padding:12px;
color:#fff;
font-size:12px;
font-weight: bold;
border:none;
border-radius: 25px;
box-shadow: 0px 4px 0px #24684e;
box-sizing: border-box;
}

.follow_suggest_fixed_btn{
display:-webkit-flex;
display:flex;
-webkit-justify-content: center;
justify-content:center;
-webkit-align-items:center;
align-items: center;
flex-wrap:wrap;
position:fixed;
bottom:16px;
right:12px;
width:98px;
height:100px;
text-align:center;
color:#fff;
background:rgba(0,0,0,.5);
border-radius:6px;
z-index:600;
}

.suggest_fixed_btn_s{
display:-webkit-flex;
display:flex;
-webkit-justify-content: center;
justify-content:center;
-webkit-align-items:center;
align-items: center;
flex-wrap:wrap;
position:fixed;
bottom:16px;
right:12px;
width:98px;
height:48px;
text-align:center;
color:#fff;
background:rgba(0,0,0,.5);
border-radius:6px;
z-index:600;
}


.follow_skip_fixed_btn{
display:-webkit-flex;
display:flex;
-webkit-justify-content: center;
justify-content:center;
-webkit-align-items:center;
align-items: center;
flex-wrap:wrap;
position:fixed;
bottom:16px;
left:12px;
width:6em;
height:2.5em;
text-align:center;
font-size:12px;
color:#2c2c2c;
background:#eee;
border:1px solid #c0c0c0;
box-shadow:0 1px 0 #c0c0c0;
border-radius:6px;
z-index:600;
}

.spoint_review_refresh_btn {
position: absolute;
right:8px;
width:42px;
height:42px;
margin-left:auto;
background:#fff;
border: 2px solid #e0e0e0;
border-radius: 6px;
box-shadow:0 2px 0 #e0e0e0;
box-sizing:border-box;
}




/**** tutorial - 2022 ****/


.tutorial_bg_01{
background-image: url("https://mpo.atimg.tokyo/mpo/movie_thumb/iphone/images/tutorial/bg_gradient.svg");
background-size:cover;
background-position:top center;
background-repeat:  no-repeat;
background-color:#f0f0f0;
position:relative;
width:100%;
padding:64px 0 0 0;
}

.tutorial_bg_02{
background:#f0f0f0;
background-image: url("https://mpo.atimg.tokyo/mpo/movie_thumb/iphone/images/tutorial/bg_circle.svg");
background-size: cover;
background-repeat: no-repeat;
background-position: center 40px;
position:relative;
width:100%;
margin:0 auto;
padding:64px 0;
box-sizing:border-box;
}


#tutorial_backbtn{
position:absolute;
top:12px;
left:16px;
display:block;
padding:5px 5px;
font-size:10px;
font-weight:bold;
background:rgba(0,0,0,.3);
border-radius:4px;
z-index:500;
}

#tutorial_mpologo{
position:absolute;
top:12px;
right:16px;
z-index:500;
}

    @media (max-width:375px) {

        .tutorial_headline{
        display:block;
        width:100%;
        max-width:290px;
        margin-left:auto;
        margin-right:auto;
        border:none !important;
        box-sizing:border-box;
        }

        .tutorial_images{
        display:block;
        width:100%;
        max-width:286px;
        margin:auto;
        border:none !important;
        box-sizing:border-box;
        }

        .tutorial_thumbs{
        display:block;
        width:100%;
        max-width:240px;
        margin:auto;
        border:none !important;
        box-sizing:border-box;
        }

        .tutorial_thumbs_l{
        display:block;
        width:100%;
        max-width:240px;
        margin-right:auto;
        border-radius:12px;
        border:none !important;
        box-sizing:border-box;
        }

        .tutorial_thumbs_r{
        display:block;
        width:100%;
        max-width:240px;
        margin-left:auto;
        border-radius:12px;
        border:none !important;
        box-sizing:border-box;
        }

    }

    @media (min-width:361px) {

        .tutorial_headline{
        display:block;
        width:100%;
        max-width:350px;
        margin-left:auto;
        margin-right:auto;
        border:none !important;
        box-sizing:border-box;
        }

        .tutorial_images{
        display:block;
        width:100%;
        max-width:356px;
        margin:auto;
        border:none !important;
        box-sizing:border-box;
        }

        .tutorial_thumbs{
        display:block;
        width:100%;
        max-width:280px;
        margin:auto;
        border:none !important;
        box-sizing:border-box;
        }

        .tutorial_thumbs_l{
        display:block;
        width:100%;
        max-width:280px;
        margin-right:auto;
        border-radius:12px;
        border:none !important;
        box-sizing:border-box;
        }

        .tutorial_thumbs_r{
        display:block;
        width:100%;
        max-width:280px;
        margin-left:auto;
        border-radius:12px;
        border:none !important;
        box-sizing:border-box;
        }


    }

    @media (min-width:375px) {

        .tutorial_headline{
        display:block;
        width:100%;
        max-width:320px;
        margin-left:auto;
        margin-right:auto;
        border:none !important;
        box-sizing:border-box;
        }

        .tutorial_images{
        display:block;
        width:100%;
        max-width:345px;
        margin:auto;
        border:none !important;
        }

        .tutorial_thumbs{
        display:block;
        width:100%;
        max-width:260px;
        margin:auto;
        border:none !important;
        box-sizing:border-box;
        }

        .tutorial_thumbs_l{
        display:block;
        width:100%;
        max-width:260px;
        margin-right:auto;
        border-radius:12px;
        border:none !important;
        box-sizing:border-box;
        }

        .tutorial_thumbs_r{
        display:block;
        width:100%;
        max-width:260px;
        margin-left:auto;
        border-radius:12px;
        border:none !important;
        box-sizing:border-box;
        }
    }

.myroom_tutorial_end_btn_wrap{
position:fixed;
bottom:20px;
width:100%;
}

.myroom_tutorial_end_btn{
position:relative;
display:block;
text-align:center;
width:240px;
margin:0 auto;
background:#FF3300;
padding:16px 24px;color:#fff;
font-weight:bold;
text-decoration:none;
border-radius:6px;
box-shadow:0 3px 6px rgba(0,0,0,.4),0 4px 0 rgba(0,0,0,.2);
box-sizing:border-box;
z-index:9999;
}

.mrm_tutorial_heading{
max-width:240px;
width:100%;
margin:32px auto 0 auto;
box-sizing:border-box;
}

/** 左右からの画像フェードイン **/

.fadeLeft{
animation-name:fadeLeftAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeLeftAnime{
  from {
    opacity: 0;
	transform: translateX(-100px);
  }

  to {
    opacity: 1;
	transform: translateX(0);
  }
}

.fadeRight{
animation-name:fadeRightAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeRightAnime{
  from {
    opacity: 0;
	transform: translateX(100px);
  }

  to {
    opacity: 1;
	transform: translateX(0);
  }
}

.fadeInTrigger,
.fadeUpTrigger,
.fadeDownTrigger,
.fadeLeftTrigger,
.fadeRightTrigger{
    opacity: 0;
}
}

@keyframes flipRightAnime{
  from {
   transform: perspective(600px) translate3d(0, 0, 0) rotateY(-30deg);
 	opacity: 0;
  }

  to {
  transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
  opacity: 1;
  }
}


.flipDownTrigger,
.flipLeftTrigger,
.flipLeftTopTrigger,
.flipRightTrigger,
.flipRightTopTrigger{
    opacity: 0;
}

.rotateXTrigger,
.rotateYTrigger,
.rotateLeftZTrigger,
.rotateRightZTrigger{
    opacity: 0;
}




.mygenre_fixed_enter_btn{
display:-webkit-flex;
display:flex;
-webkit-justify-content: center;
justify-content:center;
-webkit-align-items:center;
align-items: center;
flex-wrap:wrap;
position:fixed;
bottom:16px;
right:12px;
width:98px;
height:100px;
text-align:center;
color:#fff;
background:rgba(0,0,0,.5);
border-radius:6px;
z-index:600;
}


/*** genre_checkbox ***/

.myroom_genre_settingganre_section{
border-top:1px solid #eee;
//border-bottom:1px solid #eee;
margin:40px auto 0 auto;
padding:20px 8px;
}

.myroom_genre_setting_list {
position: relative;
display: flex;
flex-wrap: wrap;
max-width:640px;
margin:20px auto 0 auto;
padding:0 12px;
list-style: none;
box-sizing: border-box;
}

.myroom_genre_setting_list li {
padding: 3px 3px;
box-sizing: border-box;
}

input.myroom_genre_setting_checkbox[type=checkbox] {
display: none;
background-color: #fff;
}

.myroom_genre_setting_checkbox_label{
width:100%;
box-sizing:border-box;
position:relative;
display:inline-block;
padding:12px 6px 12px 32px;
border-radius:8px;
background-color:#eee;
vertical-align middle;
font-size:10px;
font-weight:bold;
cursor: pointer;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

input.myroom_genre_setting_checkbox[type=checkbox]:checked~label {
background: #6877FF;
color:#fff !important;
-webkit-transition: background-color 0.1s linear;
transition: background-color 0.1s linear;
}

.myroom_genre_setting_checkbox_label:after {
position: absolute;
top: 50%;
left: 6px;
display: block;
margin-top: -10px;
width: 16px;
height: 16px;
border: 2px solid #cecece;
border-radius: 6px;
content: '';
}

.myroom_genre_setting_checkbox_label:before {
position: absolute;
top: 50%;
left: 12px;
display: block;
margin-top: -7px;
width: 5px;
height: 9px;
border-right: 3px solid #D5D9FF;
border-bottom: 3px solid #D5D9FF;
content: '';
opacity: 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}

input.myroom_genre_setting_checkbox[type=checkbox]:checked+.myroom_genre_setting_checkbox_label:after {
border: 2px solid #fff;
}

input.myroom_genre_setting_checkbox[type=checkbox]:checked+.myroom_genre_setting_checkbox_label:before {
opacity: 1;
}


/*** genre_checkbox num_count ***/

.myroom_genre_set_list {
position: relative;
display: flex;
flex-wrap: wrap;
max-width:640px;
margin:20px auto 0 auto;
padding:0 12px;
list-style: none;
box-sizing: border-box;
}

.myroom_genre_set_list li {
padding: 3px 3px;
box-sizing: border-box;
}

input.myroom_genre_set_checkbox[type=checkbox] {
display: none;
background-color: #fff;
}

.myroom_genre_set_checkbox_label{
width:100%;
box-sizing:border-box;
position:relative;
display:inline-block;
padding:12px 6px 12px 32px;
border-radius:8px;
background-color:#eee;
vertical-align middle;
font-size:10px;
font-weight:bold;
cursor: pointer;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

input.myroom_genre_set_checkbox[type=checkbox]:checked~label {
background: #6877FF;
color:#fff !important;
-webkit-transition: background-color 0.1s linear;
transition: background-color 0.1s linear;
}

.myroom_genre_set_checkbox_label:after {
position: absolute;
top: 50%;
left: 6px;
display: block;
margin-top: -10px;
width: 16px;
height: 16px;
border: 2px solid #cecece;
border-radius: 6px;
content: '';
}

.myroom_genre_set_checkbox_label:before {
position: absolute;
top: 50%;
left: 6px;
display: block;
margin-top: -10px;
width: 16px;
height: 16px;
background:#fff;
border: 2px solid #fff;
border-radius: 6px;
content: '';
opacity:0;
}

.myroom_genre_chknum{
position: absolute;
top:calc(50% - .5em);
left:11px;
display: block;
font-size:14px;
color:#6877FF;
z-index:100;
}

input.myroom_genre_set_checkbox[type=checkbox]:checked+.myroom_genre_set_checkbox_label:after {
border: 2px solid #fff;
}

input.myroom_genre_set_checkbox[type=checkbox]:checked+.myroom_genre_set_checkbox_label:before {
opacity: 1;
}