@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;
  --sec-padding: var(--adj-80);
  --inner-width-12: var(--SP-width);
  --inner-width-16: var(--SP-width);
  --inner-gap: 0;

  --MENU-size: var(--TH-height);
}



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

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



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



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



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

#SPhead,
#GNav,
.hdrLogo {
  pointer-events: all;
}

/*===== #TH =====*/
#TH {
  --h1-width: 108px;
}
#TH {
  width: 100%;
  min-width: var(--std-width);
  position: fixed;inset: 0;
  border-bottom: 1px solid #eee;
  border-radius: 0;
}
#TH .inner {
    grid-template-columns: var(--h1-width) auto;
  padding-right: 0;
}

/*===== #SPhead =====*/
#SPhead {
  z-index: 1050;
}



/* =====<=====<=====<=====<=====<=====<===== */
/* !<- ORDERED / HAM-MENU ->                 */
/* =====>=====>=====>=====>=====>=====>===== */

#HAM-MENU {
  --HAM-boxWidth: var(--TH-height);
  --HAM-boxHeight: var(--TH-height);
  --HL-width: 24px;
  --HL-height: 2px;
  --HL-margin: 7px;
  --HL-1st: 20px;
  --HL-2nd: calc(var(--HL-1st) + var(--HL-height) + var(--HL-margin));
  --HL-3rd: calc(var(--HL-2nd) + var(--HL-height) + var(--HL-margin));
  --HL-pos: 18px;
}
#HAM-MENU {
  width: var(--HAM-boxWidth);height: var(--HAM-boxHeight);
  display: block;
  position: relative;
  background-color: var(--clr-main-01);
}
#HAM-MENU::before,
#HAM-MENU::after,
#HAM-MENU span {
  width: var(--HL-width);height: var(--HL-height);
  position: absolute;
  background-color: var(--clr-base);
  transition: .2s ease;
}
#HAM-MENU span {
  left: 18px;
  transition-delay: .2s;
}
#HAM-MENU :nth-child(1) {top: var(--HL-1st);}
#HAM-MENU :nth-child(2) {top: var(--HL-2nd);}
#HAM-MENU :nth-child(3) {top: var(--HL-3rd);}

/*===== #HAM-MENU animation =====*/
#HAM-MENU::before,
#HAM-MENU::after {
  top: 29px;
  transform-origin: 50% 50%;
  content: '';
}
#HAM-MENU::before {
  left: var(--HL-pos);
  transform: rotate(45deg) scaleX(0);
}
#HAM-MENU::after {
  right: var(--HL-pos);
  transform: rotate(-45deg) scaleX(0);
}
.active #HAM-MENU::before,
.active #HAM-MENU::after {
  transition-delay: .2s;
}
.active #HAM-MENU::before {
  transform: rotate(45deg) scaleX(1);
}
.active #HAM-MENU::after {
  transform: rotate(-45deg) scaleX(1);
}
.active #HAM-MENU span {
  transform: scaleX(0);
  transition-delay: 0s;
}



/* =====<=====<=====<=====<=====<=====<===== */
/* !<- ORDERED / GLOBAL-NAV ->               */
/* =====>=====>=====>=====>=====>=====>===== */

/*===== #GNav =====*/
#GNav {
  --gnav-mb: 150px;
}
#SPhead.active + #GNav {
    display: flex;align-items: unset;
    flex-direction: column;
  animation: blur .6s ease forwards;
}

@keyframes blur {
  100% {
    opacity: 1;
    backdrop-filter: blur(25px);
     -webkit-backdrop-filter: blur(25px);
  }
}

#GNav {
  display: none;
  width: 100%;height: calc(100dvh + var(--TH-height));
  margin-top: var(--TH-height);
  padding-block: 2em var(--gnav-mb);
  position: absolute;top: 0;left: 0;
  opacity: 0;
}
#GNav > ul {
    justify-content: flex-start;
    flex-direction: column;
    row-gap: max(4vh,20px);
  overflow-y: auto;
}
#GNav > ul > li:nth-child(n) {
  display: block;
  margin: 0;
  padding: .2em 1.5em;
  text-align: center;
}
#GNav > ul > li:last-child a {
  color: var(--clr-main-03);
}



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

/*===== #MV =====*/
#MV {
  height: 50dvh;
  min-height: 420px;

}
#MV .mvcopy {
  width: min(80%,360px);
  margin-top: 100px;margin-left: 25px;
/*   margin-inline: auto; */
}

/*===== #SV =====*/
#SV {
  --SV-height: 150px;
}

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



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



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



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

/*===== .btnA =====*/
.btnA,
.btnD {
  --btn-height: min-content;

  min-height: 44px;
}
.btnSend {
  --btn-height: 40px;
}



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





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

/*===== #sec01 =====*/
#top #sec01 {
 .i12 {
    .cntBox h4 {
      font-size: var(--fz-h5);
    }
  }
}

/*===== .about =====*/
.about dl {
  margin-inline: auto;
}

/*===== .adm =====*/
.adm {
  padding-inline: var(--adj-20);
}

/*===== .mem =====*/
.mem {
  --height: 50px;
}

/*===== .sup =====*/
.sup {
  background-size: 196px 143px;
}



/* =====<=====<=====<=====<=====<=====<===== */
/* !<- ORDERED / loop-msg ->                 */
/* =====>=====>=====>=====>=====>=====>===== */

/*===== .cate =====*/
.cate {
  height: 24px;
}



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

/*===== #ctcForm =====*/
#ctcForm {
  --input-height: 50px;
  --radio-size: 20px;
}

/*===== .radio =====*/
.radio {
  label span::after {
    --radio-size: 12px;
  }
}



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

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

#MV .mvcopy {
  width: 240px;
  margin-top: 40px;
}
#SV {
  background-size: cover;
}
#contact .lead {
  text-align: left;
}
#ctcForm {
  dl {
      grid-template-columns: 100%;
    padding-inline: var(--adj-10);
  }
  dd {
    margin-top: -10px;

    &:nth-of-type(n+2) {
      border: 0;
    }
  }
}
.radio {
  --margin: 5px;

  margin-bottom: 15px;
}
.adm {
  ul {
    width: fit-content;
    display: block;
    margin-inline: auto;
  }
  div {
    display: block;
  }
}
.sup {
  margin-top: var(--adj-80);
}
.cntBox {
  --h4-height: 40px;
}

#contact .lead br {
  display: none;
}

}
@media (width < 600px) {}
@media (width < 520px) {

.lead {
  text-align: left;
}

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

}