@charset "UTF-8";
@import url("global.css");
/* ---------- Index-Page ---------- */
#bodyarea .parallax figure {
  height: 110%;
}

.introduction {
  position: relative;
}
.introduction .image {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 55%;
  overflow: hidden;
}
.introduction .main {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.introduction .main::before {
  content: "";
  height: 620px;
  display: block;
}
.introduction .main .text {
  padding-right: 60px;
  padding-bottom: 30px;
}
.introduction .main .text .catch {
  font-family: "Zen Old Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-size: min(28px,2.7vw);
  margin-bottom: 60px;
}
.introduction .main .text p + p {
  margin-top: 20px;
}

.sectitle span {
  display: block;
}
.sectitle .ja {
  font-family: "Zen Old Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-size: min(33px,2.8vw);
  font-weight: 500;
}
.sectitle .en {
  font-family: "Jost", "Zen Kaku Gothic New", sans-serif;
  font-size: 14px;
  color: #706D65;
}

.kakaku {
  position: relative;
  display: flex;
  gap: min(120px,8vw);
  justify-content: flex-start;
  padding-block: 200px 120px;
}
.kakaku .sectitle {
  -webkit-writing-mode: vertical-rl;
  -moz-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  white-space: nowrap;
  line-height: 1.4;
  letter-spacing: .1em;
  display: inline-block;
  letter-spacing: .1em;
}
.kakaku .text p + p {
  margin-top: 20px;
}
.kakaku .image {
  width: min(480px,33vw);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  position: absolute;
  right: -140px;
  top: -10px;
}

.planlist .sectitle {
  display: flex;
  align-items: center;
  margin-bottom: 80px;
}
.planlist .sectitle .en {
  margin-inline: 15px 20px;
  padding-top: 3px;
}
.planlist .sectitle::after {
  content: "";
  height: 1px;
  background-color: #BCBCBC;
  width: auto;
  display: block;
  flex-grow: 1;
}
.planlist ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: min(80px,5vw);
}
.planlist ul li {
  display: contents;
}
.planlist ul li a {
  display: grid;
  margin-bottom: 60px;
  gap: 0;
  grid-template-rows: subgrid;
  grid-row: span 3;
}
.planlist ul li a .image {
  aspect-ratio: 3 / 2;
  position: relative;
  overflow: hidden;
}
.planlist ul li a .image figure {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.planlist ul li a .image figure img {
  transition: all 0.5s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0s;
  backface-visibility: hidden;
}
.planlist ul li a .image figure::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #1D1D1D;
  mix-blend-mode: multiply;
  opacity: 0;
  z-index: 1;
  transition: all 0.5s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0s;
  backface-visibility: hidden;
}
.planlist ul li a .image figure::after {
  content: "詳しく見る";
  color: #fff;
  position: absolute;
  bottom: 15px;
  right: 40px;
  z-index: 2;
  font-family: "Zen Old Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  opacity: 0;
  transition: all 0.5s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0.2s;
  backface-visibility: hidden;
}
.planlist ul li a .posttitle {
  position: relative;
  padding-left: 72px;
  margin-block: 16px 14px;
  font-family: "Zen Old Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-weight: 500;
  line-height: 1.5;
}
.planlist ul li a .posttitle .num {
  display: block;
  position: absolute;
  top: 5px;
  left: 0;
  line-height: 1;
  text-align: center;
  padding-left: 8px;
  font-weight: 400;
  font-family: "Jost", "Zen Kaku Gothic New", sans-serif;
  font-size: 14px;
}
.planlist ul li a .posttitle .num i {
  display: block;
  font-size: 40px;
}
.planlist ul li a .menseki {
  display: flex;
  gap: 12px;
  align-items: center;
  padding-left: 70px;
}
.planlist ul li a .menseki dt {
  background-color: #E1E1E1;
  padding: 2px 12px;
  letter-spacing: 0;
  font-size: 13px;
}
.planlist ul li a .menseki dd {
  font-size: 14px;
}
@media (any-hover: hover) {
  .planlist ul li a:hover .image figure img {
    filter: blur(2px);
  }
  .planlist ul li a:hover .image figure::before {
    opacity: .6;
  }
  .planlist ul li a:hover .image figure::after {
    opacity: 1;
    translate: 20px 0;
  }
}

/* ---------- Modal ---------- */
.plan_modalbox {
  position: relative;
  margin: 40px auto;
}
.plan_modalbox .modal_inner {
  background: #F1F1EF url("../img/bg_texture.jpg") repeat;
  background-size: 375px 375px;
  width: 1200px;
  margin: 0 auto;
  box-sizing: border-box;
  position: relative;
  padding: min(50px,5vw);
}
.plan_modalbox .plan_num {
  font-family: "Jost", "Zen Kaku Gothic New", sans-serif;
  line-height: 1.5;
  margin-bottom: 10px;
}
.plan_modalbox .plan_num span {
  padding-left: 5px;
  display: inline-block;
  content: counter(count,decimal-leading-zero);
  font-size: 38px;
  vertical-align: -1px;
}
.plan_modalbox .plan_title {
  font-family: "Zen Old Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-size: clamp(16px, 2.9vw, 24px);
  line-height: 1.5;
  margin-bottom: 45px;
}
.plan_modalbox .plan_inner {
  display: flex;
  gap: min(60px,5vw);
}
.plan_modalbox .plan_image {
  width: 55%;
  flex-shrink: 0;
}
.plan_modalbox .plan_main {
  flex-grow: 1;
}
.plan_modalbox .plan_main .menseki {
  line-height: 1.5;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  margin-bottom: 40px;
}
.plan_modalbox .plan_main .menseki dt {
  font-size: 14px;
  font-weight: 500;
  padding: 4px 12px;
  background-color: #E1E1E1;
  letter-spacing: 0;
}
.plan_modalbox .plan_main .menseki dd {
  letter-spacing: .1em;
}
.plan_modalbox .plan_main .text {
  font-size: 15px;
}
.plan_modalbox .plan_main .text p + p {
  margin-top: 10px;
}
.plan_modalbox .plan_floor {
  background-color: rgba(255, 255, 255, 0.6);
  padding: 30px 5%;
  margin-top: 40px;
  display: flex;
  align-items: center;
  gap: 4%;
  justify-content: center;
}
.plan_modalbox .plan_floor figure {
  text-align: center;
}
.plan_modalbox .plan_floor figure figcaption {
  margin-top: 10px;
  font-family: "Jost", "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
}

.mfp-bg {
  opacity: .5;
}

.mfp-wrap.mfp-ready .mfp-content {
  opacity: 1;
}
.mfp-wrap .mfp-content {
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.04, 0.435, 0.315, 0.9);
  backface-visibility: hidden;
}

.mfp-inline-holder .mfp-content,
.mfp-ajax-holder .mfp-content {
  width: auto;
}

.mfp-close,
.mfp-close-btn-in .mfp-close {
  width: 68px;
  height: 68px;
  line-height: 68px;
  font-size: 38px;
  font-weight: 100;
  font-family: "Zen Old Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  background-color: #1A1A3F;
  color: #fff;
  opacity: 1;
  top: 0;
  right: 0;
  letter-spacing: 0;
}

.mfp-arrow::before {
  display: none;
}
.mfp-arrow::after {
  border-top-width: 20px;
  border-bottom-width: 20px;
  top: 0;
}

.mfp-arrow-right {
  right: 50%;
  margin-right: -680px;
}
.mfp-arrow-right::after {
  border-left-color: #FFF;
  border-left-width: 34px;
  margin-left: 30px;
}

.mfp-arrow-left {
  left: 50%;
  margin-left: -680px;
}
.mfp-arrow-left::after {
  border-right-color: #FFF;
  border-right-width: 34px;
  margin-left: 22px;
}

/* fotorama */
.fotorama__thumb-border {
  border-color: #1A1A3F !important;
  opacity: .5;
}

.fotorama__caption {
  font-size: .9em;
  font-family: "Zen Kaku Gothic New", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "游ゴシック Medium", "Yu Gothic Medium", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Meiryo", "メイリオ", Helvetica, sans-serif;
  letter-spacing: 0;
}

.fotorama__caption__wrap {
  background-color: rgba(229, 229, 229, 0.5);
}

/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-1 ( 1600px )

------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 1600px) {
  .introduction .main .text {
    padding-right: 1vw;
  }

  .kakaku .image {
    right: -50px;
  }
}
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-2 ( 1300px )

------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 1300px) {
  /* ---------- Index-Page ---------- */
  .introduction .image {
    width: 50%;
  }
  .introduction .main::before {
    width: 55%;
    flex-shrink: 0;
    height: 600px;
  }
  .introduction .main .text {
    padding-right: 0;
  }
  .introduction .main .text p {
    font-size: 15px;
  }

  .kakaku {
    padding-block: 180px 100px;
  }
  .kakaku .image {
    right: 0;
  }

  .planlist ul {
    column-gap: 3.5vw;
  }
}
@media only screen and (max-width: 1300px) and (max-width: 1100px) {
  .planlist ul {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 5vw;
  }
}

@media only screen and (max-width: 1300px) {
  /* ---------- Modal ---------- */
  .plan_modalbox {
    margin-inline: 40px;
  }
  .plan_modalbox .modal_inner {
    width: auto;
  }

  .mfp-close,
  .mfp-close-btn-in .mfp-close {
    width: 60px;
    height: 60px;
    line-height: 60px;
  }

  .mfp-arrow {
    width: 40px;
    height: 60px;
  }
  .mfp-arrow::after {
    margin-top: 14px;
    border-top-width: 16px;
    border-bottom-width: 16px;
  }

  .mfp-arrow-right {
    right: 5px;
    margin-right: 0;
  }
  .mfp-arrow-right::after {
    border-left-width: 20px;
    margin-left: 10px;
  }

  .mfp-arrow-left {
    left: 5px;
    margin-left: 0;
  }
  .mfp-arrow-left::after {
    border-right-width: 20px;
    margin-left: 6px;
  }
}
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-3 ( 959px )

------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 959px) {
  /* ---------- Index-Page ---------- */
  .introduction .image {
    position: static;
    width: auto;
    aspect-ratio: 16 / 9;
    margin-bottom: 60px;
  }
  .introduction .main {
    display: block;
  }
  .introduction .main::before {
    display: none;
  }
  .introduction .main .text {
    padding-bottom: 0;
  }
  .introduction .main .text .catch {
    font-size: min(26px,5vw);
    margin-bottom: 40px;
  }

  .sectitle .ja {
    font-size: min(25px,5vw);
  }

  .kakaku {
    padding-block: 140px 70px;
  }
  .kakaku .text p + p {
    margin-top: 10px;
  }
  .kakaku .image {
    width: min(480px,36vw);
    right: -2vw;
    top: -60px;
  }

  .planlist .sectitle {
    margin-bottom: 50px;
  }
  .planlist .sectitle .en {
    margin-inline: 10px 20px;
    padding-top: 3px;
  }
  .planlist ul {
    column-gap: 4vw;
  }
  .planlist ul li a {
    margin-bottom: 55px;
  }
  .planlist ul li a .posttitle {
    padding-left: 60px;
    margin-block: 14px;
  }
  .planlist ul li a .posttitle .num {
    top: 2px;
  }
  .planlist ul li a .posttitle .num i {
    font-size: 30px;
  }
  .planlist ul li a .menseki {
    gap: 10px;
    padding-left: 60px;
  }
  .planlist ul li a .menseki dt {
    padding: 1px 10px;
  }

  /* ---------- Modal ---------- */
  .plan_modalbox {
    width: 700px;
  }
  .plan_modalbox .plan_num {
    margin-bottom: 5px;
  }
  .plan_modalbox .plan_num span {
    font-size: 32px;
  }
  .plan_modalbox .plan_title {
    margin-bottom: 30px;
  }
  .plan_modalbox .plan_inner {
    display: block;
  }
  .plan_modalbox .plan_image {
    width: auto;
    margin-bottom: 20px;
  }
  .plan_modalbox .plan_main .menseki {
    margin-bottom: 20px;
  }
  .plan_modalbox .plan_main .menseki dt {
    font-size: 13px;
  }
  .plan_modalbox .plan_main .text {
    font-size: inherit;
  }
  .plan_modalbox .plan_floor {
    margin-block: 30px 10px;
  }
}
@media only screen and (max-width: 959px) and (max-width: 800px) {
  .plan_modalbox {
    width: 580px;
  }
}

@media only screen and (max-width: 959px) {
  .mfp-arrow {
    transform: none;
  }
}
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-4 ( 644px )

------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 644px) {
  /* ---------- Index-Page ---------- */
  .introduction {
    margin-bottom: 40px;
  }
  .introduction .image {
    margin-bottom: 40px;
  }
  .introduction .main .text .catch {
    margin-bottom: 25px;
  }
  .introduction .main .text p {
    font-size: inherit;
  }
  .introduction .main .text p + p {
    margin-top: 10px;
  }
  .introduction .main .text p:not([class]) br {
    display: none;
  }

  .sectitle .en {
    font-size: 12px;
  }

  .kakaku {
    display: block;
    padding-block: 0 50px;
  }
  .kakaku .sectitle {
    margin: 0 0 30px 9vw;
    height: 48vw;
    padding-top: 2vw;
    text-align: center;
  }
  .kakaku .text p br {
    display: none;
  }
  .kakaku .image {
    width: 75%;
    right: -5vw;
    top: 0;
    aspect-ratio: 4 / 3;
  }

  .planlist .sectitle {
    margin-bottom: 40px;
  }
  .planlist .sectitle .en {
    margin-inline: 10px 20px;
  }
  .planlist ul {
    display: block;
  }
  .planlist ul li {
    display: block;
    margin-bottom: 40px;
  }
  .planlist ul li a {
    display: block;
    margin-bottom: 0;
  }
  .planlist ul li a .posttitle {
    margin-block: 14px 12px;
  }
  .planlist ul li a .menseki dt {
    font-size: 12px;
    font-weight: 500;
  }

  /* ---------- Modal ---------- */
  .plan_modalbox {
    margin: 35px auto;
    width: 540px;
  }
  .plan_modalbox .modal_inner {
    padding: 5vw;
  }
  .plan_modalbox .plan_num {
    margin-bottom: 0;
  }
  .plan_modalbox .plan_num span {
    font-size: 28px;
    vertical-align: -1px;
  }
  .plan_modalbox .plan_title {
    font-weight: 500;
  }
  .plan_modalbox .plan_inner {
    display: block;
  }
  .plan_modalbox .plan_image {
    margin-bottom: 15px;
  }
  .plan_modalbox .plan_main .menseki {
    margin-bottom: 15px;
    font-weight: 500;
  }
  .plan_modalbox .plan_main .text {
    font-size: 13px;
  }
}
@media only screen and (max-width: 644px) and (max-width: 600px) {
  .plan_modalbox {
    width: 440px;
  }
}
@media only screen and (max-width: 644px) and (max-width: 500px) {
  .plan_modalbox {
    width: 390px;
  }
}
@media only screen and (max-width: 644px) and (max-width: 440px) {
  .plan_modalbox {
    width: 350px;
  }
}
@media only screen and (max-width: 644px) and (max-width: 390px) {
  .plan_modalbox {
    width: 300px;
  }
}

@media only screen and (max-width: 644px) {
  .mfp-container {
    padding: 0;
  }

  .mfp-close,
  .mfp-close-btn-in .mfp-close {
    width: 44px;
    height: 44px;
    line-height: 44px;
    font-size: 25px;
  }

  .mfp-arrow {
    width: 5%;
    height: 50px;
  }
  .mfp-arrow::after {
    margin-top: 10px;
    border-top-width: 15px;
    border-bottom-width: 15px;
  }

  .mfp-arrow-right {
    right: 0;
  }
  .mfp-arrow-right::after {
    border-left-width: 12px;
    margin: 0;
    left: 50%;
    margin-left: -6px;
  }

  .mfp-arrow-left {
    left: 0;
  }
  .mfp-arrow-left::after {
    border-right-width: 12px;
    margin: 0;
    right: 50%;
    margin-right: -6px;
  }
}

/*# sourceMappingURL=plan.css.map */