/* css/style.css の中身 */
html, body {
            font-family: "Yomogi", cursive;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            background: linear-gradient(135deg, #000000 0%, #000000 100%);
            color: white;
            padding-top: 70px;
        }

.container {
    text-align: center;
}

.x-post {
    transform: scale(0.9);
    transform-origin: center top; /* 中央上部を起点に拡大 */
}

/* 画像が親要素の幅を超えないようにする設定 */
img {
    max-width: 100%;  /* 横幅を画面いっぱいに収める */
    height: auto;     /* 縦横比を維持する */
    display: block;
    margin: 0px auto; /* 上下に隙間を作り、左右中央に寄せる */
    /* object-fit: cover;
    /* border-radius: 8px; /* 角を少し丸くするとおしゃれです */
}

.full-screen-image {
    width: 100vw;      /* 画面の横幅いっぱい */
    height: 100vh;     /* 画面の高さいっぱい */
    object-fit: cover; /* 縦横比を維持したまま、隙間なく埋める（重要！） */
    display: block;    /* 下の隙間を消す */
}

.image-container {
    text-align: center; /* テキストも中央寄せ */
    padding:0 px;
}

h1 {
    font-size: 3rem;
    margin-bottom: 0.5rem;
}
p {
    font-size: 1.2rem;
    opacity: 0.9;
}

/* ヘッダー全体の固定設定 */
.site-header {
    position: fixed;      /* 画面に固定 */
    top: 0;
    left: 0;
    width: 100%;          /* 横幅いっぱい */
    height: 70px;         /* ヘッダーの高さ */
    background-color: Black; /* 背景色（白） */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 下に薄い影 */
    z-index: 1000;        /* 一番手前に表示 */
}

/* 中身を中央に寄せて左右に分ける */
.header-inner {
    max-width: 1100px;    /* サイトの最大幅 */
    margin: 0 auto;       /* 中央寄せ */
    height: 100%;
    display: flex;
    justify-content: space-between; /* 左右に振り分け */
    align-items: center;  /* 上下の中央寄せ */
    padding: 0 20px;
}

/* メニューのスタイル */
.header-nav ul {
    display: flex;        /* メニューを横並びにする */
    list-style: none;     /* 点を消す */
    margin: 0;
    padding: 0;
}

.header-nav li {
    margin-left: 30px;    /* メニュー間の隙間 */
}

.header-nav a {
    text-decoration: none;
    color: #333;
    font-family: "Yomogi", cursive; /* ここでもYomogiを使えます */
    font-weight: bold;
}

.header-logo img {
    height: 40px;      /* ヘッダーの高さ(70px)に合わせて調整 */
    width: auto;       /* 横幅は自動で比率を維持 */
    display: block;    /* 余計な隙間を消す */
}

/* ロゴを少し左に寄せたいなどの微調整 */
.header-logo a {
    text-decoration: none;
    display: flex;
    align-items: center;
}