@charset "utf-8";
:root {
	--color--white: #ffffff;
	--color--ivory: #fdfcfb;
	--color--cream: #faf8f5;
	--color--taupe: #8c827c;
	--color--beige: #ab9c85;
	--color--overlay: rgba(60, 54, 50, .7);
	--font--shippori_mincho: "Shippori Mincho", serif;
	--radius--card: min(calc((10 / var(--vw)) * 100vw), 10px);
	--radius--btn: min(calc((5 / var(--vw)) * 100vw), 5px);
	--cmn_heading-line_width: min(calc((70 / var(--vw)) * 100vw), 70px);
	--cmn_heading-gap: min(calc((12 / var(--vw)) * 100vw), 12px);
	--cmn_heading-indent: calc(var(--cmn_heading-line_width) + var(--cmn_heading-gap));
	--vw: 1280;
}
@media all and (max-width: 768px) {
	:root {
		--vw: 375;
		--cmn_heading-line_width: min(calc((40 / var(--vw)) * 100vw), 40px);
	}
}

html {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	scrollbar-gutter: stable;
}
html._smooth {
	scroll-behavior: smooth;
}
body {
	min-height: 100vh;
	margin: 0;
	padding: 0;
	background-color: var(--color--ivory);
	text-rendering: optimizeSpeed;
	font-family: var(--font--shippori_mincho);
	font-weight: 500;
	font-style: normal;
	line-height: 1.8;
	letter-spacing: 0em;
	color: var(--color--taupe);
	transition-property: opacity;
	transition-duration: .4s;
	transition-timing-function: ease;
}
html._js body {
	opacity: 0;
	/* JS が読み込めなかった場合でも 3 秒後に必ず表示する保険 */
	animation: body-show 0s ease 3s forwards;
}
html._js body._show {
	opacity: 1;
	animation: none;
}
@keyframes body-show {
	to { opacity: 1; }
}

body.scroll-stop {
	overflow: hidden;
}

section {
	scroll-margin-top: 80px;
}

main {
	padding-top: 80px;
}

/* header */
#header {
	width: 100%;
	height: 80px;
	background-color: var(--color--white);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
}
	.header__inner {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: min(calc((1160 / var(--vw)) * 100vw), 1160px);
		height: 100%;
		margin: 0 auto;
	}
		.header__logo {
			width: 80px;
			height: auto;
			position: relative;
			z-index: 2;
		}
			.header__logo__link {
				display: block;
				width: 100%;
				height: auto;
				font-size: 0;
			}
		.global_nav {
			display: flex;
			justify-content: flex-end;
			align-items: center;
		}
			.global_nav__list {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				gap: 30px;
			}
				.global_nav__list__item {
					font-size: 16px;
					font-weight: 700;
					line-height: 1;
					letter-spacing: 0.1em;
				}
					.global_nav__list__item__link {
						display: block;
						color: var(--color--taupe);
					}
			.global_nav__sns {
				width: 28px;
				height: 28px;
				margin: 0 20px 0 73px;
			}
				.global_nav__sns__link {
					display: block;
					width: 100%;
					height: 100%;
				}
					.global_nav__sns__link svg {
						fill: var(--color--taupe);
					}
			.global_nav__line_btn {
				width: 100px;
				height: 28px;
			}
				.global_nav__line_btn__link {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 100%;
					height: 100%;
					font-size: 14px;
					font-weight: 700;
					line-height: 1;
					letter-spacing: 0.1em;
					color: var(--color--white);
					background-color: var(--color--taupe);
					border-radius: 4px;
				}
			@media (any-hover: hover) {
					.global_nav__list__item__link,
					.global_nav__sns__link,
					.global_nav__line_btn__link {
						transition-property: opacity;
						transition-duration: .4s;
						transition-timing-function: ease;
					}
					.global_nav__list__item__link:hover,
					.global_nav__sns__link:hover,
					.global_nav__line_btn__link:hover {
						opacity: .7;
					}
			}
		.header__hamburger {
			width: 40px;
			height: 40px;
			position: relative;
			z-index: 2;
		}
			.hbg_btn {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;
				height: 100%;
				padding: 0;
				cursor: pointer;
			}
				.hbg_btn_line {
					width: 24px;
					height: 1px;
					position: relative;
				}
					.hbg_btn_line::before,
					.hbg_btn_line::after {
						content: '';
						display: block;
						width: 100%;
						height: 1px;
						background-color: var(--color--taupe);
						position: absolute;
						left: 0;
					}
					.hbg_btn_line::before {
						top: -3px;
					}
					.hbg_btn_line::after {
						bottom: -3px;
					}

/* footer */
#footer {
	width: 100%;
	height: auto;
	padding: min(calc((48 / var(--vw)) * 100vw), 48px) 0 min(calc((24 / var(--vw)) * 100vw), 24px);
	background-color: var(--color--beige);
}
	.footer__inner {
		width: min(calc((1100 / var(--vw)) * 100vw), 1100px);
		height: auto;
		margin: 0 auto;
	}
		.footer__heading {
			width: 100%;
			height: auto;
			margin-bottom: min(calc((19 / var(--vw)) * 100vw), 19px);
			font-size: min(calc((20 / var(--vw)) * 100vw), 20px);
			font-weight: 700;
			line-height: 1;
			letter-spacing: 0.1em;
			text-align: center;
			color: var(--color--white);
		}
		.footer__sns_list {
			display: flex;
			justify-content: center;
			align-items: center;
			gap: min(calc((26 / var(--vw)) * 100vw), 26px);
			width: 100%;
			height: auto;
			margin-bottom: min(calc((19 / var(--vw)) * 100vw), 19px);
		}
			.footer__sns_list__item {
				width: min(calc((60 / var(--vw)) * 100vw), 60px);
				height: min(calc((60 / var(--vw)) * 100vw), 60px);
			}
				.footer__sns_list__item__link {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 100%;
					height: 100%;
					background-color: var(--color--white);
					border-radius: 9999px;
				}
					.footer__sns_list__item__icon {
						display: block;
						width: min(calc((33 / var(--vw)) * 100vw), 33px);
						height: auto;
					}
						.footer__sns_list__item__icon svg {
							fill: var(--color--beige);
						}
					.footer__sns_list__item__text {
						font-size: min(calc((16 / var(--vw)) * 100vw), 16px);
						font-weight: 700;
						line-height: 1;
						color: var(--color--beige);
					}
			@media (any-hover: hover) {
				.footer__sns_list__item__link {
					transition-property: opacity;
					transition-duration: .4s;
					transition-timing-function: ease;
				}
				.footer__sns_list__item__link:hover {
					opacity: .7;
				}
			}
		.footer__site_name {
			width: 100%;
			height: auto;
			font-size: min(calc((12 / var(--vw)) * 100vw), 12px);
			font-weight: 500;
			line-height: 1;
			letter-spacing: 0.1em;
			text-align: center;
			color: var(--color--white);
		}

/* ページトップボタン */
.cmn_page_top {
	display: flex;
	justify-content: center;
	align-items: center;
	width: min(calc((48 / var(--vw)) * 100vw), 48px);
	height: min(calc((48 / var(--vw)) * 100vw), 48px);
	padding: 0;
	background-color: var(--color--white);
	border: solid 1px var(--color--taupe);
	border-radius: 9999px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	cursor: pointer;
	position: fixed;
	right: min(calc((24 / var(--vw)) * 100vw), 24px);
	bottom: min(calc((24 / var(--vw)) * 100vw), 24px);
	z-index: 90;
	transition-property: opacity, visibility;
	transition-duration: .3s, 0s;
	transition-delay: 0s, .3s;
	transition-timing-function: ease;
}
.cmn_page_top._show {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition-delay: 0s;
}
.cmn_page_top:focus-visible {
	outline: solid 2px var(--color--taupe);
	outline-offset: 2px;
}
	.cmn_page_top::before {
		content: '';
		width: min(calc((10 / var(--vw)) * 100vw), 10px);
		height: min(calc((10 / var(--vw)) * 100vw), 10px);
		margin-top: min(calc((4 / var(--vw)) * 100vw), 4px);
		border-top: solid 2px var(--color--taupe);
		border-right: solid 2px var(--color--taupe);
		transform: rotate(-45deg);
	}
@media (any-hover: hover) {
	.cmn_page_top {
		transition-property: opacity, visibility, background-color;
		transition-duration: .3s, 0s, .4s;
		transition-delay: 0s, .3s, 0s;
	}
	.cmn_page_top:hover {
		background-color: var(--color--taupe);
	}
		.cmn_page_top::before {
			transition-property: border-color;
			transition-duration: .4s;
			transition-timing-function: ease;
		}
		.cmn_page_top:hover::before {
			border-color: var(--color--white);
		}
}

/* 共通 */
.cmn_heading {
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	gap: var(--cmn_heading-gap);
	width: 100%;
	height: auto;
}
	.cmn_heading::before {
		content: '';
		display: block;
		flex-shrink: 0;
		width: var(--cmn_heading-line_width);
		height: 2px;
		margin-top: min(calc((18 / var(--vw)) * 100vw), 18px);
		background-color: var(--color--taupe);
	}
		.cmn_heading__text {
			margin-bottom: min(calc((12 / var(--vw)) * 100vw), 12px);
			font-size: min(calc((32 / var(--vw)) * 100vw), 32px);
			font-weight: 700;
			line-height: 1;
		}
		.cmn_heading__text:last-child {
			margin-bottom: 0;
		}
		.cmn_heading__en_text {
			margin-left: min(calc((2 / var(--vw)) * 100vw), 2px);
			font-size: min(calc((20 / var(--vw)) * 100vw), 20px);
			font-weight: 700;
			line-height: 1;
		}

.cmn_kimono_card {
	width: 100%;
	height: auto;
	aspect-ratio: 350 / 470;
	border-radius: var(--radius--card);
	position: relative;
	overflow: hidden;
}
	.cmn_kimono_card img {
		height: 100%;
		object-fit: cover;
	}
	.cmn_kimono_card__caption {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: min(calc((59 / var(--vw)) * 100vw), 59px);
		font-size: min(calc((24 / var(--vw)) * 100vw), 24px);
		font-weight: 700;
		line-height: 1;
		color: var(--color--cream);
		background-color: var(--color--taupe);
		position: absolute;
		bottom: 0;
		left: 0;
	}

.cmn_btn {
	display: flex;
	justify-content: center;
	align-items: center;
	width: min(calc((300 / var(--vw)) * 100vw), 300px);
	height: min(calc((60 / var(--vw)) * 100vw), 60px);
	padding: 0;
	font-size: min(calc((20 / var(--vw)) * 100vw), 20px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.1em;
	color: var(--color--white);
	background-color: var(--color--taupe);
	border-radius: var(--radius--btn);
	cursor: pointer;
}
.cmn_btn._white {
	color: var(--color--taupe);
	background-color: var(--color--white);
	border: solid 1px var(--color--taupe);
}
@media (any-hover: hover) {
	.cmn_btn {
		transition-property: opacity;
		transition-duration: .4s;
		transition-timing-function: ease;
	}
	.cmn_btn:hover {
		opacity: .7;
	}
	.cmn_btn._white {
		transition-property: color, background-color;
	}
	.cmn_btn._white:hover {
		opacity: 1;
		color: var(--color--white);
		background-color: var(--color--taupe);
	}
}
.cmn_btn._hide {
	display: none;
}

.cmn_modal_btn {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	cursor: pointer;
}
.cmn_modal_btn:focus-visible {
	outline: solid 2px var(--color--taupe);
	outline-offset: 2px;
}

/* モーダル */
.cmn_modal {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 200;
	transition-property: opacity, visibility;
	transition-duration: .3s, 0s;
	transition-delay: 0s, .3s;
	transition-timing-function: ease;
}
.cmn_modal._opened {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition-delay: 0s;
}
.cmn_modal button:focus-visible {
	outline: solid 2px var(--color--white);
	outline-offset: 2px;
}
	.cmn_modal__overlay {
		width: 100%;
		height: 100%;
		background-color: var(--color--overlay);
		position: absolute;
		top: 0;
		left: 0;
	}
	.cmn_modal__content {
		position: relative;
		z-index: 1;
	}
		.cmn_modal__figure__inner {
			width: fit-content;
			margin: 0 auto;
			position: relative;
		}
			.cmn_modal__image {
				width: auto;
				height: auto;
				max-width: calc(100vw - 240px);
				max-height: min(80vh, 940px);
				border-radius: var(--radius--card);
			}
			.cmn_modal__close {
				width: min(calc((40 / var(--vw)) * 100vw), 40px);
				height: min(calc((40 / var(--vw)) * 100vw), 40px);
				cursor: pointer;
				position: absolute;
				top: max(calc((-48 / var(--vw)) * 100vw), -48px);
				right: 0;
			}
				.cmn_modal__close::before,
				.cmn_modal__close::after {
					content: '';
					width: min(calc((20 / var(--vw)) * 100vw), 20px);
					height: 2px;
					background-color: var(--color--white);
					position: absolute;
					top: 50%;
					left: 50%;
				}
				.cmn_modal__close::before {
					transform: translate(-50%, -50%) rotate(45deg);
				}
				.cmn_modal__close::after {
					transform: translate(-50%, -50%) rotate(-45deg);
				}
		.cmn_modal__nav {
			display: flex;
			justify-content: center;
			align-items: center;
			width: min(calc((48 / var(--vw)) * 100vw), 48px);
			height: min(calc((48 / var(--vw)) * 100vw), 48px);
			background-color: var(--color--white);
			border-radius: 9999px;
			cursor: pointer;
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
		}
		.cmn_modal__nav._prev {
			left: max(calc((-72 / var(--vw)) * 100vw), -72px);
		}
		.cmn_modal__nav._next {
			right: max(calc((-72 / var(--vw)) * 100vw), -72px);
		}
			.cmn_modal__nav::before {
				content: '';
				width: min(calc((10 / var(--vw)) * 100vw), 10px);
				height: min(calc((10 / var(--vw)) * 100vw), 10px);
				border-top: solid 2px var(--color--taupe);
				border-right: solid 2px var(--color--taupe);
				position: absolute;
				top: 50%;
				left: 50%;
			}
			.cmn_modal__nav._prev::before {
				transform: translate(calc(-50% + 2px), -50%) rotate(-135deg);
			}
			.cmn_modal__nav._next::before {
				transform: translate(calc(-50% - 2px), -50%) rotate(45deg);
			}
@media (any-hover: hover) {
		.cmn_modal__nav,
		.cmn_modal__close {
			transition-property: opacity;
			transition-duration: .4s;
			transition-timing-function: ease;
		}
		.cmn_modal__nav:hover,
		.cmn_modal__close:hover {
			opacity: .7;
		}
}

/* ================================================== PC */
@media all and (min-width: 769px) {
.sp      { display: none; }
.pc      { display: inline-block; }
.view_sp { display: none; }
.view_pc { display: block; }

}

/* ================================================== SP */
@media all and (max-width: 768px) {
.pc      { display: none; }
.sp      { display: inline-block; }
.view_pc { display: none; }
.view_sp { display: block; }

section {
	scroll-margin-top: 68px;
}

main {
	padding-top: 68px;
}

/* ハンバーガーメニュー */
			.hbg_btn._open .hbg_btn_line::before {
				animation: hbg_btn-line_before-open .5s cubic-bezier(0.65, 0, 0.35, 1) 1 forwards;
			}
			.hbg_btn._open .hbg_btn_line::after {
				animation: hbg_btn-line_after-open .5s cubic-bezier(0.65, 0, 0.35, 1) 1 forwards;
			}
				@keyframes hbg_btn-line_before-open {
					0%   { top: -3px; transform: translate(0%,0%); }
					60%  { top: 0px;  transform: translate(0%,0%) rotate(0deg); }
					61%  { top: 0px; }
					100% { top: 0px;  transform: translate(0%,0%) rotate(12deg); }
				}
				@keyframes hbg_btn-line_after-open {
					0%   { bottom: -3px; transform: translate(0%,0%); }
					60%  { bottom: 0px;  transform: translate(0%,0%) rotate(0deg); }
					61%  { bottom: 0px; }
					100% { bottom: 0px;  transform: translate(0%,0%) rotate(-12deg); }
				}
			.hbg_btn._close .hbg_btn_line::before {
				animation: hbg_btn-line_before-close .5s cubic-bezier(0.65, 0, 0.35, 1) 1 forwards;
			}
			.hbg_btn._close .hbg_btn_line::after {
				animation: hbg_btn-line_after-close .5s cubic-bezier(0.65, 0, 0.35, 1) 1 forwards;
			}
				@keyframes hbg_btn-line_before-close {
					0%   { top: 0px;  transform: translate(0%,0%) rotate(12deg); }
					60%  { top: 0px; }
					61%  { top: 0px;  transform: translate(0%,0%) rotate(0deg); }
					100% { top: -3px; transform: translate(0%,0%); }
				}
				@keyframes hbg_btn-line_after-close {
					0%   { bottom: 0px;  transform: translate(0%,0%) rotate(-12deg); }
					60%  { bottom: 0px; }
					61%  { bottom: 0px;  transform: translate(0%,0%) rotate(0deg); }
					100% { bottom: -3px; transform: translate(0%,0%); }
				}

/* header */
#header {
	height: 68px;
}
	.header__inner {
		width: calc((335 / 375) * 100%);
	}
		.header__logo {
			width: 64px;
		}
		.global_nav {
			flex-direction: column;
			justify-content: center;
			align-items: center;
			gap: 40px;
			width: 100%;
			height: 100lvh;
			background-color: var(--color--ivory);
			opacity: 0;
			visibility: hidden;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 1;
			transition-property: opacity, visibility;
			transition-duration: .5s;
			transition-timing-function: ease;
		}
		.global_nav._opened {
			opacity: 1;
			visibility: visible;
		}
			.global_nav__list {
				flex-direction: column;
				gap: 32px;
			}
				.global_nav__list__item {
					text-align: center;
				}
			.global_nav__sns {
				margin: 0;
			}
			.global_nav__line_btn {
				width: 160px;
				height: 46px;
			}

/* footer */
#footer {
	padding: min(calc((40 / var(--vw)) * 100vw), 40px) 0 min(calc((24 / var(--vw)) * 100vw), 24px);
}
	.footer__inner {
		width: calc((335 / 375) * 100%);
	}
		.footer__heading {
			margin-bottom: min(calc((24 / var(--vw)) * 100vw), 24px);
			font-size: min(calc((18 / var(--vw)) * 100vw), 18px);
		}
		.footer__sns_list {
			margin-bottom: min(calc((24 / var(--vw)) * 100vw), 24px);
		}

/* ページトップボタン */
.cmn_page_top {
	width: min(calc((40 / var(--vw)) * 100vw), 40px);
	height: min(calc((40 / var(--vw)) * 100vw), 40px);
	right: min(calc((16 / var(--vw)) * 100vw), 16px);
	bottom: min(calc((16 / var(--vw)) * 100vw), 16px);
}

/* 共通 */
	.cmn_heading::before {
		width: min(calc((20 / var(--vw)) * 100vw), 20px);
		height: 1px;
		margin-top: min(calc((10 / var(--vw)) * 100vw), 10px);
	}
		.cmn_heading__text {
			margin-bottom: min(calc((10 / var(--vw)) * 100vw), 10px);
			font-size: min(calc((20 / var(--vw)) * 100vw), 20px);
		}
		.cmn_heading__en_text {
			font-size: min(calc((14 / var(--vw)) * 100vw), 14px);
		}
	.cmn_kimono_card__caption {
		height: min(calc((50 / var(--vw)) * 100vw), 50px);
		font-size: min(calc((20 / var(--vw)) * 100vw), 20px);
	}
.cmn_btn {
	width: min(calc((260 / var(--vw)) * 100vw), 260px);
	height: min(calc((52 / var(--vw)) * 100vw), 52px);
	font-size: min(calc((16 / var(--vw)) * 100vw), 16px);
}
	.cmn_modal__content {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		column-gap: min(calc((24 / var(--vw)) * 100vw), 24px);
		row-gap: min(calc((24 / var(--vw)) * 100vw), 24px);
		width: 100%;
	}
		.cmn_modal__figure {
			width: 100%;
		}
			.cmn_modal__image {
				width: auto;
				height: auto;
				max-width: calc((335 / 375) * 100vw);
				max-height: 70vh;
			}
			.cmn_modal__close {
				width: min(calc((32 / var(--vw)) * 100vw), 32px);
				height: min(calc((32 / var(--vw)) * 100vw), 32px);
				top: max(calc((-40 / var(--vw)) * 100vw), -40px);
				right: 0;
			}
				.cmn_modal__close::before,
				.cmn_modal__close::after {
					width: min(calc((16 / var(--vw)) * 100vw), 16px);
				}
		.cmn_modal__nav {
			width: min(calc((40 / var(--vw)) * 100vw), 40px);
			height: min(calc((40 / var(--vw)) * 100vw), 40px);
			position: relative;
			top: auto;
			transform: none;
		}
		.cmn_modal__nav._prev,
		.cmn_modal__nav._next {
			left: auto;
			right: auto;
		}
}

@media all and (max-height: 480px) {
			.cmn_modal__close {
				top: min(calc((8 / var(--vw)) * 100vw), 8px);
				right: min(calc((8 / var(--vw)) * 100vw), 8px);
			}
}