.youtube {
  width: 100%;
  aspect-ratio: 16 / 9;
}
.youtube iframe {
  width: 100%;
  height: 100%;
}


.zoom-image-top {
    transition: transform 0.3s ease; /* スムーズな拡大アニメーション */
}

.zoom-image-top:hover {
    transform: scale(1.35); /* 拡大率 */
    cursor: pointer; /* カーソルをポインターに変更 */
}

.zoom-image {
    transition: transform 0.3s ease; /* スムーズな拡大アニメーション */
}

.zoom-image:hover {
    transform: scale(1.6); /* 拡大率 */
    cursor: pointer; /* カーソルをポインターに変更 */
}

.btn-secondary:hover{
  background: #464663;
  border-color: #464663;
}



/* .btn-material {
  background:white;
  border: 2px white;
  color:black;   
}
.btn-material:hover{
  background:#FFD84F;
  color: white;
} */


/* Secondary */
/* .btn-experience{
  background:#FF4F4F;
  border: 2px #FF4F4F;
  color:#FFFFFF;
}
.btn-experience:hover{
  background:#FF7271;
  color: white;
} */

/* .top-image-whole{
  padding: 6px;
} */

.zoom-clickable {
  cursor: zoom-in;
}

@media (max-width: 767px) {/* スマホ幅だけに適用 */
  h1.title {                   
    font-size: 40px !important; 
    line-height: 1.2;      /* 文字詰まり防止（任意） */
  }

  .top-image {
    width: 100% !important;  
    margin-top: -30px;
  }

  .top-image-whole {
    width: 80% !important;
    margin: 0 auto;
    margin-top: -30px; 
  }

  .top-headline{
    margin-top: 10px;
  }

  .zoom-image-top:hover {
    transform: scale(1.0); 
  }

  .mobile{
    margin-top: -30px;
  }

  .mobile-top {
    margin-bottom: -30px;
  }
  .zoom-image-grapgh{
    transition: transform 0.3s ease;
  }

  .zoom-image-grapgh:hover{
    transform: scale(1.2); /* 拡大率 */
    cursor: pointer; /* カーソルをポインターに変更 */
  }

  .youtube {
    width: 80%; 
    margin: 0 auto; /* 中央寄せにする場合に追加 */
  }
}

@media (min-width: 992px) {       /* デスクトップ幅だけ */
  #compareModal .modal-dialog {     
    max-width: 90vw;                 
  }
  #compareModal img {
    width: 100%;
    height: auto;
  }
}