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

.change-aria{
	width: 96%;
	margin: 0 auto;
}


.d-box-body{
	width: 100%;
	/*-webkit-transform: skewY(10deg);
	-moz-transform: skewY(10deg);
	-o-transform: skewY(10deg);*/
}

#chart-01{
	background-color: #000000;
}

#chart-02{
	background-color: #000000;
}

#chart.d-area {
	margin: 30px auto 60px;
}


.chart-inner .d-box-body .chart-overview{
	color: #ffffff;

}

.chart-inner h2.d-box-title{
	margin-left: auto;
	margin-right: auto;
	width: 96%;
	max-width: 960px;
	height: auto;
	max-height: 192px;
	padding-top: calc(192 / 1000 * 100%);
	background-image: url("../images/cast-chart/title.png");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: bottom center;
	overflow: hidden;
	font-size: 0;
	position: relative;
	z-index: 100;
}

.cast-aria h2.cast-title{
	margin-left: 5%;
	margin-right: auto;
	width: 96%;
	max-width: 145px;
	height: auto;
	max-height: 66px;
	padding-top: calc(66 / 1000 * 100%);
	background-image: url("../images/cast-chart/title-cast.png");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: left top;
	overflow: hidden;
	font-size: 0;
	position: relative;
	z-index: 100;
}


.tab-group{
	width: 96%;
	margin: 0 auto -11.1%;
    display: flex;
    justify-content: space-around;
	position: relative;
	top: calc(111 / 1000 * 100%);

}
.tab{
    flex-grow: 1;
	font-size: 0;
    cursor:pointer;
	position: relative;
	z-index: 1000;
}

#btn01{
	width: 100%;
	max-width: 409px;
	height: auto;
	max-height: 114px;
	padding-top: calc(114 / 1000 * 100%);
	background-image: url("../images/cast-chart/btn-abc-off.png");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: bottom center;
	overflow: hidden;

}

#btn02{
	width: 100%;
	max-width: 409px;
	height: auto;
	max-height: 114px;
	padding-top: calc(114 / 1000 * 100%);
	background-image: url("../images/cast-chart/btn-hulu-off.png");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: bottom center;
	overflow: hidden;

}

#btn01.tab.is-active{
	background-image: url("../images/cast-chart/btn-abc.png");
}

#btn02.tab.is-active{
	background-image: url("../images/cast-chart/btn-hulu.png");
}


.change-aria{
}

.change-aria:after {
	content: "";
	display: block;
	margin-top: -1%;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	max-width: 960px;
	height: auto;
	max-height: 154px;
	padding-top: calc(154 / 960 * 100%);
	background-image: url("../images/cast-chart/bg-bottom.png");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: bottom center;
	overflow: hidden;
	font-size: 0;
	
}


.change-aria .d-box-body{
    display:none;
}
.tab.is-active{
 /*   background:#F00;
    color:#FFF;*/
    transition: all 0.2s ease-out;
}
.change-aria .d-box-body.is-show{
    display:block;
}


/* モーダル */
.chart-inner {
    position: relative;
    padding: 0 0 80px 0;
}

.modal {
    display: none;
    padding: 150px 20px 20px;
    height: 100%;
    width: 100%;
    z-index: 10000;
    top: 0;
    left: 0;
    position: fixed;
    overflow-y: auto;
}

div.modal-width {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
}
.chart-overview-box{
    padding: 20px 0;
}

.chart-overview-text,
.cast-overview-text{
    position: relative;
}

.chart-overview-text a,
.cast-overview-text a{
	cursor: pointer;
}

#chart-01 .chart-overview-img {
    background-image: url("../images/cast-chart/chart01.png");
    background-repeat: no-repeat;
    max-width: 100%;
    padding-top: calc(1371 / 960 * 100%);
    background-size: contain;
    background-position: center;
}

#chart-02 .chart-overview-img {
    background-image: url("../images/cast-chart/chart02.png");
    background-repeat: no-repeat;
    max-width: 100%;
    padding-top: calc(1685 / 960 * 100%);
    background-size: contain;
    background-position: center;
}



.chart-profile {
    background-color: #044a63;
    padding-top: 50px;
    height: 100%;
    width: 100%;
}
.chart-profile-list{
    position: relative;
    z-index: 1;
}
.chart-profile-list::before {
    content: '';
    background-image: url(../images/background/horizontal_line.png);
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
}
.chart-box-size{
    margin: 0 5%;
}
.chart-profile-box1 {
    background-color: #000;
    max-width: 1000px;
    margin: 30px auto;
	padding: 50px 0;
    position: relative;
	color: #ffffff;
	min-height: 370px;
}

.chart-profile-box2 {
    background-color: #000;
    max-width: 1000px;
    margin: 30px auto;
	padding: 50px 0;
    position: relative;
	color: #ffffff;
	min-height: 370px;
}
.chart-profile-box2::after {
    content: "";
    display: block;
    clear: both;
}



/* 人 */
.chart-img {
    padding-top: 30%;
    padding-bottom: 50px;
    max-width: 250px;
    width: 25%;
	height: auto;
    float: left;
    margin-right: 2%;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: left top;
}

.himura {background-image: url(../images/cast-chart/himura.png);}
.himura02 {background-image: url(../images/cast-chart/himura02.png);}

.arisu {background-image: url(../images/cast-chart/arisu.png);}
.arisu02 {background-image: url(../images/cast-chart/arisu02.png);}
.kijima {background-image: url(../images/cast-chart/kijima.png);}
.yasoda {background-image: url(../images/cast-chart/yasoda.png);}
.shibuya {background-image: url(../images/cast-chart/shibuya.png);}
.doumoto {background-image: url(../images/cast-chart/doumoto.png);}
.hanai {background-image: url(../images/cast-chart/hanai.png);}
.inaba {background-image: url(../images/cast-chart/inaba.png);}
.inaba02 {background-image: url(../images/cast-chart/inaba02.png);}

.katagiri {background-image: url(../images/cast-chart/katagiri.png);}
.katagiri02 {background-image: url(../images/cast-chart/katagiri02.png);}

.sokabe {background-image: url(../images/cast-chart/sokabe.png);}
.shikata{background-image: url(../images/cast-chart/shikata.png);}
.unabara{background-image: url(../images/cast-chart/unabara.png);}
.moroboshi{background-image: url(../images/cast-chart/moroboshi.png);}
.shinomiya{background-image: url(../images/cast-chart/shinomiya.png);}
.momo{background-image: url(../images/cast-chart/momo.png);}
.dan{background-image: url(../images/cast-chart/dan.png);}

.nishida{background-image: url(../images/cast-chart/nishida.png);}
.yuge{background-image: url(../images/cast-chart/yuge.png);}
.yahagi{background-image: url(../images/cast-chart/yahagi.png);}
.ezawa{background-image: url("../images/cast-chart/ezawa.png");}
.mitsuishi-ryouhei{background-image: url(../images/cast-chart/mitsuishi-ryouhei.png);}
.mitsuishi-shizuyo{background-image: url(../images/cast-chart/mitsuishi-shizuyo.png);}
.mitsuishi-yumi{background-image: url(../images/cast-chart/mitsuishi-yumi.png);}
.shirahuse{background-image: url(../images/cast-chart/shirahuse.png);}
.watase{background-image: url(../images/cast-chart/watase.png);}
.okita{background-image: url(../images/cast-chart/okita.png);}


/* profileボックス内 */

.chart-right {
	float: left;
	width: 73%;
	box-sizing: border-box;
}
.modal-width:after {
	content: "";
	display: block;
	clear: both;
}

.chart-name,
.chart-name-subtitle,
.chart-title {
	font-family: Georgia, "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
	transform: rotate(0.05deg);
	font-weight: bold;
}

.chart-name {
	display: none;
	/*   font-size: 32px;
    border-bottom: solid 1px #000;
    margin-right: 24px;
    overflow: hidden;
    padding-top: 15px;
    font-weight: bold;
*/}

.chart-name-sub {
    font-size: 24px;
}

.chart-name-subtitle {
    color: #FFFFFF;
    font-size: 21px;
    font-weight: bold;
}

.chart-title {
    font-size: 20px;
    font-weight: bold;
    margin: 20px 0;
}

.chart-profile-text-main {
    font-size: 18px;
    padding: 0 20px 20px 20px;
    line-height: 1.4;
    margin-top: 10px;
	font-family: Georgia, "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
	transform: rotate(0.05deg);
}

.chart-profile-text-main.comment-text {
    font-size: 16px;
    line-height: 1.8;
    margin-top: 0;
}

.chart-profile-text {
    padding: 10px 10px 10px 0;
    font-size: 18px;
    line-height: 1.4;
    margin-top: 10px;
}

.chart-overview-text a{
    position: absolute;
    border: 0;
    display: block;
}

.cast-overview-text a{
    position: absolute;
    border: 0;
    display: block;
}

#chart-01 .himura-modal {
    top: 34.13%; /* 468(位置) / 1400(要素の高さpadding込み) *100 */
    left: 26.66%; /* 250(位置) / 960(要素の幅padding込み) *100 */
    width: 22.08%;
    padding-top: calc(280 / 960 * 100%);
}


.himura-comment-modal,
.arisu-comment-modal,
.hanai-comment-modal,
.inaba-comment-modal,
.shirahuse-comment-modal,
.ezawa-comment-modal{
    background-image: url("../images/cast-chart/btn-comment.png");
	background-repeat: no-repeat;
	background-size: contain;
    padding-top: calc(26 / 960 * 100%);
	width: 8.125%;
    left: 62.5%;
}


#chart-01 .himura-comment-modal {
    top: 0%;
}

#chart-02 .himura-comment-modal {
    top: 0%;
}

#chart-01 .arisu-modal {
    top: 34.13%;
    left: 53.85%;
    width: 22.08%;
    padding-top: calc(280 / 960 * 100%);
}

#chart-01 .arisu-comment-modal {
	top: 8.084%;
}

#chart-02 .arisu-comment-modal {
    top: 8.084%;
}

#chart-01 .hanai-comment-modal {
	top: 68.71%;
    left: 64.5%;
}

#chart-01 .inaba-comment-modal {
	top: 93.53%;
}

#chart-02 .inaba-comment-modal {
    top: 93.86%;
}

#chart-02 .shirahuse-comment-modal {
    top: 49.50%;
}

#chart-02 .ezawa-comment-modal {
    top: 54.78%;
}



#chart-01 .kijima-modal {
    top: 12.98%;
    left: 3.95%;
    width: 17.91%;
    padding-top: calc(220 / 960 * 100%);
}

#chart-01 .yasoda-modal {
    top: 71.78%;
    left: 62.5%;
    width: 15.20%;
    padding-top: calc(190 / 960 * 100%);
}

#chart-01 .shibuya-modal {
    top: 16.07%;
    left: 23.85%;
    width: 13.02%;
    padding-top: calc(160 / 960 * 100%);
}

#chart-01 .doumoto-modal {
    top: 16.07%;
    left: 37.29%;
    width: 13.02%;
    padding-top: calc(160 / 960 * 100%);
}

#chart-01 .hanai-modal {
    top: 46.85%;
    left: 79.79%;
    width: 19.06%;
    padding-top: calc(222 / 960 * 100%);
}

#chart-01 .inaba-modal {
    top: 52.71%;
    left: 1.04%;
    width: 21.04%;
    padding-top: calc(218 / 960 * 100%);

}

#chart-01 .katagiri-modal {
    top: 31.64%;
    left: 81.66%;
    width: 15.93%;
    padding-top: calc(194 / 960 * 100%);

}

#chart-01 .sokabe-modal {
    top: 71.78%;
    left: 46.56%;
    width: 15.20%;
    padding-top: calc(190 / 960 * 100%);
}

#chart-01 .shikata-modal {
    top: 71.78%;
    left: 14.79%;
    width: 15.20%;
    padding-top: calc(190 / 960 * 100%);
}

#chart-01 .unabara-modal {
    top: 71.78%;
    left: 30.72%;
    width: 15.20%;
    padding-top: calc(190 / 960 * 100%);
}

#chart-01 .moroboshi-modal {
    top: 34%;
    left: 1.56%;
	width: 19.37%;
    padding-top: calc(218 / 960 * 100%);
}

#chart-01 .shinomiya-modal {
    top: 12.35%;
    left: 57.91%;
	width: 18.22%;
    padding-top: calc(215 / 960 * 100%);
}

#chart-01 .momo-modal {
    top: 17.42%;
    left: 77.60%;
	width: 10.72%;
    padding-top: calc(126 / 960 * 100%);
}

#chart-01 .dan-modal {
    top: 63.96%;
	left: 82.29%;
    width: 15.20%;
	padding-top: calc(190 / 960 * 100%);
}


/* hulu相関図 */

#chart-02 .himura-modal {
    top: 27.65%; /* 466(位置) / 1685(要素の高さpadding込み) *100 */
    left: 26.66%; /* 250(位置) / 960(要素の幅padding込み) *100 */
    width: 22.08%;
    padding-top: calc(280 / 960 * 100%);
}

#chart-02 .arisu-modal {
    top: 27.65%;
    left: 53.85%;
    width: 22.08%;
    padding-top: calc(280 / 960 * 100%);
}

#chart-02 .kijima-modal {
    top: 10.56%;
    left: 3.95%;
    width: 17.91%;
    padding-top: calc(220 / 960 * 100%);
}

#chart-02 .yasoda-modal {
    top: 50.26%;
    left: 41.87%;
    width: 15.20%;
    padding-top: calc(190 / 960 * 100%);
}

#chart-02 .shibuya-modal {
    top: 13.05%;
    left: 23.85%;
    width: 13.02%;
    padding-top: calc(160 / 960 * 100%);
}

#chart-02 .doumoto-modal {
    top: 13.05%;
    left: 37.29%;
    width: 13.02%;
    padding-top: calc(160 / 960 * 100%);
}

.ezawa-modal {
    top: 37.80%;
    left: 80%;
    width: 18.33%;
    padding-top: calc(218 / 960 * 100%);
}

#chart-02 .inaba-modal {
    top: 30.38%;
    left: 1.04%;
    width: 21.04%;
    padding-top: calc(218 / 960 * 100%);

}

#chart-02 .katagiri-modal {
    top: 50.44%;
    left: 62.91%;
    width: 15.93%;
    padding-top: calc(190 / 960 * 100%);

}

#chart-02 .sokabe-modal {
    top: 50.26%;
    left: 23.95%;
    width: 15.20%;
    padding-top: calc(190 / 960 * 100%);
}

.nishida-modal {
    top: 50.26%;
    left: 6.25%;
    width: 15.20%;
    padding-top: calc(190 / 960 * 100%);
}

.yuge-modal {
    top: 75.07%;
    left: 76.97%;
    width: 15.20%;
    padding-top: calc(190 / 960 * 100%);
}

.yahagi-modal {
    top: 61.95%;
    left: 76.97%;
    width: 15.20%;
    padding-top: calc(190 / 960 * 100%);
}

.mitsuishi-ryouhei-modal {
    top: 65.28%;
    left: 6.25%;
    width: 15.20%;
    padding-top: calc(190 / 960 * 100%);
}

.mitsuishi-shizuyo-modal {
    top: 65.28%;
    left: 23.95%;
    width: 15.20%;
    padding-top: calc(190 / 960 * 100%);
}

.mitsuishi-yumi-modal {
    top: 65.28%;
    left: 41.87%;
	width: 15.20%;
    padding-top: calc(190 / 960 * 100%);
}

.shirahuse-modal {
    top: 24.74%;
    left: 80%;
    width: 18.33%;
    padding-top: calc(218 / 960 * 100%);
}

#chart-02 .shinomiya-modal {
    top: 10.20%;
    left: 57.91%;
	width: 18.22%;
    padding-top: calc(215 / 960 * 100%);
}

#chart-02 .momo-modal {
    top: 14.24%;
    left: 77.60%;
	width: 10.72%;
    padding-top: calc(126 / 960 * 100%);
}

#chart-02 .watase-modal {
    top: 78.04%;
    left: 14.58%;
    width: 14.16%;
    padding-top: calc(180 / 960 * 100%);
}

#chart-02 .okita-modal {
    top: 78.04%;
    left: 35.72%;
    width: 14.16%;
    padding-top: calc(180 / 960 * 100%);
}




/*  モーダルの閉じボタン  */
.close-btn {
    color: #fff;
    line-height: 1.6;
    font-size: 24px;
    top: 0;
    right: 0;
    position: absolute;
    transform: translateY(-100%);
    padding-right: 1.3em;
}
.close-btn i {
    display: block;
    width: 1em;
    height: 1em;
    border: solid 1px #fff;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}
.close-btn i:before,
.close-btn i:after {
    content: "";
    display: block;
    width: 70%;
    height: 1px;
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
}
.close-btn i:after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* モーダルの背景 */
.modal::before {
    content: '';
    background-color: rgba(0, 0, 0, 0.8);
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -1;
}



/* cast */
.cast-aria {
	padding-bottom: 8%;
}


.cast-aria ul{
	font-size: 0;
	margin-top: 10%;
	margin-left: auto;
	margin-right: auto;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center top;
	overflow: hidden;

}

#cast01 ul{
	width: 100%;
	max-width: 543px;
	height: auto;
	max-height: 1237px;
	padding-top: calc(1237 / 1000 * 100%);
	background-image: url("../images/cast-chart/cast01.png");

}

#cast02 ul{
	width: 100%;
	max-width: 543px;
	height: auto;
	max-height: 1305px;
	padding-top: calc(1305 / 1000 * 100%);
	background-image: url("../images/cast-chart/cast02.png");

}



/* ---------------------------------
 SP（〜600px）
--------------------------------- */
@media only screen and (max-width: 600px) {
#chart.d-area {
	margin: 0 auto 60px;
}

.chart-area {
	background-size: auto, 500px auto, auto;
}
.chart-inner {
	padding: 0;
}
.chart-box-size{
	margin: 0 ;
}

.chart-profile-box1,
.chart-profile-box2 {
	padding: 30px 0;
	margin: 0 0 30px;
}

.chart-img {
	margin: 0 auto;
	float: none;
	width: 180px;
	padding-top: calc(279 / 220 * 180px);
	background-size: contain;
}

.chart-right {
	float: none;
	width: 96%;
	margin: 0 auto;
}



.chart-name {
	font-size: 28px;
	margin-right: 0;
}

.chart-name-sub {
	font-size: 15px;
}

.chart-name-subtitle {
	font-weight: bold;
	font-size: 14px;
}

.chart-title {
	margin: 20px 0 15px;
	font-size: 16px;
}

.chart-profile-text-main {
	font-size: 14px;
	line-height: 1.6;
	padding: 0 0 15px 0;
	margin-top: 0;
}

.chart-profile-text {
	font-size: 14px;
	margin-top: 15px;
	line-height: 1.6;
	padding: 0;
}


/* spの調整 */
.modal {
	padding-top: 60px;
}

.chart-overview-img__add{
	margin: 10px auto 0;
}

.himura-comment-modal,
.arisu-comment-modal,
.hanai-comment-modal,
.inaba-comment-modal,
.shirahuse-comment-modal,
.ezawa-comment-modal{
	width: 13%;
    left: 64.5%;
    padding-top: calc(26 / 600 * 100%)!important;
}


#chart-01 .hanai-comment-modal {
	width: 13%;
    left: 74.5%;
    padding-top: calc(26 / 600 * 100%)!important;
}

#cast01 ul{
	width: 100%;
	max-width: 543px;
	height: auto;
	max-height: 1237px;
	padding-top: calc(1237 / 600 * 100%);
	background-image: url("../images/cast-chart/cast01.png");

}

#cast02 ul{
	width: 100%;
	max-width: 543px;
	height: auto;
	max-height: 1305px;
	padding-top: calc(1305 / 600 * 100%);
	background-image: url("../images/cast-chart/cast02.png");

}
	
}

/* ------------------------------------------------------------------
 SP 〜 tablet（〜992px）
------------------------------------------------------------------ */
@media screen and (max-width: 992px) {
}

/* ---------------------------------
 PC（993px〜）
--------------------------------- */
@media screen and (min-width: 993px) {
}