@charset "utf-8";

/* -------------------------------------------------------------*/
/* SiteName : KOURINKENSETSU */
/* FileName : contents.css */
/* Add Day : 2020/03/17(Tue) */
/* Udt Day : 2020/03/17(Tue) */
/* Copyright : ZENEI-PRO */
/* == TOC ======================================================*/
/* 1 : */
/*--------------------------------------------------------------*/

/* ------------ 主要ブラウザのベンダープレフィックス */
/* -moz-     …… Firefox */
/* -webkit-  …… Chrome、Safari */
/* -o-       …… Opera */
/* -ms-      …… IE8～ */
/* ベンダープレフィックス指定無しも明記 */

/*--------------------------------------------------------------*/
/* form装飾 */
/*--------------------------------------------------------------*/
button, input, select, textarea{
	font-size: 1.6rem;
	font-family: 'Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
	border: 1px solid #999;
	color: #333;
	background: #fff;
}
button, input[type="button"], input[type="reset"], input[type="submit"]{
	width: 100%;
	border: 0;
	padding: 0.5em 1em;
	cursor: pointer;
}
input[type="text"], input[type="search"], input[type="password"], input[type="date"], textarea{
	width: 100%;
	padding: 0.3em;
}
input[type="text"]:focus, input[type="search"]:focus, input[type="password"]:focus, input[type="date"]:focus, textarea:focus, select:focus{
	border: 1px solid #967a55;
	transition: .4s;
}
select{
	width: 100%;
	padding: 0.3em;
	background: url(../img/select_b.png) right 50% no-repeat, #fff;
	background-size: 25px, 100%;
	cursor: pointer;
}
select::-ms-expand{ /* IE 10+ */
	display: none;
}
::-webkit-input-placeholder{ /* Chrome/Opera/Safari */
	color: #aaa;
}
:-moz-placeholder{ /* Firefox 18- */
	color: #aaa;
}
::-moz-placeholder{ /* Firefox 19+ */
	color: #aaa;
	opacity: 1;
}
:-ms-input-placeholder{ /* IE 10+ */
	color: #aaa;
}

.radio{
	font-size: 0; /* inline-block対策 */
}
.check{
	font-size: 0; /* inline-block対策 */
}
input[type="radio"]{
	display: none;
}
input[type="checkbox"]{
	display: none;
}
.control{
	display: inline-block;
	position: relative;
	margin-left: 1em;
	padding-left: 2em;
	cursor: pointer;
	font-size: 1.6rem;
}
.control:first-child{
	margin-left: 0;
}
.control input{
	position: absolute;
	z-index: -1;
	opacity: 0;
}
.control__indicator{
	position: absolute;
	top: 2px;
	left: 0;
	height: 20px;
	width: 20px;
	background: #c7c7c7;
}
.control--radio .control__indicator{
	border-radius: 50%;
}
.control:hover input ~ .control__indicator,
.control input:focus ~ .control__indicator{
	background: #ccc;
}
.control input:checked ~ .control__indicator{
	background: #333;
}
.control:hover input:not([disabled]):checked ~ .control__indicator,
.control input:checked:focus ~ .control__indicator{
	background: #666;
}
.control input:disabled ~ .control__indicator{
	background: #e6e6e6;
	opacity: 0.6;
	pointer-events: none;
}
.control__indicator:after{
	content: '';
	position: absolute;
	display: none;
}
.control input:checked ~ .control__indicator:after{
	display: block;
}
.control--checkbox .control__indicator:after{
	left: 8px;
	top: 4px;
	width: 5px;
	height: 8px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(30deg);
}
.control--checkbox input:disabled ~ .control__indicator:after{
	border-color: #7b7b7b;
}
.control--radio .control__indicator:after{
	left: 7px;
	top: 7px;
	height: 6px;
	width: 6px;
	border-radius: 50%;
	background: #fff;
}
.control--radio input:disabled ~ .control__indicator:after{
	background: #7b7b7b;
}