@charset "UTF-8";

:root {
  --std-width: 1024px;
  --std-clr: #333;
  --std-fz: clamp(15px,.894rem + .19vw,18px); /* 360-1920 */
  --std-lh: 1.7;
  --std-ls: 0;

  --clr-base: #fff;
  --clr-err: #bb2649;
  --clr-main-01: #203c7f;
  --clr-main-02: #64bfa4;
  --clr-main-03: #f96815;
  --clr-sub-01: #f19149;
  --clr-sub-02: #ffe3c8;
  --clr-sub-03: #da3d58;
  --clr-sub-04: #00b900;
  --clr-acc-01: #f1eee6;
  --clr-acc-02: #f4f7ff;

  --fz-h1: clamp(18px,.923rem + .9vw,32px);    /* 360-1920 */
  --fz-h2: clamp(24px,1.269rem + 1.03vw,40px); /* 360-1920 */
  --fz-h3: clamp(22px,1.288rem + .38vw,28px);  /* 360-1920 */
  --fz-h4: clamp(20px,1.192rem + .26vw,24px);  /* 360-1920 */
  --fz-h5: clamp(18px,1.096rem + .13vw,20px);  /* 360-1920 */
  --fz-h6: var(--fz-M);
  --fz-L: clamp(22px,1.231rem + .64vw,32px);   /* 360-1920 */
  --fz-M: 16px;
  --fz-S: 12px;

  --adj-100: 100px;
  --adj-90:   90px;
  --adj-80:   80px;
  --adj-70:   70px;
  --adj-60:   60px;
  --adj-50:   50px;
  --adj-40:   40px;
  --adj-30:   30px;
  --adj-20:   20px;
  --adj-10:   10px;

  --TH-width: 1920px;
  --TH-height: var(--adj-100);
  --sec-padding: var(--adj-80);
  --inner-width-16: clamp(1000px,-1.5rem + 99.6vw,1576px);
  --inner-width-12: clamp(1000px,-1.5rem + 99.6vw,1256px);
  --inner-width-10: min(96%,1000px);
  --inner-gap: 12px;
  --common-height: 60px;
}



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

html {
  scroll-padding-top: calc(var(--TH-height) + 20px);
}
body {
  min-width: var(--std-width);
  max-height: 100%;
  color: var(--std-clr);
  letter-spacing: var(--std-ls);
  background: var(--clr-base);
}
header,
footer {
  width: 100%;
}
p,
dl,ol,ul,
figcaption,
small {
  line-height: var(--std-lh);
}
p,
dl,ol,ul,
figcaption {
  font-size: var(--std-fz);
}
a {
  color: inherit;
}



/* =====<=====<=====<=====<=====<=====<===== */
/* !<- ORDERED / COMMON CLASS ->             */
/* =====>=====>=====>=====>=====>=====>===== */

.bdd {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 3px;
}
.red {
  color: var(--clr-sub-03);
  font-weight: 700;
}
.tac {
  text-align: center;
}

/*===== .inner =====*/
.inner {
  --inner-width: var(--inner-width-12);

    display: grid;
    grid-template-columns: 1fr var(--inner-width) 1fr;
    column-gap: var(--inner-gap);
  margin-inline: auto;
}
.inner > * {
  grid-column: 2;
}



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

h1,h2,h3,h4,h5,h6 {
  font-weight: 700;
}
h1 {font-size: var(--fz-h1);}
h2 {font-size: var(--fz-h2);}
h3 {font-size: var(--fz-h3);}
h4 {font-size: var(--fz-h4);}
h5 {font-size: var(--fz-h5);}
h6 {font-size: var(--fz-h6);}

/*===== [class^='mod'] =====*/
[class^='mod'] {
  margin-bottom: var(--mod-mb);
}

/*===== .mod =====*/
.mod {
  --mod-mb: calc(var(--adj-60) * 2);
  --ico-size: clamp(28px,1.433rem + 1.41vw,50px);    /* 360-1920 */
  --tri-width: clamp(100px,4.808rem + 6.41vw,200px); /* 360-1920 */
  --tri-height: clamp(20px,1.106rem + .64vw,30px);   /* 360-1920 */
  --bdr-width: 10px;

  margin-inline: auto;
  position: relative;
  color: var(--clr-main-01);
  text-align: center;
  border-bottom: var(--bdr-width) solid;

  &::before,
  &::after {
    display: block;
    margin-inline: auto;
    content: '';
  }
  &::before {
    width: var(--ico-size);height: var(--ico-size);
    background: url(../img/common/head.svg) no-repeat;
    background-size: contain;
  }
  &::after {
    width: var(--tri-width);height: var(--tri-height);
    position: absolute;inset: auto 0 calc((var(--tri-height) + var(--bdr-width) - 1px) * -1) 0;
    background-color: var(--clr-main-01);
    clip-path: polygon(0 0,100% 0,50% 100%);
  }
  h2 {
    margin-block: var(--adj-20);
  }
}



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

/*===== #TH =====*/
#TH {
  height: var(--TH-height);
  z-index: 1000;
  background-color: var(--clr-base);

  .inner {
      align-items: center;
      grid-template-columns: auto 1fr;
      gap: unset;
    max-width: var(--TH-width);
    height: 100%;
    padding-inline: clamp(20px,-4.464rem + 8.93vw,100px); /* 1024-1920 */

    > * {
      grid-column: unset;
    }
  }
}
.THctc {
  display: none;
}

/*===== .hdrLogo =====*/
.hdrLogo {
  display: block;
  color: var(--clr-main-01);
  line-height: 1.2;

  strong {
    display: block;
    font-size: clamp(12px,.663rem + .38vw,18px);
  }
}



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

/*===== #MV =====*/
#MV {
    display: grid;
  max-width: var(--TH-width);
  margin-inline: auto;
  padding-inline: clamp(20px,-4.464rem + 8.93vw,100px); /* 1024-1920 */

  img {
    height: auto;
  }
}

/*===== .mv =====*/
.mv {
  width: 100%;
  border-radius: var(--adj-40);
  aspect-ratio: 43/22;

  &:nth-of-type(4) {
    display: none;
  }
}

/*===== .mvcopy =====*/
.mvcopy {
    grid-area: 1 / -1;
  width: clamp(612px,16.393rem + 34.15vw,918px); /* 1024-1920 */
  margin: auto;
  position: absolute;inset: 0;
  filter: drop-shadow(0 0 4px rgba(17,17,17,.6));

  &:nth-of-type(2) {
    display: none;
  }
}

/*===== .vis =====*/
.vis {
  width: 100%;
  position: relative;
}



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

main,
article {
  overflow: hidden;
}
section {
  padding-block: var(--sec-padding);
}



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

/*===== .MVctc =====*/
.MVctc {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  width: min(90%,800px);
  margin: -45px auto var(--adj-30);
}

/*===== .ADctc =====*/
.ADctc {
  height: 500px;
  padding-top: var(--adj-50);
  background: url(../img/top/bg02.webp) no-repeat;
  background-position: center center;
  background-size: cover;

  .inner {
      grid-template-columns: 1fr 1fr;
      gap: 80px var(--adj-40);
    width: var(--inner-width-10);
    text-align: center;

    div {
        grid-column: unset;
      padding: 70px 1em var(--adj-60);
      position: relative;
      border-radius: 10px;
      background-color: var(--clr-base);
      filter: var(--filter2);
    }
    h4 {
      grid-column: 1 / -1;
    }
    p {
      margin-bottom: var(--adj-30);
      font-weight: 700;
      font-size: var(--fz-h5);
    }
    img {
      --ico-size: clamp(60px,3.072rem + 3.01vw,80px);

      position: absolute;top: calc(var(--ico-size) / -2);
      max-width: var(--ico-size); /* 360-1024 */
    }
  }
}



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

footer {
  padding-block: var(--adj-80) var(--adj-40);
  position: sticky;top: 100vh;
  color: var(--clr-base);
  text-align: center;
  background-color: var(--clr-main-01);

  ul {
    margin-block: var(--adj-30) var(--adj-60);
  }
}

/*===== .ftrLogo =====*/
.ftrLogo {
  strong {
    display: block;
    font-size: var(--std-fz);
  }
}



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

:root {
  --transition: .3s ease;
  --filter: drop-shadow(0 0 6px rgba(222,222,222,.4));
  --filter2: drop-shadow(0 0 6px rgba(17,17,17,.1));
}

/*===== [class^="btn"] =====*/
[class^="btn"] {
    display: flex;justify-content: center;align-items: center;
  width: var(--btn-width,100%);height: var(--btn-height,auto);
  padding: .5em 1em;
  position: relative;
  color: var(--btn-clr);
  font-weight: 700;
  font-size: var(--btn-fz);
  background-color: var(--btn-bg-clr,transparent);
  transition: var(--transition);
  filter: var(--filter);

  &.mail {
    --btn-bg-clr: var(--clr-main-03);
  }
  &.line {
    --btn-bg-clr: #00b900;
  }
}

/*===== .btnA =====*/
.btnA {
  --btn-width: min(100%,380px);
  --btn-height: 90px;
  --btn-clr: var(--clr-base);
  --btn-fz: var(--fz-h3);
  --ico-size: var(--adj-40);

  border: 2px solid;
  border-radius: 10px;

  &::before {
    width: var(--ico-size);height: var(--ico-size);
    margin-right: var(--adj-10);
    background-repeat: no-repeat;
    background-size: contain;
    content: '';
  }
  &.mail::before {
    background-image: url(../img/common/ico_mail.svg);
  }
  &.line::before {
    background-image: url(../img/common/ico_line.svg);
  }
}

/*===== .btnC =====*/
.btnC {
  --btn-width: min(100%,380px);
  --btn-height: 60px;
  --btn-clr: var(--clr-base);
  --btn-fz: var(--fz-h4);

  border-radius: 9999px;
}

/*=== HOVER ===*/
@media (hover:hover) and (pointer:fine) {

.btnA.mail:hover {
  color: var(--clr-main-03);
  background-color: var(--clr-base);
}
.btnA.line:hover {
  color: #00b900;
  background-color: var(--clr-base);
}
.btnC:hover {
  --btn-bg-clr: var(--clr-main-01);
}

}

/*===== .io =====*/
.io {
  opacity: 0;
}
:is(
  .box,
  .flow,
  [class^="plan"]
).anim-on {
  animation: blur-in-expand .5s linear both;
}
.rr.anim-on {
  animation: scale-up-horizontal-center .5s;
}
.faq.anim-on {
  animation: scale-up-center .5s;
}
[class^="case"] figure.anim-on {
  animation: rotate-scale-down .3s linear both;
}

@keyframes blur-in-expand {
  0% {
    transform: scale(0);filter: blur(12px);
  }
  100% {
    transform: scale(1);filter: blur(0);
  }
}
@keyframes scale-up-center {
  0% {
    transform: scale(.5);filter: blur(12px);
  }
  100% {
    transform: scale(1);filter: blur(0);
  }
}
@keyframes scale-up-horizontal-center {
  0% {
    transform: scaleX(.2);filter: blur(12px);
  }
  100% {
    transform: scaleX(1);filter: blur(0);
  }
}
@keyframes rotate-scale-down {
  0% {
    transform: scale(1) rotateZ(0);
  }
  50% {
    transform: scale(.5) rotateZ(180deg);
  }
  100% {
    transform: scale(1) rotateZ(360deg);
  }
}



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

:where(
  #top #sec02 h2,
  #top #sec03 h2
) br {
  display: none;
}





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

/*===== #sec01 =====*/
#top #sec01 {
  background: url(../img/top/img01.webp) no-repeat;
  background-position: calc(50% - 480px) 140%;
}

/*===== .box =====*/
.box {
    display: grid;align-items: flex-start;
    grid-template: auto 1fr / 1fr auto;
    gap: var(--adj-60) clamp(30px,-1.696rem + 5.58vw,80px);
  margin-bottom: var(--adj-100);

  h3,p {
    grid-column: 1;
  }
  h3 {
    color: var(--clr-main-01);
    line-height: 2;
  }
  img {
      grid-row: 1 / 3;grid-column: 2;
    width: min(50vw,610px);height: auto;
  }
}

/*===== .flowBox =====*/
.flowBox {
  h4 {
    color: var(--clr-main-01);
    text-align: center;
  }
}
.flow {
  --cir-size: 100px;

    display :grid;justify-content: space-between;justify-items: center;
    grid-template: auto 1fr / repeat(6,140px);
    row-gap: var(--adj-30);
  width: 100%;
  margin-top: var(--adj-40);
  position: relative;
  font-weight: 700;

  &::after {
    position: absolute;top: calc(var(--cir-size) / 2);
    width: 90%;
    border-top: 3px dotted #d0d3b7;
    content: '';
  }
  dt {
      display: grid;place-items: center;
      grid-row: 1;
    width: var(--cir-size);height: var(--cir-size);
    padding-right: 6px;
    position: relative;z-index: 1;
    color: var(--clr-base);
    font-size: 36px;
    font-style: italic;
    border-radius: 100%;

    &:nth-of-type(1) {background-color: var(--clr-main-01);}
    &:nth-of-type(2) {background-color: #2e6291;}
    &:nth-of-type(3) {background-color: #3b7a9c;}
    &:nth-of-type(4) {background-color: #50a2ad;}
    &:nth-of-type(5) {background-color: #60bcb8;}
    &:nth-of-type(6) {background-color: #6dd2c0;}
  }
  dd {
    text-align: center;
  }
}

/*===== #sec02 =====*/
#top #sec02 {
  padding-bottom: 0;

  .inner {
    padding-block: calc(var(--adj-60) * 2) var(--sec-padding);
    background: url(../img/top/bg01.webp) no-repeat;
    background-position: center center;
    background-size: cover;
  }
  .mod {
    margin-bottom: 0;
  }
}

/*===== .reason =====*/
[class^="reason"] {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,160px),1fr));
  gap: var(--adj-50) calc(var(--adj-50) + 8px);
}
.reason2 {
    grid-auto-flow: column;
  margin-top: var(--adj-50);
  padding-inline: calc(34.872% / 2);
}
.rr {
    display: grid;place-items: center;
    grid-template-rows: subgrid;
    grid-row: span 3;
    row-gap: var(--adj-20);
  max-width: 380px;
  padding: var(--adj-40) 1em;
  border-radius: 8px;
  background-color: var(--clr-sub-02);
  filter: var(--filter2);

  h3 {
    color: var(--clr-main-03);
  }
  p {
    align-self: flex-start;
  }
}

/*===== #sec03 =====*/
#top #sec03 {
  figure + figure {
    margin-top: var(--sec-padding);
  }
}

/*===== .plan =====*/
[class^="plan"] {
  --dt-width: 280px;
  --dd-size: 100px;
  --adj: 15px;

  .gd {
    margin-block: var(--adj-10) var(--adj-30);
    padding: .5em;
    color: var(--p-clr);
    font-weight: 700;
    font-size: var(--fz-L);line-height: 1.2;
    border: 4px solid;
  }
  p:not([class]) {
    text-align: right;
  }
  dl {
      display: grid;
      grid-template-columns: var(--dt-width) repeat(auto-fill,var(--dd-size));
      column-gap: var(--adj);
    padding: var(--adj) var(--adj) 0;
    font-weight: 700;
    border-radius: 10px;
    background: var(--p-bg);
  }
  dt,dd {
    display: grid;
  }
  dt {
      align-items: center;
      grid-row: 1/3;
    padding-bottom: var(--adj);padding-left: var(--adj-40);
    color: var(--clr-base);
    font-size: var(--fz-h3);
  }
  dd {
      place-items: center;
    height: var(--dd-size);
    margin-bottom: var(--adj);
    color: var(--p-clr);
    text-align: center;
    border-radius: 8px;
    background-color: var(--clr-base);
  }
  img {
    width: 100%;height: auto;
  }
}
.plan01 {
  --p-clr: var(--clr-main-01);
  --p-bg: url(../img/common/ptn01.png);
}
.plan02 {
  --p-clr: var(--clr-main-02);
  --p-bg: url(../img/common/ptn02.png);
}

/*===== #sec04 =====*/
#top #sec04 {}

/*===== .case =====*/
[class^="case"] {
  color: var(--clr-base);

  h3 {
      justify-content: center;align-items: center;
      gap: var(--adj-20);
    padding: .6em;
    background-color: var(--case-clr);

    span {
      padding: .2em 1em;
      color: var(--case-clr);
      font-size: var(--fz-h5);line-height: 1.5;
      border-radius: 8px;
      background-color: var(--clr-base);
    }
  }
  div {
      display: grid;
      grid-template-columns: 1fr 1fr;
    margin-block: var(--adj-20) var(--adj-30);
  }
  img {
    width: 100%;height: auto;
  }
  figcaption,
  dt {
    font-weight: 700;
    font-size: var(--fz-h5);
  }
  figcaption {
    width: min(80%,300px);height: var(--common-height);
    margin-inline: auto;margin-top: -30px;
    padding: .3em;
    position: relative;
    font-style: italic;
    border-radius: 10px;
  }
  figure:nth-of-type(1) figcaption {
    background-color: var(--clr-sub-01);
  }
  figure:nth-of-type(2) figcaption {
    background-color: var(--clr-main-03);
  }
  dl {
    color: var(--std-clr);

    :is(dt,dd):nth-of-type(odd) {
      background-color: var(--clr-acc-01);
    }
    dt,dd {
        display: flex;align-items: center;align-self: stretch;
      min-height: var(--common-height);
      padding-block: var(--adj-10);
    }
    dt {
        flex-basis: 25%;
      padding-left: var(--adj-60);
    }
    dd {
        flex-basis: 75%;
      padding-inline: 1em var(--adj-60);
    }
  }
  + [class^="case"] {
    margin-top: var(--adj-70);
  }
}
.case01 {--case-clr: var(--clr-main-01);}
.case02 {--case-clr: var(--clr-main-02);}

/*===== #sec05 =====*/
#top #sec05 {}

/*===== .faq =====*/
.faq {
  dt,dd {
    padding-inline: var(--adj-60);
  }
  dt {
    display: grid;align-items: center;
   min-height: var(--common-height);
   color: var(--clr-base);
   font-weight: 700;
   font-size: var(--fz-h3);
   border-radius: var(--adj-20) var(--adj-20) 0 0;
   background-color: var(--clr-sub-01);
  }
  dd {
    padding-block: var(--adj-20);
    border-radius: 0 0 var(--adj-20) var(--adj-20);
    background-color: var(--clr-acc-01);

  }
  + dl {
    margin-top: var(--adj-30);
  }
}

/*===== #contact =====*/
#contact {
  p {
  width: fit-content;
  margin: -20px auto var(--adj-60);
  }
}

input[type] {
  height: var(--input-height);
}
input[type="radio"] {
  display: none;
}
input[type="text"],
input[type="email"],
textarea {
  padding: .6em 1em;
  line-height: 1.4;
  border-radius: 10px;
  background-color: var(--clr-base);
}
textarea {
  max-width: 100%;
  height: 4em;min-height: 150px;
}

/*===== #ctcForm =====*/
#ctcForm :is(dt,span),
.sendOk {
  font-weight: 700;
}
#ctcForm {
  --form-width: min(100%,1000px);
  --input-height: 60px;
  --input-clr: #ccc;
  --radio-size: 24px;
  --radio-clr: var(--clr-main-01);
  --req-width: 50px;

  width: var(--form-width);
  margin-inline: auto;

  label {
    display: flex;
  }
  dl {
      display: grid;justify-content: center;align-items: center;
      grid-template-columns: 1fr 65%;
    padding: var(--adj-60) var(--adj-80) var(--adj-40);
    border: 2px solid var(--clr-main-01);
    border-radius: var(--adj-30);
    background-color: var(--clr-acc-02);

  }
  dt,dd {
    padding: var(--adj-30) var(--adj-10);
    position: relative;
  }
  dt {
    display: grid;
    justify-content: space-between;align-items: center;align-self: stretch;
    grid-template-columns: 1fr auto;

    span {
        display: grid;place-items: center;
      width: var(--req-width);
      color: var(--clr-base);
      font-size: 14px;
      border-radius: 4px;
      background-color: var(--input-clr);

      &.req {
        background-color: var(--clr-main-01);
      }
    }
  }
  dd + dt,
  dd:nth-of-type(n+2) {
    border-top: 1px solid var(--input-clr);
  }
}
#ctcForm dt:has(+ dd > .error-msg) span.req {
  background-color: var(--clr-err);
}
.sendOk {
  margin-top: 3em;
  padding-block: 3em;
  text-align: center;
}

/*===== .radio =====*/
.radio {
  column-gap: var(--adj-30);
  padding-left: 1em;

  > span {
    margin: 0!important;
  }
  label span {
      display: flex;align-items: center;
    position: relative;
    padding: 0 0 0 30px;

    &::before,
    &::after {
      width: var(--radio-size);height: var(--radio-size);
      position: absolute;top: calc(50% - calc(var(--radio-size) / 2));
      border-radius: 100%;
      transition: .3s all;
      content: '';
    }
    &::before {
      left: 0;
      border: 1px solid var(--input-clr);
      box-shadow: inset 1px 1px 1px #eee,inset -1px -1px 2px var(--clr-base);
    }
    &::after {
      --radio-size: 16px;
      left: 4px;
      opacity: 0;
      background-color: var(--radio-clr);
      transform: scale(0.5);
    }
  }
  .horizontal-item {
    --margin: 5px;

    width: max-content;
    display: block;

    + .horizontal-item {
      margin-top: var(--margin)!important;
    }
  }
  input:checked + span {
    color: var(--radio-clr);
    transition: .3s all;
  }
  input:checked + span::after {
    opacity: 1;
    transform: scale(1);
  }
}

/*===== .error-msg =====*/
.error-msg {
  position: absolute;top: 5px;left: 10px;
  color: var(--clr-err)!important;
  font-weight:70;
  font-style: normal;
  font-size: 14px!important;
}
dd:has(.error-msg) :is(input,textarea) {
  border: 2px solid var(--clr-err);
}

/*===== .btnSend =====*/
.btnSend {
  --btn-width: min(80%,340px);
  --btn-height: 80px;
  --btn-clr: var(--clr-base);
  --btn-fz: var(--fz-h4);
  --btn-bg-clr: var(--clr-main-03);

  margin: var(--adj-50) auto 0;
  border-radius: var(--adj-20);
}

/*=== HOVER ===*/
@media (hover:hover) and (pointer:fine) {

.btnSend:hover {
  --btn-bg-clr: #22ac38;
}

}



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

#pnf {
  #TH {
    border-bottom: 1px solid rgba(32,60,127,.2);
  }
  h4 {
    margin-bottom: .5em;
    color: var(--clr-main-01);
    text-align: center;
  }
  section {
      display: grid;place-items: center;align-content: center;
    margin-top: var(--TH-height);

    p {
      text-align: center;
    }
  }
}