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



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

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



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

/*=== ORDERED ===*/
#sec01 .mod {background-image: url(../../img/rec/head01.webp);}
#sec02 .mod {background-image: url(../../img/rec/head02.webp);}
#sec03 .mod {background-image: url(../../img/rec/head03.webp);}



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

/*===== #TH =====*/
#TH {
  min-width: var(--std-width);

  .inner {
    padding-right: 0;
  }
}



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

/*===== #MV =====*/
#MV {
  --adj-height: 0px;

  p {
   right: 12px;
  }
}



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

footer h1 img {
  width: 180px!important;
}



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

/*===== .btnA =====*/
.btnA {
  --btn-width: fit-content;
  --btn-height: 100%;

  border-radius: 0;
}

/*===== .btnC =====*/
.btnC {
  --btn-height: fit-content;
}



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

.linkBox dd br {
  display: none;
}



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

:is(#sec01,#sec02) .inner .gd {
  column-gap: var(--adj-40);
}
#sec02 .inner .gd {
  grid-template-columns: 1fr 1fr;
}
#sec02 .gd + .mod2 {
  margin-top: 80px;
}
.linkBox header h3 {
  margin-block: 0 var(--adj-10);
}



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

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

#SV {
  row-gap: 1em;

  p {
    padding-inline: .5em;
    line-height: 1.8;
    text-align: left;
  }
  p br {display: none;}
}
.mod {
  height: 200px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;

  img {
    display: none;
  }
}
:is(#sec01,#sec02) .inner .gd {
  grid-template-columns: 1fr;
}
#sec03 .inner .gd {
  grid-template-columns: 1fr;

  a {
    width: 100%;

    &:nth-of-type(1) .linkBox {
      background-image: url(../../img/rec/sp-link01.webp)
    }
    &:nth-of-type(2) .linkBox {
      background-image: url(../../img/rec/sp-link02.webp)
    }
  }
}
.linkBox {
  padding: var(--adj-30);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;

  header {
    width: 100%;height: fit-content;
    min-height: 300px;
  }
  img {
    display: none;
  }
}
.mvv,
.box {
  grid-template-rows: auto;
}

}
@media (width < 520px) {

#TH .inner h1 {
    display: flex;
    flex-direction: column;
    gap: 5px;
  padding-top: 4px;
  font-size: var(--fz-S);
}
#MV {
  img:nth-of-type(2) {
    object-position: center;
  }
}
.ftrNav {
  grid-template-columns: unset;
}
.blog {
  --fxb: 100px;
}

.anno br {
  display: inherit;
}

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

}