@charset "UTF-8";


/* 問い合わせページ */

#contact{
    padding-block: 80px;
    background-image: url(../img/coolbackgrounds-fractalize-clear_lagoon.png);
    background-size: cover;          /* 画面いっぱいに広げる */
    background-position: center;     /* 中央寄せ */
    background-attachment: fixed;    /* スクロールしても背景を動かさない（お洒落！） */
    background-repeat: no-repeat;
    position: relative;
}
/* 背景が明るすぎて文字が見にくい時用のオーバーレイ（薄い青の膜） */
#contact::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 50, 150, 0.2); /* 薄い青を被せる */
    z-index: 1;
}

#contact .flex{

    color: #004a9e; /* 濃いめの青 */
    font-size: 1.5rem;
    border-bottom: 2px solid #78c0fb; /* 下線を追加 */
    padding-bottom: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 30px;

}
#contact img{
    margin-inline: 8px;
    width: 35px;
}

.contact-form {
    position: relative;
    z-index: 2; /* 背景の青い膜より上に来るように */
    width: 85%;
    max-width: 800px; /* 広がりすぎ防止 */
    margin: 40px auto;
    padding: 40px;    /* 余白を少し広く */
    background: rgba(255, 255, 255, 0.95); /* 真っ白ではなく、ほんの少しだけ透かす */
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15); /* 影を少し強調して浮かせる */

}

.contact-form label {
    display: block;
    margin-bottom: 8px;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
    width: 100%;
    padding: 10px 12px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-sizing: border-box;
}

/* テキストエリア */
.contact-form textarea {
    resize: vertical;
}

/* ボタン */
.contact-form button {
    display: block;
    margin: 0 auto;
    background-color: #FFF290;
    border: none;
    border-radius: 12px;
    padding: 12px 20px;
    font-size: 16px;
    cursor: pointer;
    transition: 0.3s;
}
.contact-form button:hover {
    background-color: #f49f3e;
    color: #fff;
}

/* セレクトボックス用カスタム矢印 */
.contact-form .custom-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #fff;
    background-image: url('data:image/svg+xml;utf8,<svg fill="%23666" height="12" viewBox="0 0 24 24" width="12" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 40px;
}