@charset "UTF-8";
/* CSS Document */

:root {
  --main-color: #173952;
}

form { }

input,
button,
textarea,
select { font-size:16px; background:#fff; padding:10px; /*border-radius:2px;*/ border:1px solid #ccc;
	box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}


/* UpDownボタン非表示 */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
select::-ms-expand {
	/* ie矢印非表示 */
    display: none;
}

input[type="number"] {
    -moz-appearance:textfield;
}


/*--------------------------------------
	テキストエリア
---------------------------------------*/
textarea {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}


/*--------------------------------------
	ラジオボタン
---------------------------------------*/
/*
.form_radio { }
.form_radio li { 
	display: inline-block;
}
.form_radio input[type=radio] {
	display: none;
	margin: 0;
}
.form_radio input[type=radio] + label {
	position: relative;
	margin-right: 30px;
	padding-left: 30px;
	cursor: pointer;
}
.form_radio input[type=radio] + label::before {
	position: absolute;
	content: '';
	display: block;
	left: 0;
	top: calc(50% - 11px);
	height: 20px;
	width: 20px;
	border-radius: 50%;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	background:#fff;
	border:1px solid #ccc;
}
*/
/* checked */
/*
.form_radio input[type=radio]:checked + label {
	color: var(--main-color);
}
.form_radio input[type=radio]:checked + label::after {
	position: absolute;
	content: '';
	display: block;
	left: 3px;
	top: 2px;
	height: 14px;
	width: 14px;
	background: var(--main-color);
	border-radius: 50%;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
@media screen and (max-width:768px) {
	.form_radio input[type=radio]:checked + label::after {
		top: 0px;
	}
}
*/
/*--------------------------------------
	ラジオボタン　CF7
---------------------------------------*/
.form_radio { }
.form_radio label input[type=radio] {
	display: none;
	margin: 0;
}
.form_radio label span {
	position: relative;
	margin-right: 30px;
	padding-left: 30px;
	cursor: pointer;
}
.form_radio label span::before {
	position: absolute;
	content: '';
	display: block;
	left: 0;
	top:0;
	height: 20px;
	width: 20px;
	border-radius: 50%;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	background:#fff;
	border:1px solid #ccc;
}

/* checked */
.form_radio input[type=radio]:checked + span {
	color: var(--main-color);
}

.form_radio input[type=radio]:checked + span::after {
	position: absolute;
	content: '';
	display: block;
	left: 3px;
	top: 3px;
	height: 14px;
	width: 14px;
	background: var(--main-color);
	border-radius: 50%;	
}


/*--------------------------------------
	チェックボックス
---------------------------------------*/
/*
.form_checkbox { }
.form_checkbox li {
	display:inline-block;
}
.form_checkbox input[type=checkbox] {
	display: none;
	margin: 0;
}
.form_checkbox input[type=checkbox] + label {
	position: relative;
	margin-right: 30px;
	padding-left: 30px;
	cursor: pointer;
}
.form_checkbox input[type=checkbox] + label::before {
	position: absolute;
	content: "";
	display: block;
	left: 0;
	top: 0;
	height: 20px;
	width: 20px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	border-radius:5px;
	background:#fff;
	border:1px solid #ccc;
}
.form_checkbox input[type=checkbox]:checked + label::after {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	content: "";
	display: block;
	position: absolute;
	top: 50%;
}
*/
/* checked */
/*
.form_checkbox input[type=checkbox]:checked + label {
	color: var(--main-color);
}
.form_checkbox input[type=checkbox]:checked + label::after {
	position: absolute;
	content: '';
	display: block;
	left: 5px;
	top: 5px;
	height: 6px;
	width: 10px;
	border-bottom: 2px solid var(--main-color);
	border-left: 2px solid var(--main-color);
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
}
*/
/*--------------------------------------
	チェックボックス　CF7
---------------------------------------*/
.form_checkbox { }
.form_checkbox label input[type=checkbox] {
	display: none;
	margin: 0;
}
.form_checkbox label span {
	position: relative;
	margin-right: 30px;
	padding-left: 30px;
	cursor: pointer;
}
.form_checkbox label span::before {
	position: absolute;
	content: "";
	display: block;
	left: 0;
	top: -2px;
	height: 20px;
	width: 20px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	border-radius:2px;
	background:#fff;
	border:1px solid #ccc;
}
.form_checkbox input[type=checkbox]:checked + span::after {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	content: "";
	display: block;
	position: absolute;
	top: 50%;
}

/* checked */
.form_checkbox input[type=checkbox]:checked + span {
	color: var(--main-color);
}
.form_checkbox input[type=checkbox]:checked + span::after {
	position: absolute;
	content: '';
	display: block;
	left: 5px;
	top: 3px;
	height: 6px;
	width: 10px;
	border-bottom: 2px solid var(--main-color);
	border-left: 2px solid var(--main-color);
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
}


/*--------------------------------------
	プルダウン
---------------------------------------*/
.form_pulldown { 
	display:inline-block;
}

.form_pulldown select {
	outline:none;
    text-indent: 0.01px;
    text-overflow: '';
    background:none transparent;
    vertical-align: middle;
    font-size: inherit;
    color: inherit;
	display:inline-block;
	padding-right:40px;
	background:url("../img/arrow_pulldown.svg") no-repeat center right 8px #fff;
	background-size:14px;
	-moz-appearance:none;
	-webkit-appearance:none;
	appearance:none;
    color: #000;
	border:1px solid #ccc;
}
.form_pulldown select option{
}
.form_pulldown select::-ms-expand {
	display:none;
}
.form_pulldown select:-moz-focusring { 
	color: transparent; 
	text-shadow:0 0 0 #828c9a;
}


/*--------------------------------------
	ファイル選択
---------------------------------------*/
/*
.form_file { }
.form_file label {
	border: 1px solid #ccc;
	border-radius: 30px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	cursor: pointer;
	display:inline-block;
	padding: 10px 50px 10px 20px;
	position:relative;
	background:#fff;
}
.form_file label::before {
	content:"＋";
	color:#ccc;
	font-size:20px;
	line-height:1;
	margin-top: -9px;
	right:10px;
	position:absolute;
	top:50%;
}
.form_file input[type=file] {
  display: none;
}
*/


/*--------------------------------------
	ボタン
---------------------------------------*/
input[type=button],
input[type=submit] {
	
}




/*--------------------------------------
	エラー
---------------------------------------*/
p.error { color:#FF0004; margin-bottom:5px; }










@media screen and (max-width:768px) {
	/*--------------------------------------
		プルダウン
	---------------------------------------*/
	.form_pulldown select { padding-right:25px; }
}




/*  サンプルHTML ******************************************************************
「label for」・「input id」で関連づけ

<form>
  <div class="">
    <input type="text" />
  </div>
    
  <div class="">
    <textarea></textarea>
  </div>

  <ul class="form_radio">
    <li><input type="radio" name="radio_01" id="radio_01_01"><label for="radio01_01">ラジオ01</label></li>
	<li><input type="radio" name="radio_01" id="radio_01_02"><label for="radio01_02">ラジオ02</label></li>
  </ul>
//----- CF7 -----//
  <div class="form_radio">
	<label><input type="radio" name="radio_01" id="radio_01_01"><span>ラジオ01</span></label></li>
	<label><input type="radio" name="radio_01" id="radio_01_02"><span>ラジオ02</span></label></li>
  </div>
//----- CF7 -----//

  <ul class="form_checkbox">
  	<li><input type="checkbox" name="chack_01"><label>Checkbox01</label></li>
	<li><input type="checkbox" name="chack_01"><label>Checkbox02</label></li>
	<li><input type="checkbox" name="chack_01"><label>Checkbox03</label></li>
  </ul>
//----- CF7 -----//
  <div class="form_checkbox">
	<label><input type="checkbox" name="chack_01" value="Checkbox01"><span>Checkbox01</span></label>
	<label><input type="checkbox" name="chack_01" value="Checkbox02"><span>Checkbox02</span></label>
  </div>
//----- CF7 -----//

  <div class="form_pulldown">
      <select>
        <option value="">選択してください</option>
        <option value="test1">test1</option>
        <option value="test2">test2</option>
      </select>
  </div>


 






  <div class="form_file">
    <label for="file_photo">
      画像を選択してください
      <input type="file" id="file_photo">
    </label>
  </div>
</form>

**************************************************************************************** */