@charset "utf-8";

/*Z-INDEX*/
.inner{
    z-index: 30;
}
.mainvisalArea::after{
    z-index: 3;
}
.mainvisalBoxWrap{
    z-index: 21;
}
.mv_leftBox{
    z-index: 40;
}
.logo.fixed{
    z-index: 40;
}
.kv_text_1 span::after{
    z-index: -1;
}
.deco_movie{
    z-index: 10;
}
.movieBox_btn{
    z-index: 10;
}
.section_ttl{
    z-index: 10;
}

.js-box_item{
    transition: all .6s ease;
    -webkit-transition:all .6s ease;
	transform: translateY(30px);
	opacity: 0;  
}
.js-box_item.item_animated{
    transform: translateY(0);
	opacity: 1;
}

body{
    width: 100%;
    min-width: 1200px;
    background-color: #1176d4;
    background: url(/wp-content/themes/mobkara/assets/img/top/bg.jpg) no-repeat center bottom;
    background-attachment: fixed;
    background-size: cover;
}
@media screen and (max-width:767px){
    body{
        width: 100%;
        min-width: unset;
        background: url(/wp-content/themes/mobkara/assets/img/top/bg_sp.jpg) no-repeat center top;
        background-attachment: fixed;
        background-size: 100% auto;
    }
    #bg{
        display: block;
        content: "";
        width: 100%;
        height: 100%;
        position: fixed;
        background: url(/wp-content/themes/mobkara/assets/img/top/bg_sp.jpg) no-repeat center bottom;
        background-size: cover;
        top: 0;
        left: 0;   
    }
    #bg.is-in_character,
    #bg.is-in_staffcast,
    #bg.is-in_books{ 
        background: url(/wp-content/themes/mobkara/assets/img/top/staffcast_bg.jpg)no-repeat center center;
        background-size: cover;
    }
    img {
        width: 100%;
        height: auto; 
    } 
}
/*-----------------------------------------------
  MAIN VISAL 
-------------------------------------------------*/

.hd_bg{
    clip-path: polygon(0% 0%, 100% 0%,60px calc(100% - 60px), 60px calc(100% - 40px), 40px calc(100% - 40px), 40px calc(100% - 20px), 20px calc(100% - 20px), 20px 100%, 0 100%);
    background: url(/wp-content/themes/mobkara/assets/img/top/mv_top_bg2.jpg) no-repeat center top fixed;
    background-size: 100% auto; 
    position: absolute;
    z-index: 20;
    top:0;
    left: 0;
    height: 300px;
    width: 822px;
}
@media screen and (max-width:767px){
    .hd_bg {
        clip-path: polygon(0% 0%, 100% 0%,60px calc(100% - 60px), 60px calc(100% - 40px), 40px calc(100% - 40px), 40px calc(100% - 20px), 20px calc(100% - 20px), 20px 100%, 0 100%);
        background: url(/wp-content/themes/mobkara/assets/img/top/mv_top_bg1.jpg) no-repeat center top fixed;
        background-size: 100% auto;
        position: absolute;
        z-index: 20;
        top: 0;
        left: 0;
        height: unset;
        padding-top: 38vw;
    width: 80vw;
    }
}
.mainvisalArea{
    padding: 0 80px;
    position: relative;
    min-width: 1200px;
}
.mainvisalArea::after{
    background: url(/wp-content/themes/mobkara/assets/img/top/mv_bg.jpg) no-repeat center center;
    background-size: cover;
    width:100%;
    min-width: 1200px;
    height:100%;
    clip-path:polygon(
        0 0, 100% 0,
        100% calc(70% - 60px),
        calc(100% - 20px) calc(70% - 60px),
        calc(100% - 20px) calc(70% - 40px),
        calc(100% - 40px) calc(70% - 40px),
        calc(100% - 40px) calc(70% - 20px),
        calc(100% - 60px) calc(70% - 20px),
        calc(100% - 60px) 70%,
        0 100%,
        0 40px,
        20px 40px,
        20px 20px,
        40px 20px);
    content: "";
    display: block;
    z-index: 3;
    position: absolute;
    left: 0;
    top:0;
}
.mainvisalArea .mainvisalBox{
    border-radius: 0 0 10px 10px;
    overflow: hidden;
}
.mainvisalBoxWrap{
    position: relative;
    z-index: 21;
    padding-left: 32%;
    margin: 0 auto;
}
.mainvisalBox {
    width: 100%;
    /*min-width: 718px;*/
    box-shadow:6px 6px 22px 10px rgba(75,132,178,0.3);
}
.mainvisalBox img{
    width: 100%;
}
.mv_leftBox{
    position: absolute;
    width: 32.8%;
    text-align: center;
    /*z-index: 6;*/
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 2.5vw;
}
.logo{
    margin-bottom: 5%;
    width: 60%;
}
.logo.fixed{
    position: fixed;
    top: 20px;
    left: 60px;
    width: 140px;
    z-index: 200;
}
.logo img{
    width: 100%;
    height: auto;
}
.kv_text{
    margin-bottom: 10%;

}
.kv_text_1{
    font-weight: bold;
    line-height: 1;
    font-size: 2.4vw;/*3vw*/
    color: #f829ac;
    text-shadow:2px 2px 0 #FFF;
    position: relative;
}
.kv_text_1 span{
    display: inline-block;
    margin-bottom: 20px;
    position: relative;
}
.kv_text_1 span::after{
    content: "";
    width: 100%;
    height: 30px;
    transform: skewX(10deg);
    background-color: rgba(255,246,97,0.9);
    position: absolute;
    bottom: -5px;
    left: 0;
    /*z-index: -1;*/
}

/*movieBox*/
.movieBoxWrap_outer{
    padding: 10% 0 0 0;
    position: relative;
    display: flex;
    width: 30vw;
    max-width: 610px;
    justify-content: center;
    align-items: center;
    margin-bottom: 0;
}
.movieBox{
    width: 100%;
    height: 100%;
    border: 5px solid #FFF;
    border-radius: 15px;
    position: relative;
}
.movieBoxWrap{
    width: 100%;
    max-width: 610px;
    position: relative;
    border: 2px solid #000;
    box-shadow: 5px 5px 0px 0px #000000;
    border-radius: 15px;
}
.deco_movie{
    width: 22%;
    padding-top: 22%;
    background: url(/wp-content/themes/mobkara/assets/img/top/movie_icon.png) no-repeat center center;
    background-size: 100% auto;
    position: absolute;
    top: 0;
    right: 6.5%;
    /*z-index: 10;*/
    pointer-events: none;
}
@keyframes rotate{
	0%{transform: rotate(0);}
	100%{ transform:rotate(360deg); }
}
.deco_movie::before{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: url(/wp-content/themes/mobkara/assets/img/top/movie_icon_txt.png) no-repeat center center;
    background-size: 100% auto;
    position: absolute;
    top: 0;
	left: 0;
	right: 0;
	bottom: 0;
    animation: 18s rotate linear infinite;
}
.moviebg{
    background: #000;
    overflow: hidden;
    border-radius: 15px;
    width: 100%;
    padding-top: 56.25%;
    pointer-events: none;
}
.movieBox_btn{
    display: block;
    /*z-index: 10;*/
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    background: url(/wp-content/themes/mobkara/assets/img/top/movie_play_ic.png) no-repeat center center;
    background-size: 91px auto;
    width: 100%;
    height: 100%;
    transition: opacity .3s;
}
.movieBox_btn:hover{
    opacity: .8;
}
.moviebg iframe {
    position: absolute;
    margin: 0;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
@media screen and (max-width:767px){

    .mainvisalArea{
        display: flex;
        padding: 0 0;
        position: relative;
        min-width: 100%;
        flex-direction: column-reverse;
    }
    .mainvisalArea .mainvisalBox {
        min-width: unset;
        box-shadow:none;
        border-radius: 0;
    }
    .mainvisalArea::after {
        min-width: unset;
        clip-path:polygon(
            0 0, 100% 0,
            100% calc(80% - 60px),
            calc(100% - 20px) calc(80% - 60px),
            calc(100% - 20px) calc(80% - 40px),
            calc(100% - 40px) calc(80% - 40px),
            calc(100% - 40px) calc(80% - 20px),
            calc(100% - 60px) calc(80% - 20px),
            calc(100% - 60px) 80%,
            0 100%,
            0 40px,
            20px 40px,
            20px 20px,
            40px 20px);
    }

    .mainvisalBoxWrap{
        width: 100%;
        position: relative;
        z-index: 5;
        padding-left: 0;
        margin-bottom: 10vw;
    }
    .mainvisalBox img{
        width: 100%;
    }
    .mv_leftBox{
        width: 100%;
        position: unset;
        z-index: 100;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 0;
    }
    .logo{
        width: 26.6vw;
        position: absolute;
        top: -7vw;
        left: -7vw!important;
        margin-bottom: 0;
    }
    .logo img{
        width: 100%;
        position: absolute;
        top:10vw;
        left: 10vw;
        margin-bottom: 0;
    }

    .kv_text{
        margin-bottom: 0;
    
    }
    .kv_text_1{
        font-size: 26px;
    }
    /*movieBox*/
    .movieBoxWrap_outer{
        padding: 10vw 0 0 0;
        position: relative;
        display: flex;
        width: 80vw;
        justify-content: center;
        align-items: center;
        margin-bottom: 10vw;
    }
    .movieBox{
        width: 100%;
        height: 100%;
        border: 10px solid #FFF;
        border-radius: 10px;
        position: relative;
    }
    .movieBoxWrap{
        width: 100%;
        position: relative;
        min-width: unset;
    }
    .deco_movie{
        width: 20vw;
        height: 20vw;
        top: 0;
        right: -5vw;
        padding: 0;
    }
    @keyframes rotate{
        0%{transform: rotate(0);}
        100%{ transform:rotate(360deg); }
    }
    .deco_movie::before{
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        background: url(/wp-content/themes/mobkara/assets/img/top/movie_icon_txt.png) no-repeat center center;
        background-size: 100% auto;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        animation: 18s rotate linear infinite;
    } 
    .moviebg{
        width: 100%;
        padding-top: 56.25%;

        border: 3px solid #000;
        background: #000;
        overflow: hidden;
        box-shadow: 3px 4px 0px 2px #000000;
        border-radius: 10px;
    }
    .movieBox_btn{
        width: 15vw;
        height: 15vw;
        background-size:contain;
    }
    .moviebg iframe{
        position: absolute;
        margin: 0;
        top:0;
        left: 0;
        bottom: 0;
        right: 0;
    }    
}

/*-----------------------------------------------
 * OFFICIAL SNS
-------------------------------------------------*/
/*.official_snsBoxWrap{
    position: absolute;
    right: -80px;
    bottom: 20%;
    transform: translateY(50%);
    z-index: 100;
    width: 80px;
    font-size: 22px;
    text-shadow: 0px 0px 10px #e4e8ed;
}*/
.official_snsBoxWrap {
    position: absolute;
    right: -80px;
    top: 50%;
    bottom: unset;
    transform: translateY(-50%);
    z-index: 100;
    width: 80px;
    font-size: 22px;
    text-shadow: 0px 0px 10px #e4e8ed;
}
.official_snsBox{
    display: flex;
    align-items: center;
    flex-direction: column;
}
.official_snsBox .ttl{
    font-weight: 600;
    font-family: var(--font-en);
    line-height: 1;
    margin-bottom: 15px;
    writing-mode: vertical-lr;
}
.official_snsBox_list{
    display: flex;
    flex-direction: column;
}
.official_snsBox_item{
    margin: 10px 0!important;
}
.official_snsBox_item .shareLists__link:before{
    background-color: #000;
    transition: all .3s;
}
.official_snsBox_item .shareLists__link:hover:before{
    background-color: #1176d4;
}
.official_snsBox_item .shareLists__link{
    filter: drop-shadow(0px 0px 10px #e4e8ed);
}
@media screen and (max-width:767px){
    .official_snsBoxWrap{
        position: absolute;
        right: unset;
        left: 5vw;
        bottom: 20vw;
        top: unset;
        transform: translateY(0%);
        z-index: 100;
        width: unset;
        font-size: 10px;
        text-shadow: 0px 0px 10px #e4e8ed;
    }
    .official_snsBox{
        align-items: center;
    }
    .official_snsBox .ttl{
        font-weight: 600;
        font-family: var(--font-en);
        line-height: 1;
    }
    .official_snsBox_list{
        display: flex;

    }
    .official_snsBox_list .official_snsBox_item{
        margin: 1vw 0;

    }
    .official_snsBox_item .shareLists__link:before{
        background-color: #000;
    }
    .official_snsBox_item .shareLists__link:hover:before{
        background-color: #000;
        opacity: .5;
    }
    .official_snsBox_item .shareLists__link{
        filter: drop-shadow(0px 0px 10px #e4e8ed);
    }
    
}
/*
.official_snsBoxWrap {
    position: sticky;
    right: 0;
    bottom: 0%;
    transform: translateY(0%);
    z-index: 180;
    width: 80px;
    font-size: 22px;
    text-shadow: 0px 0px 10px #e4e8ed;
}*/
/*
.official_snsBoxWrap.fixed {

    position: fixed;
        right: 0;
        bottom: 50%;
}
*/
/*
.official_snsBoxWrap_outer{
    position: absolute;
    bottom: 0;
    right: -80px;
    width: 80px;
    height: 100%;
    background-color: #CCC;
}
*/

/*-----------------------------------------------
 * NEWS X
-------------------------------------------------*/

.news_xArea{
    position: relative;
}
.news_xArea .inner{
    display: flex;
    justify-content: space-around;
    padding-top: 200px;
}
.news_xArea .box_ttl{
    text-shadow:0px 0px 10px #4387e0;
}

.news_xArea_boxWrap{
    width: 480px;
    display: flex;
    flex-direction: column;
    align-items: center;

}
.news_xArea_box{
    padding: 20px 20px 50px 20px;
    background-color: rgba(255,255,255,0.9);
    box-shadow: 0px 0px 15px 10px rgba(75,132,178,0.1);
    border-radius: 20px;
    position: relative;
    width: 100%;
    height: 495px;
}

.newsBoxWrap{
	margin-bottom: 80px;
}

@media screen and (max-width:767px){
    .news_xArea .inner{
        flex-direction: column;
        padding: 10vw 5vw;
        z-index: 50;
    }
    .newsBoxWrap{
		margin-bottom: 0;
	}
    .news_xArea_boxWrap{
        width: 100%; 
        margin-bottom: 20vw; 
    }
    .news_xArea_box{
        width: 100%;
        padding: 10vw 3vw 10vw 3vw;
        height: auto;
    }
}

.widget{
	width: 100%;
	height: auto;

}

.widget_inner{
	overflow-x: hidden;
	height: 390px;
	
}
@media screen and (max-width:767px){
	.widgetBox{
		width: 100%;
	}
	.widget{
		width: 100%;
		height: 64vw;
		position: relative;
		margin-bottom: 10vw;
		padding: 6.4vw;
	}
	.widget_inner{
		overflow-x: hidden;
		height: 52vw;
		
	}

}
@media screen and (max-width:767px){
	.linkBox a{
		width: unset;
		height: auto;
		margin: 0 auto;
	}
}
.newsLists{
	margin-bottom: 40px;
}
.newsList{
	display: block;
	
	position: relative;
}
.newsList .newsList_innerWrap{
	display: block;
	text-decoration: none;
	height: 100%;
	padding: 20px 30px 20px 35px;
}
@media screen and (max-width:767px){

	.newsLists{
		margin-bottom: 5.3vw;
	}
	.newsList{
		display: block;
		width: 100%;
		height: auto;
	}
	.newsList .newsList_innerWrap{
		padding: 3vw 3vw 3vw 3vw;
	}
}

.newsList{
	position: relative;
	height: 100%;
    min-height: 125px;
}
.newsList::after{
	content: "";
	width: 100%;
    height: 5px;
	position: absolute;
	bottom: 0;
	left: 0;
	background: url(/wp-content/themes/mobkara/assets/img/top/news_line.png) no-repeat center bottom;
}
.newsList:last-child::after{
    display: none;

}

@media screen and (max-width:767px){
    .newsList{
        min-height: unset;
    }
	.newsList_inner::after{
		width: min(11vw,39px);
		height: min(3vw,8px);
	}
}

.newsList:hover a{
	color: #269ff4;
	transition: all .2s ease;
}
.news_day{
	display:inline-block;
	padding-left: 15px;
	position: relative;
	line-height: 1;
}
.news_day::after{
	display: block;
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	height: 15px;
	width: 15px;
    background: url(/wp-content/themes/mobkara/assets/img/common/news_icon.png) no-repeat left center;
	
}

.newsList_ttl{
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}
@media screen and (max-width:767px){

	.newsList a{
		display: block;
		width: 100%;
		height: 100%;
		padding: 4vw 6.4vw 4vw 6.4vw;
	}
	.news_day{
		padding-right: 3vw;
		position: relative;
	}
}

.newsList:not(:last-child){
	margin-bottom: 10px;
}
@media screen and (max-width:767px){
	.newsList:not(:last-child){
		margin-bottom:2vw;
	}
}

/*-----------------------------------------------
 * CONTENTS
-------------------------------------------------*/
.box_ttl{
    text-align: center;
    color: #FFF;
    font-size: 36px;
    font-family: var(--font-en);
    font-weight: 600;
}
.contentsSection{
    position: relative;
}
/*
.section_ttl{
    font-family: var(--font-en);
    font-weight: 200;
    position: absolute;
    width: 80px;
    right: 0;
    top: 50%;
    transform: translate(0%, -50%);
    overflow: hidden;
    writing-mode: vertical-lr;
}
.section_ttl span{
    font-size: 98px;
    line-height:1;
    transform:rotate(-180deg) translateX(-10px);
    color: #FFF;
    display: block;
 }*/
 .charaArea .section_ttl,
 .booksArea .section_ttl{
    left: 0;
    top: calc((100% - 20vw) / 2);
 }
 .charaArea .section_ttl span,
 .booksArea .section_ttl span{
    transform:rotate(0);
    color: #e5e3ca;
    line-height: 0.4;
 }

 @media screen and (max-width:767px){

   .section_ttl{
       display: none;
    }
    .charaArea .section_ttl{
       display: block;
       font-size: 40px;
       top: 15%;
    }
    /*
    .box_ttl{
        font-size: 22px;
    }*/
    .charaArea .section_ttl span,
    .booksArea .section_ttl span{
        font-size: 40px;
    }    
 }
 /*section_bg*/
.section_bg{
    height: 200%;
    width: 100%;
    transform:skew(0, -10deg);
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin: auto;
}





/*-----------------------------------------------
 * INTRODUCTION
-------------------------------------------------*/
.introArea .section_bg{
    background: url(/wp-content/themes/mobkara/assets/img/top/intro_bg.jpg) no-repeat center center;
    background-size: 100% auto;
}
.introArea{
    position: relative;
    padding: 20% 0 40% 0;
    margin-top: -20%;
    overflow:unset;
}
.introArea::before{
    position: absolute;
    display: block;
    content: "";
    top: -300px;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 20;
    pointer-events: none;
    background: url(/wp-content/themes/mobkara/assets/img/top/mahojin_left.png) no-repeat top left;
    background-size: 300px auto;
}
.introArea::after{
    position: absolute;
    display: block;
    content: "";
    top: 0%;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 20;
    pointer-events: none;
    background: url(/wp-content/themes/mobkara/assets/img/top/mahojin_right.png) no-repeat bottom 20% right;
    background-size: 300px auto;
    opacity: 0.4;
}
.introArea .inner::after{
    display: block;
    content: "";
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    background: url(/wp-content/themes/mobkara/assets/img/top/intro_hoseki.png) no-repeat center center;
    background-size: contain;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
    opacity: 0;
    transform: scale(0.8);
    transition: all .3s ease-in;
    -webkit-transition:all .3s ease-in;
    transition-delay: 1s;
}
.introArea.animated .inner::after{
    opacity: 1;
    transform: scale(1);
}


/*ttl*/
.introArea .contents_ttl{
    color: #b9c1cb;
    margin-bottom: 0;
 }
.introArea .contents_ttl span::before,
.introArea .contents_ttl span::after{
    background-color: #b9c1cb;
}
.intoro_txtWrap{
    text-align: center;
    font-size: 18px;

}
.intro_txt1 img{
    width: 710px;
    height: auto;
}
/*text*/
.txt_l{
    font-size: 30px;
    font-weight: 800;
}
.txt_blue{
    color: #05407c;
    font-weight: 800;
}
.txt_red{
    color: #e5250c;
    font-weight: 800;
}
.txt_mincho{
    font-family: var(--font-mincho);
    font-size: 42px;
    font-weight: bold;
}
@media screen and (max-width:767px){
    .introArea {
        position: relative;
        padding: 0% 0 0% 0;
        margin-top: -60%;
        overflow: unset;
    }
    .introArea .inner{
        padding: 50% 0 40% 0;
    }
    .introArea::after{
        display: none;
    }
    .introArea .inner::after{
        background-image: url(/wp-content/themes/mobkara/assets/img/top/intro_hoseki_sp_top.png),url(/wp-content/themes/mobkara/assets/img/top/intro_hoseki_sp_btm.png) ;
        background-size: 100% auto, 100% auto;
        background-repeat: no-repeat, no-repeat;
        background-position: top 12% center, bottom 10% center;
        opacity: 0;
        transform: scale(1);
    }
    .intoro_txtWrap{
        padding: 0 5vw;
        font-size: 12px;
    }
    .intro_txt1 img{
        width: 100%;
    }
    .txt_l{
        font-size: 18px;
        font-weight: 800;
    }
    .txt_mincho{
        font-size: 24px;
    }
    .intro_txt3{
        margin-top: -8%;
    }
    .txt_mincho .txt_s{
        font-size: 12px;
    }
}


/*-----------------------------------------------
 * character
-------------------------------------------------*/
.charaArea {
    /*margin-top: -44%;*/
    padding-top: 13%;
}
.character-img img {
    width: 100%;
}

.character-img {
    width: 100%;
    padding-bottom:100px;
}

@media screen and (max-width:767px){
    .charaArea {
        margin-top: -40vw;
        padding-top: 0%;
    }
    .charaContentWrap {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .character-img {
        width: 90%;
        padding-bottom:12.8vw;
    }
}

/*-----------------------------------------------
 * #STAFF / CAST
-------------------------------------------------*/
.staffcastArea{
    background: url(/wp-content/themes/mobkara/assets/img/top/staffcast_bg.jpg)no-repeat center center fixed;
    background-size: cover;
    position: relative;
    z-index: 1;
    padding: 30% 0;
    margin: -30% 0;
}
.staffcastArea .inner{
   /* padding-bottom: 300px;*/
}
.staffcastBoxWrap{
    display: flex;
    justify-content: space-around;
}
.staffcastBox{
    width: 530px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
    justify-content: space-around;
}
.staffcastBox.castBox{
    width: 230px;
}
.staffcastArea .box_ttl{
    display: block;
    width: 100%;
    color: #233e60;
    margin-bottom: 70px;
}
.staffcastBox dl{
    margin-bottom: 40px;
    font-size: 16px;
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
    flex-wrap: wrap;
    text-align: center;
}
.staffcastBox dt{
    font-size: 16px;
    margin-bottom: 5px;
}
.staffcastBox dl dd{
    font-size: 26px;
    width: 100%;
    line-height: 1.2;
}
.txt_s{
    font-size: 20px;
}
.staffcastBox dl.w_full{
    width: 100%;

}
.staffcastBox dl.w_50{
    width: 50%;
}
.name_box{
    display: inline-block;
    position: relative;
    padding: 0 35px;
}
.btn_cmt{
    position: absolute;
    right: 0;
    top: 0;
    margin: auto;
    display: block;
    width: 28px;
    height: 28px;
    background: url(/wp-content/themes/mobkara/assets/img/top/cmt_icon.png) no-repeat center center;
    background-size: contain;
    transition: .6s;
    transform: scale(.9);
}
.btn_cmt:hover{
    transform: scale(1);
}
@media screen and (max-width: 767px){
    .staffcastArea{
        background: url(/wp-content/themes/mobkara/assets/img/top/staffcast_bg.jpg)no-repeat center center;
        background: none;
        background-size: cover;
        position: relative;
        z-index: 1;
        padding: 0 0;
        margin: 0 0 0 0;
        margin-top: -40%;
        padding-top: 10%;
    }
    .staffcastArea .inner{
        padding-bottom: 10%;
    }
    .staffcastBoxWrap{
        flex-direction: column;
    }
    .staffcastBox{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-content: flex-start;
        margin-bottom: calc(95 / 375 * 100vw);
    }
    .staffcastBox.castBox{
        width: 100%;
    }
    .staffcastArea .box_ttl{
        margin-bottom: 5vw;
    }
    .staffcastBox dl{
        margin-bottom: calc(30 / 375 * 100vw);
        font-size: 16px;
    }
    .staffcastBox dl{
        width: 50%;
    }
    .staffcastBox dt{
        font-size: 12px;
    }
    .staffcastBox dl dd{
        font-size: 18px;

    }
    .staffcastBox dl .txt_s{
        font-size: 14px;
    }
    .name_box{
        padding: 1.5vw 10vw 0 10vw
    }
    .btn_cmt{
        display: block;
        width: 8vw;
        padding-top: 7vw;
        height: unset;
        background: url(/wp-content/themes/mobkara/assets/img/top/cmt_icon.png) no-repeat center center;
        background-size: contain;
        transform: scale(1);
    }
}
/*MODAL COMMENT*/
.modalComment{
    width: 1000px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
.cmt_img{
    margin-right: 30px;
}
.cmt_textBox_name{
    color: #000;
    font-size: 32px;
    margin-bottom: 40px;
}
.cmt_charaname{
    font-size: 20px;
    display: block;
}
.cmt_textBox_text{
    color: #000;
    font-size: 16px;
    line-height: 2;
}


@media screen and (max-width:767px){
	.modalComment{
        width: 100%;
        flex-direction: column;
		padding: 0 5vw;		
	}
	.cmt_img{
		margin: 0 auto 5vw auto;
		display: block;
		width: 75%;
	}
	.cmt_textBox_name{
		font-size:16px;
		margin-bottom: 3vw;
	}
	.cmt_charaname{
		font-size: 12px;
	}
	.cmt_textBox_text{
		font-size: 10px;
	}
}

/*-----------------------------------------------
 * BOOKS
-------------------------------------------------*/
.booksArea{
    position: relative;
    z-index: 2;
   /* margin-top: -20%;*/
}
.booksArea .section_bg{
    background: url(/wp-content/themes/mobkara/assets/img/top/books_bg.jpg) no-repeat center center;
    background-size:cover;
}
.booksArea .inner{
    padding-top: 25%;
    padding-bottom: 25%;
}

@media screen and (max-width: 767px){
    .booksArea{
        position: relative;
        z-index: 2;
        margin-top: -30%;
        padding-top: 0%;
    }
    .booksArea .inner{
        padding-top: 30%;
        padding-bottom: 30%;
    }
}

/*ttl*/
.booksArea .contents_ttl{
    color: #654120;
 }
.booksArea .contents_ttl span::before,
.booksArea .contents_ttl span::after{
    background-color: #654120;
}
.booksListBox{
    margin-bottom: 50px;
}
.booksList{
	display: flex;
    flex-wrap: wrap;
	padding: 0 80px;
}
.booksListBox_ttl{
    width: 25%;
    padding: 2%;
    margin-bottom: 15px;
    text-align: center;
    display: flex;
    align-items: center;
}
.booksList .booksList_item{
    width: 25%;
    padding: 2%;
    margin-bottom: 15px;
    text-align: center;
}
.booksList .books_img{
    border: 3px solid #000;
    background: #000;
    border-radius: 2px;
    overflow: hidden;
    box-shadow: 3px 4px 0px 2px #000000;
}
.books_img img{
	width: 100%;
	height: auto;
	transition: all .4s;
	overflow: hidden;
    border: 3px solid #FFF;
}

.books_img img{
	width: 100%;
	height: auto;
    opacity: .8;
    transition: all .3s;
}
.books_img:hover img{
    opacity: 1;

}
.books_ttl{
	font-size: 16px;
}
@media screen and (max-width:767px){
    .booksList{
        display: flex;
        flex-wrap: wrap;
        padding: 0 3vw;
    }
    .booksList li{
        padding: 0 1vw;
        width: 33%;
    }

    .books_img{
        margin-bottom: 2vw;
    }
    .books_img img{
        width: 100%;
        height: auto;
    }

    .books_ttl{
        font-size: 16px;
    }
    .booksListBox_ttl {
        width: 33%;
        padding: 1%;
        margin-bottom: 15px;
    }
    .booksList .booksList_item {
        width: 33%;
        padding: 1%;
        margin-bottom: 15px;
    }
}
/*VISUAL*/
.mainvisalBoxWrap_inner{
    box-shadow: 6px 6px 22px 10px rgba(75,132,178,0.3);
}
@media screen and (max-width:767px){
    .mainvisalBoxWrap_inner{
        box-shadow: none;
    }
}
/*pager*/
.visualSlider_pagerBoxWrap{
    position: relative;
    bottom: 0!important;
    left: 0;
    margin: 5% auto;
    z-index: 10000;
    display: flex;
    justify-content: center;
    width: 100%;
    /*padding-left: 32%;*/
    align-items: center;
}
.visualSlider_pagerBox{
    display: flex;
    width: unset!important;
}
.visualSlider_pagerBox_ttl{
    color: #FFF;
    font-size: 20px;
    letter-spacing: 0.08em;
    margin-right: 30px;
}
.visualSlider_pager{
    margin: 0 15px!important;
    width: 40px;
    height: 60px;
    background-color: transparent!important;
    opacity: 1!important;
}
.visualSlider_pager_icon{
    position: relative;
    content: "";
    display: block;
    width: 40px;
    height: 60px;
    transition: opacity .6s;
}
.visualSlider_pager_icon::after{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    display: block;
    width: 100%;
    height: 100%;
    background: url(/wp-content/themes/mobkara/assets/img/top/slider_icon_off.png) no-repeat center center;  
    background-size: contain;   
}
.visualSlider_pager_icon::before{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    display: block;
    width: 100%;
    height: 100%;
    background: url(/wp-content/themes/mobkara/assets/img/top/slider_icon_on.png) no-repeat center center;  
    background-size: contain;   
    opacity: 0;
}
.swiper-pagination-bullet-active .visualSlider_pager_icon::before{
    opacity: 1;
}
.swiper-pagination-bullet-active .visualSlider_pager_icon::after{
    opacity: 0;
}
.progressbar{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: calc(100% - 32%);
    margin-left: 32%;
    height: 4px;
    overflow: hidden;
}
.progressbar span{
    display: inline-block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgb(93,150,245);
    /*background: linear-gradient(90deg, rgba(93,150,245,1) 0%, rgba(185,230,255,1) 100%, rgba(255,255,255,1) 100%);*/
    background: linear-gradient(90deg,rgba(93,150,245,1) 0%, rgba(185,230,255,1) 95%, rgba(255,255,255,0) 100%);
    border-radius: 7px;
    transform: scaleX(0);
    transform-origin: left center;
    transition-timing-function: linear;
}
@media screen and (max-width:767px){
    /*pager*/
    .visualSlider_pagerBoxWrap{
        padding-left: 0%;
    }
    .visualSlider_pagerBox{
       width: unset!important;
    }
    .visualSlider_pagerBox_ttl{
        color: #222;
        font-size: 10px;
        margin-right: 2vw;
    }
    .visualSlider_pager{
        margin: 0 2vw!important;
        width: min(calc(20 / 375* 100vw), 20px);
        height: min(calc(26 / 375* 100vw), 26px);
    }
    .visualSlider_pager_icon{
        width: 100%;
        height: 100%;
    }
    .progressbar{
       /*position: absolute;
       bottom: 15.5vw;*/
       height: 1vw;
       z-index: 2;
    }
    .progressbar span{
        border-radius: 0;
    }
}