@charset "UTF-8";
@import url('./reset.css');
/*---------------------------
    common
---------------------------*/
.inner{ max-width: 1100px; width:100%; margin: 0 auto; }
ul li { list-style-type: none }
img { vertical-align: bottom;}
input[type="image"]:hover, p.btn:hover a,p.send:hover input[type="submit"], a.calender:hover { filter:alpha(opacity=80); -moz-opacity: 0.8; opacity: 0.8; cursor: pointer}
.txtArea a:hover { text-decoration: none; color: #666666}
.center { text-align: center}
input[type="text"], textarea, select { margin: 0; padding: 0; background: none; border: none; border-radius: 0; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none;}
input[type="submit"] { -webkit-appearance: none; border-radius: 0; vertical-align: middle; text-align: center; background-color: transparent; border: none; cursor: pointer; outline: none; padding: 0; -webkit-box-sizing: content-box; -webkit-appearance: button; appearance: button;}
input[type="submit"]::-webkit-search-decoration, input[type="button"]::-webkit-search-decoration { display: none; }
input[type="submit"]::focus, input[type="button"]::focus { outline-offset: -2px; }
a { color: #2f9cd2; }
a:hover { text-decoration: none}
p.btn a, a.calender { display: inline-block; width: 400px; padding: 20px 0; background: #2f9cd2; font-size: 20px; font-weight: bold; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; color: #fff; text-decoration: none; position: relative;} 
p.btn a::after { content: ''; position: absolute; right: 20px; top: 50%; background: url(../img/ic_arrow.png) no-repeat 0 0; background-size: 8px auto; margin-top: -7px; width: 8px; height: 15px;}
p.send { position: relative; width: 400px; display: inline-block}
p.send input[type="submit"] { padding: 20px 0; background: #2f9cd2; font-size: 20px; font-weight: bold; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; color: #fff; display: inline-block; width: 400px;}
p.send::after { content: ''; position: absolute; right: 20px; top: 50%; background: url(../img/ic_arrow.png) no-repeat 0 0; background-size: 8px auto; margin-top: -7px; width: 8px; height: 15px;}
a.calender { width: auto; padding: 10px 20px; font-size: 16px; font-weight: normal;}
.MB20 { margin-bottom: 20px !important;}
input[type="text"] { margin-right: 5px; border: 1px solid #dedede; padding: 10px; font-size: 14px;}
input.txt_ss { width: 4em}
input.txt_s { width: 6em}
input.txt_m { width: 20em}
input.txt_l { width: 30em}
input.txt_ll { width: 85%}

.dropdown { display: inline-block; position: relative; overflow: hidden; height: 35px; width: 200px; background: #fff; border: 1px solid; border-color: #dedede; vertical-align: middle;}
.dropdown:before, .dropdown:after { content: ''; position: absolute; z-index: 2; top: 11px; right: 10px; width: 0; height: 0; border: 4px dashed; border-color: #4ba9d8 transparent; pointer-events: none;}
.dropdown:before { border-bottom-style: solid; border-top: none; }
.dropdown:after { margin-top: 7px; border-top-style: solid; border-bottom: none;}

.dropdown select { position: relative; width: 130%; margin: 0; padding: 6px 8px 6px 10px; height: 35px; line-height: 14px; font-size: 14px; background: #fff; background: rgba(255, 255, 255, 0) !important; border: 0; border-radius: 0; -webkit-appearance: none; }
.dropdown select:focus { z-index: 3; width: 100%; color: #394349; }
.dropdown select > option { margin: 3px; padding: 6px 8px; text-shadow: none; cursor: pointer; }
.floatBox { zoom: 1; /* float解除 for IE6/7  */ }
.floatBox::after, .floatBox::before { clear:both; content: ""; display: block; }
.floatBox .left { float: left; }
.floatBox .right { float: right; }

/*---------------------------
    body
---------------------------*/
body { font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; line-height: 1.5; font-size: 14px; -webkit-text-size-adjust: 100%; color: #333; background: #ffffff; width: 100%; text-align: left;}
body * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

/*---------------------------
    header
---------------------------*/
header { padding: 20px 0;}

/*---------------------------
    h1
---------------------------*/
h1 { text-align: center; color: #fff; font-size: 28px; padding: 20px 0; background: #2f9cd2}

/*---------------------------
    contents
---------------------------*/
#contents { padding: 40px 0 100px; background: #f5f5f5;}
#flow { overflow: hidden; margin-bottom: 40px;}
#flow li { float: left; width: 130px; text-align: center; background: #999; padding: 10px 0; font-size: 12px; color: #fff; position: relative; min-height: 38px;}
#flow li:not(:last-child)::after { content: ''; position: absolute; width: 0; height: 0; border-style: solid; border-width: 19px 0 19px 15px; border-color: transparent transparent transparent #999; top: 0; right: -15px;}
#flow li:not(:last-child) { margin-right: 30px;}
#flow li.active { background: #2f9cd2}
#flow li.active::after { border-color: transparent transparent transparent #2f9cd2;}

#contents .box { background: #fff; padding: 60px 100px 20px; text-align: center;}
#contents .box h2 { font-size: 24px; margin-bottom: 20px;}
#contents .box h2 span { border-bottom: 1px solid #333;}
#contents .box p { margin-bottom: 60px;}

#contents .box .cautionBox { padding: 40px 40px 20px; overflow: hidden; border: 1px solid #333; margin-bottom: 40px; height: 150px; overflow-y: scroll;}
#contents .box .cautionBox p { margin-bottom: 20px; text-align: left;}
#contents .box form p { margin-bottom: 30px;}

#contents .formBox { margin-bottom: 60px;}
#contents .formBox p { margin-bottom: 10px !important;}
#contents .formBox dl { display: table; width: 100%; padding: 1px 0; border-top: 1px solid #dedede; text-align: left}
#contents .formBox dl:last-child { border-bottom: 1px solid #dedede;}
#contents .formBox dl dt, #contents .formBox dl dd { display: table-cell}
#contents .formBox dl dt { width: 30%; background: #f2f2f2; padding: 20px; font-weight: bold;}
#contents .formBox dl dt span.required, #contents .formBox dl dt span.any { background: #dd133e; font-size: 12px; color: #fff; margin-left: 0.5em; padding: 2px 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; font-weight: normal;}
#contents .formBox dl dt span.any { background: #999;}
#contents .formBox dl dt span.air { background: #fff; color: #2f9cd2; padding: 2px 10px; margin-right: 0.5em; font-size: 12px; font-weight: normal; border: 1px solid #2f9cd2}
#contents .formBox dl dd { width: 70%; padding: 20px;}
#contents .formBox ul.cautionList li { font-size: 12px;}
#contents .formBox ul.cautionList li::before, #contents .formBox span.add::before { content: '※';}
#contents .formBox span.add { margin-left: 1.5em; font-size: 12px;}
#contents .formBox ul.radioList { overflow: hidden;}
#contents .formBox ul.radioList li { float: left; width: 20%;}
#contents .formBox ul.radioList li span { padding-left: 5px; vertical-align: middle;}