/* gallery-bnr-effect-box.css — ベースライン(自動読込・module-base.css前提)。編集せず上書きで調整。 */
@charset "UTF-8";

.bnr_effect_box {
  position: relative;
}
.bnr_effect_box .row {
  margin-bottom: 0 !important;
}
.bnr_effect_box .bnr_effect_box_content.staff_list {
  height: 100%;
  padding: 100% 0 0;
  background-color: var(--color-primary);
  background: var(--color-secondary);
  color: var(--color-on-primary);
}
.bnr_effect_box .bnr_effect_box_content.staff_list .more a {
  margin: 1px auto;
  border-color: #fff;
}
.bnr_effect_box .bnr_effect_box_content {
  position: relative;
  max-width: 250px;
  width: 100%;
}
.bnr_effect_box .bnr_effect_box_content .bnr_effect_box_img {
  transition: 0.8s;
  transform: rotateX(0) translate3d(0, 0, 100px);
}
@media (max-width: 1000px) {
  .bnr_effect_box .bnr_effect_box_content .bnr_effect_box_img {
    transform: rotateX(0) translate3d(0, 0, 100px);
  }
}
@media (max-width: 375px) {
  .bnr_effect_box .bnr_effect_box_content .bnr_effect_box_img {
    transform: rotateX(0) translate3d(0, 0, 70px);
  }
}
.bnr_effect_box .bnr_effect_box_content .bnr_effect_box_text_area {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 100%;
  background-color: var(--color-primary);
  background: var(--color-secondary);
  position: absolute;
  transform: rotateX(-90deg) translate3d(0, 0, 126px); color: var(--color-on-primary); }
@media (max-width: 1000px) {
  .bnr_effect_box .bnr_effect_box_content .bnr_effect_box_text_area {
    transform: rotateX(-90deg) translate3d(0, 0, 100px);
  }
}
@media (max-width: 767px) {
  .bnr_effect_box .bnr_effect_box_content .bnr_effect_box_text_area {
    transform: rotateX(-90deg) translate3d(0, 0, 156px);
  }
}
@media (max-width: 600px) {
  .bnr_effect_box .bnr_effect_box_content .bnr_effect_box_text_area {
    transform: rotateX(-90deg) translate3d(0, 0, 100px);
  }
}
@media (max-width: 375px) {
  .bnr_effect_box .bnr_effect_box_content .bnr_effect_box_text_area {
    transform: rotateX(-90deg) translate3d(0, 0, 85px);
  }
}
.bnr_effect_box .bnr_effect_box_content .bnr_effect_box_text_area {
  width: 100%;
  transition: 0.8s;
  z-index: -1;
}
.bnr_effect_box .bnr_effect_box_content .bnr_effect_box_text {
  width: 80%;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--color-on-primary);
}
.bnr_effect_box .bnr_effect_box_content .bnr_effect_box_text p {
  font-size: 1.8rem;
}
.bnr_effect_box .bnr_effect_box_content .bnr_effect_box_text p span {
  line-height: 0.9;
  font-size: 1.4rem;
  display: block;
}
.bnr_effect_box .bnr_effect_box_content .bnr_effect_box_text p.more {
  max-width: 180px;
  width: 100%;
}
.bnr_effect_box .bnr_effect_box_content .bnr_effect_box_text p.more span {
  display: inline-block;
  letter-spacing: normal;
  border: 1px solid var(--color-primary);
  color: var(--color-heading-ink);
  background: var(--color-primary);
  padding: 1em 1.3em 1em 1em;
  margin: 1px auto;
  text-decoration: none;
  font-size: 0.875rem;
  width: 100%;
  transition: 0.3s;
}
.bnr_effect_box .bnr_effect_box_content .bnr_effect_box_text p.more span:after {
  border-color: var(--color-primary);
  transition: 0.3s;
}
.bnr_effect_box .bnr_effect_box_content .bnr_effect_box_text p.more span:hover {
  border-color: var(--color-primary);
  color: var(--color-heading-ink);
  background: var(--color-primary);
}
.bnr_effect_box .bnr_effect_box_content .bnr_effect_box_text p.more span:hover:after {
  right: 4%;
  border-color: var(--color-primary);
}
.bnr_effect_box .bnr_effect_box_content:hover .bnr_effect_box_img {
  transform: rotateX(90deg) translate3d(0, 0, 124px);
}
@media (max-width: 1000px) {
  .bnr_effect_box .bnr_effect_box_content:hover .bnr_effect_box_img {
    transform: rotateX(90deg) translate3d(0, 0, 100px);
  }
}
@media (max-width: 767px) {
  .bnr_effect_box .bnr_effect_box_content:hover .bnr_effect_box_img {
    transform: rotateX(90deg) translate3d(0, 0, 176px);
  }
}
@media (max-width: 700px) {
  .bnr_effect_box .bnr_effect_box_content:hover .bnr_effect_box_img {
    transform: rotateX(90deg) translate3d(0, 0, 140px);
  }
}
@media (max-width: 500px) {
  .bnr_effect_box .bnr_effect_box_content:hover .bnr_effect_box_img {
    transform: rotateX(90deg) translate3d(0, 0, 113px);
  }
}
@media (max-width: 375px) {
  .bnr_effect_box .bnr_effect_box_content:hover .bnr_effect_box_img {
    transform: rotateX(90deg) translate3d(0, 0, 74px);
  }
}
.bnr_effect_box .bnr_effect_box_content:hover .bnr_effect_box_text_area {
  transform: rotateX(0) translate3d(0, 0, 85px);
  z-index: 1;
}
@media (max-width: 375px) {
  .bnr_effect_box .bnr_effect_box_content:hover .bnr_effect_box_text_area {
    transform: rotateX(0) translate3d(0, 0, 77px);
  }
}

.tablet .bnr_effect_box_content a {
  display: block !important;
  width: 100% !important;
}
.tablet .bnr_effect_box_content .bnr_effect_box_text_area {
  display: none;
}
.tablet .bnr_effect_box_content .bnr_effect_box_img {
  transform: rotateX(0) translate3d(0, 0, 0) !important;
}
.tablet .bnr_effect_box_content .bnr_effect_box_img:hover .bnr_effect_box_img {
  transform: rotateX(0) translate3d(0, 0, 0) !important;
}
.tablet .bnr_effect_box_content .bnr_effect_box_img {
  max-width: none !important;
}

.mobile .span_3 {
  width: 50%;
  float: left;
  margin-bottom: 0;
}
.mobile .span_3 img {
  width: 100%;
}
.mobile .span_3 .bnr_effect_box_content a {
  display: block !important;
  width: 100% !important;
}
.mobile .span_3 .bnr_effect_box_content .bnr_effect_box_text_area {
  display: none;
}
.mobile .span_3 .bnr_effect_box_content .bnr_effect_box_img {
  transform: rotateX(0) translate3d(0, 0, 0) !important;
}
.mobile .span_3 .bnr_effect_box_content .bnr_effect_box_img:hover .bnr_effect_box_img {
  transform: rotateX(0) translate3d(0, 0, 0) !important;
}
.mobile .span_3 .bnr_effect_box_content .bnr_effect_box_img {
  max-width: none !important;
}
@media (max-width: 320px) {
  .mobile .span_3 .bnr_effect_box_content.staff_list {
    padding-top: 159.2356687898px !important;
  }
}

.span_9.column_main .container,
.two_column .container {
  max-width: 1000px !important;
}
.span_9.column_main .container .span_3,
.two_column .container .span_3 {
  margin-left: 0 !important;
  width: 25% !important;
}
.span_9.column_main .container,
.two_column .container {
  padding: 0 !important;
}
.span_9.column_main .container .bnr_effect_box_content.staff_list,
.two_column .container .bnr_effect_box_content.staff_list {
  height: 100%;
  padding: 100% 0 0;
  background-color: var(--color-secondary);
  color: var(--color-on-primary);
}
.span_9.column_main .container .bnr_effect_box_content.staff_list .more a,
.two_column .container .bnr_effect_box_content.staff_list .more a {
  transition: 0.5s;
  color: var(--color-on-primary) !important;
  border-color: #fff !important;
}
.span_9.column_main .container .bnr_effect_box_content.staff_list .more a:after,
.two_column .container .bnr_effect_box_content.staff_list .more a:after {
  border-color: #fff !important;
}
.span_9.column_main .container .bnr_effect_box_content.staff_list .more a:hover,
.two_column .container .bnr_effect_box_content.staff_list .more a:hover {
  color: var(--color-text) !important;
  background-color: #fff;
}
.span_9.column_main .container .bnr_effect_box_content.staff_list .more a:hover:after,
.two_column .container .bnr_effect_box_content.staff_list .more a:hover:after {
  border-color: #000 !important;
}
.span_9.column_main .container .bnr_effect_box_content,
.two_column .container .bnr_effect_box_content {
  position: relative;
  max-width: 250px;
  width: 100%;
}
.span_9.column_main .container .bnr_effect_box_content .bnr_effect_box_img,
.two_column .container .bnr_effect_box_content .bnr_effect_box_img {
  transition: 0.8s;
  transform: rotateX(0) translate3d(0, 0, 100px) !important;
}
@media (max-width: 1000px) {
  .span_9.column_main .container .bnr_effect_box_content .bnr_effect_box_img,
  .two_column .container .bnr_effect_box_content .bnr_effect_box_img {
    transform: rotateX(0) translate3d(0, 0, 100px) !important;
  }
}
.span_9.column_main .container .bnr_effect_box_content .bnr_effect_box_text_area,
.two_column .container .bnr_effect_box_content .bnr_effect_box_text_area {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 100%;
  background-color: var(--color-primary);
  position: absolute;
  transform: rotateX(-90deg) translate3d(0, 0, 90px) !important; color: var(--color-on-primary); }
@media (max-width: 1000px) {
  .span_9.column_main .container .bnr_effect_box_content .bnr_effect_box_text_area,
  .two_column .container .bnr_effect_box_content .bnr_effect_box_text_area {
    transform: rotateX(-90deg) translate3d(0, 0, 90px);
  }
}
@media (max-width: 767px) {
  .span_9.column_main .container .bnr_effect_box_content .bnr_effect_box_text_area,
  .two_column .container .bnr_effect_box_content .bnr_effect_box_text_area {
    transform: rotateX(-90deg) translate3d(0, 0, 176px) !important;
  }
}
@media (max-width: 600px) {
  .span_9.column_main .container .bnr_effect_box_content .bnr_effect_box_text_area,
  .two_column .container .bnr_effect_box_content .bnr_effect_box_text_area {
    transform: rotateX(-90deg) translate3d(0, 0, 100px) !important;
  }
}
@media (max-width: 400px) {
  .span_9.column_main .container .bnr_effect_box_content .bnr_effect_box_text_area,
  .two_column .container .bnr_effect_box_content .bnr_effect_box_text_area {
    transform: rotateX(-90deg) translate3d(0, 0, 70px) !important;
  }
}
.span_9.column_main .container .bnr_effect_box_content .bnr_effect_box_text_area,
.two_column .container .bnr_effect_box_content .bnr_effect_box_text_area {
  width: 100%;
  transition: 0.8s;
  z-index: -1;
}
.span_9.column_main .container .bnr_effect_box_content .bnr_effect_box_text,
.two_column .container .bnr_effect_box_content .bnr_effect_box_text {
  width: 80%;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.span_9.column_main .container .bnr_effect_box_content .bnr_effect_box_text p,
.two_column .container .bnr_effect_box_content .bnr_effect_box_text p {
  font-size: 1.8rem;
}
.span_9.column_main .container .bnr_effect_box_content .bnr_effect_box_text p span,
.two_column .container .bnr_effect_box_content .bnr_effect_box_text p span {
  line-height: 0.9;
  font-size: 1.4rem;
  display: block;
}
.span_9.column_main .container .bnr_effect_box_content .bnr_effect_box_text p.more,
.two_column .container .bnr_effect_box_content .bnr_effect_box_text p.more {
  max-width: 180px;
  width: 100%;
}
.span_9.column_main .container .bnr_effect_box_content .bnr_effect_box_text p.more a,
.two_column .container .bnr_effect_box_content .bnr_effect_box_text p.more a {
  width: 100%;
  border-color: #000;
  color: var(--color-text);
  background-color: transparent !important;
}
.span_9.column_main .container .bnr_effect_box_content .bnr_effect_box_text p.more a:after,
.two_column .container .bnr_effect_box_content .bnr_effect_box_text p.more a:after {
  border-color: #000;
}
.span_9.column_main .container .bnr_effect_box_content:hover .bnr_effect_box_img,
.two_column .container .bnr_effect_box_content:hover .bnr_effect_box_img {
  transform: rotateX(90deg) translate3d(0, 0, 90px);
}
@media (max-width: 1000px) {
  .span_9.column_main .container .bnr_effect_box_content:hover .bnr_effect_box_img,
  .two_column .container .bnr_effect_box_content:hover .bnr_effect_box_img {
    transform: rotateX(90deg) translate3d(0, 0, 100px) !important;
  }
}
@media (max-width: 767px) {
  .span_9.column_main .container .bnr_effect_box_content:hover .bnr_effect_box_img,
  .two_column .container .bnr_effect_box_content:hover .bnr_effect_box_img {
    transform: rotateX(90deg) translate3d(0, 0, 176px) !important;
  }
}
@media (max-width: 700px) {
  .span_9.column_main .container .bnr_effect_box_content:hover .bnr_effect_box_img,
  .two_column .container .bnr_effect_box_content:hover .bnr_effect_box_img {
    transform: rotateX(90deg) translate3d(0, 0, 123px);
  }
}
@media (max-width: 400px) {
  .span_9.column_main .container .bnr_effect_box_content:hover .bnr_effect_box_img,
  .two_column .container .bnr_effect_box_content:hover .bnr_effect_box_img {
    transform: rotateX(90deg) translate3d(0, 0, 70px) !important;
  }
}
.span_9.column_main .container .bnr_effect_box_content:hover .bnr_effect_box_text_area,
.two_column .container .bnr_effect_box_content:hover .bnr_effect_box_text_area {
  transform: rotateX(0) translate3d(0, 0, 60px) !important;
  z-index: 1;
}
@media (max-width: 767px) {
  .span_9.column_main .container .span_3,
  .two_column .container .span_3 {
    width: 50% !important;
    float: left;
    margin-bottom: 0;
  }
  .span_9.column_main .container .span_3 img,
  .two_column .container .span_3 img {
    width: 100%;
  }
  .span_9.column_main .container .span_3 .bnr_effect_box_content,
  .two_column .container .span_3 .bnr_effect_box_content {
    max-width: none !important;
  }
  .span_9.column_main .container .span_3 .staff_list,
  .two_column .container .span_3 .staff_list {
    padding: 100% 0 0;
  }
}