@charset "utf-8";

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-y: hidden;
}

h2 span,
.textColor,
.textColor02,
.color,
.infoInner01 .news_day,
.infoInner02 span,
.service h3,
.service span,
.companyInnerRight span,
.indexContactText span {
  color: #A3B087;
}

.textColor02,
.color,
.infoInner01 .news_day,
.infoInner02 span,
.service span,
.companyInnerRight span,
.indexContactText span {
  font-weight: bold;
}

h2,
h2 span {
  letter-spacing: .1em;
}

h2 {
  font-size: clamp(60px, 6vw, 90px);
}

h2 span {
  font-size: clamp(70px, 7vw, 100px);
}

.flexbox {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 横スクロール*/
.wrapper {
  display: flex;
  flex-wrap: nowrap;
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow-x: scroll;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
}

header,
section {
  flex: 0 0 100%;
  min-width: 100%;
  height: 100vh;
}

/* ----------------------------
        ボタンデザイン
----------------------------- */
.contactbtn,
.companybtn,
.brandbtn,
.oem .oembtn {
  font-size: clamp(16px, 1.5vw, 22px);
}

.brandbtn,
.oem .oembtn,
.contactbtn {
  margin-top: 4em;
}

.companybtn {
  margin-top: 3.5em;
}

.contactbtn {
  margin-right: 2em;
}

.contactbtn a span,
.companybtn a span,
.brandbtn a span,
.oembtn a span {
  color: #FFF8D4;
  font-weight: normal;
}

.text-wrap::before {
  display: inline-block;
  content: "";
  border: 2px solid #FFF8D4;
  border-color: #FFF8D4 #FFF8D4 transparent transparent;
  width: 5px;
  height: 5px;
  margin: auto 20px 13px 0;
  transform: rotate(45deg);
}

.text-wrap {
  display: flex;
  gap: 4px;
}

.companybtn .text-wrap,
.brandbtn .text-wrap,
.oem .text-wrap,
.contactbtn .text-wrap {
  justify-content: flex-end;
  align-items: flex-start;
}

.text-wrap:hover .letter {
  text-shadow: 0 0 0 #FFF8D4, 0 1.5em 0 #FFF8D4;
}

.letter {
  color: transparent;
  text-shadow: 0 -1.5em 0 #FFF8D4, 0 0 0 #FFF8D4;
  transition: text-shadow .2s;
  transition-delay: calc(var(--index) * 0.05s);
  overflow: hidden;
}

.sr-only {
  white-space: nowrap;
  clip: rect(0, 0, 0, 0);
  border-width: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  position: absolute;
}

/* ----------------------------
        フェード設定
----------------------------- */
.fadeIn {
  opacity: 0;
  transition: all 2.5s ease;
}

.fadeIn.fade {
  opacity: 1;
}

.fadeInAnime01,
.fadeInAnime02,
.fadeInAnime03,
.fadeInAnime04,
.fadeInAnime05 {
  opacity: 0;
  transition: all 3s ease;
}

.fadeInAnime01.fade,
.fadeInAnime02.fade,
.fadeInAnime03.fade,
.fadeInAnime04.fade,
.fadeInAnime05.fade {
  opacity: 1;
  animation: fadeanime 4s forwards;
}

.fadeInAnime01 {
  animation-delay: .5s;
}

.fadeInAnime02 {
  animation-delay: 1s;
}

.fadeInAnime03 {
  animation-delay: 1.5s;
}

.fadeInAnime04 {
  animation-delay: 2s;
}

.fadeInAnime05 {
  animation-delay: 2.5s;
}

@keyframes fadeanime {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/* ----------------------------
         section catch
----------------------------- */
.catch {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  transition: opacity 10s ease;
  opacity: 0;
}

.catch.fade {
  opacity: 1;
  background: url(../img/noise.png), linear-gradient(#313647, #435663);
}

.space {
  padding-left: 30px;
}

.catchEN,
.catchJA {
  display: flex;
  overflow: hidden;
}

.catchEN {
  font-size: clamp(70px, 5vw, 90px);
}

.catchJA {
  font-size: clamp(55px, 4vw, 70px);
  letter-spacing: .15em;
}

.catchInner03 {
  margin-top: 75px;
}

.catchInner01 p,
.catchInner02 p,
.catchInner03 p,
.catchInner04 p {
  margin: 0;
  opacity: 0;
}

.catchInner01 p,
.catchInner02 p {
  animation: textanimation .7s forwards;
}

.catchInner03 p,
.catchInner04 p {
  animation: textanimation 4s forwards;
}

/* 1文字目 */
.catchInner01 p:nth-child(1) {
  animation-delay: 1s
}

/* 2文字目 */
.catchInner01 p:nth-child(2) {
  animation-delay: 1.2s
}

/* 3文字目 */
.catchInner01 p:nth-child(3) {
  animation-delay: 1.4s
}

/* 4文字目 */
.catchInner01 p:nth-child(4) {
  animation-delay: 1.8s
}

/* 5文字目 */
.catchInner01 p:nth-child(5) {
  animation-delay: 2s
}

/* 6文字目 */
.catchInner01 p:nth-child(6) {
  animation-delay: 2.2s
}

/* 7文字目 */
.catchInner01 p:nth-child(7) {
  animation-delay: 2.4s
}

/* 8文字目 */
.catchInner01 p:nth-child(8) {
  animation-delay: 2.6s
}

/* 9文字目 */
.catchInner01 p:nth-child(9) {
  animation-delay: 2.8s
}

/* 10文字目 */
.catchInner01 p:nth-child(10) {
  animation-delay: 3s
}

/* 11文字目 */
.catchInner01 p:nth-child(11) {
  animation-delay: 3.2s
}

/* 12文字目 */
.catchInner01 p:nth-child(12) {
  animation-delay: 3.4s
}

/* 13文字目 */
.catchInner01 p:nth-child(13) {
  animation-delay: 3.6s
}

/* 14文字目 */
.catchInner01 p:nth-child(14) {
  animation-delay: 3.8s
}

/* 15文字目 */
.catchInner01 p:nth-child(15) {
  animation-delay: 4s
}

/* 16文字目 */
.catchInner01 p:nth-child(16) {
  animation-delay: 4.2s
}

/* 17文字目 */
.catchInner01 p:nth-child(17) {
  animation-delay: 4.4s
}

/* 18文字目 */
.catchInner01 p:nth-child(18),
.catchInner03 p:nth-child(1) {
  animation-delay: 4.6s
}

/* 19文字目 */
.catchInner02 p:nth-child(1),
.catchInner03 p:nth-child(2) {
  animation-delay: 4.8s
}

/* 20文字目 */
.catchInner02 p:nth-child(2),
.catchInner03 p:nth-child(3) {
  animation-delay: 5s
}

/* 21文字目 */
.catchInner02 p:nth-child(3),
.catchInner03 p:nth-child(4) {
  animation-delay: 5.2s
}

/* 22文字目 */
.catchInner02 p:nth-child(4),
.catchInner03 p:nth-child(5) {
  animation-delay: 5.4s
}

/* 22文字目 */
.catchInner02 p:nth-child(5),
.catchInner03 p:nth-child(6) {
  animation-delay: 5.6s
}

/* 23文字目 */
.catchInner02 p:nth-child(6),
.catchInner03 p:nth-child(7) {
  animation-delay: 5.8s
}

/* 24文字目 */
.catchInner02 p:nth-child(7),
.catchInner03 p:nth-child(8) {
  animation-delay: 6s
}

/* 25文字目 */
.catchInner02 p:nth-child(8),
.catchInner04 p:nth-child(1) {
  animation-delay: 6.2s
}

/* 26文字目 */
.catchInner02 p:nth-child(9),
.catchInner04 p:nth-child(2) {
  animation-delay: 6.4s
}

/* 27文字目 */
.catchInner02 p:nth-child(10),
.catchInner04 p:nth-child(3) {
  animation-delay: 6.8s
}

/* 28文字目 */
.catchInner02 p:nth-child(11),
.catchInner04 p:nth-child(4) {
  animation-delay: 7s
}

/* 29文字目 */
.catchInner02 p:nth-child(12),
.catchInner04 p:nth-child(5) {
  animation-delay: 7.2s
}

/* 30文字目 */
.catchInner02 p:nth-child(13),
.catchInner04 p:nth-child(6) {
  animation-delay: 7.4s
}

@keyframes textanimation {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/* ----------------------------
         section info
----------------------------- */
.info {
  padding: 0 2.5em;
}

.info h2 {
  text-align: right;
}

.infoInner01 {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  width: 100%;
}

.infoInner01 .p {
  width: 40%;
  margin-top: 3.5em;
}

.infoInner01 .news {
  width: 40%;
}

.infoInner01 .news p {
  border-bottom: 1px solid #EAEBD9;
  font-size: clamp(13px, 1vw, 16px);
  line-height: 1.5;
  letter-spacing: .1em;
  margin-top: 1em;
  padding-left: .5em;
}

.infoInner01 .news_text {
  margin-left: 1em;
}

.infoInner02 {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  width: 100%;
}

.infoInner02 .img {
  display: block;
  width: 40%;
  aspect-ratio: 1.5/1;
  object-fit: cover;
  box-shadow: 2px 2px 15px #313647;
}

.infoText {
  font-size: clamp(13px, .9vw, 16px);
  width: 45%;
  margin-top: 4.5em;
}

/* ----------------------------
         section service
----------------------------- */
.service {
  flex: 0 0 200%;
  background-color: #313647;
  font-size: clamp(13px, 1vw, 16px);
  line-height: 1.5;
  min-width: 200%;
  padding: 0 20px;
}

.service h3 {
  display: inline-block;
  font-size: clamp(40px, 3.8vw, 60px);
}

.indexBrand {
  width: 100%;
  height: 100vh;
  padding: 3em;
}

.indexBrand h2 {
  height: 170px;
  margin-top: .5em
}

.brandText01 {
  line-height: 1.7;
  width: 70%;
  margin-top: 4em;
  margin-left: 1em;
}

.brandText02 {
  width: 80%;
  margin-top: 3em;
  margin-left: 4em;
}

.indexBrandImg,
.indexBrandImg img,
.oem {
  width: 100%;
  height: 100vh;
}

.indexBrandImg {
  margin-left: 20px;
  overflow: hidden;
}

.indexBrandImg img {
  object-fit: cover;
  transform: scale(1.8);
  transition: all .3s;
}

.oem {
  padding: 3em;
}

.oemText01,
.oemText02 {
  font-size: clamp(14px, 1vw, 16px);
}

.oemText01 {
  line-height: 1.7;
  width: 85%;
  margin-top: 3em;
}

.oemText02 {
  width: 90%;
  margin: 3em auto 0;
}

.oem h3 {
  margin-top: 1em;
}

/* ----------------------------
         section slider JS
----------------------------- */
.sliderWrap,
.slide img {
  width: 100%;
  height: 100vh;
}

.sliderWrap {
  overflow: hidden;
}

.slider {
  display: flex;
  width: calc(100vw * 4);
  transition: all .8s linear;
  overflow: hidden;
}

.slide {
  flex: 0 0 100vw;
  height: 100vh;
}

.slide img {
  object-fit: cover;
  object-position: center;
}

/* ----------------------------
         section company
----------------------------- */
.companyInnerLeft {
  width: 100%;
  height: 100vh;
  position: relative;
}

.companyInnerLeft h2,
.indexCompanyImg01,
.indexCompanyImg02 {
  position: absolute;
}

.companyInnerLeft h2 {
  top: 0;
  left: 10%;
}

.indexCompanyImg01,
.indexCompanyImg02 {
  display: block;
  box-shadow: 2px 2px 15px #2A2B1B;
  object-fit: cover;
}

.indexCompanyImg01 {
  width: 70%;
  height: 50%;
  top: 35%;
  left: 15%;
}

.indexCompanyImg02 {
  width: 60%;
  height: 40%;
  bottom: 5%;
  left: 50%;
}

.companyInnerRight {
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.7;
  width: 100%;
  height: 100vh;
  padding: 3em;
}

.companyInnerRight01,
.companyInnerRight02 {
  width: 85%;
}

.companyInnerRight01 {
  margin-top: 3em;
}

.companyInnerRight02 {
  margin-top: 2.5em;
  margin-left: 3em;
}

.indexcompanyAddress {
  margin-top: 3em;
  margin-left: 7em;
}

/* ----------------------------
         section contact
----------------------------- */
.indexContact {
  background-image: url(../img/indexcontact.png);
  background-repeat: no-repeat;
  background-size: cover;
}

.indexContact,
.indexContactForm,
.indexContactText {
  width: 100%;
  height: 100vh;
}

.indexContact .flexbox {
  gap: 1em;
}

.indexContactForm {
  padding: 3em 0 3em 2em;
}

.indexContactForm h2 {
  margin-left: 1em;
}

.indexContactForm form {
  width: 500px;
  margin-top: 2em;
  margin-left: 1em;
}

.indexContactForm form .flexbox {
  margin-top: 1em;
}

.indexContactForm label {
  width: 100px;
}

.indexContactForm input,
.indexContactForm textarea,
.indexContactForm select {
  width: 350px;
}

.indexContactForm input,
.indexContactForm select {
  height: 40px;
  padding: 5px;
}

.indexContactForm textarea {
  height: 200px;
  margin-bottom: 20px;
  padding: 10px;
}

#submit {
  display: block;
  border: 1px solid #EAEBD9;
  background-color: #EAEBD9;
  color: #2A2B1B;
  text-align: center;
  width: 100px;
  margin: 0 auto;
  transition: all .3s;
  cursor: pointer;
}

#submit:hover {
  border: 1px solid #2A2B1B;
  background-color: #2A2B1B;
  color: #EAEBD9;
}

.indexContactText {
  padding-right: 1em;
}

.indexContactText p {
  width: 85%;
}

.indexContactText p:nth-of-type(1) {
  line-height: 1.7;
  margin-top: 6em;
}

.indexContactText p:nth-of-type(2) {
  margin-top: 3.5em;
  margin-left: 1em;
}

/* ----------------------------
           レスポンシブ
----------------------------- */
@media(max-width:800px) {

  html,
  body {
    overflow-y: auto;
  }

  h2,
  h2 span {
    font-size: clamp(30px, 10vw, 50px);
  }

  .flexbox {
    display: block;
  }

  /* 横スクロール解除*/
  .wrapper {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-snap-type: none;
  }

  header,
  section {
    width: 100%;
  }

  header {
    height: 100vh;
  }

  section {
    height: auto;
  }

  /* ----------------------------
            ボタンデザイン
    ----------------------------- */
  .brandbtn,
  .companybtn,
  .oem .oembtn,
  .contactbtn {
    display: block;
    font-size: clamp(16px, 4vw, 22px);
    margin-right: 1em;
  }

  .brandbtn,
  .oem .oembtn {
    margin-top: 2em;
  }

  .contactbtn,
  .companybtn {
    margin-top: 3em;
  }

  .text-wrap {
    justify-content: flex-end;
    align-items: center;
    gap: 1px;
  }

  .text-wrap:hover .letter {
    text-shadow: none;
  }

  .letter {
    text-shadow: none;
    transition: none;
    transition-delay: none;
  }

  /* ----------------------------
            フェード設定
  ----------------------------- */
  .fadeInAnime01,
  .fadeInAnime02,
  .fadeInAnime03,
  .fadeInAnime04,
  .fadeInAnime05 {
    opacity: 0;
    transition: all 2.5s ease;
  }

  .fadeInAnime01.fade,
  .fadeInAnime02.fade,
  .fadeInAnime03.fade,
  .fadeInAnime04.fade,
  .fadeInAnime05.fade {
    opacity: 1;
    animation: fadeanime 3s forwards;
  }

  /* ----------------------------
             section catch
    ----------------------------- */
  .catch {
    padding: 60px 0;
  }

  .space {
    padding-left: 10px;
  }

  .catchEN {
    font-size: clamp(20px, 7.5vw, 40px);
  }

  .catchJA {
    font-size: clamp(17px, 6.8vw, 38px);
  }

  .catchInner03 {
    margin-top: 30px;
  }

  .catchInner01 p,
  .catchInner02 p {
    animation: textanimation .4s forwards;
  }

  .catchInner03 p,
  .catchInner04 p {
    animation: textanimation 2s forwards;
  }

  /* ----------------------------
             section info
    ----------------------------- */
  .info {
    padding: 5em 1em;
    width: 100%;
  }

  .infoInner01 {
    display: block;
    width: 100%;
  }

  .infoInner01 .p {
    width: 100%;
    margin: 1em auto 0;
  }

  .infoInner01 .news {
    font-size: clamp(13px, 2vw, 15px);
    line-height: 1.5;
    width: 100%;
    margin: 30px auto 0;
    padding: 2em 1em;
  }

  .infoInner01 .news span {
    margin-left: 0;
  }

  .infoInner01 .news p {
    margin-top: .8em;
    padding-left: 0;
  }

  .infoInner02 {
    display: block;
    height: auto;
  }

  .infoInner02 .img {
    width: 90%;
    margin: 3em auto 0;
  }

  .infoText {
    font-size: clamp(13px, 3vw, 16px);
    width: 90%;
    margin: 40px auto 0;
  }

  .infoInner01 span,
  .infoInner02 span {
    font-weight: normal;
  }

  /* ----------------------------
             section service
    ----------------------------- */
  .service {
    font-size: clamp(13px, 3.2vw, 16px);
    min-width: 100%;
    width: 100%;
    padding: 3em 0;
  }

  .service span {
    font-weight: normal;
  }

  .service h3 {
    font-size: clamp(20px, 6.25vw, 35px);
    margin-top: 4em;
  }

  .indexBrand {
    height: auto;
    padding: 0 1em;
    position: relative;
  }

  .indexBrand h2 {
    height: auto;
    position: absolute;
    top: 0;
    left: 3%;
  }

  .brandText01 {
    width: 100%;
    margin: 3em auto 0;
  }

  .brandText02 {
    width: 100%;
    margin: 3em auto 0;
  }

  .indexBrandImg {
    height: 80vh;
    margin-top: 1em;
    margin-left: 0;
  }

  .indexBrandImg img {
    height: 80vh;
  }

  .oem {
    height: auto;
    padding: 3em 1em;
  }

  .oemText01,
  .oemText02 {
    font-size: clamp(14px, 3vw, 16px);
  }

  .oemText01 {
    width: 100%;
  }

  .oemText02 {
    width: 100%;
    margin: 3em auto 0;
  }

  .oem h3 {
    margin-top: .5em;
  }

  /* ----------------------------
             section slider JS
    ----------------------------- */
  .slider {
    width: 100%;
  }

  .sliderWrap,
  .slider,
  .slide,
  .slide img {
    height: 60vh;
  }

  /* ----------------------------
             section company
    ----------------------------- */
  .indexCompany {
    padding: 5em 1em 3em;
  }

  .companyInnerLeft {
    height: auto;
  }

  .companyInnerLeft h2,
  .indexCompanyImg01,
  .indexCompanyImg02 {
    position: static;
  }

  .indexCompanyImg01,
  .indexCompanyImg02,
  .companyInnerRight {
    height: auto;
  }

  .indexCompanyImg01 {
    width: 80%;
    margin: 3em 0 0 auto;
  }

  .indexCompanyImg02 {
    width: 70%;
    margin-top: 2em;
  }

  .companyInnerRight {
    font-size: clamp(14px, 3vw, 16px);
    padding: 3em 1em;
  }

  .companyInnerRight span {
    font-weight: normal;
  }

  .companyInnerRight01,
  .companyInnerRight02 {
    display: block;
    width: 100%;
    margin: 2em auto 0;
  }

  .indexcompanyAddress {
    margin: 3em auto 0;
  }

  /* ----------------------------
             section contact
    ----------------------------- */
  .indexContact {
    height: auto;
    padding: 3em 1em;
  }

  .indexContact .flexbox {
    gap: 1em;
  }

  .indexContactForm {
    height: auto;
    padding: 1em;
  }

  .indexContactForm h2 {
    margin-left: 0;
  }

  .indexContactForm form {
    font-size: clamp(14px, 3vw, 16px);
    width: 300px;
    margin: 1em auto 0;
  }

  .indexContactForm input,
  .indexContactForm textarea,
  .indexContactForm select {
    width: 300px;
  }

  #submit {
    transition: none;
  }

  #submit:hover {
    border: 1px solid #EAEBD9;
    background-color: #EAEBD9;
    color: #2A2B1B;
  }

  .indexContactText {
    height: auto;
    padding-right: 0;
  }

  .indexContactText p {
    font-size: clamp(14px, 3vw, 16px);
    width: 100%;
  }

  .indexContactText p:nth-of-type(1) {
    margin-top: 2em;
  }

  .indexContactText p:nth-of-type(2) {
    margin-top: 2em;
    margin-left: 0;
  }

}