/* ▼システムで制御する部分
----------------------------------------------------------------------------- */

/* カラー設定
（1）全体背景色 body  
（2）ヘッダ・フッタ文字色 #cmnmsg, #footer
（3）タイトル文字色 #title
（4）タイトル背景色 #title
（5）フォーム背景色 #enqt, #msg, #err, .a-txt, #submit
（6）メッセージ文字色 #msg
（7）全体エラー文字色・個別エラー背景色（必須アイコン背景色） #er, td #err, td #err:after
（8）表示名称文字色（&ステップのアクティブライン） .q-num, (#step-set ul li.active)
（9）表示名称のアイコン色 .q-num
（10）表示コメント・入力文字色 .a-txt
（11）注意書き・凡例文字色 .ex-txt
（12）表罫線色 .tbl
（13）決定ボタン背景色 #submit input[type="submit"]
（14）リンク文字色 a
 */
 body{
  background-color:#ECF0F1;
 }
 #cmnmsg,
 #footer{
  color:#666666;
 }
 #title{
  background-color:#000000;
  color:#FFFFFF;
 }
 #enqt,
 #submit,
 #err,
 .a-txt{
  background:#FFFFFF;
 }
 #msg{
  color:#666666;
  background-color:#FFFFFF;
 }
 #err{
  color:#CA2424;
 }
 td #err,
 .icn-req{
  background-color:#CA2424;
 }
 td #err:after{
  border-color: transparent transparent #CA2424 transparent;
 }
 .q-txt{
  color:#666666;
 }
 .q-num,
 #step-set ul li.active{
  border-color:#000000;
 }
 .a-txt{
  color:#666666;
 }
 .ex-txt{
  color:#999999;
 }
 .tbl{
  border-color:#DDDDDD;
 }
 #submit input[type="submit"]{
  background-color:#000000;
 }
 a{
  color:#FF0000;
 }
 
 /* ▲システムで制御
 ----------------------------------------------------------------------------- */
 
 
 
 /* レイアウト
 ----------------------------------------------------------------------------- */
 *{
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  line-height: 1.6;
  font-family: "メイリオ", "Hiragino Kaku Gothic Pro", sans-serif, monospace;
 }
 body {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  padding: 0;
 }
 a, a:link, a:visited{
  text-decoration:underline;
 }
 a:hover {
  text-decoration:none;
 }
 form{
  overflow:hidden;
 }
 img {
  border: none;
 }
 
 #container{
  width:100%;
  background-color:transparent;
 }
 
 
 /* 共通ヘッダー */
 #cmnmsg{
  text-align:center;
  margin:0 auto;
 }
 
 /* タイトル */
 #title {
  padding-top:15px;
  padding-bottom:15px;
  overflow: hidden;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-weight: bold;
  font-size:18px;
  margin:0 auto;
  width:100%;
 }
 
 /* メッセージ文 */
 #msg{
  margin:auto;
  padding-top:20px;
  padding-bottom:20px;
 }
 
 /* フォーム入力項目エリア */
 #enqt{
  margin:0 auto;
  border:0;
 }
 #enqt table{
  border-collapse: collapse;
  border-spacing: 0;
  width:100%;
  table-layout: fixed;
 }
 #enqt table td{
  vertical-align:top;
 }
 #enqt table.tbl{/* 1項目 */
  margin:30px 0 0 0;
  border-bottom-width:1px;
  border-bottom-style:solid;
 }
 #enqt td.q-txt{/* 項目タイトル */
  padding:2px 0 2px 4px;
  font-weight: bold;
  word-break:break-all;
 }
 .q-num{
  border-left-width:3px;
  border-left-style:solid;
 }
 
 #enqt td.a-txt{/* 入力・表示エリア */
  padding: 4px 0 32px 0;
  line-height: 1.8;
  border:0;
 }
 #enqt td.a-txt td{
  white-space:normal!important;
 }
 #enqt td.a-txt .a-font{/* checkbox, radio のラベルエリア */
 }
 #enqt td.a-txt .ex-txt{/* 汎用 */
   font-size:14px;
 }
 .a-font{
 }
 
 /* エラーメッセージ */
 #err{
  margin:0 auto;
  padding:5px 0;
  word-wrap: break-word;
 }
 #enqt td #err{
  position: relative;
  top:5px;
  padding: 5px 15px;
  width: auto;
  min-width: 115px;
  height: auto;
  color: #ffffff;
  z-index: 0;
  margin-bottom:10px;
  border-radius: 3px;
 }
 #enqt td #err:after {
  content: "";
  position: absolute;
  top: -10px; left: 25px;
  margin-left: -10px;
  display: block;
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 0 10px 10px 10px;
 }
 #err pre{/* 仮登録エラー画面用 */
  white-space: pre-wrap ; 
  word-break: break-all ;
 }
 
 /* サブミットボタン */
 #submit{
  margin:0 auto;
  padding:30px 0 50px 0;
   text-align:center;
 }
 
 /* 共通フッター */
 #footer{
   text-align:center;
  margin:0 auto;
 }
 
 
 /* 現在使用されていないタグ */
 #headerimg,
 #titleimg,
 #footerimg,
 #header,
 .alert-txt,
 .q-num{
  
 }
 
 /* 手動で設定用 */
 .icn-req{
  margin: 0 0 0 6px;
  padding: 4px;
  color: #ffffff;
  font-size: 70%;
  border-radius: 4px;
  vertical-align: 0.2em;
 }
 .icn-opt{
  margin: 0 0 0 6px;
  padding:4px;
  color: #ffffff;
  font-size: 70%;
  border-radius: 4px;
  vertical-align: 0.2em;
  background: #999999;
 }
 
 #step-set{
  overflow: hidden;
  margin: 0 auto 20px;
  width: 80%;
  max-width: 300px;
  min-width: 240px;
 }
 #step-set ul{
  list-style: none;
  margin:0;
  padding:0;
 }
 #step-set ul li{
  float: left;
  padding: 3px 0;
  width: 33.33333%;
  text-align: center;
  border-bottom: 3px solid #dddddd;
 }
 
 
 /*form input, textarea, select
 ----------------------------------------------------------------------------- */
 /*form reset*/
 #enqt td.a-txt input, .a-txt button, .a-txt textarea, .a-txt select,
 #submit input, #submit button {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  vertical-align:bottom;
  line-height:1;
 }
 
 #enqt td.a-txt input[type="text"], 
 #enqt td.a-txt input[type="password"], 
 #enqt td.a-txt textarea,
 #enqt td.a-txt select {
  margin: 4px;
  padding: 6px;
  height: auto;
  vertical-align:middle;
  outline: none;
  border: 1px solid #cccccc;
  background: #ffffff;
  font-size:100%;
  max-width:100%;
  border-radius:2px;
 }
 #enqt td.a-txt input[type="text"]:focus, 
 #enqt td.a-txt input[type="password"]:focus, 
 #enqt td.a-txt textarea:focus,
 #enqt td.a-txt select:focus{
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  transition: all .5s;
 }
 #enqt td.a-txt select {
   padding:6px 20px 6px 8px;
  background-image:url(/form-user/select.svg);
  background-repeat:no-repeat;
  background-position:right center;
 }
 /* IE9 */
 #enqt td.a-txt select:not(:target){
   padding-right:5px\9;
 }
 /* IE10 */
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  #enqt td.a-txt select {
   padding-right:20px!important;
  }
 }
 /* IE10 */
 #enqt td.a-txt select::-ms-expand {
  display: none;
   
 }
 #enqt td.a-txt input[type="text"]:focus,
 #enqt td.a-txt input[type="password"]:focus,
 #enqt td.a-txt textarea:focus,
 #enqt td.a-txt select:focus {
  box-shadow: 0 0 5px #9fcdfb;
  border: 1px solid #9fcdfb;
 }
 
 /* input type="radio" のみ */
 /* input type="checkbox" のみ */
 #enqt td.a-txt input[type="radio"],
 #enqt td.a-txt input[type="checkbox"]{
  position: relative;
  width:16px;
  height:16px;
  border:1px solid #cccccc;
  background:#ffffff;
  vertical-align:-0.2em;
  margin:auto 4px;
 }
 #enqt td.a-txt input[type="radio"]{
  border-radius:30px;
 }
 #enqt td.a-txt input[type="checkbox"]{
  border-radius:2px;
 }
 
 #enqt td.a-txt input[type="radio"]:checked:after,
 #enqt td.a-txt input[type="checkbox"]:checked:after{
  content: "";
  position: absolute;
  top: 50%;
  left: 2px;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: block;
 }
 
 #enqt td.a-txt input[type="radio"]:checked:after{
  width: 10px;
  height: 10px;
  margin-top: -5px;
  background: #419bf9;
  border-radius: 30px;
 }
 #enqt td.a-txt input[type="checkbox"]:checked:after{
  width: 16px;
  height: 8px;
  margin-top: -8px;
  border-left: 3px solid #419bf9;
  border-bottom: 3px solid #419bf9;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
 }
 
 /* input type="submit" のみ */
 /* ボタン */
 #enqt td.a-txt input[type="submit"],
 #enqt td.a-txt input[type="button"],
 #submit input[type="submit"],
 #submit input[type="button"],
 button.pl-deleteButton{
  overflow:visible;
  cursor: pointer;
  border-radius: 3px;
  padding:12px 10px;
  font-size:14px;
  line-height: 1;
  vertical-align:middle;
 }
 #enqt td.a-txt input[type="submit"],
 #enqt td.a-txt input[type="button"],
 #submit input[type="button"],
 button.pl-deleteButton{
  background: #ddd;
 }
 #err + input[type="button"]{ /* 仮登録エラー画面用 */
  position:relative;
  left:50%;
  width:200px;
  margin:30px 0 30px -100px;
 }
 #enqt td.a-txt input[type="button"]{
  margin: 4px 6px;
 }
 #submit input[type="submit"],
 #submit input[type="button"]{
  padding: 16px 20px;
  height: auto;
  font-size: 24px;
  font-weight: bold;
  margin:0 10px;
 }
 #submit input[type="submit"]{
  color:#ffffff;
 }
 
 /* input type="reset" のみ */
 #submit input[type="reset"] {
  display:none;
 }
 
 /* URL */
 #url{
  text-align:center;
  margin:30px 0;
 }
 
 
 /* responsive PC
 ----------------------------------------------------------------------------- */
 @media screen and (min-width: 769px){
  #title,
  #msg,
  #enqt,
  #submit,
  #err{
   width: 800px;
   padding-left:30px;
   padding-right:30px;
  }
  #cmnmsg,
  #footer{
   width: 800px;
  }
 
  #err #err{ /* 仮登録エラー画面用 */
   padding:30px 0;
   width:auto;
  }
  #enqt table #err{
   width:auto;
  }
  /* label のみ */
  #enqt td.a-txt label{
   padding:3px 0px ;
  }
  #enqt td.a-txt label:first-child{
   padding:0px 0px 3px 0;
  }
  #enqt td.a-txt td{
   padding-right:10px;
  }
 }
 /* responsive tablet
 ----------------------------------------------------------------------------- */
 @media screen and (max-width: 768px){
  #title,
  #msg,
  #err{
   padding-left:6%;
   padding-right:6%;
  }
  #err #err{ /* 仮登録エラー画面用 */
   padding:30px 0;
  }
  #enqt td.a-txt input[type="text"]:before {
       content: "<div>" ;
  }
  #enqt td.a-txt input[type="text"]:after{
     content: "</div>" ;
  }
  #enqt td.a-txt input[type="text"] div, 
  #enqt td.a-txt input[type="password"]
  #enqt td.a-txt select{
   width:auto;
   max-width:100%!important;
  }
  #enqt td.a-txt textarea{
   display:block;
   width:100%;
  }
  #enqt td.q-txt{
   padding: 0 6%;
  }
  #enqt td.a-txt{
   padding: 0 6% 30px 6%;
  }
  #enqt td.a-txt table td{
   display: block
  }
  img{
   max-width:100%;
  }
 }
 /* responsive SP
 ----------------------------------------------------------------------------- */
 @media only screen and (max-width : 640px) {
  #submit{
   padding-left:6%;
   padding-right:6%;
  }
  #submit input[type="submit"],
  #submit input[type="button"]{
   display:block;
   width:100%;
   margin:0 auto;
  }
  #submit input[type="submit"]{
   margin-bottom:20px;
  }
  
  /* label のみ */
  #enqt td.a-txt label{
   display: inline-block;
   padding:5px 0px ;
  }
  
 }