@charset "UTF-8";

html,
body {
	overflow-x: hidden;
}

/* ===== Colors ===== */
:root {
	--blue: #555555;
	--accent: #555555;
	--accent-dark: #1d4475;
	--grey: #B6B6B6;
	--grey-light: #D8D8D8;
	--bg: #ffffff;
	--field: #F5F5F5;
}


/* 器 */
#contact {
	background: #fff;
	max-width: 600px;
	margin: 0 auto;
	padding: 0 20px;
	text-align: center;
}

/* フォーム全体 */
#contact form {
	width: 100%;
	margin: 0;
}

/* 各フィールド */
#contact .field {
	width: 100%;
	position: relative;
	margin-bottom: 15px;
}

/* ラベル帯 */
#contact .field label {
	position: absolute;
	top: 0;
	left: 0;
	background: var(--blue);
	width: 100%;
	padding: 18px 0;
	font-size: 1.2rem;
	letter-spacing: .08em;
	color: #fff;
	text-transform: uppercase;
	transition: all .33s ease-in-out;
}

/* チェック表示 */
#contact .field .ss-icon {
	opacity: 0;
	color: #fff;
	position: absolute;
	top: 11px;
	left: 7%;
	font-size: 1.6rem;
	text-shadow: 1px 2px 0 var(--accent-dark);
	transition: opacity .33s ease-in-out;
	pointer-events: none;
}

/* 入力欄 */
#contact .field input[type="email"],
#contact .field textarea {
	border: none;
	background: var(--field);
	width: calc(100% - 20% - 1.5%);
	margin: 0;
	padding: 18px 0;
	padding-left: calc(20% + 1.5%);
	color: var(--blue);
	font-size: 1rem;
	letter-spacing: .05em;
	text-transform: uppercase;
	outline: none;
}

/* メッセージ欄 */
#contact .field textarea {
	min-height: 52px;
	resize: vertical;
	transition: padding-bottom .33s ease-in-out;
}

/* ホバー時 */
#contact .field:hover label {
	width: 20%;
	background: var(--blue);
}

/* フォーカス/入力済み */
#contact .field input:focus+label,
#contact .field textarea:focus+label,
#contact .field input.focused+label,
#contact .field textarea.focused+label {
	width: 20%;
	background: var(--accent));
	color: var(--blue);
}

#contact .field input.focused+label,
#contact .field textarea.focused+label {
	color: var(--accent);
}

#contact .field input.focused+label+.ss-icon,
#contact .field textarea.focused+label+.ss-icon {
	opacity: 1;
}

/* メッセージ欄フォーカス時 */
#contact .field textarea:focus {
	padding-bottom: 150px;
}

/* 送信ボタン */
#contact input.button[type="submit"] {
  background: var(--accent);
  color: #fff;
  border: none;
  text-transform: uppercase;
  position: relative;
  padding: 13px 50px;
  font-size: 1rem;
  letter-spacing: .1em;
  cursor: pointer;
  opacity: 0.85;
  transition: opacity .2s ease;
}

#contact input.button[type="submit"]:hover {
  opacity: 1;
}

#contact input.button[type="submit"]:focus {
  outline: none;
  opacity: 0.7;
}

/* ステータス文 */
#form-status {
	margin-top: 12px;
	font-size: .95rem;
	color: #555;
}

/* honeypot 非表示 */
#contact .hp {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* モバイル最適化 */
@media (max-width:640px) {

	#contact .field input[type="email"],
	#contact .field textarea {
		width: calc(100% - 26% - 1.5%);
		padding-left: calc(26% + 1.5%);
	}

	#contact .field:hover label,
	#contact .field input:focus+label,
	#contact .field textarea:focus+label,
	#contact .field input.focused+label,
	#contact .field textarea.focused+label {
		width: 26%;
	}
}