/* -----------------------------------------------------------
	基本設定、リンクカラーなど
----------------------------------------------------------- */
:root {
  --layout-width-min: 375px; /* SPのデザインカンプの横幅 */
  --layout-width-max: 1280px; /* PCのデザインカンプの横幅 */
  --layout-container-width: calc(100% - 160px);

  --base-font-size: 16;
  --rem: calc(1rem / var(--base-font-size));

  --color-base:#474235;
  --color-accent: #906E3E;
  --color-sub: #867E68;
  --color-base-rgb: 71, 66, 53;
  --color-border: rgba(var(--color-base-rgb), 0.3);
  --color-marker: #DFC571;

  --font-base: "Zen Kaku Gothic New", sans-serif;
  --font-sans: "Jost", sans-serif;
}
/* 中型デスクトップ（1439px以下） */
@media (max-width: 1439px) {
    :root {
        --layout-container-width: 96%;
    }
}
/* タブレット（1024px以下） */
@media (max-width: 1024px) {
    :root {
        --layout-container-width: 92%;
    }
}
/* スマホ（768px以下） */
@media (max-width: 768px) {
    :root {
        --layout-container-width: 89.6%;
    }
}

html {
	scroll-behavior: smooth;
	font-size: 1.125rem;
	@media (prefers-reduced-motion: reduce) {
		scroll-behavior: auto;
	}
}
@media (max-width: 767px) {
  html {
    font-size: 0.938rem;
  }
}
body {
	position: relative;
	min-height: 100%;
	color: var(--color-base);
	line-height: 1.75;
	background: #E1DFD2;
	a {
		color: inherit;
		text-decoration: none;
	}
	img {
		max-width: 100%;
		height: auto;
		vertical-align: bottom;
		image-rendering: -webkit-optimize-contrast;
	}
}
body, pre, input, textarea, select { 
	font-family: var(--font-base);
	font-weight: 500;
	font-style: normal;
}

input, select, textarea { font-size: inherit; }

*, *::before, *::after {
  box-sizing: border-box;
}
@media (min-width: 1025px) { .view_tab-sp, body .view_tab { display: none !important; } }
@media (min-width: 768px) { .view_sp { display: none !important; } }
@media (max-width: 1024px) { .view_pc { display: none !important; } }
@media (max-width: 767px) { .view_pc-tab, body .view_tab { display: none !important; } }

.visually-hidden {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	padding:0 !important;
	border:0 !important;
	height: 1px !important;
	width: 1px !important;
	overflow: hidden;
}

.u-container {
	max-width: var(--layout-width-max);
    margin-inline: auto;
    width: var(--layout-container-width);
}

.u-frame {
	border-top: 1px solid rgba(255, 255, 255, 0.00);
	background: rgba(255, 255, 255, 0.25);
	backdrop-filter: blur(10px);
}

/* -----------------------------------------------------------
	header
----------------------------------------------------------- */
#header-container {
	.logo {
		position: absolute;
		top: 24px;
		left: 32px;
		max-width: 140px;
		@media (max-width: 767px) {
			width: 30%;
			top: 16px;
			left: 12px;
		}
		a {
			display: inline-block;
			@media (hover: hover) {
				transition: 0.3s;
				&:hover {
					opacity: 0.6;
				}
			}
		}
	}
	.u-fixnav {
		position: fixed;
		bottom: 35%;
		right: 10px;
		z-index: 10;
		transition: 0.3s;
		@media (max-width: 767px) {
			right: 0;
			bottom: 0;
		}
		.list-fixnav {
			display: flex;
			flex-direction: column;
			gap:1px;
			.item-fixnav {
				display: block;
				width: 64px;
				height: 174px;
				@media (min-width: 768px) and (max-width: 1024px) {
					width: 48px;
					a {
						padding-left: 5px;
					}
				}
				@media (max-width: 767px) {
					width: 42px;
					height: 140px;
					a {
						padding-left: 4px;
					}
				}
				a {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					gap:8px;
					color: #fff;
					width: 100%;
					height: 100%;
					.text {
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						font-size: 18px;
						font-weight: 400;
						line-height: 1.1;
						@media (min-width: 768px) and (max-width: 1024px) {
							font-size: 16px;
						}
						@media (max-width: 767px) {
							font-size: 15px;
						}
						span {
							display: inline-block;
						}
					}
					@media (hover: hover) {
						transition: 0.3s;
						&:hover {
							opacity: 0.6;
						}
					}
				}
				&:first-child {
					a {
						border-radius: 32px 32px 0 0;
						background: var(--gradation-bk, linear-gradient(180deg, #444547 0%, #262626 100%));
					}
				}
				&:last-child {
					a {
						border-radius: 0 0 32px 32px;
						background: var(--gradation, linear-gradient(180deg, #BD9C6B 0%, #946F32 28%, #906E3E 60%, #5A3E0D 100%));
						.icon {
							margin-top: -16px;
						}
					}
				}
				@media (max-width: 767px) {
					&:first-child {
						a {
							border-radius: 32px 0 0 0;
						}
					}
					&:last-child {
						a {
							border-radius: 0;
							.icon {
								margin-top: -12px;
							}
						}
					}
				}
			}
		}
		&.bottom {
			top: auto;
			bottom: 0;
			right: 0;
			.list-fixnav {
				.item-fixnav {
					&:first-child {
						a {
							border-radius: 32px 0 0 0;
						}
					}
					&:last-child {
						a {
							border-radius: 0;
						}
					}
				}
			}
		}
	}
}


/* -----------------------------------------------------------
	footer
----------------------------------------------------------- */
#footer-container {
	padding: 32px;
	.copyright {
		text-align: center;
		font-family: var(--font-sans);
		font-weight: 400;
		line-height: 1;
	}
}
/* -----------------------------------------------------------
	Component
----------------------------------------------------------- */
/* タイトル */
.c-title-basic {
	position: relative;
	text-align: center;
	width: 100%;
	padding-bottom: 16px;
	&::after {
		content: '';
		width: 48px;
		height: 3px;
		border-radius: 9999px;
		background: #BD9C6B;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		margin: 0 auto;
	}
	.wrap-title-basic {
		position: relative;
		width: 100%;
		.en {
			font-family: var(--font-sans);
			color: var(--color-accent);
			text-align: center;
			font-size: 8rem;
			font-style: normal;
			font-weight: 400;
			line-height: 100%;
			letter-spacing: 0.08em;
			text-transform: uppercase;
			word-break: break-all;
			opacity: 0.1;
			@media (min-width: 768px) and (max-width: 1024px) {
				font-size: 10vw;
			}
			@media (max-width: 767px) {
				font-size: 16vw;
			}
		}
		.jp {
			font-weight: 500;
			line-height: 1;
			letter-spacing: 0.16em;
			font-size: 2.5rem;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			white-space: nowrap;
			@media (min-width: 768px) and (max-width: 1024px) {
				font-size: 2rem;
			}
			@media (max-width: 767px) {
				font-size: 1.8rem;
				font-weight: 600;
			}
		}
	}
}
/* リンクボタン */
.c-button-basic {
	width: 100%;
	a {
		width: 100%;
		display: inline grid;
		grid-template-columns: 1fr auto 1fr;
		column-gap: 1em;
		align-items: center;
		line-height: 1;
		font-weight: 500;
		padding: 16px 20px;
		border-radius: 9999px;
		border: 1px solid var(--color-border);
		&::before {
			content: '';
		}
		&::after {
			content: '';
			justify-self: end;
			inline-size: 0.5em;
			aspect-ratio: 1;
			border-block-start: 1px solid var(--color-base);
			border-inline-end: 1px solid var(--color-base);
			rotate: 45deg;
		}
		@media (max-width: 767px) {
			column-gap: 0.25em;
			padding: 16px 14px;
		}
		@media (hover: hover) {
			transition: 0.3s;
			&:hover {
				opacity: 0.6;
			}
		}
	}
	&.blank {
		a {
			&::after {
				border: none;
				rotate: 0deg;
				background: url(../images/common/icon-blank.svg) center center no-repeat;
				background-size: contain;
				width: 16px;
			}
		}
	}
}
.c-button-accent {
	width: 100%;
	a {
		width: 100%;
		display: inline grid;
		grid-template-columns: 1fr auto 1fr;
		column-gap: 1em;
		align-items: center;
		font-size: 1.25rem;
		line-height: 1;
		font-weight: 500;
		padding: 19px 40px;
		color: #fff;
		background-color: var(--color-base);
		border-radius: 9999px;
		@media (max-width: 767px) {
			padding: 19px;
			font-size: 1.125rem;
		}
		@media (max-width: 767px) {
			column-gap: 0.5em;
			padding: 19px 16px;
			font-size: 1.125rem;
		}
		&::before {
			content: '';
		}
		&::after {
			content: '';
			justify-self: end;
			inline-size: 0.5em;
			aspect-ratio: 1;
			border-block-start: 1px solid #fff;
			border-inline-end: 1px solid #fff;
			rotate: 45deg;
		}
		span {
			display: flex;
			justify-content: center;
			align-items: center;
			gap:16px;
			@media (max-width: 767px) {
				gap:8px
			}
			img {
				width: 32px;
				@media (max-width: 767px) {
					width: 16px;
				}
			}
		}
		@media (hover: hover) {
			transition: 0.3s;
			&::after {
				transition: 0.3s;
			}
			&:hover {
				opacity: 0.6;
				&::after {
					translate: 0 4px;
				}
			}
		}
	}
}
.c-button-cv-accent {
	width: 100%;
	a {
		width: 100%;
		display: inline grid;
		grid-template-columns: 1fr auto 1fr;
		column-gap: 1em;
		align-items: center;
		font-size: 1.125rem;
		line-height: 1.4;
		font-weight: 700;
		letter-spacing: 0.04em;
		padding: 15px 24px;
		color: #fff;
		background-color: var(--color-accent);
		border-radius: 9999px;
		min-height: 80px;
		text-align: center;
		@media (min-width: 768px) and (max-width: 1024px) {
			font-size: 0.9rem;
			padding: 15px 8px;
		}
		@media (max-width: 767px) {
			font-size: 1rem;
			padding: 12px 16px;
			min-height: auto;
		}
		&::before {
			content: '';
		}
		&::after {
			content: '';
			justify-self: end;
			inline-size: 0.5em;
			aspect-ratio: 1;
			border-block-start: 1px solid #fff;
			border-inline-end: 1px solid #fff;
			rotate: 45deg;
		}
		@media (hover: hover) {
			transition: 0.3s;
			&::after {
				transition: 0.3s;
			}
			&:hover {
				opacity: 0.6;
				&::after {
					translate: 0 4px;
				}
			}
		}
	}
	&.blank {
		a {
			&::after {
				border: none;
				rotate: 0deg;
				background: url(../images/common/icon-blank-wh.svg) center center no-repeat;
				background-size: contain;
				width: 24px;
			}
			@media (min-width: 768px) and (max-width: 1024px) {
				&::after {
					width: 16px;
				}
			}
			@media (max-width: 767px) {
				&::after {
					width: 16px;
				}
			}
		}
	}
	&.download {
		a {
			&::after {
				border: none;
				rotate: 0deg;
				background: url(../images/lp/icon-download.svg) center center no-repeat;
				background-size: contain;
				width: 32px;
			}
			@media (min-width: 768px) and (max-width: 1024px) {
				&::after {
					width: 16px;
				}
			}
			@media (max-width: 767px) {
				&::after {
					width: 18px;
				}
			}
		}
	}
	&.black {
		a {
			background: linear-gradient(180deg, #444547 0%, #262626 100%);
		}
	}
}
/* テーブル */
.c-table-basic {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0 24px;
	tr {
		th,td {
			border-top: 1px solid var(--color-border);
			@media (min-width: 1025px) {
				padding: 40px 0 0 48px;
			}
			@media (min-width: 768px) and (max-width: 1024px) {
				display: block;
				padding: 32px 0 0 24px;
			}
			@media (max-width: 767px) {
				display: block;
				padding: 24px 0 0 16px;
			}
		}
		th {
			border-left: 1px solid var(--color-border);
			line-height: 1.4;
			font-weight: 700;
			vertical-align: top;
			font-size: 1.375rem;
			@media (max-width: 1024px) {
				position: relative;
				padding-bottom: 16px;
				&::after {
					content: '';
					border-top: 1px dotted var(--color-border);
					width: calc(100% - 24px);
					height: 1px;
					position: absolute;
					bottom: 0;
					left: 24px;
				}
			}
			@media (max-width: 767px) {
				font-size: 1.125rem;
				&::after {
					width: calc(100% - 16px);
					left: 16px;
				}
			}
		}
		td {
			position: relative;
			&::before {
				content: "";
				border-left: 1px solid var(--color-border);
				width: 1px;
				height: calc(100% - 40px);
				position: absolute;
				bottom: 0;
				left: 0;
			}
			@media (max-width: 1024px) {
				border-top: none;
				padding-top: 16px;
				&::before {
					height: 100%;
				}
			}
		}
	}
}
/* リスト */
.c-list-basic {
	display: flex;
	flex-direction: column;
	gap:4px;
	li {
		position: relative;
		padding-left: calc(1em + 4px);
		line-height: 1.5;
		&::before {
			content: '・';
			position: absolute;
			top: 0;
			left: 0;
		}
	}
}