/* custom.css */  
  
img.site-logo {
    height: 30px; /* ロゴの高さを80pxに設定 */
    width: auto;  /* 幅は自動調整します  */
    margin: auto; /* ロゴの周りにマージンを追加 */ 
 }
/* h1.page-header {
    display: none !important;
}

body .post-title {
    display: none !important;
} */

.categories-timestamp {
    display: none !important;
}

body .published {
    display: none !important;
}

body .post-info .label {
    display: none !important;
}

/* body {
    background-color: #f4f4f4;
} */

body .container{
    font-family: 'Lato', sans-serif;/* フォントを変更 */
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Lato', sans-serif;/* フォントを変更 */
    font-weight: bold; /* 太字に設定 */
}
.navbar-brand {
    display: flex; /* フレックスボックスを有効化 */
    align-items: center; /* 垂直方向に中央揃え */
}

/* 全体の幅を画面幅に収める */
/* body .container {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
} */

/* 画像のレスポンシブ対応 */
/* img {
    max-width: 100%;
    height: auto;
} */

.about-container {
    display: flex;
    align-items: flex-start;
    gap: 2rem; /* 相対的な間隔 */
    margin-bottom: 2rem; /* 相対的な余白 */
}

.responsive-image {
    width: 30%;
    max-width: 100%;
    height: auto;
}

@media (max-width: 768px) {
    .about-container {
        flex-direction: column; /* 縦並びに変更 */
        gap: 1rem; /* 間隔を小さくする */
        margin-bottom: 0.5rem; /* 下部の余白を調整 */
    }

    .responsive-image {
        width: 100%;
        max-width: 100%;
        height: auto;
    }
}

.about-table {
    border-collapse: collapse;
    width: 100%;
    font-size: 1.2em;
    margin-top: 80px; /* デフォルトの余白 */
}

.about-table .table-header {
    padding: 12px;
    border-bottom: 1px solid #ddd;
    font-weight: bold;
}

.about-table td {
    padding: 12px;
    border-bottom: 1px solid #ddd;
}

@media (max-width: 768px) {
    .about-table {
        margin-top: 20px; /* スマホでは余白を小さくする */
    }
}


/* 動画をレスポンシブ対応にする */
.video-container {
    text-align: center; /* 動画を中央揃え */
    max-width: 100%; /* 親要素の幅に収める */
    margin: 0 auto; /* 中央揃え */
}

.responsive-video {
    width: 100%; /* 動画の幅を親要素に合わせる */
    max-width: 560px; /* 最大幅を560pxに制限 */
    height: auto; /* アスペクト比を維持 */
    display: block; /* 余白を削除 */
}

/* スマホ表示の調整 */
@media (max-width: 768px) {
    .responsive-video {
        max-width: 100%; /* スマホでは画面幅に収める */
    }
}

/* contact_us.md専用の背景画像設定 */
.contact-us-container {
    background-image: url('../images/TowerBridge_matsu_01.png'); /* 背景画像のパス */
    background-size: auto; /* 背景画像をコンテナ内に収める */
    background-position: center; /* 背景画像を中央に配置 */
    background-repeat: no-repeat; /* 背景画像を繰り返さない */
    background-attachment: fixed; /* 背景画像をスクロールに追従させる */
    width: 100%; /* 親要素の幅に合わせる */
    min-height: 100vh; /* コンテナの高さを画面全体の高さに設定 */
    display: block; /* 余白を削除 */
    margin: 0 auto; /* 中央揃え */
}