@charset "utf-8";

:root {
	color-scheme: light;
}

html {
	scroll-behavior: smooth;
}

body {
	background: #f7f7f7;
}

button,
input,
select {
	font: inherit;
}

button,
select {
	cursor: pointer;
}

a {
	text-decoration: none;
}

[hidden] {
	display: none !important;
}

/** GTMのnoscript iframeを、インラインstyleを使わず非表示にする。 */
.gtm-noscript {
	display: none;
	visibility: hidden;
}

:where(a, button, input, select, .terms):focus-visible {
	outline: 2px solid var(--color-black);
	outline-offset: 3px;
}

/**
 * ヘッダー
 */

.site-header {
	background: var(--color-vinarchy);
}

.site-header-inner {
	max-width: 1024px;
	margin: auto;
	min-height: 76px;
	padding: min(calc(18 / var(--vw-min) * 100vw), 18px) min(calc(24 / var(--vw-min) * 100vw), 24px);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: min(calc(20 / var(--vw-min) * 100vw), 20px);

	@media screen and (max-width: 768px) {
		padding: min(calc(30 / var(--vw-min) * 100vw), 15px) min(calc(36 / var(--vw-min) * 100vw), 18px);
		gap: min(calc(40 / var(--vw-min) * 100vw), 20px);
		min-height: 64px;
	}
}

.brand,
.brand a {
	font-family: var(--font-en);
	font-size: min(calc(22 / var(--vw-min) * 100vw), 22px);
	letter-spacing: .13em;
	color: var(--color-white);
	font-weight: 700;

	@media screen and (max-width: 768px) {
		font-size: min(calc(34 / var(--vw-min) * 100vw), 17px);
	}
}

.site-footer > span a {
	font-family: var(--font-en);
	font-size: min(calc(22 / var(--vw-min) * 100vw), 22px);
	letter-spacing: .13em;
	color: var(--color-white);
	font-weight: 700;
}

.header-subtitle {
	color: #d6d6d6;
	font-size: min(calc(13 / var(--vw-min) * 100vw), 13px);

	@media screen and (max-width: 768px) {
		font-size: 11px;
	}
}

/**
 * ページ幅・導入エリア
 */

.page-shell {
	max-width: 970px;
	margin: 0 auto;
	padding: 0 min(calc(24 / var(--vw-min) * 100vw), 24px) min(calc(80 / var(--vw-min) * 100vw), 80px);

	@media screen and (max-width: 768px) {
		padding: 0 min(calc(28 / var(--vw-min) * 100vw), 14px) min(calc(110 / var(--vw-min) * 100vw), 55px);
	}
}

.main-visual {

}

.main-visual img {
	width: 100%;
	height: auto;
	object-fit: contain;
}

.hero {
	margin: min(calc(28 / var(--vw-min) * 100vw), 28px) 0 0;
	padding: min(calc(44 / var(--vw-min) * 100vw), 44px) min(calc(52 / var(--vw-min) * 100vw), 52px);
	color: var(--color-white);
	background: var(--color-vinarchy);

	@media screen and (max-width: 768px) {
		margin: min(calc(28 / var(--vw-min) * 100vw), 14px) 0 0;
		padding: min(calc(60 / var(--vw-min) * 100vw), 30px) min(calc(48 / var(--vw-min) * 100vw), 24px) min(calc(64 / var(--vw-min) * 100vw), 32px);
	}
}

.hero > .eyebrow {
	font-size: min(calc(15 / var(--vw-min) * 100vw), 15px);
}

.eyebrow {
	margin: 0;
	font-size: min(calc(11 / var(--vw-min) * 100vw), 11px);
	font-weight: 700;
	letter-spacing: .23em;

	@media screen and (max-width: 768px) {
		font-size: 11px;
	}
}

.section-kicker {
	margin: 0;
	font-size: min(calc(11 / var(--vw-min) * 100vw), 11px);
	font-weight: 700;
	letter-spacing: .23em;

	@media screen and (max-width: 768px) {
		font-size: 11px;
	}
}

.eyebrow {
	color: #bdbdbd;
}

.hero h1 {
	margin: min(calc(11 / var(--vw-min) * 100vw), 11px) 0 min(calc(10 / var(--vw-min) * 100vw), 10px);
	font-family: var(--font-main);
	font-size: min(calc(40 / var(--vw-min) * 100vw), 40px);
	font-weight: 700;
	letter-spacing: .07em;

	@media screen and (max-width: 768px) {
		margin: min(calc(22 / var(--vw-min) * 100vw), 11px) 0 min(calc(20 / var(--vw-min) * 100vw), 10px);
		font-size: min(calc(54 / var(--vw-min) * 100vw), 27px);
	}
}

.hero p:last-child {
	margin: 0;
	font-size: min(calc(16 / var(--vw-min) * 100vw), 16px);
	line-height: 1.9;

	@media screen and (max-width: 768px) {
		font-size: min(calc(28 / var(--vw-min) * 100vw), 14px);
	}
}

/**
 * 入力・確認・完了のステップ表示
 */

.steps {
	display: flex;
	justify-content: center;
	gap: 0;
	list-style: none;
	padding: min(calc(30 / var(--vw-min) * 100vw), 30px) 0 min(calc(34 / var(--vw-min) * 100vw), 34px);
	margin: 0;

	@media screen and (max-width: 768px) {
		padding: min(calc(48 / var(--vw-min) * 100vw), 24px) 0;
	}
}

.steps li {
	position: relative;
	display: flex;
	align-items: center;
	gap: min(calc(9 / var(--vw-min) * 100vw), 9px);
	color: #999;
	font-size: 12px;
	font-weight: 700;

	@media screen and (max-width: 768px) {
		gap: min(calc(18 / var(--vw-min) * 100vw), 9px);
		font-size: 12px;
	}
}

.steps li:not(:last-child)::after {
	content: "";
	width: min(calc(64 / var(--vw-min) * 100vw), 64px);
	height: 1px;
	background: #ccc;
	margin: 0 min(calc(20 / var(--vw-min) * 100vw), 20px);

	@media screen and (max-width: 768px) {
		width: min(calc(40 / var(--vw-min) * 100vw), 20px);
		height: 1px;
		margin: 0 min(calc(20 / var(--vw-min) * 100vw), 10px);
	}
}

.steps .current {
	color: var(--color-vinarchy);
}

.steps .done {
	color: #555;
}

.steps li span {
	font-size: min(calc(22 / var(--vw-min) * 100vw), 22px);

	@media screen and (max-width: 768px) {
		font-size: min(calc(28 / var(--vw-min) * 100vw), 14px);
	}
}

/**
 * フォームのパネル・見出し
 */

.panel {
	padding: min(calc(38 / var(--vw-min) * 100vw), 38px) min(calc(44 / var(--vw-min) * 100vw), 44px) min(calc(42 / var(--vw-min) * 100vw), 42px);
	margin-bottom: min(calc(20 / var(--vw-min) * 100vw), 20px);
	background: var(--color-white);
	border: 1px solid #e1e1e1;

	@media screen and (max-width: 768px) {
		padding: min(calc(54 / var(--vw-min) * 100vw), 27px) min(calc(40 / var(--vw-min) * 100vw), 20px) min(calc(60 / var(--vw-min) * 100vw), 30px);
		margin-bottom: min(calc(40 / var(--vw-min) * 100vw), 20px);
	}
}

.section-kicker {
	color: #777;
}

.panel h2 {
	margin: min(calc(6 / var(--vw-min) * 100vw), 6px) 0 min(calc(6 / var(--vw-min) * 100vw), 6px);
	font-family: var(--font-main);
	font-weight: 700;
	font-size: min(calc(24 / var(--vw-min) * 100vw), 24px);
	letter-spacing: .05em;

	@media screen and (max-width: 768px) {
		margin: min(calc(12 / var(--vw-min) * 100vw), 6px) 0 min(calc(12 / var(--vw-min) * 100vw), 6px);
		font-size: min(calc(48 / var(--vw-min) * 100vw), 24px);
	}
}

.lead {
	margin: 0 0 min(calc(28 / var(--vw-min) * 100vw), 28px);
	color: #666;
	font-size: min(calc(13 / var(--vw-min) * 100vw), 13px);

	@media screen and (max-width: 768px) {
		margin: 0 0 min(calc(56 / var(--vw-min) * 100vw), 28px);
		font-size: min(calc(26 / var(--vw-min) * 100vw), 13px);
	}
}

/**
 * 基本情報の入力欄
 */

.field-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: min(calc(22 / var(--vw-min) * 100vw), 22px) min(calc(20 / var(--vw-min) * 100vw), 20px);

	@media screen and (max-width: 768px) {
		gap: min(calc(40 / var(--vw-min) * 100vw), 20px);
		grid-template-columns: 1fr;
	}
}

.field {
	min-width: 0;
}

.field > label:not(.consent) {
	display: block;
	margin-bottom: min(calc(8 / var(--vw-min) * 100vw), 8px);
	font-size: min(calc(14 / var(--vw-min) * 100vw), 14px);
	font-weight: 700;

	@media screen and (max-width: 768px) {
		margin-bottom: min(calc(16 / var(--vw-min) * 100vw), 8px);
		font-size: min(calc(28 / var(--vw-min) * 100vw), 14px);
	}
}

.choice-detail > label {
	display: block;
	margin-bottom: min(calc(8 / var(--vw-min) * 100vw), 8px);
	font-size: min(calc(14 / var(--vw-min) * 100vw), 14px);
	font-weight: 700;

	@media screen and (max-width: 768px) {
		margin-bottom: min(calc(16 / var(--vw-min) * 100vw), 8px);
		font-size: 12px;
	}
}

.required {
	display: inline-block;
	vertical-align: baseline;
	white-space: nowrap;

	@media screen and (max-width: 768px) {
		margin-left: min(calc(12 / var(--vw-min) * 100vw), 6px);
	}
}

.required::after {
	content: "*";
	color: #b43237;
	font-weight: 700;
}

.field input:not([type="checkbox"]) {
	display: block;
	width: 100%;
	min-height: 48px;
	padding: min(calc(10 / var(--vw-min) * 100vw), 10px) min(calc(13 / var(--vw-min) * 100vw), 13px);
	border: 1px solid #bdbdbd;
	background: var(--color-white);
	color: var(--color-black);

	@media screen and (max-width: 768px) {
		padding: min(calc(20 / var(--vw-min) * 100vw), 10px) min(calc(26 / var(--vw-min) * 100vw), 13px);
	}
}

.field select {
	display: block;
	width: 100%;
	min-height: 48px;
	padding: min(calc(10 / var(--vw-min) * 100vw), 10px) min(calc(13 / var(--vw-min) * 100vw), 13px);
	border: 1px solid #bdbdbd;
	background: var(--color-white);
	color: var(--color-black);

	@media screen and (max-width: 768px) {
		padding: min(calc(20 / var(--vw-min) * 100vw), 10px) min(calc(26 / var(--vw-min) * 100vw), 13px);
	}
}

.choice-detail input {
	display: block;
	width: 100%;
	min-height: 48px;
	padding: min(calc(10 / var(--vw-min) * 100vw), 10px) min(calc(13 / var(--vw-min) * 100vw), 13px);
	border: 1px solid #bdbdbd;
	background: var(--color-white);
	color: var(--color-black);

	@media screen and (max-width: 768px) {
		padding: min(calc(20 / var(--vw-min) * 100vw), 10px) min(calc(26 / var(--vw-min) * 100vw), 13px);
	}
}

.field input:focus,
.field select:focus,
.choice-detail input:focus {
	border-color: var(--color-black);
}

.field input::placeholder {
	color: #999;
}

.hint {
	margin: min(calc(6 / var(--vw-min) * 100vw), 6px) 0 0;
	color: #666;
	font-size: 12px;

	@media screen and (max-width: 768px) {
		margin: min(calc(12 / var(--vw-min) * 100vw), 6px) 0 0;
		font-size: 12px;
	}
}

.hint-note {
	display: flex;
	align-items: flex-start;
	gap: .25em;

	&::before {
		content: "※";
		flex-shrink: 0;
	}

	> span {
		min-width: 0;
	}
}

.field-error {
	margin: min(calc(6 / var(--vw-min) * 100vw), 6px) 0 0;
	color: #b43237;
	font-size: 12px;
	font-weight: 700;

	@media screen and (max-width: 768px) {
		margin: min(calc(12 / var(--vw-min) * 100vw), 6px) 0 0;
		font-size: 12px;
	}
}

#error-agreed {
	text-align: center;
}

/**
 * アンケートの設問・回答選択肢
 */

.question {
	margin: 0;
	/* padding: min(calc(25 / var(--vw-min) * 100vw), 25px) 0 min(calc(28 / var(--vw-min) * 100vw), 28px); */
	border: 0;
	border-top: 1px solid #ddd;
	min-width: 0;

	@media screen and (max-width: 768px) {
		/* padding: min(calc(50 / var(--vw-min) * 100vw), 25px) 0 min(calc(56 / var(--vw-min) * 100vw), 28px); */
	}
}

.question:first-of-type {
	border-top: 0;
	padding-top: 0;
}

.question {
	margin-bottom: min(calc(35 / var(--vw-min) * 100vw), 35px);

	@media screen and (max-width: 768px) {
		margin-bottom: min(calc(35 / var(--vw-min) * 100vw), 35px);
	}
}

.question fieldset:last-child {
	margin-bottom: 0;

	@media screen and (max-width: 768px) {
		margin-bottom: 0;
	}
}

.question legend {
	width: 100%;
	padding: 0;
	margin-bottom: min(calc(14 / var(--vw-min) * 100vw), 14px);
	color: var(--color-black);
	font-size: min(calc(15 / var(--vw-min) * 100vw), 15px);
	font-weight: 700;
	line-height: 1.7;

	@media screen and (max-width: 768px) {
		margin-bottom: min(calc(28 / var(--vw-min) * 100vw), 14px);
		font-size: min(calc(30 / var(--vw-min) * 100vw), 15px);
	}
}

.question-number {
	display: inline-block;
	margin-right: min(calc(12 / var(--vw-min) * 100vw), 12px);
	color: #555;
	font-family: var(--font-en);
	font-size: min(calc(17 / var(--vw-min) * 100vw), 17px);

	@media screen and (max-width: 768px) {
		margin-right: min(calc(24 / var(--vw-min) * 100vw), 12px);
		font-size: min(calc(34 / var(--vw-min) * 100vw), 17px);
	}
}

.choice-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: min(calc(10 / var(--vw-min) * 100vw), 10px);

	@media screen and (max-width: 768px) {
		gap: min(calc(20 / var(--vw-min) * 100vw), 10px);
		grid-template-columns: 1fr;
	}
}

.choice-group {
	min-width: 0;
}

.choice {
	display: flex;
	align-items: flex-start;
	gap: min(calc(10 / var(--vw-min) * 100vw), 10px);
	width: 100%;
	min-height: 48px;
	padding: min(calc(12 / var(--vw-min) * 100vw), 12px) min(calc(13 / var(--vw-min) * 100vw), 13px);
	border: 1px solid #ddd;
	cursor: pointer;
	font-size: min(calc(13 / var(--vw-min) * 100vw), 13px);
	line-height: 1.6;
	transition: border-color .15s, background-color .15s;

	@media screen and (max-width: 768px) {
		gap: min(calc(20 / var(--vw-min) * 100vw), 10px);
		padding: min(calc(24 / var(--vw-min) * 100vw), 12px) min(calc(26 / var(--vw-min) * 100vw), 13px);
		font-size: min(calc(26 / var(--vw-min) * 100vw), 13px);
	}
}

.choice:hover {
	border-color: #888;
	background: #fafafa;
}

.choice:has(input:checked) {
	border-color: var(--color-black);
	background: #f2f2f2;
}

.choice input {
	width: min(calc(17 / var(--vw-min) * 100vw), 17px);
	height: min(calc(17 / var(--vw-min) * 100vw), 17px);
	margin: min(calc(1 / var(--vw-min) * 100vw), 1px) 0 0;
	accent-color: var(--color-black);
	flex: none;

	@media screen and (max-width: 768px) {
		width: min(calc(34 / var(--vw-min) * 100vw), 17px);
		height: min(calc(34 / var(--vw-min) * 100vw), 17px);
		margin: min(calc(2 / var(--vw-min) * 100vw), 1px) 0 0;
	}
}

.choice-detail {
	padding: min(calc(9 / var(--vw-min) * 100vw), 9px) min(calc(3 / var(--vw-min) * 100vw), 3px) min(calc(5 / var(--vw-min) * 100vw), 5px);

	@media screen and (max-width: 768px) {
		padding: min(calc(18 / var(--vw-min) * 100vw), 9px) min(calc(6 / var(--vw-min) * 100vw), 3px) min(calc(10 / var(--vw-min) * 100vw), 5px);
	}
}

.choice-detail > label {
	font-size: 12px;
}

/**
 * 応募規約・同意欄
 */

.terms {
	max-height: min(calc(230 / var(--vw-min) * 100vw), 230px);
	overflow-y: auto;
	padding: min(calc(18 / var(--vw-min) * 100vw), 18px) min(calc(20 / var(--vw-min) * 100vw), 20px);
	margin: min(calc(18 / var(--vw-min) * 100vw), 18px) 0 min(calc(20 / var(--vw-min) * 100vw), 20px);
	border: 1px solid #ccc;
	background: #fafafa;
	font-size: min(calc(13 / var(--vw-min) * 100vw), 13px);
	line-height: 1.85;

	@media screen and (max-width: 768px) {
		max-height: min(calc(460 / var(--vw-min) * 100vw), 230px);
		padding: min(calc(36 / var(--vw-min) * 100vw), 18px) min(calc(40 / var(--vw-min) * 100vw), 20px);
		margin: min(calc(36 / var(--vw-min) * 100vw), 18px) 0 min(calc(40 / var(--vw-min) * 100vw), 20px);
		font-size: min(calc(26 / var(--vw-min) * 100vw), 13px);
	}
}

/** HTML規約の見出し・段落・リンクを整える。 */
.terms h3,
.terms h4 {
	margin: 0 0 .5em;
	font-weight: 700;
}

.terms p {
	margin-bottom: 1em;
}

/** 原稿の段落ごとに余白を付け、段落内の改行はそのまま表示する。 */
.terms-section {
	margin-bottom: 1em;
}

.terms .terms-line {
	margin-bottom: 0;
}

/** 記号・番号を独立した列にして、本文の折り返しや続きの行を揃える。 */
.terms-item {
	display: flex;
	align-items: flex-start;
	gap: .25em;

	> .terms-prefix {
		flex-shrink: 0;
		white-space: pre;
	}
}

.terms-text {
	min-width: 0;
	white-space: pre-wrap;
}

.terms > :last-child {
	margin-bottom: 0;
}

.terms a {
	text-decoration: underline;
	overflow-wrap: anywhere;
}

.consent {
	display: flex;
	align-items: center;
  justify-content: center;
	gap: min(calc(11 / var(--vw-min) * 100vw), 11px);
	font-size: min(calc(14 / var(--vw-min) * 100vw), 14px);
	font-weight: 700;
	cursor: pointer;

	@media screen and (max-width: 768px) {
		gap: min(calc(22 / var(--vw-min) * 100vw), 11px);
		font-size: min(calc(28 / var(--vw-min) * 100vw), 14px);
	}
}

.consent input {
	width: min(calc(18 / var(--vw-min) * 100vw), 18px);
	height: min(calc(18 / var(--vw-min) * 100vw), 18px);
	margin: 0;
	accent-color: var(--color-black);
	flex: none;

	@media screen and (max-width: 768px) {
		width: min(calc(36 / var(--vw-min) * 100vw), 18px);
		height: min(calc(36 / var(--vw-min) * 100vw), 18px);
	}
}

/**
 * 操作ボタン
 */

.actions {
	display: flex;
	justify-content: center;
	gap: min(calc(14 / var(--vw-min) * 100vw), 14px);
	margin-top: min(calc(25 / var(--vw-min) * 100vw), 25px);

	@media screen and (max-width: 768px) {
		gap: min(calc(28 / var(--vw-min) * 100vw), 14px);
		margin-top: min(calc(50 / var(--vw-min) * 100vw), 25px);
		flex-direction: column-reverse;
	}
}

.button {
	min-height: 52px;
	min-width: 220px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: min(calc(12 / var(--vw-min) * 100vw), 12px) min(calc(24 / var(--vw-min) * 100vw), 24px);
	border: 1px solid var(--color-black);
	text-decoration: none;
	font-size: min(calc(14 / var(--vw-min) * 100vw), 14px);
	font-weight: 700;
	transition: opacity .15s, background-color .15s;

	@media screen and (max-width: 768px) {
		padding: min(calc(24 / var(--vw-min) * 100vw), 12px) min(calc(48 / var(--vw-min) * 100vw), 24px);
		font-size: min(calc(28 / var(--vw-min) * 100vw), 14px);
	}
}

.actions .button {
	@media screen and (max-width: 768px) {
		width: 100%;
	}
}

.button:hover {
	opacity: .87;
}

.primary {
	background: var(--color-black);
	color: var(--color-white);
}

.secondary {
	background: var(--color-white);
	color: var(--color-black);
}

.button:disabled {
	border-color: #bcb4b3;
	background: #bcb4b3;
	cursor: not-allowed;
	opacity: 1;
}

.setup-note {
	text-align: center;
	color: #9e4441;
	font-size: 12px;
}

/**
 * エラー・案内メッセージ
 */

.notice {
	padding: min(calc(14 / var(--vw-min) * 100vw), 14px) min(calc(18 / var(--vw-min) * 100vw), 18px);
	margin-bottom: min(calc(20 / var(--vw-min) * 100vw), 20px);
	border-radius: 3px;
	font-size: min(calc(13 / var(--vw-min) * 100vw), 13px);

	@media screen and (max-width: 768px) {
		padding: min(calc(28 / var(--vw-min) * 100vw), 14px) min(calc(36 / var(--vw-min) * 100vw), 18px);
		margin-bottom: min(calc(40 / var(--vw-min) * 100vw), 20px);
		font-size: min(calc(26 / var(--vw-min) * 100vw), 13px);
	}
}

.error-notice {
	border: 1px solid #e4b6b4;
	background: #fff4f3;
	color: #933635;
}

/**
 * 確認画面
 */

.review-list {
	margin: min(calc(22 / var(--vw-min) * 100vw), 22px) 0 0;
	border-top: 1px solid #ddd;

	@media screen and (max-width: 768px) {
		margin: min(calc(44 / var(--vw-min) * 100vw), 22px) 0 0;
	}
}

.review-list > div {
	display: grid;
	grid-template-columns: min(calc(290 / var(--vw-min) * 100vw), 290px) 1fr;
	padding: min(calc(15 / var(--vw-min) * 100vw), 15px) min(calc(4 / var(--vw-min) * 100vw), 4px);
	gap: min(calc(40 / var(--vw-min) * 100vw), 40px);
	border-bottom: 1px solid #ddd;
	font-size: min(calc(13 / var(--vw-min) * 100vw), 13px);

	@media screen and (max-width: 768px) {
		grid-template-columns: 1fr;
		padding: min(calc(30 / var(--vw-min) * 100vw), 15px) min(calc(8 / var(--vw-min) * 100vw), 4px);
		gap: min(calc(6 / var(--vw-min) * 100vw), 3px);
		font-size: min(calc(26 / var(--vw-min) * 100vw), 13px);
	}
}

.review-list dt {
	color: #555;
	font-weight: 700;
}

.review-list dd {
	margin: 0;
	overflow-wrap: anywhere;
}

.submit-form {
	margin: 0;

	@media screen and (max-width: 768px) {
		width: 100%;
	}
}

/**
 * 完了画面
 */

.completion {
	text-align: center;
	padding: min(calc(60 / var(--vw-min) * 100vw), 60px) min(calc(25 / var(--vw-min) * 100vw), 25px) min(calc(70 / var(--vw-min) * 100vw), 70px);

	@media screen and (max-width: 768px) {
		padding: min(calc(120 / var(--vw-min) * 100vw), 60px) min(calc(50 / var(--vw-min) * 100vw), 25px) min(calc(140 / var(--vw-min) * 100vw), 70px);
	}
}

.completion-mark {
	display: grid;
	place-items: center;
	width: min(calc(64 / var(--vw-min) * 100vw), 64px);
	height: min(calc(64 / var(--vw-min) * 100vw), 64px);
	margin: 0 auto min(calc(17 / var(--vw-min) * 100vw), 17px);
	border: 2px solid var(--color-black);
	border-radius: 50%;
	color: var(--color-black);
	font-size: min(calc(30 / var(--vw-min) * 100vw), 30px);

	@media screen and (max-width: 768px) {
		width: min(calc(128 / var(--vw-min) * 100vw), 64px);
		height: min(calc(128 / var(--vw-min) * 100vw), 64px);
		margin: 0 auto min(calc(34 / var(--vw-min) * 100vw), 17px);
		font-size: min(calc(60 / var(--vw-min) * 100vw), 30px);
	}
}

.completion p {
	color: #666;
	font-size: min(calc(14 / var(--vw-min) * 100vw), 14px);

	@media screen and (max-width: 768px) {
		font-size: min(calc(28 / var(--vw-min) * 100vw), 14px);
	}
}

/**
 * フッター
 */

.site-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: min(calc(15 / var(--vw-min) * 100vw), 15px);
	padding: min(calc(26 / var(--vw-min) * 100vw), 26px) max(min(calc(24 / var(--vw-min) * 100vw), 24px), calc((100vw - 1024px) / 2));
	border-top: 1px solid #ddd;
	background: var(--color-vinarchy);

	@media screen and (max-width: 768px) {
		gap: min(calc(30 / var(--vw-min) * 100vw), 15px);
		padding: min(calc(46 / var(--vw-min) * 100vw), 23px) min(calc(36 / var(--vw-min) * 100vw), 18px);
	}
}

.site-footer > span {
	color: var(--color-white);
	font-size: min(calc(16 / var(--vw-min) * 100vw), 16px);

	@media screen and (max-width: 768px) {
		font-size: min(calc(32 / var(--vw-min) * 100vw), 16px);
	}
}

.site-footer small {
	color: var(--color-white);
	font-size: 12px;
}

/**
 * 動きを抑える設定が有効な場合の表示
 */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.button,
	.choice {
		transition: none;
	}
}