@charset "UTF-8";
/* 共通CSS */
a{word-break: break-all;}

body.movie{
	background: url(../img/common/bg_contents.png)!important;
}
.idx-kv_butai,.idx-kv_comment,.idx-kv_letter{
	position: absolute
}

.trailer-btns_item{
	width: 32.85%;
}

/*---------------------
News 小中学生からのコメント
----------------------*/
.comment02 li img{
	border: 1px solid #ccc;
}

.comment_from{
	padding: 10px 0;
    font-weight: bold;
    font-size: 1em;
}

/* モバイルCSS */

@media screen and (max-width: 768px) {
  .idx-kv_butai{
    width: 20%;
    left: 1.3%;
    bottom: 16%
  }
	
.idx-kv_comment {
    width: 20%;
    left: 1.3%;
    bottom: 36%
  }
    
.idx-kv_letter{
    right: 1.3%;
    bottom: 36%;
    width: 20%;
    }
	
.news-article_col2 li{
	margin: 0px auto 16px;
	}
    
/*----------------
    top bnr追加
----------------*/
    .laurel-area{
        position: static;
        width: 94%;
        padding: 3% 3% 4%;
        background: url(../img/common/bg_iron.jpg);
        background-size: 50%;
    }
    
    .laurel-area ul{
        display: flex;
    }
    
    
    .laurel-area ul li{
        margin: 0 1%;
    }

    
/*-------------
    MOVIE
--------------*/
    .nejibox_main{
        padding-bottom: 3%;
        padding-top: 3%;
    }
    .trailer-main {
        width: 88%;
        padding-top: 5.3%;
    }
    .trailer-header {
        padding-top: 45.3%;
        background: url(../img/movie/page_title_bg_sp.png) 50% 50%/cover no-repeat;
    }
    .trailer-header::before {
        bottom: 0;
        content: '';
        width: 100%;
        padding-top: 12%;
        background: rgba(0,0,0,.6);
    }
    .trailer-header_title {
        width: 34.5%;
        bottom: 10%;
        -webkit-transform: translate(50%,0);
        -ms-transform: translate(50%,0);
        transform: translate(50%,0);
    }
    .trailer-textArea{
        line-height: 1.5em;
    }
    
/*--*/}



/* PC CSS */
@media screen and (min-width: 769px) {
    
/*	----------------
    top bnr追加(左)
----------------*/
    .laurel-area{
        position: absolute;
        top: 24%;
        width: 14%;
        left: 3%;
        min-width: 160px;
    }
    
    .laurel-area li{
        margin-bottom: 8%;
    }
    
    /*----------------
    top bnr追加(右)
    ----------------*/
    .idx-kv_butai,.idx-kv_comment,.idx-kv_letter,.idx-kv_theater{
        width: 16%;
        right: -8%;
    }
    .idx-kv_butai a,.idx-kv_comment a,.idx-kv_letter a,.idx-kv_theater a {
        -webkit-transition: opacity .3s ease-out;
        -o-transition: opacity .3s ease-out;
        transition: opacity .3s ease-out
    }
    .idx-kv_butai a:hover,.idx-kv_comment a:hover,.idx-kv_letter a:hover,.idx-kv_theater a:hover{
        opacity: .8
    }
    .idx-kv_butai{
        top: 24%;
    }

    .idx-kv_comment {
        top: 11%;
    }

    .idx-kv_theater {
        top: 50%;
    }
    
    .idx-kv_letter{
        top: 37%;
    }
    
/*	------------
    NEWS
 ------------*/
        .news-article_col2{
            display: flex;
            flex-wrap: wrap;	
        }
        .news-article_col2 li{
            width: 400px;
            margin: 16px 16px 16px 0px;
        }
        .news-article_col2 li img{
            display: block;
            height: auto;
            width: 400px;
        }
/*-------------
    MOVIE
--------------*/
    .nejibox_main{
        padding-bottom: 0;
    }
    .trailer-header {
        height: 200px;
        background: url(../img/movie/page_title_bg.png) 50% 50% no-repeat;
    }
    .trailer-header_title {
        position: absolute;
        right: 50%;
        bottom: 0;
        -webkit-transform: translate(50%,50%);
        -ms-transform: translate(50%,50%);
        transform: translate(50%,50%);
        width: 295px;
    }
    .trailer-main {
        width: 96%;
        max-width: 1000px;
        padding-bottom: 75px;
    }
    .trailer_title{
        font-size: 1.68rem;
    }
    .trailer-textArea{
        text-align: center;
    }
/*---------------------
News 小中学生からのコメント
----------------------*/
	#news_200206 .news-article_col2 :nth-child(1) { order: 2;}
	#news_200206 .news-article_col2 :nth-child(2) { order: 1;}
	#news_200206 .news-article_col2 :nth-child(3) { order: 4;}
	#news_200206 .news-article_col2 :nth-child(4) { order: 3;}
}

	

/*-------------
	MOVIE
--------------*/
.trailer-header{
	position:relative
}

.trailer-header::before{
	content:"";
	display: block;
	position: absolute;
}

.trailer-header_title{
	position: absolute;
	right: 50%;
}

.trailer-header_title span{
	display: block;
}


.trailer-main {
	margin-left: auto;
	margin-right: auto;
}

.trailer_videoArea {
	 position: relative;
	 margin: 0 auto;
	 max-width: 920px;
	 width: 100%;
	 padding-top: 56.25%;
}

.trailer_videoArea iframe {
	 position: absolute;
	 top: 0;
	 right: 0;
	 width: 100%;
	 max-width: 920px;
	 height: 100%;
	 max-height: 515px;
}

.trailer-textArea {
	margin-top: 10px;
}

.trailer-info {
	font-size: 0.813em;
}