html {
    font-family: serif;
}


/* 全体の背景色と文字色を設定 */
.main-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* justify-content: center; */
    justify-content: flex-start;
    min-height: 100vh; /* ビューポートの高さに合わせてbodyの最小高さを設定 */
    margin: 0; /* bodyのマージンをリセット */
}

.text-style {
    /* font-family: 'Noto Sans JP', sans-serif; */
    font-family: 'Noto Serif JP', serif;
    color: white;
    margin: 10px 0; /* 上下に10pxのマージン */
    text-align: center; /* テキストを中央揃え */
}

.text-title {
    font-size: 38px; /* 見出しのフォントサイズを大きく */
    font-weight: 400; /* 見出しのフォントの太さを下げる */
}

.text-desc {
    font-size: 20px; /* 本文のフォントサイズ */
}

/* スマートフォンや小さい画面サイズ用のスタイル */
@media (max-width: 768px) {
    .text-title {
        font-size: 28px; /* スマートフォンでの見出しのフォントサイズを小さくする */
    }

    .text-desc {
        font-size: 16px; /* スマートフォンでの本文のフォントサイズを小さくする */
    }
}







body {
    /* 背景画像の設定 */
    background-image: url('background-image5.jpg');
    
    /* 背景画像を繰り返し表示 */
    background-repeat: repeat;
    
    /* 背景画像を固定（スクロールしても背景画像は動かない） */
    background-attachment: fixed;
    
    /* 背景画像をページ全体に広げる */
    background-size: cover;
    
    /* 背景画像の位置を中央に */
    background-position: center;

    /* 以下はスマホ用に作ったら勝手に追加されたが意図は不明 */
    margin: 0; /* 余白をゼロに設定 */
    padding: 0; /* パディングをゼロに設定 */
}
/* 以下はスマホ用に作ったら勝手に追加されたが意図は不明 */
body {
    width: 100%;
    max-width: 100vw; /* ビューポートの最大幅に合わせる */
    overflow-x: hidden; /* 横スクロールを防ぐ */
}

/* パーティクル用要素 */
#particles-js {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
}

/* メインコンテンツがパーティクルの上に表示されるように */
.main-content {
    position: relative;
    z-index: 2;
}


/* スマートフォン向けのスタイル */
@media (max-width: 768px) {
    body {
        width: 100%; /* コンテンツの幅を画面幅に合わせる */
        overflow-x: hidden; /* 横スクロールを無効にする */
    }
}

.center-container {
    /* テスター */
    width: 90%;              /* 横幅を制限 */
    max-width: 600px;        /* 最大幅を設定 */
    margin: 40px auto;       /* 上下に余白、左右は自動で中央揃え */
    text-align: center;      /* テキストも中央揃え */
}
.article-block {
    background-color: rgba(0, 0, 0, 0.5); /* 黒色の背景を半透明に設定 */
    width: 100%; /* 親要素の幅に合わせて100%に設定 */
    padding: 20px; /* 内容と背景の間にパディングを設定 */
    box-sizing: border-box; /* ボックスサイズをborder-boxに設定して、paddingとborderがwidthに含まれるようにする */
    color: white; /* テキストの色を白に設定 */
    margin: 30px; /* 各記事ブロックの下に余白を設定 */
}


/* 画像、テキスト、ボタンを中央揃えに */
h1, p {
    text-align: center; /* テキストを中央揃えに */
    width: 100%; /* 必要に応じて幅を調整 */
    margin-top: 20px; /* 要素間の間隔を調整 */
}

#key-visual {
    max-width: 1200px; /* 画像の最大幅を設定 */
    width: 100%; /* 画像の幅をコンテナの幅に合わせる */
    height: auto; /* 高さを自動で調整し、アスペクト比を保持 */
    display: block; /* ブロック要素として扱い、text-align: center; で中央揃え可能に */
    margin: 30px auto; /* 上下のマージンを20px、左右のマージンを自動調整して中央揃え */
}

#sub-img {
    max-width: 550px; /* 画像の最大幅を設定 */
    width: 100%; /* 画像の幅をコンテナの幅に合わせる */
    height: auto; /* 高さを自動で調整し、アスペクト比を保持 */
    display: block; /* ブロック要素として扱い、text-align: center; で中央揃え可能に */
    margin: 10px auto; /* 上下のマージンを20px、左右のマージンを自動調整して中央揃え */
}


header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    /* background-color: rgba(0, 0, 0, 0.5); */
    z-index: 1000;
}

.page-footer {
    background-color: rgba(0, 0, 0, 0.5); 
    color: white; 
    text-align: center;
    padding: 20px;
    margin-top: 80px; 
    width: 100%; 
    box-sizing: border-box; 
}

.page-footer a {
    color: rgba(180, 180, 180, 1);
    text-decoration: none; 
}

/* .page-footer small + small {
    margin-left: 1em;
} */

.page-footer .text-style {
    display: inline;           /* ブロックではなくインライン表示に */
    margin: 0 0.75em;          /* 横に少しスペースをあける */
}

.link-FAQ a {
    color: rgba(180, 180, 180, 1);
    text-decoration: none; 
}


#language-select {
    padding: 10px;
    margin: 20px;
    background-color: black;
    color: white;
    border-radius: 5px;
    cursor: pointer;
}


@media screen and (min-width: 768px){
    .br-sp {display: none; }
}



/* ボタンにマウスを乗せた時のスタイル */
#language-buttons button:hover {
    background-color: #555; /* ホバー時の背景色を変更 */
}


/* βテスター登録ボタン */
.button-container {
    display: flex;
    justify-content: center; /* 中央揃え */
    margin-top: 50px; /* 上からの余白 */
}

/* 画像ボタン用のシンプルなスタイル */
.beta-tester-button {
    display: inline-block;
}

.beta-tester-button img {
    display: block;
    max-width: 100%;
    height: auto;
    /* 必要に応じて追加スタイル（例：hover時のエフェクトなど） */
}

/* βテスター登録ボタン */




.PV {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 60px 0;
    width: 100%; /* 親要素の幅に合わせて拡張 */
    max-width: 100%; /* 追加 */
    box-sizing: border-box; /* 追加 */
}

.PV iframe {
    width: 100%;
    max-width: 100%; /* 追加 */
    height: calc(100vw * (9 / 16)); /* 画面幅に応じたアスペクト比で高さを設定 */
    border: none;
}

@media (min-width: 768px) {
    .PV iframe {
        width: 560px;
        height: 315px;
        max-width: 100%; /* 追加 */
    }
}





/* アプリリンクのスタイリング */
.app-links {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.app-links a {
    margin: 0 10px;
    display: block; 
    width: 250px;
    height: 83px;
    overflow: hidden;
    border-radius: 13px;
}

.app-links img {
    height: 83px;
    width: auto;
}