@charset "UTF-8";

.t-glide__heading {
  font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", source-han-serif-japanese;
}

.l-article,
.t-recruit__text,
.t-recruit__btn,
.outline__heading,
.outline__text {
  font-family: "Noto Sans JP", noto-sans-cjk-jp, sans-serif;
}

:root {
  --logo_size: calc(100vw * 0.1);
  --logo_size_sp: calc(100vw * 0.3);
}

h2 {
  text-align: center;
  width: 100%;
  margin-top: 1.8em;
  margin-bottom: 30px;
  font-weight: bold;
  font-size: 1.5em;
  font-family: "Noto Sans JP", noto-sans-cjk-jp, "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

/* main_visual */

#main_visual {
  width: 100%;
  height: calc(var(--vh, 1vh) * 100);
  background-size: cover;
  background-attachment: fixed;
  position: relative;
  overflow: hidden;
  /* &::after {
  	content: "";
  	width: 100%;
  	height: 100%;
  	position: absolute;
  	top: 0;
  	left: 0;
  	background-image:
  		radial-gradient(black 20%, transparent 20%),
  		radial-gradient(black 20%, transparent 20%);
  	background-size: 10px 10px;
  	background-position: 0 0, 5px 5px;
  	z-index: 1;
  } */
}

#main_visual video {
  min-height: 100%;
  min-height: 100vh;
  min-width: 100%;
  min-width: 100vw;
  position: relative;
}

#main_visual .logo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--logo_size);
  margin-top: calc(-1 * var(--logo_size));
  margin-left: calc(-1 * var(--logo_size) *0.5);
  z-index: 2;
}

#main_visual .catch {
  position: absolute;
  top: 50%;
  left: 0%;
  text-align: center;
  width: 100%;
  margin-top: 1.8em;
  color: #fff;
  font-weight: bold;
  font-size: 1.5em;
  font-family: "Noto Serif Japanese", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  z-index: 2;
  padding: 0 1rem;
}

/* main_visual end */

.t-news {
  margin: 4rem 0 0;
}

.t-news__inner {
  padding: 0 1rem;
}

.t-news__heading {
  text-align: center;
  width: 100%;
  margin-top: 1.8rem;
  font-weight: 500;
  font-size: 1.5rem;
  font-family: "Noto Sans JP", noto-sans-cjk-jp, "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  margin-bottom: 2rem;
}

.t-news__body {
  border-top: 3px solid #444;
  border-bottom: 3px solid #444;
}

.t-news__foot {
  width: 100%;
  text-align: center;
  margin: 2rem 0;
}

.t-news__link {
  display: flex;
  max-width: 192px;
  padding: 10px 15px;
  background: var(--site_color);
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
  position: relative;
  justify-content: center;
  margin: 0 auto;
}

.t-news__link:hover::after {
  transform: translate(0.5rem, 0);
}

.t-news__link::after {
  content: ">";
  transition: 350ms ease;
  position: absolute;
  right: 1rem;
}

.l-article + .l-article {
  border-top: 1px dashed #c3c3c3;
}

.l-article__inner {
  display: block;
  text-decoration: none;
  color: #444;
  padding: 1rem 0;
}

.l-article__content {
  display: flex;
  font-size: 0.8em;
  align-items: center;
  margin-right: 3em;
}

.l-article__cate {
  width: 7rem;
  text-align: center;
  margin-right: 1rem;
  display: block;
  padding: 0.3rem 0;
  background: #c3c3c3;
  color: #fff;
}

.l-article__cate--products {
  background: var(--site_color);
}

.l-article__heading {
  font-size: 1rem;
  font-weight: 400;
}

.l-article__body {
  margin: 1rem 0 0;
}

.l-article__img {
  display: none;
}

.l-article__noimg {
  display: none;
}

.t-recruit {
  margin: 4rem 0 0;
}

.t-recruit__inner {
  display: grid;
  grid-template-columns: minmax(2rem, 1fr) minmax(auto, 1280px) minmax(2rem, 1fr);
}

.t-recruit__inner > * {
  grid-column: 2;
}

.t-recruit__head {
  grid-column: 1/4;
}

.t-recruit__body {
  margin: 1rem 0 0;
  text-decoration: none;
  color: #231815;
}

.t-recruit__heading {
  font-size: 2rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  margin: 0;
  text-align: left;
}

.t-recruit__text {
  margin: 1rem 0 0;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.05em;
}

.t-recruit__btn {
  margin: 1rem auto 0;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #444;
  text-decoration: none;
  display: grid;
  place-items: center;
  padding: 1rem 0;
  border-radius: 20px;
  border: 3px solid #444;
  max-width: 350px;
  position: relative;
}

.t-recruit__btn::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translate(0%, -50%) rotate(45deg);
  width: 1rem;
  height: 1rem;
  border-top: 3px solid #444;
  border-right: 3px solid #444;
}

/* outline 共通 */

/* .outline1 p,
.outline2 p,
.outline3 p,
.outline1 .page_title,
.outline2 .page_title,
.outline3 .page_title, */

/* outline 共通 end */

/* outline */

.outline {
  margin: 4rem 0 0;
}

.outline__inner {
  text-decoration: none;
  color: #444;
  display: grid;
  grid-template-columns: minmax(2rem, auto) minmax(auto, 1280px) minmax(2rem, auto);
}

.outline__inner > * {
  grid-column: 2;
}

.outline__head {
  grid-column: 1/4;
}

.outline__img img {
  max-width: 100%;
  vertical-align: top;
  object-fit: cover;
}

.outline__heading {
  display: flex;
  font-size: 1.75rem;
  text-align: left;
  margin: 1.5rem 0 0;
  color: #144296;
  font-weight: 500;
  align-items: center;
}

.outline__text {
  font-size: 1rem;
  font-weight: 400;
  margin: 1rem 0 0;
}

.outline__btn {
  display: block;
  width: 100%;
  max-width: 120px;
  margin: 1rem 0 0;
  text-decoration: none;
  border-radius: 5px;
  position: relative;
}

.outline__svg {
  max-width: 100%;
  vertical-align: top;
}

.egg {
  width: 40px;
  margin: 0 1rem 0 0;
  transition: 150ms ease;
}

.egg__circle {
  transition: 150ms ease;
}

.t-glide {
  margin: 4rem 0 0;
}

.t-glide__inner {
  display: grid;
  grid-template-columns: minmax(2rem, 1fr) minmax(auto, 1280px) minmax(2rem, 1fr);
}

.t-glide__inner > * {
  grid-column: 2;
}

.t-glide__heading {
  margin: 0;
  font-size: 1rem;
}

.t-glide__body {
  margin: 2rem 0 0;
  grid-column: 1/4;
  width: 100%;
  overflow: hidden;
}

.mainGlide {
  display: grid;
  width: 100%;
}

.mainGlide__track {
  order: 2;
  margin: 2rem 0 0;
  overflow: hidden;
}

.mainGlide__slides {
  display: none;
}

.mainGlide__slide {
  position: relative;
  overflow: hidden;
  max-width: 426px;
}

.mainGlide__slide::before {
  content: "";
  display: block;
  padding-top: 56.25%;
}

.mainGlide__slide .mainGlide__img {
  position: absolute;
  top: 0;
}

.mainGlide__controls {
  order: 1;
  padding: 0 1rem;
}

.mainGlide__bullets {
  display: grid;
  max-width: 1280px;
  margin: 0 auto;
  overflow: hidden;
}

.mainGlide__bullet {
  position: relative;
  grid-row: 1;
  grid-column: 1;
  opacity: 0;
  transition: 350ms ease;
}

.mainGlide__bullet--active {
  opacity: 1;
}

.mainGlide__bullet::before {
  content: "";
  display: block;
  padding-top: 56.25%;
}

.mainGlide__bullet .mainGlide__img {
  position: absolute;
  top: 0;
  border-radius: 20px;
}

.mainGlide__img {
  width: 100%;
  height: 100%;
  vertical-align: top;
  object-fit: cover;
}

@media screen and (min-width: 768px) {
  .outline--reverse .outline__head {
    grid-column: 3/4;
    border-radius: 0 20px 20px 0;
  }

  .outline--reverse .outline__body {
    grid-column: 2;
    grid-row: 1;
  }

  .outline--reverse .outline__body::before {
    border-radius: 20px 0 0 20px;
  }

  .outline__inner {
    grid-template-columns: minmax(2rem, auto) minmax(auto, 640px) minmax(auto, 640px) minmax(2rem, auto);
  }

  .outline__inner:hover .outline__img img {
    transform: scale(1.05);
    filter: brightness(0.7);
  }

  .outline__head {
    grid-column: 1/3;
  }

  .outline__img {
    overflow: hidden;
  }

  .outline__img img {
    transition: 500ms ease;
  }

  .outline__body {
    grid-column: 3;
    margin: 0 3rem;
    align-self: center;
  }

  .outline__heading {
    margin: 0;
  }

  .outline__btn {
    margin: 1rem 0 0 auto;
  }

  .t-recruit__inner {
    grid-template-columns: minmax(2rem, auto) minmax(auto, 640px) minmax(auto, 640px) minmax(2rem, auto);
  }

  .t-recruit__head {
    grid-column: 1/3;
    margin: 0 2rem 0 0;
  }

  .t-recruit__body {
    grid-column: 3;
    margin: 0;
  }

  .t-news__inner {
    max-width: 800px;
    margin: 0 auto;
    padding: 4.5rem 0;
  }

  .t-news__heading {
    font-size: 2rem;
  }

  .l-article__inner {
    display: flex;
  }

  .l-article__body {
    margin: 0;
  }
}

@media screen and (min-width: 1280px) {
  .outline__inner {
    position: relative;
  }

  .outline__inner::before {
    content: "";
    position: absolute;
    width: calc(100% - 4rem);
    max-width: 1280px;
    height: 100%;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    border-radius: 20px;
    border: 3px solid #144296;
    z-index: 1;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
  }

  .outline__inner:hover .outline__body::before {
    background: #FFE066;
  }

  .outline__inner:hover .egg {
    transform: rotate(180deg);
  }

  .outline__inner:hover .egg__circle {
    fill: #e2680d;
    transition: 150ms 150ms ease;
  }

  .outline__head {
    grid-column: 2;
    border-radius: 20px 0 0 20px;
    overflow: hidden;
  }

  .outline__body {
    margin: 0 4.6875rem;
    position: relative;
  }

  .outline__body::before {
    content: "";
    position: absolute;
    width: 640px;
    height: 426px;
    background: transparent;
    z-index: -1;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    border-radius: 0 20px 20px 0;
    transition: 350ms ease;
  }

  .outline__text {
    margin: 2rem 0 0;
  }

  .outline__btn {
    margin: 1.5rem 0 0 auto;
  }

  .t-recruit__inner {
    background: #FFFF67;
    align-items: flex-start;
  }

  .t-recruit__inner > * {
    grid-row: 1;
  }

  .t-recruit__head {
    height: 584px;
    grid-column: 1/span 3;
    margin: 0;
  }

  .t-recruit__body {
    background: #fff;
    padding: 3rem 4.6875rem;
  }

  .t-recruit__body:hover .t-recruit__btn::before {
    right: 0.7rem;
  }

  .t-recruit__img {
    height: inherit;
  }

  .t-recruit__img img {
    height: inherit;
    vertical-align: top;
    object-fit: cover;
  }

  .t-recruit__text {
    margin: 2rem 0 0;
  }

  .t-recruit__btn {
    margin: 3rem auto 0;
    transition: 350ms ease;
  }

  .t-recruit__btn::before {
    transition: 350ms ease;
  }

  .t-glide__heading {
    font-size: 2rem;
  }

  .t-glide__body {
    margin: 4.5rem 0 0;
  }

  .t-news {
    margin: 0;
  }

  .mainGlide__track {
    margin: 5.5rem 0 0;
  }

  .mainGlide__slides {
    display: flex;
  }
}

@media (max-width: 768px) {
  #main_visual .logo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--logo_size_sp);
    margin-top: calc(-1 * var(--logo_size_sp));
    margin-left: calc(-1 * var(--logo_size_sp) *0.5);
  }
}