/* ------------------------------
   背景色・フォントの設定
------------------------------ */

html,
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  /* 横スクロール防止 */
}

body {
  font-family: "Inter", sans-serif !important;
  background: linear-gradient(96deg, rgb(255, 248, 240), rgb(251, 235, 211));
  color: #1A1717;
}

#TopView {
  position: relative;
  height: 100vh;
}

#TopView-Text {
  position: absolute;
  bottom: 0%; /* 画像の下からの距離 */
  left: 52%;
  transform: translate(-50%, 10%);
  width: 100%;
  height: auto;
  z-index: 3;
}

#TopView-ja {
  position: absolute;
  top: 21%;
  left: -2%;
  width: 100%;
  height: auto;
  z-index: 3;
}

#TopView-ja h1 {
  font-size: clamp(50px, 8vw, 100px);
  font-weight: bold;
  margin: 0;
  /* background: linear-gradient(90deg, #F4C5A1 0%, #FADDA7 15%, #E4EBCD 30%, #D7EBD9 70%); */
  background-color: rgb(255 232 200);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-align: end;
}

#TopView-Text h1 {
  font-size: clamp(50px, 10vw, 115px);
  font-weight: bold;
  font-style: italic;
  margin: 0;
  background: linear-gradient(90deg, #F4C5A1 0%, #FADDA7 15%, #E4EBCD 30%, #D7EBD9 70%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

#TopView-Text h1 span {
  font-size: clamp(50px, 15vw, 180px);
}

#TopView-Text h2 {
  font-size: clamp(22px, 3vw, 28px);
  color: #333;
}

@keyframes logo-move-left-right {
  0% {
    transform: translateX(-20px);
  }

  100% {
    transform: translateX(20px);
  }
}

.wave-background {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

#logo {
  width: 4%;
  position: absolute;
  top: 2%;
  left: 1.5%;
  z-index: 3;
}

#TopTriangle {
  position: absolute;
  top: -2%;
  left: -2%;
  width: 11%;
}


.canvas-wrapper {
  position: relative;
  min-height: 100px;
  z-index: 0;
}

canvas {
  display: block;
  width: 100%;

  &.flipped {
    transform: rotate(180deg);
  }
}

.back-ground-logo {
  animation: logo-move-left-right 5s infinite ease-in-out;
  animation-direction: alternate;
}

/* 問い合わせフォームのcss */

.wpcf7 form.sent .wpcf7-response-output {
  /* 送信ボタン下完了時 */
  border-color: #8cebe5;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output {
  /* 送信ボタン下未入力警告 */
  border-color: #f88;
}

.wpcf7-not-valid-tip {
  /* 必須未入力項目下の文章 */
  color: #f88;
  font-size: 12px;
}


/* 各種タイトルテキストのデザイン */

#ItemTitle {
  margin-left: 5%;
  text-shadow: 3px 3px 8px;
}



.title-ja,
.title-en {
  position: relative;
  text-stroke: 8px white;
  -webkit-text-stroke: 8px white;
  font-weight: bold;
}

.title-en {
  font-size: 40px;
}

.title-ja {
  font-size: 50px;
}

.title-en::after,
.title-ja::after {
  position: absolute;
  left: 0;
  top: 0;
  content: attr(data-txt);
  background: linear-gradient(100deg, #BE510A, #CD8250);
  background-clip: text;
  -webkit-background-clip: text;
  text-fill-color: transparent;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-stroke: 1px #CD8250;
  -webkit-text-stroke: 1px #CD8250;
}


.right-contents,
.left-contents {
  flex: 1;
}

.Bbtn {
  display: inline-block;
  width: 30%;
  text-align: center;
  padding: 2%;
  font-size: 18px;
  font-weight: bold;
  border-radius: 40px;
  cursor: pointer;
}

.Bbtn.slide {
  background: #363636;
  color: #fff;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.Bbtn.slide::after {
  background: #fff;
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  width: 100%;
  height: 100%;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
  z-index: -1;
}

.Bbtn.slide:hover {
  color: #363636;
}

.Bbtn.slide:hover::after {
  transform: scale(1, 1);
}



.Workstyle-contents {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10%;
  position: relative;
  z-index: 2;
}

a {
  text-decoration: none;
  color: inherit;
}

.br-sp {
  display: none;
}

.RelatedItems {
  margin: 8% auto 0;
  gap: 40px;
  width: 100%;
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.RelatedItems img {
  width: 400px;
  height: auto;
  filter: drop-shadow(5px 5px 5px rgba(160, 160, 160, 0.7));
}


.RelatedItems .PC {
  display: block;
}

.RelatedItems .SP {
  display: none;
}

.svg-wrapper {
  position: absolute;
  z-index: 1;
}

/* アニメーションの設定 */

.anim-box.slideinRight.is-animated {
  animation: slideInRight 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
 
@keyframes slideInRight {
  0% {
    transform: translateX(180px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
  40%,100% {
    opacity: 1;
  }
}

.anim-box.slideinLeft.is-animated {
  animation: slideInLeft 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
 
@keyframes slideInLeft {
  0% {
    transform: translateX(-180px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
  40%,100% {
    opacity: 1;
  }
}

.anim-box.slideinBottom.is-animated {
  animation: slideInBottom 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
 
@keyframes slideInBottom {
  0% {
    transform: translateY(180px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
  }
  40%,100% {
    opacity: 1;
  }
}

.anim-box.slideinTop.is-animated {
  animation: slideInTop 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
 
@keyframes slideInTop {
  0% {
    transform: translateY(-180px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
  }
  40%,100% {
    opacity: 1;
  }
}

@media screen and (max-width: 768px) {

  #TopView {
    margin-top: 7vh;
    height: 100%;
  }

  .br-sp {
    display: block;
  }

  #logo {
    width: 9%;
    top: 2%;
    left: 3%
  }

  #TopTriangle {
    position: absolute;
    top: 0%;
    left: -2%;
    width: 22%;
  }

  .line-svg {
    width: 400px;
  }

  .RelatedItems .PC {
    display: none;
  }

  .RelatedItems .SP {
    display: block;
  }

  #ItemTitle {
    text-shadow: none;
  }

  #TopView-Text h2 {
    width: 95%;
}

  .title-en {
    font-size: 30px;
  }

  .title-ja {
    font-size: 44px;
  }

  .RelatedItems {
    margin: 0 auto 5%;
    gap: 20px;
    flex-direction: column;
    justify-content: center;
    padding: 5%;
  }

  .RelatedItems img {
    width: 90%;
  }

  /* .wave {
    top: 30%!important;
  } */
  
}