@charset "utf-8";

/* =====================================================
--------------------------------------------------------
各種お問い合わせ
--------------------------------------------------------
===================================================== */

h2:is(.u--icon-bubble03) {
	padding-left: 40px;
	font-size: 22px;
	font-weight: bold;
}

h2:is(.u--icon-bubble03)::before,
h2:is(.u--icon-bubble03)::after {
	font-size: 32px;
}

.toiawase-method {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin: 32px 0 48px;
}

.toiawase-method > div {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	gap: 16px;
	width: 100%;
	padding: 16px;
	border-radius: 4px;
	border: 1px solid var(--color-grey-origin);
}

@media screen and (min-width:768px) {
	h2:is(.u--icon-bubble03) {
		font-size: 24px;
	}
	.toiawase-method {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: max-content auto auto;
		align-items: flex-start;
		gap: 16px;
		margin: 48px 0 64px;
	}
	.toiawase-method > h2:nth-of-type(1) {
		grid-area: 1 / 1 / 2 / 2;
	}
	.toiawase-method > h2:nth-of-type(2) {
		grid-area: 1 / 2 / 2 / 3;
	}
	.toiawase-method > div {
		grid-area: 2 / 1 / 3 / 2;
	}
	.toiawase-method > div:has(.c--link-text-underline) {
		grid-area: 3 / 1 / 4 / 2;
	}
	.toiawase-method > div:has(.to-soudan) {
		grid-area: 2 / 2 / 3 / 3;
	}
	.toiawase-method > div:has(.freedial) {
		grid-area: 3 / 2 / 4 / 3;
	}
}

@media screen and (min-width:1024px) {
	.toiawase-method {
		gap: 32px;
	}
}



/* 中身 */
.toiawase-method > div p {
	width: 100%;
}

.toiawase-method h3 {
	width: 100%;
	font-size: 20px;
	font-weight: bold;
}

.toiawase-method .c--link-main {
	width: 100%;
	max-width: 310px;
	min-height: 48px;
	font-size: 18px;
}

.toiawase-method .to-soudan {
	display: inline-flex;
	align-items: center;
	padding: 8px 16px;
	width: 100%;
	max-width: 310px;
	min-height: 80px;
	border-radius: 4px;
	border: 2px solid var(--color-grey-dark);
	background: var(--color-grey-dark);
	color: #fff;
	font-size: 18px;
	font-weight: bold;
	text-align: center;
}

.toiawase-method .c--link-text-underline {
	margin-top: -8px;
}

@media (any-hover:hover) {
	.toiawase-method .to-soudan:hover {
		background: #fff;
		color: var(--color-grey-dark);
	}
}

.toiawase-method .freedial {
	padding-left: 40px;
	width: 100%;
	background: url(/img/toiawase/freedial.png) no-repeat left center;
	font-size: 16px;
}

.toiawase-method .freedial span {
	margin-right: 8px;
	font-size: 24px;
	font-weight: bold;
}

.toiawase-method .freedial-note {
	color: var(--color-link-cv);
}

@media screen and (min-width:1024px) {
	.toiawase-method .c--link-main {
		min-height: 80px;
	}
	.toiawase-method .freedial {
		order: 3;
	}
	.toiawase-method .freedial + p {
		order: 4;
	}
	.toiawase-method .freedial-note {
		order: 2;
	}
}










/* 以下、メールフォーム */

/* =====================================================
--------------------------------------------------------
ページ上部（共通）
--------------------------------------------------------
===================================================== */

/* タイトル */
div:has(.form-nav),
div:has(.form-info) {
	margin: 16px auto 32px;
}

div:has(.form-nav) h1,
div:has(.form-info) h1 {
	width: 100%;
	font-size: 24px;
	font-weight: bold;
}

div:has(.form-nav):not(:has(.form-info)) h1 {
	margin-bottom: 32px;
}

@media screen and (min-width:1024px) {
	div:has(.form-nav),
	div:has(.form-info) {
		margin: 32px auto;
	}
	div:has(.form-nav) h1,
	div:has(.form-info) h1 {
		font-size: 28px;
	}
}



/* リクエスト・その他・配信停止 */
main:not(:has(.form-select)) .form-info {
	margin-bottom: 32px;
}

.form-info,
.form-info h1 {
	margin-bottom: 16px;
}

.form-info > p {
	line-height: 1.7;
}

.form-info > p:has(+ div) {
	margin-bottom: 16px;
}

.form-info_photo {
	margin: 0 calc(50% - 50vw);
	width: 100vw;
}

.form-info_variety {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	gap: 16px;
}

.form-info_variety p:has(img) {
	display: flex;
	flex-flow: column nowrap;
	align-items: flex-start;
	flex-shrink: 0;
	gap: 8px;
}

.form-info_variety p:has(img) img {
	min-width: 0;
}

.form-info > p span,
.form-info_variety span {
	color: var(--color-link-cv);
}

@media screen and (min-width:768px) {
	main:not(:has(.form-select)) .form-info {
		margin: 64px auto 48px;
	}
	div:has(> .form-info) {
		margin-bottom: 48px;
	}
	.form-info:has(.form-info_photo) {
		display: grid;
		grid-template-rows: max-content 1fr;
		gap: 0 32px;
	}
	.form-info > p {
		line-height: 1.5;
	}
	.form-info > p:has(+ div) {
		margin-bottom: 0;
		grid-area: 2 / 1 / 3 / 2;
	}
	.form-info_photo {
		grid-area: 1 / 2 / 3 / 3;
		margin: 0;
		width: 300px;
	}
	.form-info_variety p:has(img) {
		flex-flow: row nowrap;
	}
}

@media screen and (min-width:1024px) {
	.form-info_photo {
		width: 400px;
	}
}



/* ナビ */
.form-nav {
	display: flex;
	justify-content: space-between;
	position: relative;
	margin-bottom: 32px;
	height: 40px;
	overflow: hidden;
}

.form-nav li {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 50%;
	width: calc((100% / 3) + 8px);
	height: 100%;
	border-top: 2px solid var(--color-housecom-blue);
	border-bottom: 2px solid var(--color-housecom-blue);
	font-size: 16px;
	font-weight: bold;
}

.form-nav:is(.foreign-language) li:is(.form-nav_index) {
	padding-right: 8px;
	letter-spacing: -0.05em;
}

.form-nav li:not(.form-nav_thanks)::before,
.form-nav li:not(.form-nav_thanks)::after {
	position: absolute;
	top: 50%;
	right: 0;
	width: 80px;
	height: 2px;
	background: var(--color-housecom-blue);
	content: '';
}

.form-nav li:not(.form-nav_thanks)::before {
	translate: calc(50% - 2px) -2px;
	rotate: 70deg;
}

.form-nav li:not(.form-nav_thanks)::after {
	translate: calc(50% - 2px) 0;
	rotate: -70deg;
}

.form-nav li:is(.form-nav_index) {
	left: 0;
	translate: 0 -50%;
	clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%);
	border-left: 2px solid var(--color-housecom-blue);
}

.form-nav li:is(.form-nav_confirm) {
	left: 50%;
	translate: -50% -50%;
	clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%, 8px 50%);
}

.form-nav li:is(.form-nav_thanks) {
	right: 0;
	translate: 0 -50%;
	clip-path: polygon(0 0, 100% 0, 100% 50%, 100% 100%, 0 100%, 8px 50%);
	border-right: 2px solid var(--color-housecom-blue);
}

.form-nav li.current {
	background: var(--color-housecom-blue);
	color: #fff;
}

@media screen and (min-width:1024px) {
	.form-info + .form-nav {
		margin-bottom: 48px;
	}
	.form-nav:not(.foreign-language) li {
		letter-spacing: 0.25em;
	}
	.form-nav:is(.foreign-language) li:is(.form-nav_index) {
		padding: 0;
		letter-spacing: unset;
	}
	.form-nav li {
		font-size: 18px;
	}
	.form-nav li:not(.form-nav_thanks)::before {
		rotate: 38deg;
	}
	.form-nav li:not(.form-nav_thanks)::after {
		rotate: -38deg;
	}
	.form-nav li:is(.form-nav_index) {
		padding-right: 8px;
		clip-path: polygon(0 0, calc(100% - 25px) 0, 100% 50%, calc(100% - 25px) 100%, 0 100%);
		width: 362px;
	}
	.form-nav li:is(.form-nav_confirm) {
		padding-right: 8px;
		clip-path: polygon(0 0, calc(100% - 25px) 0, 100% 50%, calc(100% - 25px) 100%, 0 100%, 25px 50%);
		width: calc(100% - 362px - 350px + 25px + 25px);
	}
	.form-nav li:is(.form-nav_thanks) {
		padding-left: 8px;
		clip-path: polygon(0 0, 100% 0, 100% 50%, 100% 100%, 0 100%, 25px 50%);
		width: 356px;
	}
}










/* =====================================================
--------------------------------------------------------
ページ下部（共通）
--------------------------------------------------------
===================================================== */

/* プライバシー */
.privacy {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 32px;
	width: 100%;
}

.privacy dt {
	display: inline-block;
	margin: 0 8px 8px 0;
	padding-right: 8px;
	font-size: 16px;
}

.privacy dt::after {
	right: -16px;
}

.privacy dd {
	font-size: 14px;
}

.privacy dd p:not(:last-of-type) {
	margin-bottom: 1em;
}

.privacy dd span {
	display: block;
	font-weight: bold;
}



/* 同意・修正・送信 */
.form-proceed {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	gap: 32px 64px;
	margin-bottom: 48px;
}

.form-proceed .c--link-cv-primary,
.form-proceed .c--link-sub {
	width: 100%;
	max-width: 600px;
	min-height: 60px;
	font-size: 18px;
	font-weight: bold;
}

.form-proceed .c--link-sub {
	height: 48px;
	border-width: 2px;
}

.form-proceed .c--link-sub::before {
	left: 16px;
	rotate: 90deg;
	font-family: 'icomoon';
	content: "\e94f";
}

@media screen and (min-width:1024px) {
	.form-proceed {
		margin-bottom: 64px;
	}
	.form-proceed:has(.c--link-sub) {
		flex-direction: row-reverse;
		justify-content: flex-end;
	}
	.form-proceed .c--link-sub {
		width: 300px;
		height: 60px;
	}
}










/* =====================================================
--------------------------------------------------------
必須・エラー表示・説明など（共通）
--------------------------------------------------------
===================================================== */

/* 必須 */
.required {
	padding: 4px 8px;
	min-width: 48px;
	border-radius: 4px;
	border: 1px solid var(--color-housecom-blue);
	color: var(--color-housecom-blue);
	font-size: 14px;
	font-weight: bold;
	text-align: center;
	line-height: 1;
}

/* ご遠慮ください */
.refrain-message {
	display: block;
	margin-top: 16px;
	padding: 8px;
	width: 100%;
	border: 1px solid var(--color-link-cv);
	color: var(--color-link-cv);
	font-size: 16px;
	text-align: center;
}

/* 上部 */
.error-message {
	display: none;
	padding: 10px 8px;
	border-radius: 4px;
	border: 3px solid var(--color-link-cv);
	color: var(--color-link-cv);
	font-size: 18px;
	font-weight: bold;
	text-align: center;
}

.error-message.active {
	display: block;
}

.error-message span {
	position: relative;
	padding-left: 24px;
}

.error-message span::before {
	position: absolute;
	top: 50%;
	left: 0;
	translate: 0 -50%;
	color: var(--color-link-cv);
	font-family: 'icomoon';
	font-weight: normal;
	content: '\e93e';
}

/* 文字 */
.error-text {
	display: none;
	position: relative;
	padding-left: 24px;
	width: 100%;
	color: var(--color-link-cv);
	font-size: 18px;
	font-weight: bold;
}

.error-text.active {
	display: block;
}

.error-text::before {
	position: absolute;
	top: 50%;
	left: 0;
	translate: 0 -50%;
	color: var(--color-link-cv);
	font-family: 'icomoon';
	font-weight: normal;
	content: '\e93e';
}

/* 囲い */
.error-mark:is(:not(.form_radio label)):is(:not(input[type="radio"])):is(:not(input[type="checkbox"])) {
	border: 4px solid var(--color-link-cv) !important;
}

.form_radio label.error-mark {
	border: 4px solid var(--color-link-cv) !important;
}

.form_radio label.error-mark:first-of-type {
	border-right: none !important;
}

input[type="radio"].error-mark::before,
input[type="checkbox"].error-mark::before {
	border: 3px solid var(--color-link-cv) !important;
}

/* 背景色 */
.required-mark[class],
.required-mark[class] optgroup {
	background: #ffffdd;
}

.required-mark[class]:is(input[type="radio"]),
.required-mark[class]:is(input[type="checkbox"]) {
	background: transparent;
}

input[type="radio"].required-mark:not(:checked):after {
	top: 50%;
	left: 50%;
	translate: -50% -50%;
	border-radius: 50%;
	width: calc(24px - 8px);
	height: calc(24px - 8px);
	background: #ffffdd;
	opacity: 1;
}

input[type="checkbox"].required-mark:not(:checked)::before {
	background: #ffffdd;
}

/* 説明など */
/* .announce:not(:has(+ div)):not(:has(+ textarea)) {
	margin-top: -8px;
} */

.announce {
	font-size: 14px;
}

@media screen and (min-width:1024px) {
	.required {
		padding: 8px;
		max-width: 120px;
		min-width: 56px;
		font-size: 16px;
	}
	.required.en {
		min-width: 90px;
	}
	.refrain-message {
		font-size: 18px;
	}
	.error-message,
	.error-text {
		font-size: 20px;
	}
	.announce {
		font-size: 16px;
	}
}










/* =====================================================
--------------------------------------------------------
選択した物件・不動産会社
--------------------------------------------------------
===================================================== */

.form-select {
	display: flex;
	flex-flow: row wrap;
	gap: 8px;
	margin: 0 auto 32px;
	padding: 16px;
	width: 100%;
	max-width: 600px;
	border-radius: 4px;
	background: var(--color-housecom-blue-light);
}

@media screen and (min-width:1024px) {
	.form-select {
		gap: 8px 16px;
		border-radius: unset;
	}
	.form-select:has(.form-select_shop) {
		align-items: flex-end;
	}
}



/* 上部 */
.form-select_head {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
}

.form-select h2 {
	width: 100%;
	font-weight: bold;
}

.form-select_head span {
	font-size: 12px;
}

@media screen and (min-width:1024px) {
	.form-select h2 {
		width: fit-content;
	}
	.form-select_head span {
		font-size: 14px;
	}
}



/* 部屋・会社名 */
.form-select_head + span {
	width: 100%;
	font-size: 16px;
	font-weight: bold;
}

@media screen and (min-width:1024px) {
	.form-select_head + span {
		font-size: 18px;
	}
}


/* 画像 */
.form-select_room,
.form-select_shop {
	display: flex;
	justify-content: center;
	align-items: center;
	background: var(--color-grey-pale);
}

.form-select_room img,
.form-select_shop img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.form-select_room {
	width: 100px;
	height: 100px;
}

.form-select_shop {
	order: 5;
	width: 80px;
	height: 80px;
}

@media screen and (min-width:1024px) {
	.form-select_shop {
		width: 100px;
		height: 100px;
	}
}



/* 詳細 */
.form-select_info {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.form-select_room + .form-select_info {
	width: calc(100% - 8px - 100px);
}

.form-select_shop + .form-select_info {
	width: calc(100% - 8px - 80px);
	line-height: 22px;
}

@media screen and (min-width:1024px) {
	.form-select_room + .form-select_info,
	.form-select_shop + .form-select_info {
		width: calc(100% - 16px - 100px);
	}
}



/* 家賃 */
.form-select_price {
	font-size: 12px;
}

.form-select_price span:nth-of-type(1) {
	font-size: 20px;
	font-weight: bold;
}

.form-select_price span:nth-of-type(2) {
	padding-right: 8px;
	font-size: 14px;
	font-weight: bold;
}

@media screen and (min-width:1024px) {
	.form-select_price {
		font-size: 18px;
	}
	.form-select_price span:nth-of-type(1) {
		font-size: 24px;
	}
	.form-select_price span:nth-of-type(2) {
		font-size: 18px;
	}
}


/* 部屋の情報 */
.form-select_info > dl {
	display: flex;
	flex-flow: row wrap;
	gap: 8px 4px;
}

.form-select_info > dl div {
	display: flex;
	gap: 8px;

	/* {{yonezawa 20250922 SP閲覧時のレイアウト調整用に削除}} */
	/* width: calc((100% - 24px) / 2); */

	/* {{yonezawa 20250922 SP閲覧時のレイアウト調整用に追加}} */
	width: calc(50% - 4px);
}

.form-select_info > dl div dt {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 20px;
	background: var(--color-grey-pale);
	line-height: 1;

	/* {{yonezawa 20250922 SP閲覧時のレイアウト調整用に追加}} */
	height: 20px;
	align-self: flex-start;
}


/* {{yonezawa 20250922 SP閲覧時のレイアウト調整用に追加}} */
.form-select_info > dl div dd {
	width: calc(100% - 20px);
	word-break: break-all;
}

@media screen and (min-width:1024px) {
	.form-select_info > *:not(.form-select_price) {
		font-size: 18px;
	}
	.form-select_info > dl {
		gap: 8px 40px;
		margin-bottom: 8px;
	}
	.form-select_info > dl div {
		width: fit-content;
	}
	.form-select_info > dl div dt {
		width: 24px;
	}
	.form-select_info > dl div dd {
		font-size: 18px;
	}
	.form-select_info + span {
		font-size: 18px;
	}
}










/* =====================================================
--------------------------------------------------------
formタグ内（共通）
--------------------------------------------------------
===================================================== */

.form {
	display: flex;
	flex-flow: row wrap;
	gap: 16px;
	margin-bottom: 32px;
}



/* 見出し */
.form h2,
div:has(+ .form_yoyaku-date),
.form h3 {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	width: 100%;
	font-size: 18px;
	font-weight: bold;
}

.form h2:not(:has(+ div)) {
	width: 100%;
}

.form h2:has(+ h3) {
	margin-bottom: 16px;
}

/* 内容 */
.form h2 + div,
.form_yoyaku-date,
.form h3 + div {
	display: flex;
	justify-content: center;
	width: 100%;
	font-size: 16px;
}

main:has(.form-nav_confirm.current) .form h2 + div,
main:has(.form-nav_confirm.current) .form_yoyaku-date,
main:has(.form-nav_confirm.current) .form h3 + div {
	font-size: 18px;
}

.form h2 + div:not(:last-of-type),
.form h3 + div:not(:last-of-type) {
	margin-bottom: 16px;
}

.form h2 + div:not(:is([class])),
.form h3 + div:not(:is([class])) {
	flex-direction: column;
	gap: 16px;
}

.form h2 + div:not(:is([class])) > *:not(:is([class])):not(label) {
	width: 100%;
}

@media screen and (min-width:1024px) {
	.form {
		gap: 32px;
	}
	.form h2,
	div:has(+ .form_yoyaku-date),
	.form h3 {
		width: 300px;
		height: fit-content;
		min-height: 48px;
		font-size: 20px;
	}
	.form h2:has(+ h3) {
		margin-bottom: -8px;
	}
	.form h2 > span span,
	div:has(+ .form_yoyaku-date) > span span,
	.form h3 > span span {
		display: block;
	}
	.form h2 + div,
	.form_yoyaku-date,
	.form h3 + div {
		width: calc(100% - 32px - 300px);
		font-size: 18px;
	}
	main:has(.form-nav_confirm.current) .form h2 + div,
	main:has(.form-nav_confirm.current) .form_yoyaku-date,
	main:has(.form-nav_confirm.current) .form h3 + div {
		font-size: 20px;
	}
	.form h2 + div:not(:last-of-type),
	.form h3 + div:not(:last-of-type) {
		margin: 0;
	}
}



/* input関係 */
.form label:has(input[type="checkbox"]) {
	font-size: 14px;
}

.form input[type="radio"],
.form input[type="checkbox"] {
	margin-right: 8px;
}

.form textarea {
	resize: none;
}

.form h2 + div:not(:is([class])) textarea,
.form h3 + div:not(:is([class])) textarea {
	height: 200px;
}

.form h2 + div:not(:is([class])) > .c--select,
.form h3 + div:not(:is([class])) > .c--select {
	width: 100%;
}

.form h2 + div .c--select::before {
	right: 16px;
	font-size: 14px;
}

.form label:has(input[type=radio]),
.form label:has(input[type=checkbox]) {
	width: fit-content;
	color: var(--color-link-text);
}

@media screen and (min-width:1024px) {
	.form label:has(input[type="checkbox"]) {
		font-size: 18px;
	}
	.form h2 + div:not(:is([class])) > .c--select,
	.form h3 + div:not(:is([class])) > .c--select {
		width: calc((100% - 24px) / 2);
	}
	.form h2 + div .c--select::before {
		font-size: 16px;
	}
}










/* =====================================================
--------------------------------------------------------
formタグ内（個別）
--------------------------------------------------------
===================================================== */

/* シンプルな横並び */
.form .c--flex {
	justify-content: flex-start;
}

.form .c--flex div:has(input[type=text]) {
	display: flex;
	align-items: center;
	gap: 8px;
}



/* 特殊なラジオボタン */
.form_radio {
	display: flex;
}

.form_radio label {
	display: flex;
	justify-content: center;
	padding: 16px;
	width: calc(100% / 2);
	border: 1px solid var(--color-grey-origin);
	color: var(--color-grey-dark);
	transition: background 0.5s, color 0.5s;
}

.form_radio label:first-of-type {
	border-radius: 4px 0 0 4px;
}

.form_radio label:last-of-type {
	border-radius: 0 4px 4px 0;
}

.form_radio input[type=radio] {
	display: none;
}

.form_radio input[type="radio"]:checked + label {
	background: var(--color-housecom-blue);
	color: #fff;
}

@media screen and (min-width:1024px) {
	.form_radio[class] {
		width: fit-content;
	}
	.form_radio label {
		min-width: 172px;
	}
}



/* 半分 */
.form_half[class] input {
	width: 100%;
	flex: 1;
}

@media screen and (min-width:1024px) {
	.form_half {
		width: calc((100% - 24px) / 2);
	}
}



/* 姓名 */
.form_name[class] {
	flex-flow: row wrap;
	justify-content: flex-start;
	align-items: center;
	gap: 16px 24px;
}

.form_name input {
	width: calc((100% - 24px) / 2);
}



/* 住所 */
.form_address[class] {
	flex-flow: row wrap;
	justify-content: flex-start;
	gap: 16px 24px;
}

.form_address[class]:not(:has(label)) {
	gap: 16px 8px;
}

.form_address_zipcode {
	display: flex;
	gap: 8px;
	width: 100%;
}

.form_address_zipcode:has(label) {
	gap: 16px;
}

.form_address_zipcode > label span {
	margin-right: 8px;
}

.form_address_zipcode > label input {
	max-width: 160px;
}

.form_address_zipcode > button {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 144px;
	border-radius: 4px;
	border: 2px solid var(--color-grey-origin);
	color: var(--color-link-text);
	font-size: 18px;
	font-weight: bold;
}

.form_address .c--select {
	width: 160px;
}

.form_address .c--select + input,
.form_address .c--select + input + input {
	width: 100%;
}

@media screen and (min-width:1024px) {
	.form_address[class] {
		gap: 32px 24px;
	}
	.form_address_zipcode:has(label) {
		gap: 32px;
	}
	.form_address_zipcode > label input {
		width: 150px;
	}
	.form_address .c--select {
		width: 250px;
	}
	.form_address .c--select + input {
		width: calc(100% - 24px - 250px);
	}
}



/* 来店日時 */
.form_yoyaku-date {
	flex-flow: row wrap;
	gap: 16px;
}

.form_yoyaku-date > div {
	display: grid;
	grid-template-columns: auto 110px;
	gap: 16px;
	align-items: center;
	width: 100%;
}

.form_yoyaku-date > div > span:not([class]) {
	grid-area: 1 / 1 / 2 / 2;
	font-size: 20px;
	font-weight: bold;
	max-height: 48px;
}

.form_yoyaku-date > div .c--select {
	grid-area: 2 / 1 / 3 / 3;
	width: 100%;
}

.form_yoyaku-date > div > span:is([class]) {
	grid-area: 1 / 2 / 2 / 3;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	padding: 8px;
	border-radius: 4px;
	border: 2px solid var(--color-grey-origin);
	color: var(--color-link-text);
	font-size: 18px;
	font-weight: bold;
	cursor: pointer;
}

@media screen and (min-width:768px) {
	.form_yoyaku-date > div {
		grid-template-columns: auto 320px 110px;
	}
	.form_yoyaku-date > div > span:not([class]) {
		font-size: 22px;
	}
	.form_yoyaku-date > div .c--select {
		grid-area: 1 / 2 / 2 / 3;
	}
	.form_yoyaku-date > div > span:is([class]) {
		grid-area: 1 / 3 / 2 / 4;
		height: 100%;
	}
}



/* 年月日 */
div:has(> .form_yyyy) {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	gap: 8px;
	width: 100%;
}

.form_yyyy select {
	width: 100px;
}

.form_mm select {
	width: 75px;
}

.form_dd select {
	width: 80px;
}

@media screen and (min-width:1024px) {
	.form_yyyy select {
		width: 150px;
	}
	.form_mm select,
	.form_dd select {
		width: 120px;
	}
}



/* エリア */
.form_area {
	flex-flow: row wrap;
	align-items: center;
	gap: 16px 24px;
}

.form_area[class]:not(:has(label)) {
	justify-content: flex-start;
}

.form_area .c--select,
.form_area input {
	width: calc((100% - 24px) / 2);
}

@media screen and (min-width:1024px) {
	.form_area .c--select {
		width: 250px;
	}
	.form_area input {
		width: calc(100% - 24px - 250px);
	}
}



/* 最寄りの沿線・駅 */
.form h3 + div:has(.form_line) {
	flex-flow: row wrap;
	justify-content: flex-start;
	gap: 16px 24px;
}

.form h3 + div:has(.form_line) input {
	width: 100%;
}

.form_line {
	display: flex;
	align-items: center;
}

.form_line:has(input) {
	width: 100%;
}

.form_station {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
}

.form_station input {
	flex: 1;
	width: 100%;
}

@media screen and (min-width:1024px) {
	.form_line:has(input) {
		width: 250px;
	}
	.form_station {
		width: calc(100% - 24px - 250px);
	}
}



/* 種別 */
.form_category[class] {
	/* display: grid;
	grid-template-columns: repeat(2, 1fr); */
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	gap: 16px;
}

.form_category[class] label:has(input[type=checkbox]) {
	width: calc((100% - 16px) / 2);
}

.form_category > div {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
}

.form_category[class] > div label:has(input[type=checkbox]) {
	width: fit-content;
}

@media screen and (min-width:375px) {
	.form_category > div input {
		flex: 1;
	}
}

@media screen and (min-width:768px) {
	/* .form_category[class] {
		grid-template-columns: repeat(3, 1fr);
	} */
	.form_category[class] label:has(input[type=checkbox]) {
		width: calc((100% - 16px * 2) / 3);
	}
}



/* 理由 */
.form_reason {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.form_reason label {
	width: 100%;
	color: var(--color-link-text);
}

.form_reason textarea {
	margin-left: 32px;
	width: calc(100% - 32px);
	height: 100px;
}



/* 大学名 */
.form_campus-name {
	display: flex;
	flex-flow: row wrap;
	gap: 8px;
}

.form_campus-name button {
	padding: 12px;
	border-radius: 4px;
	border: 1px solid var(--color-grey-origin);
	background: #fff;
}

.form_campus-name button.active {
	background: var(--color-housecom-blue);
	color: #fff;
}



/* 期間を指定 */
.form_period {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

.form_period > label {
	flex-shrink: 0;
}

.form_period > div {
	display: flex;
	flex-flow: row wrap;
	gap: 8px;
}

.form_period .form_mm select {
	width: 80px;
}

@media screen and (min-width:1024px) {
	.form_period {
		flex-direction: row;
	}
	.form_period .form_mm select {
		width: 120px;
	}
}



/* 文字サイズ各種 */
.form_input-text {
	flex-flow: row wrap;
	display: flex;
	align-items: center;
	gap: 8px;
}

.form_input-text input {
	width: 100%;
	flex: 1;
}

/* 100単位（PC/SP固定） */
.form_input-text .hundred {
	flex: unset;
	width: 150px;
}

/* spはmax、PCは100単位 */
.form_input-text .max-hundred {
	min-width: 100px;
}

/* 畳（PC/SP固定） */
.form_input-text .tatami {
	flex: unset;
	width: 75px;
}

/* 選択肢 */
.form_input-text .c--select {
	min-width: calc((100% - 24px - 32px) / 2);
}

@media screen and (min-width:1024px) {
	.form_input-text input {
		width: calc((100% - 24px) / 2);
		flex: unset;
	}
	.form_input-text .hundred,
	.form_input-text .max-hundred {
		width: 150px;
	}
	.form_input-text .c--select {
		min-width: unset;
	}
}



/* 追加する */
.form_add-yoyaku {
	width: 100%;
	font-size: 18px;
	font-weight: bold;
}

.u--accordion-head:has(.form_add-request) {
	margin: 0 auto;
	padding-right: 32px;
	width: 100%;
	max-width: fit-content;
	color: var(--color-grey-dark);
	text-align: center;
}

.form_add-request {
	position: relative;
	font-size: 18px;
	font-weight: bold;
}

.form_add-request::before,
.form_add-request::after {
	position: absolute;
	top: 50%;
	translate: 0 -50%;
	width: 60px;
	height: 1px;
	background: var(--color-grey-dark);
	content: "";
}

.form_add-request::before {
	left: -68px;
}

.form_add-request::after {
	right: -84px;
}

.u--accordion-head:has(.form_add-request) + div {
	display: flex;
	flex-flow: row wrap;
	gap: 16px;
	width: 100%;
}

@media screen and (min-width:1024px) {
	.form_add-request {
		font-size: 20px;
	}
	.form_add-request::before {
		left: -84px;
	}
	.form_add-request::after {
		right: -100px;
	}
	.u--accordion-head:has(.form_add-request) + div {
		gap: 16px 32px;
	}
}










/* =====================================================
--------------------------------------------------------
来店予約のカレンダー
--------------------------------------------------------
===================================================== */

/* 検証用（実装後に削除）
body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background: rgba(0, 0, 0, 0.5);
} */

.reservation::backdrop {
	opacity: 0.5;
	background: var(--color-black);
}

.reservation {
	display: block;
	opacity: 0;
	top: 50%;
	left: 50%;
	z-index: -1;
	translate: -50% -50%;
	width: 100%;
	max-width: 1024px;
	border: none;
	background: transparent;
}

.reservation[open] {
	opacity: 1;
	z-index: 2;
}



/* 閉じる */
.reservation div:has(.dialog-close) {
	margin: 0 auto 10px;
	line-height: 0;
	text-align: right;
}

.dialog-close {
	display: inline-block;
	position: relative;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: #fff;
	cursor: pointer;
}

.dialog-close::before {
	position: absolute;
	top: 50%;
	left: 50%;
	translate: -50% -50%;
	font-size: 32px;
	font-family: 'icomoon';
	content: '\e92d';
}



/* 中身 */
.reservation div:has(.calendar) {
	margin: 0 auto;
	padding: 24px;
	background: #fff;
}



/* 注意 */
.reservation_caution {
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin: 0 auto;
	padding: 0 16px 16px 16px;
	width: 100%;
	max-width: 400px;
	min-height: 128px;
	background: var(--color-housecom-blue);
	color: #fff;
}

.reservation_caution > * {
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	max-width: 664px;
}

.reservation_caution p:has(.reservation_caution_dot) {
	display: flex;
	align-items: center;
	position: relative;
	margin-bottom: 16px;
	padding-left: 32px;
	height: 24px;
	font-size: 10px;
}

.reservation_caution p:has(.reservation_caution_dot)::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 24px;
	height: 24px;
	background: var(--color-grey-origin);
	content: "";
}

.reservation_caution .u--icon-attention {
	position: relative;
	margin-bottom: 8px;
	padding-left: 28px;
	font-size: 14px;
	font-weight: bold;
}

.reservation_caution .u--icon-attention::after {
	position: absolute;
	top: 50%;
	left: 0;
	translate: 0 -50%;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	margin-right: 4px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #fff;
	content: '';
}

.reservation_caution .u--icon-attention::before {
	z-index: 1;
	width: 24px;
	text-align: center;
	font-weight: bold;
}

.reservation_caution p:not(:has(span)) {
	font-size: 12px;
}

@media screen and (min-width:768px) {
	.reservation_caution {
		max-width: unset;
	}
}

@media screen and (min-width:1024px) {
	.reservation_caution p:has(.reservation_caution_dot) {
		font-size: 12px;
	}
	.reservation_caution p:has(.reservation_caution_dot)::before {
		margin-top: -2px;
	}
	.reservation_caution .u--icon-attention {
		font-size: 16px;
	}
	.reservation_caution p:not(:has(span)) {
		font-size: 14px;
	}
}










/* =====================================================
--------------------------------------------------------
カレンダー
--------------------------------------------------------
===================================================== */

.calendar {
	display: flex;
	flex-flow: row wrap;
	gap: 0 24px;
	margin: 0 auto;
	padding: 8px 16px 16px 16px;
	width: 100%;
	max-width: 400px;
	/* min-height: 344px; */
	border-radius: 4px 4px 0 0;
	background: var(--color-housecom-blue);
	font-weight: bold;
}

.calendar > div {
	order: 2;
	padding: 16px 8px 8px 8px;
	width: 100%;
	border-radius: 4px;
	background: #fff;
}


/* {{ yonezawa 20251007 実機検証結果からの修正 }} */
/* {{ SPで表示されるポップアップのカレンダーはCSSではなくJSのみで制御するので }} */
/* {{ .todayによる表示変更についてのコードは削除 }} */
/* .calendar > div:not(:has(.today)) { */
	/* display: none; */
/* } */




/* 年と月 */
.calendar_year-month {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 16px;
	line-height: 1;
}

.calendar_month {
	font-size: 24px;
}



/* 週と日 */
.calendar_week,
.calendar_date {
	display: flex;
	flex-flow: row wrap;
	gap: 4px;
}

.calendar_week {
	margin-bottom: 8px;
}

.calendar_week > * {
	width: calc((100% - 24px) / 7);
	font-size: 12px;
	text-align: center;
}

.calendar_week > *:first-of-type {
	color: var(--color-link-cv);
}

.calendar_week > *:last-of-type {
	color: var(--color-link-text);
}

.calendar_date > * {
	display: flex;
	justify-content: center;
	align-items: center;
	width: calc((100% - 24px) / 7);
	color: var(--color-link-text);
	aspect-ratio: 1;
}



/* {{ yonezawa 20251007 実機検証結果からの修正 }} */
/* {{ SPで表示されるポップアップのカレンダーはCSSではなくJSのみで制御するので }} */
/* {{ .todayによる表示変更についてのコードは削除 }} */
/*
/* 1日より前、最終日より後 */
/* .calendar_date > *:not(.first ~ *):not(.first), */
/* .calendar_date > *:is(.last) ~ * { */
	/* color: transparent !important; */
/* } */




/* 今日より前（過ぎた日） */
.calendar_date:has(.today) > *:not(.today ~ *):not(.today) {
	color: var(--color-grey-origin);
}



/* 選択不可 */
.calendar_date > *:is(.disabled) {
	background: var(--color-grey-pale);
	color: var(--color-black);
}

.calendar_date:has(.today) > *:not(.today ~ *):is(.disabled),
.calendar_date > *:not(.first ~ *):not(.first):is(.disabled),
.calendar_date > *:is(.last) ~ *:is(.disabled) {
	background: transparent;
}



/* タブ切り替え（SP） */
.calendar-tab {
	order: 1;
	display: flex;
	flex-direction: row;
	gap: 5px;
	margin-bottom: 16px;
	width: 100%;
}

.calendar-tab li {
	opacity: 0.6;
	width: 100%;
	border-bottom: 1px solid #fff;
	color: #fff;
	font-size: 18px;
	text-align: center;
	cursor: pointer;
}

.calendar-tab li.show {
	opacity: 1;
	position: relative;
	border-bottom: 2px solid #fff;
	color: #fff;
}

.calendar-tab li.show::after {
	position: absolute;
	bottom: -7px;
	left: 50%;
	translate: -50% 0;
	width: 10px;
	height: 5px;
	clip-path: polygon(0 0,100% 0%,50% 100%);
	background: #fff;
	content: '';
}

.calendar-tab li span {
	margin-left: 4px;
	font-size: 24px;
}

.cal-panel-second{
	display: none;
}

.calendar .calendar-panel[hidden] {
	 display: none;
}

@media (any-hover:hover) {
	.calendar_date > a {
		cursor: pointer;
	}
	.calendar_date > a:hover {
		background: var(--color-housecom-blue-light);
	}
	/* {{ .todayによる表示変更・disabledについてのコードは削除 }} */
	/* .calendar_date > *:not([class]):not(:not(.today ~ *)):not(:is(.last ~ *)),
	.calendar_date > *:is(.today):not(.disabled),
	.calendar_date > *:is(.last):not(.disabled),
	.calendar_date:not(:has(.today)) > *:is(.first):not(.disabled),
	.calendar_date:not(:has(.today)) > *:is(.first ~ *):not(.last ~ *):not(.disabled) {
		cursor: pointer;
	}
	.calendar_date > *:not([class]):not(:not(.today ~ *)):not(:is(.last ~ *)):hover,
	.calendar_date > *:is(.today):not(.disabled):hover,
	.calendar_date > *:is(.last):not(.disabled):hover,
	.calendar_date:not(:has(.today)) > *:is(.first):not(.disabled):hover,
	.calendar_date:not(:has(.today)) > *:is(.first ~ *):not(.last ~ *):not(.disabled):hover {
		background: var(--color-housecom-blue-light);
	} */
}

@media screen and (min-width:768px) {
	.calendar {
		padding: 32px;
		max-width: unset;
		/* min-height: 500px; */
		border-radius: 0;
	}
	.calendar > div {
		padding: 32px 24px 16px;
		width: calc((100% - 24px) / 2);
	}
	.calendar_year-month {
		margin-bottom: 24px;
	}

	/* {{ yonezawa 20251007 実機検証結果からの修正 }} */
	/* {{ SPで表示されるポップアップのカレンダーはCSSではなくJSのみで制御するので }} */
	/* {{ .todayによる表示変更についてのコードは削除 }} */
	/* .calendar > div:not(:has(.today)) { */
		/* display: block; */
	/* }	 */

	.calendar_month {
		font-size: 40px;
	}
	.calendar_week,
	.calendar_date {
		gap: 8px 24px;
		margin-bottom: 16px;
		font-size: 18px;
	}
	.calendar_week > *,
	.calendar_date > * {
		width: calc((100% - 144px) / 7);
	}
	.calendar-tab {
		display: none;
	}
	.cal-panel-second{
		display: block;
	}
}










/* =====================================================
--------------------------------------------------------
確認
--------------------------------------------------------
===================================================== */

.form:is(.confirm) h2 + div,
.form:is(.confirm) form_yoyaku-date,
.form:is(.confirm) h3 + div {
	font-size: 18px;
}

.form_confirm-checkbox li {
	margin-left: 1em;
	list-style-type: disc;
}

@media screen and (min-width:1024px) {
	.form:is(.confirm) {
		margin-bottom: 48px;
	}
	.form:is(.confirm) h2 +div,
	.form:is(.confirm) form_yoyaku-date,
	.form:is(.confirm) h3 + div {
		font-size: 20px;
	}
}










/* =====================================================
--------------------------------------------------------
完了
--------------------------------------------------------
===================================================== */

.form-thanks {
	margin-bottom: 32px;
}

.form-thanks h2 {
	margin-bottom: 24px;
	font-size: 20px;
	font-weight: bold;
}

.form-thanks p {
	font-size: 18px;
}

.form-thanks p + p {
	margin-top: 1em;
}

.form-thanks + div {
	margin-bottom: 48px;
	text-align: center;
}

.form-thanks + div .c--link-sub {
	width: 100%;
	max-width: 375px;
	height: 48px;
	border-width: 2px;
	font-size: 18px;
	font-weight: bold;
}

@media screen and (min-width:1024px) {
	.form-thanks {
		text-align: center;
	}
	main:not(:has(.form-select)) .form-thanks {
		margin-bottom: 40px;
	}
	.form-thanks h2 {
		margin-bottom: 32px;
		font-size: 24px;
	}
	.form-thanks p {
		font-size: 20px;
	}
	.form-thanks + div {
		margin-bottom: 64px;
	}
	.form-thanks + div .c--link-sub {
		max-width: 342px;
		height: 60px;
	}
}



/* おすすめの物件 */
.recommend {
	padding-top: 16px;
	padding-bottom: 16px;
}

.recommend > h2 {
	margin-bottom: 16px;
	font-size: 18px;
	font-weight: bold;
}

.recommend > p {
	margin-bottom: 8px;
	font-size: 16px;
	font-weight: bold;
}

@media screen and (min-width:1024px) {
	.recommend {
		padding-top: 32px;
		padding-bottom: 32px;
	}
	.recommend > h2 {
		margin-bottom: 24px;
		font-size: 24px;
	}
	.recommend > p {
		margin-bottom: 16px;
		font-size: 18px;
	}
}