@charset "utf-8";

/* ===================================================================
 Reset
=================================================================== */
*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
html, body, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, div, span, img, a, table, tr, th, td {
 margin: 0; padding: 0; border: 0; font-weight: normal; font-size: 100%; vertical-align:baseline; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
article, header, footer, aside, figure, figcaption, nav, section { display:block; }
html { scroll-behavior:smooth; }
body { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
table { border-collapse: collapse; border-spacing: 0;}
ol, ul { list-style: none; list-style-type: none; }

/* ===================================================================
 Layout
=================================================================== */
html { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
*, :before, :after { -webkit-box-sizing:inherit; -moz-box-sizing:inherit; box-sizing:inherit; }

@font-face { font-family: "Yu Gothic M"; src: local("Yu Gothic Medium");}
@font-face { font-family: "Yu Gothic M"; src: local("Yu Gothic Bold"); font-weight: bold;}
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@700&display=swap');

body { background:#fff; padding:0; margin:0 auto; font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, sans-serif; color: #000; font-size:16px; line-height:1.35; letter-spacing: 0.05em; }

/* Chrome でのみフォントを太めに表示する */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  * { text-shadow: transparent 0 0 0, rgba(0, 0, 0, .7) 0 0 0 !important; }
  :before, :after { text-shadow: none; }
}

#wrap { width: 100%; margin: 0 auto;}

img { -ms-interpolation-mode: bicubic; border: 0; vertical-align: middle;}
a,
a:visited { color: #333; text-decoration: underline; }
a:hover { color: #999; text-decoration: underline; opacity:0.75; filter: alpha(opacity=75); -webkit-transition: all .3s; transition: all .3s; }

small { }
p { }

/* ヘッダー
-------------------------------------------------- */
header { width:100%; margin: 0 auto; background:; }
header:after { content:" "; display:block; clear:both;}
.head { width: 100%; max-width:680px; margin: 0 auto;}
.head h1 { float: left; width:40%; text-align:left;}
.head .add { float: right; width:60%; font-size:13px; text-align:right; padding-top:10px;}

@media only screen and (max-width: 690px) {
	.head h1 { float:none; width:100%; margin:0 auto;}
	.head .add { float:none; width:100%; margin:0 auto; text-align:center;}
}

/* タイトル
-------------------------------------------------- */
#title { width:100%; margin: 0 auto 15px auto; background: url("parts/title_bg.jpg") no-repeat center top;}
#title h2 { min-height:100px; margin: 0 auto 15px auto; text-align:left; padding: 35px 10px 0 15px; color:#fff; font-size:28px; letter-spacing:0.02em; font-weight: normal; line-height: 1.2;}
#title p { padding: 0; text-align: left;}

@media only screen and (max-width: 690px) {
    #title h2 { font-size:23px; padding-top: 30px;}
    #title p { width:94%; margin-left: auto; margin-right: auto;}
}

/* 見出し
-------------------------------------------------- */
h3 { font-weight:bold; font-size:20px; margin-bottom:20px; }
.page-complete h3 { font-size:26px; margin-top:50px; }

/* メインボックス
-------------------------------------------------- */
.main { background-color:#fff; width:100%; max-width:680px; padding: 0 0 20px 0; margin: 0 auto;}

/* ===================================================================
 フォーム
=================================================================== */
.formWrap { width:100%; max-width:680px; margin:0 auto 20px auto; text-align:center;}
.formWrap p { margin: 0 auto 0.5em auto; padding: 0; text-align: left;}
.formWrap em { font-style: normal; font-weight: bold; color: #D80000;}

@media only screen and (max-width: 690px) {
    .formWrap { width:94%; }
}

/* Table
-------------------------------------------------- */
.formTable { width:100%; font-size:14px; background-color: #FFF; margin:5px auto 20px auto; border-collapse: collapse; }
.formTable:after { content:" "; display:block; clear:both;} 
.formTable em { font-size:13px; font-weight:bold; color:#F00; font-style:normal; }
.formTable th,
.formTable td { text-align:left; border:1px solid #CCC; vertical-align: top;}
.formTable th { width: 180px; padding: 10px ; text-align: left; vertical-align: middle; background-color: #EEEFF2; color: #666;}
.formTable td { padding:15px 10px 10px 10px;}
.formTable th span { font-size: 12px; }

/* 必須 */
.formTable th span  { float:right; margin: 0 5px; padding: 3px 4px; background: #F00; color: #FFF;
 font-size: 11px; font-weight: normal; line-height:1; vertical-align: middle; display: inline-block;}

@media only screen and (max-width: 690px){
	.formTable { width: 100%; }
	.formTable th { width: 100%; display: block; border-top: none; padding: 7px 0 7px 10px; }
	.formTable td { width: 100%; display: block; border-top: none; padding: 12px 0 12px 10px; }
	.formTable tr th { border-bottom: none; }
	.formTable tr:first-child th { border-top: 1px solid #CCC; }
}

/* Form fields, general styles first.
-------------------------------------------------- */
btn, input, select, textarea { margin: 0 0 2px 0; font-size: 14px; vertical-align: baseline;}
btn, input { line-height: normal;}

html input[type="btn"],
input[type="reset"],
input[type="submit"] { -webkit-appearance: btn; cursor: pointer;}
btn[disabled],
input[disabled] { cursor: default;}
input[type="checkbox"],
input[type="radio"] { padding: 0;}

label { white-space:nowrap; margin-right:0.5em;}

button, textarea, select, input[type="text"] { border: 1px solid #BBB; font-family: inherit; }
input, textarea { color: #141412;}
input:focus, textarea:focus { border: 1px solid #BBB!important; outline: 0; background-color: #FFFEE9!important;}

form input[type="text"], form input[type="url"], form input[type="email"],  form textarea{ width: 99%; }
form input.input_m { width: 50%;}
form input.input_s { width: 30%;}
form input.input_xs { width: 20%;}
@media only screen and (max-width: 690px){
	form input.input_m, form textarea {width: 95%;}
	form input.input_s {width: 50%;}
	form input.input_xs {width: 30%;}
}

/* Buttons
-------------------------------------------------- */
button,
input[type="submit"],
input[type="button"],
input[type="reset"] {padding: 13px 20px 10px!important; border-radius: 5px; letter-spacing:0.1em; line-height:1; text-decoration: none; display: inline-block;}

@media only screen and (max-width: 690px){
	button,
	input[type="submit"],
	input[type="button"],
	input[type="reset"] {
		padding: 13px 13px 11px!important;  }
}

button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
 background: #FFF; border: 1px solid #BBB; font-size: 14px!important; color: #111; 
 background: -moz-linear-gradient(top, #FFF, #EEE);
 background: -webkit-linear-gradient(top, #FFF, #EEE);
 background: linear-gradient(to bottom, #FFF, #EEE);
}

button,
input[type="button"][name=back]{
 background: #FFF; border: 1px solid #BBB; font-size: 14px!important; color: #111; 
 background: -moz-linear-gradient(top, #FFF, #EEE);
 background: -webkit-linear-gradient(top, #FFF, #EEE);
 background: linear-gradient(to bottom, #FFF, #EEE);
}

button:hover,
button:focus,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:focus,
input[type="button"]:focus,
input[type="reset"]:focus { filter: alpha(opacity=70); -moz-opacity:0.70; opacity:0.70; -webkit-transition: all .3s; transition: all .3s;}

button:active,
input[type="submit"]:active,
input[type="button"]:active,
input[type="reset"]:active { filter: alpha(opacity=70); -moz-opacity:0.70; opacity:0.70; -webkit-transition: all .3s; transition: all .3s;}

#submit-wraper.is-disabled input[type="submit"],
#submit-wraper.is-disabled input[type="submit"]:hover,
#submit-wraper.is-disabled input[type="submit"]:focus,
#submit-wraper.is-disabled input[type="submit"]:active { background-color: #D8D8D8 !important; border: 1px solid #D8D8D8; cursor: default; filter: alpha(opacity=100); -moz-opacity:1; opacity: 1;}

/* エラー
-------------------------------------------------- */
.errMsgMain { border: #f12 2px solid; color:#f12; padding:10px 30px; margin-bottom:30px;}
.errMsgMain ul{ padding:15px; margin: 0!important; text-align:left; color:#f12; font-size:100%; font-weight:bold;}
.errtxt-main-wrap {}
.errtxt-main-wrap p { margin:0;}

@media only screen and (max-width: 690px){
	.errMsgMain { margin: 0 auto 20px; padding:5px 10px; }
}

form .errtxt { background: url("./parts/ico_error.gif") no-repeat 0 1px; font-size: 90%; margin-bottom: 5px!important; padding: 4px 5px 3px 5px;}
form .errtxt span { display: block; color: #E8541F; font-weight: bold; line-height: 0.8; padding-left: 18px;}
form input.error,
form select.error,
form textarea.error,
form input[type="checkbox"].error + label,
form input[type="radio"].error + label { background-color:#fff1f1; border:1px solid #eecfcf;}

/* パンくず
-------------------------------------------------- */
.progress { margin:20px 0;}
.progress { margin-bottom:20px; overflow:hidden; background-color:#CCC; border-radius:4px; height:30px;}
.progress li { list-style:none; display:table-cell; position:relative; background:#CCC; }

.progress li.progress-bar.current:last-child:before,
.progress li.progress-bar.current:last-child:after{ display:none;}

.progress li.progress-bar.current:before,
.progress li.progress-bar.current:after{ content: ""; position: absolute; width: 0; height: 0; margin: auto;}

.progress li.progress-bar.current:before{ top:-15px; right:-1em; border-style: solid; border-color: transparent transparent transparent #fff; border-width: 30px 0 30px 1em; z-index: 10;}

.progress li.progress-bar.current:after{ top:-15px; right:-.8em; border-style: solid; border-color: transparent transparent transparent #64C5DA; border-width: 30px 0 30px 1em; z-index: 10;}

.progress-bar { float: left; width: 0; height: 100%; line-height:30px; color: #fff; text-align: center; background-color: #CCC;
 -webkit-transition: width .6s ease; -o-transition: width .6s ease; transition: width .6s ease;}
.progress-bar.current { width: 34%; background-color: #64C5DA;}
.progress-bar.no-current1 {width:33%; background-color:#BBB;}
.progress-bar.no-current2 {width:33%; background-color:#BBB;}

/* */
.heigth_em10 { height:10em;}

/* プライバシーポリシー
-------------------------------------------------- */
.privacy_policy{ margin: 30px auto 30px auto; width: 100%; font-size:90%; }
.privacy_policy h3{ margin:0 auto 10px auto; font-size:18px; }
.privacy_policy p { }

.acceptance { margin-top: 5px; padding: 10px; height: 200px; background-color: #F9F9F9; border: 1px solid #E5E5E5; overflow-y: scroll;}
.acceptance ol { margin: 0; padding: 0; font-weight: normal; list-style:none;}
.acceptance li { font-weight: normal;}
.acceptance h4 { margin-top: 18px; margin-bottom: 4px;}

@media only screen and (max-width: 690px){
	.privacy_policy{ width: 100%; }
}

/* Copyright
-------------------------------------------------- */
footer { padding:10px 0 ; margin:0 auto; }
footer a, footer a:hover { color: #555; }
.copyright { font-size:11px; color:#555; text-align: center;}

/* Image Upload
-------------------------------------------------- */
.img-view-area,
.file-view-area { padding: 10px 0 10px 0;}
.img-view-area p,
.file-view-area p { margin-bottom: 5px; }
.img-view-area p img { max-width: 300px; height: auto; }
.img-view-area img { vertical-align: top; font-size: 1px; }
.img-view-area input.file-del-button,
.file-view-area input.file-del-button {
 margin: 0; padding: 4px 12px 4px 12px!important; display: inline-block; background: #d3250e; width: auto; border: none;
 text-decoration: none; color: #fff; cursor: pointer; line-height: 1; font-size: 10px;
 -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;
 -moz-box-shadow: 0px 1px 0px rgba(0,0,0,0.2); -webkit-box-shadow: 0px 1px 0px rgba(0,0,0,0.2); box-shadow: 0px 1px 0px rgba(0,0,0,0.2);}

.file-view-area span a { margin-left:25px;}
.file-view-area span.file-img { display:inline-block; height:20px; padding-top:3px; background:url(parts/file-img.png) no-repeat top left;}
.file-view-area span.file-doc { display:inline-block; height:20px; padding-top:3px; background:url(parts/file-doc.png) no-repeat top left;}
.file-view-area span.file-xls { display:inline-block; height:20px; padding-top:3px; background:url(parts/file-xls.png) no-repeat top left;}
.file-view-area span.file-pdf { display:inline-block; height:20px; padding-top:3px; background:url(parts/file-pdf.png) no-repeat top left;}
.file-view-area span.file-other { display:inline-block; height:20px; padding-top:3px; background:url(parts/file-other.png) no-repeat top left;}