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

title : 刀剣ワールド／刀剣キャラ相関図
scope : 刀剣ワールド／刀剣キャラ相関図

memo：

last modify : 2022/05/26 tanaka 刀剣キャラ相関図／新規作成


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

.box_seo {
  margin-top: 80px;
}

@media (max-width: 767px) {
  .box_seo {
    margin-top: 40px;
  }
}

/* ------------------------------------ */
/* ▼ MV */
/* ------------------------------------ */
.banner_h1 .txth1 {
  font-size: 36px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 58px;
  text-shadow: 2px 2px 3px #000;
  top: 52%;
}

.desc {
  margin: 28px auto 28px;
  max-width: 800px;
  padding: 0 10px;
  text-align: justify;
}

@media (max-width: 767px) {
  .banner_h1 .txth1 {
    display: block;
    font-size: 5vw;
    line-height: 1.4;
    width: 100vw;
  }
  .desc {
    font-size: 16px;
    margin: 0 auto 28px;
  }
}

/* ------------------------------------ */
/* ▼ anchor */
/* ------------------------------------ */
.anchor_cmn {
  margin-bottom: 20px;
  max-width: 680px;
}

.anchor_cmn ul {
  align-content: stretch;
  align-items: stretch;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 auto;
  max-width: 680px;
}

.anchor_cmn ul li {
  display: block;
  margin: 0 7.5px 15px;
  padding: 0;
  width: calc(33% - 15px);
}

.anchor_cmn ul li a {
  align-content: center;
  align-items: center;
  display: flex;
  font-size: 17px;
  flex-wrap: wrap;
  height: 100%;
  justify-content: center;
}
.anchor_cmn ul li a[href="#anchor01"] {
  background: url(../image/bg-ttl01.png);
  background-position: -239px -3px;
}
.anchor_cmn ul li a[href="#anchor02"] {
  background: url(../image/bg-ttl02.png);
  background-position: -239px -3px;
}
.anchor_cmn ul li a[href="#anchor03"] {
  background: url(../image/bg-ttl03.png);
  background-position: -239px -3px;
}
.anchor_cmn ul li a[href="#anchor04"] {
  background: url(../image/bg-ttl04.png);
  background-position: -239px -3px;
}
.anchor_cmn ul li a[href="#anchor05"] {
  background: url(../image/bg-ttl05.png);
  background-position: -239px -3px;
}
.anchor_cmn ul li a[href="#anchor06"] {
  background: url(../image/bg-ttl06.png);
  background-position: -239px -3px;
}
.anchor_cmn ul li a.disable {
  background: url(../image/bg-ttl00.png);
  background-position: -239px -3px;
}

.anchor_cmn ul li a span::after {
  border-width: 6px 4px 0 4px;
  top: calc(50% - 4px);
}

.anchor_cmn ul li a::before {
  content: none;
}

.anchor_cmn ul li a::after {
  content: none;
}

.anchor_cmn ul li a span {
  display: block;
  width: 100%;
}

.anchor_cmn ul li.active a,
.anchor_cmn ul li a:hover {
  opacity: .6;
}

.anchor_cmn ul li a.disable {
  pointer-events:none;
}

@media (max-width: 767px) {
  .anchor_cmn {
    margin-bottom: 30px;
    padding: 0 30px;
  }
  .anchor_cmn ul li {
    padding: 0 5px;
    width: 100%;
  }
  .anchor_cmn ul li:nth-of-type(n+2) {
    margin-top: 5px;
  }
  .anchor_cmn ul li a {
    /* min-height: 68px; */
    font-size: 20px;
  }
}

/* ------------------------------------ */
/* ▼ section */
/* ------------------------------------ */

.character-corr-chart_section {
  margin-top: 60px;
}

.character-corr-chart_section#anchor01{
  margin-top: 45px;
}

.character-corr-chart_section + .character-corr-chart_section {
  margin-top: 80px;
}

@media (max-width: 767px) {
  .character-corr-chart_section,
  .character-corr-chart_section#anchor01 {
    margin-top: 30px;
  }
  .character-corr-chart_section + .character-corr-chart_section {
    margin-top: 40px;
  }
  .section_inner {
    padding: 0 15px;
  }
}

/* ------------------------------------ */
/* ▼ title */
/* ------------------------------------ */
.title_h2cmn {
  background-color: #F7E2E3;
  border: 2px solid #c3beb4;
  margin-bottom: 30px;
  max-width: 900px;
}
.title_h2cmn::after,
.title_h2cmn::before {
  content: none;
}
.title_h2cmn > span{
  background-image: url(../image/bg-ttl-deco01-l.png), url(../image/bg-ttl-deco01-r.png);
  background-repeat: no-repeat, no-repeat;
  background-position: left top, right -1px bottom;
  background-size: 14.3% auto, 14.3% auto;
  padding: 11px 76px 11px;
}
#anchor01 .title_h2cmn > span {
  background-color: #F7E2E3;
  background-image: url(../image/bg-ttl-deco01-l.png), url(../image/bg-ttl-deco01-r.png);
}
#anchor02 .title_h2cmn > span {
  background-color: #DBE8EB;
  background-image: url(../image/bg-ttl-deco02-l.png), url(../image/bg-ttl-deco02-r.png);
}
#anchor03 .title_h2cmn > span {
  background-color: #f5f1e5;
  background-image: url(../image/bg-ttl-deco03-l.png), url(../image/bg-ttl-deco03-r.png);
}
#anchor04 .title_h2cmn > span {
  background-color: #e4ece5;
  background-image: url(../image/bg-ttl-deco04-l.png), url(../image/bg-ttl-deco04-r.png);
}
#anchor05 .title_h2cmn > span {
  background-color: #e8edf2;
  background-image: url(../image/bg-ttl-deco05-l.png), url(../image/bg-ttl-deco05-r.png);
}
#anchor06 .title_h2cmn > span {
  background-color: #faeee5;
  background-image: url(../image/bg-ttl-deco06-l.png), url(../image/bg-ttl-deco06-r.png);
}
.title_h2cmn > span > span {
  padding: 0px 50px 0;
  vertical-align: middle;
}
.title_h2cmn .font_b{
  background: #FAF8F2;
  border: #000 2px solid;
  font-size: .9em;
  padding: 4px 6px;
  position: absolute;
  top:8px;
  left: 11%;
}
.title_h2cmn > span > span.font_b::before,
.title_h2cmn > span > span.font_b::after{
  display: none;
}
#anchor01 .font_b{
  border-image: url(../image/bg-ttl01.png) 30 / 3px;
  color: #AD545D;
  text-shadow: #AD545D 1px 0 0;
}
#anchor02 .font_b{
  border-image: url(../image/bg-ttl02.png) 30 / 3px;
  color: #3C7D8D;
  text-shadow: #3C7D8D 1px 0 0;
}
#anchor03 .font_b{
  border-image: url(../image/bg-ttl03.png) 30 / 3px;
  color: #7F753C;
  text-shadow: #7F753C 1px 0 0;
  left: 8.5%;
}
#anchor04 .font_b{
  border-image: url(../image/bg-ttl04.png) 30 / 3px;
  color: #49825A;
  text-shadow: #49825A 1px 0 0;
}
#anchor05 .font_b{
  border-image: url(../image/bg-ttl05.png) 30 / 3px;
  color: #486384;
  text-shadow: #486384 1px 0 0;
  left: 5%;
}
#anchor06 .font_b{
  border-image: url(../image/bg-ttl06.png) 30 / 3px;
  color: #A76031;
  text-shadow: #A76031 1px 0 0;
}
@media (max-width: 900px) {
  .title_h2cmn .font_b,
  #anchor03 .font_b,
  #anchor05 .font_b{
    left: 3%;
  }
}
@media (max-width: 767px) {
  .title_h2cmn {
    margin-bottom: 20px;
  }
  .title_h2cmn > span {
    padding: 8px 8% 8px;
  }
  .title_h2cmn > span > span {
    padding: 0px 10% 0;
  }
  .title_h2cmn .font_b{
    display: block;
    position: static;
    max-width: 50%;
    margin: 0 auto -10px;
  }
}

.ttl_copy {
  max-width: 740px;
  margin: 0 auto 33px;
}
.ttl_copy .copy_read {
  letter-spacing: .06em;
}

@media (max-width: 767px) {
  .ttl_copy {
    margin-bottom: 20px;
  } 
}

/* ------------------------------------ */
/* ▼ 相関図コンテンツ */
/* ------------------------------------ */
.bg_col01{
  background: #FFF8DE;
  border: 2px #E5DDBF solid;
  max-width: 872px;
  padding-bottom: 40px;
}
/* bnr */
.bg_col02{
  background: #fff;
  max-width: 700px;
  position: relative;
  border-left: 1px solid #D0C7A7;
  border-right: 1px solid #D0C7A7;
}
.bg_col02::before{
  position: absolute;
  left: -1px;
  top: -35px;
  content: "";
  background: url(../image/bg_col02_top.png) no-repeat;
  background-size: contain;
  width: 700px;
  height: 35px;
}
.bg_col02::after{
  position: absolute;
  left: -1px;
  bottom: -35px;
  content: "";
  background: url(../image/bg_col02_bottom.png) no-repeat;
  background-size: contain;
  width: 700px;
  height: 35px;
}
.bg_col02 .cmn_bnr_area{
  padding: 0;
}
@media (min-width: 768px) {
  .cmn_bnr_cap {
    font-size: 1.45rem;
  }
  .cmn_bnr_area.col02.cmn_bnr_w_300 {
    max-width: 639.5px;
  }
}
@media (max-width: 900px) {
  .bg_col02{
    margin-top: 30px;
    border: 1px solid #D0C7A7;
  }
  .bg_col02::before,
  .bg_col02::after{
    display: none;
  }
}
@media (max-width: 767px) {
  .bg_col02,
  .bg_col02.long{
    background: #fff;
    border: 1px solid #D0C7A7;
    max-width: 90%;
    padding: 0 25px 20px;
    margin: 30px auto;
  }
}

.character-corr-chart_img_wrap {
  margin: 35px auto 0;
  max-width: 800px;
  overflow-x: auto;

}
.character-corr-chart_img img {
  max-width: none;
}
.character-corr-chart_img_inner {
  position: relative;
  text-align: center;
  width: 800px;
  height: auto;
  /* margin: 35px auto 20px; */
}

/* -- link -- */
.link_a a,
.link_b a,
.link_c a,
.link_d a,
.link_e a,
.link_f a  {
  position: absolute;
  font-size: 0;
}
.link_a a {
  width: 155px;
  height: 46px;
}
.link_a1 {
  left: 0;
  top: 134px;
}
.link_a2 {
  right: 0;
  top: 134px;
}
.link_a3 {
  left: 323px;
  top: 362px;
}
.link_a4 {
  left: 0;
  top: 571px;
}
.link_a5 {
  left: 322px;
  top: 729px;
}
.link_a6 {
  right: 0;
  top: 571px;
}

.link_b a {
  width: 155px;
  height: 46px;
}
.link_b1 {
  left: 18px;
  top: 152px;
}
.link_b2 {
  right: 18px;
  top: 152px;
}
.link_b3 {
  left: 323px;
  top: 369px;
}
.link_b4 {
  left: 18px;
  top: 534px;
}
.link_b5 {
  left: 323px;
  top: 729px;
}
.link_b6 {
  right: 0;
  top: 534px;
}

.link_c a {
  width: 155px;
  height: 46px;
}
.link_c1 {
  left: 0;
  top: 134px;
}
.link_c2 {
  right: 0;
  top: 134px;
}
.link_c3 {
  left: 323px;
  top: 369px;
}
.link_c4 {
  left: 0;
  top: 534px;
}
.link_c5 {
  left: 323px;
  top: 729px;
}
.link_c6 {
  right: 0;
  top: 534px;
}

.link_d a {
  width: 155px;
  height: 46px;
}
.link_d1 {
  left: 225px;
  top: 134px;
}
.link_d2 {
  right: 225px;
  top: 134px;
}
.link_d3 {
  left: 225px;
  top: 430px;
}
.link_d4 {
  left: 0;
  top: 640px;
}
.link_d5 {
  right: 217px;
  top: 535px;
}
.link_d6 {
  right: 0;
  top: 640px;
}

.link_e a {
  width: 155px;
  height: 46px;
}
.link_e1 {
  left: 0;
  top: 194px;
}
.link_e2 {
  right: 0;
  top: 194px;
}
.link_e3 {
  left: 323px;
  top: 411px;
}
.link_e4 {
  left: 0;
  top: 640px;
}
.link_e5 {
  left: 323px;
  top: 134px;
}
.link_e6 {
  right: 0;
  top: 640px;
}

.link_f a {
  width: 155px;
  height: 46px;
}
.link_f1 {
  left: 0;
  top: 134px;
}
.link_f2 {
  right: 0;
  top: 134px;
}
.link_f3 {
  left: 323px;
  top: 362px;
}
.link_f4 {
  left: 0;
  top: 571px;
}
.link_f5 {
  left: 322px;
  top: 729px;
}
.link_f6 {
  right: 0;
  top: 571px;
}