/*ロゴとモーダルの追加*/
section.logo div.logo {
    display: flex; /* フレックスボックスを使って横並びに配置 */
    align-items: center; /* コンテンツを縦方向に中央揃え */
}

section.logo div.logo p {
    flex: 1; /* 段落の幅を可能な限り広げる */
    margin: 0; /* 不要な余白を取り除く */
}

section.logo div.logo img {
    margin-left: 10px; /* 段落との間にスペースを追加 */
    max-width: 200px; /* 画像の幅を調整 */
    height: auto; /* 画像の縦横比を維持 */
}
        
/* 幅が500px未満の場合のスタイル */
@media (max-width: 500px) {
    section.logo div.logo {
        display: block; /* フレックスを解除して縦配置 */
    }
    section.logo div.logo img {
        margin: auto;
        display: block;
        max-width: 200px; /* 画像を親コンテナの幅に合わせる */
    }
}
        
/* 基本スタイル */
.modal-container {
    position: relative;
    text-align: center;
}

.modal-container input {
    display: none;
}
/* モーダルトリガーボタン */
.modal-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #fff;
    color: #e74c3c;
    border: 1px solid #FF7E55;
    cursor: pointer;
    text-align: center;
}

.modal-button:hover {
    background-color: #fcfcfc;
    color: #FF7E55;
}

/* モーダルの非表示状態 */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

/* モーダルを表示 */
.modal-toggle:checked ~ .modal {
    display: flex;
}

/* モーダルのコンテンツ */
.modal-content {
    background: #fff;
    padding: 20px;
    border-radius: 5px;
    width: 90%;
    max-width: 400px;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.modal-content p {
    text-align: left;
}

/* 閉じるボタン */
.close-button {
    display: inline-block;
    margin-top: 15px;
    padding: 10px 20px;
    background-color: #e74c3c;
    color: #fff;
    border: none;
    cursor: pointer;
    text-decoration: none;
}

.close-button:hover {
    background-color: #a71d2a;
}