*{
  padding:0;
  margin:0;
}

.fadein.scrollin {
    opacity: 1;
    transform: translate(0, 0);
    transition: all 500ms;
}

.fadein {
    opacity: 0;
    transform: translate(0, 50px);
    transition: all 500ms;
}

.fade-in-element {
  opacity: 0; /* 初期状態では透明 */
  transition: opacity 5s ease; /* 透明度の変更にトランジションを適用 */
}

.fade-in-element.visible {
  opacity: 1; /* 要素が見えるようにする */
}



html{
      font-family: YakuHanJP,Roboto,"Kinto Sans","Helvetica Neue","Segoe UI",Helvetica,"游ゴシック体",YuGothic,"Yu Gothic M","游ゴシック Medium","Yu Gothic Medium","メイリオ",Meiryo,sans-serif;
      font-size: 15px;
}

body{
  background:#000;
}

header {
  position: relative; /* headerのpositionをrelativeに設定 */
  height:100vh;
  overflow: hidden;
}

.td1{
  width: 20%;
}

a{
  text-decoration: none;
  color:#000;
  font-size: 1rem;
}

a:hover{
  opacity:0.6;
}

.logo{
  position: absolute;
  top:30px;
  left:29.5px;
  width:80px;
  z-index: 3;
}
.video-bg {
  position: absolute; /* video-bgをheaderに対して絶対位置に */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* video-bgの高さをheaderに合わせて100%に設定 */
  z-index: -1;
}
.video-bg video {
  width: 100%; /* videoの幅を100%に設定 */
  height: 100%; /* videoの高さを100%に設定 */
  object-fit: cover; /* コンテナを完全に覆うようにビデオを調整 */
  position: absolute;
  top: 0;
  left: 0;
}
.filter {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 0;
  /* マスクの初期化 */
  -webkit-mask-image: none;
  mask-image: none;
}

.circle {
  position: absolute;
  border-radius: 50%;
  background: transparent; /* 背景を透明に */
  width: 100px;
  height: 100px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 2s ease;
  z-index: 1;
}

.content {
  position:relative;
  z-index: 2;
  padding: 15px 8vw;
  background-color: #f6f6f6;
}

.header-text {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  padding-left:5%;
  color: white; /* 文字色を白に設定 */
  text-align: left; /* 文字を左揃えに設定 */
  transform: translateY(-50%); /* Y方向に50%移動して中央に配置 */
  z-index: 3; /* 最前面に表示 */
}

.header-text h2 {
  font-size: 5em; /* フォントサイズを統一 */
  margin: 0; /* 余白をゼロに設定 */
  padding: 0 10px; /* 左右のpaddingを設定 */
}

.scroll-indicator {
  position: absolute;
  bottom: 40px; /* ヘッダーの下部から少し上に配置 */
  left: 50%; /* ヘッダーの中央に配置 */
  transform: translateX(-50%);
  text-align: center;
  z-index: 4;
}

.scroll-text {
  display: block;
  color: white;
  margin-bottom: 10px; /* テキストとマウスアイコンの間にスペースを作る */
}

.mouse-icon {
  display: inline-block;
  width: 30px;
  height: 65px;
  border: 1px solid white;
  border-radius: 24px; /* マウスアイコンの丸みを設定 */
  position: relative;
}

.scroll-wheel {
  position: absolute;
  left: 50%;
  top: 8px;
  width: 4px; /* スクロールホイールのサイズを調整 */
  height: 10px;
  background-color: #fff;
  border-radius: 7.5px;
  transform: translateX(-50%);
  animation: scroll-wheel-animation 4s ease-in-out infinite; /* アニメーションの設定 */
}

@keyframes scroll-wheel-animation {
  0% { top: 8px }
  50% { top: 20px }
  100% { top: 8px }
}

/* ここからオリジナル */


.h2{
  font-family: "adobe-garamond-pro","ヒラギノ明朝 Pro W3","Hiragino Mincho Pro","ＭＳ Ｐ明朝","MS PMincho",serif;
  font-weight: normal;
  font-size: 25px;
}

.h2-p{
  font-size: 1.1rem;
  margin-bottom:20px;
}

.philosophy{
  margin: 70px 0;

}

.business h3{
  font-weight:normal;
  font-family: "adobe-garamond-pro","ヒラギノ明朝 Pro W3","Hiragino Mincho Pro","ＭＳ Ｐ明朝","MS PMincho",serif;
}

.business-img img{
  width:100% ;
}

.business{
  margin-bottom:40px;
  background:#fff;
  overflow: hidden;

}

.business-content{
  padding:20px;
}

.business-content-p{
  margin-top:15px;
  font-size: .9rem;
}

.button{
  display: inline-block;
  border:solid 0.8px #000;
  padding:5px 12px;
  margin-top:25px;
}

.under{
  padding: 70px 8vw 15px 8vw;
  background-color: #e7e7e7;
  border-top:solid 1px #000;
}

.services{
  margin-bottom:100px;
}

.company-info{
  margin-top:50px;
}

table{
  font-size:.8rem;
}

td{
  border-bottom: 0.6px solid #a8a8a8;
  padding-top:10px;
  padding-bottom:10px;
}

.footer{
  font-size:.7rem;
  margin-top:30px;
}


.container {
  display: flex;
  flex-direction: column;
}




@media screen and (max-width: 480px) { /* 小さいスマートフォンに適用 */
  .header-text h2 {
    font-size: 4em; /* さらに小さいフォントサイズに調整 */
  }

  .scroll-text {
    font-size: 1.1em; /* スクロールテキストのフォントサイズ調整 */
  }

  .mouse-icon {
    width: 24px; /* マウスアイコンのサイズを調整 */
    height: 45px;
  }

  .scroll-wheel {
    width: 4px; /* スクロールホイールのサイズを調整 */
    height: 10px;
  }
}


/* タブレット向けスタイル */
@media (min-width: 768px) {
  /* スタイルルール */
  html{
    font-size: 16px;
  }
  .header-text h2 {
    font-size:7em;
  }
  .container {
      /* flex-directionをrowに変更して横並びにする */
      flex-direction: row;
    }

  .business{
    width:50%;
  }

  .media-business{
    margin-left:12px;
  }
  .fregrance-business{
    margin-right:12px;
  }

  .content-01{
    max-width:650px;
    margin: 0 auto;

  }
}

/* デスクトップ向けスタイル */
@media (min-width: 1024px) {
  /* スタイルルール */
  .container {
      flex-direction: row;
    }

    .business{
      width:50%;
    }
}