/* 全体のスタイリング */
body, html {
    margin: 0;
    padding: 0;
}

/* ヘッダのスタイル設定 */
header {
    width: 100%;
    height: 100px; /* 任意の高さに設定 */
    position: relative; /* 子要素の位置を調整するため */
}

.header-image {
    height: auto; /* 画像の高さ */
    width: auto; /* 画像の幅は自動調整 */
    position: absolute; /* ヘッダー内の任意の位置に配置 */
}

#logo {
    width: 10%;
    height: 25%; /* 任意の高さに設定 */
    left: 3%; /* 左からの距離 */
    top: 20%; /* 上からの距離 */
    /* テキストを前面にするためのz-index設定 */
    z-index: 2;
    object-fit: contain; /* アスペクト比を維持しつつ、コンテナ内に収める */
}

#background {
    width: 100%;
    height: 75%; /* 任意の高さに設定 */
    display: block;
}

/* ハンバーガーメニューのスタイル設定 */
.hamburger-menu {
    cursor: pointer; /* ホバー時にカーソルをポインターに変更 */
    display: inline-block; /* 必要に応じて調整 */
    padding: 1rem; /* タップしやすいサイズに */
    position: absolute; /* 絶対位置指定 */
    top: 0px; /* 上からの位置 */
    right: 15px; /* 右からの位置 */
    z-index: 10; /* サイドバーのスタイルよりも前面に表示 */
}

.bar {
    display: block; /* 各バーをブロック要素として表示 */
    width: 25px; /* バーの幅 */
    height: 3px; /* バーの高さ */
    margin: 5px auto; /* 上下のマージンを設定し、中央寄せ */
    background-color: white; /* バーの色 */
    transition: 0.4s;
}

/* "change" クラスが追加されたときのアニメーション */
/* ハンバーガーメニューのバツ印状態のスタイル */
.hamburger-menu.change .bar:nth-child(1) {
    transform: rotate(-45deg) translate(-5px, 6px);
}

.hamburger-menu.change .bar:nth-child(2) {
    opacity: 0;
}

.hamburger-menu.change .bar:nth-child(3) {
    transform: rotate(45deg) translate(-5px, -6px);
}


/* サイドバーのスタイル */
.sidebar {
    height: 100%; /* 画面の高さに合わせる */
    width: 0; /* 初期状態では幅を0に設定し、表示されないようにする */
    position: fixed; /* 常に画面の右側に表示されるようにする */
    top: 0; /* トップからの位置 */
    right: 0; /* 右側に固定 */
    background-color: rgba(1,1,1,0.7); /* 背景色：黒の半透明 */
    overflow-x: hidden; /* 内容がオーバーフローしたときに隠す */
    padding-top: 60px; /* 内容の上部にスペースを作る */
    transition: 0.5s; /* トランジションでスムーズに表示 */
    z-index: 9; /* ヘッダよりも前面に表示 */
}

    .sidebar a {
        padding: 8px 8px 8px 32px;
        text-decoration: none;
        font-size: 25px;
        color: white;
        display: block;
        transition: 0.3s;
    }

        .sidebar a:hover {
            color: #f1f1f1;
        }


/* アプリ紹介 */
/* 全体的なテーブルスタイリング */
table {
    width: 100%; /* テーブルの幅を親要素に合わせる */
    max-width: 600px; /* 最大幅を設定 */
    margin: auto; /* 中央寄せ */
    border-collapse: collapse; /* セルの境界線をまとめる */
}

th, td {
    text-align: center; /* テキスト中央寄せ */
    padding: 10px; /* パディング設定 */
}

/* 画像のサイズとレスポンシブ設定 */
img {
    max-width: 100%; /* 画像の最大幅を親要素に合わせる */
    height: auto; /* 画像の高さを自動調整 */
    display: block; /* ブロックレベル要素として表示 */
}

@media (max-width: 768px) {
    /* スマホビューの設定 */
    table {
        width: 100%; /* スマホではテーブル幅を100%に */
    }

    th, td {
        padding: 5px; /* スマホでは少しパディングを小さく */
    }
}


/* SNS ボタンの基本スタイル */
.sns-button {
    width: 120px; /* 幅の設定 */
    height: 40px; /* 高さの設定 */
    line-height: 40px; /* テキストを中央に配置 */
    text-align: center; /* テキストを中央揃え */
    color: white;
    border: none;
    cursor: pointer;
    transition: transform 0.3s, background-color 0.3s;
    text-decoration: none;
    margin: 5px;
    font-weight: bold;
    display: inline-block;
    border-radius: 15px; /* 角の丸みを追加 */
}

/* X ボタンのグラデーションスタイル（グレーから黒） */
.x {
    background: linear-gradient(45deg, #808080 0%, #000000 100%);
}

/* Instagram ボタンのグラデーションスタイル */
.instagram {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}


/* ホバー時のアニメーション効果 */
.sns-button:hover {
    transform: scale(1.1);
    opacity: 0.9;
}


/* フッターのスタイル */
.footer {
    bottom: 0; /* 下端に固定 */
    width: 100%; /* 幅を画面全体に設定 */
    background-color: black; /* 背景色を黒に設定 */
    color: white; /* テキスト色を白に設定 */
    text-align: center; /* テキストを中央揃え */
    padding: 10px 0; /* 上下にパディングを設定 */
    font-size: 13px; /* フォントサイズを設定 */
}