@charset "UTF-8";
/* ===================================================================
  CSS information
  file name  :  style.css
=================================================================== */

/* --------------------------
  common
-------------------------- */
:root {
  --noto-sans: "Noto Sans JP", "ヒラギノ角ゴPro W3","Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Arial, Helvetica, Verdana, sans-serif;
  --navy: #485774;
  --lightblue: #17c0e6;
  --beige: #f7f4f1;
  --orange: #ff8b11;
}
body {
  background-color: #f2f2f2;
  font-family: var(--noto-sans);
  font-size: min(2.56vw, 20px);
  color: var(--navy);
}
body.fixed {
  max-height: 100vh;
  overflow: hidden;
}

.wrapper {
  width: 100%;
  max-width: 780px;
  margin: 0 auto;
  background-color: #fff;
  box-shadow: 0 0 10px 2px #d6d6d6;
}
.inner {
  width: 89.74%;
  max-width: 700px;
  margin: 0 auto;
}
.ttl-sub {
  display: block;
}

.kv-box {
  background: url(../../assets/images/kv_bg.png) no-repeat center top / cover;
}

/* --------------------------
  plan-box
-------------------------- */
.plan-01 {
  background: url(../../assets/images/plan_01_bg.png) repeat-y center top / 100% auto;
}
.plan-02 {
  background: url(../../assets/images/plan_02_bg.png) repeat-y center top / 100% auto;
}
.plan-03 {
  background: url(../../assets/images/plan_03_bg.png) repeat-y center top / 100% auto;
}
.plan-04 {
  background: url(../../assets/images/plan_04_bg.png) repeat-y center top / 100% auto;
}

.plan-box .coupon-box,
.plan-box .btn-box {
  display: grid;
}
.plan-box .coupon-box .coupon,
.plan-box .btn-box .btn,
.plan-box .box-bg {
  grid-area: 1 / 1;
}
.plan-box .coupon-box .coupon,
.plan-box .btn-box .btn {
  z-index: 2;
}

/* coupon */
.plan-box .coupon-box .coupon {
  width: 73.97%;
  max-width: 577px;
  margin: 0 auto;
  display: grid;
  position: relative;
  cursor: pointer;
}
.plan-box .coupon-box .coupon span,
.plan-box .coupon-box .coupon img {
  grid-area: 1 / 1;
}
.plan-box .coupon-box .coupon span {
  font-size: 2em;
  line-height: 1;
  font-weight: 500;
  position: absolute;
  top: 0.9em;
  left: 40.21%;
}

/* btn */
.plan-box .btn-box .btn {
  width: 92.31%;
  max-width: 720px;
  margin: 0 0 0 auto;
}
.plan-box .btn-box .btn a {
  display: block;
  width: 92.78%;
  max-width: 668px;
}

/* slider */
.cv-plans-slider.slick-dotted.slick-slider {
  margin-bottom: 0;
}
.cv-plans-slider .slick-track {
  display: flex;
}
.cv-plans-slider .slick-slide {
  height: auto;
}

.cv-plans-slider .slick-dots {
  bottom: 2.87%;
}
.cv-plans-slider .slick-dots li {
  width: min(4.62vw, 36px);
  height: min(0.77vw, 6px);
  background-color: var(--navy);
  border-radius: 1em;
  margin: 0 0.4em;
}
.cv-plans-slider .slick-dots li.slick-active {
  background-color: #fff;
  width: min(5.13vw, 40px);
  height: min(1.28vw, 10px);
}
.cv-plans-slider .slick-dots li button {
  width: 100%;
  height: 100%;
  padding: 0;
}
.cv-plans-slider .slick-dots li button::before {
  content: none;
}

.cv-plans-slider .slick-arrow {
  top: 15%;
  z-index: 4;
  width: min(5.77vw, 45px);
  height: min(5.77vw, 45px);
  background-color: var(--lightblue);
  border-radius: 50%;
}
.cv-plans-slider .slick-arrow::before {
  font-size: min(6.67vw, 52px);
  opacity: 1;
  margin-left: -0.05em;
}
.cv-plans-slider .slick-prev {
  left: 2%;
}
.cv-plans-slider .slick-next {
  right: 2%;
}

/* --------------------------
  henkin-box
-------------------------- */
.henkin-box {
  padding-top: min(7.69vw, 60px);
  padding-bottom: min(10.51vw, 82px);
}
.henkin-btn-box {
  border-radius: min(0.9vw, 7px);
  box-shadow: min(1.28vw, 10px) min(1.28vw, 10px) min(1.28vw, 10px) rgb(46 50 53 / 0.3);
}
.henkin-btn-box a {
  display: block;
}

.plan .henkin-box {
  padding-top: min(6.03vw, 47px);
  padding-bottom: min(13.59vw, 106px);
}
.support .henkin-box {
  padding-top: 0;
  padding-bottom: min(12.82vw, 100px);
}


/* --------------------------
  nayami
-------------------------- */
.nayami-checkbox {
  display: grid;
  font-size: 2em;
  line-height: 2;
  font-weight: 900;
}
.nayami-checkbox .check-ttl,
.nayami-checkbox .check-list {
  grid-area: 1 / 1;
}

.nayami-checkbox .check-list {
  padding: min(15.9vw, 124px) 0 0 min(9.74vw, 76px);
}
.nayami-checkbox .check-list li {
  padding-left: 1.5em;
  letter-spacing: -0.03em;
  position: relative;
  cursor: pointer;
}
.nayami-checkbox .check-list li::before,
.nayami-checkbox .check-list li::after {
  content: '';
  position: absolute;
  top: 0.6em;
  left: 0;
  box-sizing: border-box;
  height: min(5.26vw, 41px);
}
.nayami-checkbox .check-list li::before {
  width: min(5.26vw, 41px);
  background-color: #fff;
  border: min(0.26vw, 2px) solid currentColor;
}
.nayami-checkbox .check-list li::after {
  width: min(6.28vw, 49px);
  background: url(../../assets/images/checkmark.png) no-repeat left top / contain;
  opacity: 0;
  transition: opacity 0.3s;
}
.nayami-checkbox .check-list li.active::after {
  opacity: 1;
}
.nayami-checkbox .check-list li + li {
  margin-top: min(3.33vw, 26px);
}
.nayami-checkbox .check-list li .line {
  display: inline-block;
  background: url(../../assets/images/line_wavy.png) repeat-x left -25% bottom / min(4.1vw, 32px) min(1.54vw, 12px);
}

/* --------------------------
  voice
-------------------------- */
.voice {
  background-color: var(--lightblue);
}

/* --------------------------
  plan
-------------------------- */
.plan .plan-03 {
  background: url(../../assets/images/plan_03_bg_a.png) repeat-y center top / 100% auto;
}
.plan .plan-04 {
  background: url(../../assets/images/plan_04_bg_a.png) repeat-y center top / 100% auto;
}

/* --------------------------
  faq
-------------------------- */
.faq-list {
  line-height: 1.43;
}
.faq-box {
  padding-top: min(7.69vw, 60px);
  padding-bottom: min(8.08vw, 63px);
}
.faq-box + .faq-box {
  border-top: min(0.51vw, 4px) dotted currentColor;
}
.faq-box dt {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  font-size: 1.5em;
  font-weight: 700;
  margin-bottom: min(2.56vw, 20px);
}
.faq-box dd {
  font-size: 1.4em;
  letter-spacing: -0.01em;
}
.faq-box dt .q {
  width: min(12.57vw, 88px);
  align-self: start;
}


.faq-notes-list {
  background-color: var(--beige);
  padding-top: min(11.54vw, 90px);
  padding-bottom: min(18.59vw, 145px);
  margin-top: min(8.21vw, 64px);
}
.faq-notes-box {
  font-size: 1.4em;
  line-height: 1.44;
}
.faq-notes-box + .faq-notes-box {
  margin-top: 1.1lh;
}
.faq-notes-box dt {
  font-weight: 700;
}
.faq-notes-box .img-box:first-of-type {
  margin-top: 1em;
}
.faq-notes-box .img-box:nth-last-child(2) {
  margin-bottom: 0.9em;
}


/* --------------------------
  notes
-------------------------- */
.notes {
  padding-top: min(16.41vw, 128px);
  padding-bottom: min(24.36vw, 190px);
}

.notes-area + .notes-area {
  margin-top: 7em;
}

.notes .ttl,
.notes .lead,
.notes .ttl-line {
  letter-spacing: 0.05em;
}
.notes .ttl,
.notes .lead {
  font-weight: 900;
}
.notes .lead,
.notes .ttl-line {
  font-size: 1.4em;
}
.notes .ttl {
  font-size: 3em;
  text-align: center;
  margin-bottom: 0.8em;
}
.notes .lead {
  margin-bottom: 3.3em;
}

.notes .ttl-line {
  font-weight: 700;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 0.3em;
  align-items: center;
  margin-bottom: 0.6em;
}
.notes .ttl-line::after {
  content: '';
  width: 100%;
  height: 0.1em;
  background-color: var(--navy);
}

.notes-box + .notes-box {
  margin-top: 3lh;
}
.notes-box .box-ttl {
  font-size: 1.7em;
  font-weight: 900;
  letter-spacing: 0.05em;
  margin-bottom: 0.5em;
}
.notes-box dt {
  font-size: 1.5em;
  font-weight: 700;
}
.notes-box dd,
.notes-box p {
  font-size: 1.4em;
  letter-spacing: -0.01em;
}

.notes-list-box + .notes-list-box {
  margin-top: 1lh;
}

/* --------------------------
  footer
-------------------------- */
footer {
  padding-bottom: min(11.54vw, 90px);
}
footer ul li {
  text-align: center;
}
footer ul li + li {
  margin-top: 1em;
}
footer ul li a,
footer ul li a:link,
footer ul li a:visited {
  display: inline-block;
  font-size: 1.4em;
  font-weight: 700;
  line-height: 1.5;
  color: var(--lightblue);
  border-bottom: 1px solid currentColor;
}

/* --------------------------
  floating
-------------------------- */
.floating-bnr {
  background-color: rgb(255 255 255 / 0.9);
  position: sticky;
  bottom: 0;
  left: 0;
  padding: 1em 0;
  z-index: 3;
}
.floating-bnr ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 0.2em;
  width: 97.18%;
  max-width: 580px;
  margin: 0 auto;
}


/* --------------------------
  modal
-------------------------- */
.modal {
  display: none;
  height: 100vh;
  position: fixed;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9;
  font-size: 1.4em;
  line-height: 1.4;
  letter-spacing: -0.01em;
}

.modal__bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  background: rgb(0 0 0 / 0.5);
  overflow: auto;
  box-sizing: border-box;
}

.modal__content {
  background: #fff;
  text-align: left;
  padding: min(11.54vw, 90px) min(5.13vw, 40px) min(8.21vw, 64px);
  width: 89.74%;
  max-width: 960px;
  height: 94%;
  position: relative;
  top: 50%;
  left: 50%;
  z-index: 8;
  transform: translate(-50%, -50%);
}

.modal_scroll {
  max-height: calc(100% - min(8.21vw, 64px));
  overflow-y: auto;
  padding-bottom: 1em;
}

.modal_scroll p:last-child {
  line-height: 1.4;
}

.modal_scroll span {
  font-size: min(calc(18/750 * 100vw), 18px);
}

.modal-close {
  display: block;
  position: absolute;
  width: min(4.23vw, 33px);
  height: min(4.23vw, 33px);
  top: min(2.82vw, 22px);
  right: min(2.82vw, 22px);
  z-index: 9;
  cursor: pointer;
  background: currentColor;
}

.modal-close::before,
.modal-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;

  /* 棒の幅（太さ） */
  width: min(0.51vw, 4px);
  /* 棒の高さ */
  height: min(2.18vw, 17px);
  /* バツ印の色 */
  background: #fff;
}

.modal-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.modal-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
p.modal-close {
  margin: 0;
}

.modal .ttl {
  font-size: 1.29em;
  text-align: center;
  padding-bottom: 1em;
}
.modal .modal-lead {
  margin-bottom: 2lh;
}
.modal-box + .modal-box {
  margin-top: 2lh;
}
.modal-box .box-ttl {
  margin-bottom: 0.5em;
}
.modal-box ul li {
  text-indent: -1em;
  padding-left: 1em;
}
.modal-box a {
  color: var(--lightblue);
  text-decoration: underline;
}
.modal .modal-notes {
  font-size: 0.58em;
  margin: 1em 0 5.75em;
}
/* --------------------------
  popup
-------------------------- */
.popup-area {
  display: none;
  width: 80vw;
  padding: 20px;
  position: fixed;
  z-index: 9999;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.cover-eml {
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 999;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.close-btn {
    display: block;
	margin: 20px auto 0;
	background: #fff;
    border: none;
    border-radius: 5px;
    padding: 0.3em 1em;
    font-size: 1em;
	cursor: pointer;
}
@media screen and (max-width: 767px){
.close-btn {
    font-size: 1.5em;
}
}