@charset "UTF-8";

/* ----------------------------------------
    font-face
---------------------------------------- */
@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/inter/inter-v20-latin-regular.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/inter/inter-v20-latin-700.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: "Noto Sans JP";
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/notosansjp/noto-sans-jp-v55-japanese_latin-regular.woff2") format("woff2");
}

@font-face {
    font-display: swap;
    font-family: "Noto Sans JP";
    font-style: normal;
    font-weight: 600;
    src: url("../fonts/notosansjp/noto-sans-jp-v55-japanese_latin-600.woff2") format("woff2");
}

/* ----------------------------------------
    Reset
---------------------------------------- */
:where(html) {
	min-block-size: 100dvb;
	-webkit-text-size-adjust: 100%;
}

:where(body) {
	margin: unset;
}

:where(p) {
	margin-block-start: unset;
	margin-block-end: unset;
}

:where(blockquote, figure) {
	margin-block-start: unset;
	margin-block-end: unset;
	margin-inline-start: unset;
	margin-inline-end: unset;
}

:where(h1, h2, h3, h4, h5, h6) {
	margin-block-start: unset;
	margin-block-end: unset;
	margin-inline-start: unset;
	margin-inline-end: unset;
}

:where(table) {
	border-collapse: collapse;
}

:where(ul, ol) {
	list-style-type: "";
	margin-block-start: unset;
	margin-block-end: unset;
	padding-inline-start: unset;
}

:where(dd) {
	margin-inline-start: unset;
}

:where(dl) {
	margin-block-start: unset;
	margin-block-end: unset;
}

:where(fieldset) {
	margin-inline: unset;
	padding-block: unset;
	padding-inline: unset;
	border: unset;
}

:where(legend) {
	padding-inline: unset;
}

:where(input, select, textarea, button) {
	margin: unset;
	padding: unset;
	color: inherit;
	font-size: inherit;
	font-family: inherit;
	line-height: inherit;
	background-color: inherit;
	border: none;
	outline: none;
	appearance: none;
}

label[for],
select,
summary,
[type="radio"],
[type="checkbox"] {
	cursor: pointer;
}

button,
[role="tab"],
[role="button"],
[role="option"],
[type="button"],
[type="reset"],
[type="submit"],
::file-selector-button {
	cursor: pointer;
	touch-action: manipulation;
}

:where(i, cite, em, var, address, dfn) {
	font-style: unset;
}

:where(pre) {
	margin-block: unset;
}

:where(small) {
	font-size: unset;
}

/* ----------------------------------------
	Variable
---------------------------------------- */
:root {
	box-sizing: border-box;
	/* ----- font ----- */
	--font-size-base: max(16px, 1em);
	--font-family-base: "Hiragino Sans", Inter, "Noto Sans JP", sans-serif;
	--font-family-icon: "Material Icons Outlined";
	/* ----- leading ----- */
	--leading-base: 1.5;
	--leading: calc(1lh - 1em);
	--leading-half: calc(var(--leading) / 2);
	/* ----- color ----- */
	--color-fg-base: #1f1f1f;
	--color-bg-base: #fafafa;
	--color-black: #1f1f1f;
	--color-white: #fff;
	--color-gray: #5f5f5f;
	--color-red: #f41f1a;
	--color-blue: #4ba3f2;
	--color-yellow: #fffacd;
	--color-orange: #f39800;
	--color-deep-orange: #311e00;
	--color-green: #8ec31f;
	--color-deep-green: #2e5a00;
	/* ----- black palette ----- */
	--color-black-10: rgb(from var(--color-fg-base) r g b / 0.1);
	--color-black-20: rgb(from var(--color-fg-base) r g b / 0.2);
	--color-black-30: rgb(from var(--color-fg-base) r g b / 0.3);
	--color-black-40: rgb(from var(--color-fg-base) r g b / 0.4);
	--color-black-50: rgb(from var(--color-fg-base) r g b / 0.5);
	--color-black-60: rgb(from var(--color-fg-base) r g b / 0.6);
	--color-black-70: rgb(from var(--color-fg-base) r g b / 0.7);
	--color-black-80: rgb(from var(--color-fg-base) r g b / 0.8);
	--color-black-90: rgb(from var(--color-fg-base) r g b / 0.9);
	/* ----- white palette ----- */
	--color-white-10: rgb(from var(--color-bg-base) r g b / 0.1);
	--color-white-20: rgb(from var(--color-bg-base) r g b / 0.2);
	--color-white-30: rgb(from var(--color-bg-base) r g b / 0.3);
	--color-white-40: rgb(from var(--color-bg-base) r g b / 0.4);
	--color-white-50: rgb(from var(--color-bg-base) r g b / 0.5);
	--color-white-60: rgb(from var(--color-bg-base) r g b / 0.6);
	--color-white-70: rgb(from var(--color-bg-base) r g b / 0.7);
	--color-white-80: rgb(from var(--color-bg-base) r g b / 0.8);
	--color-white-90: rgb(from var(--color-bg-base) r g b / 0.9);
	/* ----- gray palette ----- */
	--color-gray-10: rgb(from var(--color-gray) r g b / 0.1);
	--color-gray-20: rgb(from var(--color-gray) r g b / 0.2);
	--color-gray-30: rgb(from var(--color-gray) r g b / 0.3);
	--color-gray-40: rgb(from var(--color-gray) r g b / 0.4);
	--color-gray-50: rgb(from var(--color-gray) r g b / 0.5);
	--color-gray-60: rgb(from var(--color-gray) r g b / 0.6);
	--color-gray-70: rgb(from var(--color-gray) r g b / 0.7);
	--color-gray-80: rgb(from var(--color-gray) r g b / 0.8);
	--color-gray-90: rgb(from var(--color-gray) r g b / 0.9);
	/* ----- background ----- */
	--background-base: var(--color-gray-10);
	/* ----- border ----- */
	--border-base: 1px solid var(--color-gray-30);
	/* ----- border-radius ----- */
	--radius-small: 4px;
	--radius-base: 12px;
	--radius-full: calc(1px / 0);
	/* ----- box-shadow ----- */
	--box-shadow-base: 0 2px 6px var(--color-gray-20);
	/* ----- duration ----- */
	--duration-200: 0.2s;
	--duration-300: 0.3s;
	--duration-400: 0.4s;
	/* ----- space block ----- */
	--space-block-025: 0.25em;
	--space-block-05: 0.5em;
	--space-block-075: 0.75em;
	--space-block-1: 1em;
	--space-block-125: 1.25em;
	--space-block-15: 1.5em;
	--space-block-175: 1.75em;
	--space-block-2: 2em;
	--space-block-25: 2.5em;
	--space-block-3: 3em;
	--space-block-35: 3.5em;
	--space-block-4: 4em;
	/* ----- space inline ----- */
	--space-inline-025: 0.25ic;
	--space-inline-05: 0.5ic;
	--space-inline-075: 0.75ic;
	--space-inline-1: 1ic;
	--space-inline-125: 1.25ic;
	--space-inline-15: 1.5ic;
	--space-inline-175: 1.75ic;
	--space-inline-2: 2ic;
	--space-inline-25: 2.5ic;
}

/* ----------------------------------------
	Base
---------------------------------------- */
*,
*::before,
*::after {
	box-sizing: inherit;
}

/* ---------- html ---------- */
html {
	color: var(--color-fg-base);
	font-size: var(--font-size-base);
	font-family: var(--font-family-base);
	line-height: var(--leading-base);
	background-color: var(--color-bg-base);
}

/* ---------- anchor ---------- */
a {
	text-decoration: none;
	transition-property: color;
	transition-duration: var(--duration-200);
	&:any-link {
		color: var(--color-black);
	}
	&:focus-visible {
		color: var(--color-blue);
		outline: 2px solid var(--color-blue);
	}
	@media (any-hover: hover) {
		&:hover {
			color: var(--color-blue);
		}
	}
}

/* ---------- blockquote ---------- */
.blockquote {
	display: grid;
	row-gap: var(--space-block-025);
	margin-inline: auto;
	inline-size: min(100%, 40ic);
}

.blockquote_content {
	padding-block: var(--space-block-1);
	padding-inline: var(--space-inline-1);
	color: var(--color-black-80);
	font-size: 0.875rem;
	font-style: italic;
	line-height: 1.75;
	background-color: var(--background-base);
	border-inline-start: 4px solid var(--color-gray-30);
}

.blockquote_source {
	padding-inline: var(--space-inline-025);
	color: var(--color-gray);
	font-size: 0.75rem;
	font-style: italic;
	text-align: right;
}

@container main (inline-size >= 358px) {
	.blockquote_content {
		font-size: 1rem;
	}
	.blockquote_source {
		font-size: 0.875rem;
	}
}

/* ---------- img ---------- */
img {
	max-inline-size: 100%;
	block-size: auto;
	vertical-align: bottom;
}

/* ---------- input ---------- */
input:is(
[type="text"],
[type="email"],
[type="tel"],
[type="number"]) {
	padding-block: var(--space-block-025);
	padding-inline: var(--space-inline-05);
	inline-size: min(100%, 15ic);
	background-color: var(--color-white);
	border: 2px solid var(--color-gray-30);
	&[disabled] {
		background-color: var(--background-base);
		border: 2px dotted var(--color-gray-30);
		cursor: not-allowed;
	}
	&[readonly] {
		color: var(--color-gray-80);
		font-style: italic;
		background-color: var(--background-base);
		&:focus {
			background-color: var(--background-base);
		}
	}
	&::placeholder {
		color: var(--color-gray-80);
		font-style: italic;
	}
	&:focus {
		background-color: rgb(from var(--color-yellow) r g b / 0.6);
		border: 2px solid var(--color-blue);
	}
}

/* ---------- textarea ---------- */
textarea {
	padding-block: var(--space-block-025);
	padding-inline: var(--space-inline-05);
	inline-size: min(100%, 30ic);
	block-size: 5lh;
	vertical-align: bottom;
	background-color: var(--color-white);
	border: 2px solid var(--color-gray-30);
	resize: block;
	&[disabled] {
		background-color: var(--background-base);
		border: 2px dotted var(--color-gray-30);
		cursor: not-allowed;
	}
	&[readonly] {
		color: var(--color-gray-80);
		font-style: italic;
		background-color: var(--background-base);
		&:focus {
			background-color: var(--background-base);
		}
	}
	&::placeholder {
		color: var(--color-gray-80);
		font-style: italic;
	}
	&:focus {
		background-color: rgb(from var(--color-yellow) r g b / 0.6);
		border: 2px solid var(--color-blue);
	}
}

/* ---------- select ---------- */
.select_wrap {
	position: relative;
	display: inline-block;
	&::after {
		content: "";
		position: absolute;
		inset-block-start: 50%;
		inset-inline-end: var(--space-inline-075);
		translate: 0 -50%;
		display: inline-block;
		inline-size: 1em;
		block-size: 1em;
		box-shadow: 0 0 0 1rem var(--color-black) inset;
		clip-path: polygon(
			calc(100% * 3 / 16) calc(100% * 5 / 16),
			calc(100% * 8 / 16) calc(100% * 10 / 16),
			calc(100% * 13 / 16) calc(100% * 5 / 16),
			calc(100% * 14 / 16) calc(100% * 6 / 16),
			calc(100% * 8 / 16) calc(100% * 12 / 16),
			calc(100% * 2 / 16) calc(100% * 6 / 16)
		);
		pointer-events: none;
	}
}

select {
	padding-block: var(--space-block-025);
	padding-inline-start: var(--space-inline-05);
	padding-inline-end: var(--space-inline-25);
	inline-size: fit-content;
	background-color: var(--color-white);
	border: 2px solid var(--color-gray-30);
	&:focus {
		border: 2px solid var(--color-blue);
	}
}

/* ---------- input[type="radio"], input[type="checkbox"] ---------- */
input:is([type="radio"], [type="checkbox"]) {
	--selector-size: 1lh;
	--selector-color: #fff;
	display: grid;
	place-items: center;
	inline-size: var(--selector-size);
	aspect-ratio: 1;
	font-size: 0.875rem;
	background-color: var(--selector-color);
	border: 2px solid var(--color-gray-30);
	transition-property: border-color;
	transition-duration: var(--duration-200);
	&::before {
		content: "";
		display: inline-block;
		scale: 0;
		transition-property: scale;
		transition-duration: var(--duration-200);
	}
	&:checked {
		&::before {
			scale: 1;
		}
	}
	&:focus-visible {
		outline: 2px solid var(--color-blue);
	}
}

@container main (inline-size >= 358px) {
	input:is([type="radio"], [type="checkbox"]) {
		font-size: 1rem;
	}
}

/* ---------- input[type="radio"] ---------- */
input[type="radio"] {
	border-radius: var(--radius-full);
	&::before {
		inline-size: calc(var(--selector-size) / 2);
		aspect-ratio: 1;
		background-color: var(--color-orange);
		border-radius: var(--radius-full);
	}
	&:checked {
		border-color: var(--color-orange);
	}
}

/* ---------- input[type="checkbox"] ---------- */
input[type="checkbox"] {
	&::before {
		inline-size: 100%;
		block-size: 100%;
		box-shadow: 0 0 0 1rem var(--color-green) inset;
		clip-path: polygon(
			calc(100% * 3 / 16) calc(100% * 7 / 16),
			calc(100% * 6 / 16) calc(100% * 10 / 16),
			calc(100% * 13 / 16) calc(100% * 3 / 16),
			calc(100% * 15 / 16) calc(100% * 5 / 16),
			calc(100% * 6 / 16) calc(100% * 14 / 16),
			calc(100% * 1 / 16) calc(100% * 9 / 16)
		);
	}
	&:checked {
		border-color: var(--color-green);
	}
}

/* ---------- input[type="submit"] ---------- */
input[type="submit"] {
	padding-block: var(--space-block-05);
	inline-size: min(100%, 35rem);
	color: var(--color-white);
	font-size: 0.875rem;
	font-weight: 600;
	background-color: var(--color-orange);
	border-radius: var(--radius-small);
	transition-property: background-color;
	transition-duration: var(--duration-200);
	&[disabled] {
		background-color: rgb(from var(--color-green) r g b / 0.6);
		cursor: not-allowed;
		@media (any-hover: hover) {
			&:hover {
				background-color: rgb(from var(--color-green) r g b / 0.6);
			}
		}
	}
	&:focus-visible {
		background-color: var(--color-green);
		outline: 2px solid var(--color-blue);
	}
	@media (any-hover: hover) {
		&:hover {
			background-color: var(--color-green);
		}
	}
}

@container main (inline-size >= 358px) {
	input[type="submit"] {
		padding-block: var(--space-block-075);
		font-size: 1rem;
	}
}

/* ---------- unordered list ---------- */
ul {
	& li {
		position: relative;
		padding-inline-start: 1lh;
		&::before {
			position: absolute;
			inset-block-start: calc((1lh - 1ex) / 2);
			inset-inline-start: calc((1lh - 1ex) / 2);
			content: "";
			display: inline-block;
			inline-size: 0.8ex;
			aspect-ratio: 1;
			background-color: var(--color-black);
			border-radius: var(--radius-full);
		}
		& ul {
			margin-block-start: 0;
			& li {
				&::before {
					background-color: var(--color-white);
					border: 1px solid var(--color-black);
				}
			}
		}
	}
}

/* ---------- ordered list ---------- */
ol {
	counter-reset: ordered_list;
	& li {
		position: relative;
		padding-inline-start: 1lh;
		counter-increment: ordered_list;
		&::before {
			position: absolute;
			inset-inline-start: calc((1lh - 0.6rem) / 2);
			content: counter(ordered_list) ".";
		}
		& ol {
			margin-block-start: 0;
		}
	}
}

/* ---------- wpcf7-radio, wpcf7-checkbox, wpcf7-acceptance ---------- */
:is(.wpcf7-radio, .wpcf7-checkbox, .wpcf7-acceptance) {
	--selector-row-gap: var(--space-block-05);
	display: grid;
	row-gap: var(--selector-row-gap);
	& label {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		align-items: center;
		column-gap: var(--space-inline-05);
		inline-size: fit-content;
		cursor: pointer;
	}
	.wpcf7-list-item {
		margin-inline-start: 0; /* for Lightning */
	}
	.wpcf7-list-item-label {
		font-size: 0.875rem;
	}
	.has-free-text {
		display: grid;
		row-gap: var(--selector-row-gap);
	}
}

@container main (inline-size >= 358px) {
	:is(.wpcf7-radio, .wpcf7-checkbox, .wpcf7-acceptance) {
		--selector-row-gap: var(--space-block-075);
		.wpcf7-list-item-label {
			font-size: 1rem;
		}
	}
}

/* ---------- wpcf7-select ---------- */
.wpcf7-form-control-wrap {
	&:has(.wpcf7-select) {
		position: relative;
		&::after {
			content: "";
			position: absolute;
			inset-block-start: 50%;
			inset-inline-end: 1rem;
			translate: 0 -50%;
			display: inline-block;
			inline-size: 1rem;
			block-size: 1rem;
			box-shadow: 0 0 0 1rem var(--color-black) inset;
			clip-path: polygon(
				calc(100% * 3 / 16) calc(100% * 5 / 16),
				calc(100% * 8 / 16) calc(100% * 10 / 16),
				calc(100% * 13 / 16) calc(100% * 5 / 16),
				calc(100% * 14 / 16) calc(100% * 6 / 16),
				calc(100% * 8 / 16) calc(100% * 12 / 16),
				calc(100% * 2 / 16) calc(100% * 6 / 16)
			);
			pointer-events: none;
		}
	}
}

/* ---------- alert box ---------- */
.alert_box {
	margin-inline: auto;
	padding: 1rem;
	max-inline-size: 480px;
	font-size: 1rem;
	border-radius: 4px;
	&.infomation {
		color: #856404;
		background-color: #fff3cd;
		border: 1px solid #ffeeba;
	}
	&.success {
		color: #155724;
		background-color: #d4edda;
		border: 1px solid #c3e6cb;
	}
	&.note {
		color: #0c5460;
		background-color: #d1ecf1;
		border: 1px solid #bee5eb;
	}
	&.warning {
		color: #721c24;
		background-color: #f8d7da;
		border: 1px solid #f5c6cb;
	}
}

/* ---------- zipaddr ---------- */
#autozip {
	display: none !important;
}

:is([id^="zip"]) {
	&::placeholder {
		color: transparent;
	}
}

/* ---------- Flatpickr ---------- */
[class^="flatpickr"] {
	cursor: pointer;
}

/* ---------- SmartPhoto ---------- */
:is(.smartphoto-list, .smartphoto-arrows, .smartphoto-nav) {
	& li {
		padding-inline-start: 0;
		&::before {
			content: none;
		}
	}
}

.smartphoto-caption {
	font-size: 0.875rem;
}

/* ---------- visually hidden ---------- */
.visually_hidden {
	position: absolute;
	margin: -1px;
	padding: 0;
	inline-size: 1px;
	block-size: 1px;
	border: none;
	white-space: nowrap;
	clip-path: inset(50%);
	overflow: hidden;
}

/* ---------- prefers reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 1ms !important;
		animation-duration: 1ms !important;
		animation-iteration-count: 1 !important;
	}
}

/* ----------------------------------------
	Theme
---------------------------------------- */
body {
	margin-inline: auto;
	padding: 1rem;
	max-inline-size: 1152px;
}