@charset "UTF-8";

/*================

　フォーム-PC

==================*/


/*
　共通
==============================*/
input, select {
  background-color: #FFF;
  border: solid 1px #DDD;
  font-size: 15px;
}
input[type="button"],
input[type="submit"] {
  -webkit-appearance: none;
  cursor:pointer;
}
.note {
	font-size:14px;
	line-height:1.75em;
  margin-top: 10px;
}
.note + .note {
	margin-bottom: 9px;
	margin-top: 1px;
}
.note.noteEmphasis {
	color:#C00;
}

/*
　table
==============================*/
table {
	width:100%;
	box-sizing:border-box;
}

/*罫線テーブル*/
table.lineTable th,
table.lineTable td {
	border-bottom: 1px solid #DDD;
	padding: 10px 0;
	text-align: left;
	font-size: 16px;
	line-height: 1.4em;
}
table.lineTable tr:last-child th,
table.lineTable tr:last-child td {
	border-bottom: none;
}
table.lineTable th {
	vertical-align: middle;
}

/*入力テーブル*/
table.formTable th,
table.formTable td {
	padding: 15px 0;
	text-align: left;
	font-size: 14px;
  line-height: 34px;
  border-top: dotted 1px #CCC;
}
table.formTable tr:first-child th,
table.formTable tr:first-child td {
	border-top: none;
}
table.formTable th {
	width:200px;
	vertical-align:top;
}
table.formTable td input + small.pc {
  margin-left: .5em;
  display: inline-block;
}

/*確認テーブル*/
table.confirmTable th,
table.confirmTable td {
	padding: 14px 0;
	text-align: left;
	font-size: 14px;
  line-height: 1.5;
  border-top: dotted 1px #CCC;
}
table.confirmTable tr:first-child th,
table.confirmTable tr:first-child td {
  border-top: none;
  padding: 10px 0 14px;
}
table.confirmTable tr:last-child th,
table.confirmTable tr:last-child td {
  padding: 14px 0 10px;
}
table.confirmTable th {
	width: 200px;
	vertical-align: top;
}

/*
　入力フォーム
===============================*/
/*エラー*/
#efocube_id_v2 dl::after {
  content: "";
  display: block;
  clear: both;
  height: 0;
}
.errorText {
	background: #FFF;
	color: #D90000;
  border: 1px solid;
  border-radius: 7px;
	font-size:14px;
	margin:20px 0;
  padding: 15px;
  line-height: 1.8em;
  text-align: left;
}
#errorHead {
  color: #fff;
  font-weight: bold;
  background: #F65C6F;
  margin: 15px 0;
  padding: 15px;
}
#errorBody ul li {
  color: #F65C6F;
  font-size:16px;
  list-style-type: disc;
  margin: 20px;
  line-height: 1.5em;
}
#errorBody ul li .errorText {
  color: #F65C6F;
  font-size:16px;
}

/*編集系ボタン*/
.btnEdit input {
	display: block;
	border-radius: 5px;
  background-color: #FFF;
  color: #727171;
	border: 1px solid #CCC;
	padding: 8px 30px;
  font-size: 14px;
	letter-spacing: .1em;
	line-height: 1em;
}
.btnEdit.iconEdit {
  display: inline-block;
  vertical-align: 16px;
}
.btnEdit.iconEdit input {
  display: inline-block;
  width: 68px;
  padding: 10px 10px 10px 28px;
  font-size: 14px;
  color: #727171;
  line-height: 1;
  background-color: #FFF;
  background-image: url(../../img/form/iconEdit@2x.png);
  background-repeat: no-repeat;
  background-position: 7px center;
  background-size: 15px 15px;
  border-radius: 5px;
  box-sizing: border-box;
}
.btnEdit input:hover {
  cursor: pointer;
  background-color: #EEE;
}

/*入力フォーム*/
form input:focus,
form select:focus {
	outline:none;
}
form input[type="text"],
form input[type="password"],
form input[type="email"],
form input[type="url"],
form input[type="number"],
form input[type="tel"] {
	padding: 7px 16px;
	font-size: 16px;
  line-height: 1.6;
	background: #FFF;
	border: #CCC 1px solid;
	border-radius: 5px;
	width: 100%;
  line-height: 1;
  vertical-align: bottom;
  box-sizing: border-box;
}
form input.inputName{
	width: 48%;
	margin-right: 16px;
}
/*form input.name1 {
	margin-bottom: 6px;
}*/
form input.inputName:nth-child(2) {
	margin-right: 0;
}
form input.inputPostal {
	width:43%;
}
form input.telephoneNumber {
	width: 43%;
}
input::-webkit-input-placeholder,
input:-ms-input-placeholder,
input::-moz-placeholder {
  color: #999;
}
input[type="text"].readonly {
    background-color: lightgray;
}
form textarea {
	width: 100%;
	padding: 3%;
	font-size: 14px;
  font-family: '游ゴシック  Medium', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', meiryo, sans-serif;
	border: #CCC 1px solid;
	border-radius: 5px;
  resize: vertical;
  box-sizing: border-box;
}
form input.txtCardNo {
  width: 28ex;
  box-sizing: content-box;
}
form input.txtSecurityCode {
  width: 5em;
  box-sizing: content-box;
  float: left;
}

/*チェックボックス・ラジオボタン*/
form .checkNormal input[type="checkbox"] {
  margin-right: 10px;
}
.checkNormal input[type=checkbox],
.radioNormal input[type=radio] {
  display: inline-block;
  margin-right: 6px;
}
.checkNormal input[type=checkbox] + label,
.radioNormal input[type=radio] + label {
  position: relative;
  display: inline-block;
  margin-right: 5px;
  font-size: 14px;
  line-height: 35px;
  cursor: pointer;
}

@media (min-width: 1px) {
  .checkNormal input[type=checkbox] ,
  .radioNormal input[type=radio] {
    display: none;
    margin: 0;
  }
  .checkNormal input[type=checkbox] + label,
	.radioNormal input[type=radio] + label {
    padding: 0 0 0 25px;
  }
  .checkNormal input[type=checkbox] + label::before,
	.radioNormal input[type=radio] + label::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    box-sizing: border-box;
    display: block;
    width: 22px;
    height: 22px;
    margin-top: -11px;
    background: #FFF;
  }
	.radioNormal input[type=radio] + label::before {
    border: 1px solid #ccc;
    border-radius: 30px;
  }
  .checkNormal input[type=checkbox] + label::before {
    border: 1px solid #ccc;
  }
  .checkNormal input[type=checkbox]:checked + label::after,
	.radioNormal input[type=radio]:checked + label::after {
    content: "";
    position: absolute;
    top: 50%;
    box-sizing: border-box;
    display: block;
  }
	.radioNormal input[type=radio]:checked + label::after {
		top:15px;
    left: 4px;
    width: 14px;
    height: 14px;
    margin-top: -4px;
    background: #e66179;
    border-radius: 8px;
  }
  .checkNormal input[type=checkbox]:checked + label::after {
		top: 20px;
    left: 3px;
    width: 16px;
    height: 8px;
    margin-top: -8px;
    border-left: 3px solid #e66179;
    border-bottom: 3px solid #e66179;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
}

/*プルダウン*/
select {
  -moz-appearance: none;
  -webkit-appearance: none;
  -o-appearance: none;
  -ms-appearance: none;
  appearance: none;
  border-radius: 0;
  border: 0;
  margin: 0;
  padding: 0;
  background: none transparent;
  vertical-align: middle;
  font-size: inherit;
  color: inherit;
  box-sizing: content-box;
}
.customSelect {
  overflow: hidden;
  display: inline-block;
  *display: inline;
  *zoom: 1;
  position: relative;
  background-color: white;
  border:1px solid #CCC;
  border-radius: 5px;
}
.customSelect select {
  padding: 8px 30px 8px 8px;
  font-size: 14px;
  line-height: 1.2;
  width: 130%;
}
.customSelect:after {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 1.8em;
  display: block;
  content: "";
  background: url(../../img/form/arrowPulldown.png) no-repeat center;
  pointer-events: none;
}

/*必須アイコン*/
.must {
	font-size:14px;
	line-height:1em;
	color:#e66179;
	padding:2px 4px;
	font-weight:bold;
	margin-left:6px;
  position: relative;
  top: -1px;
}
.must.mustLong {
	font-size:11px;
	line-height:1.8em;
	margin:0;
}

/*小タイトル*/
.titleSmall{
	font-weight:bold;
	margin-top:10px;
}

/*ON OFFボタン*/
@media (min-width: 1px) {/*ie8以下対策*/
	.onoff {
		display: none;
	}
	.onoff + label {
		position:relative;
		display:inline-block;
    -moz-appearance: none;
    -webkit-appearance: none;
    -o-appearance: none;
    -ms-appearance: none;
    appearance: none;
    line-height: 0;
	}
	.onoff + label:before{
	  display: inline-block;
	  padding: 7px 10px;
	  width:60px;
	  height:13px;
	  font-size:13px;
	  line-height:13px;
	  font-weight:bold;
	  overflow: hidden;
	  cursor: pointer;
	  -webkit-border-radius:14px;
	  -moz-border-radius: 14px;
	  border-radius: 14px;
	  color:#FFF;
	  transition: .3s;
	}
	.onoff + label:after {
		position: absolute;
		display: block;
		background: #FFF;
		content: "";
		width: 19px;
		height: 19px;
		-webkit-border-radius:10px;
		-moz-border-radius: 10px;
		border-radius: 10px;
	}
	.onoff + label:before {
	  content: "OFF";
	  text-align:left;
	  background: #CCC;
	  transition: .3s;
	}
	.onoff + label:after {
		position:absolute;
		top:4px;
		right:4px;
	}
	.onoff:checked + label:before {
		content: "ON";
		text-align:right;
		background: #e66179;
		transition: .3s;
	}
	.onoff:checked + label:after {
		position:absolute;
		top:4px;
		left:4px;
	}
}

/*
　アクティブボタン
===============================*/
.btnAction  {
	text-align:center;
	margin:20px 0 0;
}
.btnAction input{
	background:#74A7B8;
  box-shadow: 3px 3px 0px 0px rgba(0,0,0,0.2);
	color:#FFF;
  font-size: 17px;
	letter-spacing:0.1em;
	line-height:1em;
	padding:20px 50px;
	min-width:270px;
  border:none;
}
.btnAction.grayOut input {
	background:#DDD;
	border-bottom:3px solid #CCC;
}
.btnAction input:hover {
  opacity: 0.7;
  filter: alpha(opacity=70);
  -ms-filter: "alpha(opacity=70)";
  -moz-opacity: 0.7;
  -khtml-opacity: 0.7;
  cursor:pointer;
}
.btnAction.grayOut input:hover {
  opacity: 1.0;
  filter: alpha(opacity=100);
  -ms-filter: "alpha(opacity=100)";
  -moz-opacity: 1.0;
  -khtml-opacity: 1.0;
  cursor:default;
}

/*
　ラジオボタン
===============================*/
label.radio {
	position: relative;
	display: inline-block;
	width: 20px;
	height: 20px;
	border: 1px solid #CCC;
  background-color: #FFF;
	border-radius: 100%;
	overflow: hidden;
	cursor: pointer;
}
label.radio:before {
	content: '';
	display: block;
	width: 14px;
	height: 14px;
	border-radius: 100%;
	position: absolute;
	top: 3px;
	left: 3px;
	z-index: 1;
	background-color: #e66179;
}
label.radio input[type="radio"] {
	-moz-appearance: none;
	-webkit-appearance: none;
	margin: 0px;
	position: absolute;
	z-index: 2;
	top: 0;
	left: -20px;
	width: 20px;
  width: auto\9; /* IE10以下 */
	height: 20px;
	display: block;
	box-shadow: 20px 0px #FFF;
}
label.radio input[type="radio"]:checked {
	box-shadow: none;
}

/*
　下部ボタン
===============================*/
.containerButton {
  position: relative;
  margin-top: 40px;
  text-align: center;
  letter-spacing: -.4em;
}
.containerButton .btn {
  display: block;
  width: 270px;
  text-align: center;
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: .05em;
  padding: 22px 0;
}