@charset "utf-8";

/* --------------------------------------------- */
/* ▼モバイルファースト (全環境に共通のデザイン) */
/* --------------------------------------------- */
#contentsWrap *,
#contentsWrap *:before,
#contentsWrap *:after{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
#contentsWrap{
  color: #333;
}

#contentsWrap a{
  color: #1067b7;
  text-decoration: none;
}
#contentsWrap a:hover{
  color: #ff8410;
}

/* 上部テキストボックス */
#contentsWrap .messageBox{
  width: 100%;
  margin-top: 10px;
  background: #fff;
  padding: 15px 10px;
  font-size: 16px;
  line-height: 26px
}
#contentsWrap .messageBox .attenTxt{
  margin: 5px 0;
  color: #b22222;
  font-size: 18px;
  font-weight: bold;
}
#contentsWrap .messageBox .attenTxt + .message_list{
  margin-top: 10px;
}
#contentsWrap .message_list .list_item{
  position: relative;
  padding-left: 1rem;
  line-height: 1.5;
}
#contentsWrap .message_list .list_item:not(:first-child){
  margin-top: 6px;
}
#contentsWrap .message_list .list_item::before{
  content: "";
  position: absolute;
  top: calc(.5rem - 2px);
  left: calc(.5rem - 4px);
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #333;
  border-radius: 50%;
}

/* 見出し */
#contentsWrap .primary_heading{
  width: 100%;
  background: #fa7418;
  margin-top: 10px;
  padding: 10px;
  color: #fff;
  font-size: 18px;
  font-weight: normal;
}

/* 入力ボックス */
#contentsWrap .contactArea{
  background: #fff;
  padding: 20px 10px;
}

/* 入力テーブル */
#contentsWrap .contactTable{
  width: 100%;
}
#contentsWrap .contactTable th,
#contentsWrap .contactTable td{
  display: block;
  width: 100%;
}
#contentsWrap .contactTable input,
#contentsWrap .contactTable select,
#contentsWrap .contactTable textarea{
  padding: 10px;
  border: 1px solid #666;
  font-size: 18px;
}

/* 選択ボックス見た目 */
#contentsWrap .contactTable .select_box{
  position: relative;
  display: inline-block;
}
#contentsWrap .contactTable .select_box select{
  display: inline-block;
  cursor: pointer;
  padding-right:30px;
  outline: 0;
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  line-height: 1.2;
}
#contentsWrap .contactTable .select_box select::-ms-expand{
  display: none;
}
#contentsWrap .contactTable .select_box-device{
  max-width: 100%;
}
#contentsWrap .contactTable .select_box-device select{
  max-width: 100%;
}

#contentsWrap .contactTable .select_arrow{
  position: absolute;
  top: calc(50% - 2px);
  right: 15px;
  width: 8px;
  height: 8px;
  border: solid #666;
  border-width: 0 2px 2px 0;
  transform: translateY(-50%) rotate(45deg);
  pointer-events: none;
}
#contentsWrap .contactTable .select_box select:hover ~ .select_arrow
.select_box select:focus ~ .select_arrow{
  border-top-color: #666;
}
#contentsWrap .contactTable .select_box select:disabled ~ .select_arrow{
  border-top-color: #666;
}

#contentsWrap .contactTable input,
#contentsWrap .contactTable textarea{
  width: 100%;
}

#contentsWrap .contactTable th{
  font-weight: bold;
}
#contentsWrap .contactTable th > p{
  display: flex;
  align-items: center;
  line-height: 1;
  justify-content: space-between;
}
#contentsWrap .contactTable tr:not(:first-child) th{
  padding-top: 23px;
  margin-top: 23px;
  border-top: 1px solid #ccc;
}

#contentsWrap .contactTable th .txt{
  width:calc(100% - 50px);
}
#contentsWrap .contactTable th .required,
#contentsWrap .contactTable th .option{
  display: inline-block;
  padding: 6px;
  background: #cc0000;
  border-radius: 2px;
  color: #fff;
  font-size: 13px;
  font-weight: normal;
  line-height: 1;
  width:40px;
}
#contentsWrap .contactTable th .option{
  background: #6d6d6d;
}
#contentsWrap .contactTable td{
  padding-top: 10px;
}
#contentsWrap .contactTable .confirmArea th,
#contentsWrap .contactTable .changeArea th{
  background: #fb9abd;
  padding: 10px!important;
  border-top: none!important;
  color: #fff;
  font-weight: normal;
  line-height: 1.5;
}
#contentsWrap .contactTable .changeArea th{
  margin-top: 30px!important;
  background: #44a7dc;
}
#contentsWrap .contactTable  .confirmArea + tr th,
#contentsWrap .contactTable  .changeArea + tr th{
  margin: 0;
  padding-top: 15px;
  border: none;
}

/* ご利用環境 */
#contentsWrap .usage_environment{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
#contentsWrap .usage_environment dt{
  width: 90px;
  padding-right: 5px;
  font-weight: bold;
  text-align: right;
}
#contentsWrap .usage_environment dt:not(:first-child),
#contentsWrap .usage_environment dd:not(:first-of-type){
  margin-top: 10px;
}
#contentsWrap .usage_environment dd{
  width: calc(100% - 90px);
}

/* エラーボックス */
#contentsWrap .error-box{
  margin: 0 0 20px;
}

/* ボタン */
#contentsWrap .btnArea{
  margin: 30px 0 10px;
}
#contentsWrap .btnArea .registerBtn{
  font-size: 18px;
}
#contentsWrap .btnArea a{
  display: inline-block;
  padding: 10px 15px;
  border-radius: 3px;
  font-size: 1rem;
  text-align: center;
  text-decoration: none;
}
.rule_list{
  margin-top:10px;
  padding:5px 10px;
  background:#eee;
  border-radius:3px;
}
.rule_list dl dt{
  font-weight: bold;
  font-size:16px;
}
.rule_list dl dd{
  font-size:14px;
}
.rule_list dl dd:before{
	content:"・";
}

#advise_txt_area{
  font-weight: normal;
}

#advise_txt_area .advise_body{
  font-size: 90%;
  background: #eee;
  border-radius: 4px;
  padding: 8px;
}
#advise_txt_area .advise_body ul{
  list-style-type: disc;
  padding-left:1.2rem;
}
#advise_txt_area .advise_body ul li{
  margin-top: 8px;
}
#advise_txt_area .advise_body ul li:first-child{
  margin-top: 0;
}

/*確認画面*/
#contentsWrap .registArea .btnArea{
  display: flex;
  justify-content: space-between;
}
#contentsWrap .registArea .btnArea a{
  width: calc(50% - 5px);
}
#contentsWrap .contactTable.registTable tr:not(:first-child) th{
  padding-top: 15px;
  margin-top: 15px;
}
#contentsWrap .contactTable.registTable td{
  padding: 10px 10px 0;
}
#contentsWrap .registArea .usage_environment{
  display: flex;
  flex-wrap: wrap;
}
#contentsWrap .registArea .usage_environment dt{
  width: 100px;
}
#contentsWrap .registArea .usage_environment dd{
  width: calc(100% - 100px);
}

/* -------------------------------------------- */
/* ▼タブレット用デザイン */
/* 現状はPCデザイン */
/* -------------------------------------------- */
@media (min-width: 768px) {
  /* 見出し */
  #contentsWrap h1{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width:962px;
    height:50px;
    padding-right: 20px;
    background:url(/home/images/title_contact_list_l.png) no-repeat;
    background-size: 100%;
    text-align: right;
  }
  #contentsWrap .primary_heading{
    margin-top: 20px;
    margin-bottom: 0;
    font-size: 22px;
  }

  /* 上部テキストボックス */
  #contentsWrap .messageBox{
    margin-top: 20px;
    padding: 18px 15px;
  }
  #contentsWrap .messageBox .attenTxt{
    margin: 0;
  }
  #contentsWrap .messageBox .attenTxt + .message_list{
    margin-top: 5px;
  }
  #contentsWrap .message_list .list_item{
    padding-left: 1rem;
    font-size: 17px;
  }
  #contentsWrap .message_list .list_item::before{
    top: .5rem;
    left: calc(.5rem - 3px);
  }

  /* 入力ボックス */
  #contentsWrap .contactArea{
    margin-bottom: 30px;
    padding: 18px 15px;
  }
  #contentsWrap .contactTable{
    font-size: 18px;
  }
  #contentsWrap .contactTable tr:not(:first-child){
    border-top: 1px solid #ccc;
  }

  #contentsWrap .contactTable .confirmArea,
  #contentsWrap .contactTable .confirmArea + tr,
  #contentsWrap .contactTable .changeArea,
  #contentsWrap .contactTable .changeArea + tr{
    border: none!important;
  }

  #contentsWrap .contactTable th,
  #contentsWrap .contactTable td{
    display: table-cell;
    width: auto;
    padding: 22px 6px!important;
    border: none;
  }
  #contentsWrap .contactTable th{
    width: 280px;
    color: #333;
  }
  #contentsWrap .contactTable tr:not(:first-child) th{
    border: none;
  }
  #contentsWrap .contactTable th .required{
    margin-right: 8px;
    font-size: 14px;
    vertical-align: middle;
  }
  #contentsWrap .contactTable tr:first-child th,
  #contentsWrap .contactTable tr:first-child td{
    padding-top: 12px!important;
  }

  /* ご利用環境 */
  #contentsWrap .usage_environment dt{
    font-size: 16px;
  }
  #contentsWrap .registTable .usage_environment dt:not(:first-child),
  #contentsWrap .registTable .usage_environment dd:not(:first-of-type){
    margin-top: 0;
  }

  /* ボタン */
  #contentsWrap .btnArea{
    margin: 25px 0;
    text-align: center;
  }
  #contentsWrap .btnArea .registerBtn{
    padding: 10px;
    font-size: 20px;
  }

  /*確認画面*/
  #contentsWrap .registArea .btnArea{
    justify-content: center;
  }
  #contentsWrap .registArea .btnArea a{
    width: 250px;
  }
  #contentsWrap .registArea .btnArea a + a{
    margin-left: 20px;
  }
}


@media screen and (max-width: 480px) {
  .rule_list{
    padding:10px 20px 7px;
  }
  .rule_list dt{
    margin-bottom:5px;
  }
  #contentsWrap .contactTable th p{
  	line-height: 1.5;
  }
  #contentsWrap .contactTable th p br,
  #contentsWrap .contactTable th br{
  	display: none;
  }
}

#contentsWrap.contact h2.complete_heading {
  width: auto;
  margin: 1.75rem 0 0 0;
  padding: 0;
  background: none;
  box-shadow: none;
  color: #ff8410;
  border: none;
  font-size: 1.75rem;
  text-align: center;
}





/* 20170726追加分 */
/* #contentsWrap.contact .inputArea{
  background: #fff;
  margin-bottom: 20px;
  width: 940px;
  border: 1px solid #ccc;
  padding: 10px;
}

#contentsWrap.contact.contact div.error-box{
  width: 922px;
  margin: 10px auto 20px auto;
}

#contentsWrap.contact h2{
  width: 942px;
  margin: 20px 0 0 0;
  padding: 5px 10px;
  background: #ea731c;
  color: #fff;
  border: none;
  font-size: 16px;
}

#contentsWrap.contact .btnArea a{
  padding: 10px 100px;
  font-size: 120%;
  margin: 0 0 30px 0;
}

#contentsWrap.contact.contact div.messageBox{
  width: 930px;
  border: 1px solid #ccc;
  padding: 10px 10px 10px 20px;
  margin: 25px auto;
  background: #fff;
}

#contentsWrap.contact.contact div.infoBox{
  border:2px solid #dc3214;
  border-radius: 5px;
  padding:10px;
  background:#fff;
}

#contentsWrap.contact.contact .inputArea table{
  width: 918px;
}

#contentsWrap.contact.contact .inputArea table th,
#contentsWrap.contact.contact .inputArea table td{
  border: none;
  padding-bottom: 30px;
  vertical-align: top;
}

#contentsWrap.contact.contact.topMenu table th,
 #contentsWrap.contact.contact.topMenu table td{
  padding-bottom: 4px;
}

#contentsWrap.contact span.required{
  font-size: 12px;
  background-color: #cc0000;
  color: #fff;
  padding: 0 5px 0;
  margin-right: 15px;
  border-radius: 2px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
}

#contentsWrap.contact span.option{
  font-size: 12px;
  background-color: #999;
  color: #fff;
  padding: 2px 5px 0;
  margin-right: 15px;
  border-radius: 2px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
}

#contentsWrap.contact .noteArea{
  margin-left: 50px;
}

#contentsWrap.contact .confirmArea th{
  font-size: 15px;
  font-weight: normal;
  color: #fff;
  background-color: #fb9abd;
  padding-bottom: 6px!important;
}

#contentsWrap.contact .changeArea th{
  font-size: 15px;
  font-weight: normal;
  color: #fff;
  background-color: #44a7dc;
  padding-bottom: 6px!important;
} */

/*確認画面*/

/* #contentsWrap.contact .registArea{
  background: #fff;
  margin-bottom: 20px;
  width: 940px;
  border: 1px solid #ccc;
  padding: 10px;
}

#contentsWrap.contact.contact .registArea table{
  width: 918px;
  margin: 10px auto 30px auto;
}

#contentsWrap.contact.contact .registArea table tr{
  border-bottom: 1px dotted #999;
}

#contentsWrap.contact.contact .registArea table th{
  border: none;
  padding: 0 0px 7px 5px;
  vertical-align: top;
}

#contentsWrap.contact.contact .registArea table tr:not(:first-child) th{
  padding-top: 15px;
}

#contentsWrap.contact.contact .registArea table td{
  border: none;
  vertical-align: top;
}

#contentsWrap.contact.contact .registArea table tr:not(:first-child) td{
  padding-top: 15px;
}

#contentsWrap.contact .registArea .confirmArea th,
#contentsWrap.contact .registArea .changeArea th{
  padding: 6px!important;
} */

/*完了画面*/
/* #contentsWrap.contact .compArea{
  background: #fff;
  border: 1px solid #ccc;
  padding: 20px;
  margin: 20px 0;
}

#contentsWrap.contact .compArea .compInner{
  background: #fff8e8;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border: 1px solid #c3a38c;
  padding: 10px;
  font-size: 120%;
  width: 70%;
  margin: 20px auto 0;
} */


.infoBox{
	background: #fff;
	padding:10px;
	border:1px solid #fa7418;
}
@media (max-width: 768px) {
	.infoBox{
		font-size:.75rem;
	}
}