@charset "UTF-8";
/*
 * form.css
 *
 */

/*フォーム--------------------------------------*/
.contact__value {
    position: relative;
}

.c-label {
	display:inline-block;
	padding:1px 5px;
	background-color:var(--color-blue);
	font-size:10px;
	font-weight: var(--font-weight-bold);
	color: #FFF;
	border-radius: 3px;
	margin-left:7px;
}

input.norm {
	width:100%;
	background:#FFF;
	border:1px solid #D4CFBD;
	border-radius: 4px;
	padding:0.8em 0.8em;
}

input.short {
	width:50%;
	background:#FFF;
	border:1px solid #D4CFBD;
	border-radius: 4px;
	padding:0.8em 0.8em;
}

input.exshort {
	width:30%;
	background:#FFF;
	border:1px solid #D4CFBD;
	border-radius: 4px;
	padding:0.8em 0.8em;
}

select {
	border:1px solid #D4CFBD;
	border-radius: 4px;
	padding:0.8em 0.8em;
}
	select option{
		margin-bottom:5px;
	}

textarea.norm {
	width:100%;
	height:160px;
	background:#FFF;
	border:1px solid #D4CFBD;
	border-radius: 4px;
	padding:0.5em 0.8em;
}

label.check {
	display:inline-block;
	padding:0.8em 0.8em;
	background:#FFF;
	border:1px solid #D4CFBD;
	border-radius: 4px;
	cursor: pointer;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
label.check:not(:last-child) {
	margin-bottom: 8px;
}

label.check:has(input:focus) {
    border-color: var(--color-blue); /* 枠線を青に */
}

/* マウスを載せたとき、またはクリックしてアクティブになったとき */
label.check:hover,
label.check:has(input:focus) {
    border-color: var(--color-blue);
}

/* 中のチェックボックス自体にブラウザが強制的につける黒い枠線を消す */
label.check input[type="checkbox"] {
    outline: none;
}

input.btn_back {
	font-size:18px;
	font-weight: 700;
	background:var(--base-font-color);
	padding:1.4em 3em;
	color:#FFF;
	border-radius: 40px;
	transition: all 0.6s ease;
}
	input.btn_back:hover {
		opacity:0.7;
	}

.form__privacy {
	width:100%;
	padding: 1.2em 1em;
}

input.btn_submit {
    padding:1.4em 3em;
    font-size:18px;
    font-weight: 700;
    background:var(--color-blue);
    color:#FFF;
    border-radius: 40px;
    border: none; /* 枠線をリセット */
    cursor: pointer; /* 押せるときはポインター表示 */
    transition: all 0.6s ease;
}
input.btn_submit:hover:not(:disabled) {
    opacity:0.7;
}

/* 送信ボタンが非活性（disabled）のときのスタイルを指定 */
input.btn_submit:disabled {
    background-color: #bbbbbb !important; /* ボタンをグレーアウト */
    color: #ffffff !important;
    opacity: 0.6;
    cursor: not-allowed; /* マウスを載せたときに「禁止マーク」に変える */
    transform: none !important;
}

/* まとめて指定できるように対象のクラスへ共通のスタイルを追加 */
input.norm, input.short, input.exshort, textarea.norm, select {
    transition: border-color 0.3s ease; /* 変化を滑らかにする設定 */
    outline: none; /* ブラウザ標準の黒い太枠を消す */
}

/* アクティブ（フォーカス）になった時の効果 */
input.norm:focus, input.short:focus, input.exshort:focus, textarea.norm:focus, select:focus {
    border-color: var(--color-blue); 
}

/* ユーザーが一度入力欄を触り（:placeholder-shownではない状態）、
   かつ形式が間違っている（:invalid）ときに、枠線を赤くして警告する */
input:not(:placeholder-shown):invalid,
textarea:not(:placeholder-shown):invalid {
    border-color: #ff4d4f !important; /* 警告の赤色 */
    background-color: #fffbfa;         /* ほんのり赤みのある背景 */
}

::placeholder {
    color: #ACB6BC;
    opacity: 1;
}

@media screen and (max-width:1039px){
label.check {
	display:block;
	margin-bottom:10px;
}
label.check:last-child {
	margin-bottom:0;
}

label.check:hover {
    border-color: #D4CFBD;
}

input.btn_submit:hover:not(:disabled) {
    opacity:1;
}

input.btn_back {
	transition: none;
}
	input.btn_back:hover {
		opacity:1;
	}
}

@media screen and (max-width:767px){
input.norm {
	width:100%;
}

input.short {
	width:70%;
}

input.exshort {
	width:50%;
}

label.check {
	width:100%;
}

textarea.norm {
	width:100%;
}

.form__privacy {
	width:100%;
	padding: 15px 0;
}

input.btn_submit {
	padding:1.4em 1.8em;
	font-size:15px;
}

input.btn_back {
	padding:1.4em 1.8em;
	font-size:15px;
}
}

@media screen and (max-width:360px){
input.btn_submit {
	padding:1.4em 1.2em;
	font-size:14px;
}

input.btn_back {
	padding:1.4em 1.2em;
	font-size:14px;
}
}