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

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



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

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



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



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

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

/*===== #TH =====*/
#TH {
  --h1-width: 60px;

  min-width: var(--std-width);
  inset: 0;

  &.bgOn {
    background-color: var(--clr-base);
    pointer-events: all;
  }
  .inner {
    padding-right: 0;
  }
}

/*===== #SPhead =====*/
#SPhead,
#HAM-MENU {
  border-bottom-left-radius: 20px;
}
#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 {
  position: absolute;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 =====*/
#SPhead.active + #GNav {
    display:grid;place-items: center;
  animation: blur .6s ease forwards;
}

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

#GNav {
  --gnav-mb: 150px;

  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;

  > ul {
      justify-content: flex-start;
      flex-direction: column;
      row-gap: max(4vh,20px);
    overflow-y: auto;

    > li:nth-child(n) {
      margin: 0;
    }
  }
  li:not(.nav-sns):nth-last-of-type(n+1) a {
    padding: .2em 1.5em;
    font-size: 16px;
  }
}



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

/*===== #MV =====*/
#MV {
  img,video {
    min-height: 600px;
  }
}

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



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

footer {
  min-height: 300px;
}



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

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

  min-height: 44px;
}

/*===== .btnS =====*/
.btnS {
  --btn-width: 200px;
}

/*===== .btnSend =====*/
.btnSend {
  --btn-width: 250px;
  --btn-height: 50px;
}



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





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

/*===== #sec02 =====*/
[id^='sec02'] {
  --sec-margin: var(--adj-20);
  --sec-padding: var(--adj-100);

  .inner {
    margin-left: 0;
  }
}
.cnt {
  width: 50vw;
}

/*===== #sec03 =====*/
.gallery {
  width: var(--SP-width);
}
.LinkBox {
  .btnA:nth-child(2) {
    margin-top: 0;
  }
}




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

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

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



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

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

#MV {
  margin-top: var(--TH-height);
  padding: 0;

  video {
    min-height: auto;
    border-radius: 0;
  }
}
.mvcopy {
  position: static;
}
#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;
}
.LinkBox {
  grid-template-columns: 1fr;

  .btnA:nth-child(2) {
    margin-top: 0;
  }
}

}
@media (width < 600px) {

.split {
  justify-items: center;
  grid-template-columns: 1fr;
  row-gap: var(--adj-40);
}
[id^='sec02'] img {
  width: 96%;
}
#sec02a .cnt {
  order: unset;
}
.cnt {
    order: unset;
  width: 96%;
}
.gallery {
  grid-template-columns: auto auto;
  column-gap: 4%;
}

}
@media (width < 520px) {

#top #sec01 p:not([class]) {
  line-height: 1.7;
  text-align: left;
}
  .mvcopy {
  span {
    &:first-child {
      padding-right: 2em;
    }
    &:last-child {
      width: 100vw;
      font-size: 22px;line-height: 1.5;
      border-radius: 0;
    }
  }
}

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

}