/* ===================================
基本設定
=================================== */
html{  overflow-y:scroll; }
li {  list-style: none; }

/* ===================================
共通
=================================== */
/* フォント */


/* ===================================
画面全体のレイアウト
=================================== */
/* 画面全体の表示設定 */


/* フォームエリア全体の設定 */
div.container {
  width:100%;  /* 画面の横幅 */
  background:white;  /* 背景色 */
  border:Gainsboro 0px solid;  border-top:none;  /* 外枠のラインの色と太さ */
  font-size:14px;  /* フォントの初期サイズ */
  color:#333;  /* フォントの初期カラー */
  margin:0 auto;  /* 画面の中央に表示 */
  text-align:left;  /* 左寄せ */
}

/* ===================================
設問エリアのレイアウト
=================================== */
/* 設問エリア全体の設定 */
div.wrapper {
  width:100%;  /* 画面の横幅 */
  margin:0 auto;  /* 中央に表示 */
  background:white;
}

/* 設問の表 */
table.items {
  border:Gainsboro 0px solid;
}

/* 設問の行 */
tr.item { } /* 必要であれば行のデザインを設定することができます */

/*設問名のセルのデザイン */
td.label {
  width:150px;  /* 実際の設問名の文字の長さに合わせて調整してください */
  padding:4px 0 4px 5px;
  color:#224;
  font-size:13px;
  font-weight:bold;
  vertical-align:middle;  /* ラベルの配置 セルの上部に表示したい場合は top */
  background:GhostWhite;
}
/* 設問の入力セルおよび表示セルのデザイン */
td.value {
  width:400px;  /* 入力コントロールの幅に合わせて調整してください */
  padding:3px 3px 0 3px;
  border-bottom:GhostWhite 1px solid;  /* 設問と設問の間の下線 */
  background:White;
}
/* 設問の入力例/説明セルのデザイン */
td.comment {
  font-size:12px;
  padding-left:10px;
  color:DarkSlateGray;
  border-bottom:GhostWhite 1px solid;
  background:White;
}

/* 入力セルの「氏」「名」の文字のデザイン */
span.label_name {
  padding-right:5px;
  font-size:85%;
  font-weight:bold;
  color:DarkSlateGray;
}

/* 入力確認画面、完了画面の入力された文字のデザイン */
p.value {
  font-size:110%;
}

/* ボタンの表示エリアの設定 */
div.button_area {
  width:100%;
  margin:10px auto 10px auto;  /* 中央に表示、上下に10pxの余白 */
  background:none;
  padding:10px 0 10px 0;  /* ボタンとの上下の隙間のサイズ */
  text-align:center;  /* 中央にボタンを表示 */
}

/* 入力エラーメッセージのデザイン */
div.message {
  padding:5px 10px 5px 10px;  /* メッセージテキストと背景色の隙間のサイズ */
  margin:10px 13px 10px 13px; /* 上 右 下 左 の隙間のサイズ */
  font-size:14px;
  font-weight:bold;
  color:OrangeRed;
  background:LightYellow;
}

/* 公開終了メッセージのデザイン */
div.finished-message {
  padding:5px 10px 5px 10px;  /* メッセージテキストと背景色の隙間のサイズ */
  margin:10px 13px 10px 13px; /* 上 右 下 左 の隙間のサイズ */
  font-size:14px;
  font-weight:bold;
  color:Crimson;
  background:MistyRose;
}

/* ===================================
入力コントロールのデザイン
=================================== */
/* 確認／送信／戻る／登録ボタン */
input[type=button] {
  font-size:18px;
  background:SteelBlue;  /* ボタンの色 */
  padding:5px 10px 8px 10px;  /* ボタンの文字の 上 右 下 左 の隙間のサイズ */
  margin:0px 10px 0px 10px;  /* 確認画面に表示される2つのボタンの左右の余白サイズ */
  border:none;  /* ボタンに枠線をつけたい場合は、ここを設定してください */
  color:white;  /* 文字の色 */
  font-weight:bold;
}
input[type=button]:hover { cursor: pointer; }

/* 入力中のフィールドの背景色 */
/* それぞれの入力フィールドにカーソルが移動したときに背景の色が変わります。不要な場合は削除してください。 */
input[type="text"]:focus {  background-color:LightYellow; }  /* テキストボックス */
select:focus {  background-color:LightYellow; }  /* プルダウン */
textarea:focus {  background-color:LightYellow; }  /* テキストエリア */

/* ===================================
必須項目のマークおよびメッセージなど
=================================== */
/* 必須項目のマーク */
span.required {
  float:right;
  margin-right:4px;
  font-size:60%;
  font-weight:bold;
  color:OrangeRed;
}
span.required:after {
  /* ここを編集することで表示されるマークを変更できます */
  content:"※必須";
}
/* 必須項目についての説明文 */
p.required_msg {
  text-align:right;
  margin-right:4px;
  font-size:80%;
  font-weight:bold;
  color:OrangeRed;
}
p.required_msg:after {
  /* ここを編集することで表示されるマークを変更できます */
  content:"「※必須」となっている項目は必ず入力してください。";
}

/* メールアドレスの再入力メッセージ */
p.label_mail {
  margin:5px 0 1px 0;
  font-size:85%;
  font-weight:bold;
  color:DarkSlateGray;
}
p.label_mail:after {
  /* ここを編集することで表示されるメッセージを変更できます */
  content:"確認のため、もう一度メールアドレスを入力してください";
}

/* ===================================
スマートフォン表示用のレイアウト
=================================== */
/* スマートフォンとして認識する画面の横幅のサイズ */
@media screen and ( max-width:479px ) {
  /* フォームエリア全体の設定 */
  div.container {
    width: 100%;
  }
  /* 設問エリア全体の設定 */
  div.wrapper {
    width: 100%;
  }
  /* 設問の表 */
  table.items {
    width: 100%;
  }
  /*設問名のセルのデザイン */
  td.label {
    float: left;
    width: 100%;
    height: 50px;
    padding-top:10px;
  }
  /* 必須項目のマーク */
  span.required {
    float:initial;
  }
  /* 設問の入力セルおよび表示セルのデザイン */
  td.value {
    float: left;
    width: 100%;  /* 入力コントロールの幅に合わせて調整してください */
    padding-bottom: 0px;
  }
  /* 設問の入力例/説明セルのデザイン */
  td.comment {
    float: left;
    width: 95%;
    padding: 0px 2px 10px 2px;
  }
  /* 設問の入力例/テキストボックス */
  input[type="text"]{
    font-size: 120%;
    width: 95% !important;
  }
  /* 設問の入力例/テキストエリア */
  textarea {
    width: 95%;
    height: 100px;
  }
  /* ボタンの表示エリアの設定 */
  div.button_area {
    width: 95%;
  }
}

/* Add */
.text-right {
text-align: right !important;
}
.mb10 {
margin-bottom:10px !important;
}
.left0 {
left:calc(30% + 1.00rem) !important;
}
.kvArea a {
    color: #0088cf;
    text-decoration: underline;
}

.formArea #onlinemeet_url {
    color: #0088cf;
    text-decoration: underline
}