@charset "UTF-8";

:root {
  --std-width: 1024px;
  --std-clr: #413d3c;
  --std-fz: clamp(15px,.865rem + .32vw,20px); /* 360-1920 */
  --std-lh: 1.7;
  --std-ls: 0;

  --clr-base: #fff;
  --clr-err: #bb2649;
  --clr-main-01: #f19589;
  --clr-main-02: #3c98d5;
  --clr-main-03: #7f4f21;
  --clr-sub-01: #f9b700;
  --clr-sub-02: #79c063;
  --clr-sub-03: #5bc0c9;
  --clr-sub-04: #b595c4;
  --clr-acc-01: #fffeec;
  --clr-acc-02: #6ac7e4;
  --clr-acc-03: #95cd99;

  --fz-h1: ;
  --fz-h2: clamp(24px,1.065rem + 1.94vw,48px); /* 360-1600 */
  --fz-h3: clamp(22px,1.048rem + 1.45vw,40px); /* 360-1600 */
  --fz-h4: clamp(20px,1.032rem + .97vw,32px);  /* 360-1600 */
  --fz-h5: clamp(18px,1.016rem + .48vw,24px);  /* 360-1600 */
  --fz-h6: var(--fz-M);
  --fz-L: clamp(19px,1.024rem + .73vw,28px);   /* 360-1600 */
  --fz-M: clamp(16px,.927rem + .32vw,20px);    /* 360-1600 */
  --fz-R: clamp(14px,.802rem + .32vw,18px);    /* 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-height: 100px;
  --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;
}



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

.lead {
  text-align: center;
}
.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;

  &.i12 {
    --inner-width: var(--inner-width-12);
  }
  &.i16 {
    --inner-width: var(--inner-width-16);
  }
}
.inner > * {
  grid-column: 2;
}



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

h1,h2,h3,h4,h5,h6 {
  font-weight: 700;
}
h3,h4,h5 {
  line-height: 1.2;
}
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);
}

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

    display: grid;place-items: center;
    row-gap: var(--adj-10);
  margin-inline: auto;
  color: var(--clr-main-03);
  line-height: 1;

  &::before,
  &::after {
    font-size: 8px;
    letter-spacing: 2px;
    content: '■■■■■■';
  }
  &::before {
    grid-row: 1;
  }
  &::after {
    grid-row: 3;
  }
  h2 {
    grid-row: 2;
  }
}

/*=== ORDERED ===*/
#top #sec02 .mod {
  --mod-mb: var(--adj-20);
}



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

/*===== #TH =====*/
#TH {
  --h1-width: 220px;
}
#TH {
  width: calc(100% - 60px);height: var(--TH-height);
  margin-inline: auto;
  position: absolute;inset: 40px 0 auto;
  z-index: 1000;
  border-radius: 20px;
  background-color: var(--clr-base);
}
#TH .inner {
    justify-content: space-between;align-items: center;
    grid-template-columns: auto max-content;
    gap: unset;
  max-width: 1860px;
  height: 100%;
  padding-inline: var(--adj-40) 60px;
}
#TH .inner > * {
  grid-column: unset;
}

/*===== .hdrLogo =====*/
.hdrLogo {
  width: var(--h1-width);
  display: block;

  img {
    width: min(100%,220px);height: auto;
  }
}



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

/*===== #GNav =====*/
#GNav {
  > ul {
    display: flex;align-items: center;

    > li:not(:first-child) {
      margin-left: clamp(40px,-1.944rem + 6.94vw,80px); /* 1024-1600 */
    }
    > li:last-child a {
      color: var(--clr-main-01);
    }
  }
  a {
    color: var(--clr-main-03);
    font-weight: 700;
    font-size: var(--fz-h5);
    transition: var(--transition);
  }
}

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

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

}



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

/*===== #MV =====*/
#MV {
  --MV-height: clamp(250px,50vmax,500px);

    display: grid;
  height: 100vh;
  min-height: 768px;max-height: 1080px;
  background-image: url(../img/top/mv.webp);
}
.mvcopy {
    grid-area: 1 / -1;
  width: min(30.3%,580px);height: auto;
  margin-top:  clamp(200px,3.929rem + 13.39vw,320px); /* 1024-1920 */
  margin-left: clamp(80px,-2.143rem + 11.16vw,180px); /* 1024-1920 */
  aspect-ratio: 29/19;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255,1));
}

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



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

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



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



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

footer {
  padding: var(--adj-50) var(--adj-30) var(--adj-30);
  position: sticky;top: 100vh;

  .inner {
    border-radius: var(--adj-20);
    background-color: #f0eee9;

    header {
      font-size: var(--fz-R);
      text-align: center;

      div {
          justify-content: center;
          gap: var(--adj-20);
        margin-block: var(--adj-20) var(--adj-30);
      }
      li {
        font-size: var(--fz-R);
      }
      span {
          display: grid;place-items: center;
        width: 180px;padding-block: .3em;
        font-weight: 700;
        color: var(--clr-base);
        border-radius: 8px;

        &:nth-of-type(1) {background-color: var(--clr-acc-02);}
        &:nth-of-type(2) {background-color: var(--clr-acc-03);}
      }
    }
  }
}
small {
  display: block;
  margin-block: var(--adj-60) var(--adj-30);
  color: var(--clr-main-01);
  font-size: var(--fz-S);
  text-align: center;
}

/*===== .ftrLogo =====*/
.ftrLogo {
  max-width: 160px;
  display: block;
  margin-inline: auto;
}

/*===== #ftrNav =====*/
#ftrNav {
    justify-content: center;
    gap: var(--adj-10) var(--adj-60);
  margin-block: var(--adj-60);

  a {
    color: var(--clr-main-03);
    font-weight: 700;
    font-size: var(--fz-M);
    transition: var(--transition);
  }
}

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

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

}



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

:root {
  --transition: .3s ease;
  --filter: drop-shadow(0 0 6px rgba(150,150,150,.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,var(--fz-R));
  border-radius: 9999px;
  background-color: var(--btn-bg-clr,transparent);
  transition: var(--transition);
  filter: var(--filter);
}

/*===== .btnA =====*/
.btnA {
  --btn-width: min(100%,300px);
  --btn-height: 60px;
  --btn-clr: var(--clr-main-03);
  --btn-bg-clr: var(--clr-base);

  margin-top: var(--adj-40);margin-inline: auto;
  border: 2px solid var(--clr-main-03);
}

/*===== .btnD =====*/
.btnD {
  --btn-width: min(100%,300px);
  --btn-height: 60px;
  --btn-clr:  var(--clr-main-02);
  --btn-bg-clr: var(--clr-base);

  margin: var(--adj-20) auto 0;
  border: 2px solid var(--clr-main-02);
}

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

.btnA:hover {
  --btn-clr:  var(--clr-base);
  --btn-bg-clr: var(--clr-main-03);
}
.btnD:hover {
  --btn-clr:  var(--clr-base);
  --btn-bg-clr: var(--clr-main-02);
}

}

/*===== .io =====*/
.io {
  opacity: 0;
}
.anim-on {
  animation: blur-in-expand 0.4s linear both;
}
@keyframes blur-in-expand {
  0% {
    transform: scale(0);filter: blur(12px);opacity: 0;
  }
  100% {
    transform: scale(1);filter: blur(0);opacity: 1;
  }
}



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

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





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

#top {
  section h3 {
    margin-bottom: var(--adj-40);
    text-align: center;
  }
}

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

  .lead {
    margin-bottom: var(--adj-80);
  }
  .i12 {
    padding-bottom: var(--sec-padding);
    background: url(../img/top/act.webp) no-repeat;
    background-position: center bottom;

    .box {
      grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
      gap: 40px min(4.5%,56px);
    }
    .cntBox:nth-of-type(1) {--t-color: var(--clr-sub-01);}
    .cntBox:nth-of-type(2) {--t-color: var(--clr-sub-02);}

    .cntBox h4 {
      width: min(67%,400px);
    }
  }
  .i16 {
    padding-top: var(--adj-80);
    background: url(../img/common/bg01.png);

    .box {
        grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
        gap: 40px min(4.4%,68px);
      padding-block: var(--adj-80) var(--sec-padding);
    }
    .cntBox:nth-of-type(1) {--t-color: var(--clr-sub-03);}
    .cntBox:nth-of-type(2) {--t-color: var(--clr-sub-04);}
    .cntBox:nth-of-type(3) {--t-color: var(--clr-main-01);}

    .cntBox h4 {
      width: min(80%,320px);
      font-size: var(--fz-h5);
    }
  }
}

/*===== .cntBox =====*/
.cntBox {
  --h4-height: 60px;

  display: grid;place-items: center;
  grid-template-rows: subgrid;
  grid-row: span 2;
  row-gap: var(--adj-20);

  h4,img {
    grid-area: 1 / 1;
  }
  h4 {
      display: grid;place-items: center;
    min-width: 240px;
    height: var(--h4-height);
    margin-block: calc(var(--h4-height) / -2) auto;
    padding: .2em;
    position: relative;
    color: var(--clr-base);
    border-radius: 10px;
    background-color: var(--t-color);
  }
  p {
      align-self: flex-start;
      grid-row: 2;
    padding-inline: 1em;
    font-size: var(--fz-R);
  }
  img {
    width: 100%;height: auto;
    border: 2px solid var(--t-color);
    border-radius: 8px;
  }
}

/*===== #sec02 =====*/
#top #sec02 {}

/*===== .about =====*/
.about {
  display: grid;align-items: center;

  dl,img {
    grid-area: 1 / 1;
  }
  dl {
    width: max-content;
    padding: var(--adj-50);
    position: relative;
    border: 1px dashed var(--clr-main-01);
    border-radius: var(--adj-20);
    background-color: rgba(255,255,255,.8);

    dt,dd {
      text-indent: 5px;
    }
    dt {
      --logo-size: 80px;

      font-weight: 700;
      font-size: var(--fz-M);

      &:first-child {
          display: grid;align-items: center;
          grid-template-columns: var(--logo-size) auto;
        margin-bottom: var(--adj-20);
        font-size: var(--fz-h4);line-height: 1.2;

        span {
            grid-column: 1 / -1;
          margin-top: 4px;
          font-size: clamp(12px,.677rem + .32vw,16px); /* 360-1600 */
          text-align: right;
        }
        img {
          max-width: var(--logo-size);height: auto;
        }
      }
      &:not(:first-child) {
        margin-bottom: var(--adj-10);
        padding-bottom: var(--adj-10);
        color: var(--clr-main-01);
        border-bottom: 2px dotted;
      }
    }
    dd {
      font-size: var(--fz-R);

      + dt {
        margin-top: var(--adj-10);
      }
    }
  }
  img {
    width: min(100%,1120px);height: auto;
    margin-left: auto;
  }
}

/*===== .adm =====*/
.adm {
  margin-top: var(--adj-50);
  padding: var(--adj-80) var(--adj-60);
  border-radius: var(--adj-20);
  background: url(../img/common/bg01.png);

  .lead {
    margin-block: var(--adj-30) var(--adj-60);
    font-weight: 700;
    font-size: var(--fz-h5);
  }
  ul {
    display: grid;
    grid-template-columns: repeat(3,auto);
    gap: 1em;

    li {
      display: flex;
      column-gap: 5px;

      &::before {
        color: var(--clr-main-01);
        font-size: 14px;line-height: 2.2;
        content: '● ';
      }
    }
  }
  div {
    display: grid;justify-content: space-between;
    grid-template-columns: repeat(2,minmax(auto,540px));
    gap: min(4.5%,56px);
  }
}

/*===== .mem =====*/
.mem {
  --height: 60px;

  text-align: center;

  dt,dd {
    filter: var(--filter);
  }
  dt {
    max-height: var(--height);
    padding-block: var(--adj-10);
    font-weight: 700;
    font-size: var(--fz-h5);
    border-radius: calc(var(--height) / 2) calc(var(--height) / 2) 0 0;
    background-color: var(--clr-main-02);

    &:not(:nth-last-of-type(1)) {
      color: var(--clr-base);
    }
  }
  dd {
    padding: var(--adj-20);
    font-size: var(--fz-R);
    border-radius: 0 0 calc(var(--height) / 2) calc(var(--height) / 2);
    background-color: var(--clr-base);

    + dt {
      margin-top: var(--adj-40);
    }
  }
  dt:nth-last-of-type(1),
  dd:nth-last-of-type(1) {
    padding: 0;
    background: unset;
  }
}

/*===== .sup =====*/
.sup {
  padding: var(--adj-50) var(--adj-40);
  border-radius: var(--adj-20);
  background: url(../img/top/logo03.svg) no-repeat;
  background-color: var(--clr-base);
  background-position: center bottom var(--adj-80);
  background-size: 294px 215px;
  filter: var(--filter);

  h4 {
      display: flex;align-items: center;
      flex-direction: column;
    margin-bottom: var(--adj-20);
    color: var(--clr-main-01);

    &::before {
        order: 1;
      content: '・・・';
    }
  }
  p {
    font-size: var(--fz-R);
  }
}

/*===== #sec03 =====*/
#top #sec03 {
  background: url(../img/common/bg02.webp);

  .mod {
    color: var(--clr-base);
  }
}



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

.nothing {
  margin-block: 40px;
  text-align: center;
}

/*===== .loop =====*/
#top .loop {}
.loop .btnA {}

/*===== .msgBox =====*/
.msgBox header {}
.msgBox h6 {}
.msgBox + .msgBox {
  margin-top: 1.5em;
}

/*===== .loopData =====*/
.loopData {
  justify-content: flex-start;align-items: center;
}
.loopData time {
  min-width: ;
  font-size: ;
}

/*===== .cate =====*/
.cate {
    display: grid;place-items: center;
  min-width: 80px;
  height: 28px;
  padding-inline: .5em;
  color: ;
  font-weight: ;
  font-size: ;line-height: ;
  border-radius: ;
  background-color: ;
}



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