@charset "utf-8";
/* CSS INFORMATION -====================================================
File name : cast.css
Description : CAST¥Ú©`¥¸CSS
===================================================================== */

/* =====================================================================
*    #header
* =================================================================== */

/* =====================================================================
*    #main
* =================================================================== */

/* .chart
---------------------------------------------------------- */
.chart {
    background: url(../images/bg_chart.jpg) repeat center top;
    background-size: 43.75% auto;
}

.chart .inner {
    width: 87.5%;
    max-width: 560px;
    background-color: #fff;
}

.chart .ttl {
	width: 78.5715%;
	padding-top: 14.2858%;
	margin: auto;
}

.chart .chart_image {
	width: 92.8572%;
	padding-bottom: 17.8572%;
	margin: 10.7143% auto auto;
}

@media screen and (min-width:640px){
	.chart {
	    background: url(../images/bg_chart.jpg) repeat center top;
    	background-size: 280px auto;
	}
}

@media screen and (min-width:700px){
	.chart {
    	background: url(../images/bg_chart.jpg) repeat center top;
    	background-size: 21.875% auto;
	}

	.chart .inner {
		width: 95.3125%;
		max-width: 1220px;
	}

	.chart .ttl {
		width: 36.0656%;
		padding-top: 4.9181%;
	}

	.chart .chart_image {
		width: 81.9673%;
		padding-bottom: 8.1968%;
		margin: 4.0984% auto auto;
	}
}

@media screen and (min-width:1280px){
	.chart {
    	background: url(../images/bg_chart.jpg) repeat center top;
    	background-size: 280px auto;
	}
}

/* .cast
---------------------------------------------------------- */
.cast {
	position: relative;
	padding-bottom: 17.1875%;
	overflow: hidden;
}

.cast .ttl {
	width: 68.75%;
	padding-top: 15.625%;
	margin: auto;
}

.cast .inner {
	width: 81.25%;
	max-width: 520px;
	padding-bottom: 14.0625%;
	margin: auto;
}

.cast .photo {
	width: 96.1539%;
	box-sizing: border-box;
	padding-top: 7.6924%;
	padding-left: 15.3847%;
	margin: auto;
}

.cast .detail {
	width: 88.4616%;
	font-family: "Sawarabi Mincho";
	font-size: 1.4rem;
	line-height: 1.6em;
	margin-top: 11.5385%;
}

.clearfix:after {
    content:" ";
    display:block;
    clear:both;
}
@media screen and (min-width:640px){
	.cast {
		padding-bottom: 110px;
	}

	.cast .ttl {
		width: 440px;
		padding-top: 100px;
	}

	.cast .inner {
		padding-bottom: 90px;
	}
}

@media screen and (min-width:700px){
	.cast .ttl {
		width: 34.375%;
		max-width: 440px;
		padding-top: 7.8125%;
	}

	.cast .inner {
		width: 95.3125%;
		max-width: 1220px;
		position: relative;
		overflow: hidden;
		padding-bottom: 10.15625%;
	}

	.cast .photo {
		width: 42.623%;
		padding-left: 8.1968%;
		padding-top: 2.4591%;
		float: left;
	}

	.cast .detail {
		width: 41.8033%;
		font-size: 1.9rem;
		line-height: 1.8em;
		padding-top: 8.1968%;
		margin-top: 0;
	}

}

@media screen and (min-width:1280px){
	.cast .ttl {
		padding-top: 100px;
	}

	.cast .inner {
		padding-bottom: 30px;
	}
}

/* .bg_cast_01 */
.cast .bg_cast_01 {
	position: relative;
	overflow: hidden;
	background-color: #faf7ee;
}

.cast .bg_cast_01::before {
	content: "";
	width: 100%;
	height: 100%;
	display: block;
	background: url(../images/bg_cast_01.jpg) repeat center top;
	background-size: 15.625% auto;
	position: absolute;
	top: 0;
	right: 50%;
	margin-right: 40.625%;
}

.cast .bg_cast_01::after {
	content: "";
	width: 3.125%;
	height: 100%;
	display: block;
	background: url(../images/bg_cast_01_line.jpg) no-repeat center top #faf7ee;
	background-size: 100% auto;
	position: absolute;
	top: 0;
	right: 50%;
	margin-right: 40.625%;
}

.cast .bg_cast_01 .detail {
	margin-left: auto;
	margin-right: 0;
}

@media screen and (min-width:640px){
	.cast .bg_cast_01::before {
		background: url(../images/bg_cast_01.jpg) repeat center top;
		background-size: 100px auto;
		margin-right: 260px;
	}

	.cast .bg_cast_01::after {
		width: 20px;
		margin-right: 260px;
	}
}

@media screen and (min-width:700px){
	.cast .bg_cast_01::before {
		background: url(../images/bg_cast_01.jpg) repeat center top;
		background-size: 7.8125% auto;
		margin-right: 46.09375%;
	}

	.cast .bg_cast_01::after {
		width: 1.5625%;
		max-width: 20px;
		margin-right: 46.09375%;
	}

	.cast .bg_cast_01 .detail {
		padding-bottom: 8.7378%%;
		margin-right: 8.1968%;
	}
}


@media screen and (min-width:1280px){
	.cast .bg_cast_01::before {
		background: url(../images/bg_cast_01.jpg) repeat center top;
		background-size: 100px auto;
		margin-right: 590px;
	}

	.cast .bg_cast_01::after {
		margin-right: 590px;
	}
}

/* .bg_cast_02 */
.cast .bg_cast_02 {
	position: relative;
	background-color: #fff;
	overflow: hidden;
}

.cast .bg_cast_02::before {
	content: "";
	width: 100%;
	height: 100%;
	display: block;
	background: url(../images/bg_cast_02.jpg) repeat center top;
	background-size: 43.75% auto;
	position: absolute;
	top: 0;
	left: 50%;
	margin-left: 40.625%;
}

.cast .bg_cast_02::after {
	content: "";
	width: 3.125%;
	height: 100%;
	display: block;
	background: url(../images/bg_cast_02_line.jpg) no-repeat center top #fff;
	background-size: 100% auto;
	position: absolute;
	top: 0;
	left: 50%;
	margin-left: 40.625%;
}

@media screen and (min-width:640px){
	.cast .bg_cast_02::before {
		background: url(../images/bg_cast_02.jpg) repeat center top;
		background-size: 280px auto;
		margin-left: 260px;
	}

	.cast .bg_cast_02::after {
		width: 20px;
		margin-left: 260px;
	}
}

@media screen and (min-width:700px){
	.cast .bg_cast_02::before {
		background: url(../images/bg_cast_02.jpg) repeat center top;
		background-size: 21.875% auto;
		margin-left: 46.09375%;
	}

	.cast .bg_cast_02::after {
		width: 1.5625%;
		max-width: 20px;
		margin-left: 46.09375%;
	}

	.cast .bg_cast_02 .photo {
		float: right;
		padding-right: 7.623%;
		padding-left: 0;
	}

	.cast .bg_cast_02 .detail {
		padding-bottom: 2.9509%;
		margin-left: 8.1968%;
	}

	.cast .bg_cast_02 .comment_ttl {
		margin-left: 8.1968%;
	}

	.cast .bg_cast_02 .comment_text {
		margin-left: 8.1968%;
	}
}

@media screen and (min-width:1280px){
	.cast .bg_cast_02::before {
		background: url(../images/bg_cast_02.jpg) repeat center top;
		background-size: 280px auto;
		margin-left: 590px;
	}

	.cast .bg_cast_02::after {
		margin-left: 590px;
	}
}

/* .box */
.cast .wrap {
	position: relative;
	background-color: #faf7ee;
}
.cast .wrap::before {
	content: "";
    width: 100%;
    height: 100%;
    display: block;
    background: url(../images/bg_cast_02.jpg) repeat center top;
    background-size: 43.75% auto;
    position: absolute;
    top: 0;
    right: 50%;
    margin-right: 43.75%;
}
.cast .wrap::after {
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    background: url(../images/bg_cast_01.jpg) repeat center top;
    background-size: 15.625% auto;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: 43.75%;
}
.cast .wrap .box {
	position: relative;
	overflow: hidden;
}
.cast .wrap .box .photo {
	width: 81%;
	padding-left: 0;
}
.cast .wrap .box .detail {
	margin-left: 9%;
}
@media screen and (min-width:700px){
	.cast .wrap::before {
		background: url(../images/bg_cast_02.jpg) repeat center top;
		background-size: 21.875% auto;
    	margin-right: 47.65625%;
	}
	.cast .wrap::after {
		background: url(../images/bg_cast_01.jpg) repeat center top;
	    background-size: 7.8125% auto;
	    margin-left: 47.65625%;
	}
	.cast .wrap .box {
		margin-bottom: -90px;
	}
	.cast .wrap .box:last-child {
		margin-bottom: 0px;
	}	
	.cast .wrap .box .photo {
		width: 42.623%;
   		padding-left: 8.1968%;
	}
	.cast .wrap .box.right .photo {
		float: right;
		padding-right: 7.623%;
		padding-left: 0;
	}
	.cast .wrap .box.right .detail {
		padding-bottom: 2.9509%;
		margin-left: 8.1968%;
		text-align: right;
	}
	.cast .wrap .box .detail {
		margin-right: 8.1968%;
    	padding-top: 15.1968%;
	}
	.cast .wrap .box .detail {
		margin-left: auto;
	}
}
@media screen and (min-width:1280px){
	.cast .wrap::before {
		background: url(../images/bg_cast_02.jpg) repeat center top;
	    background-size: 280px auto;
	    margin-right: 610px;
	}
	.cast .wrap::after {
		background: url(../images/bg_cast_01.jpg) repeat center top;
	    background-size: 100px auto;
    	margin-left: 610px;
	}
}
/* .comment */
.cast .comment {
	width: 81.25%;
	margin: auto;
}

.cast .comment_ttl {
	font-family: "Sawarabi Mincho";
	font-size: 1.4rem;
	line-height: 1.4286em;
	font-weight: bold;
	position: relative;
	box-sizing: border-box;
	padding-left: 5.7693%;
	margin-top: 15.625%;
}

.cast .comment_ttl::before {
	content: "";
	width: 1.3044%;
	height: 0;
	padding-top: 8.6957%;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
}

.cast .amami .comment_ttl::before {
	background-color: #d4a831;
}

.cast .sasaki .comment_ttl::before {
	background-color: #638c0b;
}

.cast .comment_text {
	font-family: "Sawarabi Mincho";
	font-size: 1.2rem;
	line-height: 1.6em;
	box-sizing: border-box;
	padding-left: 5.7693%;
	margin-top: 5.7693%;
}

.cast .comment_text dt,
.cast .comment_text dd:not(:last-child) {
	padding-bottom: 1em;
}

.cast .amami .comment_text dt {
	color: #d4a831;
}

.cast .sasaki .comment_text dt {
	color: #638c0b;
}

@media screen and (min-width:700px){
	.cast .comment {
		width: 83.6066%;
		max-width: 1020px;
	}

	.cast .comment_ttl {
		font-size: 1.8rem;
		line-height: 1.6667em;
		padding-left: 1.9608%;
		margin-top: 7.8432%;
	}

	.cast .comment_ttl::before {
		width: 0.2942%;
		padding-top: 2.9412%;
	}

	.cast .comment_text {
		font-size: 1.6rem;
		line-height: 1.875em;
		padding-left: 1.9608%;
		margin-top: 1.9608%;
	}
}