@charset "UTF-8";

@media (width < 1024px) {

:root {
  --std-width: 360px;
  --SP-width: 96%;

  --adj-100: 50px;
  --adj-90:  45px;
  --adj-80:  40px;
  --adj-70:  35px;
  --adj-60:  30px;
  --adj-50:  25px;
  --adj-40:  20px;
  --adj-30:  15px;
  --adj-20:  10px;

  --TH-height: 60px;
  --inner-width-12: var(--SP-width);
  --inner-gap: 0;
  --common-height: 50px;
}



/* =====<=====<=====<=====<=====<=====<===== */
/* !<- ORDERED / GENERAL ->                  */
/* =====>=====>=====>=====>=====>=====>===== */

body {
  min-height: 100dvh;
  text-align: left;
}



/* =====<=====<=====<=====<=====<=====<===== */
/* !<- ORDERED / TOP-HEADER ->               */
/* =====>=====>=====>=====>=====>=====>===== */

/*===== #TH =====*/
#TH {
  min-width: var(--std-width);
  position: fixed;inset: 0;
  border-bottom: 1px solid rgba(32,60,127,.2);

  .inner {
      justify-content: space-between;
      grid-template-columns: 1fr auto;
    padding-inline: var(--adj-10) 0;
  }
}

/*===== .THctc =====*/
.THctc {
  display: grid;
  grid-template-columns: auto auto;

  a {
    width: var(--TH-height);

    &:nth-of-type(1) {
      background-color: var(--clr-main-03);
    }
    &:nth-of-type(2) {
      background-color: #00b900;
    }
  }
}



/* =====<=====<=====<=====<=====<=====<===== */
/* !<- ORDERED / VISUAL ->                   */
/* =====>=====>=====>=====>=====>=====>===== */

/*===== #MV =====*/
#MV {
  padding-inline: var(--adj-10);
}

/*===== .mvcopy =====*/
.mvcopy {
  &:nth-of-type(1) {
    display: none;
  }
  &:nth-of-type(2) {
    width: min(70%,468px);
    display: inherit;
    aspect-ratio: 104/55;
  }
}

/*===== .vis =====*/
.vis {
  margin-top: calc(var(--TH-height) + 10px);
}



/* =====<=====<=====<=====<=====<=====<===== */
/* !<- ORDERED / ASIDE ->                    */
/* =====>=====>=====>=====>=====>=====>===== */

/*===== .MVctc =====*/
.MVctc {
  margin-top: -30px;
}

/*===== .ADctc =====*/
.ADctc {
  height: auto;
  padding-block: var(--adj-60) 60px;

  .inner {
    row-gap: var(--adj-100);

    div {
      padding-top: var(--adj-100);
    }
    h4 {
      font-size: var(--fz-h5);
    }
  }
}



/* =====<=====<=====<=====<=====<=====<===== */
/* !<- ORDERED / MOTION ->                   */
/* =====>=====>=====>=====>=====>=====>===== */

.btnA,
.btnC,
.btnSend {
  --btn-height: min-content;
}

/*===== .btnA =====*/
.btnA {
  --btn-fz: clamp(15px,.768rem + .75vw,20px);
}



/* =====<=====<=====<=====<=====<=====<===== */
/* !<- ORDERED / HIDE ->                     */
/* =====>=====>=====>=====>=====>=====>===== */





/* =====<=====<=====<=====<=====<=====<===== */
/* !<- ORDERED / TOP INDEX ->                */
/* =====>=====>=====>=====>=====>=====>===== */

/*===== #sec01 =====*/
#top #sec01 {
  background-position: 80% 85%;
}

/*===== .box =====*/
.box {
  grid-template: unset;

  h3 {
    order: 1;
  }
  p {
    order: 3;
  }
  img {
    order: 2;
  }
}

/*===== .flowBox =====*/
.flow {
  justify-content: center;
  grid-template: unset;
  grid-auto-flow: row;

  &::after {
    width: 3px;height: 84%;
    border-top: none;
    border-left: 3px dotted #d0d3b7;
  }
  dt {
    grid-row: unset;

    &:nth-of-type(n+2) {
      margin-top: var(--adj-30);
    }
  }
  dd {
    width: 100%;
    position: relative;
    z-index: 1;
    background-color: var(--clr-base);
  }
}

/*===== .reason =====*/
.rr img {
  width: 80px;
}


/*===== .plan =====*/
[class^="plan"] {
  --dt-width: 170px;
}

/*===== .case =====*/
[class^="case"] {
  dl dt {
    padding-left: 1em;
    line-height: 1.5;
  }
}

/*===== .faq =====*/
.faq dt {
  min-height: 40px;
  font-size: var(--fz-h5);
}


/*===== .error-msg =====*/
.error-msg {
  top: 15px;left: 15px;
}
.radio .error-msg {
  top: -5px;
}



/* =====<=====<=====<=====<=====<=====<===== */
/* !<- ADJUSTER QUERIES ->                   */
/* =====>=====>=====>=====>=====>=====>===== */

@media (width < 960px) {}
@media (width < 834px) {}
@media (width < 810px) {}
@media (width < 768px) {

[class^="plan"] {
  --dd-size: 50px;

  dl {
    grid-template-columns: repeat(auto-fill,minmax(100px,1fr));
  }
  dt {
      grid-row: unset;grid-column: 1/-1;
    text-align: center;
  }
  dd {
    line-height: 1.2;
  }
  dd br {
    display: none;
  }
}

}
@media (width < 744px) {

.box {
  h3 {
    text-align: center;
  }
  img {
      grid-area: unset;
    width: 100%;
  }
}
#ctcForm {
  dl {
      grid-template-columns: 100%;
    padding-inline: var(--adj-10);
  }
  dd {
    margin-top: -10px;

    &:nth-of-type(n+2) {
      border: 0;
    }
  }
}
.radio {
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 10px;
  margin-bottom: 15px;
}

}
@media (width < 600px) {

.ADctc .inner {
  grid-template-columns: 1fr;

  h4 {
    text-align: left;

    br {
      display: none;
    }
  }
}
[class^="reason"] {
  justify-content: center;
  grid-template-columns: 1fr;
}
.reason2 {
    grid-auto-flow: unset;
  padding: 0;
}
.rr {
  max-width: none;
}
.plan02 span {
  display: block;
}

}
@media (width < 520px) {

.mv {
  aspect-ratio: 11/9;

  &:nth-of-type(3) {
    display: none;
  }
  &:nth-of-type(4) {
    display: inherit;
  }
}
.MVctc {
  display: none;
}
[class^="case"] {
  h3 {
    flex-direction: column;
  }
  div {
    grid-template-columns: unset;
  }
  figcaption {
    height: auto;
  }
  dt {
    font-size: var(--fz-M);
  }
}
#contact p br {
  display: none;
}

}
@media (width < 480px) {}
@media (width < 430px) {

#top :is(#sec02,#sec03) h2 br {
  display: inherit;
}

}
@media (width < 414px) {}
@media (width < 375px) {}

}