@charset "UTF-8";
/* ==========================================================

title : 歴史の武将・偉人イラスト集【刀剣ワールド】
scope : 歴史の武将・偉人イラスト集【刀剣ワールド】

memo：

last modify : 2023/07/26 WEB2TCI-37372_tanaka アニメーションボタンデザイン変更のためボタンレイアウト変更

2023/04/07 WEB2TCI-31135_tanaka スライドjs用スタイル共通化のため削除
2020/07/01 TCI_eguchi インデント修正
2020/02/04 TCI_sakaguchi リンクボタンデザイン改修による修正分の追記と旧リンクボタンの不要部分の削除
2019/10/17 TCI_福岡
2019/04/24 TCI_oku 男性&女性イラスト集_新規作成

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

/* 共通上書き */
.wrap img {
  vertical-align: bottom;
}
.anchor_cmn_wrap {
  margin-top: -7px;
}
.anchor_cmn {
  position: relative;
  z-index: 1;
  margin-top: 40px;
  margin-bottom: 28px;
  max-width: 670px;
}
.anchor_cmn ul {
  margin: 0;
}
.anchor_cmn ul li {
  padding: 0 5px;
  margin: 0 -3px 8px;
}
.anchor_cmn ul li a::before {
  height: 20px;
}

@media only screen and (max-width: 1024px) {
  .wrap {
    width: 100%;
  }
  .wrap img {
    width: 100%;
  }
}

@media only screen and (max-width: 767px) {
  .anchor_cmn {
    margin-top: 30px;
  }
  .anchor_cmn ul li {
    margin: 0 -3px 3px;
  }
}

/* ------------------------------------ */
/* ▼ header breadcrumbs footer */
/* ------------------------------------ */
#header {
  background: none;
  padding: 0;
  width: 1024px;
}
#header::before {
  content: none;
}
#header .logo {
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
  width: 25.46%;
}
.breadcrumbs {
  margin: 10px auto 0;
  width: 97.17%;
}
.box_seo .seo_frame {
  background: #fff;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.125em;
}
#footer {
  margin: 98px 0 0 0;
  position: relative;
}

@media only screen and (max-width: 1024px) {
  #header {
    width: 100%;
  }
}

@media only screen and (max-width: 767px) {
  #header .logo {
    position: absolute;
    top: 3.62%;
    left: 1.74%;
    width: 43.47%;
  }
  #footer {
    background: none;
    margin-top: 0;
  }
  .footer_inner {
    background-color: #ffffff;
  }
  .footer_inner .box_copyright .copyright {
    margin-top: 0;
    margin-bottom: 0;
    padding: 16px 25px 25px;
  }
}

/* ------------------------------------ */
/* ▼ コンテンツ背景 */
/* ------------------------------------ */
.bg_inner {
  background: url(../image/bg-body.png) repeat;
  padding-bottom: 80px;
}

@media only screen and (max-width: 767px) {
  .bg_inner {
    padding-bottom: 20px;
  }
}

/* ------------------------------------ */
/* ▼ イラスト集部分 */
/* ------------------------------------ */
.wrap {
  margin: 0 auto;
  position: relative;
  width: 880px;
}

@media only screen and (max-width: 880px) {
  .wrap {
    width: 100%;
  }
  .wrap img {
    width: 100%;
  }
}

/* ------------------------------------ */
/* ▼ 写真集部分 */
/* ------------------------------------ */
.wrap {
  margin: 0 auto;
  width: 1015px;
}
.p_content_inner {
  background: url('../image/p_bg_box.png');
  -webkit-background-size: cover;
  background-size: cover;
  color: #FFF;
  display: table;
  padding: 10px 15px;
  text-align: left;
  width: 100%;
  max-width: 440px;
  margin: 10px auto;
}
.p_content_inner span,.p_content_inner h3 {
  display: table-cell;
  vertical-align: middle;
}
.p_content_inner span {
  background: #3b3f82;
  color: #FFF;
  font-size: 16px;
  display: inline-block;
  padding: 2px 10px;
  margin-right: 20px;
  font-weight: 600;
  position: relative;
}
.p_content_inner h3 {
  display: inline-block;
  font-size: 27px;
  text-align: center;
  margin-bottom: 0;
  line-height: 32px;
  text-shadow: 1px 2px rgba(0, 0, 0, 0.80);
  font-weight: 600;
}
.p_content_inner h3 em {
  display: block;
  font-feature-settings: 'pkna';
  font-size: 13px;
  line-height: normal;
}

@media only screen and (max-width: 1024px) {
  .wrap {
    width: 100%;
  }
}

/* ------------------------------------ */
/* ▼ .box_description */
/* ------------------------------------ */
.box_description {
  margin-bottom: 40px;
  padding: 30px 0 0;
}

@media only screen and (max-width: 767px) {
  .box_description {
    margin-bottom: 30px;
    padding: 20px 15px 0;
  }
  .p_content_inner h3 {
    font-size: 20px;
    line-height: normal;
  }
  .p_content_inner span {
    font-size: 14px;
  }
  .p_content_inner h3 em {
    font-size: 11px;
  }
  .p_content_inner {
    padding: 5px 10px;
  }
}

/* ------------------------------------ */
/* ▼ .photo_wrap */
/* ------------------------------------ */
.photo_wrap {
  margin: 0 auto 50px;
  max-width: 880px;
}
.photo_wrap:last-child {
  margin-bottom: 80px;
}
.photo_wrap_list {
  display: flex;
  flex-direction : row-reverse;
  flex-wrap: wrap;
  justify-content: space-between;
}
.photo_wrap:nth-of-type(2n) .photo_wrap_list {
  flex-direction : row;
}
.photo_wrap_list li {
  background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
}
.photo_wrap_list > li {
  margin: 0 0 8px 0;
  overflow: hidden;
  position: relative;
}
.photo_wrap_list > li a {
  height: 100%;
}
.photo_rows li {
  overflow: hidden;
  position: relative;
  height: 400px;
}
.photo_rows li:first-child {
  background-image: url(../image/man_and_woman/bg-illust-man02.png);
  background-repeat: no-repeat;
}
.woman-illust .photo_rows li:first-child {
  background-image: url(../image/man_and_woman/bg-illust-woman02.png);
}
.photo_rows li:nth-of-type(2) {
  background-image: url(../image/man_and_woman/bg-illust-man03.png);
  background-repeat: no-repeat;
  margin-top: 3.45%;
}
.woman-illust .photo_rows li:nth-of-type(2) {
  background-image: url(../image/man_and_woman/bg-illust-woman03.png);
}
.photo_wrap_list .photo {
  background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
}
.photo_wrap_list .photo .photo_thum {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: none;
  height: 95%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

/* 画像サイズ調整 */
.photo_wrap_list .photo_thum {
  width: auto;
}
.photo_wrap_list .photo_rows li .photo_thum {
  height: 170%;
  top: 87%;
}
.photo_wrap_list > li:nth-of-type(6n+4) .photo_thum,
.photo_wrap_list > li:nth-of-type(6n+5) .photo_thum {
  height: 210%;
  top: 100%;
}
.photo_wrap_list > li:nth-of-type(6n+6) .photo_thum {
  height: 150%;
  top: 75%;
}
.photo a {
  display: block;
}
.photo a:hover {
  color: #ffffff;
  opacity: .8;
}

@media only screen and (max-width: 1024px) {
  .photo_wrap {
    margin-bottom: 4.95%;
    padding: 0 10px;
  }
  .photo_wrap_list > li {
    margin: 0 0 1%;
  }
  .photo_wrap:last-child {
    margin-bottom: 0;
    padding-bottom: 10%;
  }
}

@media (max-width: 1024px) {
  .photo_rows li {
    height: 100%;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .photo a p {
    font-size: 18px;
    font-weight: 600;
  }
}

/* ------------------------------------ */
/* ▼ li 共通レイアウト */
/* ------------------------------------ */
.photo_wrap_list > li:nth-of-type(6n+2) {
  background-image: url(../image/man_and_woman/bg-illust-man01.png);
  background-repeat: no-repeat;
}
.woman-illust .photo_wrap_list > li:nth-of-type(6n+2) {
  background-image: url(../image/man_and_woman/bg-illust-woman01.png);
}
.photo_wrap_list > li:nth-of-type(6n+4) {
  background-image: url(../image/man_and_woman/bg-illust-man04.png);
  background-repeat: no-repeat;
}
.woman-illust .photo_wrap_list > li:nth-of-type(6n+4) {
  background-image: url(../image/man_and_woman/bg-illust-woman04.png);
}
.photo_wrap_list > li:nth-of-type(6n+5) {
  background-image: url(../image/man_and_woman/bg-illust-man05.png);
  background-repeat: no-repeat;
}
.woman-illust .photo_wrap_list > li:nth-of-type(6n+5) {
  background-image: url(../image/man_and_woman/bg-illust-woman05.png);
}
.photo_wrap_list > li:nth-of-type(6n+6) {
  background-image: url(../image/man_and_woman/bg-illust-man06.png);
  background-repeat: no-repeat;
}
.woman-illust .photo_wrap_list > li:nth-of-type(6n+6) {
  background-image: url(../image/man_and_woman/bg-illust-woman06.png);
}
.photo_wrap_list > li:nth-of-type(6n+5) {
  height: 186px;
  width: 1000px;
}
.photo_wrap_list > li:nth-of-type(6n+5) a {
  padding-top: 18.6%;
}
.photo_wrap_list > li:nth-of-type(6n+2) {
  height: 755px;
  width: 580px;
}
.photo_wrap_list > li:nth-of-type(6n+2) a {
  padding-top: 130.1%;
}
.photo_wrap_list > li:nth-of-type(6n+1) {
  height: 167px;
  width: 290px;
}
.photo_wrap_list > li:nth-of-type(6n+4) {
  height: 400px;
  width: 580px;
}
.photo_wrap_list > li:nth-of-type(6n+4) a {
  padding-top: 68.9%;
}
.photo_wrap_list > li:nth-of-type(6n+3) {
  background: none;
  margin-top: -66.8%;
  width: 290px;
}
.photo_wrap_list > li:nth-of-type(6n+3) a {
  padding-top: 137.9%;
}
.photo_wrap_list > li:nth-of-type(6n+6) {
  height: 400px;
  width: 290px;
}
.photo_wrap_list > li:nth-of-type(6n+6) a {
  padding-top: 137.9%;
}
.photo_wrap_list > li:nth-of-type(6n+5) {
  height: 400px;
  width: 580px;
}
.photo_wrap_list > li:nth-of-type(6n+5) a {
  padding-top: 68.9%;
}

@media only screen and (max-width: 1024px) {
  .photo_wrap_list > li:nth-of-type(6n+2) {
    height: 100%;
    margin-bottom: 1%;
    width: 65.5%;
  }
  .photo_wrap_list > li:nth-of-type(6n+1),
  .photo_wrap_list > li:nth-of-type(6n+6) {
    height: 100%;
    width: 33.5%;
  }
  .photo_wrap_list > li:nth-of-type(6n+4) {
    height: 100%;
    margin-bottom: 1%;
    width: 65.5%;
  }
  .photo_wrap_list > li:nth-of-type(6n+3) {
    height: 100%;
    margin: -68.9% 0 0 0;
    width: 33.5%;
  }
  .photo_wrap_list > li:nth-of-type(6n+5) {
    height: 100%;
    width: 65.5%;
  }
}

/* ------------------------------------ */
/* ▼ .lay_deco 飾り */
/* ------------------------------------ */
.photo.lay_deco {
  background: none;
}
.photo.lay_deco {
  background-repeat: no-repeat;
  height: 178px;
  width: 290px;
}
.photo_rows .photo.lay_deco {
  background-position: 0 0;
  height: 100%;
  margin-top: 3.4%;
  padding-top: 57.6%;
  width: 100%;
}
.photo_rows .photo.lay_deco:nth-of-type(1) {
  background-position: 50% -1%;
  padding-top: 196.6%;
}
li:nth-of-type(6n+1).photo.lay_deco {
  padding-top: 19%;
}
li:nth-of-type(6).photo.lay_deco {
  padding-top: 45.456%;
  width: 290px;
}
.photo_wrap_list > li:nth-of-type(6n+6).lay_deco {
  background-position: top 0 right 0;
}
.photo_wrap_list > li:nth-of-type(6n+4).lay_deco {
  background-position: 30px 6px;
  height: 222px;
}

@media only screen and (max-width: 1024px) {
  .photo_wrap_list > li.lay_deco {
    height: 100%;
  }
  .photo_wrap_list > li:nth-of-type(6n+1).lay_deco {
    background-position: -4% 0;
    background-size: 270%;
    padding-top: 16%;
    width: 33.5%;
  }
  .photo_wrap_list > li:nth-of-type(6n+6).lay_deco {
    background-position: top 0 right 0;
    background-size: 300%;
    padding-top: 45.1%;
    width: 33.5%;
  }
  .photo_wrap_list > li:nth-of-type(6n+4).lay_deco {
    background-position: 0 0;
    background-size: 170%;
    height: 100%;
    padding-top: 24.6%;
  }
  .photo_rows .photo.lay_deco {
    background-size: 312%;
  }
  .photo_rows li.photo.lay_deco:nth-of-type(1) {
    background-size: 332%;
    margin-top: 0;
    padding-top: 203%;
  }
  .photo_rows li.photo.lay_deco:nth-of-type(2) {
    padding-top: 61.4%;
  }
}

/* ------------------------------------ */
/* ▼ .title_box */
/* ------------------------------------ */
.title_box {
  background: url(../image/img-title.png) no-repeat;
  text-align: center;
}
.title_box h2 {
  color: #fff;
  font-size: 26px;
  letter-spacing: 0.2em;
  line-height: 25px;
  padding: 71px 0;
}
.title_box h2::before,
.title_box h2::after {
  background: url(../image/ico_dots.png);
  content: "";
  display: inline-block;
  height: 18px;
  width: 28px;
}
.title_box h2::before {
  margin-right: 15px;
}
.title_box h2::after {
  margin-left: 15px;
}
.title_box.title_type01 {
  background: url(../image/man_and_woman/bg-ttl-man01.png) no-repeat;
}
.woman-illust .title_box.title_type01 {
  background-image: url(../image/man_and_woman/bg-ttl-woman01.png);
}
.title_box.title_type01 h2::before,
.title_box.title_type01 h2::after {
  background-image: url(../image/ico_dots_light.png);
}

@media only screen and (max-width: 1024px) {
  .photo_wrap .title_box {
    height: 100%;
    margin-bottom: 1%;
    width: 33.5%;
  }
  .title_box.title_type01 {
    background-size: 100% 100%;
  }
  .title_box h2 {
    font-size: 22px;
    padding: 19.85% 0 17.85%;
  }
}

@media only screen and (max-width: 767px) {
  .title_box h2 {
    font-size: 3vw;
    line-height: 4.2vw;
    padding: 18.3% 0 16.3%;
  }
  .title_box h2:before,
  .title_box h2:after {
    display: none;
  }
}

/* ------------------------------------ */
/* ▼ .photo-name */
/* ------------------------------------ */
.photo_name {
  background: url(../image/man_and_woman/bg-name.png);
  bottom: 10px;
  color: #ffffff;
  line-height: 1.2;
  padding: 9px 20px;
  position: absolute;
  left: 10px;
  z-index: 100;
}
.photo_name:after {
  border: 1px solid #ffffff;
  content: '';
  display: block;
  top: 1px;
  bottom: 1px;
  left: 1px;
  right: 1px;
  position: absolute;
}

@media only screen and (min-width: 768px) {
  .showcase_box .photo_name {
    font-size: 22px;
    padding: 7px 13px;
  }
  .showcase_box .photo_name {
    font-size: 22px;
    padding: 7px 13px;
  }
}

@media only screen and (max-width: 767px) {
  .photo .photo_name {
    bottom: 3px;
    font-size: 10px;
    padding: 5px 4px;
    left: 3px;
  }
  .showcase_box .photo_name {
    font-size: 15px;
    padding: 5px 12px;
  }
}

/* ------------------------------------ */
/* ▼ .fancybox */
/* ------------------------------------ */
.fancybox01:after {
  background: url(../image/ico-zoom01.png) no-repeat;
  background-size: 100% 100%;
  bottom: 0;
  content: '';
  display: block;
  height: 28px;
  position: absolute;
  right: 0;
  width: 28px;
}
body .fancybox-close-small {
  background: url(../image/ico-closepopup.png) no-repeat top left;
  background-size: 100% 100%;
  color: #ffffff;
  font-size: 16px;
  height: 31px;
  top: 44px;
  right: calc(50% - 340px);
  position: fixed;
  padding-left: 17px;
  width: 100px;
  transition: opacity .2s;
  z-index: 99999;
}
.fancybox-arrow:after {
  background-color: transparent;
  background-image: url(../image/ico-arrow.png);
  background-size: 80px 58px;
  background-position: 100%;
  height: 58px;
  top: 19px;
  width: 40px;
}
.fancybox-show-nav .fancybox-arrow {
  opacity: 1;
}
.fancybox-inner >.fancybox-navigation {
  display: none;
}
.fancybox-navigation {
  position: absolute;
  width: 100%;
  top: calc(50% - 50px);
}
.fancybox-close-small + .fancybox-close-small {
  display: none;
}
.showcase_box .fancybox-close-small {
  display: none;
}

@media (max-width: 834px) {
  body .fancybox-close-small {
    left: 96%;
  }
}

@media (max-width: 767px) {
  body .fancybox-close-small {
    font-size: 14px;
    height: 26px;
    top: 15px;
    right: 5%;
    left: auto;
    margin: 0;
    width: 80px;
  }
  .fancybox-navigation {
    top: calc(50%);
  }
  .fancybox-arrow {
    width: 36px;
  }
  .fancybox-arrow:after {
    background-size: 64px 46px;
    height: 46px;
    width: 32px;
  }
  .fancybox01:after {
    height: 16px;
    width: 16px;
  }
}

/* ------------------------------------ */
/* ▼ .fancybox_fix */
/* ------------------------------------ */
.fancybox_body_visible {
  overflow: visible;
}
/* iosスクロールフリーズ対応 */
.fancybox-container {
  position: absolute;
  height: 100vh;
  transition-property: opacity;
}
/* iosスクロールフリーズ対応 */
.fancybox-bg {
  position: fixed;
}

/* ------------------------------------ */
/* ▼ .showcase_box .showcase_box_all */
/* ------------------------------------ */
.showcase_box {
  background: #fff;
  display: none;
  font-size: 0;
  text-align: center;
  max-width: 460px;
  overflow: visible;
  vertical-align: top;
  padding: 5px;
  width: 50vh;
}
.showcase_box__content {
  background-size: 100% auto;
  -webkit-background-size: 100% auto;
  padding-top: 130%;
  position: relative;
}
.bg_type01 .showcase_box__content {
  background-image: url(../image/man_and_woman/bg-modal-man01.png);
  background-repeat: no-repeat;
}
.woman-illust .bg_type01 .showcase_box__content {
  background-image: url(../image/man_and_woman/bg-modal-woman01.png);
}
.bg_type02 .showcase_box__content {
  background-image: url(../image/man_and_woman/bg-modal-man02.png);
}
.woman-illust .bg_type02 .showcase_box__content {
  background-image: url(../image/man_and_woman/bg-modal-woman02.png);
}
.bg_type03 .showcase_box__content {
  background-image: url(../image/man_and_woman/bg-modal-man03.png);
}
.woman-illust .bg_type03 .showcase_box__content {
  background-image: url(../image/man_and_woman/bg-modal-woman03.png);
}
.bg_type04 .showcase_box__content {
  background-image: url(../image/man_and_woman/bg-modal-man04.png);
}
.woman-illust .bg_type04 .showcase_box__content {
  background-image: url(../image/man_and_woman/bg-modal-woman04.png);
}
.bg_type05 .showcase_box__content {
  background-image: url(../image/man_and_woman/bg-modal-man05.png);
}
.woman-illust .bg_type05 .showcase_box__content {
  background-image: url(../image/man_and_woman/bg-modal-woman05.png);
}
.bg_type06 .showcase_box__content {
  background-image: url(../image/man_and_woman/bg-modal-man06.png);
}
.woman-illust .bg_type06 .showcase_box__content {
  background-image: url(../image/man_and_woman/bg-modal-woman06.png);
}
.showcase_box .showcase_box__content img {
  display: block;
  height: 90%;
  margin: auto;
  max-height: 520px;
  max-width: 100%;
  width: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

@media (max-width: 767px) {
  .showcase_box {
    margin-left: 10px;
    margin-right: 10px;
  }
}

@media (max-width: 767px) {
  .showcase_box {
    margin-left: 10px;
    margin-right: 10px;
    width: 90%;
  }
}

.fancybox-enabled body {
  width: auto;
}
.fancybox-close-small:after {
  display: none;
}
.fancybox-close-small:hover {
  opacity: 0.5;
}
.fancybox-is-open .fancybox-bg {
  opacity: 1;
}
.fancybox-is-open .fancybox-bg {
  background: rgba(6,6,9,0.9);
}

/* 個別 イラスト一覧モーダル 共通 */
#header.is_elm_hidden,
.breadcrumbs.is_elm_hidden,
.bg_inner.is_elm_hidden,
.box_seo.is_elm_hidden,
#footer.is_elm_hidden,
.attention_word.is_elm_hidden {
  height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* ------------------------------------ */
/* ▼ .seo_frame__wrapper */
/* ------------------------------------ */
@media (max-width: 1024px) {
  .seo_frame__wrapper {
    background: #ffffff;
  }
}

/* ------------------------------------ */
/* ▼ .character_bnr_wrap */
/* ------------------------------------ */

/* ------------------------------------ */
/* ▼ title */
/* ------------------------------------ */
.title_h3 {
  display: table;
  height: 40px;
  margin: 0 auto;
  position: relative;
  table-layout: fixed;
}
.title_h3_type01 {
  background: url(../image/ico_ttl01_border01.png) no-repeat top center, url(../image/ico_ttl01_border02.png) no-repeat bottom center;
}
.title_h3:before,
.title_h3:after {
  content: '';
  display: block;
  height: 2px;
  margin-top: -1px;
  position: absolute;
  top: 50%;
  width: 170px;
}
.title_h3_type01 > span ,
.title_h3_type01:before,
.title_h3_type01:after {
  background-color: #ab2422;
}
.title_h3:before {
  right: 104.7%;
}
.title_h3:after {
  left: 104.7%;
}
.title_h3 > span {
  background-image: url(../image/ico_ttl_deco02.png);
  background-repeat: repeat-y;
  background-position: top center;
  color: #fff;
  display: table-cell;
  font-size: 0;
  font-weight: 600;
  position: relative;
  text-align: center;
  vertical-align: middle;
  width: 100%;
  z-index: 1;
}
.title_h3 > span > span {
  display: inline-block;
  font-feature-settings: "pkna";
  font-weight: 600;
  line-height: 1.3;
  padding: 0 35px;
  position: relative;
  vertical-align: middle;
}
.title_h3 > span > span:before,
.title_h3 > span > span:after {
  background: url(../image/ico_ttl_deco01.png) no-repeat center;
  content: '';
  display: block;
  height: 19px;
  left: 0;
  margin-top: -10px;
  position: absolute;
  top: 50%;
  width: 27px;
}
.title_h3 > span > span:after {
  left: auto;
  right: 0;
}

@media (min-width: 768px) {
  .title_h3 {
    margin-bottom: 30px;
    padding: 10px 0;
    width: 530px;
  }
  .title_h3:before,
  .title_h3:after {
    width: 160px;
  }
  .title_h3 > span > span {
    font-size: 18px;
  }
  .title_h3 > span > span:before,
  .title_h3 > span > span:after {
    height: 19px;
    width: 27px;
  }
}

@media (max-width: 767px) {
  .title_h3 {
    background-size: 100%;
    padding: 6px 0;
    margin-bottom: 4%;
    width: 258px;
  }
  .title_h3:before,
  .title_h3:after {
    width: 30px;
  }
  .title_h3 > span {
    background-size: 100%;
    font-feature-settings: "pkna";
    padding: 2px 0;
  }
  .title_h3 > span > span {
    font-size: 17px;
  }
  .title_h3 > span > span:before,
  .title_h3 > span > span:after {
    background-size: 100%;
    width: 22px;
  }
  .title_h3 > span > span:before {
    left: 12px;
  }
  .title_h3 > span > span:after {
    right: 12px;
  }
}

.character_bnr_wrap {
  margin-bottom: 60px;
}
.character_bnr_block > ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin: 20px auto 0;
  max-width: 730px;
}
.character_bnr_block > ul:nth-of-type(1) {
  margin-top: -30px;
}
.character_bnr_block ul li {
  line-height: 1.4;
  margin-top: 30px;
  max-width: 335px;
  width: 100%;
}
.character_bnr_block ul li.column1 {
  max-width: none;
  text-align: center;
  width: 700px;
}

@media (max-width: 767px) {
  .character_bnr_block {
    padding: 0 15px;
  }
  .character_bnr_block ul {
    max-width: 650px;
    width: 100%;
    margin-top: 0;
  }
  .character_bnr_block > ul:nth-of-type(1) {
    margin-top: -15px;
  }
  .character_bnr_block ul li {
    margin-top: 15px;
  }
}

/* ------------------------------------ */
/* ▼ Grid layout style */
/* ------------------------------------ */
/* Grid layout ここから */
/* nomal, Grid共通wrap */
.illust_contents_wrap {
  position: relative;
  margin: 0 auto;
  max-width: 915px;
  width: 100%;
}
.illust_contents_wrap.js_hide {
  min-height: 100vh;
}

/* nomal column wrap */
.normal_column_wrap {
  width: 100%;
}
.normal_column_wrap.js_hide {
  display: none;
}

/* Grid wrap */
.elm_grid_wrap {
  display: none;
  max-width: 935px;
  margin: 0 auto 42px;
  transition: transform .3s;
  width: 100%;
  -webkit-transform: translateY(400px);
  transform: translateY(400px);
}
.elm_grid_wrap.js_show {
  display: flex;
  flex-wrap: wrap;
  align-content: start;
  align-content: flex-start;
}
.elm_grid_wrap.js_animate_position {
  position: absolute;
  top: 0;
  left: 0;
}
.elm_grid_wrap.js_animate_start {
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

/* Grid list */
.elm_grid_wrap .photo {
  margin: 0 0 18px 2.4575%;
  width: 31.695%;
  max-width: 290px;
}
.elm_grid_wrap .photo:nth-of-type(3n+1) {
  margin-left: 0;
}
.elm_grid_wrap .photo.after_add_space_flower {
  background: url(../image/man_and_woman/bg-space.png) no-repeat;
  background-position: 0 -15%;
  background-size: 314% auto;
}
.elm_grid_wrap .photo > a {
  background-position: top center;
  margin: 0;
  padding-bottom: 100%;
  position: relative;
  overflow: hidden;
}
.elm_grid_wrap > .photo > a {
  background-size: 100% auto;
  background-repeat: repeat;
  display: block;
  transition: opacity .3s;
}
body:not(.ua_iPad) .elm_grid_wrap > .photo > a:hover {
  opacity: .6;
}

/* 女性 Grid thumbnail bg */
.woman-illust .elm_grid_wrap > .bg_type01 > a {
  background-image: url(../image/man_and_woman/bg-illust-woman01.png);
}
.woman-illust .elm_grid_wrap > .bg_type02 > a {
  background-image: url(../image/man_and_woman/bg-illust-woman02.png);
}
.woman-illust .elm_grid_wrap > .bg_type03 > a {
  background-image: url(../image/man_and_woman/bg-illust-woman03.png);
}
.woman-illust .elm_grid_wrap > .bg_type04 > a {
  background-image: url(../image/man_and_woman/bg-illust-woman04.png);
}
.woman-illust .elm_grid_wrap > .bg_type05 > a {
  background-image: url(../image/man_and_woman/bg-illust-woman05.png);
}
.woman-illust .elm_grid_wrap > .bg_type06 > a {
  background-image: url(../image/man_and_woman/bg-illust-woman06.png);
}

/* 男性 Grid thumbnail bg */
.man-illust:not(.woman-illust) .elm_grid_wrap > .bg_type01 > a {
  background-image: url(../image/man_and_woman/bg-illust-man01.png);
}
.man-illust:not(.woman-illust) .elm_grid_wrap > .bg_type02 > a {
  background-image: url(../image/man_and_woman/bg-illust-man02.png);
}
.man-illust:not(.woman-illust) .elm_grid_wrap > .bg_type03 > a {
  background-image: url(../image/man_and_woman/bg-illust-man03.png);
}
.man-illust:not(.woman-illust) .elm_grid_wrap > .bg_type04 > a {
  background-image: url(../image/man_and_woman/bg-illust-man04.png);
}
.man-illust:not(.woman-illust) .elm_grid_wrap > .bg_type05 > a {
  background-image: url(../image/man_and_woman/bg-illust-man05.png);
}
.man-illust:not(.woman-illust) .elm_grid_wrap > .bg_type06 > a {
  background-image: url(../image/man_and_woman/bg-illust-man06.png);
}
.elm_grid_wrap .photo > a > img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.elm_grid_wrap .photo.img_horizontal > a > img {
  width: 145%;
  max-width: 200%;
}
.elm_grid_wrap .photo .grid_fancybox:after {
  background: url(../image/ico-zoom01.png) no-repeat;
  background-size: 100%;
  bottom: 10px;
  content: '';
  display: block;
  height: 22px;
  position: absolute;
  right: 10px;
  width: 22px;
}

@media (max-width: 935px) {
  .elm_grid_wrap {
    padding: 0 20px;
  }
}

@media (max-width: 767px) {
  .elm_grid_wrap {
    margin-bottom: 40px;
    padding: 0;
  }
  .elm_grid_wrap .photo {
    margin-bottom: 3px;
    margin-left: 3px;
    width: calc(33.3333% - 2px);
  }
  .elm_grid_wrap .photo:nth-of-type(3n+1) {
    margin-left: 0;
  }
  .elm_grid_wrap .photo .grid_fancybox:after {
    bottom: 5px;
    right: 5px;
    width: 16px;
    height: 16px;
  }
  .elm_grid_wrap .photo .photo_name {
    display: none;
  }
}

/* button */
.change_btn_wrap {
  max-width: 880px;
  margin: 0 auto 30px;
  text-align: right;
}
.change_btn {
  background-color: #c92121;
  border: solid 1px #991c1c;
  display: inline-block;
  outline: none;
  padding: 0;
  position: relative;
  transition: opacity .3s;
  text-align: center;
  width: 100%;
  max-width: 270px;
}
body:not(.ua_iPad) .change_btn:hover {
  opacity: .6;
}
.change_btn::before,
.change_btn::after {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  position: absolute;
  border-right: solid 1px #cb6868;
  border-bottom: solid 1px #cb6868;
}
.change_btn::before {
  top: 0;
  left: 0;
}
.change_btn::after {
  top: 0;
  right: 0;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}
.change_btn_inner::before,
.change_btn_inner::after {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  position: absolute;
  border-right: solid 1px #cb6868;
  border-bottom: solid 1px #cb6868;
}
.change_btn_inner::before {
  bottom: 0;
  left: 0;
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
}
.change_btn_inner::after {
  bottom: 0;
  right: 0;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
.change_btn_text {
  border: solid 1px #cb6868;
  color: #fff;
  display: block;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: .14em;
  line-height: 1.4;
  margin: 3px 4px;
  padding: 8px 30px 8px 10px;
  position: relative;
  font-feature-settings: "pkna";
}
.change_btn:not(.js_show) .change_btn_text.is_grid {
  display: none;
}
.change_btn.js_show .change_btn_text.is_normal {
  display: none;
}
.change_btn_text.ico_arrow::after {
  border-color: #fff transparent transparent transparent;
  border-style: solid;
  border-width: 6px 4px 0 4px;
  content: "";
  display: block;
  height: 0;
  position: absolute;
  right: 17px;
  top: calc(50% - 2px);
  width: 0;
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
}
.change_btn_text::after {
  background: url(../image/ico-btn01.png) no-repeat center center;
  background-size: 100% auto;
  content: "";
  display: block;
  width: 13px;
  height: 14px;
  position: absolute;
  right: 14px;
  top: calc(50% - 7px);
}

@media (max-width: 767px) {
  .change_btn_wrap {
    margin-bottom: 15px;
    padding-right: 10px;
  }
  .change_btn {
    max-width: 240px;
  }
  .change_btn_text {
    font-size: 14px;
    letter-spacing: .1em;
  }
  .change_btn_text.ico_arrow::after {
    border-width: 6px 4px 0 4px;
    top: calc(50% - 2px);
  }
}

/* ipad対応 */
.ua_iPad .fancybox-bg {
  opacity: 0!important;
}
.ua_iPad .fancybox-is-open .fancybox-bg {
  opacity: 1!important;
}
.ua_iPad .fancybox-fx-fade.fancybox-slide--next,
.ua_iPad .fancybox-fx-fade.fancybox-slide--previous {
  opacity: 0!important;
}
.ua_iPad .fancybox-fx-fade.fancybox-slide--current {
  opacity: 1!important;
}
.ua_iPad .fancybox-show-nav .fancybox-arrow[disabled]:hover {
  opacity: .3!important;
}
/* Grid layout ここまで */

/* --------------------------------------------------------- */
/* ▼ 200204 TCI_sakaguchi ＜STEP2＞リンクボタンデザイン改修 */
/* -------------------------------------------------------- */
.cmn_link_btn.in_fancybox {
  margin: 3.33% auto 2.7%;
  max-width: 308px;
}
.cmn_link_btn.in_fancybox .cmn_link_btn_text {
  font-size: 19px;
}

@media (max-width: 767px) {
  .cmn_link_btn.in_fancybox {
    max-width: 250px;
  }
  .cmn_link_btn.in_fancybox .cmn_link_btn_text {
    font-size: 15px;
  }
}

/* ------------------------------------ */
/* ▼ アニメーションボタン表示調整（photo-album-character配下ローカル設定）
/* ------------------------------------ */
.btn_wrap {
  margin: 30px auto 25px;
}
.btn_wrap_block {
  margin: 0 auto calc(30px + 7px);
}
.btn_wrap_block .change_btn_wrap {
  margin: 0;
  text-align: left;
}
.btn_wrap_block .btn_wrap {
  margin: 0 auto;
  max-width: 100%;
}
.btn_wrap_block .change_btn_wrap .change_btn {
  width: 270px;
}

@media (min-width: 768px) {
  .btn_wrap_block {
    position: relative;
  }
  .btn_wrap_block .change_btn_wrap {
    position: absolute;
  }
}

@media (min-width: 768px) and (max-width: 1015px)  {
  .btn_wrap_block {
    padding: 0 10px;
  }
  .btn_wrap_block .btn_wrap {
    padding-left: 280px;
  }
  .btn_wrap_block .js_animation_btn {
    width: calc(50% - 4px);
    max-width: 258px;
  }
  .btn_wrap_block .js_animation_btn .cmn_link_btn {
    width: 100%;
  }
  /* common上書き */
  .js_animation_btn + .js_animation_btn {
    margin-right: 0;
  }
  .js_animation_btn.is_active .cmn_link_btn .cmn_link_btn_text {
    font-size: 18px;
  }
}

@media (max-width: 767px) {
  .btn_wrap_block {
    display: block;
    max-width: 98%;
  }
  .btn_wrap_block .change_btn_wrap {
    margin-bottom: 15px;
    padding-right: 0;
    text-align: center;
  }
  .btn_wrap_block .change_btn_wrap .change_btn {
    max-width: 250px;
    margin: 0 auto;
    width: 250px;
  }
}