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

/*
<form id="mailformpro" action="../programs/contact/mailformpro/mailformpro.cgi" method="post">

<dl>

<dt>お名前</dt>
<dd class="half">
<input type="hidden" name="お名前" data-join="姓+ +名+（+セイ+ +メイ+）" value="">
<div>
<label><input type="text" name="姓" data-kana="セイ" placeholder="姓"  required="required"></label>
<label><input type="text" name="名" data-kana="メイ" placeholder="名"  required="required"></label>
<label><input type="text" name="セイ" data-charcheck="kana" placeholder="セイ"  required="required"></label>
<label><input type="text" name="メイ" data-charcheck="kana" placeholder="メイ"  required="required"></label>
</div>
</dd>

<dt>電話番号</dt>
<dd><input type="text" name="電話番号"  required="required"></dd>

<dt>メールアドレス</dt>
<dd class="half">
<div>
<label class="full"><input type="email" data-type="email" data-parent="mailfield" name="email"  required="required"></label>
<label class="full"><input type="email" data-type="email" data-parent="mailfield" name="confirm_email"  required="required"></label>
</div>
</dd>

<dt>ご住所</dt>
<dd class="half">
<input type="hidden" name="ご住所" data-join="〒+郵便番号+\n+都道府県+市区町村+丁目番地以降" value="">
<div>
<label><span>〒</span><input class="zip" type="text" name="郵便番号"  required="required"></label>
<label><span>都道府県</span><select class="pref" name="都道府県"  required="required">
<option value="" selected="selected">選択</option>
<optgroup label="北海道・東北地方">
<option value="北海道">北海道</option>
<option value="青森県">青森県</option>
<option value="岩手県">岩手県</option>
<option value="秋田県">秋田県</option>
<option value="宮城県">宮城県</option>
<option value="山形県">山形県</option>
<option value="福島県">福島県</option>
</optgroup>
<optgroup label="関東地方">
<option value="栃木県">栃木県</option>
<option value="群馬県">群馬県</option>
<option value="茨城県">茨城県</option>
<option value="埼玉県">埼玉県</option>
<option value="東京都">東京都</option>
<option value="千葉県">千葉県</option>
<option value="神奈川県">神奈川県</option>
</optgroup>
<optgroup label="中部地方">
<option value="山梨県">山梨県</option>
<option value="長野県">長野県</option>
<option value="新潟県">新潟県</option>
<option value="富山県">富山県</option>
<option value="石川県">石川県</option>
<option value="福井県">福井県</option>
<option value="静岡県">静岡県</option>
<option value="岐阜県">岐阜県</option>
<option value="愛知県">愛知県</option>
</optgroup>
<optgroup label="近畿地方">
<option value="三重県">三重県</option>
<option value="滋賀県">滋賀県</option>
<option value="京都府">京都府</option>
<option value="大阪府">大阪府</option>
<option value="兵庫県">兵庫県</option>
<option value="奈良県">奈良県</option>
<option value="和歌山県">和歌山県</option>
</optgroup>
<optgroup label="四国地方">
<option value="徳島県">徳島県</option>
<option value="香川県">香川県</option>
<option value="愛媛県">愛媛県</option>
<option value="高知県">高知県</option>
</optgroup>
<optgroup label="中国地方">
<option value="鳥取県">鳥取県</option>
<option value="島根県">島根県</option>
<option value="岡山県">岡山県</option>
<option value="広島県">広島県</option>
<option value="山口県">山口県</option>
</optgroup>
<optgroup label="九州・沖縄地方">
<option value="福岡県">福岡県</option>
<option value="佐賀県">佐賀県</option>
<option value="長崎県">長崎県</option>
<option value="大分県">大分県</option>
<option value="熊本県">熊本県</option>
<option value="宮崎県">宮崎県</option>
<option value="鹿児島県">鹿児島県</option>
<option value="沖縄県">沖縄県</option>
</optgroup>
</select></label>
<label class="full"><span>市区町村</span><input class="address" type="text" name="市区町村"  required="required"></label>
<label class="full"><span>丁目番地以降</span><input type="text" name="丁目番地以降"  required="required"></label>
</div>
</dd>

<dt class="optional">セレクト</dt>
<dd>
<select name="セレクト">
<option value="">選択</option>
<option value="バリュー">バリュー</option>
</select>
</dd>

<dt class="optional">日付</dt>
<dd>
<select name="日付" data-daystart="1" data-daymax="90" data-weekexc="1,0,0,0,0,0,1">
<option value="">選択</option>
</select>
</dd>

<dt class="optional">内容</dt>
<dd><textarea name="内容" rows="3"></textarea></dd>

</dl>

<div id="formPrivacy">
<label><input type="checkbox" name="プライバシーポリシー" value="同意します" data-post-disable="1"  required="required">弊社プライバシーポリシーに同意します。</label>
<div id="errormsg_プライバシーポリシー" class="mfp_err"></div>
</div>

<div class="formBtn">
<ul>
<li><button type="submit" id="formConfirm" data-disabled="入力内容にエラーがあります">確認する</button></li>
<li><button type="reset" id="formReset">リセット</button></li>
</ul>
</div>

</form>
<script type="text/javascript" id="mfpjs" src="../programs/contact/mailformpro/mailformpro.cgi" charset="UTF-8"></script>



<div id="errormsg_フォーム" class="mfp_err"></div>
*/



input[type="text"],input[type="email"],input[type="password"],select,textarea{
font-size: 14px;
line-height: 1.8;
padding: 0 10px;
font-family: inherit;
border: 1px solid #cdcdcd;
display: block;
width: 100%;
background-color: #ffffff;
}
*+input[type="text"],*+input[type="email"],*+input[type="password"],*+select,*+textarea{
/*margin-top: 10px;*/
}
input[type="text"],input[type="email"],input[type="password"],select{
height: 40px;
}
input[type="text"],input[type="email"],input[type="password"],textarea{
}
input[type="text"],input[type="email"],input[type="password"]{
}
input[type="checkbox"], input[type="radio"]{
margin-right: 10px;
border: none;
display: none;
}
select{
/*-webkit-appearance: none;
-moz-appearance: none;
appearance: none;*/
}
option{
/*padding-top: 5px;
padding-bottom: 5px;*/
}
optgroup::before{
/*padding-top: 10px;
padding-bottom: 5px;*/
}
textarea{
resize: vertical;
padding: 10px;
}
button{
font-family: inherit;
padding: 0;
}
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, select:focus, textarea:focus{
border: 1px solid #39bbff;
}
input:focus, select:focus, textarea:focus, button:focus{
outline: none;
}
.form label{
display: block;
cursor: pointer;
position: relative;
padding: 10px 10px 10px 30px;
line-height: 20px;
transition: color 100ms ease;
}
.form label::before, .form label::after{
content: '';
display: block;
position: absolute;
top: 10px;
left: 0;
width: 20px;
height: 20px;
border: 1px solid #1d2086;
}
.form label::after{
opacity: 0;
transform: scale(0);
background-color: #1d2086;
transition: all 200ms ease;
}
.form label.mfp_checked::after{
opacity: 1;
transform: none;
}
.form .radio label::before, .form .radio label::after{
border-radius: 50%;
}
.form label:hover{
color: #6fd1e3;
}
.otherBox{
padding: 0 0 0 30px;
margin: 10px 0;
}
.otherBox .attention{
margin-top: 0.5em;
}
.half{
display: flex;
flex-wrap: wrap;
margin-left: -10px;
margin-top: -20px;
}
.half>div{
width: 50%;
padding-left: 10px;
margin-top: 20px;
}



#mfp_hidden{
overflow: hidden;
width: 1px;
height: 0;
}



/*------------------------
ボタン
------------------------*/
.formBtn{
margin-top: 50px;
}
.formBtn ul{
display: flex;
justify-content: center;
}
.formBtn ul li{
margin: 0 10px;
}
.formBtn ul li button{
display: flex;
border: none;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
background-color: #1d2086;
color: #ffffff;
text-decoration: none;
height: 80px;
line-height: 1.4;
padding: 0 10px;
font-size: 150%;
font-weight: 400;
border-radius: 50em;
transition: background-color 100ms ease;
cursor: pointer;
width: 300px;
}
.formBtn ul li button:hover{
background-color: #6fd1e3;
}
#formConfirm, #formSend{}
#formReset, #formCancel{
background-color: #999999;
}
#formReset:hover, #formCancel:hover{
background-color: #6fd1e3;
}
#formConfirm{}
#formSend{}
#formReset{}
#formCancel{}
.formBtn ul li button:hover{}
#formConfirm[disabled]{
cursor: default;
background-color: #aaaaaa;
}
#formConfirm[disabled]:hover{
background-color: #aaaaaa;
}





@media screen and (max-width: 999px){
.formBtn{
margin-top: 30px;
}
.formBtn ul{
display: block;
}
.formBtn ul li{
margin: 0 auto;
max-width: 300px;
}
.formBtn ul li+li{
margin-top: 10px;
}
.formBtn ul li button{
height: 60px;
width: 100%;
}
}/*999*/
/*------------------------
／ボタン
------------------------*/



/*------------------------
確認画面
------------------------*/
#mfp_overlay{
position: absolute;
display: none;
z-index: 2001;
}
#mfp_overlay_background{
background-color: #000000;
position: absolute;
display: none;
z-index: 2000;
}
#mfp_overlay_inner{
background-color: #ffffff;
padding: 50px;
margin: 0 auto;
width: 1000px;
border-radius: 5px;
}
#mfp_overlay_inner .confirm{
text-align: center;
margin-bottom: 2em;
font-size: 150%;
line-height: 1.5;
}
#mfp_confirm_table{}
#mfp_confirm_table tr{}
#mfp_confirm_table tr th, #mfp_confirm_table tr td{
padding: 20px;
text-align: left;
}
#mfp_confirm_table tr th{
width: 240px;
border-bottom: 1px solid #1d2086;
}
#mfp_confirm_table tr td{
border-bottom: 1px solid #cdcdcd;
}





@media screen and (max-width: 999px){
#mfp_overlay_inner{
padding: 20px;
width: calc(100% - 20px);
}
#mfp_overlay_inner .confirm{
margin-bottom: 1em;
}
#mfp_confirm_table{
margin-top: -20px;
}
#mfp_confirm_table tr th, #mfp_confirm_table tr td{
display: block;
padding: 10px 20px;
}
#mfp_confirm_table tr th{
width: auto;
background-color: #dcdcdc;
border-bottom: none;
margin-top: 20px;
}
#mfp_confirm_table tr td{
border-bottom: none;
}
}/*999*/
/*------------------------
／確認画面
------------------------*/



/*------------------------
エラー
------------------------*/
.mfp_err{
display: none;
padding-left: 24px;
margin-top: 0.75em;
font-size: 11px;
line-height: 1.5;
color: #913737;
position: relative;
}
.mfp_err::before, .mfp_err::after{
position: absolute;
left: 0;
top: 50%;
width: 18px;
height: 18px;
border: 1px solid #913737;
border-radius: 50%;
}
.mfp_err::before{
content: '';
display: block;
transform: translate(0, -50%) scale(1);
opacity: 0;
animation: errIcon 700ms cubic-bezier(0.25, 1, 0.5, 1) infinite;
}
.mfp_err::after{
content: '!';
display: flex;
justify-content: center;
align-items: center;
transform: translate(0, -50%);
font-family: 'Poppins', sans-serif;
font-size: 16px;
font-weight: 700;
line-height: 100%;
color: #ffffff;
background-color: #913737;
}
.problem{
background-color: #ffe9e9 !important;
}



@keyframes errIcon{
0%{
opacity: 1;
transform: translate(0, -50%) scale(1);
}
100%{
opacity: 0;
transform: translate(0, -50%) scale(1.5);
}
}
/*------------------------
／エラー
------------------------*/



/*------------------------
その他
------------------------*/
#mfp_loading_screen{
z-index: 3000;
opacity: 0.8;
display: none;
background-color: #000000;
position: absolute;
}
/*#mfp_loading{
z-index: 2001;
position: absolute;
display: none;
width: 40px;
height: 40px;
background-image: url(../images/contact_loading.gif);
}*/
#mfp_loading_screen::before{
content: '';
display: block;
overflow: visible;
z-index: 2001;
position: absolute;
margin: auto;
left: 0;
top: 0;
bottom: 0;
right: 0;
width: 15px;
height: 15px;
border-radius: 100%;
box-shadow: 15px 15px rgb(79,77,73), -15px 15px rgb(223,223,223), -15px -15px rgb(79,77,73), 15px -15px rgb(223,223,223);
-o-box-shadow: 15px 15px rgb(79,77,73), -15px 15px rgb(223,223,223), -15px -15px rgb(79,77,73), 15px -15px rgb(223,223,223);
-ms-box-shadow: 15px 15px rgb(79,77,73), -15px 15px rgb(223,223,223), -15px -15px rgb(79,77,73), 15px -15px rgb(223,223,223);
-webkit-box-shadow: 15px 15px rgb(79,77,73), -15px 15px rgb(223,223,223), -15px -15px rgb(79,77,73), 15px -15px rgb(223,223,223);
-moz-box-shadow: 15px 15px rgb(79,77,73), -15px 15px rgb(223,223,223), -15px -15px rgb(79,77,73), 15px -15px rgb(223,223,223);
animation: cssload-spin ease infinite 2.8s;
-o-animation: cssload-spin ease infinite 2.8s;
-ms-animation: cssload-spin ease infinite 2.8s;
-webkit-animation: cssload-spin ease infinite 2.8s;
-moz-animation: cssload-spin ease infinite 2.8s;
}
@keyframes cssload-spin{
0%,
100%{
box-shadow: 15px 15px rgb(79,77,73), -15px 15px rgb(223,223,223), -15px -15px rgb(79,77,73), 15px -15px rgb(223,223,223);
}
25%{
box-shadow: -15px 15px rgb(223,223,223), -15px -15px rgb(79,77,73), 15px -15px rgb(223,223,223), 15px 15px rgb(79,77,73);
}
50%{
box-shadow: -15px -15px rgb(79,77,73), 15px -15px rgb(223,223,223), 15px 15px rgb(79,77,73), -15px 15px rgb(223,223,223);
}
75%{
box-shadow: 15px -15px #dfdfdf, 15px 15px #4f4d49, -15px 15px #dfdfdf, -15px -15px #4f4d49;
}
}

@-o-keyframes cssload-spin{
0%,
100%{
box-shadow: 15px 15px rgb(79,77,73), -15px 15px rgb(223,223,223), -15px -15px rgb(79,77,73), 15px -15px rgb(223,223,223);
}
25%{
box-shadow: -15px 15px rgb(223,223,223), -15px -15px rgb(79,77,73), 15px -15px rgb(223,223,223), 15px 15px rgb(79,77,73);
}
50%{
box-shadow: -15px -15px rgb(79,77,73), 15px -15px rgb(223,223,223), 15px 15px rgb(79,77,73), -15px 15px rgb(223,223,223);
}
75%{
box-shadow: 15px -15px #dfdfdf, 15px 15px #4f4d49, -15px 15px #dfdfdf, -15px -15px #4f4d49;
}
}

@-ms-keyframes cssload-spin{
0%,
100%{
box-shadow: 15px 15px rgb(79,77,73), -15px 15px rgb(223,223,223), -15px -15px rgb(79,77,73), 15px -15px rgb(223,223,223);
}
25%{
box-shadow: -15px 15px rgb(223,223,223), -15px -15px rgb(79,77,73), 15px -15px rgb(223,223,223), 15px 15px rgb(79,77,73);
}
50%{
box-shadow: -15px -15px rgb(79,77,73), 15px -15px rgb(223,223,223), 15px 15px rgb(79,77,73), -15px 15px rgb(223,223,223);
}
75%{
box-shadow: 15px -15px #dfdfdf, 15px 15px #4f4d49, -15px 15px #dfdfdf, -15px -15px #4f4d49;
}
}

@-webkit-keyframes cssload-spin{
0%,
100%{
box-shadow: 15px 15px rgb(79,77,73), -15px 15px rgb(223,223,223), -15px -15px rgb(79,77,73), 15px -15px rgb(223,223,223);
}
25%{
box-shadow: -15px 15px rgb(223,223,223), -15px -15px rgb(79,77,73), 15px -15px rgb(223,223,223), 15px 15px rgb(79,77,73);
}
50%{
box-shadow: -15px -15px rgb(79,77,73), 15px -15px rgb(223,223,223), 15px 15px rgb(79,77,73), -15px 15px rgb(223,223,223);
}
75%{
box-shadow: 15px -15px #dfdfdf, 15px 15px #4f4d49, -15px 15px #dfdfdf, -15px -15px #4f4d49;
}
}

@-moz-keyframes cssload-spin{
0%,
100%{
box-shadow: 15px 15px rgb(79,77,73), -15px 15px rgb(223,223,223), -15px -15px rgb(79,77,73), 15px -15px rgb(223,223,223);
}
25%{
box-shadow: -15px 15px rgb(223,223,223), -15px -15px rgb(79,77,73), 15px -15px rgb(223,223,223), 15px 15px rgb(79,77,73);
}
50%{
box-shadow: -15px -15px rgb(79,77,73), 15px -15px rgb(223,223,223), 15px 15px rgb(79,77,73), -15px 15px rgb(223,223,223);
}
75%{
box-shadow: 15px -15px #dfdfdf, 15px 15px #4f4d49, -15px 15px #dfdfdf, -15px -15px #4f4d49;
}
}



/*#mfp_loading{
z-index: 2001;
width: 12px !important;
height: 12px !important;
top: 50% !important;
left: 50% !important;
left: calc(50% - 6px) !important;
left: -o-calc(50% - 6px) !important;
left: -ms-calc(50% - 6px) !important;
left: -webkit-calc(50% - 6px) !important;
left: -moz-calc(50% - 6px) !important;
border-radius: 12px;
background-color: #777777;
transform-origin:	50% 50%;
-o-transform-origin:	50% 50%;
-ms-transform-origin:	50% 50%;
-webkit-transform-origin:	50% 50%;
-moz-transform-origin:	50% 50%;
animation: cssload-loader 1.15s ease-in-out infinite;
-o-animation: cssload-loader 1.15s ease-in-out infinite;
-ms-animation: cssload-loader 1.15s ease-in-out infinite;
-webkit-animation: cssload-loader 1.15s ease-in-out infinite;
-moz-animation: cssload-loader 1.15s ease-in-out infinite;
}
#mfp_loading:before{
content: "";
position: absolute;
background-color: #777777;
top: 0px;
left: -24px;
height: 12px;
width: 12px;
border-radius: 12px;
}
#mfp_loading:after{
content: "";
position: absolute;
background-color: #777777;
top: 0px;
left: 24px;
height: 12px;
width: 12px;
border-radius: 12px;
}
@keyframes cssload-loader{
0%{transform:rotate(0deg);}
50%{transform:rotate(180deg);}
100%{transform:rotate(180deg);}
}
@-o-keyframes cssload-loader{
0%{-o-transform:rotate(0deg);}
50%{-o-transform:rotate(180deg);}
100%{-o-transform:rotate(180deg);}
}
@-ms-keyframes cssload-loader{
0%{-ms-transform:rotate(0deg);}
50%{-ms-transform:rotate(180deg);}
100%{-ms-transform:rotate(180deg);}
}
@-webkit-keyframes cssload-loader{
0%{-webkit-transform:rotate(0deg);}
50%{-webkit-transform:rotate(180deg);}
100%{-webkit-transform:rotate(180deg);}
}
@-moz-keyframes cssload-loader{
0%{-moz-transform:rotate(0deg);}
50%{-moz-transform:rotate(180deg);}
100%{-moz-transform:rotate(180deg);}
}*/
/*------------------------
／その他
------------------------*/