@charset "UTF-8";
/*
 comment.css（ファイル名変更可）
 本サイト各ページ用CSS
*/

body .ntv-wrapper{
background: url(../images/comment/bg.jpg) center top / cover no-repeat fixed;
}

/* comment
========================================== */
.comment-inner{
	margin: 0 auto 50px auto;
}

#comment h2{
	width: 220px;
	height: 0;
	padding-top: 7.85%;/* 77/980*100 */
	display: block;
	text-indent: -9999px;
	background: url(../images/comment/title.png) no-repeat center top;
	margin: 3% auto 5% auto;
}

#comment .comment-section{
	margin: 10% auto 0% auto;
}

#comment .comment-photo{
	width: 20%;
	float: left;
	margin-left: 5%;
}

#comment .comment-txt{
	width: 67%;
	float: left;
	margin: 0 0 0 5%;
}


#comment #comment_01 .comment-photo,
#comment #comment_02 .comment-photo,
#comment #comment_03 .comment-photo{
	width: 32%;
}

#comment #comment_01 .comment-txt,
#comment #comment_02 .comment-txt,
#comment #comment_03 .comment-txt{
	width: 55%;
}

#comment .comment-section:after,
#comment .comment-txt:after{
	content:"";
	display: block;
	clear: both;
}

#comment .comment-img{
	text-indent: -9999px;
	width: 100%;
	padding-top: 235.5%;
	display: block;
	background-size: cover;
}
#comment #comment_01 .comment-img{
	background: url(../images/comment/cast_takahashi.png) no-repeat center top;
	background-size: cover;
}
#comment #comment_02 .comment-img{
	background: url(../images/comment/cast_jinguji.png) no-repeat center top;
	background-size: cover;
}
#comment #comment_03 .comment-img{
	background: url(../images/comment/cast_iwahashi.png) no-repeat center top;
	background-size: cover;
}
#comment #comment_04 .comment-img{
	background: url(../images/comment/cast_morimoto.jpg) no-repeat center top;
	background-size: cover;
	padding-top: 115.5%;
}
#comment #comment_05 .comment-img{
	background: url(../images/comment/cast_nakajima.jpg) no-repeat center top;
	background-size: cover;
	padding-top: 115.5%;
}
#comment #comment_06 .comment-img{
	background: url(../images/comment/cast_horike.jpg) no-repeat center top;
	background-size: cover;
	padding-top: 115.5%;
}
#comment #comment_07 .comment-img{
	background: url(../images/comment/cast_furukawa.jpg) no-repeat center top;
	background-size: cover;
	padding-top: 115.5%;
}
#comment #comment_08 .comment-img{
	background: url(../images/comment/cast_yoshida.jpg) no-repeat center top;
	background-size: cover;
	padding-top: 115.5%;
}

#comment #comment_08{
	margin-bottom: 10%;
}



#comment .comment-txt h3{
	text-indent: -9999px;
	height: auto;
	display: block;
}
#comment #comment_01 h3{
	width: 61.53%; /* 400/650*100 */
	padding-top: 12.46%;/* 81/650*100 */
	background: url(../images/comment/cast_name_takahashi.png) no-repeat left top /contain;
}
#comment #comment_02 h3{
	width: 71.69%; /* 466/650*100 */
	padding-top: 12.15%;
	background: url(../images/comment/cast_name_jinguji.png) no-repeat left top /contain;
}
#comment #comment_03 h3{
	width: 61.69%; /* 401/650*100 */
	padding-top: 12.61%;
	background: url(../images/comment/cast_name_iwahashi.png) no-repeat left top /contain;
}
#comment #comment_04 h3{
	width: 71.69%; /* 466/650*100 */
	padding-top: 12.61%;
	background: url(../images/comment/cast_name_morimoto.png) no-repeat left top /contain;
}
#comment #comment_05 h3{
	width: 61.84%; /* 402/650*100 */
	padding-top: 7.23%;
	background: url(../images/comment/cast_name_nakajima.png) no-repeat left top /contain;
}
#comment #comment_06 h3{
	width: 61.53%; /* 400/650*100 */
	padding-top: 7.23%;
	background: url(../images/comment/cast_name_horike.png) no-repeat left top /contain;
}
#comment #comment_07 h3{
	width: 61.84%; /* 402/650*100 */
	padding-top: 7.07%;
	background: url(../images/comment/cast_name_furukawa.png) no-repeat left top /contain;
}
#comment #comment_08 h3{
	width: 71.69%; /* 466/650*100 */
	padding-top: 7.23%;
	background: url(../images/comment/cast_name_yoshida.png) no-repeat left top /contain;
}

#comment #comment_08 .comment-txt p{
	margin: 0 0 60px 0;
}
#comment .comment-txt p{
	margin: 0 0 30px 0;
}

/* ---------------------------------
 SP用
--------------------------------- */
@media only screen and (max-width: 600px) {

/* comment */

.comment-inner{
        padding: 4.6875% 3.125% 8.25%;
}

#comment .comment-section{
	margin: 20% auto 0% auto;
}
#comment #comment_01{
	margin: 10% auto 0% auto;
}

#comment #comment_01 .comment-photo,
#comment #comment_02 .comment-photo,
#comment #comment_03 .comment-photo{
	width: 60%;
}

#comment #comment_01 .comment-txt,
#comment #comment_02 .comment-txt,
#comment #comment_03 .comment-txt{
	width: 95%;
}


#comment .comment-photo{
	float: none;
	width: 50%;
	margin: 0 auto 10% auto;
	}

#comment h3{
	margin: 0 auto;
}

#comment .comment-txt h3{
}

#comment .comment-txt{
	width: 95%;
	float: none;
	margin: 0 auto;
}

}

/* ---------------------------------
 PC用
--------------------------------- */
@media screen and (min-width: 993px) {
#comment h3{
	margin-bottom: 20px;
}
}


/* ---------------------------------
 SP 〜 tablet　（〜992px）
--------------------------------- */
@media screen and (max-width: 992px) {
  body .ntv-wrapper{
    background: none;
  }
  body .ntv-wrapper::before {
    content: "";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: url(../images/comment/bg.jpg) center/cover no-repeat;
    -webkit-background-size: cover;
	z-index: -1;
  }
}

/* ---------------------------------
 iPad用
--------------------------------- */

  body.iPad .ntv-wrapper{
    background: none;
  }
  body.iPad .ntv-wrapper::before {
    content: "";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: url(../images/comment/bg.jpg) center/cover no-repeat;
    -webkit-background-size: cover;
	z-index: -1;
  }

/* ---------------------------------
 tablet FONT用
--------------------------------- */
@media screen and (min-width : 601px){
}