.info_announce{ background-color:#eee; max-width:640px; margin:0 auto; }
.info_iconback{ background-color:#000; padding: 20px 10px; }
.button-top{ margin-top:10px; }
.channel_name{white-space:nowrap;}







/********* 月額 *********/


.monthly_footer_logo{
width:100%;
text-align:center;
padding:12px;
box-sizing:border-box;
}

.blue_logo_bottom_txt{
font-size:10px;
color:#C0C0C0;
margin-bottom:5px;
}

.blue_logo_bottom{
width:74px;
}

.monthly_index_container{
margin:0 auto;
max-width:480px;
width:100%;
}

.monthly_index_bg{
width:100%;
}

.monthly_top_header{
position:relative;
background:#fff;
z-index:999;
}

#monthly_header{
background:#fff;
z-index:999;
}

.header_right_logo{
position:absolute;
top:10px;
right:10px;
width:72px;
}

section#monthly_index_login{
position:relative;
top:-20px;
margin-bottom:20px;
}

.monthly_blue_submit_btn{
text-align:center;
width:220px;
margin:0 auto;
padding:18px 0;
font-size:16px;
font-weight:bold;
color:#fff;
background: #4b4bff;
border-radius:25px;
filter: drop-shadow(0px 3px 12px rgba(45, 45, 255, 0.29));
}

.monthly_blue_submit_btn_s{
text-align:center;
width:180px;
margin:0 auto;
font-size:16px;
font-weight:bold;
color:#fff;
background: #4b4bff;
border-radius:25px;
filter: drop-shadow(0px 3px 12px rgba(45, 45, 255, 0.29));
}

.monthly_blue_login_btn{
text-align:center;
width:180px;
margin:0 auto;
padding:12px 0;
font-size:14px;
font-weight:bold;
color:#0000C5;
background: none;
border:1px solid #0019FF;
border-radius:25px;
}

#monthly_index_header_icon{
position:absolute;top:calc(50% - 60px);
left:calc(50% - 90px);
width:180px;
z-index:2;
}

#monthly_index_header_txt{
position:absolute;
top:calc(50% + 72px);
width:100%;
text-align:center;
font-weight:normal;
color:#fff;
}

#monthly_index_details2 #index_txt{
text-align:center;
font-weight:bold;
font-size:22px;
margin-top:32px;
}

#monthly_index_details1,#monthly_index_details2 .index_p{
padding:24px 28px;
font-size:13px;
line-height:1.5em;
box-sizing:border-box;
}

#monthly_index_details1{
background:#fff;
}

#monthly_index_details1 #index_txt{
text-align:center;
padding:20px 0 20px 0;
font-weight:bold;
font-size:22px;
}

#monthly_index_details1 .index_p{
text-align:center;
font-size:15px;
line-height:1.8em;
box-sizing:border-box;
}

.swiper_monthly_index_ul{
padding:40px 12px;

box-sizing:border-box;
}
.swiper_monthly_index_ul li{
width: 240px;
background: #fff;
border-radius:12px;
filter: drop-shadow(0px 8px 18px rgba(78, 76, 205, 0.25));
box-sizing:border-box;
}
.swiper_monthly_index_ul li img{
width:100%;
padding:0;
margin:0;
border:none;
border-radius:12px 12px 0 0;
box-sizing:border-box;
}

.swiper_monthly_index_details{
text-align:center;
padding:24px 0;
box-sizing:border-box;
}

.swiper_monthly_index_supervise{
font-size: 11px;
line-height: 8px;
color: #969696;
margin-bottom:16px;
}

.swiper_monthly_index_planname{
font-weight: bold;
font-size: 25px;
line-height: 21px;
color: #232323;
margin-bottom:16px;
}



/* plan select */

.monthly_plan_select_modal{
max-width:480px;
margin:0 auto;
padding:0;
border-radius:12px;
box-sizing:border-box;
}

.monthly_plan_select_modal_jktimg{
width:100%;
border:none;
padding:0;
margin:0 auto;
border-radius:12px 12px 0 0;
box-sizing:border-box;
}

.himkr_rakuten_fixed{
position:fixed;
bottom:0px;
//left:calc(50% - 120px);
text-align:center;
width:100%;
padding:8px 0 28px 0;
font-size:16px;
font-weight:bold;
background:rgba(0,0,0,.4);
z-index:800;
}

.himkr_rakuten_btn{
filter: drop-shadow(0px 3px 12px rgba(45, 45, 255, 0.29));
}

.monthly_plan_select_modal_fixed_btn{
position:fixed;
bottom:24px;
left:calc(50% - 120px);
text-align:center;
width:240px;
margin:0 auto;
font-size:16px;
font-weight:bold;
color:#fff;
background: #4b4bff;
border-radius:25px;
filter: drop-shadow(0px 3px 12px rgba(45, 45, 255, 0.29));
z-index:800;
}

.monthly_plan_select_modal_details{
position:relative;
top:-24px;
width:84%;
margin:0 auto;
padding:16px;
background:#fff;
border-radius:12px;
filter: drop-shadow(0px 3px 18px rgba(135, 134, 249, 0.29));
}

.monthly_plan_select_modal_details .ttl{
text-align:center;
margin:12px auto 24px auto;
font-size:15px;
font-weight:bold;
color:#2c2c2c;
}

.monthly_plan_select_modal_details .txt{
font-size:13px;
font-weight:normal;
line-height:1.5em;
color:#2c2c2c;
}



.monthly_plan_select_modal_ul { 
display:block;
max-width:720px;
margin:0 auto;
list-style:none;
box-sizing:border-box;
}

.monthly_plan_select_modal_ul li{
display:flex;
position:relative;
padding:6px 0 6px 6px;
margin-bottom:3px;
border-top:1px solid #eee;
box-sizing:border-box;
}

.monthly_plan_select_modal_ul li:last-child{
border-bottom:1px solid #eee;
}


.monthly_plan_select_modal_ul li .contents_thumb{
flex: 0 0 auto;
width:100px;
height:75px;
border-radius:4px 0 0 4px;
}

.monthly_plan_select_modal_ul li .contents_txt{
font-size:12px;
font-weight:bold;
line-height:1.3em;
padding:8px 8px 8px 8px;
}

.monthly_plan_select_modal_ul li .contents_date{
font-size:11px;
font-weight:normal;
line-height:1.3em;
padding:0px 6px 8px 8px;
}

.monthly_plan_select_modal_ul li .contents_time{
position:absolute;
bottom:3px;
left:3px;
text-align:center;
width:128px;
padding:1px 0;
font-size:10px;
background:rgba(255,255,255,.8);
border-radius:0 0 0 6px;
}


#monthly_plan_select_header{
position:relative;
text-align:center;
width: 100%;
height: 120px;
background: #8786f9;
}

#monthly_plan_select_header p{
position:absolute;
text-align:center;
width:100%;
top:40px;
font-size:22px;
font-weight:bold;
color:#fff;
}

.single_monthly_index_plan{
position:relative;
top:-40px;
max-width:300px;
margin:0 auto;
background: #fff;
border-radius:12px;
box-shadow:0px 8px 18px rgba(78, 76, 205, 0.25);
box-sizing:border-box;
z-index:60;
}

.single_monthly_index_plan img{
width:100%;
padding:0;
margin:0;
border:none;
border-radius:12px 12px 0 0;
box-sizing:border-box;
}
#monthly_plan_select_header{
position:relative;
text-align:center;
width: 100%;
height: 120px;
background: #8786f9;
}

#monthly_plan_select_header p{
position:absolute;
text-align:center;
width:100%;
top:40px;
font-size:22px;
font-weight:bold;
color:#fff;
}

.single_monthly_index_plan2 {
position: relative;
top: 32px;
max-width: 300px;
margin: 0 auto;
background: #fff;
border-radius: 12px;
box-shadow:0px 8px 18px rgba(78, 76, 205, 0.25);
//filter: drop-shadow(0px 8px 18px rgba(78, 76, 205, 0.25));
box-sizing: border-box;
z-index: 60;
}

.single_monthly_index_plan2 img{
border-radius:12px 12px 0 0;
}



.swiper_monthly_index_price{
margin-bottom:24px;
font-weight: bold;
font-size: 15px;
color: #5f5ddc;
}



/* info */


#monthly_info_details{
padding:32px 24px;
background:#fff;

}

#monthly_info_details .ttl{
font-weight:bold;
font-size:18px;
line-height:1.4em;
margin-bottom:16px;
}

#monthly_info_details .time{
font-weight:normal;
font-size:12px;
color:#6c6c6c;
}

#monthly_info_details .txt{
font-size:13px;
line-height:1.8em;
box-sizing:border-box;
}

.monthly_blue_submit_btn_single{
text-align:center;
max-width:300px;
margin:40px auto 0 auto;
padding:14px 0;
font-size:16px;
font-weight:bold;
color:#fff;
background: #4b4bff;
border-radius:4px;
filter: drop-shadow(0px 3px 12px rgba(45, 45, 255, 0.29));
}

.monthly_info_ttl_flex{
margin:6px 0 24px 0;
-webkit-box-pack:justify;
-ms-flex-pack:justify;
justify-content:space-between;
}

.monthly_info_currender_num{
position:absolute;
top:22px;
left:10px;
font-size:22px;
font-weight:
bold;color:#707070;
}




.monthly_related_work{
margin-top:24px;
background:#fff;
}

.monthly_related_work_index{
text-align:center;
padding:8px 0 16px 0;
font-size:18px;
font-weight:bold;
}


.monthly_related_ul {
display:flex;
flex-wrap: wrap;
padding:2px;
box-sizing:border-box;
}

.monthly_related_ul li{
display:block;
padding:0 4px;
margin-bottom: 12px;
width:calc(100% /2);
box-sizing:border-box;
}

.keyword_li_padding{
display:block;
border-radius:4px;
background: #fff;
box-shadow:0px 3px 6px rgba(0, 0, 0, 0.06);
box-sizing:border-box;
}

.keyword_li_thumb_area{
position:relative;
}

.monthly_related_ul li .contents_thumb{
flex-grow: 0;
flex-shrink: 0;
width:100%;
border-radius:4px 4px 0 0;
}

.monthly_related_ul li .contents_txt{
padding:8px 8px;
font-size:12px;
line-height:1.4em;
}

.monthly_info_bg{
position:relative;
}

.monthly_info_bg .playbtn{
position:absolute;
text-align:center;
bottom:25px;
left:calc(50% - 110px);
width: 220px;
height: 50px;
color:#fff;
font-weight:bold;
background: linear-gradient(to left,#4b4bff 0%, #3da9d8 100%);
box-shadow:0px 3px 18px rgba(45, 45, 255, 0.77);
border-radius:24px;
}

.monthly_like_btn{
position:fixed;
bottom:32px;
right:24px;
border-radius:50%;
width: 40px;
height: 40px;
background: #fff;
color:#ff2d2d;
border: 1px solid #ff2d2d;
z-index:100;
}

.monthly_review_btn{
position:fixed;
bottom:32px;
right:76px;
border-radius:50%;
width: 40px;
height: 40px;
background: #fff;
color:#ff2d2d;
border: 1px solid #ff2d2d;
z-index:100;
}

.monthly_btn_dropshadow{
box-shadow:0px 3px 6px rgba(0, 0, 0, 0.16);
}

#monthly_header .fa-bars{
position:absolute;
top:16px;
right:12px;
color:#666666;
}

#monthly_header .fa-bell{
position:absolute;
top:16px;
right:48px;
color:#666666;
}

.monthly_overlay{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.5);
z-index:550;
}

.monthly_overlay_wht{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(255,255,255,.7);
z-index:550;
}

.monthly_overlay_restriction{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.5);
z-index:99995;
}

.monthly_review_write_area{
display:none;
position:fixed;
bottom:0;
left:calc(50% - 150px);
width:300px;
height:200px;
padding:40px 0px 32px 0px;
background:#fff;
margin:20px auto;
border-radius:12px;
box-sizing:border-box;
box-shadow:0px 6px 12px rgba(0, 0, 0, 0.16);
z-index:600;
}

.monthly_review_write_area_index{
text-align:center;
margin-bottom:20px;
font-weight:bold;
font-size:15px;
color:#6A6A6A;
}

.monthly_review_write_area_input{
display:block;
margin:0 auto 20px auto;
padding:8px;
width:240px;
background:#eee;
border:none;
border-radius:8px;
}

.monthly_review_write_area_submit{
display:block;
margin:0 auto;
width: 80px;
height: 32px;
background: #1700ff;
color:#fff;
border:none;
border-radius:8px;
box-shadow:0px 2px 0px rgba(0, 0, 0, 0.16);
}

.monthly_like_area{
display:none;
position:fixed;
bottom:0;
left:calc(50% - 150px);
width:300px;
height:180px;
padding:32px 0px;
margin:20px auto;
border-radius:12px;
box-sizing:border-box;
z-index:600;
}

.monthly_like_area_txt{
text-align:center;
font-weight:bold;
font-size:14px;
}

.monthly_like_icon{
text-align:center;
display:block;
margin:0 auto 20px auto;
color:#FF0707;
}

.monthly_drawer{
display:none;
position:fixed;
top:0;
right:-200px;
width:200px;
height:100%;
padding:32px 0px;
margin:0 auto;
background:#fff;
box-sizing:border-box;
z-index:99999;
}

.monthly_drawer ul{
text-align:left;
list-style:none;
padding:8px 0 16px 24px;
}

.monthly_drawer ul li{
margin-bottom:32px;
font-size:16px;
}

.himkr_chapter_selectr_container {
padding: 10px 0;
width: 100%;
height: 100%;
}
.himkr_chapter_select_innder {
position:relative;
vertical-align: top;
width: 100%;
max-width:480px;
}

#himkr_chapter_index{
text-align:center;
margin:24px auto;
font-size:16px;
font-weight:bold;
line-height:1.4em;
color:#fff;
}

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

.himkr_chapter_select_ul li{
display:flex;
position:relative;
padding:10px 12px;
color:#fff;
font-weight:bold;
border-bottom:1px solid #fff;
box-sizing:border-box;
}

.himkr_chapter_select_ul li:first-child {
border-top:1px solid #fff;
}

.himkr_chapter_select_ul li .contents_thumb{
flex: 0 0 auto;
position:relative;
width:128px;
height:96px;
margin-right:auto;
}

.himkr_chapter_select_ul li .contents_txt{
font-size:14px;
font-weight:bold;
line-height:1.3em;
margin-right:auto;
padding:8px 6px 8px 8px;
}

.himkr_sumado_link{
margin-right:auto;
max-width:300px;
width:94%;
margin:24px auto 6px auto;
padding:6px 12px;
background:#fff;
border:solid 1px #eee;
border-radius:12px;
box-sizing:border-box;
box-shadow:0px 2px 6px rgba(0, 10, 141, 0.2);
}

.sumado_suggest_txt{
flex:1;
text-align:left;
margin-right:auto;
font-size:12px;
font-weight:bold;
line-height:18px;
color:#3c4aff;
}

.sumado_suggest_btn{
width:132px;
height:40px;
font-size:12px;
font-weight:bold;
color:#fff;
background:#1000ff;
border-radius:24px;
box-sizing:border-box;
}






.monthly_overlay_restriction{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.74);
z-index:99995;
}

.monthly_restriction_area{
position:fixed;
flex-direction:column;
text-align:center;
top:0;
left:0;
width:100%;
height:100%;
color:#fff;
z-index:99996;
}

.monthly_restriction_btn{
width:220px;
height:46px;
background:#4B4BFF;
color:#fff;
font-size:16px;
font-weight:bold;
border-radius:24px;
}

.monthly_restriction_btn a{
color:#fff;
}


.monthly_today_bg{
position:relative;
}

.monthly_today_bg .today_ttl{
position:absolute;
bottom:0;
width:100%;
padding:12px;
background:rgba(0,0,0,.4);
color:#fff;
font-size:15px;
font-weight:bold;
line-height:1.4em;
box-sizing:border-box;
}

.monthly_today_bg .today_mv_icon{
position:absolute;
bottom:54px;
left:16px;
padding:6px 12px;
background:#FFCC00;
color:#fff;
font-size:13px;
font-weight:bold;
border-radius:25px;
box-sizing:border-box;
}


.monthly_index_main{
position:relative;
background:#fafafa;
padding:24px;
font-size:16px;
font-weight:bold;
text-align:center;
}

.monthly_index_main .register_icon{
display:inline-block;
width:106px;
padding:7px 0;
background:#ff4326;
color:#fff;
font-size:14px;
font-weight:bold;
box-shadow:0px 3px 6px rgba(255, 0, 0, 0.2);
border-radius:24px;
z-index:99;
}

.monthly_index_main .register_icon_2{
position:absolute;
bottom:-18px;
left:calc(50% - 55px);
width:110px;
padding:12px 0;
background:#ff4326;
color:#fff;
font-size:15px;
font-weight:bold;
box-shadow:0px 3px 6px rgba(255, 0, 0, 0.46);
border-radius:24px;
z-index:99;
}


.monthly_course_introduction_ul{
display: flex;
flex-wrap: wrap;
width: 100%;
max-width:480px;
margin:0 auto;
list-style: none;
box-sizing: border-box;
}
.monthly_course_introduction_ul li {
position: relative;
display: flex;
width: calc(100% / 2);
padding: 6px;
box-sizing: border-box;
list-style: none;
}
.monthly_course_introduction_ul p {
padding: 4px 6px;
font-size: 11px;
font-weight: bold;
line-height: 1.3em;
box-sizing: border-box;
z-index: 3;
}
.monthly_course_introduction_ul li img {
width: 100%;
border-radius:8px;
}




.himkr_container{
font-family: 'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;
}

.himkr_past_mv{
width:100%;
margin:24px auto;
padding:24px 0 0 0;
background:#EFEFEF;
border-radius:8px;
box-sizing:border-radius;
}

.himkr_past_mv_icon{
display:block;
margin:0 auto 24px auto;
}

.himkr_past_mv_index{
text-align:center;
font-size:16px;
font-weight:bold;
}

.himkr_past_mv_txt{
text-align:center;
width:96%;
max-width:380px;
margin:12px auto;
background:#fff;
font-size:13px;
border-radius:8px;
box-sizing:border-box;
}

.monthly_plan_select_modal_ul {
padding:4px;
}
.monthly_plan_select_modal_ul li{
padding:6px;
background:#fff;
border-radius:8px;
box-sizing:border-box;
}

.himkr_staff_index{
text-align:center;
margin:12px auto 16px auto;
font-size:14px;
font-weight:bold;
}

.himkr_staff_icon{
display:block;
width:100px;
height:100px;
margin:0 auto 24px auto;
border:3px solid #CFCEFF;
border-radius:50%;
}

.himkr_staff_txt{
position: relative;
padding:24px;
background:#EDEDFF;
font-size:13px;
line-height:1.6em;
border-radius:8px;
box-sizing:border-box;
}

.himkr_staff_txt:after {
bottom: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(136, 183, 213, 0);
border-bottom-color: #EDEDFF;
border-width: 12px;
margin-left: -12px;
}

.himekri_staff_btn{
background:#BFD0FF;
font-weight:bold;
padding:4px;
color:#2c2c2c;
border-radius:6px;
}

.himkr_kiyaku{
position:fixed;
text-align:center;
bottom:6px;left:calc(50% - 145px);
width:290px;
margin:0 auto;
padding:4px 0;
font-size:10px;
background:rgba(255,255,255,.9);
border-radius:4px;
z-index:9999;
}

.himkr_main_courses_introduction{
padding:32px 32px;
background:#F8F8F8;
border-radius:6px;
}

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

.himkr_main_courses_introduction_txt{
font-size:13px;
line-height:1.7em;;
margin-bottom:12px;
}

.himkr_main_kiyaku_link{
text-align:center;
width:90px;
margin:16px auto;
font-size:12px;
background:#e0e0e0;
border-radius:4px;
}

.himkr_main_kiyaku_link a{
display:block;
padding:6px 0;
color:#2c2c2c;
}

.himkr_main_mv_introduction_index{
text-align:center;
font-size:15px;
font-weight:bold;
margin:36px auto 18px auto;
}

.himkr_preopen_area{
position:fixed;
bottom:100px;
left: calc(50% - 130px);
text-align:center;
width: 240px;
margin: 0 auto;
z-index:9999;
}

.himkr_preopne_txt{
width:260px;
background:rgba(255,255,255,.9);
margin:0 auto;
padding:8px;
font-weight:bold;
font-size:14px;
line-height:1.3em;
border-radius:6px;
}

.himkr_preopne_txt:after {
top: 100%;
left: calc(50% + 8px);
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(136, 183, 213, 0);
border-top-color: rgba(255,255,255,.9);
border-width: 10px;
margin-left: -10px;
}




.himkr_login_fixed{
position:fixed;
bottom:0;
width:100%;
margin:0 auto;
padding:6px 0 20px 0;
background:rgba(0,0,0,.5);
box-sizing:border-box;
z-index:999;
}

.himkr_login_fixed_wrap{
display:flex;
max-width:480px;
margin:0 auto;
}

.himkr_regist_txt{
text-align:center;
padding:6px;
line-height:1.2em;
font-size:13px;
color:#fff;
font-weight:bold;
}

.himkr_login_area{
width:50%;
padding:0 4px;
box-sizing:border-box;
}

.himkr_login_btn{
display:block;
text-align:center;
background:#0042ff;
font-size:17px;
font-weight:bold;
color:#fff;
padding:16px 0;
border-radius:6px;
box-sizing:border-box;
}

.himkr_regist_area{
width:50%;
padding:0 4px;
box-sizing:border-box;
}

.himkr_regist_btn{
display:block;
text-align:center;
background:#00e821;
font-size:17px;
font-weight:bold;
color:#fff;
padding:16px 0;
border-radius:6px;
box-sizing:border-box;
}