@charset "UTF-8";

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

/*=====  =====*/



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



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

/*===== #TH =====*/
#TH {
  position: static;
}



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

/*===== #SV =====*/
#SV {
  --SV-height: 240px;

  height: var(--SV-height);
  background-color: #e9f7ff;
  background-image: url(../img/common/sv.webp);
  background-size: contain;
}



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

/*===== .btnSend =====*/
.btnSend {
  --btn-width: min(80%,300px);
  --btn-height: 80px;
  --btn-clr: var(--clr-base);
  --btn-fz: var(--fz-h5);
  --btn-bg-clr: #4db560;

  margin: var(--adj-40) auto 0;
}

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

.btnSend:hover {
  --btn-bg-clr: var(--clr-main-01);

}

}



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

:where(
  .xxx
) br {
  display: none;
}





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

#contact {}

.ctctel {
    display: flex;align-items: center;
  margin: var(--adj-40) auto;
  font-weight: 700;
  font-size: clamp(24px,1.355rem + .65vw,32px);
  letter-spacing: -1px;

  img {
    --ico-size: clamp(36px,1.815rem + 1.94vw,60px);

    width: var(--ico-size);height: var(--ico-size);
  }
}
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: 1px solid var(--input-clr);
  border-radius:10px;
  background-color: var(--input-bg-clr);
}
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);

  label {
    display: flex;
  }
  dl {
      display: grid;justify-content: center;align-items: center;
      grid-template-columns: 1fr 65%;
    padding: var(--adj-80) var(--adj-70) var(--adj-40);
    border: 1px solid var(--input-clr);
    border-radius: var(--adj-30);
  }
  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(--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: 0;left: 5px;
  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);
}



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

#pnf h4 {
  margin-bottom: .5em;
  color: var(--clr-main-01);
  text-align: center;
}
#pnf section {
    display: grid;place-items: center;align-content: center;
  margin-top: var(--TH-height);
}
#pnf section p {
  text-align: center;
}



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

#news section {
  --inner-width: var(--inner-width-10);
}