/* 	header
============================== */
/*_pre*/
.poster_img0 { width: 100%; height: 0; padding-top: 38.833333333333333%; padding-top: -webkit-calc(466 / 1200 * 100%); padding-top: calc(466 / 1200 * 100%); background-repeat: no-repeat; -webkit-background-size: contain; background-size: contain; position: relative;}
/*poster*/
.poster_img { width: 100%; height: 0; padding-top: 71%; padding-top: -webkit-calc(852 / 1200 * 100%); padding-top: calc(852 / 1200 * 100%); background-repeat: no-repeat; -webkit-background-size: contain; background-size: contain; position: relative;}
#img_sp { position: relative;}
#img_sp a { width: 100%; height: 0; padding-top: 6.25%; padding-top: -webkit-calc(75 / 1200 * 100%); padding-top: calc(75 / 1200 * 100%); position: absolute; bottom: 0; left: 0; display: block;}
#img_sp a:hover { background-color: rgba(255, 255, 255, .3);}

/* 	story
============================== */
#story_sp { padding: 1.5em 0 0 0;}
#story_sp h2 { width: 100%; display: block; position: relative; z-index: 10;}
#story_sp h2:before, #story_sp h2:after { content: ""; display: table;}
#story_sp h2:after { clear: both;}
#story_sp h2::after { content: ""; display: block; clear: both;}
#story_title { width: 30%; float: left; display: block; margin-top: -2.8em;}
#story_onair { width: 69%; display: block; margin-left: .5%; position: absolute; top: -.5em; right: 0;}
#story_title .img { width: 100%; height: 0; padding-top: 72.5%; padding-top: -webkit-calc(290 / 400 * 100%); padding-top: calc(290 / 400 * 100%); background-repeat: no-repeat; -webkit-background-size: contain; background-size: contain; display: block;}
#story_onair .img { width: 100%; height: 0; padding-top: 9.4%; padding-top: -webkit-calc(94 / 1000 * 100%); padding-top: calc(94 / 1000 * 100%); background-repeat: no-repeat; -webkit-background-size: contain; background-size: contain; display: block;}
#story_sp #ind_story { width: 100%; position: relative; top: -1.4em;}
#story_sp #spot_sp { width: 90%; max-width: 600px; margin: 0 auto; box-shadow: 0 1px 5px rgba(3, 0, 89, .3); -webkit-box-shadow: 0 1px 5px rgba(3, 0, 89, .3); position: relative; z-index: 50;}
#story_sp #story_txt { box-sizing: border-box; width: 88%; max-width: 590px; position: relative; z-index: 30; margin: 0 auto; background: rgba(255, 255, 255, .8); padding: .75em 1em 2.5em 1em; text-align: left; color: rgba(0, 82, 194, 1); line-height: 170%; font-size: 95%;}
#story_sp #lnk_sp { width: 30%; max-width: 180px; margin: -3em auto 0 auto; padding-bottom: 1em; position: relative; z-index: 50;}
#story_sp #lnk_sp a { width: 100%; height: 0; padding-top: 64%; padding-top: -webkit-calc(192 / 300 * 100%); padding-top: calc(192 / 300 * 100%); background-repeat: no-repeat; -webkit-background-size: contain; background-size: contain; display: block;}
#story_sp #lnk_sp a:hover { transform: scale(1.1); transition-duration: 0.2s;}
/*for_W640-*/
@media all and (min-width: 640px) {
#story_sp #ind_story { top: -2.5em;}
#story_onair { top: -.2em;}
}
/*for_W768-*/
@media all and (min-width: 768px) {
#story_sp { padding-bottom: 1em;}
#story_title { width: 22%;}
#story_onair { width: 70%; right: 5%;}
#story_sp #ind_story { width: 93%; top: -1.4em; left: 4%;}
#story_sp #ind_story:before, #story_sp #ind_story:after { content: ""; display: table;}
#story_sp #ind_story:after { clear: both;}
#story_sp #ind_story::after { content: ""; display: block; clear: both;}
#story_sp #spot_sp { width: 60%; float: left;}
#story_sp #story_txt { width: 40%; float: left; font-size: 80%; line-height: 180%; margin-top: -10px; margin-left: -2%; padding: 1em 1.5em 2em 3.2em;}
#story_sp #lnk:before, #story_sp #lnk:after { content: ""; display: table;}
#story_sp #lnk:after { clear: both;}
#story_sp #lnk::after { content: ""; display: block; clear: both;}
#story_sp #lnk_sp { width: 30%; max-width: 160px; margin: -5em 0 0 0; position: relative; z-index: 50; float: right;}
}

/* 	topics
============================== */
#topics_sp h2 { font-weight: bold; color: rgba(255, 255, 255, 1); letter-spacing: -.05em; font-size: 180%; line-height: 100%; font-family: toppan-bunkyu-midashi-go-std, sans-serif;}
#topics_sp .lnk_sp a { color: rgba(255, 255, 255, 1); font-family: lithos-pro, sans-serif;}
#topics_sp .lnk_sp a:hover { opacity: .8;}
/*for_W900-*/
@media all and (min-width: 900px) {
#topics_sp { height: 400px;}
}

/* 	new
============================== */
#new_sp { width: 100%; padding: .75em 0 .1em 0; margin: 0 auto;}
#new_sp:before, #new_sp:after { content: ""; display: table;}
#new_sp:after { clear: both;}
#new_sp::after { content: ""; display: block; clear: both;}
#new_sp h2 { width: 27%; display: block; margin-top: 20px; margin-left: 1%; float: left;}
#new_sp h2 .img { width: 100%; height: 0; padding-top: 53.333333333333333%; padding-top: -webkit-calc(160 / 300 * 100%); padding-top: calc(160 / 300 * 100%); background-repeat: no-repeat; -webkit-background-size: contain; background-size: contain; display: block;}
#new_sp .udl { border-bottom: 2px dotted rgba(231, 0, 20, 1);}
#wn_crs { position: relative;}
#wn_crs .outer { width: 70%; height: 100px; position: relative; margin: 0 0 0 30%; overflow: hidden;}
#wn_crs .outer ul { position: absolute; display: table; -webkit-transform: translateZ(0); width: 300px; overflow: hidden;}
#wn_crs .outer .inner li { display: table-cell; padding-right: 14px; opacity: .5; position: relative;}
#wn_crs .outer .inner li .liset { box-sizing: border-box; width: 260px; height: 100px; background: rgba(255, 255, 255, 1); border: 1px solid rgba(194, 154, 154, .6); display: block; position: relative; overflow: hidden;}
#wn_crs .outer .inner li a { width: 100%; height: 100%; display: block; opacity: .5;}
#wn_crs .outer .inner .yes { opacity: .95;}
#wn_crs .outer .inner .yes a { width: 100%; height: 100%; display: block; opacity: 1;}
#wn_crs .outer .inner li a:hover { opacity: .55;}
#wn_crs .outer .inner .yes a:hover { opacity: .75;}
#wn_crs .outer .inner li .tp { width: 96px; display: block; position: absolute; top: 1px; left: 1px;}
#wn_crs .outer .inner li .tp_img {width: 100%; height: 0; padding-top: 100%; background-repeat: no-repeat; -webkit-background-size: contain; background-size: contain; background-position: center center; -webkit-background-position: center center; display: block;}
#wn_crs .outer .inner li .tp_img0 { -webkit-background-size: contain; background-size: contain; background-position: center center; -webkit-background-position: center center;}
#wn_crs .outer .inner li .tp_img img { width: 100%; height: 100%; position: absolute; top: 0; left: 0;}
#wn_crs .outer .inner li .infoset { width: 146px; height: 90px; display: block; position: absolute; top: 4px; left: 105px; font-size: 90%;}
#wn_crs .outer .inner li .infoset .news_title { width: 120px; display: block; text-align: left; font-size: 95%; line-height: 1.4; color: rgba(112, 112, 112, 1); font-weight: bold; letter-spacing: .1em; position: absolute; top: 0; left: 0;}
#wn_crs .outer .inner li .infoset .news_update { width: 100px; display: block; font-size: 80%; text-align: right; position: absolute; bottom: 3px; right: 3px; color: rgba(112, 112, 112, 1); font-family: 'Open Sans', sans-serif;}
#wn_crs .outer .inner li .infoset .news_nkm { width: 150px; height: 65px; display: block; text-align: left; font-size: 96%; line-height: 1.48; color: rgba(0, 0, 0, 1); float: left; letter-spacing: .1em; position: absolute; top: 5px; left: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;}
#wn_crs .ctrl-disc { display: none;}
#wn_crs .ctrl-arrow { display: none;}
/*for_W640-*/
@media all and (min-width: 640px) {
#new_sp h2 { width: 24%; margin-top: 10px;}
#wn_crs .outer { width: 73%; margin: 0 0 0 27%;}
#wn_crs .outer .inner li .infoset .news_nkm { font-size: 94%; line-height: 1.3;}
}
/*for_W768-*/
@media all and (min-width: 768px) {
#new_sp { padding: 1.5em 0 .5em 0;}
#new_sp h2 { width: 20%; margin-top: 27px;}
#wn_crs .outer { width: 70%; height: 140px; margin: 0 0 0 26.5%; z-index: 100;}
#wn_crs .outer .inner li .liset { width: 350px; height: 140px; z-index: 100;}
#wn_crs .outer .inner li .tp { width: 120px; top: 9px; left: 9px;}
#wn_crs .outer .inner li .infoset { width: 200px; height: 120px; display: block; position: absolute; top: 10px; left: 140px; font-size: 90%;}
#wn_crs .outer .inner li .infoset .news_update { bottom: 0; right: 0;}
#wn_crs .outer .inner li .infoset .news_nkm { width: 200px; height: 100px; top: 0; font-size: 94%; line-height: 1.42; -webkit-line-clamp: 5;}
#wn_crs .ctrl-arrow { width: 77%; height: 80px; margin: -70px 0 0 23%; display: block; position: relative; z-index: 50;}
#wn_crs .ctrl-arrow li a { box-sizing: border-box; width: 14px; height: 14px; position: absolute; top: 0; display: block; border-top: 5px solid rgba(255, 47, 117, 1); border-left: 5px solid rgba(255, 47, 117, 1); opacity: .6;}
#wn_crs .ctrl-arrow .ctrl-lef a { left: 0; -webkit-transform: rotate(-45deg); transform: rotate(-45deg);}
#wn_crs .ctrl-arrow .ctrl-rig a { right: 0; -webkit-transform: rotate(135deg); transform: rotate(135deg);}
#wn_crs .ctrl-arrow li a:hover { opacity: 1;}
}
/*for_W1000-*/
@media all and (min-width: 1000px) {
#wn_crs .outer .inner li .infoset .news_nkm { font-size: 88%; line-height: 1.4; -webkit-line-clamp: 5;}
}
/* _maru */
#wn_crs .maru { width: 100%; text-align: center; padding: 1em 0; font-size: 50%; color: rgba(255, 47, 117, 1);}
#wn_crs .maru span { opacity: .6; padding: 0 3px;}

/* 	stream
============================== */
#stset { width: 100%; max-width: 500px; margin: 0 auto;}
#stset:before, #stset:after { content: ""; display: table;}
#stset:after { clear: both;}
#stset::after { content: ""; display: block; clear: both;}
#stset .st_sp { width: 31%; margin: 0 1.8% 0 0; float: right; background: rgba(255, 255, 255, 1); box-shadow: 0 1px 5px rgba(3, 0, 89, .2); -webkit-box-shadow: 0 1px 5px rgba(3, 0, 89, .2);}
#stset .st_sp { margin: 0 auto; float: none;}
#stset .st_sp a, #stset .st_sp .finish { width: 100%; height: 0; padding-top: 100%; display: block; position: relative;}
#stset .st_sp a:hover { opacity: .8;}
#stset .st_sp .st_img { width: 100%; height: 100%; background-repeat: no-repeat; -webkit-background-size: contain; background-size: contain; position: absolute; top: 0; left: 0;}
#stset .st_sp .finish .st_img { opacity: .15;}
#stset .st_sp .finish .lst_info { width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit- transform: translate(-50%, -50%); font-weight: bold; font-size: 90%; letter-spacing: .1em;}
/*for_W768-*/
@media all and (min-width: 768px) {
#stset { max-width: 900px;}
#stset .st_sp a, #stset .st_sp .finish { width: 100%; height: 0; padding-top: 40.740740740740741%; padding-top: -webkit-calc(220 / 540 * 100%); padding-top: calc(220 / 540 * 100%); display: block; position: relative;}
}

/* 	sns
============================== */
#sns_bg { padding-bottom: 60px; position: relative; overflow: hidden; z-index: 0;}
#sns_bg { padding-bottom: 40px;}
#sns_sp:before, #sns_sp:after { content: ""; display: table;}
#sns_sp:after { clear: both;}
#sns_sp::after { content: ""; display: block; clear: both;}
#chari_sp { width: 40%; max-width: 180px; position: absolute; bottom: 0; left: 100%; animation-name: slidein; animation-duration: 3s; animation-fill-mode:forwards; z-index: 10;}
#chari { width: 100%; height: 0; padding-top: 38.596491228070175%; padding-top: -webkit-calc(132 / 342 * 100%); padding-top: calc(132 / 342 * 100%); background-repeat: no-repeat; -webkit-background-size: contain; background-size: contain;}
@keyframes slidein { 100%  { left: 31%;}}
@-webkit-keyframes slidein { 100%  { left: 31%;}}
/*_twitter*/
#twitter_sp { width: 98%; max-width: 500px; height: 280px; margin: 0 auto 1em auto; padding-bottom: .3em; position: relative; z-index: 100;}
#twitter_sp dt { width: 100%; height: 60px; background-repeat: no-repeat; -webkit-background-size: contain; background-size: contain; -webkit-background-position: -5px -5px; background-position: -5px -5px;}
#twitter_sp dt a { width: 100%; display: block;}
#twitter_sp dt a:hover { opacity: .8;}
#twitter_sp dt:before, #twitter_sp dt:after { content: ""; display: table;}
#twitter_sp dt:after { clear: both;}
#twitter_sp dt::after { content: ""; display: block; clear: both;}
#twitter_sp .sns_title-txt { display: block; text-align: right; float: right; color: rgba(255, 255, 255, 1); margin: -1em 0 0 0; position: relative; z-index: 10;}
#twitter_sp .sns_title-txt::after { content: url(../img/ico_x.png); display: inline-block; vertical-align: middle; transform: scale(.4);}
#twitter_sp .tlsp { box-sizing: border-box; width: 90%; margin: 0 auto; position: absolute; top: 50px; left: 5%;}
#twitter_sp .tlsp .tl { box-sizing: border-box; width: 100%; height: 220px; -webkit-box-sizing:border-box; box-sizing:border-box;}
#twitter_sp .tlsp .tl iframe { width: 100% !important;}
#twitter_sp .tlsp .tl iframe { width: 740px !important;}
/*_instagram*/
#instagram_sp { width: 80%; max-width: 500px; height: 60px; margin: 0 auto;}
#instagram_sp a { box-sizing: border-box; width: 100%; height: 100%; display: block; position: relative; z-index: 20; padding: 3px;}
#instagram_sp a:hover { opacity: .8;}
#instagram_sp .lnkol { width: 100%; height: 100%; margin: 0 auto; background-repeat: no-repeat; -webkit-background-size: contain; background-size: contain; position: relative; z-index: 10;}
#instagram_sp .mark { width: 30px; height: 30px; background-repeat: no-repeat; -webkit-background-size: contain; background-size: contain; background-image: url(../img/ico_instagram.png); position: absolute; top: 15px; right: 10px;}
#instagram_sp .lnkol a:hover { opacity: .8;}
/*for_W768-*/
@media all and (min-width: 768px) {
#sns_bg { padding-bottom: 0;}
#sns_sk { width: 100%; height: 60px; position: absolute; bottom: 0; left: 0; background: rgba(255, 255, 255, .1); z-index: 10;}
#chari_sp { max-width: 220px;}
#chari_sp { bottom: 60px;}
@keyframes slidein { 100%  { left: 66.6%;}}
@-webkit-keyframes slidein { 100%  { left: 66.6%;}}
#sns_sp { max-width: 880px; margin: 0 auto;}
#sns_sp h2, #instagram_sp { float: right;}
#sns_sp h2 { padding-top: 2em; text-align: right;}
#twitter_sp { max-width: 520px; float: left; margin: 0; margin-left: 8px; padding-bottom: .05em;}
#twitter_sp .tlsp { box-sizing: border-box; width: 98%; margin: 0 auto; position: absolute; top: 50px; left: 1%;}
#instagram_sp { max-width: 320px; height: 65px;}
}

/* 	goods
============================== */
#goods_sp { padding: 1em 0 .5em 0; margin: 0 auto;}
#goods_sp a { width: 96%; max-width: 500px; margin: 0 auto; display: block;}
#goods_sp a:hover { opacity: .8;}
#goods_isp { box-sizing: border-box; width: 100%; margin: .5em auto 1em auto; display: block; border: 1px solid rgba(32, 148, 67, .8); background: rgba(255, 255, 255, .6); box-shadow: 0 1px 5px rgba(3, 0, 89, .2); -webkit-box-shadow: 0 1px 5px rgba(3, 0, 89, .2);}
#goods_img { width: 100%; height: 0; padding-top: 21.8%; padding-top: -webkit-calc(218 / 1000 * 100%); padding-top: calc(218 / 1000 * 100%); background-repeat: no-repeat; -webkit-background-size: contain; background-size: contain; display: block;}


/* 	haishin
============================== */
#str_head { padding: 1em 0;}

/* 	nenga2024
============================== */
#nenga2024 { width: 90%; max-width: 600px; margin: 0 auto 1em auto;}
#nenga2024 a:hover { opacity: .9;}
.nenga2024_img { width: 100%; height: 0; padding-top: 25%; padding-top: -webkit-calc(300 / 1200 * 100%); padding-top: calc(300 / 1200 * 100%); background-repeat: no-repeat; -webkit-background-size: contain; background-size: contain; position: relative;}

/* 	movie
============================== */
#spmv #spot_sp { width: 90%; max-width: 600px; margin: 0 auto; box-shadow: 0 1px 5px rgba(3, 0, 89, 0); -webkit-box-shadow: 0 1px 5px rgba(3, 0, 89, 0); position: relative; z-index: 50;}
#spmv #spot_sp .movie_all { width: 100%; margin: 0 auto; background: rgba(0, 0, 0, 1); box-shadow: 0 1px 5px rgba(3, 0, 89, .3); -webkit-box-shadow: 0 1px 5px rgba(3, 0, 89, .3);}
#spmv #spot_sp a { color: rgba(58, 132, 198, 1); letter-spacing: .1em;}
#spmv #spot_sp a:hover { color: rgba(0, 0, 0, .8);}
.ribon {
    position: relative;
    display: inline-block;
    height: 50px;
    line-height: 50px;
    padding: 0 1rem;
    background-color: #fff;
    color: #353535;
    font-weight: bold;
    text-align: center;
margin: 1em auto 0 auto;
}

.ribon::before,
.ribon::after {
    position: absolute;
    top: 0;
    width: 0px;
    height: 0px;
    border-color: #fff transparent;
    border-style: solid;
    content: '';
}

.ribon::before {
    left: -15px;
    border-width: 25px 0px 25px 15px;
}

.ribon::after {
    right: -15px;
    border-width: 25px 15px 25px 0px;
}