@charset "utf-8";
/* --------------------------------------------- */
form#mailformpro{
width : 100%;
margin :1em auto;
/*
border-top : 1px solid #b0b0b0;
border-right : 1px solid #ffffff;
border-bottom : 1px solid #ffffff;
border-left : 1px solid #cccccc;
border-radius : 7px;
text-shadow : 0px 1px 0px #ffffff;
*/
}
form#mailformpro dl{
width : 100%;
/*
padding : 15px 25px;
*/
overflow : hidden;
}
form#mailformpro dl dt{

clear : both;
width: 25%;
/*float : left;*/
text-align: left;
font-weight: bold;
border-top : 1px solid #cccccc;
padding : 15px 20px 15px;
background : url(../image/border-shine.png) repeat-x 0 0;
}
form#mailformpro dl dd{
width: 75%;
float : left;
border-top : 1px solid #cccccc;
padding :20px 30px;
}
form#mailformpro dl dt:first-child,
form#mailformpro dl dt:first-child+dd{
border : none;
background : none;
}
form#mailformpro dl dt span{
display: block;
font-size: 100%;
padding: 6px 0;
/*color : #3377ff;*/
}
form#mailformpro dl dt span.essential{ /* JavaScriptによってdt内に挿入 */
display : inline;
color : #ff3030;
font-weight : bold;
margin-right : 1em;
}
form#mailformpro dd div{ /* 入力エラーメッセージがJavaScriptによって出現 */
color : #ff0000;
}

form#mailformpro input{
max-width: 90%;
height: 1.6em;
border: 1px solid #cccccc;
border-radius: 3px;
background: #fafafa;
vertical-align: middle;
padding: 15px 10px;
margin: 8px 0px 8px 10px;
}
form#mailformpro input:focus,
form#mailformpro textarea:focus{
box-shadow : 0px 0px 5px #55ccff;
border : 1px solid #55ccff;
background : #ffffff;
}
form#mailformpro input#name_1,
form#mailformpro input#name_2{
width : 90px;
}
form#mailformpro input#read_1,
form#mailformpro input#read_2{
width : 90px;
}
form#mailformpro input#mail_address,
form#mailformpro input#mail_address_confirm{
width : 250px;
}
form#mailformpro ul li{
list-style-type : none;
margin-bottom : 0.5em;
}
form#mailformpro ul li label:hover{
cursor : pointer;
}
form#mailformpro ul li input{
height : auto;
margin-right : 0.5em;
}
form#mailformpro input#postal{
width : 100px;
}
form#mailformpro input#address_1,
form#mailformpro input#address_2{
width : 300px;
display : block;
margin-bottom : 7px;
}
form#mailformpro input#phone{
width : 100px;
}
form#mailformpro textarea#mail_contents{
width : 500px;
height : 200px;
resize : vertical;
border : 1px solid #cccccc;
border-radius : 3px;
background : #fafafa;
}
form#mailformpro input#mail_submit_button{
width : auto;
height : auto;
padding : 4px 10px;
vertical-align : middle;
color : #444444;
background : #eeeeee;
border : 1px solid #cccccc;
border-radius : 3px;
font-family : "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro W3","Hiragino Kaku Gothic Pro",Osaka,"メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",Verdana,Arial,sans-serif;
font-weight : bold;
}
form#mailformpro input#mail_submit_button:hover{
color : #106dff;
background : #e0e0e0;
}
form#mailformpro input#name_0{
width : 180px;
display : block;
margin-bottom : 7px;
}

form#mailformpro .must {
display: block;
background-color: #C00;
padding: 2px 6px;
font-size: 10px;
color: #FFF;
float: left;
margin:0px 10px 0px 0;
border-radius: 4px;
/* box-shadow: 0px 0px 5px #CCC;*/
}
form#mailformpro .nini {
display: block;
background-color: #bcbcbc;
padding: 2px 6px;
font-size: 10px;
color: #FFF;
float: left;
margin:0px 10px 0px 0;
border-radius: 4px;
/* box-shadow: 0px 0px 5px #CCC;*/
}
/*追加*/
.mfp_buttons{
text-align: center;
}
.mfp_buttons button{
width : auto;
height : auto;
padding : 5px 25px;
vertical-align : middle;
color : #444444;
background : #eeeeee;
border : 1px solid #cccccc;
border-radius : 3px;
font-family : "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro W3","Hiragino Kaku Gothic Pro",Osaka,"メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",Verdana,Arial,sans-serif;
font-weight : bold;
}

form#mailformpro input{
margin:0px;
}
form#mailformpro .submit-button button {
height: auto;
border: 1px solid #cccccc;
border-radius: 3px;
color: #fff;
background: #eb6100;
vertical-align: middle;
padding: 1em 3em;
margin: 1em auto;
display: block;
cursor: pointer;
}

form#mailformpro label {
margin: 5px;
white-space: nowrap;
}
form#mailformpro .flex-box-wrap{
width: 100%;
margin: auto;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: space-between;
align-content: flex-start;
align-items: stretch;
flex-direction: row;
justify-content: space-between;
border-top: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
}
form#mailformpro dl {
background: #f9f4eb;
}
form#mailformpro dl dt:first-child+dd {
background: #fff;
}
form#mailformpro dl dd {
background: #fff;
}

form#mailformpro .tel {font-size: 150%; display: block;}
/* ----------------------------------------
【タブレット横】
-------------------------------------------*/
@media screen and (max-width:1024px) {

}

/* ----------------------------------------
【タブレット縦】
-------------------------------------------*/
@media screen and (max-width:768px) {
form#mailformpro dl {
display: grid;
width: 100%;
/* padding: 15px 25px; */
overflow: hidden;

}
form#mailformpro dl dt {
clear: both;
width: 100%;
float: left;
text-align: left;
padding: 0px;
padding: 10px;
background: url(../image/border-shine.png) repeat-x 0 0;
}
form#mailformpro dl dd {
width: 100%;
float: unset;
padding: 10px 0;
padding-bottom: 10px;
border-top: none;
}
}

/* ----------------------------------------
【スマホ】
-------------------------------------------*/
@media screen and (max-width:599px) {

}