/**
 *
 * page-contact.scss
 *
 */
/* ------------------------------------------------------------
 contact-container
------------------------------------------------------------ */
.contact-container {
	position: relative;
	overflow: hidden;
}

.contact-container::before {
	--background-color: var( --color-bg8 );
	--background: var( --color-gradation );
	width: 100%;
	left: 0;
	bottom: 0;
}

@media screen and (min-width: 1024px) {
	.contact-container::before {
		height: 41.6rem ;
	}
}

@media screen and (max-width: 1023px) {
	.contact-container::before {
		height: 34rem ;
	}
}

/* ------------------------------------------------------------
 contact-intro
------------------------------------------------------------ */
.contact-intro {
	position: relative;
}

@media screen and (min-width: 1024px) {
	.contact-intro {
		padding-top: 12.8rem ;
	}
}

@media screen and (max-width: 1023px) {
	.contact-intro {
		padding-top: 7.8rem ;
	}
}

@media screen and (min-width: 1024px) {
	.contact-intro__small {
		margin-top: 3.4rem ;
	}
}

@media screen and (max-width: 1023px) {
	.contact-intro__small {
		margin-top: 2.8rem ;
	}
}

.contact-intro__light {
	position: absolute;
	z-index: -1;
	pointer-events: none;
}

@media screen and (min-width: 1024px) {
	.contact-intro__light {
		width: 87rem ;
		top: -18rem ;
		right: -24.4rem ;
	}
}

@media screen and (max-width: 1023px) {
	.contact-intro__light {
		width: 47.4rem ;
		top: -8.7rem ;
		right: -20rem ;
	}
}

/* ------------------------------------------------------------
 contact-recruit
------------------------------------------------------------ */
@media screen and (min-width: 1024px) {
	.contact-recruit {
		margin-top: 10.4rem ;
	}
}

@media screen and (max-width: 1023px) {
	.contact-recruit {
		margin-top: 8.2rem ;
	}
}

.contact-recruit__inner {
	width: 100%;
	background-color: var(--color-bg);
}

@media screen and (min-width: 1024px) {
	.contact-recruit__inner {
		max-width: 94.2rem ;
		padding: 4.3rem 5.4rem 4.3rem 4.7rem ;
		display: flex;
		align-items: center;
		/* 申し込み先が3つになった。1行に詰めると説明文が10文字ごとに折れて
		   読めなくなるので、ボタンは折り返して下の段へ落とす。 */
		flex-wrap: wrap;
		gap: 3.8rem ;
	}
}

@media screen and (min-width: 1024px) {
	.contact-recruit__inner > .c-title4,
	.contact-recruit__actions {
		flex-shrink: 0;
	}
}

@media screen and (max-width: 1023px) {
	.contact-recruit__inner {
		text-align: center;
		padding: 3.5rem 2rem 3.7rem ;
	}
}

@media screen and (min-width: 1024px) {
	.contact-recruit__txt {
		flex: 1 1 0%;
		min-width: 0;
	}
}

@media screen and (max-width: 1023px) {
	.contact-recruit__txt {
		margin-top: 1.6rem ;
	}
}

/* 専用フォームの入口が2つある。見出しと説明の右へ縦に積むと1本あたり
   21rem ほどしか取れず、どの札も「申し込 / む」のように語の途中で折れる。
   説明文の下へ回して横に並べ、1本の幅を確保する。 */
.contact-recruit__actions {
	display: grid;
}

@media screen and (min-width: 1024px) {
	.contact-recruit__actions {
		flex-basis: 100%;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.2rem ;
	}

	/* 列いっぱいまで伸ばす。部品の既定（max-width: 20.5rem）のままだと
	   広げた列の中で札だけが縮んだままになる。 */
	.contact-recruit__actions .p-button4.-regular {
		max-width: none;
	}
}

@media screen and (max-width: 1023px) {
	.contact-recruit__actions {
		margin-top: 1.8rem ;
		justify-items: center;
		gap: 1.4rem ;
	}
}

.contact-recruit__actions > .contact-recruit__button {
	margin: 0;
}

/* 日本語は原則どこでも折れるので、札の文言を放っておくと「申し込 / む」の
   ように動詞の途中で切れて別の語に見える。折るなら助詞の後ろ、という
   区切りを文言側に持たせる。 */
.contact-recruit__nobr {
	white-space: nowrap;
}

/* ------------------------------------------------------------
 contact-flex
------------------------------------------------------------ */
@media screen and (min-width: 1024px) {
	.contact-flex {
		margin-top: 10.7rem ;
	}
}

@media screen and (max-width: 1023px) {
	.contact-flex {
		margin-top: 7rem ;
	}
}

@media screen and (min-width: 1024px) {
	.contact-flex__inner {
		display: flex;
		align-items: flex-start;
	}
}

/* ----------------------------------------
 contact-tel (お問い合わせ方法)
---------------------------------------- */
.contact-method__list {
	display: grid;
}

@media screen and (min-width: 1024px) {
	.contact-method__list {
		margin-top: 3.2rem ;
		gap: 1.6rem ;
	}
}

@media screen and (max-width: 1023px) {
	.contact-method__list {
		margin-top: 2.4rem ;
		gap: 1.2rem ;
	}
}

.contact-method__list a {
	display: flex;
	align-items: center;
	width: 100%;
	background-color: var(--color-bg);
	transition: background-color var(--transition-hover);
}

@media screen and (min-width: 1024px) {
	.contact-method__list a {
		gap: 1.6rem ;
		padding: 2.2rem 2.4rem ;
	}
}

@media screen and (max-width: 1023px) {
	.contact-method__list a {
		gap: 1.2rem ;
		padding: 1.8rem 1.6rem ;
	}
}

@media (hover: hover) {
	.contact-method__list a:hover {
		background-color: var(--color-main);
	}
}

.contact-method__label {
	flex-shrink: 0;
	font-weight: 600;
}

@media screen and (min-width: 1024px) {
	.contact-method__label {
		font-size: 1.7rem;
	}
}

@media screen and (max-width: 1023px) {
	.contact-method__label {
		font-size: 1.5rem;
	}
}

.contact-method__desc {
	flex: 1 1 0%;
	min-width: 0;
	color: rgba(17, 17, 17, 0.72);
}

@media screen and (min-width: 1024px) {
	.contact-method__desc {
		font-size: 1.4rem;
	}
}

@media screen and (max-width: 1023px) {
	.contact-method__desc {
		font-size: 1.25rem;
	}
}

.contact-method__list .c-arrow,
.contact-method__list .c-blank {
	flex-shrink: 0;
	margin-left: auto;
}

@media screen and (min-width: 1024px) {
	.contact-tel__small {
		margin-top: 2.5rem ;
	}
}

@media screen and (max-width: 1023px) {
	.contact-tel__small {
		margin-top: 2.2rem ;
	}
}

/* ----------------------------------------
 contact-sns
---------------------------------------- */
.contact-sns {
	width: 100%;
}

@media screen and (min-width: 1024px) {
	.contact-sns {
		max-width: 51.2rem ;
		margin-left: 12rem ;
	}
}

@media screen and (max-width: 1023px) {
	.contact-sns {
		margin-top: 7.1rem ;
	}
}

.contact-sns__note {
	color: rgba(17, 17, 17, 0.72);
	line-height: 1.75;
	text-wrap: pretty;
}

@media screen and (min-width: 1024px) {
	.contact-sns__note {
		margin-top: 2.4rem ;
		font-size: 1.5rem;
	}
}

@media screen and (max-width: 1023px) {
	.contact-sns__note {
		margin-top: 1.8rem ;
		font-size: 1.35rem;
	}
}

/* ------------------------------------------------------------
 contact-address (住所変更)
------------------------------------------------------------ */
/* 着地点の高さ合わせは、直前に置いた空の #area-address（common.min.css の
   [id^=area-]）が持つ。ここでは節そのものに手を入れない——中身のある節を
   ずらすと、ひとつ前の節に重なる。 */
@media screen and (min-width: 1024px) {
	.contact-address {
		margin-top: 11.2rem ;
	}
}

@media screen and (max-width: 1023px) {
	.contact-address {
		margin-top: 8.7rem ;
	}
}

/* ------------------------------------------------------------
 contact-form
------------------------------------------------------------ */
@media screen and (min-width: 1024px) {
	.contact-form {
		margin-top: 11.2rem ;
		padding-bottom: 33.8rem ;
	}
}

@media screen and (max-width: 1023px) {
	.contact-form {
		margin-top: 8.7rem ;
		padding-bottom: 18.2rem ;
	}
}

/* ----------------------------------------
 contact-form: 同意チェック・送信状態・完了表示
---------------------------------------- */
.p-form__policy__label {
	display: inline-flex;
	align-items: center;
	gap: 1rem;
	cursor: pointer;
}

.p-form__policy__label input {
	width: 1.8rem;
	height: 1.8rem;
	flex-shrink: 0;
	accent-color: var(--color-main);
}

@media screen and (max-width: 1023px) {
	.p-form__policy__label {
		text-align: left;
	}
}

.p-form__status {
	line-height: 1.75;
}

.p-form__status:empty {
	display: none;
}

@media screen and (min-width: 1024px) {
	.p-form__status {
		margin-top: 2.4rem ;
		font-size: 1.5rem;
	}
}

@media screen and (max-width: 1023px) {
	.p-form__status {
		margin-top: 1.8rem ;
		font-size: 1.35rem;
	}
}

.p-form__status.is-error {
	color: var(--color-error);
}

.p-form--contact .p-button5 button,
.p-form--address .p-button5 button {
	-webkit-appearance: none;
	appearance: none;
	border: 0;
	font: inherit;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	-webkit-filter: var(--shadow4);
	filter: var(--shadow4);
	background-color: var(--bg-color);
	color: var(--txt-color);
	transition: var(--transition-hover);
	transition-property: background-color, color;
}

@media (hover: hover) {
	.p-form--contact .p-button5 button:hover,
	.p-form--address .p-button5 button:hover {
		background-color: var(--hover-bg-color);
		color: var(--hover-txt-color);
	}
}

.p-form--contact .p-button5 button:disabled,
.p-form--contact .p-form__button.is-disabled button,
.p-form--address .p-button5 button:disabled,
.p-form--address .p-form__button.is-disabled button {
	cursor: not-allowed;
	opacity: 0.3;
}

.p-form__done {
	background-color: var(--color-bg);
}

@media screen and (min-width: 1024px) {
	.p-form__done {
		margin-top: 4rem ;
		padding: 4.3rem 4.7rem ;
	}
}

@media screen and (max-width: 1023px) {
	.p-form__done {
		margin-top: 3rem ;
		padding: 3.5rem 2rem ;
	}
}
/* iOS Safari は、文字が 16px 未満の欄に焦点が当たるとページ全体を勝手に拡大
   する。拡大されると横がはみ出し、縦に見える範囲もそのぶん狭くなる。
   タッチの画面では欄の文字を 16px にして、拡大を起こさせない。
   root が幅に追従する（375px 幅で 9.38px）ため 1.6rem は 15.008px にしか
   ならず閾値に届かない。ここだけ px で置く理由がそれ。
   viewport の maximum-scale で拡大を禁じる手は使わない——利用者が自分で
   広げる手段まで奪うことになるため。
   page-home.css の .home-stories-field と同じ対処。 */
@media (pointer: coarse) {
	.p-form__txtbox {
		font-size: 16px;
	}
}

/*# sourceMappingURL=sourcemaps/page-contact.css.map */