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

title : 刀剣ワールド浮世絵 浮世絵トランプ（瓢軍談五十四場）
scope : 刀剣ワールド浮世絵 浮世絵トランプ（瓢軍談五十四場）


memo：2022/1/27 tanaka WEB2TCI-24896／新規作成（瓢軍談五十四場をもとに作成）

last modify : 

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

/*--- h1 ---*/
.banner_h1 .txth1 {
  color: #000;
  letter-spacing: .6px;
  line-height: 1.2;
}
.txth1_small {
  font-size: 76.32%;
  vertical-align: top;
}
@media (max-width: 767px){
  .banner_h1 .txth1 {
    text-shadow: 0 0 3px #fff,
                 1px 1px 3px #fff,
                 -1px -1px 3px #fff;
  }
  .contents_wrap {
    padding: 0 10px 20px;
  }
}
/* ------------------------------------ */
/* ▼ button */
/* ------------------------------------ */
.btn_rows {
  background-color: #c92121;
  border: solid 1px #991c1c;
  display: inline-block;
  height: 100%;
  position: relative;
  transition: opacity .3s;
  text-align: center;
  margin: 0 auto;
}
.btn_rows:hover {
  opacity: .5;
}
.btn_rows::before,
.btn_rows::after {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  position: absolute;
}
.btn_rows::before {
  top: 0;
  left: 0;
  background: url(../../image-cmn/botton/ico-btn-dark-red.png) no-repeat 0 0;
}
.btn_rows::after {
  top: 0;
  right: 0;
  background: url(../../image-cmn/botton/ico-btn-dark-red.png) no-repeat 0 0;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}
.btn_rows_inner {
  display: inline-block;
}
.btn_rows_inner::before,
.btn_rows_inner::after {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  position: absolute;
}
.btn_rows_inner::before {
  bottom: 0;
  left: 0;
  background: url(../../image-cmn/botton/ico-btn-dark-red.png) no-repeat 0 0;
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
}
.btn_rows_inner::after {
  bottom: 0;
  right: 0;
  background: url(../../image-cmn/botton/ico-btn-dark-red.png) no-repeat 0 0;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
.btn_rows_text {
  border: solid 1px #cb6868;
  color: #fff;
  display: inline-block;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.25;
  margin: 3px 4px;
  min-width: 245px;
  padding: 9px 10px 9px;
  position: relative;
}
.back-top {
  font-feature-settings: 'pkna';
  margin-top: 15px;
  text-align: right;
}
.back-top .btn_rows_text {
  padding: 4px 10px 4px;
  min-width: 197px;
}
.btn_col2_block {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin: 35px auto 18px;
  max-width: 790px;
  padding: 0 10px;
}
.btn_col2_block li {
  margin-bottom: 18px;
  width: 360px;
}
.btn_col2_block li.is_current {
  position: relative;
}
.btn_col2_block li.is_current::before {
  border: solid 5px #c4ad52;
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(100% + 18px);
  height: calc(100% + 18px);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.btn_col2_block li img {
  vertical-align: bottom;
}
@media (max-width: 767px){
  .btn_col2_block {
    max-width: 400px;
    padding: 0 15px;
  }
  .btn_col2_block li.is_current::before {
    border-width: 4px;
  }
  .btn_rows_text {
    font-size: 16px;
    padding-bottom: 10px;
    padding-top: 10px;
  }
  .back-top {
    margin-right: 10px;
  }
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .btn_rows.ffM .btn_rows_text {
    padding-bottom: 6px;
    padding-top: 12px;
  }
}
/* 複数行以上対応ボタン arrow付き */
.btn_rows.btn_rows_arr .btn_rows_text {
  padding-right: 30px;
}
.btn_rows.btn_rows_arr .btn_rows_text::after {
  border-color: transparent transparent transparent #fff;
  border-style: solid;
  border-width: 5px 0 5px 7px;
  content: "";
  display: block;
  height: 0;
  position: absolute;
  right: 11px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 0;
}
@media (max-width: 767px){
  .btn_rows_text {
    font-size: 15px;
    width: auto;
  }
  .btn_rows.btn_rows_arr .btn_rows_text::after {
    border-width: 4px 0 4px 6px;
  }
}

/*--- box_description ---*/
.box_description {
  line-height: 1.55;
  margin: 0 auto;
  max-width: 780px;
  padding: 30px 0;
}
@media (max-width: 767px){
  .box_description {
    padding: 0 15px 6%;
  }
}

.content_wrap {
  padding-bottom: 50px;
}
.s_content {
  background: url(../image/bg.jpg);
  margin: 0 auto;
  padding: 28px 0 50px;
}
@media (min-width: 768px) {
  .list_wrap {
    max-width: 900px;
    margin: 0 auto;
  }
}
@media (max-width: 767px){
  .list_wrap {
    padding: 0 10px;
  }
}

/*--- list ---*/
.list_wrap ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.list_wrap ul li a {
  display: block;
  position: relative;
}

.list_wrap ul li a::after {
  background: url(../../ukiyoe-works/common/image/ico-zoom01.png) no-repeat;
  background-size: 100%;
  bottom: 0;
  content: '';
  display: block;
  height: 28px;
  position: absolute;
  right: 0;
  width: 28px;
}

.list_wrap ul li img {
  vertical-align: bottom;
}

.list_wrap ul li.blank {
  text-align: center;
}
.list_wrap ul li.blank img {
  max-width: 378px;
}
.list_wrap ul li .fancy-content {
  display: none;
}
.note {
  margin-bottom: 16px;
}

@media (max-width: 767px) {
  .list_wrap {
    width: 100%;
  }
  .list_wrap ul li {
    margin-top: 25px;
    text-align: center;
  }
  .list_wrap ul li.blank {
    display: flex;
    align-items: center;
  }
  .list_wrap ul li.blank img {
    max-width: 100%;
  }
}

/*  fancybox  */
.fancy-content {
  background: url(../image/bg.jpg);
  width: 85%;
  /* max-width: 1000px; */
  max-height: 95%;
  margin: 0 auto;
}
.fancybox-slide>* {
  padding: 0;
  overflow: initial;
  /* background: none; */
}
@media all and (-ms-high-contrast: none) {
  .fancybox-slide>* {
    overflow: visible;
  }
}
.fancybox-container .fancy-content {
  padding-top: 45px;
  padding-bottom: 45px;
  text-align: center;
}
.fancybox-slide img {
  vertical-align: bottom;
}
.fancybox-show-nav .fancybox-arrow {
  opacity: 1;
}
.fancybox-navigation .fancybox-arrow {
  top: 48%;
}
.fancybox-arrow--left:after,
.fancybox-arrow--right:after {
  background-color: #848484;
}
body .fancybox-close-small {
    top: 0px;
    right: -35px;
}

@media (min-width: 768px) {
  .pc_col2 {
    width: 50%;
  }
  .pc_col2:nth-of-type(1) {
    float:left;
  }
  .pc_col2:nth-of-type(2) {
    float:right;
  } 
}

/* @media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  .fancybox-slide img {
    max-height: 560px;
  }
} */

@media (max-width: 767px) {
  .fancy-content {
    width: 75%;
    max-height: initial;
  }
  .fancybox-arrow {
    width: 38px;
  }
  .fancybox-navigation .fancybox-arrow {
    top: 50%;
  }
  .fancybox-container .fancy-content {
    padding: 0;
  }
  .fancybox-arrow:after {
    width: 25px;
    height: 25px;
  }
  body .fancybox-close-small {
    background-size: 25px;
    width: 25px;
    height: 25px;
    top: 0px;
    right: -25px;
  }
  .pc_col2 {
    margin: 20px 0;
  }
}

@media screen and (max-width: 812px) and (orientation: landscape) {
  .fancybox-container .fancy-content {
    padding: 0;
  }
  .fancybox-slide img {
    max-height: 340px;
  }
}


.list_wrap li.blank01,
.list_wrap li.blank02 {
  align-items: start;
  display: flex;
  justify-content: center;
  /* padding-top: 10px; */
}

/*--- list(column) ---*/
@media screen and (min-width: 768px) {
  .list_wrap li {
    margin-top: 40px;
  }

  .list_wrap .s_box_list_col4 li {
    width: 22.667%;
  }

  .list_wrap .s_box_list_col3 {
    margin: 0 auto;
  }
  .list_wrap .s_box_list_col3 li {
    width: 30.223%;
  }

  .list_wrap .s_box_list_col4 li:nth-of-type(-n+4),
  .list_wrap .s_box_list_col2 li:nth-of-type(-n+2),
  .list_wrap .s_box_list_col3 li:nth-of-type(-n+3) {
    margin-top: 0;
  }

  .list_wrap .s_box_list_col4 li.blank01 img,
  .list_wrap .s_box_list_col1 li.blank01,
  .list_wrap .s_box_list_col1 li.blank02,
  .list_wrap .s_box_list_col2 li.blank01,
  .list_wrap .s_box_list_col2 li.blank02,
  .list_wrap .s_box_list_col3 li.blank01:nth-of-type(2n),
  .list_wrap .s_box_list_col3 li.blank01:nth-of-type(2n+1),
  .list_wrap .s_box_list_col3 li.blank02:nth-of-type(3n+2) {
    display: none;
  }

  .list_wrap .s_box_list_col2 {
    margin: 0 auto;
    max-width: 580px;
  }

  .list_wrap .s_box_list_col2 > li {
    width: 46.897%;
  }

  .list_wrap .s_box_list_col2 > li a {
    margin: 0 auto;
    max-width: 340px;
  }

  .list_wrap .s_box_list_col2 li img {
    max-width: 340px;
    width: 100%;
  }

  .list_wrap .s_box_list_col1 {
    flex-direction: column;
    margin: 0 auto;
    max-width: 800px;
  }

  .list_wrap .s_box_list_col1 > li {
    margin: 40px auto 0;
    text-align: center;
    width: 51%;
  }

  .list_wrap .s_box_list_col1 li img {
    max-width: 408px;
    width: 100%;
  }

  .list_wrap .s_box_list_col1 > li:first-of-type {
    margin-top: 0;
  }

}

@media screen and (max-width: 767px) {
  .contents_read {
    font-size: 15px;
  }

  .list_wrap .s_box_list_col1 li {
    width: 100%;
  }

  .list_wrap .s_box_list_col4 li,
  .list_wrap .s_box_list_col3 li,
  .list_wrap .s_box_list_col2 li {
    width: 47.7%;
  }

  .list_wrap .s_box_list_col1 li:first-of-type,
  .list_wrap .s_box_list_col2 li:nth-of-type(-n+2),
  .list_wrap .s_box_list_col3 li:nth-of-type(-n+2),
  .list_wrap .s_box_list_col4 li:nth-of-type(-n+2) {
    margin-top: 0;
  }

  .list_wrap li.blank01:nth-of-type(2n+1),
  .list_wrap li.blank02 {
    display: none;
  }
}

/* ------------------------------------ */
/* ▼ row_change_btn */
/* ------------------------------------ */
button.row_change_btn {
  border: none;
  outline: none;
  padding: 0;
  border-radius: 0;
  -moz-appearance: none;
  -webkit-appearance: none;
}

.row_change_btn span {
  background: none;
  display: block;
  margin: 0 auto;
}

.row_change_btn_wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 auto 8px;
}
.row_change_btn_col2 {
  max-width: 434px;
}
.row_change_btn_col3 {
  max-width: 651px;
}
.row_change_btn {
  background-color: #c7b093;
  color: #fff;
  cursor: pointer;
  display: block;
  font-weight: 600;
  text-align: center;
  max-width: 203px;
  width: 100%;
}

.row_change_btn.is_active {
  background-color: #b28e5f;
  cursor: default;
  pointer-events: none;
}

.row_change_btn.is_active .row_change_btn_inner::after {
  border-left: none;
  border-right: none;
}

.row_change_btn:not(.is_active) .row_change_btn_inner::after {
  border-color: #fff transparent transparent transparent;
  border-style: solid;
  border-width: 8px 5px 0 5px;
  content: '';
  height: 0;
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
}

.row_change_btn:not(.is_active):hover {
  opacity: .8;
}

@media screen and (max-width: 767px) {
  .row_change_btn_wrap {
    display: none;
  }
}

/* ------------------------------------ */
/* ▼ .zoomer */
/* ------------------------------------ */
.zoomer_basic {
  height: 210px;
  width: 100%;
  overflow: hidden;
}
.zoomer_fancy {
  height: 500px;
  width: 100%;
}
.zoomContainer {
  z-index: 99999;
}
.fancybox-enabled body {
  width: auto;
}
.fancybox-close-small:after {
  display: none;
}
.fancybox-close-small:hover {
  opacity: 0.5;
}
.fancybox-bg {
  background: #fff;
}
.fancybox-is-open .fancybox-bg {
  opacity: 1;
}
.fancybox-arrow--left:after, .fancybox-arrow--right:after {
  background-color: #848484;
}
.fancybox-show-nav .fancybox-arrow {
  opacity: 1;
}
.showcase_change_zoom {
  background: #fff;
  border: 1px solid #8E8E8E;
  bottom: -30px;
  display: none;
  font-size: 0;
  height: 30px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  width: 117px;
}
.showcase_change_zoom a {
  display: inline-block;
  font-size: 15px;
  font-weight: 600;
  height: 100%;
  line-height: 30px;
  outline: none;
  text-align: center;
  vertical-align: top;
  width: 50%;
}
.showcase_change_zoom a:first-child {
  border-right: 1px solid #8E8E8E;
}
.showcase_change_zoom a.active {
  background: #8E8E8E;
  color: #fff;
}
.fancybox-is-open .showcase_change_zoom {
  display: block;
}
.zoomer_wrapper,
.zoomer .zoomer-positioner,
.zoomer .zoomer-holder,
.zoomer {
  background: none;
  margin: 0;
  padding: 0;
}
.zoomer {
  padding: 0;
}
.fancybox-is-open .fancybox-bg {
  background: rgba(6,6,9,0.9);
}

.zoomer .zoomer-holder{
  box-shadow: none;
}

@media (max-width: 767px) {
  .zoomer_fancy {
    height: 380px;
  }
}

.zoomer .zoomer-controls {
  background: none;
  box-shadow: none;
}
.zoomer .zoomer-controls span {
  background: rgba(255,255,255,1);
  margin: 0 15px;
}
.zoomer .zoomer-controls:before {
  display: none;
}
.zoomer .zoomer-controls-top, .zoomer .zoomer-controls-bottom {
  margin-left: -60px;
}
.zoomer .zoomer-controls span.zoomer-zoom-out:hover, .zoomer .zoomer-controls span.zoomer-zoom-in:hover {
  background: #333;
}