@charset "UTF-8";

:root {
  --std-width: 1024px;
  --std-clr: #191919;
  --std-fz: clamp(15px,.847rem + .4vw,20px); /* 360-1600 */
  --std-lh: 1.7;
  --std-ls: 0;

  --clr-base: #fff;
  --clr-main-01: #00589b;
  --clr-main-02:;
  --clr-sub-01: #404040;
  --clr-sub-02:;
  --clr-acc-01: #999b85;
  --clr-acc-02: #f7f7f7;
  --clr-acc-03: #f4f8ff;

  --fz-h1: var(--fz-R);
  --fz-h2:;
  --fz-h3: clamp(22px,1.121rem + 1.13vw,36px); /* 360-1600 */
  --fz-h4: clamp(20px,1.105rem + .65vw,28px);  /* 360-1600 */
  --fz-h5: clamp(18px,1.016rem + .48vw,24px);  /* 360-1600 */
  --fz-h6: var(--fz-M);
  --fz-M: clamp(14px,.802rem + .32vw,18px);    /* 360-1600 */
  --fz-R: clamp(13px,.758rem + .24vw,16px);    /* 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: 80px;
  --sec-padding: 0 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: 700;
}



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

.bdb {
  padding-bottom: var(--adj-20);
  border-bottom: 2px solid var(--clr-main-01);
}
.tac {
  text-align: center;
}

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

    display: grid;
    grid-template-columns: 1fr var(--inner-width) 1fr;
    column-gap: var(--inner-gap);
  margin-inline: auto;

  > * {
    grid-column: 2;
  }
}



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

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

/*===== .mod =====*/
.mod {
  position: sticky;inset: 0;
  z-index: 3;
  transform: translateZ(0);

  img {
    width: 100%;height: auto;
    margin: auto;
  }
}

/*===== .mod2 =====*/
.mod2 {
  h3 {
      display: grid;place-items: center;
    color: var(--clr-main-01);

    span {
      font-size: var(--fz-h5);line-height: 1.5;
    }
  }
}

/*=== ORDERED ===*/
#sec02 .mod2 span {
  font-style: italic;
}



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

/*===== #TH =====*/
#TH {
  height: var(--TH-height);
  background-color: var(--clr-base);

 .inner {
      justify-content: space-between;align-items: center;
      grid-template-columns: auto auto;
      gap: unset;
    max-width: 1920px;
    height: 100%;
    padding-inline: 12px;

    > * {
      grid-column: unset;
    }
  }
  h1 {
      display: grid;align-items: baseline;
      grid-auto-flow: column;
      gap: var(--adj-20);
    height: max-content;
  }
  img {
    width: clamp(124px,5.852rem + 8.43vw,180px);
  }
}



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

/*===== #MV =====*/
#MV {
  --cnt-height: calc(200vh - var(--adj-height));
  --adj-height: var(--TH-height);

  background: url(../../img/rec/ptn02.png);


  div {
    height: calc(100vh - var(--adj-height));
    position: sticky;inset: 0;
  }
  p {
    position: absolute;inset: 12px auto auto 12px;
    color: var(--clr-base);
    font-weight: 700;
    font-size: clamp(12px,.677rem + .32vw,16px);line-height: 1.4;
  }
  img {
    width: 100%;height: auto;
    object-fit: contain;

    &:nth-of-type(2) {
      display: none;
    }
  }
}

@media (width <= 1024px) {
  #MV {
    img:nth-of-type(1) {
      display: none;
    }
    img:nth-of-type(2) {
      display: inherit;
      aspect-ratio: 430/956;
      object-fit: cover;
      object-position: center 80%;
    }
  }
}

/*===== #SV =====*/
#SV {
  --cnt-height: 100vh;

    display: grid;place-items: center;align-content: center;
    row-gap: 3.7vh;
  margin-top: -100vh;
  padding: var(--adj-50) var(--adj-20);
  color: var(--clr-base);
  text-align: center;
  background-image: url(../../img/rec/SV.webp);
  background-size: cover;

  h3,p {
    filter: drop-shadow(0 0 3px rgba(78,93,185,1));
  }
  p {
    margin: 0;
    font-size: clamp(14px,.766rem + .48vw,20px); /* 360-1600 */

    &:last-child,
    b {
      font-weight: 700;
    }
  }
  em {
    display: grid;justify-content: center;
    grid-auto-flow: column;

    &::before,
    &::after {
      font-size: calc(var(--fz-h3) * 2);
    }
    &::before {
      content: '“';
    }
    &::after {
      content: '”';
    }
  }
}

/*===== .vis =====*/
.vis {
  width: 100%;height: var(--cnt-height);
  position: relative;
  background-position: center center;
  background-repeat: no-repeat;
}



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

section {
  padding-block: var(--sec-padding);
  position: relative;
  z-index: 3;

  .inner {
    padding-top: var(--adj-100);
    position: relative;
    z-index: 4;
    transform: translateZ(0);
  }
}



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

/*===== .ctc =====*/
.ctc {
  padding-block: var(--adj-40);
  font-weight: 700;
  background-color: var(--clr-acc-02);

  .inner {
    place-items: center;
  }
}



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

footer {
  padding-block: calc(var(--adj-100) + var(--adj-20)) var(--adj-40);
  position: sticky;top: 100vh;
  color: var(--clr-base);
  font-weight: 700;
  text-align: center;
  background: url(../../img/rec/ptn02.png) repeat;
  background-color: #001627;

  h1 {
    display: grid;place-items: center;
    gap: var(--adj-20);
  }
}

/*===== .ftrNav =====*/
.ftrNav {
    display: grid;justify-content: center;place-items: center;
    grid-template-columns: repeat(3,auto);
    gap: 1em 2em;
  margin-block: var(--adj-80) var(--adj-100);
}
.ftrNav a,
footer small {
  font-size: var(--fz-R);
}



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

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

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

/*===== .btnA =====*/
.btnA {
  --btn-width: 200px;
  --btn-height: var(--adj-50);
  --btn-clr: var(--clr-base);
  --btn-fz: var(--fz-R);
  --btn-bg-clr: var(--clr-main-01);
}
.btnA::before {
  --ico-size: 20px;

  width: var(--ico-size);height: var(--ico-size);
  background: url(../../img/rec/ico01.svg) no-repeat;
  background-position: center center;
  background-size: contain;
  content: '';
}

/*===== .btnC =====*/
.btnC {
  --btn-width: min(100%,400px);
  --btn-height: 60px;
  --btn-clr: var(--clr-base);
  --btn-fz: var(--fz-h4);
  --btn-bg-clr: var(--clr-main-01);

  margin-top: var(--adj-20);
}
.btnC::before {
  --ico-size: 34px;

  width: var(--ico-size);height: var(--ico-size);
  background: url(../../img/rec/tel.svg) no-repeat;
  background-position: center center;
  background-size: contain;
  content: '';
}

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

.btnA:hover,
.btnC:hover {
  --btn-bg-clr: #00a170;
  transition: var(--transition);
}

}

/*===== .io =====*/
.io {
  opacity: 0;
}

#SV > *.anim-on {
  animation:tracking-in-expand .5s linear both;
}
:is(.linkBox,.mvv).anim-on {
  animation: blur-in-expand .5s linear both;
}
.box.anim-on {
  animation: scale-up-horizontal-center .5s;
}
#sec02 .inner .gd:nth-of-type(2) img.anim-on {
  animation: rotate-scale-down .3s linear both;
}


@keyframes tracking-in-expand {
  0% {
    letter-spacing: -.2em;
  }
  40% {
    opacity: .6;
  }
  100% {
    opacity: 1;
  }
}
@keyframes blur-in-expand {
  0% {
    transform: scale(0);filter: blur(12px);
  }
  100% {
    transform: scale(1);filter: blur(0);
  }
}
@keyframes scale-up-horizontal-center {
  0% {
    transform: scaleX(.2);filter: blur(12px);
  }
  100% {
    transform: scaleX(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(
  .anno
) br {
  display: none;
}





/* =====<=====<=====<=====<=====<=====<===== */
/* !<- ORDERED / #sec01 ->                   */
/* =====>=====>=====>=====>=====>=====>===== */

:is(#sec01,#sec03) .inner {
  background-color: var(--clr-base);
}
#sec01 {
  .inner {
    .gd {
      justify-content: center;
      grid-template-columns: repeat(2,1fr);
      gap: 80px 8.75%;
    }
  }
}
.mvv,
.box {
    display: grid;place-items: center;
    grid-template-rows: subgrid;
    row-gap: 1em;
  width: min(100%,640px);

  img {
    width: 100%;height: auto;
    filter: var(--filter);
  }
}

/*===== .mvv =====*/
.mvv {
  grid-row: span 4;

  .mod2 {
    + p {
      font-weight: 700;
      font-size: var(--fz-h4);line-height: 1.5;
      text-align: center;
    }
    + p + p {
      font-size: var(--fz-M);
    }
  }
  p {
    margin: 0;
    padding-inline: .5em;
  }
  &:nth-of-type(1) {
    grid-column: 1 / -1;
  }
}



/* =====<=====<=====<=====<=====<=====<===== */
/* !<- ORDERED / #sec02 ->                   */
/* =====>=====>=====>=====>=====>=====>===== */

#sec02 {
  background-color: var(--clr-acc-03);
  background-image: url(../../img/rec/ptn01.png);

  .inner {
    background-color: var(--clr-acc-03);
    background-image: url(../../img/rec/ptn01.png);

    .gd {
      justify-content: center;
      grid-template-columns: repeat(2,min(40%,640px));
      gap: 80px 6.25%;
    }
    .gd:nth-of-type(2) {
      --col-size: 380px;

      grid-template-columns: repeat(auto-fill,minmax(min(100%,var(--col-size)),1fr));
      gap: var(--adj-40) calc(var(--adj-40) - 2px);

      img {
        width: 100%;height: auto;
        aspect-ratio: 25/29;
        filter: drop-shadow(0 0 8px rgba(129,147,255,.2));
      }
    }
  }
  .gd + .mod2 {
    margin-top: var(--adj-100);

    + p {
      margin-block: var(--adj-30) var(--adj-50);
      text-align: center;
      font-size: var(--fz-M);
    }
  }
}

@media (width < 1280px) {

#sec02 .inner .gd:nth-of-type(2) {
  --col-size: 300px;
}

}

/*===== .box =====*/
.box {
  grid-row: span 3;

  p {
    font-size: var(--fz-M);
    text-align: center;
  }
  figure {
    display: grid;
  }
}
.youtube {
  width: 100%;

  iframe {
    width: 100%;height: auto;
    aspect-ratio: 16/9;
  }
}
.anno {
  margin-top: 1em;
  color: var(--clr-acc-01);
  font-size: var(--fz-R);
}



/* =====<=====<=====<=====<=====<=====<===== */
/* !<- ORDERED / #sec03 ->                   */
/* =====>=====>=====>=====>=====>=====>===== */

#sec03 {
  padding-bottom: 50px;

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

    .gd {
      justify-content: center;
      grid-template-columns: repeat(2,1fr);
      gap: var(--adj-80) min(7.19%,92px);
    }
  }
}

/*===== .linkBox =====*/
.linkBox {
  --box-padding: calc(100% - var(--adj-60));

    display: grid;
  width: 100%;height: auto;
  filter: var(--filter);

  header {
      display: grid;align-content: start;
      grid-area: 1 / 1;
    width: var(--box-padding);height: var(--box-padding);
    margin: auto;
    padding: var(--adj-70) var(--adj-30);
    color: var(--clr-base);
    border: 6px solid;

    h3 {
      height: fit-content;
      margin-block: clamp(60px,-26.25rem + 46.88vw,180px) var(--adj-50); /* 1024-1280 */
      text-align: center;
    }
  }
  dt {
    font-weight: 700;
  }
  dd {
    font-size: var(--fz-M);
  }
  dd + dt {
    margin-top: 1em;
  }
  img {
      grid-area: 1 / 1;
      order: -1;
    width: 100%;height: auto;
  }
}

/*===== #secInfo =====*/
#secInfo {
  padding-top: var(--adj-100);
  position: relative;
  z-index: 4;
  background-color: var(--clr-base);
  transform: translateZ(0);

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

    padding-block: var(--adj-30);
    border-top: 1px solid #edf1ff;
    border-bottom: 1px solid #edf1ff;
  }
}
.blog {
  --fxb: 130px;

  width: 100%;
  padding: .75em 1em;

  header {
    justify-content: flex-start;align-items: center;

    * {
      line-height: 1.5!important;
    }
  }
  h6 {
      flex-basis: calc(100% - var(--fxb));
    padding-left: 1.5em;
    border-left: 3px solid;
  }
  &:nth-of-type(odd) {
    background: var(--clr-acc-02);
  }
  &:nth-of-type(odd) h6 {
    border-color: var(--clr-base);
  }
  &:nth-of-type(even) h6 {
    border-color: var(--clr-acc-02);
  }
  + .blog {
    margin-top: var(--adj-10);
  }
  a {
    color: var(--clr-main-01);
    transition: .5s ease;

    &:hover {
      color: var(--std-clr);
    }
  }
  .time {
      align-self: stretch;
      flex-basis: var(--fxb);
      order: -1;
    color: var(--clr-acc-01);
    font-size: var(--fz-R);
  }
}
.nothing {
  color: #ccc;
  font-size: var(--fz-R);
  text-align: center;
}