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

/* カラー設定
（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:#FFFFFF;
}
#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, .icn-req-nodisp-err{
 background-color:#E72916;
}
td #err:after{
 border-color: transparent transparent #CA2424 transparent;
}
.q-txt{
 color:#000000;
}
.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:#000000;
}

/* ▲システムで制御
----------------------------------------------------------------------------- */



/* レイアウト
----------------------------------------------------------------------------- */
*{
 -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;
 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:17px;  /* was 18px */
 margin:0 0 0 0;  /* was 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{
}

/* ラジオボタンを横に並べる */
.radio-group {
  /* display: flex; was there */
  justify-content: flex-start;
  gap: 10px; /* 各ボタン間のスペースを調整 */
}

/* エラーメッセージ */
#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, .icn-req-nodisp-err{
 margin: 0 0 0 6px;
 padding: 4px;
 color: #ffffff;
 font-size: 70%;
 border-radius: 4px;
 vertical-align: 0.2em;
}
#err>.icn-req-nodisp-err{
 display:none;
}

.icn-opt, .icn-opt-nodisp-err{
 margin: 0 0 0 6px;
 padding:4px;
 color: #ffffff;
 font-size: 70%;
 border-radius: 4px;
 vertical-align: 0.2em;
 background: #999999;
}
#err>.icn-opt-nodisp-err{
        display:none;
}

#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;
}

.custom-link {
  color: blue;
  text-decoration: underline;
  cursor: pointer;
}

.custom-link:hover {
  color: darkblue;
}

/*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;
}
#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: 18px;
 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:10px; /* was 30px */
  padding-right:10px; /* was 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:3px 0px;
 }
 #enqt td.a-txt td{
  padding-right:10px;
 }
}
/* responsive tablet
----------------------------------------------------------------------------- */
@media screen and (max-width: 768px){
 #title,
 #msg,
 #err{
  padding-left:2%; /* was 6% */
  padding-right:2%; /* was 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 2%; /* was 0 6% */　　
 }
 #enqt td.a-txt{
  padding: 0 2% 20px 2%; /* was 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 ;
 }
 
}

#err.msg,
#err.alert{
 display: none;
}
#err.msg.visible,
#err.alert.visible{
 display: block;
}
#submit input[type="submit"]:disabled{
 background-color:#ccc;
}