.header {
    text-align: center;
}

.header img {
    width: 80%;
    height: auto;
    margin-top: 20px;
    margin-bottom: 20px;
}

.overview h2 {
    margin-left: 20px;
    margin-top: -15px;
}

.pv .container {
    position: relative;
    width: 80%;
    aspect-ratio: 16 / 9; /* ←ここで比率指定 */
    margin: 0 auto;
}

.pv .container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


.job .container {
    display: flex;
    justify-content: center; /* 真ん中寄せ */
    gap: 20px; /* 要素間の余白 */
    flex-wrap: wrap; /* レスポンシブ対応：画面幅が狭いときは折り返す */
}

.job .white, .black {
    background-color: lightgray;
    width: 40%;
    margin: 60px auto; /* 上下60px・左右中央寄せ */
    padding: 40px 20px; /* 上下40px・左右20pxの内側余白 */
    border-radius: 12px;
}

.job h2 {
    border-bottom: 2px solid black;
}

.job ul {
    margin-left: 20px;
}

.setting .container {
    display: flex;
    justify-content: center; /* 真ん中寄せ */
    gap: 20px; /* 要素間の余白 */
    flex-wrap: wrap; /* レスポンシブ対応：画面幅が狭いときは折り返す */
}

.setting .config {
    background-color: lightgray;
    width: 40%;
    margin-left: 10px;
    padding: 40px 20px; /* 上下40px・左右20pxの内側余白 */
    border-radius: 12px;
}

.setting .config p {
    margin-left: 20px;
}

.setting .text {
    text-align: center;
    margin-top: 30px; /* 必要に応じて余白を追加 */
}

.setting .text p {
    display: inline-block; /* 中央に揃えて幅も自動にする */
    text-align: center;
    font-size: 20px;
    font-weight: bold;
}

.setting h2 {
    border-bottom: 2px solid black;
}


.map .container {
    text-align: center;
}

.download .container {
    text-align: center;
}