@charset "utf-8";
/* CSS Document */

    #mailformpro .formTable td label {
        display: inline-flex;  /* inline-blockから変更：チェックと文字を整列 */
        align-items: flex-start; /* 文字が複数行になってもチェックを上に固定 */
        text-align: left;
        
        /* 折り返しのための重要設定 */
        white-space: normal;   /* 自動改行を許可 */
        word-break: break-all; /* 長い英単語などがあっても強制改行 */
        max-width: 100%;       /* 親要素を突き抜けないように制限 */
        
        margin: 8px 0;
    }

    /* チェックボタン自体の位置調整（文字と重ならないように） */
    #mailformpro .formTable td label input[type="radio"],
    #mailformpro .formTable td label input[type="checkbox"] {
        flex-shrink: 0;        /* ボタンが潰れないように固定 */
        margin-top: 4px;       /* 1行目の文字の高さに合わせる */
        margin-right: 8px;
    }

    /* フォーム全体の囲みを中央寄せ */
    .mailform {
        width: 100%;
        padding: 0 10px; /* 画面端に少し余白を作る */
        box-sizing: border-box;
    }

    /* テーブル構造を解除して幅を100%にする */
    #mailformpro .formTable,
    #mailformpro .formTable tbody,
    #mailformpro .formTable tr,
    #mailformpro .formTable th,
    #mailformpro .formTable td {
        display: block;
        width: 100% !important;
        box-sizing: border-box;
    }

    /* 見出し（th）を左寄せにし、余計な余白を消す */
    #mailformpro .formTable th {
        text-align: left;
        padding: 10px 0 5px 0;
        height: auto;
    }

    /* 入力エリア（td）の余白調整 */
    #mailformpro .formTable td {
        padding: 5px 0 15px 0;
    }

    /* 入力ボックスを中央配置（幅100%なので実質中央になります） */
    #mailformpro .inputBox01,
    #mailformpro .inputBox02,
    #mailformpro .inputBox03 {
        width: 100% !important;
        height: 50px;
        margin: 0 auto;
        display: block;
    }

    /* ラジオボタンやチェックボックスのラベルも中央寄りにしたい場合 */
    #mailformpro .formTable td label {
        display: inline-block;
        margin-bottom: 10px;
    }

/* -------------------------------------------------------------------------- */
/*フォーム*/
/* -------------------------------------------------------------------------- */
/* --- テーブル共通 --- */
.formTable {
    border-style: solid;
    border-width: 0px;
    border-color: #cccccc;
    box-sizing: border-box;
    margin: 10px auto;
    clear: both;
    text-align: left;
}

@media (min-width: 992px) {
    .formTable { width: 80%; font-size: 110%; }
}
@media (max-width: 991px) {
    .formTable { width: 100%; font-size: 170%; }
}

/* --- 見出し(th) --- */
.formTable th {
    border-style: solid;
    border-width: 0px 0px 1px 0px;
    border-color: #cccccc;
    box-sizing: border-box;
    vertical-align: middle;
    line-height: 1.4;
    background: #D4F4FF;
}

@media (min-width: 992px) {
    .formTable th { width: 30%; padding: 10px; }
}
@media (max-width: 991px) {
    .formTable th {
        width: 100% !important;
        display: block !important;
        padding: 10px 15px !important;
        box-sizing: border-box;
    }
}

/* --- 入力エリア(td) --- */
.formTable td {
    border-style: solid;
    border-width: 0px 0px 1px 0px;
    border-color: #cccccc;
    box-sizing: border-box;
    vertical-align: middle;
    line-height: 1.4;
}

@media (min-width: 992px) {
    .formTable td { padding: 10px; }
}

@media (max-width: 991px) {
    #mailformpro .formTable td {
        width: 100% !important;
        display: block !important;
        text-align: left !important;
        /* 基本は次の項目まで 45px 開ける */
        padding: 10px 15px 45px 15px !important;
        box-sizing: border-box !important;
    }

    /* 連続するエリアの途中のTD (クラス指定) は余白を 20px に上書き */
    #mailformpro .formTable td.td-middle {
        padding-bottom: 20px !important;
    }

    /* 170%の文字サイズで崩れないよう span の float を解除 */
    #mailformpro .formTable td span {
        float: none !important;
        display: block;
        margin-bottom: 5px;
    }
}

/* --- 入力ボックス --- */
@media (min-width: 992px) {
    #mailformpro .inputBox01 { width: 100%; height: 40px; }
    #mailformpro .inputBox02 { width: 50%; height: 40px; }
    #mailformpro .inputBox03 { width: 100%; height: 80px; }
}
@media (max-width: 991px) {
    #mailformpro .inputBox01 { width: 100%; height: 55px; margin: 0 auto; }
    #mailformpro .inputBox02 { width: 100%; height: 55px; margin: 0 auto; }
    #mailformpro .inputBox03 { width: 100%; height: 110px; margin: 0 auto; }
}

/* --- プレースホルダー色 --- */
#mailformpro input::-webkit-input-placeholder { color: #aaaaaa; }
#mailformpro input:-ms-input-placeholder { color: #aaaaaa; }
#mailformpro input::-moz-placeholder { color: #aaaaaa; }
#mailformpro input:-moz-placeholder { color: #aaaaaa; }




/* -------------------------------------------------------------------------- */
/*コンテンツ一覧テキストリンク　フッター部分に表示*/
/* -------------------------------------------------------------------------- */
/*表示・非表示*/
@media (min-width: 992px){
/*タイトル大見出し*/
.bottomContents .title-max-form{margin:0 0 20px 0;padding:10px 5px;text-align:left;color: #ffffff;border-top: 2px solid #cccccc;border-bottom: 1px dotted #cccccc;}
.bottomContents .title-max-form:before{content: "\f00b";font-family: "fontawesome";margin: 0 3px 0 0;padding: 0;font-size: 110%;}
.bottomContents .title-max-form:after{content: "www.prep.kec.ne.jp/summer/";margin: 0;padding: 0;font-size:90%;float: right;}
 

}/* min-width: 992px */


@media (max-width:991px){
/*タイトル大見出し*/
.bottomContents .title-max-form{margin:0 0 10px 0;padding:10px 0 0 0;text-align:center;color: #ffffff;background: #999999!important;height: 100%;border-bottom: #333333 dotted 1px;border-top: #333333 solid 1px;}

} /* max-width:991px */


/*フォントサイズ*/
@media (min-width: 1200px) {.bottomContents .title-max-form{font-size: 0.9em;}}
@media (min-width: 992px) and (max-width: 1199px){.bottomContents .title-max-form{font-size: 0.9em;}}
@media (min-width: 768px) and (max-width: 991px) {.bottomContents .title-max-form{font-size: 1.4em;}}
@media (max-width: 767px) {.bottomContents .title-max-form{font-size: 1.4em;}}


/* -------------------------------------------------------------------------- */
/*main-----------ページ下部用のCVボタン設置の際、margin:bottom変更*/
/* -------------------------------------------------------------------------- */
@media (min-width: 1200px) {                      main.form {margin:73px 0 5% 0;padding: 0;}} 
@media (min-width: 992px) and (max-width: 1199px){main.form {margin:73px 0 5% 0;padding: 0;}}
@media (min-width: 768px) and (max-width: 991px) {main.form {margin:73px 0 5% 0;padding: 20px 0 0 0;}}
@media (max-width: 767px) {                       main.form {margin:45px 0 5% 0;padding: 20px 0 0 0;}}


/* -------------------------------------------------------------------------- */
/*3カラム----------------------------------*/
.thanks-Column3{margin:0;padding:0;}	
	
/*ボックス親*/	
.thanks-Column3 {
	display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
	
	-webkit-justify-content: space-between;
	-moz-justify-content: space-between;
	-ms-justify-content: space-between;
	-o-justify-content: space-between;
	justify-content: space-between;;
	
	-webkit-flex-direction:row;
	-moz-flex-direction:row;
	-ms-flex-direction:row;
	-o-flex-direction:row;
	flex-direction:row;

	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	-o-flex-wrap: wrap;
	flex-wrap: wrap;
	}
	
/*ボックス子*/	
@media (min-width: 1200px) {
	.thanks-Column3 .box{width: calc(33.3333333333% - 20px);margin:0 20px 0 0;padding:0px;}
    .thanks-Column3 .box:last-child{margin:0;}}
@media (min-width: 992px) and (max-width: 1199px){
    .thanks-Column3 .box{width: calc(33.3333333333% - 20px);margin:0 20px 0 0;padding:0px;}
    .thanks-Column3 .box:last-child{margin:0;}}
@media (min-width: 768px) and (max-width: 991px) {
	.thanks-Column3 .box{width: calc(100% - 0px);margin:0 0 10px 0;padding:0px;}
    .thanks-Column3 .box:last-child{margin:0;}}
@media (max-width: 767px) {
	.thanks-Column3 .box{width: calc(100% - 0px);margin:0 0 10px 0;padding:0px;}
    .thanks-Column3 .box:last-child{margin:0;}}


/*2カラム----------------------------------*/
.thanks-Column2{margin:0;padding:0;}	
	
/*ボックス親*/	
.thanks-Column2 {
	display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
	
	-webkit-justify-content: space-between;
	-moz-justify-content: space-between;
	-ms-justify-content: space-between;
	-o-justify-content: space-between;
	justify-content: space-between;;
	
	-webkit-flex-direction:row;
	-moz-flex-direction:row;
	-ms-flex-direction:row;
	-o-flex-direction:row;
	flex-direction:row;

	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	-o-flex-wrap: wrap;
	flex-wrap: wrap;
	}
	
/*ボックス子*/	
@media (min-width: 1200px) {
	.thanks-Column2 .box{width: calc(50% - 20px);margin:0 20px 0 0;padding:0px;}}
@media (min-width: 992px) and (max-width: 1199px){
    .thanks-Column2 .box{width: calc(50% - 20px);margin:0 20px 0 0;padding:0px;}}
@media (min-width: 768px) and (max-width: 991px) {
	.thanks-Column2 .box{width: calc(100% - 0px);margin:0 0 10px 0;padding:0px;}}
@media (max-width: 767px) {
	.thanks-Column2 .box{width: calc(100% - 0px);margin:0 0 10px 0;padding:0px;}}