@charset 'UTF-8';

/* orverride */
#wrapper {
  padding-top: 0;
}
@media screen and (min-width: 768px) {
  #wrapper > header.inter_bgdark3 label {
    color: inherit;
  }
}
@media screen and (min-width: 1600px) {
  #wrapper > header.inter_bgdark4 label {
    color: inherit;
  }
}
@media screen and (min-width: 1680px) {
  #wrapper > header.inter_bgdark4 .logo a {
    color: inherit;
  }
}

/* orverride header */
#wrapper > header {
  padding: 0;
  min-height: auto;
  position: static;
}
#wrapper > header .logo {
  position: fixed;
  top: 3.5547rem;
  left: 3rem;
  z-index: 5;
}
@media screen and (min-width: 768px) {
  #wrapper > header .logo {
    top: 5.1rem;
    left: 5rem;
  }
}
#wrapper > header label {
  position: fixed;
  top: 3rem;
  right: 3rem;
}
@media screen and (min-width: 768px) {
  #wrapper > header label {
    top: 5.1rem;
    right: 5rem;
  }
}

#wrapper > header.fv .logo a,
#wrapper > header.fv label {
  color: rgb(255, 255, 255);
}

/*  fv  */
#fv {
  padding-top: 8.2rem;
  margin: 0 calc(50% - 50vw);
  min-height: 100svh;
  box-sizing: border-box;
  position: relative;
  z-index: 5;
  background-color: currentColor;
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  #fv {
    padding-top: 14rem;
  }
}
#fv .text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  min-height: calc(100svh - 8.2rem);
  box-sizing: border-box;
}
@media screen and (min-width: 768px) {
  #fv .text {
    margin-left: calc(222 / 1920 * 100vw);
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    min-height: calc(100svh - 14rem);
  }
}
#fv h1 {
  padding-top: 5.1rem;
  padding-bottom: 2.1rem;
  padding-left: 3.5rem;
  padding-right: 3.5rem;
  margin: 0;
}
@media screen and (min-width: 768px) {
  #fv h1 {
    padding-top: calc(72 / 1920 * 100vw);
    padding-bottom: calc(30 / 1920 * 100vw);
    padding-left: calc(50 / 1920 * 100vw);
    padding-right: calc(50 / 1920 * 100vw);
  }
}
#fv h1 .image {
  margin: 0;
  display: block;
  width: 23.5rem;
}
@media screen and (min-width: 768px) {
  #fv h1 .image {
    width: calc(335 / 1920 * 100vw);
  }
}
#fv h1 img {
  width: 100%;
}
#fv .tagline {
  padding: 2.3rem;
  margin-top: calc(13 / 812 * 100svh);
  margin-bottom: calc(73 / 812 * 100svh);
}
@media screen and (min-width: 768px) {
  #fv .tagline {
    padding: calc(34 / 1920 * 100vw);
    margin-top: calc(18 / 1080 * 100svh);
    margin-bottom: calc(65 / 1080 * 100svh);
  }
}
#fv .tagline .image {
  display: block;
  width: 11.5rem;
}
@media screen and (min-width: 768px) {
  #fv .tagline .image {
    width: calc(164 / 1920 * 100vw);
  }
}
#fv .tagline .image img {
  width: 100%;
}
#fv .scroll {
  margin: 0;
}
#fv .scroll a {
  padding-top: calc(8 / 14 * 1em);
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--Oswald);
  font-size: 1.4rem;
  font-weight: 300;
  line-height: 1;
  letter-spacing: calc(1.12 / 14 * 1em);
  text-indent: calc(1.12 / 14 * 1em);
  text-align: center;
  color: rgb(255, 255, 255);
}
@media screen and (min-width: 768px) {
  #fv .scroll a {
    font-size: calc(14 / 1920 * 100vw);
  }
}
#fv .scroll a::after {
  content: "";
  margin-top: calc(8 / 14 * 1em);
  margin-bottom: calc(120 / 812 * -100svh);
  width: 1px;
  height: calc(240 / 812 * 100svh);
  background-color: currentColor;
  -webkit-animation: scroll 4s infinite ease-in-out;
  animation: scroll 4s infinite ease-in-out;
}
@media screen and (min-width: 768px) {
  #fv .scroll a::after {
    margin-bottom: 0;
    height: calc(180 / 1080 * 100svh);
  }
}

/* fv bg */
#fv .bg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -10;
  background-color: grey;
  -webkit-mask-image: linear-gradient(to right, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 50%, rgb(255, 255, 255, 0) 50%, rgb(255, 255, 255, 0) 100%);
  mask-image: linear-gradient(to right, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 50%, rgb(255, 255, 255, 0) 50%, rgb(255, 255, 255, 0) 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
  -webkit-mask-size: 200% 100%;
  mask-size: 200% 100%;
  transition: 0.4s -webkit-mask-position ease-out;
  transition: 0.4s mask-position ease-out;
  transition: 0.4s mask-position ease-out, 0.4s -webkit-mask-position ease-out;
  transition-delay: 1.2s;
}
#fv.init .bg {
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
}
#fv .bg .swiper {
  height: 100%;
  -webkit-animation: 1ms bg-parallax-sp linear backwards;
  animation: 1ms bg-parallax-sp linear backwards;
  animation-timeline: scroll(block root);
  animation-range: 0 100svh;
}
@media screen and (min-width: 768px) {
  #fv .bg .swiper {
    -webkit-animation-name: bg-parallax;
    animation-name: bg-parallax;
  }
}
#fv .bg ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
#fv .bg img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

/* article */
article[id] {
  padding-left: calc(50vw - 50%);
  padding-right: calc(50vw - 50%);
  margin: 0 calc(50% - 50vw);
  display: flex;
  box-sizing: border-box;
  position: relative;
  z-index: 0;
}
@media screen and (min-width: 768px) {
  article[id] {
    display: flex;
  }
}
article[id].fadein.outside .text {
  translate: 0 1.5rem;
  opacity: 0;
}
@media screen and (min-width: 768px) {
  article[id].fadein.outside .text {
    translate: 0 2.5rem;
  }
}
article[id].fadein:not(.outside) .text {
  transition: 0.8s translate ease-out 0.4s, 0.8s opacity ease-in-out 0.4s;
}
article[id] h2 {
  padding: 1.4rem 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 768px) {
  article[id] h2 {
    padding: 0.8rem 0;
  }
}
article[id] h2 .ja {
  padding: 0.2em 0;
  display: block;
  font-size: 1.4rem;
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: 0.1em;
  color: rgb(255, 255, 255);
}
@media screen and (min-width: 768px) {
  article[id] h2 .ja {
    padding: 0.3em 0;
    font-size: 1.6rem;
    line-height: 1.6;
  }
}
article[id] h2 .en {
  padding: 0.085em 0;
  order: -10;
  display: block;
  font-family: var(--Oswald);
  font-size: 3rem;
  font-weight: 500;
  line-height: 1.17;
  letter-spacing: calc(3.6 / 45 * 1em);
  color: rgb(255, 255, 255);
}
@media screen and (min-width: 768px) {
  article[id] h2 .en {
    padding: 0.055em 0;
    font-size: 4.5rem;
    line-height: 1.11;
  }
}
article[id] .desc {
  padding: 0.57em 0;
  font-size: 1.4rem;
  line-height: 2.14;
}
@media screen and (min-width: 768px) {
  article[id] .desc {
    padding: 0.625em 0;
    font-size: 1.6rem;
    line-height: 2.25;
  }
}
article[id] .desc p {
  margin: 0;
  letter-spacing: calc(1.12 / 16 * 1em);
  text-align: justify;
  color: rgb(255, 255, 255);
}
article[id] .button {
  padding: 1.8rem 0;
  display: flex;
}
@media screen and (min-width: 768px) {
  article[id] .button {
    padding: 2.4rem 0;
  }
}
article[id] .button a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  min-width: 12rem;
  font-family: var(--Oswald);
  font-size: 1.4rem;
  line-height: 1.4;
  letter-spacing: calc(0.56 / 14 * 1em);
  color: rgb(255, 255, 255);
  border-bottom: 1px solid currentColor;
  transition: 0.2s border-color ease-out;
}
article[id] .button a + a {
  margin-left: 5rem;
}
article[id] .button a:hover {
  border-color: var(--color-hover);
  opacity: 1;
}
article[id] .button a::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 0.7rem solid currentColor;
  border-top: 0.45rem solid transparent;
  border-bottom: 0.45rem solid transparent;
}
article[id] .bg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -10;
  overflow: hidden;
  background-color: rgb(242, 240, 233);
}
article[id] .bg img {
  margin-top: -3rem;
  width: 100%;
  height: calc(100% + 3rem);
  -o-object-fit: cover;
  object-fit: cover;
}
@media screen and (min-width: 768px) {
  article[id] .bg img {
    margin-top: -5rem;
    height: calc(100% + 5rem);
  }
}
article[id].fadein.outside .bg img {
  translate: 0 3rem;
  opacity: 0.25;
}
@media screen and (min-width: 768px) {
  article[id].fadein.outside .bg img {
    translate: 0 5rem;
  }
}
article[id].fadein:not(.outside) .bg img {
  transition: 2.4s translate ease-out, 0.8s opacity ease-in-out;
}

/* about, craftsmanship */
#about,
#craftsmanship,
#recruitments,
#products {
  padding-bottom: 6rem;
}
#about {
  padding-top: max(120 / 812 * 100svh, 14rem);
}
#craftsmanship,
#recruitments {
  padding-top: 14rem;
  padding-bottom: 6rem;
}
@media screen and (min-width: 768px) {
  #about,
  #craftsmanship {
    padding-top: 12rem;
    padding-bottom: 12rem;
    min-height: 90rem;
  }
  #about {
    justify-content: flex-end;
    align-items: flex-end;
  }
}
#products .text {
  padding-top: 1.8rem;
}
@media screen and (min-width: 768px) {
  #products .text {
    padding-top: 0;
  }
  #about .text,
  #craftsmanship .text {
    padding-bottom: 0.4rem;
    max-width: 61rem;
  }
}

/* products, recruitments */
main > .inner_wrapper {
  padding: 6rem calc(50vw - 50%);
  margin: 0 calc(50% - 50vw);
  background-color: rgb(242, 240, 233);
}
@media screen and (min-width: 768px) {
  main > .inner_wrapper {
    padding-top: 2rem;
    padding-bottom: 16rem;
  }
}
#products {
  padding-top: 0;
  flex-direction: column;
}
@media screen and (min-width: 768px) {
  #products {
    flex-direction: row;
  }
  #products,
  #recruitments {
    padding-top: 14rem;
    padding-bottom: 0;
    justify-content: flex-end;
    align-items: center;
    min-height: 65rem;
    box-sizing: content-box;
  }
  #recruitments {
    padding-left: 12rem;
    padding-right: 12rem;
    margin-left: -12rem;
    margin-right: -12rem;
    max-width: 144rem;
  }
  #products .text,
  #recruitments .text {
    max-width: 50rem;
  }
}
#products .text h2 .ja,
#products .text h2 .en,
#products .text p,
#products .button a {
  color: rgb(109, 137, 167);
}
#products .button a:hover {
  border-color: rgb(214, 220, 226);
}
@media screen and (max-width: 767px) {
  /* sp only */
  #products .bg {
    order: -10;
    position: static;
    z-index: auto;
  }
}
@media screen and (min-width: 768px) {
  #products .bg,
  #recruitments .bg {
    top: 14rem;
  }
  #products .bg {
    width: 50%;
    right: auto;
  }
}

/* news */
#news {
  padding: 5rem 0;
  margin: 0;
  display: block;
  position: static;
}
@media screen and (min-width: 768px) {
  #news {
    padding: 12rem 0 15rem 0;
    display: grid;
    grid-template-columns: 26rem 1fr;
    grid-template-rows: auto auto 1fr;
  }
  #news h2 {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
  }
  #news .artlist {
    grid-column: 2 / 3;
    grid-row: 1 / 4;
  }
  #news .button {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
  }
}
#news h2 {
  margin: 0;
}
@media screen and (min-width: 768px) {
  #news h2 {
    padding-top: 2.5rem;
  }
}
#news h2 .ja,
#news h2 .en {
  color: currentColor;
}
#news article {
  background-image: linear-gradient(to right, currentColor 0%, currentColor 55%, rgb(255, 255, 255, 0) 55%, rgb(255, 255, 255, 0) 100%);
  background-position: left bottom;
  background-size: 9px 1px;
  background-repeat: repeat-x;
}
#news .init {
  --shrink-height: 100svh;
  --stretch-height: 100svh;
  max-height: var(--shrink-height);
  overflow: hidden;
}
#news .init.open {
  max-height: var(--stretch-height);
  transition: 0.4s max-height ease-out;
}
#news .init:not(.all) article:nth-of-type(n + 6) {
  display: none;
}
#news article a {
  padding: 3rem 0;
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 768px) {
  #news article a {
    padding: 1.7rem 0;
    flex-direction: row;
    align-items: center;
  }
  #news article a h3 {
    flex-basis: 82rem;
  }
  #news article a time {
    flex-basis: 12rem;
    flex-shrink: 0;
  }
}
#news article h3 {
  padding: 0.5em 0 0 0;
  margin: 0;
  font-size: 1.4rem;
  font-weight: normal;
  line-height: 2;
  letter-spacing: calc(1.26 / 18 * 1em);
}
@media screen and (min-width: 768px) {
  #news article h3 {
    padding: 0.5em 0;
    font-size: 1.8rem;
  }
}
#news article time {
  order: -10;
  display: block;
  font-family: var(--Oswald);
  font-size: 1.4rem;
  line-height: 1;
  letter-spacing: calc(1.12 / 16 * 1em);
}
@media screen and (min-width: 768px) {
  #news article time {
    font-size: 1.6rem;
  }
}
@media screen and (max-width: 767px) {
  /* sp only */
  #news .button {
    padding: 4rem 0;
  }
}
#news .button a {
  color: currentColor;
}
#news .button a .more {
  display: inline-block;
  vertical-align: top;
  width: calc(31.992 / 14 * 1em);
  overflow: hidden;
  white-space: nowrap;
}
#news .button a::after {
  transition: 0.2s rotate ease-out;
}
#news .button a.less::after {
  rotate: -90deg;
}