@charset "utf-8";

/* =========================================================
お問い合わせフォーム
========================================================= */

.contact-form-block {
width: 100%;
}

/* フォーム全体
---------------------------------------------------------------------------*/

.contact-form-inner {
width: 100%;
max-width: 900px;
margin: 0 auto;
}

/* フォームタイトル
---------------------------------------------------------------------------*/

/* .contact-form-inner h2 {
/* margin-bottom: 2rem;
/* }

/* フォーム説明
---------------------------------------------------------------------------*/

/* .contact-form-intro {
/* margin: 0 0 3rem;
/* text-align: center;
/* line-height: 2;
/* }

/* Formrun
---------------------------------------------------------------------------*/

.formrun-wrapper {
width: 100%;
max-width: 760px;
margin: 0 auto;
}

/* Formrun埋め込み本体 */

.formrun-embed {
width: 100%;
max-width: 100%;
margin: 0 auto;
}

/*

Formrunが生成するフォームがiframeの場合に対応。

iframeそのものはサイト幅に合わせる。
*/

.formrun-embed iframe {
display: block;
width: 100% !important;
max-width: 100% !important;
border: 0;
}

/* Formrunのフォームが直接HTMLとして生成された場合
---------------------------------------------------------------------------*/

.formrun-wrapper input[type="text"],
.formrun-wrapper input[type="email"],
.formrun-wrapper input[type="tel"],
.formrun-wrapper input[type="number"],
.formrun-wrapper input[type="url"],
.formrun-wrapper input[type="date"],
.formrun-wrapper select,
.formrun-wrapper textarea {
width: 100%;
max-width: 100%;
box-sizing: border-box;
appearance: none;
border: 1px solid #ccc;
border-radius: 16px;
padding: 0.95rem 1rem;
background: #fff;
color: #333;
font: inherit;
line-height: 1.6;
transition:
border-color 0.2s ease,
background-color 0.2s ease,
box-shadow 0.2s ease;
}

/* テキストエリア */

.formrun-wrapper textarea {
min-height: 12em;
resize: vertical;
}

/* フォーカス */

.formrun-wrapper input[type="text"]:focus,
.formrun-wrapper input[type="email"]:focus,
.formrun-wrapper input[type="tel"]:focus,
.formrun-wrapper input[type="number"]:focus,
.formrun-wrapper input[type="url"]:focus,
.formrun-wrapper input[type="date"]:focus,
.formrun-wrapper select:focus,
.formrun-wrapper textarea:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.04);
}

/* ラベル */

.formrun-wrapper label {
font-weight: 700;
line-height: 1.5;
}

/* Formrunの各項目間 */

.formrun-wrapper [class*="formrun"] + [class*="formrun"] {
margin-top: 1rem;
}

/* 必須表示 */

.formrun-wrapper [class*="required"] {
font-size: 0.75rem;
}

/* チェックボックス・ラジオボタン
---------------------------------------------------------------------------*/

.formrun-wrapper input[type="checkbox"],
.formrun-wrapper input[type="radio"] {
width: auto;
margin-right: 0.5rem;
}

/* 送信ボタン
---------------------------------------------------------------------------*/

.formrun-wrapper button,
.formrun-wrapper input[type="submit"] {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 13em;
min-height: 56px;
border: none;
border-radius: 999px;
padding: 0.85rem 2rem;
background: var(--accent-color);
color: var(--accent-inverse-color);
font: inherit;
font-weight: 700;
letter-spacing: 0.04em;
cursor: pointer;
transition:
transform 0.2s ease,
opacity 0.2s ease,
box-shadow 0.2s ease;

box-shadow:
	0 12px 24px rgba(0, 0, 0, 0.12);

}

/* 送信ボタン hover */

.formrun-wrapper button:hover,
.formrun-wrapper input[type="submit"]:hover {
transform: translateY(-1px);
opacity: 0.9;
}

/* 送信ボタン disabled */

.formrun-wrapper button:disabled,
.formrun-wrapper input[type="submit"]:disabled {
opacity: 0.7;
cursor: wait;
transform: none;
}

/* エラー表示
---------------------------------------------------------------------------*/

.formrun-wrapper [class*="error"] {
color: #b23838;
}

/* エラー入力 */

.formrun-wrapper input[aria-invalid="true"],
.formrun-wrapper textarea[aria-invalid="true"],
.formrun-wrapper select[aria-invalid="true"] {
border-color: #d94c4c;
background: #fff8f8;
}

/* フォームrunのメッセージ */

.formrun-wrapper [role="alert"] {
line-height: 1.6;
}

/* プルダウン
---------------------------------------------------------------------------*/

.formrun-wrapper select {
-webkit-appearance: none;
appearance: none;
padding-right: 2.6rem;

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

background-repeat: no-repeat;
background-position: right 0.9rem center;
background-size: 0.8rem auto;

cursor: pointer;

}

/* ファイルアップロード
---------------------------------------------------------------------------*/

.formrun-wrapper input[type="file"] {
width: 100%;
max-width: 100%;
box-sizing: border-box;
padding: 0.8rem 1rem;
border: 1px solid #ccc;
border-radius: 16px;
background: #fff;
color: #333;
font: inherit;
cursor: pointer;
}

/* Formrun周辺の不要な余白調整
---------------------------------------------------------------------------*/

.formrun-wrapper p {
line-height: 1.8;
}

/* スマートフォン
---------------------------------------------------------------------------*/

@media (max-width: 767px) {

.contact-form-inner {
	width: 100%;
}

.contact-form-intro {
	text-align: left;
	margin-bottom: 2rem;
}

.formrun-wrapper {
	width: 100%;
	max-width: 100%;
}

.formrun-wrapper button,
.formrun-wrapper input[type="submit"] {
	width: 100%;
	min-width: 0;
}

}

/* 小さなスマートフォン
---------------------------------------------------------------------------*/

@media (max-width: 500px) {

.contact-form-inner {
	padding-left: 0;
	padding-right: 0;
}

.formrun-wrapper {
	width: 100%;
}

}