/* Set a light pink background for the whole form */
form {
    background-color: #ffe4e1; /* Light pink color */
}

/* Style the table cells */
td {
    padding: 10px;
    color: #333; /* Dark gray text for readability */
    text-align: center; /* Center-align the text inside the table cell */
}

/* Center the table itself */
table {
    margin: 0 auto; /* Center the table horizontally */
    text-align: center; /* Center-align the content inside the table */
}

/* Style the strong tags inside the table */
td strong {
    color: #d87093; /* Pale violet-red color for text */
}

/* Style the submit button */
input[type="submit"] {
    background-color: #d87093; /* Pale violet-red background */
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
}

input[type="submit"]:hover {
    background-color: #c71585; /* Medium violet-red on hover */
}

input[type="text"],
input[type="password"] {
    display: block;
    margin: 0 auto; /* 入力欄を中央に配置 */
    width: 80%; /* 入力欄をセル内で最大限広げる */
    max-width: 300px; /* オプション: 入力欄の最大幅を設定 */
    padding: 8px;
    border: 1px solid #d87093;
    border-radius: 5px;
    background-color: #fff5f7;
    color: #333;
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
}

div {
    width: 100%;
    display: flex;
    margin: 0;
}

div.submit {
    display: flex;
    justify-content: center;
}

.video-container {
    display: flex;            /* flexを使う場合 */
    justify-content: center;  /* 横方向中央寄せ */
    margin: 20px 0;           /* 上下余白 */
}

p {
    color: black; /* 文字色を黒にする */
    font-size: 16px; /* 必要に応じてサイズを調整 */
    font-family: "Quicksand", sans-serif; /* フォントを Quicksand に設定 */
}

/* スマホ用のメディアクエリ */
@media only screen and (max-width: 768px) {
    form {
        font-size: 1.2em; /* フォーム全体の文字サイズを大きくする */
    }

    input[type="text"],
    input[type="password"] {
        width: 80%; /* 入力フィールドやボタンの幅を全幅に設定 */
    }

    input[type="submit"] {
        width: 60%; /* 入力フィールドやボタンの幅を全幅に設定 */
    }

    table {
        width: 90%; /* テーブルの幅を画面幅の90%に設定 */
        margin: 0 auto; /* テーブルを中央に配置 */
    }
}

.highlight-box {
    background-color: #fffdf2; /* 薄い黄色 */
    border: 1px solid #f0e0a0; /* やわらかい枠線 */
    border-radius: 12px;       /* 角丸 */
    padding: 15px;
    line-height: 1.6;
}

.highlight-box1 {
    background-color: #ffffff;
    border: 1px solid #f0e0a0; /* やわらかい枠線 */
    border-radius: 12px;       /* 角丸 */
    padding: 15px;
    line-height: 1.6;
}

.toggle-reviews-btn {
    display: block;
    margin: 16px auto;
    padding: 10px 28px;
    background: #fff;
    border: 2px solid #f5a623;
    border-radius: 30px;
    color: #c47d00;
    font-size: 0.95em;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.toggle-reviews-btn:hover {
    background: #f5a623;
    color: #fff;
}

.reviews-hidden {
    display: none;
}