.navbar {
    backdrop-filter: blur(6px);         /* 背景をぼかして透け感を出す */
    transition: background-color 0.3s;  /* スクロール時の変化が滑らかに */
}
.header-content {
height: calc(500px - 80px); /* ナビゲーション高さを引いた分 */
padding-top: 80px;
}

.navbar-nav .nav-link {
color: white;
font-weight: 500;
margin-left: 50px;
}
body {
    background-color: #EBEBEB;
}
::placeholder {
    color: #aaa !important;
    opacity: 1;
}

.video-thumbnail {
    cursor: pointer;
}

.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background 0.3s ease;
}

.play-button::before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-left: 18px solid #333;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
}

.play-button:hover {
    background: rgba(255, 255, 255, 0.9);
}

.privacy-header {
    height: 8vh;
}
.video-header {
    height: 100vh;
    overflow: hidden;
    position: relative;
}
  
.video-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    /* opacity: 0; */
}

.is-loaded { opacity: 1; transition: opacity 0.5s; }

.sepa-1{background-image: url('../img/sepa_1.jpg');}
.sepa-2{background-image: url('../img/sepa_2.jpg');}
footer {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
}

footer a:hover {
    text-decoration: underline;
    color: #f8f9fa;
}

/* ハンバーガーメニューのバツアイコン */
.navbar-toggler-icon-close {
    font-size: 1.5rem;
    line-height: 1;
}

/* オフキャンバスメニューのスタイル調整 */
.offcanvas {
    width: 80%; /* メニューの幅 */
    visibility: hidden; /* 初期状態では非表示 */
    transform: translateX(100%); /* 右端に配置 */
    transition: transform 0.3s ease-in-out, visibility 0s 0.3s; /* スライドインアニメーション */
    z-index: 1050; /* 他の要素より前面に表示 */
    height: 100vh; /* 画面全体を覆う高さ */
    top: 0;
}

.offcanvas.show {
    transform: translateX(0); /* スライドイン */
    visibility: visible;
    transition-delay: 0s;
}

.offcanvas-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
}

.offcanvas-title {
    margin-bottom: 0;
}

.offcanvas-body {
    padding: 1rem;
}

/* 背景オーバーレイ */
.offcanvas-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* 暗めの背景色と透明度 */
    z-index: 1040; /* オフキャンバスメニューより背面に */
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    cursor: pointer; /* 閉じれることを示すカーソル */
}

.offcanvas-overlay.show {
    opacity: 1;
}

/* ▼ 矢印の色（左右） */
.swiper-button-next,
.swiper-button-prev {
  color: #FFF !important; /* 濃いグレー。#000で完全な黒 */
  opacity: 0.5; /* 初期状態を半透明に */
  transition: opacity 0.3s ease; /* ホバー時のアニメーションを滑らかにする */
}
/* ▼ 矢印にカーソルが当たった時のスタイル */
.swiper-button-next:hover,
.swiper-button-prev:hover {
  opacity: 1 !important; /* ホバーで不透明に */
}

/* ▼ ドット（ページネーション） */
.swiper-pagination-bullet {
  background-color: #CCC !important; /* 通常時の色 */
  opacity: 1; /* デフォルトだと薄くなるので不透明に */
}

/* ▼ アクティブなドットの色 */
.swiper-pagination-bullet-active {
  background-color: #FFF !important;
}
.video-youtube {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
}

.separator{
    position: relative;
    height: 80vh;
}
.inner{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    clip-path: inset(0);
}
.bg{
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-size: cover;
    background-position: center;
    z-index: 0;
}

.jirei-text {
    list-style: none !important;
    padding-left: 0 !important;
    margin-top: 0 !important;
    letter-spacing: 0.15em;
    color: #222; 
}

.jirei-text li {
    margin-bottom: 0.5em; /* 行間を少し空ける */
}

.movies {
    margin-top: 10vh;
}

/** スマホ用設定 */
@media (max-width: 767.98px) {
    .privacy-header{
        height: 5vh;
    }
    .video-header{
        height: 30vh;
    }
    .video-bg {
        object-fit: contain;
        width: 100%; /* min-width ではなく width を指定 */
        height: auto; /* min-height ではなく height を auto に */
        position: absolute; /* 親要素内での位置調整を可能にする */
        top: 0;
        left: 0;
        transform: translateY(0); /* 念のため初期位置をリセット */
        /* opacity: 0; */
    }
    .navbar-expand-lg .navbar-collapse {
        display: none !important; /* デスクトップメニューを非表示 */
    }
    .jirei-text li {
        margin-bottom: 0.01em; /* 行間を少し空ける */
    }
    .jirei-text{
        letter-spacing: 0.05em;
    }

    .jirei-text, .contact, .about, .privacy{
        font-size: 14px;
    }
    .sp-pad{
        padding-left:30px;
        padding-right:30px;
    }
}

/* --- タブレット用設定 --- */
@media (min-width: 768px) and (max-width: 991.98px) {

    .jirei {
        margin-top: 10vh;
    }
 
  .jirei-img {
    width: 160px;
    }
    .jirei-text{
        letter-spacing: 0.05em;
    }
    jirei-text, .contact, .about, .privacy{
        font-size: 14px;
    }
}

/* --- PC用設定値 --- */
@media (min-width: 992px) {

    .jirei {
        margin-top: 20vh;
    }
 
  .jirei-img {
    width: 300px;
    }
    .jirei-3 .text-col{
        padding-left: 6rem;
    }

}