@charset "UTF-8";
/* CSS Document */
html {
    font-size: 62.5%; /* 基本のフォントサイズ指定。16px*62.5%=10px */
    width: 100%; /* boxサイズ指定 */
    box-sizing: border-box; /* border込みでのサイズ指定 */
}

body {
    color: #201F2B; /* フォントカラー指定 */
    background-color: #eceef0;
    font-family: "Kosugi Maru", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.8em;
    line-height: 2.4rem;
    text-align: center;
    padding-bottom: 40px;
}

.container {
    max-width: 1200px; /* PCでの最大幅 */
    margin: auto; /* コンテンツ全体を中央揃え */
    padding: 0 40px; /* コンテナの内側に余白を設定 */
}

a {
    text-decoration: none;
}

a:hover {
    opacity: 0.5; /* マウスオンでリンクテキストを半透明にする */
}

/* ----- 本文 ----- */

.top {
    margin: 120px 0 0 0;
    padding-bottom: 80px;
}

.top img {
    width: 400px;
}

.logo {
    padding-bottom: 40px;
}

.line {
    width: 100%;
    margin: auto;
    border-bottom: solid #201F2B 1px;
}

.game {
    display: flex;
    align-items: center; /* 上下中央揃え */
    justify-content: center; /* 左右中央揃え */
    margin: 80px auto;
    max-width: 1200px;
}

.game_left {
    width: 400px;
}

.game_left img {
    width: 400px;
}

.game_right {
    text-align: left;
    margin-left: 40px;
    width: 540px;
}
.game_right img {
    width: 15px;
    margin-left: 5px;
}

.title {
    margin-bottom: 10px;
}

.game_right p:last-child {
    margin-top: 10px;
}

.link {
    margin: 40px 0;
}

.link img {
    width: 40px;
}

@media screen and (max-width: 1100px) {
    .game {
        display: block;
        margin: 80px auto;
        /* 親要素の幅に合わせて最大幅を設定 */
        max-width: 900px; /* 例: 画面幅-余白を考慮した値 */
    }

    .game_left {
        display: block;
        margin: auto;
        /* 画像の幅を親要素に合わせる */
        width: 100%;
        max-width: 400px;
    }

    .game_left img {
        width: 100%; /* 親要素に合わせて画像を伸縮させる */
    }

    .game_right {
        text-align: center;
        margin-top: 40px;
        margin-left: 0;
        /* テキストの幅を調整 */
        width: 100%;
        max-width: 500px; /* テキストの幅を調整 */
        margin: auto;
    }

    .game_right p:first-child {
        margin-top: 20px;
    }
}

@media screen and (max-width: 600px) { /*600px以下の場合*/
    .top img {
        width: 300px;
    }

    .game_right {
        max-width: 300px;
        display: block;
        margin: auto;
    }
}

@media screen and (max-width: 400px) { /*400px以下の場合*/
    .top img {
        width: 100%;
    }
}