@charset "utf-8";
/* 共通部 */
html {
    overflow-x:hidden;
}

body {
	background-color:#f0f0f0;margin:0px;text-align:center;color:#000; overflow-x:hidden;
	/* font-family: "游ゴシック体", "YuGothic", "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif; */
	font-family:"BIZ UDPGothic";
	line-height:1.4;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

header {
    padding:6px 10px; width: 100%; box-shadow: 0px 0px 2px 2px rgb(0 0 0 / 10%); background-color:#0488cc; 
}
header h1 {
    font-size:18px; color:#fff; max-width:640px; margin:0px auto; text-align:center; font-weight:normal;
}
h2 {
	background-color: lightblue; margin: 5px auto 20px auto; padding: 20px; text-align: left;
	font-weight:normal; line-height:22px; 
}
.contents-wrapper {
	flex:1;
}

.contents {
    min-width:300px;
    max-width:1024px; 
    margin:20px auto;
    background-color:#fff;padding:20px;margin-bottom:20px;border-radius:10px;
    box-shadow: 0px 0px 3px rgba(0,0,0,0.4); min-height: 0; text-align:left;
}

.contents * {
    font-size:18px;
    letter-spacing:-1px;
}

.contents hr {
    display:block; clear:both;  margin-bottom:15px; border:none; border-bottom:1px solid #666;
}
.error-message {
	margin: 10px 0px 17px 0px;
    border:0px; color:#fff;
    border-radius:2px;
    padding:3px 15px;
    background-color:crimson;
}

input.error, textarea.error, select.error {
    background-color: #ffcccc; /* 任意の色を設定 */
    border-color: #ff0000; /* 枠線の色も変更可能 */
}
.img-center {
    text-align:center;
}
/*
 ボタン
*/
.form_submit_btn {
    background-color:#f0f0f0;
    max-width:100%;
    width:100%;
    margin: 10px 0px;
    padding:0px;
    display: flex;
    justify-content: center;
}
.form_submit_btn .submitbtn {
	padding:0px 0px; width:150px; height:45px; line-height:50px;
	color: #000; background-color: #ccc; border:0px solid #999; 
    background-color:#0488cc; color:#fff; cursor:pointer;  margin: 0px 5px 15px 5px; font-size:18px;
    box-shadow: 0px 0px 3px rgba(0,0,0,0.2); border-radius:3px;
}

/*
	進捗バー
*/
.progress_page_number {
    background-color:#f0f0f0;
    margin:0px auto 10px auto;
    max-width:640px;
    padding:0px 10px;
    color:#000;
    text-align:center;
    height:50px;
    line-height:60px; margin-top:3px; font-size:16px; border:0px solid #ccc;
}


footer {
    border:0px solid #ccc; background-color:#000; color:#fff; padding:0px 0px 10px 0px;
    background-color:#0488cc; background-color:#ccc; color:#666;
}


table.tbl1 {
	border-collapse:collapse;
}
.tbl1 th,.tbl1 td {
    border:solid 1px grey;
}
.tbl1 th {
    padding:7px; font-weight:normal;
}
.tbl1 th {
    padding:7px; font-weight:normal;
}

/*
	柔整用
*/
table.juseTbl {
	border-collapse:collapse;
	width:100%;
}
.juseTbl th {
	background-color: #dff0ff;
	width: 40%;
}
.juseTbl td {
	text-align:right;
}
.juseTbl th,.juseTbl td {
    border:solid 1px grey;
}
#td-top {
	text-align:left;
}

ul.custom-mark {
  list-style: none; /* デフォルトの点を消す */
  padding-left: 1em; /* 左の余白を確保 */
}

ul.custom-mark li::before {
  content: "※"; /* マーカーを※に変更 */
  margin-right: 0.5em; /* テキストとの間隔 */
  color: inherit; /* テキストと同じ色にする（必要なら変更） */
}


.color-b {
	color:blue;
}
.color-r {
	color:red;
}

.completepre {
	margin:50px 20px; font-size:20px;
}
.progress {
	height: 3em;min-width: 65%;vertical-align: -1.2em;
}
.warning {
	color:red;
}

@media (max-width:640px) {
    .contents {
        box-shadow: 0px 0px 0px rgba(0,0,0,0);border-radius:0px; margin:0px;
        padding: 5px;
    }
    
	.contents * {
	    font-size:14px;
	}
    
    .contents .qtitle {
        width:500px; 
    }
    footer .form_submit_btn {
        background-color:#fff;
       
    }
    footer .progress_page_number {
        background-color:#fff;
    }
    footer .form_submit_btn {
        padding-top:20px;
    }
	.tbl1 th {
	    font-size:14px;
	    padding: 2px;
	    font-weight:normal;
	}
	.form_contents {
	    padding:0px;margin-left: 0px;
	}
	ul.custom-mark {
	  list-style: none; /* デフォルトの点を消す */
	  padding-left: 0.5em; /* 左の余白を確保 */
	}
}
@media (max-width:590px) {
    .contents .qtitle {
        width:440px; 
    }


}
@media (max-width:540px) {
    .contents .qtitle {
        width:380px; 
    }
}
@media (max-width:490px) {
    .contents .qtitle {
        width:320px; 
    }
}
@media (max-width:400px) {
    .contents .qtitle {
        width:270px; 
    }
}
@media (min-width:640px) {

}