@charset "utf-8";

/* ------------------------------------*/
.ex {
	color: #87361F;
	font-size: 90%;
}

form.ad {
	background: #FFDDCC;
	margin: 0px;
	padding: 5px;
}

form.ad ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

form.ad li {
	padding: 10px;
	background: #FFF6F4;
	margin-bottom: 1px;
}

form.ad label.key {
	position:relative;
	color: #333;
	font-weight: bold;
	padding-left: 1.4em;
}

form.ad label.key:before {
	content: '';
	background-color: #FF6666;
	border-radius: 30px;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	height: 10px;
	width: 10px;
	display: block;
	position: absolute;
	top: 9px;
	left: 7px;
	box-shadow: 0 0 2px 2px rgba(255,255,255,0.2) inset;
	filter: alpha(opacity=50);
	-moz-opacity: 0.50;
	-khtml-opacity: 0.50;
	opacity: 0.50;
	z-index: 1;
}
 
form.ad label.key:after {
	content: '';
	background-color: #FF9999;
	border-radius: 30px;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	height: 15px;
	width: 15px;
	display: block;
	position: absolute;
	top: 2px;
	left: 0px;
	box-shadow: 0 0 2px 2px rgba(255,255,255,0.2) inset
}

form.ad input.txt, 
form.ad textarea {
	padding:2px;
	border:1px solid #ccc;
	vertical-align:middle;
}
form.ad input.txt:focus, 
form.ad textarea:focus {
	border: 1px solid #666;
	vertical-align:middle;
}

input[type="text"], 
input[type="password"], 
textarea, 
select {
	background: #FFF;
	border: 1px solid #CCCCCC;
	padding: 2px;
	margin: 3px 2px;
	vertical-align: middle;
}

input[type="text"]:focus, 
input[type="password"]:focus, 
textarea:focus {
	border: 1px solid #999;
	background: #FFF;
}

input[type="radio"], 
input[type="checkbox"] {
	vertical-align: middle;
}

input[type="radio"], 
input[type="checkbox"],
x:-moz-any-link, x:default {
	margin: 5px 2px;
}

input[type="submit"], 
input[type="reset"], 
input[type="button"] {
	padding: 0.2em 0.6em;
}

/* ボタン */
input[type="submit"], 
input[type="reset"],
input[type="button"],
button {
	border: none;
	font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  overflow: hidden;
  padding: 10px 20px;
  color: #fff;
  border-radius: 0;
  background: #E76C38;
}

.t03a00 { width: 30px }
.t05a00 { width: 40px }
.t10a00 { width: 65px }
.t20a10 { width: 100px }
.t30a20 { width: 160px }
.t50a30 { width: 240px }
.t60a40 { width: 300px }
.t70a50 { width: 370px }
.t85a60 { width: 440px }
.t100a70 { width: 510px }

input.f01 {
	width:17px;
	text-align: center;
}

input.f03 {
	width:30px;
	text-align: center;
}

input.f04 {
	width:45px;
	text-align: center;
}

input.f10 {
	width:60px;
}

input.f15 {
	width:85px;
}

input.f20 {
	width:140px;
}

input.f25 {
	width:180px;
}

input.f30 {
	width:210px;
}

input.f35 {
	width:240px;
}

input.f40 {
	width:280px;
}

input.f50 {
	width:330px;
}

input.f60 {
	width:385px;
}

input.f70 {
	width:450px;
}

textarea.f00 {
  width: 100%;
	max-width:385px;
	height: 5em;
}

textarea.f01 {
	width: 100%;
	max-width:347px;
	height: 3em;
}

textarea.f02 {
	width: 100%;
	max-width:480px;
	height: 5em;
}

textarea.f03 {
	width: 100%;
	max-width:600px;
	height: 10em;
}

textarea.f04 {
	width: 100%;
	max-width:730px;
	height: 5em;
}

textarea.f05 {
	width: 100%;
	max-width:730px;
	height: 10em;
}
textarea.f06 {
	width: 100%;
	max-width:730px;
	height: 20em;
}

/*
*  必須マーク
/* ------------------------------------*/
.form_waku03 {
	border: solid 1px #FFF;
	font-weight: bold;
	padding: 0 0.5em;
	margin-left: 0.2em;
	color: #FFF;
	background: #F96601;
	line-height: 1;
	font-size: 85%;
}

/*
*  
/* ------------------------------------*/
.form_waku04 {
	background: #F00;
	font-weight:bold;
	font-size: 95%;
	padding: 0.1em 0.3em 0;
	margin-left:0.2em;
	color: #FFF;
}

.form_waku04 a {
	color:#FCF;
}
.form_waku04 a:hover {
	color:#FFC;
}

/* デフォルトのスタイルを無効にする */
.add input,
.add select,
.add textarea,
.add button {
  box-shadow: none;
  outline: none;
  border: none;
}

/* テキスト */
.add input,
.add textarea {
	padding: 5px 8px;
	border:1px solid #ccc;
	vertical-align:middle;
	border-radius:3px;
	transition: 0.8s;
	margin: 2px 0;
}

/* テキストエリア */
.add textarea.txtarea01 {
	border:1px solid #ccc;
	width: 98%;
	height: 10em;
	border-radius:3px;
}

/*入力欄にフォーカスしたら変化*/
.add form input:focus,
.add form textarea.txtarea01:focus {
	background: #fff6f6;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* ボタン */
.add input[type="submit"],
.add input[type="button"],
.add button {
	font-size: 20px;
}
.add button {
	border: none;
	background: transparent;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 10px 40px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  border-radius: 0.5rem;
  overflow: hidden;
  color: #fff;
  border-radius: 0;
  background: #FF8888;
}

.add button span {
  position: relative;
}

.add button:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: '';
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  -webkit-transform: translateX(-96%);
  transform: translateX(-96%);
  background: #FFB6B5;
}

.add button:hover:before {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
}

/* セレクトボックス */
.add select {
	padding: 5px 20px 5px 10px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: 1px solid #CCC;
	border-radius: 3px;
	background: #FFF url(../images/icon_arrow.png) right 50% no-repeat;
	background-size: 20px, 100%;
	margin: 0.2em 0;
	max-width: 100% !important;
}
.add select:focus {
  background: #e9f5fb url(../images/icon_arrow.png) right 50% no-repeat;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.add option {
	max-width:8em;
	white-space:normal;
}

/* ラジオボタン */
.radiobox01 input[type="radio"] {
	display: none;
}
.radiobox01 label {
	display: inline-block;
	position: relative;
	cursor: pointer;
	margin-left: 15px;
	padding: 3px 8px;
	line-height: 1.5em;
}
.radiobox01 label:before {
	position: absolute;
	content: "";
	top: 50%;
	left: -14px;
	width: 14px;
	height: 14px;
	margin-top: -10px;
	border: 2px solid #666;
	border-radius: 50%;
}
.radiobox01 input[type="radio"]:disabled + label {
	cursor: default;
}
.radiobox01 input[type="radio"]:disabled + label:before {
  border: 2px solid #146EBE;
	cursor: default;
}
.radiobox01 input[type="radio"]:checked + label:after {
	position: absolute;
	content: "";
	top: 50%;
	left: -10px;
	width: 10px;
	height: 10px;
	margin-top: -6px;
	border-radius: 50%;
	background: #146EBE;
}

/* チェックボックス */
.checkbox01 input[type="checkbox"] {
	display:none;
	cursor: pointer;
} /* to hide the checkbox itself */
.checkbox01 input[type="checkbox"] + label:before {
  font-family: "Font Awesome 6 Pro";
  /*display: inline-block;*/
	font-size: 20px;
	vertical-align: middle;
	position: relative;
	top: -1px;
}

.checkbox01 input[type="checkbox"] + label:before {
	content: "\f096";
	letter-spacing: 5px;
	color: #666;
}
.checkbox01 input[type="checkbox"]:checked + label:before {
	content: "\f14a";
	color: #146EBE;
}
.checkbox01 input[type="checkbox"]:disabled + label {
	cursor: default;
}
.checkbox01 input[type="checkbox"]:disabled + label:before {
	color: #CCC;
	cursor: default;
}
.checkbox01 label:hover {
   cursor: pointer;
}