@charset "UTF-8";
#opening {
    position: fixed; /* 画面全体を覆う */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../img/opening_back.png);
    background-repeat: repeat;
    background-size: 100%;
    z-index: 9999; /* 他の要素の上に表示 */
    transition: background-color 0.8s ease-in-out;
    display: none; 
}

#logo_anim {
    width: 180px;
    height: 180px;
    position: absolute;
    top: 50%;
    left: 50%;
    /* transform: translate(-50%, -50%); */
    opacity: 0;
    animation: fadeInCentered 1.5s ease-out forwards;
    animation-delay: 0.5s;
}

#logo_anim path {
    fill: #51362B;
    /* transition: fill 0.6s ease-in-out; */
  }
@keyframes fadeInCentered {
            0% {
                opacity: 0;
                transform: translate(-50%, calc(-50% + 60px));
            }
            100% {
                opacity: 1;
                transform: translate(-50%, -50%);
            }
}
.home .l-container {
    opacity: 0; /* 初期状態で透明にする */
    transition: opacity 1s ease-in-out; /* 1秒かけてフェードイン */
}

.home .l-container.show {
    opacity: 1!important; /* クラスが付与されたら表示 */
}

header.l-header.l-header--1row.l-header--sticky-overlay-colored-sm.l-header--sticky-overlay-colored-lg.top.show{
    animation: hedIn 0.5s ease forwards;
}
@keyframes hedIn {
    from {
      opacity: 0;
      visibility: hidden;
    }
    to {
      opacity: 1;
      visibility: visible;
    }
  }

/* メインビジュアルスライダー*/
.first_view .slide-media{
    position: relative;
    overflow: hidden;
  }
 
.first_view .slide-media img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
 
.first_view .splide-wrapper {
    position: relative;
  }
 
  .first_view {
    overflow: hidden;
    /* margin-top: 10px; */
  }

  .first_view .splide__track {
    overflow: visible;
  }
 
 
  .first_view .splide__slide {
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    overflow: hidden;
    border-radius: clamp(40px, 10.2041vw + 1.7347px, 80px); 
  }
 
  .first_view .slide-media {
     padding-top: 116.22%;
  }
 
 
  .first_view .slide-content {
    padding: 3.2rem;
  }

  h2.fv_copy {
    font-size: 3.5rem;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    color: #ffffff;
    opacity: .9;
    line-height: 1.4;
    text-shadow: 1px 2px 2px rgba(0, 0, 0, 0.4);
    font-weight: 500!important;

}
 .copy {
    position: absolute;
    bottom: 63px;
    left: 20%;
}
 
  @media only screen and (min-width: 1025px) {
 
 
    .first_view .splide__slide {
      -webkit-transition: var(--transition);
      transition: var(--transition);
    }
 
    .first_view .splide__slide img {
      -webkit-transition: var(--transition);
      transition: var(--transition);
    }
 
  }
 
 
  @media only screen and (min-width: 600px) {
    .sp {
      display: none !important;
    }
  }
  /* 製造機器紹介スライドショー */
  .slide_view .slide-media{
    position: relative;
    overflow: hidden;
  }
 
  .slide_view .slide-media img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50px;
  }
  .slide_view .slide-media {
    padding-top: 75%;
 }
  .slide_view .splide-wrapper {
    position: relative;
  }
  .slide_view {
    overflow: hidden;
    margin-top: 10px;
  }

  .slide_view .splide__track {
    overflow: visible;
  }
 
 
  .slide_view .splide__slide {
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    /* overflow: hidden; */
    position: relative
   
  }
  .slide_view{
    max-width: 100vw!important;
    margin: 0 calc(50% - 50vw)!important;
}
.make_p{
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-weight: 500;
    position: absolute;
    z-index: 2;
    right: 13px;
    top: 15%;
    background: #fff;
    width: 38px;
    line-height: 1;
    display: flex;
    align-items: center;
}
.make_p::before,
.make_p::after {
    content: "";
    position: absolute;
    left: 0;
    width: 38px;
    height: 20px;
    background-color: #fff;
    border-radius: 50px 50px 0 0;
    z-index: -1;
}

.make_p::before {
    top: -20px;
}

.make_p::after {
  bottom: -20px;
  border-radius: 0 0 50px 50px; /* 下半円に調整 */
}
 
  @media only screen and (min-width: 1025px) {
 
 
    .slide_view .splide__slide {
      -webkit-transition: var(--transition);
      transition: var(--transition);
    }
 
    .slide_view .splide__slide img {
      -webkit-transition: var(--transition);
      transition: var(--transition);
    }
 
  }

  @media (max-width: 768px) {
    .first_view .slide-media img{
      width: 90%;
      height: 90%;
      border-radius: 40px;
    }
    h2.fv_copy{
      font-size: 2.5rem;
      line-height: 1.2;
    }
    .copy{
      bottom: 85px;
      left: 2%;
    }
    .first_view {
    margin-bottom: -110px;
    margin-top: 0px;
  }

  }