@charset "UTF-8";
/* COMMON ---------------------------- */
main #message {
  width: 100%;
	background-image: url("../img/message_bg1.webp"), url("../img/message_bg2.webp");
  background-repeat: no-repeat, no-repeat;
  background-position:
    50% 0%,
    50% 0%;
  background-size: 90vw auto, 100vw auto;
  display: flex;
  flex-direction: column;
}

main #message h3 {
  margin: 0;
  padding: 0 0 3em;
  width: 100%;
  font-family: "Barlow Semi Condensed", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: calc(1.2 * var(--f-largest));
  text-align: right;
  text-shadow: 0.3em 0.3em .7em rgba(0, 0, 0, 0.5);
  border: 0;
  color: #fff;
  order: 3;
}

main #message p {
  color: #fff;
  text-shadow: 0.1em 0.1em .2em rgba(0, 0, 0, 0.5);
  line-height: 2.6;
  font-weight: 600;
}

main #message p:last-child {
  padding-top: 3em;
  text-align: right;
  line-height: 1;
}

/* 他ページへのリンク */
main #btmLink ul {
  display: flex;
  justify-content: space-between;
}

main #btmLink ul li {
  width: 17%;
  aspect-ratio: 1 / 1;
  border: 1px solid #000;
  border-radius: 1em;
  text-align: center;
}

main #btmLink ul li a {
  display: grid;
  height: 100%;
}

main #btmLink ul li img {
  margin: 0 auto .3em;
  display: block;
  width: 4.6em;
  height: auto;
  align-self: end;
}

main aside#btmLink ul li:hover {
	background-color: var(--hover);
}

/* 社員の声 */
main div#voice {
  margin: 0 auto 20px;
}

main div#voice ul {
  display: flex;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

main div#voice li {
  width: 20%;
  aspect-ratio: 1 / 2;
}

main div#voice li a {
  display: grid;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: auto 100%;
  color: #fff;
  padding: 0 .75em .5em;
  align-items: end;
  text-shadow: 0 0 .3em rgba(0, 0, 0, 0.7);
  line-height: var(--l-narrow);
  font-weight: 600;
}

main div#voice li.pink a { background-image: url(../voice/img/nav25_01_bg.webp); }
main div#voice li.yellow a { background-image: url(../voice/img/nav25_02_bg.webp); }
main div#voice li.orange a { background-image: url(../voice/img/nav06_bg.webp); }
main div#voice li.blue a { background-image: url(../voice/img/nav25_03_bg.webp); }
main div#voice li.green a { background-image: url(../voice/img/nav25_04_bg.webp); }

main div#voice li a:hover {
  background-position: 100% 0;
}

/* /recruit/ 以下のレイアウト関連 */
/* PCの表示幅に関する設定 */
/* 1920px以上は1440pxが有効 */
@media screen and (min-width: 1920px) {
  main #message {
    padding: 0 calc(50% - 720px);
    background-size:
      1440px auto,
      calc(1.083 * 1440px) auto;
  }
  main #message p {
    font-size: 90px;
  }

  main #btmLink ul {
    margin: 85px auto 0;
    width: 1440px;
  }

  #btmLink + h2 {
    margin-top: 85px;
  }

  main div#voice {
    width: 1440px;
  }

  main div.voice ul li {
    width: 480px;
  }

  .largeLink {
    margin: 2em auto 0;
    width: 1440px;
  }

  main div.largeLink a::after {
    top: calc(2em - 42.5px);
  }
}

/* 1280px以上は画面幅の75vwが有効 */
@media screen and (min-width: 1280px) and (max-width: 1920px) {
  main #message {
    padding: 0 12.5vw;
    background-size:
      75vw auto,
      calc(1.083 * 75vw) auto;
  }
  main #message p {
    font-size: 4.5vw;
  }

  main #btmLink ul {
    margin: 4.5vw auto 0;
    width: 75vw;
  }

  #btmLink + h2 {
    margin-top: 4.5vw;
  }

  main div#voice {
    width: 75vw;
  }


  main div.voice ul li {
    width: 25vw;
  }

  .largeLink {
    margin: 2em auto 0;
    width: 75vw;
  }

  main div.largeLink a::after {
    top: calc(2em - 2.25vw);
  }
}

/* 1024px以上は960pxが有効 */
@media screen and (min-width: 1024px) and (max-width: 1280px) {
  main #message {
    padding: 0 calc(50% - 480px);
    background-size:
      960px auto,
      calc(1.083 * 960px) auto;
  }
  main #message p {
    font-size: 59px;
  }

  main #btmLink ul {
    margin: 58px auto 0;
    width: 960px;
  }

  #btmLink + h2 {
    margin-top: 58px;
  }

  main div#voice {
    width: 960px;
  }

  main div.beyond {
    padding-top: 58px;
    padding-left: 600px;
  }
  main div.challenges,
  main div.numbers {
    padding-top: 58px;
    padding-right: 600px;
  }

  main div.voice ul li {
    width: 320px;
  }

  .largeLink {
    margin: 2em auto 0;
    width: 960px;
  }

  main div.largeLink a::after {
    top: calc(2em - 29px);
  }
}

/* それ以下は画面幅の90vwが有効 */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  main #message {
    padding: 0 5vw;
    background-size:
      90vw auto,
      calc(1.083 * 90vw) auto;
  }
  main #message p {
    font-size: 5.4vw;
  }

  main #btmLink ul {
    margin: 5.4vw auto 0;
    width: 90vw;
  }

  #btmLink + h2 {
    margin-top: 5.4vw;
  }

  main div#voice {
    width: 90vw;
  }

  main div.challenges,
  main div.numbers {
    padding-top: 5.4vw;
    padding-right: 56vw;
  }

  main div.voice ul li {
    width: 30vw;
  }

  .largeLink {
    margin: 2em auto 0;
    width: 90vw;
  }

  main div.largeLink a::after {
    top: calc(2em - 2.7vw);
  }
}



/* スマートフォン表示 */
@media screen and (max-width: 768px) {
  main section#message {
    padding: 0 5vw;
  }

  main #message h3 {
    padding: 0 0 2em;
    text-shadow: 0.1em 0.1em .2em rgba(0, 0, 0, 0.5);
    font-size: var(--f-largest);
  }

  main #message p {
    font-size: var(--f-large);
  }

/* 他ページへのリンク */
  main #btmLink {
    margin: 0 auto 2em;
    width: 90vw;
  }

  main #btmLink ul {
    flex-wrap: wrap;
  }

  main #btmLink ul li {
    margin-bottom: 3vw;
    width: 48%;
    aspect-ratio: 2 / 1;
  }

  main #btmLink ul li a {
    padding: 0 3vw;
    grid-template-columns: 1fr 2fr;
    place-items: center;
  }

  main #btmLink ul li img {
    margin: 0 auto;
    width: 13vw;
    align-self: center;
  }

/* 社員の声 */
  h2:has(+ #voice) {
    padding: 0 3vw;
  }

  main div#voice {
    margin-top: -33vw;
  }

  main div#voice ul {
    margin: 0 auto;
    width: 90vw;
    flex-wrap: wrap;
  }

  main div#voice li {
    width: 50%;
    aspect-ratio: 2 / 3;
  }

  main div#voice li:first-child {
    margin-left: 45vw;
  }

  main div#voice li a {
    background-position: 0 0;
    background-size: 200% auto;
    padding: 0 .75em .5em;
    text-shadow: 0 0 .2em #000,
      1px 1px 2px #000;
  }

  main div.largeLink a::after {
    bottom: calc(2em - 6vw);
  }
}