@layer page {
	.template-inquiry {
		padding: 40px 0px 80px;
		background-color: var(--background-main);
	}

	.template-inquiry-required {
		display: none;
	}

	/* announce */
	.template-inquiry-announce {
		margin: 40px auto 0px;
	}

	.template-inquiry-announce-links {
		margin-top: 20px;
	}

		.template-inquiry-announce-links > a {
			position: relative;
			display: block;
			width: 100%;
			max-width: 335px;
			height: 55px;
			line-height: 55px;
			margin: 0 auto;
			text-align: center;
			font-size: 16px;
			font-weight: bold;
			border: solid 1px var(--black);
			border-radius: 28px;
			box-shadow: 0px 3px 6px #00000029;
		}

			.template-inquiry-announce-links > a::after {
				position: absolute;
				display: block;
				content: "";
				top: 20px;
				right: 20px;
				width: 8px;
				height: 8px;
				border-top: solid 1px var(--black);
				border-right: solid 1px var(--black);
				transform: rotate(135deg);
			}

			.template-inquiry-announce-links > a + a {
				margin-top: 15px;
			}

	/* 問い合わせフォーム共通 */
	.template-inquiry-form {
		margin: 40px auto 0px;
	}

	.template-inquiry-form-unit {
		background-color: var(--white);
	}

		.template-inquiry-form-unit + .template-inquiry-form-unit {
			margin-top: 40px;
		}

	.template-inquiry-form-unit-inner {
		margin: 0px auto;
		padding: 40px 0px;
	}

	.template-inquiry-form-unit-heading {
		text-align: center;
		font-weight: bold;
	}

		.template-inquiry-form-unit-heading:not(.template-inquiry-heading-emphasis) {
			margin-top: 40px;
		}

		.template-inquiry-form-unit-heading.template-inquiry-heading-emphasis {
			font-size: var(--font-size-middle);
		}

	.template-inquiry-form-unit-text {
		margin-top: 20px;
	}

	.template-inquiry-form-unit-links {
		margin-top: 20px;
	}

	/* 電話/LINE */
	.template-inquiry-form-unit-links-tel {
		display: block;
		width: 100%;
		max-width: 295px;
		height: 75px;
		margin: 0px auto;
		padding-top: 15px;
		text-align: center;
		color: var(--white);
		font-weight: bold;
		background-color: var(--orange);
		box-shadow: 0px 3px 6px #00000029;
		border-radius: 5px;
	}

	.template-inquiry-form-unit-links-tel-number {
		position: relative;
		display: block;
		margin-top: 5px;
		font-size: var(--font-size-max);
	}

		.template-inquiry-form-unit-links-tel-number::before {
			content: "";
			position: absolute;
			top: 4px;
			left: 40px;
			width: 18px;
			height: 24px;
			background-image: url(/big/pickup/images/icon_tel_white.svg);
		}

	.template-inquiry-form-unit-links-line {
		display: block;
		width: 100%;
		max-width: 295px;
		height: 90px;
		line-height: 90px;
		margin: 0px auto;
		color: var(--white);
		font-size: var(--font-size-max);
		font-weight: bold;
		background-color: var(--line);
		box-shadow: 0px 3px 6px #00000029;
		border-radius: 5px;
	}

	.template-inquiry-form-unit-links-line-icon {
		padding: 0px 10px;
	}

	.template-inquiry-form-unit-shop {
		display: block;
		width: 100%;
		max-width: 295px;
		height: 55px;
		margin: 10px auto 0px;
		text-align: center;
		font-weight: bold;
		border: solid 1px var(--black);
		border-radius: 5px;
	}

	/* メール */
	.template-inquiry-form-unit-information {
		margin-top: 20px;
	}
	
	.template-inquiry-form-unit-step {
		width: 253px;
		margin: 40px auto 0px;
	}

	.template-inquiry-form-unit-step-image {
		width: 100%;
		height: auto;
	}

	.template-inquiry-form-unit-inputs > dt {
		font-weight: bold;
	}

	.template-inquiry-form-unit-inputs-icon {
		margin-left: 10px;
		padding: 1px 10px;
		color: var(--white);
	}

		.template-inquiry-form-unit-inputs-icon.template-inquiry-inputs-required {
			background-color: var(--red);
		}

		.template-inquiry-form-unit-inputs-icon.template-inquiry-inputs-optional {
			background-color: var(--border-main);
		}
	
	.template-inquiry-form-unit-inputs-note {
		font-size: var(--font-size-min);
		font-weight: normal;
	}

	.template-inquiry-form-unit-inputs-error {
		display: none;
		margin-top: 5px;
		color: var(--red);
	}

		.template-inquiry-form-unit-inputs-error.open-item {
			display: block;
		}

	.template-inquiry-form-unit-inputs-matters > li + li {
		margin-top: 5px;
	}

	.template-inquiry-form-unit-inputs-address > li + li {
		margin-top: 20px;
	}

	.template-inquiry-form-unit-inputs-address-title {
		font-weight: bold;
	}

	.template-inquiry-form-unit-inputs-shops > li:first-child {
		font-weight: bold;
	}

	.template-inquiry-form-unit-submit {
		display: block;
		width: 100%;
		max-width: 295px;
		height: 55px;
		margin: 40px auto 0px;
		text-align: center;
		color: var(--white);
		font-weight: bold;
		background-color: var(--orange);
		box-shadow: 0px 3px 6px #00000029;
		border-radius: 5px;
	}

	/* モーダル共通 */
	.template-inquiry-modal {
		display: none;
	}

	.template-inquiry-modal.open-item {
		display: block;
	}

	.template-inquiry-modal-background {
		z-index: 10;
		position: fixed;
		top: 0;
		width: 100%;
		height: 130%;
		background-color: rgba(0, 0, 0, 0.5);
	}

	/* 店舗選択モーダル */
	.template-inquiry-modal-shop {
		z-index: 10;
		position: fixed;
		margin: auto;
		top: 20px;
		right: 0;
		left: 0;
		width: calc(100% - 40px);
		max-width: 865px;
		background-color: var(--background-main);
		box-sizing: border-box;
	}

	.template-inquiry-modal-shop-close {
		z-index: 1;
		position: absolute;
		top: 20px;
		right: 20px;
		width: 40px;
		height: 40px;
		background-color: var(--black);
		border-radius: 50%;
	}
		.template-inquiry-modal-shop-close::before {
			content: '';
			position: absolute;
			display: block;
			top: 18px;
			left: 8px;
			width: 24px;
			height: 3px;
			background-color: var(--white);
			transform: rotate(45deg);
		}

		.template-inquiry-modal-shop-close::after {
			content: '';
			position: absolute;
			display: block;
			top: 18px;
			left: 8px;
			width: 24px;
			height: 3px;
			background-color: var(--white);
			transform: rotate(135deg);
		}

	.template-inquiry-modal-shop-inner {
		width: calc(100% - 25px);
		max-width: 610px;
		margin: 0px auto;
		padding: 20px 0px 0px 20px;
	}

	.template-inquiry-modal-shop-title {
		text-align: center;
		font-size: var(--font-size-middle);
		font-weight: bold;
	}

	.template-inquiry-modal-shop-list {
		overflow-y: scroll;
		margin-top: 40px;
	}

		.template-inquiry-modal-shop-list > dt {
			font-weight: bold;
		}

		.template-inquiry-modal-shop-list > dd {
			margin-top: 10px;
		}

		.template-inquiry-modal-shop-list > dd + dt {
			margin-top: 20px;
		}

	.template-inquiry-modal-shop-list-area-button {
		width: 100%;
		padding: 15px;
		text-align: left;
		background-color: var(--white);
		box-shadow: 0px 3px 6px #00000029;
		border-radius: 7px;
	}
	
	.template-inquiry-modal-shop-list-area-button-name {
		font-weight: bold;
	}
	@media screen and (max-width: 370px) {
		.template-inquiry-modal-shop-list-area-button-name {
			font-size: 14px;
		}
	}
	
	.template-inquiry-modal-shop-list-area-button-name-icon {
		margin-left: 10px;
		padding: 1px 10px;
		color: var(--white);
		font-size: var(--font-size-min);
	}

		.template-inquiry-modal-shop-list-area-button-name-icon.template-inquiry-modal-shop-directly {
			background-color: var(--gold);
		}

		.template-inquiry-modal-shop-list-area-button-name-icon.template-inquiry-modal-shop-fc {
			background-color: var(--background-accent);
		}
	
	.template-inquiry-modal-shop-list-area-button-text {
		display: block;
		margin-top: 5px;
		font-size: var(--font-size-min);
	}



	/* smp用css */
	@media screen and (max-width: 1024px) {
		/* announce */
		.template-inquiry-announce {
			width: 85%;
			max-width: 620px;
		}

		/* 問い合わせフォーム共通 */
		.template-inquiry-form {
			width: var(--smp-content-width);
			max-width: 765px;
		}

		.template-inquiry-form-unit-inner {
			width: 85%;
			max-width: 620px;
		}

		/* 電話/LINE */
		.template-inquiry-form-unit-links > li + li {
			margin-top: 20px;
		}

		/* メール */
		.template-inquiry-form-unit-inputs {
			margin-top: 40px;
		}

			.template-inquiry-form-unit-inputs > dd {
				margin-top: 5px;
			}

			.template-inquiry-form-unit-inputs > dd + dt {
				margin-top: 40px;
			}

		.template-inquiry-form-unit-inputs-note {
			margin-left: 20px;
		}

		/* 店舗選択モーダル */
		.template-inquiry-modal-shop-inner {
			height: 490px;
		}

		.template-inquiry-modal-shop-list {
			height: 400px;
		}

		.template-inquiry-modal-shop-list-area > li {
			width: calc(100% - 20px);
		}

		.template-inquiry-modal-shop-list-area > li + li {
			margin-top: 10px;
		}
	}



	/* tb用css */
	@media screen and (min-width: 767px) and (max-width: 1024px) {
		/* 問い合わせフォーム共通 */
	}



	/* pc用css */
	@media screen and (min-width: 1025px) {
		/* announce */
		.template-inquiry-announce {
			width: 765px;
		}

		/* 問い合わせフォーム共通 */
		.template-inquiry-form {
			width: 765px;
		}

		.template-inquiry-form-unit-inner {
			width: 620px;
		}

		/* 電話/LINE */
		.template-inquiry-form-unit-links {
			display: flex;
			flex-wrap: wrap;
			gap: 0px 20px;
		}

		.template-inquiry-form-unit-links > li {
			width: calc(50% - 10px);
		}

		/* メール */
		.template-inquiry-form-unit-inputs {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
		}

			.template-inquiry-form-unit-inputs > dt {
				width: 36%;
				margin-top: 40px;
			}

			.template-inquiry-form-unit-inputs > dd {
				width: 56%;
				margin-top: 40px;
			}
	
		.template-inquiry-form-unit-inputs-note {
			display: block;
			margin-top: 10px;
		}

		/* 店舗選択モーダル */
		.template-inquiry-modal-shop-inner {
			height: 790px;
		}

		.template-inquiry-modal-shop-list {
			height: 700px;
		}

		.template-inquiry-modal-shop-list-area {
			display: flex;
			flex-wrap: wrap;
			gap: 20px 10px;
		}

			.template-inquiry-modal-shop-list-area > li {
				width: calc(50% - 10px);
			}
	}
}