@charset "UTF-8";
@import url("global.css");
.introduction {
  display: flex;
  justify-content: space-between;
}
.introduction .catch {
  font-size: min(35px,3vw);
  font-family: "Zen Old Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-weight: 600;
}
.introduction .text {
  width: 50%;
  flex-shrink: 0;
  padding-top: 10px;
}

#planlist {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 2.5%;
  margin-block: 70px;
}
#planlist li {
  display: contents;
}
#planlist li a {
  margin-top: 60px;
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  gap: 0;
  container-type: inline-size;
}
@media (any-hover: hover) {
  #planlist li a:hover .image::before {
    opacity: 1;
  }
  #planlist li a:hover .image::after {
    opacity: 1;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
  }
}
#planlist li a .image {
  aspect-ratio: 5 / 4;
  margin-bottom: 20px;
  position: relative;
}
#planlist li a .image::before {
  content: "";
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(48, 48, 48, 0.5);
  transition: all 0.5s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0s;
  -webkit-transition: all 0.5s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0s;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  opacity: 0;
}
#planlist li a .image::after {
  content: "詳しくみる";
  font-size: .85em;
  font-weight: 500;
  position: absolute;
  z-index: 3;
  top: 50%;
  -webkit-transform: translateY(0);
  transform: translateY(0);
  left: 3vw;
  right: 3vw;
  margin: 0 auto;
  width: fit-content;
  padding: 3px 15px;
  border: #FFF solid 1px;
  color: #FFF;
  transition: all 0.5s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0s;
  -webkit-transition: all 0.5s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0s;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  opacity: 0;
}
#planlist li a .title {
  line-height: 1.5;
  margin-bottom: 12px;
  padding-inline: 10px;
}
#planlist li a .title .number {
  display: block;
  color: #E6001A;
  font-size: 13px;
  font-weight: 700;
  font-family: "Outfit", "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;
}
#planlist li a .title strong {
  display: block;
  font-size: 18px;
  font-weight: 700;
}
#planlist li a .data {
  display: flex;
  padding-inline: 10px;
  font-size: 13px;
  font-weight: 500;
}
#planlist li a .data dl {
  display: flex;
  gap: 12px;
  padding-right: 20px;
  margin-right: 20px;
  position: relative;
  line-height: 24px;
  align-items: flex-end;
}
#planlist li a .data dl::after {
  content: "";
  width: 1px;
  height: 20px;
  position: absolute;
  top: 50%;
  right: 0;
  margin-top: -10px;
  background-color: #5A5657;
}
#planlist li a .data dl:last-of-type {
  padding-right: 0;
  margin-right: 0;
}
#planlist li a .data dl:last-of-type::after {
  display: none;
}
#planlist li a .data dl dt {
  font-size: 13px;
  font-weight: 700;
}
#planlist li a .data dl dd span {
  display: inline-block;
  font-size: 130%;
  font-weight: 700;
  padding-right: 3px;
}
@container (width <= 420px) {
  #planlist li a .image {
    margin-bottom: 15px;
  }
  #planlist li a .data {
    display: block;
  }
  #planlist li a .data dl {
    padding-right: 0;
    margin-right: 0;
  }
  #planlist li a .data dl::after {
    display: none;
  }
}
@container (width <= 320px) {
  #planlist li a .title strong {
    font-size: 17px;
  }
  #planlist li a .data {
    display: block;
  }
  #planlist li a .data dl {
    padding-right: 0;
    margin-right: 0;
  }
  #planlist li a .data dl::after {
    display: none;
  }
}
/* ---------- Modal-Window ---------- */
.modal-panel {
  padding: 60px;
}

.modal-title .number {
  font-size: 20px;
  font-family: "Outfit", "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;
  font-weight: 700;
  color: #E6001A;
}
.modal-title .title {
  font-size: clamp(16px, 3.2vw, 25px);
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 40px;
}

.modal-main {
  display: flex;
  gap: min(80px,6vw);
  justify-content: space-between;
}
.modal-main .image {
  width: 47%;
  flex-shrink: 0;
  aspect-ratio: 10 / 7;
}
.modal-main .main .data {
  line-height: 30px;
  margin-bottom: 40px;
}
.modal-main .main .data dl {
  display: flex;
  font-size: 13px;
  font-weight: 500;
}
.modal-main .main .data dl dt {
  font-weight: 700;
  margin-right: 8px;
  white-space: nowrap;
}
.modal-main .main .data dl dd * {
  font-family: "Outfit", "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;
  font-weight: 700;
  padding-inline: 5px 3px;
}
.modal-main .main .data dl dd strong {
  font-size: 1.6em;
  vertical-align: -1px;
}
.modal-main .main .data dl dd span {
  font-size: 1.1em;
}

.modal-zumen {
  margin-block: 70px;
}
.modal-zumen .inner {
  height: 360px;
}

.modal-shiharai {
  text-align: center;
  background-color: #F5F3F0;
  padding: 60px 30px 40px;
}
.modal-shiharai .title {
  margin-bottom: 25px;
  line-height: 1.6;
}
.modal-shiharai .title strong {
  font-size: 18px;
  font-weight: 700;
  display: block;
}
.modal-shiharai ul.price {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-bottom: 20px;
}
.modal-shiharai ul.price li {
  flex: 1;
  max-width: 300px;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 5px;
  padding: 20px 10px 10px;
  position: relative;
}
.modal-shiharai ul.price li::after {
  content: "+";
  font-size: 40px;
  color: #999;
  line-height: 1;
  position: absolute;
  right: -40px;
  top: 28px;
}
.modal-shiharai ul.price li:last-of-type::after {
  display: none;
}
.modal-shiharai ul.price li:nth-last-child(2)::after {
  content: "=";
}
.modal-shiharai .item {
  display: block;
  font-size: 16px;
  font-weight: 700;
}
.modal-shiharai .number {
  display: inline-block;
  font-family: "Outfit", "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;
  font-size: 1.6em;
  font-weight: 500;
  vertical-align: -1px;
  padding-right: 5px;
}
.modal-shiharai .sub {
  display: inline-block;
  text-align: left;
  font-size: 13px;
  font-weight: 500;
}
.modal-shiharai .monthly {
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 5px;
  padding: 35px 20px 30px;
  max-width: 980px;
  margin: 30px auto;
  position: relative;
}
.modal-shiharai .monthly::before {
  content: "\f078";
  font-size: 40px;
  font-weight: 900;
  font-family: "Font Awesome 6 free", "Font Awesome 6 Brands";
  line-height: 1;
  color: #999;
  position: absolute;
  top: -21px;
  left: 0;
  right: 0;
  display: block;
}
.modal-shiharai .monthly .notice {
  text-align: left;
  max-width: 670px;
  margin: 0 auto;
  font-size: 12px;
  font-weight: 500;
}
.modal-shiharai .monthly .notice li {
  display: inline-block;
  margin-inline: 5px;
  padding-left: 1.3em;
  text-indent: -1.3em;
}
.modal-shiharai .monthly .notice li::before {
  color: #A49375;
  content: "※";
  padding-right: 2px;
}

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

 Responsive-Breakpoint-1 ( 1600px )
 
------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-2 ( 1300px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 1300px) {
  #planlist li a .title {
    padding-inline: 5px;
  }
  #planlist li a .data {
    padding-inline: 5px;
  }
}
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-3 ( 959px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 959px) {
  .introduction {
    display: block;
  }
  .introduction .catch {
    font-size: min(30px,5.8vw);
  }
  .introduction .text {
    width: auto;
    padding-top: 30px;
  }

  #planlist {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 5%;
    margin-block: 10px;
  }

  /* ---------- Modal-Window ---------- */
  .modal-panel {
    padding: 5vw;
  }

  .modal-main {
    display: block;
  }
  .modal-main .image {
    width: auto;
    max-width: 640px;
    margin: 0 auto 30px;
  }
  .modal-main .main .data {
    display: flex;
    margin: 0 auto 40px;
  }
  .modal-main .main .data dl::after {
    content: "";
    width: 18px;
    height: 1px;
    background-color: #5A5657;
    display: block;
    rotate: -50deg;
    margin: 17px 10px 0;
  }
  .modal-main .main .data dl:last-of-type::after {
    display: none;
  }
  .modal-main .main .comment {
    line-height: inherit;
  }

  .modal-zumen {
    margin-block: 40px 50px;
  }

  .modal-shiharai {
    padding-bottom: 10px;
  }
  .modal-shiharai ul.price li::after {
    top: 25px;
  }
  .modal-shiharai .item {
    font-size: inherit;
  }
  .modal-shiharai .number {
    padding-right: 3px;
  }
  .modal-shiharai .sub {
    font-size: 12px;
  }
}
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-4 ( 644px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 644px) {
  .introduction .text {
    padding-top: 20px;
  }

  #planlist {
    display: block;
    margin-block: 0;
  }
  #planlist li {
    display: block;
    margin-top: 60px;
  }
  #planlist li a {
    margin-top: 0;
    display: block;
  }

  /* ---------- Modal-Window ---------- */
  .modal-panel {
    padding: 5.5vw;
  }

  .modal-title .title {
    margin-bottom: 30px;
  }

  .modal-main {
    display: block;
  }
  .modal-main .image {
    width: auto;
    max-width: 640px;
    margin-bottom: 20px;
  }
  .modal-main .main .data {
    line-height: 26px;
    display: block;
    margin-bottom: 30px;
  }
  .modal-main .main .data dl {
    font-size: inherit;
  }
  .modal-main .main .data dl::after {
    display: none;
  }

  .modal-zumen .inner {
    height: auto;
  }

  .modal-shiharai {
    padding: 40px 5vw 20px;
  }
  .modal-shiharai .title {
    margin-bottom: 20px;
  }
  .modal-shiharai .title strong {
    font-size: 16px;
  }
  .modal-shiharai ul.price {
    display: block;
  }
  .modal-shiharai ul.price li {
    margin-inline: auto;
    padding: 15px 10px 10px;
  }
  .modal-shiharai ul.price li + li {
    margin-top: 18px;
  }
  .modal-shiharai ul.price li::after {
    font-size: 34px;
    font-weight: 700;
    right: 0;
    left: 0;
    top: auto;
    bottom: -26px;
    transform: rotate(90deg);
    z-index: 2;
  }
  .modal-shiharai .monthly .notice {
    font-size: 11px;
  }
  .modal-shiharai .monthly .notice li {
    display: inline-block;
    margin-inline: 0;
  }
}

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