@charset "UTF-8";
@import url("item.css");
@import url("cast_style.css");

#dataBox{
}

.photoWrap{
	width: 80%;
	margin: 0 auto 20px;
}



.dataWrap{
	width: 96%;
	margin: 0 auto 20px;
	text-align: center;
}

.castNm{
	font-size: 2.2rem;
	margin-bottom: 15px;
}


.castNm .icon-new img,
.castNm .icon-nosmoking img{
	width:10%;
}

.size{
	font-size: 1.8rem;
	text-align: center!important;
	margin-bottom: 20px;
}

.data{
	margin-bottom: 40px;
}


#scheduleItem{
	margin-bottom: 40px;
}

#scheduleItem dl{
    display: -ms-flex;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

#scheduleItem dt,#scheduleItem dd{
	flex-basis: 50%;
	margin-bottom: 8px;
}

#scheduleItem dt{
	background-color: #000;
	color: #fff;
	height: 36px;
	line-height: 36px;
}

.btnBlog a{
	display: block;
	width:auto;
	height: 36px;
	line-height: 36px;
	background-color: rgba(51,51,51,0.2);
	color: #000;
	border-radius: 10px;
}

.ps{
	text-align: center;
}

.boxTxt {
	width: 100%;
	margin: 0 auto;
	padding: 0 20px;
}

.playList {
	margin: 0 auto 20px;
	display: -ms-flex;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.playList li {
	background-color: #000;
	width: auto;
	/*height: 38px;*/
	line-height: 38px;
	color: #fff;
	margin: 1%;
	text-align: center;
	-ms-flex-preferred-size: calc((100% - 4%) / 2);
    flex-basis: calc((100% - 4%) / 2);
}

.heightFix li{
	height:auto!important;
	line-height:1.2!important;
}

.pay li{
	color:#FF9FCB!important;
}

.free li{
	color:#96D7FF!important;
}

.midWrap{
}



.faqList{
	width: 96%;
	margin: 0 auto;
	text-align: center;
}


.faqList dt, .faqList dd {
	width: 100%;
	text-align: left;
	padding: 5px 14px;
}

.faqList dt{
	background-color: #000;
	color: #fff;
	font-weight: bold;
}

.faqList dd{
	margin: 0 0 15px;
}


.reviewList{
	width: 96%;
	margin: 0 auto;
}

.reviewList li{
	border-bottom: 1px solid #CC8AC9;
	padding-bottom: 40px;
	margin-bottom: 40px;
 }

.reviewList li:last-child{
	border-bottom:none;
	margin-bottom: 0;
}

.reviewer{
	font-weight: bold;
	display: block;
	margin-bottom: 14px;
}

.replyTxt{
	color: #9A7D1D;
	margin-top:30px;
}

.frame{
	padding: 20px !important;
	margin: 0 10px!important;
}


.iconTxt,.iconBtn,.iconBtnCenter{
	width: auto;
	height: 38px;
	line-height: 38px;
	text-align: center;
	display: block;
}

.iconBtn,.iconBtnCenter {
    border-radius: 5px;
}

.iconBtnCenter {
	width: 96%;
	margin: 0 auto;
}

.color_1{
	background-color: #CC8AC9;
	color: #fff!important;
}

.color_2{
	background-color: #90258A;;
	color: #fff!important;
}

.iconListBtn{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.iconListBtn span{
	display: block;
	border-radius: 10px;
	text-align: center;
}

.iconListBtn span a{
	color: #fff;
	display: block;
	padding: 5px 0;	
}

.iconListBtn span a:hover{
	opacity: 0.7;	
}

.iconListBtn span.diary,
.iconListBtn span.news{
	width: 48%;
	margin-bottom: 4%;
}

.iconListBtn span.diary{
	background:#B7DBF2;
}	

.iconListBtn span.news{
	background:#F7CBDE;
}

	
.iconListBtn span.review{
	background:#ff0505;
	width: 100%;
}


/*************  add  ***************/
.data .rank,.data .captionTxt{
	width: 100%;
	margin: 0 auto 5px;
}

.profIconList{
    display: -ms-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: space-between;
    -ms-flex-pack: space-between;
    justify-content: space-between;
    width: 40%;
    margin: 0 auto;
}

.profIconList span{
	display: block;
	-ms-flex-preferred-size: calc((100% - 20%) / 2);
    flex-basis: calc((100% - 20%) / 2);
}

.profIconList .icon-new{
	padding-top:20px;
}



.profItemList dl{
	width: 96%;
	margin: 0 auto 2%;
}

.profItemList dl:last-child {
    border-bottom: none;
    margin-bottom: -10px;
}

.profItemList dt {
    background-color: #000;
    color: #fff;
}

.profItemList dt, .profItemList dd {
    width: 100%;
    text-align: left;
    padding: 5px 14px;
}


.diaryList{
	max-height: 50vh;
	overflow-y: auto;
}

.diaryList li{
	margin-bottom: 30px;
}


.diaryTtl{
	margin-bottom: 10px;
}

.diaryPic{
	max-width: 50%;
	margin: 0 auto 10px;
}




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

	#dataBox{
		padding-top: 76px;
		width: 1000px;
		margin: 0 auto 50px;
	}

	.photoWrap{
		width: 400px;
		margin: 0 auto;
		float: left;
	}

	.dataWrap{
		width: 500px;
		float: left;
		padding-top: 0;
		margin-left: 100px;
	}


	#scheduleItem{
		width:320px;
		margin:0 auto;
		clear:both;
	}


	#scheduleItem dt,#scheduleItem dd{
		flex-basis: 160px;
	}

	.btnBlog a{
		width:320px;
		margin:0 auto;
	}

	.boxTxt{
		width: 1000px;
	}

	.playList {
	    width: 1000px;
	    justify-content: flex-start;
	    padding: 0;
	}

	.playList li{
		text-align: center;
		-ms-flex-preferred-size: calc((100% - 4%) / 4);
	    flex-basis: calc((100% - 4%) / 4);
	    margin: 0 0 1%;
	}

	.playList li:not(:nth-child(4n)) {
    	margin-right: 1%;
	}


	.midWrap{
		width: 1040px;
		margin: 0 auto 70px;
	    display: -ms-flex;
	    display: flex;
	    flex-wrap: wrap;
	    justify-content: space-between;
	    align-items: center;
	}

	#ngArea{
		flex-basis: 630px!important;
		width: 630px!important;
	}

	#photoDiary{
		flex-basis: 380px!important;
		width: 380px!important;
	}

	#ngArea .boxTtl,#photoDiary .boxTtl{
		width: auto!important;
	}


	.faqList{
		width: 1000px;
	    display: -ms-flex;
	    display: flex;
	    flex-wrap: wrap;
	    justify-content: space-between;
	    align-items: baseline;
	}

	.faqList th,.faqList td{
		background:none;
		color:#000;
		padding: 14px;
	}


	.faqList th{
		width: 40%;
		border-bottom: 1px solid #000;
		border-right: 1px solid #000;
		vertical-align: middle;
	}

	.faqList td{
		width: 60%;
		border-bottom: 1px solid #000;
		margin: 0;
		text-align:left;
	}

	/*
	.faqList th.last-child,.faqList td:last-child{
		border-bottom: none;
	}
	*/

	.reviewList{
		width: 1040px;
	}


	.replyTxt{
		margin-left: 140px;
	}

	.iconBtn,.iconBtnCenter {
	    max-width: 300px;
	}


	/*************  add  ***************/
	.data .rank,.data .captionTxt{
		width: 100%;
	}

	.data .captionTxt{
		line-height:40px;
		height:40px;
	}


	.profIconList{
	    width: 120px;
	    margin: 0 auto;
	}

	.profIconList span{
		width:48%;
		float:left;
	}

	.profIconList .icon-new{
		padding-top:0px;
	}

	.heartTtl {
	    width: 1000px;
	    margin: 0 auto 10px;
	}



	.profItemList dl{
		width: 1000px;
	}




	.profItemList dl{
		margin: 0 auto 15px;
		border-bottom:1px solid #000;
		padding-bottom: 12px;
	}

	.profItemList dl:last-child {
	    border-bottom: none;
	    margin-bottom: -10px;
	}

	.profItemList dt{
		float: left;
		width: 40%;
		font-weight: bold;
		background: none;
		color: #000;
	}

	.profItemList dt, .profItemList dd {
    padding: 5px 0;
}


	.diaryList{
		width:1000px;
		max-height: 1000px;
		margin:0 auto;
	}

	.diaryList .heartTtl {
    	width: 960px;
	}


	.diaryList li{
		margin:0 10px 50px 0;
	}


	.diaryTtl {
	    margin-bottom: 20px;
	    font-size: 2rem;
	    display: block;
	}




	.diaryPic {
	    margin: 0 0 10px;
	    max-width: 320px;
	}


}