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

		Mobile first

********************************************* */
/* ==============================================
    form Reset (SP)
    フォーム　パーツ参考サイト
    https://coliss.com/articles/build-websites/operation/css/css3-form-styling-cheat-sheet.html
================================================= */
/* iphone ボタン角丸なし */
* {-webkit-appearance: none;}

input, select {
  vertical-align:middle;
}
input[type="submit"] {
	-webkit-appearance: none !important;
	border-radius: 0 ;
	border: none;
	box-shadow: 0 0 0 0 transparent;
}
input[type="text"],
input[type="email"] {
	padding: 0;
	border: none;
	border-radius: 0;
	outline: none;
	background: none;
	box-sizing: border-box;
}
input[type="radio"]:checked + label {
	background: #ff0000;
}
input[type="checkbox"] {
	display: none;
}
input[type="checkbox"]:checked + label {
	background: #ff0000;
}
select {
	-webkit-appearance: none;
		 -moz-appearance: none;
					appearance: none;
	border: none;
	outline: none;
	background: transparent;
}
textarea {
	-webkit-appearance: none;
		 -moz-appearance: none;
				  appearance: none;
	resize: none;
	padding: 0;
	border: 0;
	outline: none;
	background: transparent;
	box-sizing: border-box;
}
/* IE text マーク削除 */
input::-ms-clear {
  visibility: hidden;
}
/* IE password マーク削除 */
input::-ms-reveal {
  visibility: hidden;
}
/* ==============================================
   form module (SP)
================================================= */
.required {
	display: inline-block;
	padding: .2em .5em;
	margin-left: .5em;
	background: #f00;
	font-size: 1.2rem;
	color: #fff;
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="url"],
textarea {
	width: 100%;
	background: #efefef;
	padding: .6em;
	border-radius: 3px;
	box-sizing: border-box;
	border: none;
	font-size: 1.6rem;
	vertical-align: middle;
}
input::placeholder,
textarea::placeholder {
  color: #bfbfbf;
}
input[type="hidden"],
textarea[type="hidden"],
select[type="hidden"],
.form_preview .required {
	display: none;
}
/*.form_preview 確認画面クラス*/
/* select box
----------------------------------------
--sample html--
<div class="selectbox">
	<select name="">
		<option value="">選択してください</option>
		<option value=""></option>
	</select>
</div>
---------------------------------------- */
.selectbox {
  position:relative;
	width: 170px;
	margin: 0;
}
.selectbox::after{
  content:"";
  display:block;
  width: 5px;
  height: 5px;
  position:absolute;
  right: 10%;
  top: 35%;
  border-bottom:#161617 1px solid;
  border-right:#161617 1px solid;
  transform:rotate(45deg)translateY(-30%);
}
select{
  -webkit-appearance:none;
  				appearance:none;
  width: 95%;
  padding: .5em 1em;
  box-sizing: border-box;
  border: 1px solid #bebebe;
  border-radius: 3px;
  background: #fff;
}
/* check box
----------------------------------------
--sample html--
<label class="checkbox">
	<input type="checkbox" name="" value="">
	<span class="checkboxSpan">文章</span>
</label>
---------------------------------------- */
.checkbox {
	display: inline-block;
	margin-top: .5em;
	font-size: 90%;
}
.checkboxSpan{
  padding-left: 20px;
  position:relative;
  margin-right: 20px;
}
.checkboxSpan::before{
  content: "";
  display: block;
  position: absolute;
  top: 3px;
  left: 0;
  width: 15px;
  height: 15px;
  border: 1px solid #999;
  border-radius: 2px;
}
.checkbox input:checked + .checkboxSpan{
  color: #000;
}
.checkbox input:checked + .checkboxSpan::after{
  content: "";
  display: block;
  position: absolute;
  top: -3px;
  left: 5px;
  width: 7px;
  height: 14px;
  transform: rotate(40deg);
  border-bottom: 2px solid #000;
  border-right: 2px solid #000;
}
/* 送信ボタン
---------------------------------------- */
.form-btn {
	font-family: inherit;
	display: block;
	width: 100%;
	max-width: 300px;
	max-width: 30rem;
	margin: 0 auto;
	box-sizing: border-box;
	padding: 1em 2em;
	background: #000;
	border: 1px solid #000;
	font-size: 14px;
	font-size: 1.4rem;
	color: #fff;
	text-align: center;
  transition: all 0.2s ease-in-out;
}
.form-btn_reset {
	background-color: #ccc;
}
/* radio
---------------------------------------- 
--sample html--
<div class="wrapRadio">
	<label><input type="radio" name="" value="テキスト" class="radio" checked><span>テキスト</span></label>
	<label><input type="radio" name="" value="テキスト" class="radio"><span>テキスト</span></label>
</div>
---------------------------------------- */
.radio {
	display: none;
}
.wrapRadio label{
	position: relative;
	display: inline-block;
	cursor: pointer;
	margin-right: 1em;
}
.wrapRadio span{
	padding-left: 2em;
}
.radio+span::before,
.radio+span::after {
	position: absolute;
	display: block;
	content: '';
	border-radius: 100%;
	transition: all .2s;
}
/* 外枠 */
.radio+span::before {
	top: 50%;
	left: 0;
	width: 16px;
	height: 16px;
	background: #fff;
	border: 1px solid #000;
	transform: translateY(-50%);
}
/* チェックマーク */
.radio+span::after {
	opacity: 0;
	top: 29%;
	left: calc( (18px - 10px) / 2 );/* 18 = befre w + border*/
	width: 10px;
	height: 10px;
	background: #000;
	-webkit-transform: scale(2);
	transform: scale(2);
}
.radio:checked + span::after {
	opacity: 1;
	-webkit-transform: scale(1);
	transform: scale(1);
}

@media screen and (min-width:1025px) {
	/* ==============================================
   form module (PC)
	================================================= */
	.required {
		margin-left: 1em;
	}
	input[type="text"],
	input[type="email"],
	input[type="password"],
	input[type="number"],
	input[type="url"],
	textarea {
		padding: .5em;
		border-radius: .3rem;
	}
	/* 送信ボタン
	---------------------------------------- */
	.form-btn:hover {
		border: 1px solid #000;
		background: #fff;
		color: #000;
	}
	.form-btn:hover.arrow-r::after {
  	border-color: #000;
	}
	.form-btn:hover {
		background: #fff;
		color: #000;
		border: 1px solid #000;
	}
}