@charset "UTF-8";
/* CSS Document */

.castWrap {
    width: 96%;
    max-width: 960px;
    margin: auto;
    text-align: center;
    font-size: 1em;
    line-height: 1.8em;
    padding: 0;
}
.castWrap a {
    color: #fff;
    font-weight: 500;
}
ul.castList {
    font-size: 0;
    width: 100%;
}
ul.castList li {
    display: inline-block;
    width: 23.5%;
    max-width: 225px;
    margin: 0.75%;
    font-size: 16px;
    line-height: 1.8em;
    vertical-align: top;
}
/*.castArea_s {
    width: 23.5%;
    margin: auto;
    max-width: 225px;
}
*/
.charaName {
    font-size: 1.125em;
    line-height: 1.8em;
    border-bottom: 1px solid #807104;
    font-weight: 700;
}
.castName {
    font-size: 1.5em;
    line-height: 1.5em;
}
.castName_s {
    font-size: 1em;
    line-height: 1.8em;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 300;
}
.phArea {
    width: 100%;
}
#cast_ph01-1 {
    background: url("../img/cast/ph01_s.jpg");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: contain;
    padding-top: 100%;
}
#cast_ph02-1 {
    background: url("../img/cast/ph02_s.jpg");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: contain;
    padding-top: 100%;
}
#cast_ph03-1 {
    background: url("../img/cast/ph03_s.jpg");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: contain;
    padding-top: 100%;
}
#cast_ph04-1 {
    background: url("../img/cast/ph04_s.jpg");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: contain;
    padding-top: 100%;
}
#cast_ph05-1 {
    background: url("../img/cast/ph05_s.jpg");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: contain;
    padding-top: 100%;
}
#cast_ph06-1 {
    background: url("../img/cast/ph06_s.jpg");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: contain;
    padding-top: 100%;
}
#cast_ph07-1 {
    background: url("../img/cast/ph07_s.jpg");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: contain;
    padding-top: 100%;
}
#cast_ph08-1 {
    background: url("../img/cast/ph08_s.jpg");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: contain;
    padding-top: 100%;
}
#cast_ph09-1 {
    background: url("../img/cast/ph09_s.jpg");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: contain;
    padding-top: 100%;
}
.cast_modal {
    display: none;
}
ul.cmntArea {
    font-size: 0;
}
ul.cmntArea li {
    display: inline-block;
    vertical-align: top;
}
.cmnt_ph {
    width: 55%;
 margin-right: 5%;
}
.cmntWrap {
    width: 40%;
    font-size: 16px;
    line-height: 1.8em
}
.cmntWrap .castName-2 {
    font-size: 1.875em;
    line-height: 1.5em;
    font-weight: 700;
}
.cmntWrap .castName-2 small {
    font-size: 0.6em;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 300;
}
.cmntWrap .tit {
    margin-top: 1em;
    font-size: 1.25em;
    line-height: 1.8em;
    color: #807104;
    font-weight: 700;
}

#ph01 {
    width: 100%;
    background: url("../img/cast/ph_01.jpg");
    padding-top: 133%;
    background-position: left top;
    background-repeat: no-repeat;
    background-size: contain;
}
#ph02 {
    width: 100%;
    background: url("../img/cast/ph_02.jpg");
    padding-top: 133%;
    background-position: left top;
    background-repeat: no-repeat;
    background-size: contain;
}
#ph03 {
    width: 100%;
    background: url("../img/cast/ph_03.jpg");
    padding-top: 133%;
    background-position: left top;
    background-repeat: no-repeat;
    background-size: contain;
}
#ph04 {
    width: 100%;
    background: url("../img/cast/ph_04.jpg");
    padding-top: 133%;
    background-position: left top;
    background-repeat: no-repeat;
    background-size: contain;
}
#ph05 {
    width: 100%;
    background: url("../img/cast/ph_05.jpg");
    padding-top: 133%;
    background-position: left top;
    background-repeat: no-repeat;
    background-size: contain;
}
#ph06 {
    width: 100%;
    background: url("../img/cast/ph_06.jpg");
    padding-top: 133%;
    background-position: left top;
    background-repeat: no-repeat;
    background-size: contain;
}
#ph07 {
    width: 100%;
    background: url("../img/cast/ph_07.jpg");
    padding-top: 133%;
    background-position: left top;
    background-repeat: no-repeat;
    background-size: contain;
}
#ph08 {
    width: 100%;
    background: url("../img/cast/ph_08.jpg");
    padding-top: 133%;
    background-position: left top;
    background-repeat: no-repeat;
    background-size: contain;
}
#ph09 {
    width: 100%;
    background: url("../img/cast/ph_09.jpg");
    padding-top: 133%;
    background-position: left top;
    background-repeat: no-repeat;
    background-size: contain;
}

/*modaal cssカスタマイズ*/
.modaal-container {
    width: 100%;
    max-width: 880px !important;
    margin: auto;
    background: #000 !important;
    border: 2px solid #807104 !important;
    color: #fff !important;
    display: none;
}
.modaal-close:focus:after,.modaal-close:focus:before,.modaal-close:hover:after,.modaal-close:hover:before{background:#807104 !important;}


/* デザインC(スマートフォン) ***************************************/
@media screen and (max-width : 768px) {
/* スマートフォン用レイアウト に収めるデザインはこの中に記述 */
    
ul.castList li {
    display: inline-block;
    width: 47%;
    margin: 1.5%;
    font-size: 16px;
    line-height: 1.8em;
    vertical-align: top;
}
.charaName {
/*    font-size: 1.125em;*/
        font-size: 1em;
    line-height: 1.8em;
    border-bottom: 1px solid #807104;
    font-weight: 700;
}
.castName {
/*    font-size: 1.5em;*/
        font-size: 1.25em;
    line-height: 1.5em;
}
.castName_s {
    font-size: 0.8em;
    line-height: 1.8em;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 300;
}

ul.cmntArea li {
    display: list-item;
    vertical-align: top;
}
.cmnt_ph {
    width: 100%;
 margin-right: 0%;
}
.cmntWrap {
    width: 100%;
    font-size: 12px;
    line-height: 1.8em
}
.cmntWrap .castName-2 {
    font-size: 1.875em;
    line-height: 1.5em;
    font-weight: 700;
    text-align: center;
}
.charaName {
/*    font-size: 1.125em;*/
        font-size: 1em;
    line-height: 1.8em;
    border-bottom: 1px solid #807104;
    font-weight: 700;
        text-align: center;
}
.cmntWrap .castName-2 small {
    font-size: 0.6em;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 300;
}
.cmntWrap .tit {
    margin-top: 1em;
    font-size: 1.25em;
    line-height: 1.8em;
    color: #807104;
    font-weight: 700;
}

}