/* ==========================================================

title : 歴キャラ
scope : 歴キャラ/地方

memo ： 2019/04/01 TCI福岡_oomori 歴キャラ/地方／新規作成

last modify : 2021/02/04 TCI福岡_sakaguchi バナー共通化対応

2020/06/26 TCI_eguchi インデント修正
2020/01/24 TCI_chaya 歴キャラ/地方／レイアウト修正

========================================================== */

/* ------------------------------------ */
/* ▼ general */
/* ------------------------------------ */
.wrap.wcm {
  margin-bottom: 70px;
}

.section_outer {
  padding-top: 60px;
}

.section_outer:first-of-type {
  padding-top: 0px;
}

.section_inner {
  margin: 0 auto;
  width: 770px;
}

.clearfix_pc::after {
  content: "";
  display: block;
  clear: both;
}

.box_seo {
  margin-top: 50px;
}

@media (max-width: 767px) {
  .wrap img {
    vertical-align: bottom;
  }
  .wrap.wcm {
    margin-bottom: 40px;
  }
  .section_inner {
    padding: 0 10px;
    width: auto;
  }
  .charalst .section_inner {
    width: auto;
  }
  .section_outer {
    padding-top: 50px;
  }
  .clearfix_pc::after {
    display: none;
  }
  .anchor_cmn .bg_anchor {
    vertical-align: top;
  }
  .anchor_cmn .bg_anchor span {
    background: url(../image/bg-anchor-btn-area.png) no-repeat 0 center / cover;
    display: block;
    height: 100%;
    line-height: 20px;
    padding: 14px 15px;
  }
  .box_seo {
    margin-top: 50px;
  }
}

/* ------------------------------------ */
/* ▼ MV */
/* ------------------------------------ */
.banner_h1 .txth1 {
  color: #000;
  font-size: 34px;
  font-weight: 600;
  left: 31.5%;
  letter-spacing: .05em;
  line-height: 1.3;
  top: 35%;
}

@media (max-width:768px) {
  .banner_h1 .txth1 {
    font-size: 26px;
  }
}

.banner_h1 .txth1_area {
  background-color: #5c4c33;
  border-radius: 30px;
  color: #fff;
  display: block;
  font-size: 28px;
  padding: .35em 2.15em;
  position: absolute;
  top: 58%;
}
.banner_h1 .txth1_area.type01 {
  left: 14%;
}
.banner_h1 .txth1_area.type02 {
  left: 16%;
}
.banner_h1 .txth1_area.type03 {
  left: 20%;
}
.banner_h1 .txth1_area span {
  position: relative;
}
.banner_h1 .txth1_area span::before,
.banner_h1 .txth1_area span::after {
  background: url(../image/area/ico-main-area.png) no-repeat 0 0;
  content: "";
  display: block;
  height: 20px;
  position: absolute;
  top: calc(50% - 10px);
  width: 28px;
}
.banner_h1 .txth1_area span::before {
  left: -35px;
}
.banner_h1 .txth1_area span::after {
  right: -35px;
}
.banner_h1_column {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.banner_h1_column .left_img {
  width: 63%;
}
.banner_h1_column .right_img {
  width: 37%;
}
.banner_h1 .link_btn01_wrap {
  margin: 0;
  position: absolute;
  left: 33%;
  top: 77.5%;
}
.banner_h1 .link_btn01_text {
  padding: 8px 24px 9px 12px;
  text-align: left;
}
.banner_h1 .link_btn01_text::after {
  right: 7px;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .banner_h1 .txth1 {
    top: 36%;
  }
  .banner_h1 .txth1_area {
    padding: .45em 2.15em .25em;
  }
  .banner_h1 .txth1_area span::before,
  .banner_h1 .txth1_area span::after {
    top: 20%;
  }
}

@media screen and (min-width: 970px) {
  .break_tab {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .banner_h1 .txth1 {
    display: block;
    font-size: 4.7vw;
    left: 28.5%;
    line-height: 1;
    top: 42%;
    width: 100vw;
  }
  .banner_h1 .txth1 span {
    font-size: 4.2vw;
  }
  .banner_h1 .txth1 span.cmn_h1_sitetop_name {
    font-size: 60%;
  }
  .banner_h1_column .left_img {
    width: 54.56852%;
  }
  .banner_h1_column .right_img {
    width: 45.43148%;
  }
  .banner_h1 .txth1_area {
    border-radius: 1em;
    font-size: 3.75vw;
    padding: .3em 1em;
    top: 72%;
  }
  .banner_h1 .txth1_area.type01 {
    left: 10%;
  }
  .banner_h1 .txth1_area.type02 {
    left: 13%;
  }
  .banner_h1 .txth1_area.type03 {
    left: 17%;
  }
  .banner_h1 .txth1_area span::before,
  .banner_h1 .txth1_area span::after {
    background: none;
  }
}

/* ------------------------------------ */
/* ▼ anchor */
/* ------------------------------------ */
.anchor_cmn {
  margin: 45px auto 30px;
  width: 670px;
}
.anchor_cmn.col3-2-2 ul li:last-child,
.anchor_cmn.col3-2-2 ul li:nth-last-of-type(3) {
  margin-right: 10px;
}
.anchor_cmn.col3-2-2 ul li:nth-last-of-type(2),
.anchor_cmn.col3-2-2 ul li:nth-last-of-type(4) {
  margin-left: 10px;
}

@media (max-width: 767px) {
  .anchor_cmn {
    margin: 1.5em auto 1em;
    padding: 0 5px;
    width: auto;
  }
  .anchor_cmn.col3-2-2 ul li:last-child,
  .anchor_cmn.col3-2-2 ul li:nth-last-of-type(2),
  .anchor_cmn.col3-2-2 ul li:nth-last-of-type(3),
  .anchor_cmn.col3-2-2 ul li:nth-last-of-type(4) {
    margin: -7px -3px 10px;
  }
}

/* ------------------------------------ */
/* ▼ title */
/* ------------------------------------ */
.title_h2cmn {
  margin-bottom: 20px;
}

@media (max-width: 767px) {
  .title_h2cmn {
    margin: 0 10px 20px;
  }
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .title_h2cmn >span {
    padding: 17px 76px 12px; /* IE11で崩れるため base.css上書き*/
  }
}


/* ------------------------------------ */
/* ▼ button */
/* ------------------------------------ */

.link_btn01_wrap {
  margin: 25px auto 0;
  max-width: 330px;
}

.link_btn01 {
  background-color: #c92121;
  border: solid 1px #991c1c;
  display: block;
  position: relative;
  transition: opacity .3s;
  width: 100%;
}

.link_btn01:hover {
  opacity: .6;
}

.link_btn01::before,
.link_btn01::after {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  position: absolute;
}

.link_btn01::before {
  top: 0;
  left: 0;
  background: url(../image/bg-btn01.png) no-repeat 0 0;
}

.link_btn01::after {
  top: 0;
  right: 0;
  background: url(../image/bg-btn02.png) no-repeat 0 0;
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

.link_btn01_inner::before,
.link_btn01_inner::after {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  position: absolute;
}

.link_btn01_inner::before {
  bottom: 0;
  left: 0;
  background: url(../image/bg-btn01.png) no-repeat 0 0;
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

.link_btn01_inner::after {
  bottom: 0;
  right: 0;
  background: url(../image/bg-btn02.png) no-repeat 0 0;
}

.link_btn01_text {
  border: solid 1px #cb6868;
  color: #fff;
  display: block;
  font-size: 17px;
  letter-spacing: 0;
  line-height: 1.1;
  margin: 2px 3px;
  padding: 8px 36px 9px 12px;
  position: relative;
  font-feature-settings: "pkna";
  text-align: center;
}

.link_btn01_text_s {
  font-size: 16px;
  padding: 3px 15px;
}

.link_btn01_text::after {
  border-color: #fff transparent transparent transparent;
  border-style: solid;
  border-width: 8px 5px 0 5px;
  content: "";
  display: block;
  height: 0;
  position: absolute;
  right: 15px;
  top: calc(50% - 4px);
  width: 0;
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

.link_btn01_text.link_btn01_text_s::after {
  right: 6px;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .banner_h1 .link_btn01_text,
  .link_btn01_text {
    padding: 11px 24px 6px 12px;
  }
}

@media (max-width: 767px) {
  .link_btn01_text {
    font-size: 13px;
    padding: 8px calc(5% + 15px) 8px calc(5% + 13px);
  }
  .link_btn01_text::after {
    border-width: 8px 5px 0 5px;
    top: calc(50% - 4px);
    right: 5%;
  }
}

/* ------------------------------------ */
/* ▼ section */
/* ------------------------------------ */
.charalst_section {
  margin: 25px auto 0;
}
.charalst_section_inner {
  background: url(../image/bg-contents03.png) no-repeat center bottom, url(../image/bg-contents01.png) repeat 0 0;
  padding: 30px 30px 45px 30px;
}

@media (max-width: 767px) {
  .charalst_section {
    margin-top: 1em;
  }
  .charalst_section_inner {
    background-size: 100% auto, contain;
    margin: 1em auto 0;
    padding: 1em 1em 2em;
    width: auto;
  }
}

/* ------------------------------------ */
/* ▼ charalst_list */
/* ------------------------------------ */

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

.charalst_list_img {
  width: 200px;
}

.charalst_list_img img {
  background: #fff;
  display: block;
  width: 100%;
}

.charalst_list_img .img_copyright {
  display: block;
  font-size: 14px;
  letter-spacing: .06em;
  line-height: 1.3;
  margin: .5em 0 0;
  text-align: center;
}

.charalst_list_text {
  width: 67.6%;
}
.chara_name {
  border-bottom: 4px double #d7c0a0;
}
.chara_name .title_h3 {
  border-left: 6px solid #9f7943;
  font-size: 24px;
  font-feature-settings: "pkna";
  font-weight: 600;
  margin-bottom: 2px;
  padding: 5px 10px 5px 15px;
  text-align: left;
}

.title_h4 {
  color: #b5191a;
  font-size: 20px;
  font-weight: 600;
  padding: 0 0 0 33px;
}
.chara_info .title_h4 {
  background: url(../image/area/ico-spec.png) no-repeat left center;
}
.chara_profile .title_h4 {
  background: url(../image/area/ico-profile.png) no-repeat left center;
}

.chara_info,
.chara_profile {
  margin: 20px 0 0;
}

.chara_info + .chara_profile {
  margin: 25px 0 0;
}

.chara_info_lst {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 5px 0 0;
}
.chara_info_lst dt {
  letter-spacing: normal;
  margin: 5px 0 0;
  padding: 0 0 0 34px;
  position: relative;
  width: 9.5em;
}
.chara_info_lst dd {
  margin: 5px 0 0;
  width: calc(100% - 9.5em);
}

.chara_info_lst dt::before {
  background-color: #b5191a;
  border-radius: 50%;
  content: "";
  display: block;
  height: 8px;
  position: absolute;
  left: .5em;
  top: calc(.5em - 2px);
  width: 8px;
}
.chara_info_lst dt.ind {
  letter-spacing: 1em;
}

.chara_profile .chara_proflie_text {
  line-height: 1.45;
  margin: 10px 0 0;
  padding-left: 33px;
}

.link_btn01_outer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin: 25px auto 0;
  width: 670px;
}
.link_btn01_outer.no_column {
  margin: 35px auto 0;
  width: 325px;
}

.link_btn01_outer .link_btn01_wrap {
  display: flex;
  margin: 10px 0 0;
  width: 325px;
}

.link_btn01_outer .link_btn01 {
  display: flex;
  width: 100%;
}

.link_btn01_outer .link_btn01_inner {
  display: flex;
  width: 100%;
}

.link_btn01_outer .link_btn01_text {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.link_btn01_outer.no_column + .link_btn01_outer {
  margin: 10px auto 0;
}


@media (max-width: 767px) {
  .chara_name .title_h3 {
    font-size: 19px;
  }
  .title_h4 {
    font-size: 17px;
  }
  .charalst_list_img .img_copyright {
    font-size: 12px;
  }
  .charalst_list_text {
    width: calc(100% - 200px - 1em);
  }
  .chara_info_lst dt {
    font-size: 15px;
  }
  .chara_info_lst dd {
    font-size: 15px;
  }
  .chara_info_lst dt br.pc {
    display: block !important;
  }
  .chara_proflie_text {
    font-size: 15px;
  }
  .link_btn01_outer {
    width: auto;
  }
  .link_btn01_outer.no_column .link_btn01_wrap {
    width: 100%;
  }
  .link_btn01_outer .link_btn01_wrap {
    width: 49%;
    margin: 10px auto 0;
  }
}

@media (max-width: 480px) {
  .charalst_list_img_wrap {
    display: block;
  }
  .charalst_list_img {
    margin: 0 auto;
    width: 100%;
  }
  .charalst_list_img img {
    display: block;
    margin: 0 auto;
    width: 50%;
  }
  .charalst_list_text {
    margin: 1em 0 0;
    width: 100%;
  }
  .chara_info_lst {
    display: block;
  }
  .chara_info_lst dt {
    margin: .6em 0 0;
    width: 100%;
  }
  .chara_info_lst dd {
    border-bottom: 1px dashed #d7c0a0;
    margin: .3em 0 0;
    padding: 0 0 .6em 34px;
    width: 100%;
  }
  .chara_info_lst dd:last-of-type {
    border-bottom: none;
  }
  .chara_info_lst dt.ind {
    letter-spacing: normal;
  }
  .chara_info_lst dt br.pc {
    display: none !important;
  }
  .chara_info + .chara_profile {
    margin-top: 20px;
  }
  .chara_profile .chara_proflie_text {
    margin-top: .6em;
    padding-left: 0;
  }
  .link_btn01_outer {
    display: block;
  }
  .link_btn01_outer.no_column {
    margin-top: 25px;
    width: auto;
  }
  .link_btn01_outer .link_btn01_wrap {
    width: auto;
  }
  .link_btn01_wrap + .link_btn01_wrap {
    margin: 10px 0 0;
  }
  .link_btn01_outer .link_btn01_wrap + .link_btn01_wrap {
    margin: 10px auto 0;
  }
}

/* ------------------------------------ */
/* ▼ link btn 共通 */
/* ------------------------------------ */
.link_btn01_outer .cmn_link_btn {
  display: flex;
  width: 100%;
}

.link_btn01_outer .cmn_link_btn_inner {
  display: flex;
  width: 100%;
}

.link_btn01_outer .cmn_link_btn_text {
  font-size: 17px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

@media (max-width: 767px) {
  .link_btn01_outer .cmn_link_btn_text {
    font-size: 13px;
  }
}

/* Youtubeサムネイル調整_茶谷_200124 */
.link_video_outer {
  max-width: 670px;
  margin: 30px auto 0;
}
.link_video_outer .cmn_item_movie {
  background: none;
}
.link_video_outer .cmn_box_item_movie.col01 .cmn_item_movie {
  width: 385px;
}
.link_video_outer .cmn_box_item_movie .cmn_item_movie_thum::after {
  width: 80px;
  height: 80px;
}
.post_movie_caption {
  max-width: 383.99px;
  width: 80%;
  margin: 5px auto 0;
  font-size: 1.6rem;
}
.content_banner figure {
  max-width: 500px;
  margin: 20px auto 0;
  font-size: 1.6rem;
}

/* ------------------------------------ */
/* ▼ TCI福岡_sakaguchi バナー共通化対応 */
/* ------------------------------------ */
@media (max-width: 767px) {
  .link_video_outer .cmn_bnr_area.col01.col01_bnr_01 {
    max-width: 500px;
    padding: 0;
  }
}