@charset "UTF-8";

/* 電話でお問い合わせ */
section.contact_phone{text-align: center;}
section.contact_phone+section{margin-top: 3em;}
section.contact_phone a[href^="tel:"]{color: #19529f !important; font-weight: 500; font-size: 360%; display: inline-block; line-height: 1.2; font-family: "af";}
section.contact_phone a>i{font-size: 80%;}
@media screen and (max-width:960px){
section.contact_phone a[href^="tel:"]{font-size: 240%;}
}

/*メールフォーム*/
section.mailform{margin-bottom: 8em;}
.mailform .any{display: inline-block; font-size: 80%; padding: 0 0.5em; margin: 0 0.5em 0 0; color: #666; background: #fff; border:1px solid #ccc; font-weight: bold; position: relative; top: -0.1em;}
.mailform .must{display: inline-block; font-size: 80%; padding: 0 0.5em; margin: 0 0.5em 0 0; color: red; background: #fff; border:1px solid #FFB2B2; font-weight: bold; position: relative; top: -0.1em;}
.mailFormErrorElement {	background: #FFF2F2 !important;}
.mailFormErrorMessage {	color: red; font-size:90%; font-weight: bold;}
.mailform table.style th{vertical-align: top;}
.mailform table.style td{vertical-align: top;}
.mailform_buttons{display: flex; align-items: stretch; justify-content: center; gap:1em; margin: 1.5em auto;}
.mailform_buttons .button{font-size: 110%; padding: 1em 4em; line-height: 1.2;}
@media screen and (max-width:960px){
.mailform_buttons{flex-direction: column-reverse;}
.mailform_buttons .button{padding: 1em;}
}

/*メールフォームのP*/
table.mailform td p{margin: 0.3em 0; font-size: 90%;}
table.mailform td p:first-child{margin-top: 0;}
table.mailform td p:last-child{margin-bottom: 0;}

/* メールフォームの入力項目 */
table.mailform input[type="text"],
table.mailform textarea { width: 100%; }
table.mailform textarea { resize: vertical; }
tr.contact_syubetu label{width: 100%;}

/* ステップ表示部分 */
#m-step { display: flex; width: min(100%,54em); margin:1em auto; }
#m-step li { flex: 1; background: #f5f5f5; color:#888; padding:0.5em 2em 0.5em 0.5em; text-align: center; vertical-align: middle; position: relative; border-right:1px solid rgba(0,0,0,0.1);}
#m-step li:after{font-family:"Font Awesome 6 Free"; font-weight:600; content: "\f054"; position:absolute; top:50%; right:0.7em; transform: translateY(-50%); color:rgba(0,0,0,0.2);}
#m-step li:last-child{ border:none; padding-right:0.5em;}
#m-step li:last-child:after { display: none;}
#m-step li.now { background:#d8ebff; color: #3d9cff; font-weight: bold; }
#m-step li:first-child { border-radius: 0.2em 0 0 0.2em; }
#m-step li:last-child { border-radius: 0 0.2em 0.2em 0; }
@media(max-width:960px){
#m-step{font-size: 80%;}
#m-step li {flex: initial; flex-grow: 1;}
}

/*お問い合わせ完了*/
#finish{border: 2px solid #3d9cff; background: #d8ebff; padding: 2em; margin: 2em auto;}
#finish .image{width: 20%;}
#finish .heading{ color: #3d9cff; font-size: 180%;}
@media screen and (max-width:960px){
#finish{padding: 1em;}
#finish .image img{width: min(60%,300px);}
#finish .heading{ font-size: 140%;}
}

/*添付ファイルリスト*/
ul#fileList li{padding: 0.7em 0; border-bottom: 1px solid #ccc;}
ul#fileList li:first-child{padding-top: 0;}
ul#fileList li:last-child{padding-bottom: 0; border-bottom: none;}
ul#fileList li img{width:2em; height:2em; border: 1px solid #ccc; object-fit: contain; margin-right:0.5em;}
ul#fileList input[type="file"]{width: 100%;}