/***** お問合せ専用↓ *****/
main {
    display: grid;
    grid-template:
        "title-left inquiry title-right" 900px
        / 1fr 860px 1fr ;
}
/***** タイトル部分 ↓ *****/

main .inquiry_main {
    grid-area: inquiry;
    background-color: #EBF0F0;
    padding-bottom: 30px;
}

.inquiry_main .bigtitle {
    position: relative;
}
.inquiry_main .bigtitle .englishtitle {
    font-size: 46px;
    color: black;
    padding-top: 10px;
    padding-left: 20px;
    padding-bottom: 10px;
}

.inquiry_main .bigtitle .titlespace h1 {
    font-size: 26px;
    color: black;
    display: block;
    width: 400px;
    text-align: center;
    padding-top: 5px;
    padding-bottom: 5px;
    background-color: #FCEE21;
    margin-bottom: 50px;
    margin-left: 20px;
}

.inquiry_main .bigtitle .pagenav {
    position: absolute;
    top: 10px;
    right: 30px;
}


.inquiry_main  #main_contents {
    display: grid;
    grid-template:        
    ".....  inquiry  ..... " auto
        / 1fr 660px 1fr ;
}
#formWrap {
   grid-area: inquiry ;
}
#formWrap h3{
	font-size: 18px;
	padding-bottom: 20px;
}
#formWrap p {
	line-height: 180%;
	padding-bottom: 20px;
}
#formWrap .Preferred .choice {
	font-size: 14px;
}
table.formTable {
	width:100%;
	margin:20 auto;
	border-collapse:collapse;
}
table.formTable td, table.formTable th {
	border:1px solid #ccc;
	padding:10px;
}
table.formTable th {
	width:200px;
	font-weight:normal;
	background:#efefef;
	text-align:left;
    font-size: 16px;
	vertical-align: top;
}
table.formTable td {
    font-size: 14px;
}
table.formTable th.title {
	font-size: large;
	background-color: cadetblue;
	color: #ffffff;
}
.require{
	color:#F00;	
}

/* タイトル横の色*/
main .top_slide_left {
    grid-area: title-left;
}
main .top_slide_left .blackbox {
    width: 100%;
    height: 360px;
    background-color: black;
    margin-top: 100px;
}
main .top_slide_right {
    grid-area: title-right;
}
main .top_slide_right .redbox {
    width: 100%;
    height: 360px;
    background-color: red;
}


/*　簡易版レスポンシブ用CSS（必要最低限のみとしています。ブレークポイントも含め自由に設定下さい）　*/
@media (max-width: 768px) {
    /***** お問合せ専用↓ (SP対応) *****/
    main {
        /* SPでは1列のグリッドに変更 */
        grid-template:
            "inquiry" auto
            / 100%; /* 全幅を使用 */
    }

    /* PC用の左右の装飾ボックスは非表示にするか、幅を0にする */
    main .top_slide_left,
    main .top_slide_right {
        display: none;
        grid-area: unset; /* グリッドエリアの指定を解除 */
    }

    /***** タイトル部分 ↓ (SP対応) *****/
    main .inquiry_main {
        grid-area: inquiry;
        padding-bottom: 20px; /* パディングを調整 */
    }

    .inquiry_main .bigtitle .englishtitle {
        font-size: 30px; /* フォントサイズを小さく */
        padding-top: 10px;
        padding-left: 10px; /* パディングを調整 */
        padding-bottom: 5px;
    }

    .inquiry_main .bigtitle .titlespace h1 {
        font-size: 20px; /* フォントサイズを小さく */
        width: auto; /* 幅を自動調整 */
        max-width: 90%; /* 最大幅を設定 */
        margin-bottom: 20px; /* マージンを調整 */
        margin-left: 10px; /* マージンを調整 */
        padding-top: 3px;
        padding-bottom: 3px;
    }

    .inquiry_main .bigtitle .pagenav {
        /* SPでは不要な場合は非表示にすることも考慮するが、今回はPCのCSSにないのでそのままにするか調整 */
        top: 5px;
        right: 10px;
    }

    .inquiry_main  #main_contents {
        /* SPでは1列構成、左右の余白は不要 */
        grid-template:
            "inquiry" auto
            / 100%;
        padding: 0 10px; /* 左右に少しパディングを持たせる */
    }
    #formWrap {
       grid-area: inquiry;
       padding: 0 10px; /* フォームコンテンツにもパディング */
    }

    /* フォームテーブルの調整 */
    table.formTable {
        margin: 10px auto;
        width: 100%; /* 全幅を使用 */
        display: block; /* テーブルをブロック要素として扱い、trを積み重ねやすくする */
        border: none; /* 外側のボーダーを解除 */
    }

    table.formTable tr {
        display: block; /* trをブロック要素として縦に積む */
        margin-bottom: 10px; /* 各行の間にスペースを設ける */
        border: 1px solid #ccc; /* 各行にボーダーを設定 */
    }

    table.formTable th {
        width: auto; /* 幅を自動調整 */
        display: block; /* thをブロック要素としてtdの上に表示 */
        text-align: left;
        background: #f0f0f0; /* 背景色を変更 */
        font-size: 14px;
        padding: 8px 10px; /* パディングを調整 */
    }
    table.formTable td {
        display: block; /* tdをブロック要素としてthの下に表示 */
        padding: 8px 10px; /* パディングを調整 */
        font-size: 14px;
        border-top: none; /* thとの間のボーダーを解除 */
    }

    /* フォーム要素の幅調整 */
    table.formTable input[type="text"],
    table.formTable textarea {
        width: 100%; /* 入力欄をtdの幅いっぱいに広げる */
        box-sizing: border-box; /* paddingとborderを幅に含める */
        size: auto; /* size属性はHTML側にあるがCSSで上書き */
    }
    table.formTable select {
        width: 100%; /* セレクトボックスをtdの幅いっぱいに広げる */
        margin-bottom: 5px; /* 複数ある場合のスペース */
    }

    /* 希望日セクションの調整 */
    .Preferred {
        /* 日付・時間のセレクトボックスが横並びになるように調整 */
        display: flex;
        flex-wrap: wrap; /* 必要に応じて折り返す */
        gap: 5px; /* 要素間のスペース */
        align-items: center;
    }
    .Preferred .choice {
        width: 100%; /* ラベルは1行全体を使用 */
        margin-bottom: 5px;
    }
    .Preferred select {
        flex-grow: 1; /* 均等にスペースを分配 */
        min-width: 30%; /* 最小幅を設定して小さくなりすぎないようにする */
        margin-bottom: 0;
    }
    .Preferred hr {
        width: 100%; /* 区切り線は幅いっぱいに */
        margin: 10px 0;
    }

    /* チェックボックスの調整 */
    table.formTable input[type="checkbox"] {
        margin-right: 5px;
    }
    table.formTable td {
        /* チェックボックスとテキストを縦に積む場合の調整 */
        line-height: 1.5;
    }
}