@charset "UTF-8";

:root {
  --std-width: 1024px;
  --std-clr: #004157;
  --std-fz: clamp(14px,.802rem + .32vw,18px); /* 360-1600 */
  --std-lh: 1.7;
  --std-ls: 0;

  --clr-base: #fff;
  --clr-err: var(--clr-sub-01);
  --clr-main-01: #2576a7;
  --clr-main-02: #49bdd4;
  --clr-main-03: #e8f8fb;
  --clr-sub-01: #ff6f61;
  --clr-acc-01: #d1e9ee;
  --clr-acc-02: #ccc;

  --fz-h2: clamp(18px,1.089rem + .16vw,20px); /* 360-1600 */
  --fz-h3: clamp(20px,1.105rem + .65vw,28px); /* 360-1600 */
  --fz-L: clamp(1.375rem, 0.199rem + 4.38vw, 3rem); /* 360-1920 48*/
  --fz-M: var(--fz-h2);
  --fz-R: clamp(12px,.714rem + .16vw,14px);   /* 360-1600 */
  --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: 80px;
  --mv-adj: var(--adj-10);
  --sec-padding: var(--adj-100);
  --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;
}



/* =====<=====<=====<=====<=====<=====<===== */
/* !<- 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;
}
em {
  font-weight: ;
}



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

.tac {
  text-align: center;
}

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

    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: 600;
}
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'] {
  width: max-content;
  margin-bottom: var(--mod-mb);

  h2 {
    font-size: var(--fz-R);
  }
  span {
    font-family: var(--WF-s-serif);
    font-weight: 400;
    font-size: var(--fz-h2);
  }
}

/*===== .mod =====*/
.mod {
  --mod-mb: var(--adj-60);

  margin-inline: auto;

  h2 {
    display: grid;place-items: center;
    row-gap: .5em;
  }
}

/*===== .mod2 =====*/
.mod2 {
  --mod-mb: var(--adj-50);

  span {
    padding-right: 1em;
  }
}



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

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

  height: var(--TH-height);
  position: fixed;inset: 40px 0 auto;
  z-index: 1000;
  background-color: transparent;
  pointer-events: none;

  .inner {
      justify-content: space-between;align-items: center;
      grid-template-columns: var(--h1-width) auto;
      gap: unset;
    max-width: var(--TH-width);
    height: 100%;
    padding-inline: clamp(var(--adj-20),-2.083rem + 5.21vw,var(--adj-50)) clamp(var(--adj-40),-4.167rem + 10.42vw,var(--adj-100)); /* 1024-1600 */

    > * {
      grid-column: unset;
    }
  }
}
#TH a {
  pointer-events: all;
}

/*===== .hdrLogo =====*/
.hdrLogo {
    display: grid;place-items: center;
  width: var(--h1-width);height: 100%;

  img {
    width: 100%;height: auto;
    aspect-ratio: 75/62;
  }
}



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

/*===== #GNav =====*/
#GNav {
  --ico-size: 26px;

  > ul {
    display: flex;align-items: center;

    > li:not(:first-child) {
      margin-left: clamp(15px,-1.84rem + 4.34vw,40px); /* 1024-1600 */
    }
  }
  a {
    font-family: var(--WF-s-serif);
    font-size: var(--fz-M);
    transition: color var(--transition);
  }
}

/*===== .nav-sns =====*/
.nav-sns {
  img {
    width: var(--ico-size);height: var(--ico-size);
    filter: drop-shadow(0 0 2px rgba(255,255,255,.6));
  }
}
/*=== HOVER ===*/
@media (hover:hover) and (pointer:fine) {

#GNav a:not(.btnS):hover {
  color: var(--clr-main-01);
  transition: color var(--transition);
}

}



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

/*===== #MV =====*/
#MV {
  max-width: var(--TH-width);
  margin: 0 auto var(--adj-100);
  padding: var(--mv-adj);
  border-radius: var(--adj-40);

  img,video {
    width: 100%;height: auto;
    min-height: 800px;max-height: 1000px;

    border-radius: var(--adj-40);
    aspect-ratio: 16/9;
    object-fit: cover;
  }
}

/*===== .vis =====*/
.vis {
  width: 100%;
  position: relative;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

/*===== .mvcopy =====*/
.mvcopy {
  --bdr-mvcopy: var(--adj-40);

  margin-left: -10px;
  position: absolute;inset: auto auto var(--mv-adj) var(--mv-adj);
  z-index: 2;

  span {
    width: max-content;
    display: block;
    background-color: var(--clr-base);

    &:first-child {
      padding: var(--adj-20) calc(var(--adj-100) + var(--adj-40)) var(--adj-10) var(--adj-40);
      font-family: var(--WF-s-serif);
      border-top-right-radius: var(--bdr-mvcopy);
    }
    &:last-child {
      padding: 0 var(--adj-30) var(--adj-10);
      color: var(--clr-main-01);
      font-weight: 600;
      font-size: var(--fz-L);line-height: 1.3;
      border-top-right-radius: var(--bdr-mvcopy);
    }
  }
}



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

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



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

footer {
  min-height: 400px;
  padding-top: var(--adj-100);
  position: sticky;top: 100vh;
  background: url(../img/common/footer.webp) no-repeat;
  background-position: center center;
  background-size: cover;

  img {
    max-width: min(30%,150px);
  }

}
small {
  margin-bottom: 1em;
  font-size: var(--fz-S);
}

/*===== .ftrNav =====*/
.ftrNav {
  margin-block: 30px 60px;

  ul {
    gap: var(--adj-60);
  }
  a {
    font-weight: 600;
    transition: color var(--transition);
  }
}

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

.ftrNav a:hover {
  color: var(--clr-main-01);
  transition: color var(--transition);
}


}


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

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

/*===== [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-size: var(--btn-fz);
  border-radius: 10px;
  background-color: var(--btn-bg-clr,transparent);
  transition: var(--transition);
  filter: var(--filter);
}

/*===== .btnA =====*/
.btnA {
  --btn-width: min(100%,320px);
  --btn-height: 70px;
  --btn-clr: var(--std-clr);
  --btn-fz: clamp(15px,.847rem + .4vw,20px); /* 360-1600 */

    column-gap: 8px;
  font-family: var(--WF-s-serif);
  background-image: linear-gradient(
    90deg,
    hsl(183deg 78% 81%) 0%,
    hsl(183deg 81% 79%) 8%,
    hsl(183deg 84% 77%) 17%,
    hsl(183deg 86% 74%) 25%,
    hsl(182deg 88% 71%) 33%,
    hsl(182deg 90% 68%) 42%,
    hsl(182deg 91% 65%) 50%,
    hsl(183deg 90% 62%) 58%,
    hsl(184deg 88% 60%) 67%,
    hsl(185deg 87% 57%) 75%,
    hsl(186deg 86% 55%) 83%,
    hsl(187deg 85% 52%) 92%,
    hsl(188deg 89% 48%) 100%
  );

  &::before {
    width: var(--ico-size);height: var(--ico-size);
    background-size: contain;
    content: '';
  }
  &.ins::before {
    --ico-size: 22px;
    background-image: url(../img/common/insta.svg);
  }
  &.shop::before {
    --ico-size: 25px;
    background-image: url(../img/common/shop.svg);
  }
  &.mail::before {
   --ico-size: 24px;
    background-image: url(../img/common/mail.svg);
  }
}

/*===== .btnS =====*/
.btnS {
  --btn-width: 180px;
  --btn-height: 40px;
  --btn-clr: var(--clr-main-01);

  border-radius: calc(var(--btn-height) / 2);
  background-image: linear-gradient(
    90deg,
    hsl(183deg 78% 81%) 0%,
    hsl(183deg 81% 79%) 8%,
    hsl(183deg 84% 77%) 17%,
    hsl(183deg 86% 74%) 25%,
    hsl(182deg 88% 71%) 33%,
    hsl(182deg 90% 68%) 42%,
    hsl(182deg 91% 65%) 50%,
    hsl(183deg 90% 62%) 58%,
    hsl(184deg 88% 60%) 67%,
    hsl(185deg 87% 57%) 75%,
    hsl(186deg 86% 55%) 83%,
    hsl(187deg 85% 52%) 92%,
    hsl(188deg 89% 48%) 100%
  );
}

/*===== .btnSend =====*/
.btnSend {
  --btn-width: 300px;
  --btn-height: 60px;
  --btn-clr: var(--clr-base);
  --btn-bg-clr: var(--clr-main-02);

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

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

[class^="btn"]:hover {
  transition: var(--transition);
}
.btnA:hover {
    column-gap: 0px;
}
.btnS:hover {
  --btn-clr: var(--clr-base);
}
.btnSend:hover {
  --btn-bg-clr: var(--clr-main-01);
}

}

/*===== .io =====*/
.io {
  opacity: 0;
}
:where(#AboutUs,img,video).anim-on {
  animation:blur-in .7s linear both;
}
:where(.mvcopy,.ftrLobo).anim-on {
  animation:blur-in .5s linear both;
}
:is(#sec01,#sec04) .inner.anim-on,
:where(.cmp,.cnt,.ftrNav).anim-on,
.gallery img.anim-on {
  animation: blur-in-expand .6s linear both;
}
.btnA.anim-on {
  animation: rotate-scale-down .4s linear both;
}

@keyframes blur-in {
  0% {
    filter: blur(12px);opacity: 0;
  }
  100% {
    filter: blur(0);opacity: 1;
  }
}
@keyframes blur-in-expand {
  0% {
    transform: scale(0);filter: blur(12px);
  }
  100% {
    transform: scale(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(
  .xxx
) br {
  display: none;
}





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

/*===== #sec01 =====*/
#top #sec01 {
  p {
    line-height: 2;
    text-align: center;
  }
}
.copy {
  margin-bottom: var(--adj-40);
  font-weight: 600;
  font-size: var(--fz-h3);
}

/*===== #AboutUs =====*/
#AboutUs {
    display: grid;place-items: center;
  height: clamp(150px,4.839rem + 20.16vw,400px); /* 360-1600 */
  color: var(--clr-base);
  font-family: var(--WF-s-serif);
  font-size: clamp(36px,1.815rem + 1.94vw,60px); /* 360-1600 */
  letter-spacing: -1px;
  background: url(../img/top/aboutus.webp) no-repeat;
  background-position: center center;
  background-size: cover;
  filter: var(--filter);
}

/*===== #sec02 =====*/
[id^='sec02'] {
  --sec-margin:  clamp(30px,-8.125rem + 15.63vw,12px);  /* 1024-1600 */
  --sec-padding: clamp(80px,-2.778rem + 12.15vw,150px); /* 1024-1600 */
  --sec-bdr:     clamp(60px,.484rem + 14.52vw,240px);   /* 360-1600 */;

  margin-top: clamp(50px,-2.431rem + 8.68vw,100px); /* 1024-1600 */
  margin-right: var(--sec-margin);
  background-color: var(--clr-main-03);

  .inner {
    --inner-width: var(--inner-width-12);

    margin-left: var(--sec-margin);
  }
  img {
    width: min(34vw,640px);height: auto;
  }
}
#sec02a {
  border-top-right-radius: var(--sec-bdr);

  .cnt {
    order: 1;
  }
  img {
    margin-top: var(--adj-50);
  }
}
#sec02b {
  border-bottom-right-radius: var(--sec-bdr);
}
.split {
  display: grid;justify-content: start;
  grid-template-columns: auto auto;
  column-gap: min(5vw,96px); /* 1920 */
}
.cnt {
  width: 520px;
}

/*===== #sec03 =====*/
#top #sec03 {
  margin-top: clamp(50px,-2.431rem + 8.68vw,100px);
}
.gallery {
    display: grid;place-items: center;
    grid-template-columns: repeat(auto-fit,minmax(min(24%,372px),1fr));
    gap: var(--adj-10) calc(var(--adj-80) / 3);
  width: min(100%,1920px);
  margin-inline: auto;

  img {
    width: 100%;height: auto;
    border-radius: 12px;

    &:nth-child(even) {
      margin-top: var(--adj-40);
    }
  }
}
.LinkBox {
  width: var(--inner-width-10);
    display: grid;place-items: center;justify-content: space-between;
    grid-template-columns: repeat(auto-fit,minmax(min(100%,240px),1fr));
    gap: var(--adj-20);
  margin: var(--adj-80) auto 0;

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

/*===== #sec04 =====*/
#top #sec04 {
  margin-block: var(--adj-50);
  background: url(../img/top/company.webp) no-repeat;
  background-position: center center;
  background-size: cover;
}
.cmp {
  display: grid;
  grid-template-columns: auto 1fr;
  border: 1px solid var(--clr-acc-01);border-right: 0;border-left: 0;

  dt,dd {
    display: grid;
    align-items: center;
    padding-block: 1em;
  }
  dt {
      grid-column: 1;
    width: clamp(120px,5.141rem + 10.48vw,250px); /* 360-1600 */
    padding-inline: 2em;
  }
  :is(dt,dd):not(:nth-of-type(1)) {
    border-top:  1px solid var(--clr-acc-01);
  }
  dd {
    grid-column: 2;
  }
}



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

#contact {}

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: 600;
}
#ctcForm {
  --form-width: min(100%,1000px);
  --input-height: 60px;
  --input-clr: var(--clr-acc-02);
  --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);

      &:not(.req) {
        background-color: var(--clr-acc-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;










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