/* --------------------------- */
/* 共通 */

#contents #pan_area{
 margin-bottom: 0;
}
 
#contents #character_index {
 margin-top: 0;
 padding-bottom: 80px;
}

/* --------------------------- */
/* character_mv */

#contents #character_index .character_mv{
 background-image: url("../images/character_main_bg.png");
 background-position: center;
 background-repeat: repeat;
 background-color: #c9e6ff;
 padding: 40px 0;
}

#contents #character_index .character_mv .mv_wrap{
 width: 100%;
 margin: 0 auto;
}

#contents #character_index .character_mv .mv_img img{
 width: 100%;
 display: block;
}

#contents #character_index .character_mv .mv_about{
 background-color: rgba(255,255,255,0.5);
 padding: 30px 20px;
 /*font-size: 20px;*/
 font-size: 15px;
 line-height: 1.6;
 color: #186db6;
 text-align: center;
 margin: 0 12px;
}

#contents #character_index .character_mv .mv_about h2{
 width: auto;
 margin: 0 auto;
}

#contents #character_index .character_mv .mv_about h2 img{
 display: block;
 width: 100%;
}

#contents #character_index .character_mv .mv_about .text {
 margin-top: 15px;
}


/* --------------------------- */
/* main */

/* .page_title */
#contents #character_index #page_title {
 padding-top: 44px;
 margin-bottom: 40px;
 background: url(../../common/images/title_bg.gif) repeat-x left bottom;
 position: relative;
}

#contents #character_index #page_title .heading-article {
 display: inline-block;
 padding: 8px 0 13px;
 /*font-size: 24px;*/
 font-size: 20px;
 line-height: 1;
 font-weight: bold;
 border-bottom: solid 2px #0068BD;
}

/* .char_list */
#contents #character_index .char_list {
}

#contents #character_index .char_list ul{
 /*
 width: 900px;
 margin: 0 auto;
 */
}

#contents #character_index .char_list ul li{
 /*
 display: flex;
 align-items: center;
 justify-content: space-between;
 */
 margin-top: 70px;
}

#contents #character_index .char_list ul li:first-of-type{
 margin-top: 0px;
}

#contents #character_index .char_list ul li:nth-child(even) .char_img{
 order: 2;
}

#contents #character_index .char_list ul li:nth-child(even) .char_profile{
 order: 1;
}

#contents #character_index .char_list ul li .char_img{
 width: 100%;
 margin: 0 auto;
 display: flex;
 flex-direction: column;
}

#contents #character_index .char_list ul li .char_img .pic_wrap{
 width: 80%;
 margin: 0 auto;
 order: 2;
}

#contents #character_index .char_list ul li .char_img .pic{
 position: relative;
 width: 100%;
}

#contents #character_index .char_list ul li .char_img .pic img{
 width: 100%;
 display: block;
}

#contents #character_index .char_list ul li .char_img .pic::after{
 content: "";
 display: block;
 position: absolute;
 /*left: 0;*/
 top: 0;
 width: 100%;
 height: 100%;
 background-color: #FFFFFF;
}

#contents #character_index .char_list ul li .char_img .name{
 background-color: #EEEEEE;
 border-radius: 5em;
 padding: 0.8em 0.5em;
 /*font-size: 18px;*/
 font-size: 14px;
 line-height: 1.4;
 font-weight:600;
 text-align: center;
 margin-top: 20px;
 /*width: 18em;*/
 width: 90%;
 margin: 0 auto 30px;
 order: 1;
 box-sizing: border-box;
}

#contents #character_index .char_list ul li .char_profile{
 width: 100%;
 margin: 0 auto;
 border-radius: 20px;
 background-color: #EEEEEE;
 overflow: hidden;
 margin-top: 30px;
}

#contents #character_index .char_list ul li .char_profile h4{
 background-color: #CCCCCC;
 /*font-size: 20px;*/
 font-size: 16px;
 line-height: 1.4;
 font-weight: bold;
 color: #FFFFFF;
 padding:1em 0.5em 0.8em 0.5em;
 text-align: center;
}

#contents #character_index .char_list ul li .char_profile .data{
 display: table;
 width: 100%;
 box-sizing: border-box;
 padding: 15px 20px 15px 40px;
}

#contents #character_index .char_list ul li .char_profile .data dl{
 display:table-row;
}

#contents #character_index .char_list ul li .char_profile .data dl dt,
#contents #character_index .char_list ul li .char_profile .data dl dd{
 display:table-cell;
 /*display: block;*/
 padding: 0.4em 0;
 font-weight:600;
 vertical-align: top;
 /*font-size: 18px;*/
 font-size: 13px;
 line-height: 1.4;
 font-feature-settings: "palt";
}

#contents #character_index .char_list ul li .char_profile .data dl dt{
 margin-top: 10px;
 color: #999999;
 width: 9em;
 position: relative;
 padding-left: 0;
}

#contents #character_index .char_list ul li .char_profile .data dl:first-of-type dt{
 margin-top: 0;
}

#contents #character_index .char_list ul li .char_profile .data dl dt::before{
 content: "";
 display: block;
 width: 8px;
 height: 3px;
 background-color: #999999;
 position: absolute;
 left: -15px;
 top: 1em;
}

#contents #character_index .char_list ul li .char_profile .data dl dd{
 margin-top: 0.2em;
}

/*---------------------
.tasuke */

#contents #character_index .char_list ul li.tasuke  .char_img .pic::after{
 background-image: url("../images/character_tasuke_silhouette.png");
 background-repeat: no-repeat;
 background-size: auto 100%;
 background-position: 0 0;
}

#contents #character_index .char_list ul li.tasuke .char_img .name{
 color: #186db6;
 background-color: #d9eeff;
}

#contents #character_index .char_list ul li.tasuke .char_profile h4{
 background-color: #186db6;
}

#contents #character_index .char_list ul li.tasuke .char_profile .data{
 background-color: #d9eeff;
}

#contents #character_index .char_list ul li.tasuke .char_profile .data dl dt{
 color: #186db6;
}

#contents #character_index .char_list ul li.tasuke .char_profile .data dl dt::before{
 background-color: #186db6;
}

/*---------------------
.ohana */

#contents #character_index .char_list ul li.ohana  .char_img .pic::after{
 background-image: url("../images/character_ohana_silhouette.png");
 background-repeat: no-repeat;
 background-size: auto 100%;
 background-position: 0 0;
}

#contents #character_index .char_list ul li.ohana .char_img .name{
 color: #de3434;
 background-color: #ffe4e4;
}

#contents #character_index .char_list ul li.ohana .char_profile h4{
 background-color: #de3434;
}

#contents #character_index .char_list ul li.ohana .char_profile .data{
 background-color: #ffe4e4;
}

#contents #character_index .char_list ul li.ohana .char_profile .data dl dt{
 color: #de3434;
}

#contents #character_index .char_list ul li.ohana .char_profile .data dl dt::before{
 background-color: #de3434;
}

/*---------------------
.hikozaemon */

#contents #character_index .char_list ul li.hikozaemon  .char_img .pic::after{
 background-image: url("../images/character_hikozaemon_silhouette.png");
 background-repeat: no-repeat;
 background-size: auto 100%;
 background-position: 0 0;
}

#contents #character_index .char_list ul li.hikozaemon .char_img .name{
 color: #75a135;
 background-color: #eaf7d7;
}

#contents #character_index .char_list ul li.hikozaemon .char_profile h4{
 background-color: #75a135;
}

#contents #character_index .char_list ul li.hikozaemon .char_profile .data{
 background-color: #eaf7d7;
}

#contents #character_index .char_list ul li.hikozaemon .char_profile .data dl dt{
 color: #75a135;
}

#contents #character_index .char_list ul li.hikozaemon .char_profile .data dl dt::before{
 background-color: #75a135;
}


/*---------------------
.banta */

#contents #character_index .char_list ul li.banta  .char_img .pic::after{
 background-image: url("../images/character_banta_silhouette.png");
 background-repeat: no-repeat;
 background-size: auto 100%;
 background-position: 0 0;
}

#contents #character_index .char_list ul li.banta .char_img .name{
 color: #df8300;
 background-color: #fcefdd;
}

#contents #character_index .char_list ul li.banta .char_profile h4{
 background-color: #df8300;
}

#contents #character_index .char_list ul li.banta .char_profile .data{
 background-color: #fcefdd;
}

#contents #character_index .char_list ul li.banta .char_profile .data dl dt{
 color: #df8300;
}

#contents #character_index .char_list ul li.banta .char_profile .data dl dt::before{
 background-color: #df8300;
}

/*---------------*/
/* シルエットアニメ */

#contents #character_index .js-anime.silhouette {
 position: relative;
}
#contents #character_index .js-anime.silhouette::after {
 position: absolute;
 display: block;
 content: "";
 width: 0 !important;
 height: 100%;
 top: 0;
 left: 0;
 z-index: 2;
 background-position: left 0;
 pointer-events: none;
}
#contents #character_index .js-anime.silhouette.animeStart::after {
 -webkit-transition: width 0.6s 0s ease;
 -moz-transition: width 0.6s 0s ease;
 transition: width 0.6s 0s ease;
 width: 100% !important;
}
#contents #character_index .js-anime.silhouette.showStep2::after {
 -webkit-transition: width 0.4s 0s ease, opacity 1s 0s ease;
 -moz-transition: width 0.4s 0s ease, opacity 1s 0s ease;
 transition: width 0.4s 0s ease, opacity 1s 0s ease;
 left: auto !important;
 right: 0 !important;
 width: 0 !important;
 background-position: right 0 !important;
 opacity: 0;
}

#contents #character_index .js-anime.silhouette img {
 position: relative;
 z-index: 1;
 opacity: 0;
}
#contents #character_index .js-anime.silhouette.showStep2 img {
  opacity: 1;
}