@charset "utf-8";

/* CSS INFORMATION -====================================================
File name : mango.css
Description :
===================================================================== */

@media screen and (min-width: 768px) {
  .sub_wrap {
    padding-bottom: calc(145 / 1100 * 100%);
  }

  .mango::before,
  .mango::after,
  .mango .inner::after {
    content: "";
    display: block;
    width: calc(186 / 1100 * 100%);
    padding-top: calc(123 / 1100 * 100%);
    background: url(../images/common/bg_ring1.png) no-repeat left top;
    background-size: 100% auto;
    position: absolute;
    top: 0;
    left: 50%;
    margin: calc(637 / 1100 * 100%) 0 0 calc(461 / 1100 * 100%);
  }

  .mango::after {
    width: calc(189 / 1100 * 100%);
    padding-top: calc(126 / 1100 * 100%);
    background: url(../images/common/bg_ring2.png) no-repeat left top;
    background-size: 100% auto;
    margin: calc(1239 / 1100 * 100%) 0 0 calc(-647 / 1100 * 100%);
  }

  .mango .inner::after {
    width: calc(165 / 1100 * 100%);
    padding-top: calc(125 / 1100 * 100%);
    background: url(../images/common/bg_ring3.png) no-repeat left top;
    background-size: 100% auto;
    left: auto;
    right: 0;
    top: auto;
    bottom: 0;
    margin: 0 calc(-56 / 1100 * 100%) calc(-70 / 1100 * 100%) 0;
  }
}

@media screen and (min-width: 1100px) {
  .sub_wrap {
    padding-bottom: 145px;
  }

  .mango::before {
    width: 186px;
    padding-top: 123px;
    margin: 637px 0 0 461px;
  }

  .mango::after {
    width: 189px;
    padding-top: 126px;
    margin: 1239px 0 0 -647px;
  }
}

/* =====================================================================
*    mango
* =================================================================== */
.bc_movie iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.mango .sec_contents {
  width: calc(670 / 750 * 100%);
  margin: 0 auto;
  -webkit-box-shadow: 0 0 calc(10 / 750 * 100vw) rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 calc(10 / 750 * 100vw) rgba(0, 0, 0, 0.1);
  z-index: 2;
}

.mango_box {
  background: linear-gradient(
    135deg,
    rgb(255, 252, 242) 0%,
    rgb(255, 250, 233) 30%,
    rgb(255, 250, 233) 100%
  );
}

.mango_box_wrap {
  padding: calc(130 / 670 * 100%) 0 calc(80 / 670 * 100%);
}

.mango_box::before,
.mango_box::after,
.mango_box_wrap::before,
.mango_box_wrap::after {
  content: "";
  display: block;
  width: calc(90 / 670 * 100%);
  padding-top: calc(90 / 670 * 100%);
  background: url(../images/common/bg_corner1.png) no-repeat center center;
  background-size: calc(80 / 90 * 100%) auto;
  position: absolute;
  top: 0;
  left: 0;
  margin: calc(15 / 670 * 100%) 0 0 calc(15 / 670 * 100%);
}

.mango_box::after {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  left: auto;
  right: 0;
  margin: calc(15 / 670 * 100%) calc(15 / 670 * 100%) 0 0;
}

.mango_box_wrap::before {
  -webkit-transform: rotate(270deg);
  transform: rotate(270deg);
  top: auto;
  bottom: 0;
  margin: 0 0 calc(15 / 670 * 100%) calc(15 / 670 * 100%);
}

.mango_box_wrap::after {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  top: auto;
  bottom: 0;
  left: auto;
  right: 0;
  margin: 0 calc(15 / 670 * 100%) calc(15 / 670 * 100%) 0;
}

.mango_movie_sec1 {
  margin: 0 0 calc(190 / 670 * 100%);
}

.mango_movie_sec {
  margin: 0 0 calc(150 / 670 * 100%);
}
.mango_movie_sec::before,
.mango_movie_sec::after,
.mango_movie_sec1::before,
.mango_movie_sec1::after {
  content: "";
  display: block;
  width: calc(276 / 670 * 100%);
  padding-top: calc(497 / 670 * 100%);
  background: url(../images/mango/bg_tree1_sp.png) no-repeat center center;
  background-size: 100% auto;
  position: absolute;
  top: 0;
  left: 0;
  margin: calc(52 / 670 * 100%) 0 0;
}

.mango_movie_sec::after {
  width: calc(276 / 670 * 100%);
  padding-top: calc(497 / 670 * 100%);
  background: url(../images/mango/bg_tree2_sp.png) no-repeat center center;
  background-size: 100% auto;
  left: auto;
  right: 0;
  margin: calc(400 / 670 * 100%) 0 0;
}

.mango_movie_sec2::before {
  width: 100%;
  padding-top: calc(181 / 670 * 100%);
  background: url(../images/mango/bg_tree3_sp.png) no-repeat center center;
  background-size: 100% auto;
  margin: calc(146 / 670 * 100%) 0 0;
}

.mango_movie_sec2::after {
  display: none;
}

.mango_ttl {
  width: calc(629 / 670 * 100%);
  color: #ab9230;
  font-size: 4rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  letter-spacing: 0.05em;
  margin: 0 auto calc(110 / 670 * 100%);
  padding: calc(18 / 670 * 100%) 0;
  background: url(../images/mango/bg_mango_name_sp.png) no-repeat left top;
  background-size: 100% 100%;
  z-index: 2;
}

.mango_movie,
.mango_movie1 {
  z-index: 2;
}

.mango_movie li {
  margin: 0 0 calc(115 / 670 * 100%);
}

.mango_movie li:last-child {
  margin: 0;
}

.mango_movie_photo dt {
  width: calc(242 / 670 * 100%);
  margin: 0 auto calc(17 / 670 * 100%);
  padding: calc(7 / 670 * 100%) 0 calc(15 / 670 * 100%);
  color: #fff;
  font-size: 2.6rem;
  font-weight: 400;
  line-height: 1;
  text-align: center;
  letter-spacing: 0.05em;
  background: url(../images/mango/bg_mango_version.png) no-repeat left top;
  background-size: 100% 100%;
}

.mango_movie_photo dd {
  width: calc(540 / 670 * 100%);
  margin: 0 auto;
  padding: calc(8 / 670 * 100%);
  background-color: #c9244f;
}

.mango_movie_btn::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: url(../images/top/btn_next_movie.png) no-repeat center center;
  background-size: calc(98 / 524 * 100%) auto;
  position: absolute;
  top: 0;
  left: 0;
}

@media screen and (min-width: 768px) {
  .mango .sec_contents {
    width: 100%;
    -webkit-box-shadow: 0 0 calc(10 / 1100 * 100vw) rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 calc(10 / 1100 * 100vw) rgba(0, 0, 0, 0.1);
  }

  .mango_box {
    background: linear-gradient(
      135deg,
      rgb(255, 255, 255) 0%,
      rgb(255, 250, 233) 50%,
      rgb(255, 250, 233) 100%
    );
  }

  .mango_box::before,
  .mango_box::after,
  .mango_box_wrap::before,
  .mango_box_wrap::after {
    width: calc(48 / 1000 * 100%);
    padding-top: calc(48 / 1000 * 100%);
    background-size: 100% auto;
    margin: calc(10 / 1000 * 100%) 0 0 calc(10 / 1000 * 100%);
  }

  .mango_box::after {
    margin: calc(10 / 1000 * 100%) calc(10 / 1000 * 100%) 0 0;
  }

  .mango_box_wrap::before {
    margin: 0 0 calc(10 / 1000 * 100%) calc(10 / 1000 * 100%);
  }

  .mango_box_wrap::after {
    margin: 0 calc(10 / 1000 * 100%) calc(10 / 1000 * 100%) 0;
  }

  .mango_box_wrap {
    padding: calc(95 / 1000 * 100%) 0 calc(35 / 1000 * 100%);
  }
  .mango_movie_sec {
    margin: 0 0 calc(60 / 1000 * 100%);
  }

  .mango_movie_sec::before {
    width: calc(207 / 1000 * 100%);
    padding-top: calc(373 / 1000 * 100%);
    margin: calc(-62 / 1000 * 100%) 0 0;
  }

  .mango_movie_sec::after {
    width: calc(207 / 1000 * 100%);
    padding-top: calc(373 / 1000 * 100%);
    margin: calc(-62 / 1000 * 100%) 0 0;
  }

  .mango_movie_sec2 {
    overflow: hidden;
  }

  .mango_movie_sec2::before {
    width: 100%;
    padding-top: calc(248 / 1000 * 100%);
    background: url(../images/mango/bg_tree3_pc.png) no-repeat center center;
    background-size: 100% auto;
    margin: calc(160 / 1000 * 100%) 0 0;
  }

  .mango_ttl {
    font-size: 3rem;
    width: calc(629 / 1000 * 100%);
    margin: 0 auto calc(70 / 1000 * 100%);
    padding: calc(16 / 1000 * 100%) 0;
    background: url(../images/mango/bg_mango_name_pc.png) no-repeat left top;
    background-size: 100% 100%;
  }
  .mango_movie {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: calc(840 / 1000 * 100%);
    margin: 0 auto;
  }
  .mango_movie1 {
    width: calc(840 / 1000 * 100%);
    margin: 0 auto;
  }
  .mango_movie1 li {
    width: calc(600 / 840 * 100%);
    margin: 0 auto calc(40 / 840 * 100%);
  }
  .mango_movie li,
  .mango_movie li:last-child {
    width: calc(400 / 840 * 100%);
    margin: 0 calc(40 / 840 * 100%) calc(40 / 840 * 100%) 0;
  }

  .mango_movie li:nth-child(even) {
    margin-right: 0;
  }

  .mango_movie_photo {
  }

  .mango_movie_photo dt {
    width: calc(160 / 400 * 100%);
    margin: 0 auto calc(20 / 400 * 100%);
    font-size: 1.8rem;
  }

  .mango_movie_photo dd {
    width: 100%;
    padding: calc(4 / 400 * 100%);
  }

  .mango_movie_btn::after {
    background-size: calc(63 / 392 * 100%) auto;
    -webkit-transition: 0.3s ease;
    transition: 0.3s ease;
  }

  .mango_movie_btn:hover::after {
    -webkit-transform: scale(1.23);
    transform: scale(1.23);
  }
}

@media screen and (min-width: 1100px) {
  .mango .sec_contents {
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }
}

/* =====================================================================
*    backnumber
* =================================================================== */
.backnumber_box {
  padding: calc(130 / 670 * 100%) 0 calc(80 / 670 * 100%);
  background: url(../images/common/bg_cross1.png) repeat left top;
  background-size: calc(64 / 670 * 100%) auto;
}

.bucknumber_list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: calc(620 / 670 * 100%);
  margin: 0 auto;
}

.bucknumber_list li {
  width: calc(300 / 620 * 100%);
  margin: 0 calc(20 / 620 * 100%) calc(30 / 620 * 100%) 0;
}

.bucknumber_list li:nth-child(2n),
.bucknumber_list li:last-child {
  margin-right: 0;
}

.bucknumber_list li figcaption {
  width: calc(60 / 300 * 100%);
  padding: 0.35em 0 0.5em;
  color: #fff;
  font-size: 2.6rem;
  font-family: "Noto Serif JP", 游明朝, "Yu Mincho", YuMincho,
    "Hiragino Mincho ProN", "Hiragino Mincho Pro", HGS明朝E, メイリオ, Meiryo,
    serif;
  line-height: 1;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  margin: calc(-10 / 300 * 100%) 0 0 calc(-8 / 300 * 100%);
}

.bucknumber_list li figcaption::before,
.bucknumber_list li figcaption::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  -webkit-transform: skewY(-15deg) rotate(2deg);
  transform: skewY(-15deg) rotate(2deg);
  position: absolute;
  top: 0;
  left: 0;
}

.bucknumber_list li figcaption::before {
  background-color: rgba(0, 0, 0, 0.8);
  margin: calc(5 / 60 * 100%) 0 0 calc(5 / 60 * 100%);
}

.bucknumber_list li figcaption::after {
  background-color: rgba(183, 15, 59, 0.9);
}

.bucknumber_list li figcaption span {
  font-weight: 600;
  z-index: 2;
}

@media screen and (min-width: 768px) {
  .backnumber_box {
    padding: calc(70 / 1000 * 100%) 0 calc(80 / 1000 * 100%);
    background-size: calc(64 / 1000 * 100%) auto;
  }

  .backnumber_box .sec_ttl {
    margin: 0 0 calc(50 / 1000 * 100%);
  }

  .bucknumber_list {
    width: calc(800 / 1000 * 100%);
  }

  .bucknumber_list li,
  .bucknumber_list li:nth-child(2n) {
    width: calc(252 / 800 * 100%);
    margin: 0 calc(22 / 800 * 100%) calc(22 / 800 * 100%) 0;
  }

  .bucknumber_list li:nth-child(3n),
  .bucknumber_list li:last-child {
    margin-right: 0;
  }

  .bucknumber_list li a:hover {
    opacity: 0.7;
  }
}

@media screen and (min-width: 1100px) {
}

/* =====================================================================
*    popup
* =================================================================== */
.popup {
  z-index: 100000;
}

.popup_area {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  overflow-y: auto;
}

.popup_inner {
  width: calc(680 / 750 * 100%);
}

@media screen and (min-width: 768px) {
  .popup_inner {
    width: calc(900 / 1100 * 100%);
    max-width: 900px;
    padding: calc(60 / 1100 * 100%) 0;
  }

  .popup_close {
    margin: -6.5% 0 0;
  }
}

@media screen and (min-width: 1100px) {
  .popup_inner {
    padding: 60px 0;
  }
}

/* =====================================================================
*    lightbox
* =================================================================== */
.lightbox {
  width: 100% !important;
  height: 100% !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.lightboxOverlay {
  width: 100% !important;
  opacity: 0.6 !important;
}

.lb-outerContainer {
  width: calc(680 / 750 * 100%) !important;
  border-radius: 0 !important;
  -ms-flex-item-align: center;
  align-self: center;
}

.lb-outerContainer::before {
  content: "";
  display: block;
  width: calc(60 / 680 * 100%);
  padding-top: calc(60 / 680 * 100%);
  background: url(../plugin/lightbox/images/close2.png) no-repeat left top;
  background-size: 100% auto;
  position: absolute;
  top: 0;
  right: 0;
  margin: calc(-80 / 680 * 100%) 0 0;
  pointer-events: none;
}

.lightbox .lb-image {
  width: 100% !important;
  border: 0 !important;
  border-radius: 0 !important;
}

.lb-dataContainer {
  width: calc(680 / 750 * 100%) !important;
  padding: 0 !important;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  margin: calc(-330 / 750 * 100%) auto 0;
  display: none !important;
}

.lb-data {
  padding: 0 !important;
}

.lb-data .lb-details {
  display: none;
}

.lb-data .lb-close {
  width: auto;
  height: auto;
  float: none;
  background: none;
}

.lb-data .lb-close::before,
.lb-data .lb-close::after {
  content: "";
  display: block;
  width: 2px;
  padding-top: 12%;
  background-color: #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  margin: 0 5% 0 auto;
}

.lb-data .lb-close::after {
  position: absolute;
  top: 0;
  right: 0;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.lb-nav a {
  opacity: 1 !important;
  background-size: auto 12% !important;
}

@media screen and (min-width: 768px) {
  .lb-outerContainer {
    width: calc(900 / 1100 * 100%) !important;
    max-width: 900px !important;
  }

  .lb-dataContainer {
    width: calc(900 / 1100 * 100%) !important;
    max-width: 900px !important;
    margin: calc(-360 / 1100 * 100%) auto 0;
  }

  .lb-outerContainer::before {
    width: calc(37 / 900 * 100%);
    padding-top: calc(37 / 900 * 100%);
    margin: calc(-47 / 900 * 100%) 0 0;
  }

  .lb-data .lb-close::before,
  .lb-data .lb-close::after {
    padding-top: 6%;
    margin: 0 2.5% 0 auto;
  }

  .lb-nav a {
    background-size: auto 8% !important;
  }
}

@media screen and (min-width: 1100px) {
  .lb-dataContainer {
    margin: -360px auto 0;
  }
}