@charset "utf-8";

/* form
----------------------------------------------------------*/

body, form {
     margin:0;
     padding:0;
     border:0;
     outline:0;
     vertical-align:baseline;
     background:transparent;
}

select, input, textarea, button { 
     vertical-align:middle; 
     font-family:"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif; 
     position:relative; 
     margin: 0 4px 2px 0;
     *margin-right:3px; 
     top:-1px;  
}

input { 
     height: 16px; 
     line-height: 16px; 
}

button, input[type="button"] {
     overflow:visible; 
     height:22px;
     padding:0 3px;
}

select { 
     height: 20px; 
     line-height: 20px;
}

input[type="checkbox"],
input[type="radio"] { 
     border:none; 
     top:-2px;
     top:0\9;
     margin-right:2px; 
     margin-right: 0\9; 
}

input.r_box {
   width: 1.3em;
   height: 1.3em;
}


.d_form{
	text-align:center;
	padding:5px 0px;
}

.form01{
	width:75%;	
	margin: 30px auto;
	text-align: center;
	border-radius: 5px;
	background: #fff;
	padding: 20px 0;
	box-shadow: 1px 1px 1px 1px #666;
}

.form01 dt{
  display: block;
  padding:5px 0;
  text-align:center;
}

.form01 dd{
  width:100%;
  display: block;
  text-align:center;  
}

.form-item {
  width: 100%;
}

.form-item input {
  width: 75%;
  border: none;
  border: 1px solid #333;
  color: #333;
  height: 30px;
  transition: border-color 0.3s;
  border-radius: 3px;
}

.form01 p {
text-align: center;
padding: 30px 0;
}



/* ▼IE10・IE11用 */
:-ms-input-placeholder {
   color: #AAAAAA;
}

/* ▼Chrome・Safari・Opera用(※Edgeにも使える) */
::-webkit-input-placeholder {
   color: #AAAAAA;
}

/* ▼Firefox18以前用 */
:-moz-placeholder {
   color: #AAAAAA;
}
/* ▼Firefox19以上用 */
::-moz-placeholder {
   color: #AAAAAA; opacity: 1;
}

/* ▼CSS標準(予定)の記述 */
:placeholder-shown {
   color: #AAAAAA;
}

.form01{
	width:75%;	
	margin: 30px auto;
	text-align: center;
	border-radius: 5px;
	background: #fff;
	padding: 20px 0;
	box-shadow: 1px 1px 1px 1px #666;
	box-sizing:border-box;
}

.form01 dt{
  display: block;
  padding:5px 0;
  text-align:center;
  
}

.form01 dd{
  width:100%;
  display: block;
  text-align:center;
  margin-bottom:10px; 
}

.form02{
	width:750px;	
	margin: 15px auto;
	text-align: center;
	box-sizing:border-box;
}


form select{
	width:90%;
	max-width : 90%;
	font-size : 100%;
	font-family : inherit;
	height : 2.5em;
	box-sizing:border-box;
}

input[type="text"]{
	width:90%;
	max-width : 90%;
	font-size : 100%;
	font-family :inherit;
	height : 2.5em;
	padding : 2px 2%;
	box-sizing:border-box;
}


table textarea,
table input[type="text"],
table input[type="password"] {
  border: 1px solid #A6A1A1;
  outline: 0;
}

table input[type="text"]:focus,
table input[type="password"]:focus {
  	 border : 1px solid #55ccff;
 	 outline: 0;
	 box-shadow : 0px 0px 5px #55ccff;
}

/* box_foam */

form.box_form{
	width:100%;	
	margin: 30px auto;
	border-radius: 5px;
	/*background: #fff;*/
	padding: 10px 0;
	box-sizing:border-box;
}

form.button_form,
form.box_form{
	margin:15px auto;
	margin-bottom:15px;
	box-sizing:border-box;
}

form.box_form input[type="password"],
form.box_form input[type="time"],
form.box_form input[type="text"],
form.box_form input[type="email"],
form.box_form input[type="tel"],
form.box_form input[type="fax"],
form.box_form input[type="datetime-local"],
form.box_form input[type=number]{
	max-width : 90%;
	height : 2.5em;
	padding : 2px 2%;
	border : 1px solid #ccc;
	border-radius : 3px;
	background : #fafafa;
	-webkit-appearance : none;
	font-size : 100%;
	font-family : inherit;	
}

form.box_form input[type="password"]:focus,
form.box_form input[type="time"]:focus,
form.box_form input[type="text"]:focus,
form.box_form input[type="email"]:focus,
form.box_form input[type="tel"]:focus,
form.box_form input[type="fax"]:focus,
form.box_form input[type="datetime-local"]:focus,
form.box_form textarea:focus{
	box-shadow : 0px 0px 5px #55ccff;
	border : 1px solid #55ccff;
	background : #ffffff;
}

form.box_form ul li input[type="checkbox"]{
	margin-right : 10px;
	margin-top : 7px;
}

form.box_form ul li input[type="radio"]{
	margin-right : 10px;
}

form.box_form li:first-child input[type="radio"],
form.box_form li:first-child input[type="checkbox"]{
	margin-top : 0px;
}

form.box_form ul{
	list-style-type : none;
	display:table;
}

form.box_form ul li{
	list-style-type : none;
	display:table-cell;
	vertical-align:middle;
}

form.box_form ul li label:hover{
	cursor : pointer;
}

span.requirement {
	display: inline !important;
	color: #CC0000 !important;
	font-size:80%;
	
}

form.box_form input[type=file]{
	max-width : 90%;
	height : 2em;
	padding : 2px 2%;
	font-size : 100%;
	font-family : inherit;	
}

form.box_form select{
	max-width : 300px;
	font-size : 100%;
	font-family : inherit;
		
}


form.box_form textarea{
	display : block;
	width : 90%;	
	height : 150px;
	padding :2px;
	resize : vertical;
	border : 1px solid #cccccc;
	border-radius : 3px;
	background : #fafafa;
	-webkit-appearance : none;
	font-size : 100%;
	font-family : inherit;
}

/* kousa7 radio
----------------------------------------------------------*/

.inline-radio {
  display: -webkit-box;
  display: flex;
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid #b6b6b6;
}
.inline-radio div {
  position: relative;
  -webkit-box-flex: 1;
  flex: 1;
}
.inline-radio input {
  width: 100%;
  height: 40px;
  /* opacity: 0; */
}
.inline-radio label {
  position: absolute;
  top: 0;
  left: 0;
  color: #b6b6b6;
  width: 100%;
  height: 100%;
  background: #fff;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
  pointer-events: none;
  border-right: 1px solid #b6b6b6;
}
.inline-radio div:last-child label {
  border-right: 0;
}
.inline-radio input:checked + label {
  background: #d81b60;
  font-weight: bold;
  color: #fff;
}



/* collar
----------------------------------------------------------*/
.BC-B01{background:#25a4b7; color:#fff;}
.BC-B02{background:#6276b5; color:#fff;}
.BC-B03{background:#1d4293; color:#fff;}
.BC-B04{background:#b2bfe1; color:#fff;}
.BC-G01{background:#6aa43e; color:#fff;}

.BC-K01{background:#CC7000; color:#fff;}
.BC-K02{background:#005CCC; color:#fff;}
.BC-K03{background:#CC005C; color:#fff;}
.BC-K04{background:#999; color:#fff;}


/* margin
----------------------------------------------------------*/
/* Top */
.MG-T0 { margin-top: 0 !important; }
.MG-T5 { margin-top: 5px !important; }
.MG-T10 { margin-top: 10px !important; }
.MG-T15 { margin-top: 15px !important; }
.MG-T20 { margin-top: 20px !important; }
.MG-T25 { margin-top: 25px !important; }
.MG-T30 { margin-top: 30px !important; }
/* Bottom */
.MG-B0 { margin-bottom: 0 !important; }
.MG-B5 { margin-bottom: 5px !important; }
.MG-B10 { margin-bottom: 10px !important; }
.MG-B15 { margin-bottom: 15px !important; }
.MG-B20 { margin-bottom: 20px !important; }
.MG-B25 { margin-bottom: 25px !important; }
.MG-B30 { margin-bottom: 30px !important; }

/* padding
----------------------------------------------------------*/
/* Left */
.PD-L5 { padding-left: 5px !important; }
.PD-L10 { padding-left: 10px !important; }
.PD-L15 { padding-left: 15px !important; }
.PD-L20 { padding-left: 20px !important; }
.PD-L25 { padding-left: 25px !important; }
.PD-L30 { padding-left: 30px !important; }
/* Right */
.PD-R5 { padding-right: 5px !important; }
.PD-R10 { padding-right: 10px !important; }
.PD-R15 { padding-right: 15px !important; }
.PD-R20 { padding-right: 20px !important; }
.PD-R25 { padding-right: 25px !important; }

/* fontsize
----------------------------------------------------------*/
.FS_SL{font-size: 90%;}
.FS_SM{font-size: 80%;}
.FS_SS{font-size: 70%;}


/*================================================
 *  タブレット向けデザイン
 ================================================*/
/* スクロールバーを考慮して20px大きいサイズで切り替え */
@media screen and (max-width:979px) {
/* box_foam */
.form01{
	width:100%;	
	margin: 15px auto;
	padding: 0px;
	box-sizing:border-box;

}

.form02{
	width:100%;	
	margin: 15px auto;
	padding: 0px;
	box-sizing:border-box;
}

}

/*================================================
 *  スマートフォン向けデザイン
 ================================================*/
@media screen and (max-width:767px) {

/* box_foam */
form.box_form ul{
	list-style-type : none;
	display:block;
}

form.box_form ul li{
	list-style-type : none;
	display:block;
	vertical-align:middle;
}



form.box_form ul{
	list-style-type : none;
	display:block;
}

form.box_form ul li{
	list-style-type : none;
	display:block;
	vertical-align:middle;
}

form.box_form{
	width:100%;	
	margin: 20px auto;
	border-radius: 5px;
	background: #fff;
	padding: 10px 0;
	box-sizing:border-box;
}


}


.clearfix:after {
    content: "";
    display: block;
    clear: both;
}