/* 背景動画コンテナ */
.video-container {
    position: relative;
    width: 96vw; /* 画面幅より2%縮小 */
    height: 100dvh; /* 高さはビューポートに合わせる */
    margin: 0 auto; /* 水平方向でセンタリング */
    overflow: hidden; /* 画面からはみ出す部分を非表示に */
    border-radius: 5px;
}

/* 背景動画のスタイル */
.background-video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 動画を画面にフィットさせる */
    object-position: center; /* 動画の位置を中央に */
}

/* 動画に重なるコンテンツエリア */
.content {
    position: absolute;
    left: 5%;
    bottom: 10%;
    color: white;
    text-align: left;
    z-index: 10; /* コンテンツが動画の上に表示されるように */
}

.content h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.content p {
    font-size: 1.5rem;
}

/* メインコンテンツ */
main {
    font-family: 'Noto Sans JP', sans-serif;
    padding: 20px;
}

.head {
    width: 100%;
    border-bottom: #808080 dotted 1px;
}

main section h2 {
    margin-top: 10%;
}

section h2 {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 0.8rem;
}


/* about部分 */
.about-content {
    padding: 20px 0 20px 0;
}

.large {
    font-size: 1.2rem;
}

.eng {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    font-size: 11px;
    color: #808080;
    padding: 1px 0 0 0;
}

.mini {
    font-size: 0.8rem;
    padding-top: 8px;
}

/* contact部分 */
.contact-content {
    font-size: 0.8rem;
    padding-top: 8px;
    padding: 20px 0 20px 0;
}

.email-link {
    color: #808080;
    text-decoration: none;
    font-size: 16px;
}

.email-link:hover {
    text-decoration: black underline;
    color: black;
    font-weight: bold;
}

/* レスポンシブデザイン：画面幅が768px以下の場合 */
@media (max-width: 768px) {
    .home h1 {
        font-size: 1rem;  /* タブレット用に文字サイズを調整 */
    }

    .content h1 {
        font-size: 3rem;
        margin-bottom: 1rem;
    }
    
    .content p {
        font-size: 1.5rem;
    }
}

/* レスポンシブデザイン：画面幅が480px以下の場合 */
@media (max-width: 480px) {
    .video-container {
        position: relative;
        width: 96vw; /* 画面幅より2%縮小 */
        height: 80vh; /* 高さはビューポートに合わせる */
        margin: 0 auto; /* 水平方向でセンタリング */
        overflow: hidden; /* 画面からはみ出す部分を非表示に */
        border-radius: 5px;
    }
    .home h1 {
        font-size: 1rem;  /* スマホ用に文字サイズを調整 */
    }

    .content h1 {
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }
    
    .content p {
        font-size: 0.8rem;
    }
}