@charset "utf-8";
/*
Theme Name: sky-garden 2025
Description: Welcart Basic Child Theme
Author: knet code:yamada
Template: welcart_basic
Version: 1.0.10
サイトのコードの注意事項はなどの詳細は README.md を参照
*/
/* ========================================
   Root設定（CSS変数定義）
======================================== */
:root {
	--line-height-base: 1.6;
	--font-family-base: YakuHanMP, "Ysabeau Infant", "Zen Old Mincho", system-ui, serif;
	--font-family-base_mincho: YakuHanMP, "Zen Old Mincho", system-ui, serif;
	--font-family-logo_font0: "Cormorant Garamond", serif;
	--font-family-logo_font1: "GFS Didot", serif;
	--font-family-sans-serif: "Outfit", sans-serif;
	--color-text: #505050;
	--color-main-color: #002D5C;
	--color-headline-color: #000;
	--color-accent-color: #EBC675;
	--color-dark-color: #d9d9d9;
	--color-white-color: #fff;
	--color-faq-bg-color: #F7F6F5;
	--vw-scale: 1vw;
	--block-scale: clamp(2.5em, -2.857em + 14.29vw, 10em);
	--block-padding-size: clamp(1.25em, -3.011em + 11.36vw, 10.625em);
	--contents-block-width: calc(100% - calc(var(--block-padding-size) * 2));
	--contents-blocknarrow-width: clamp(35em, 10.391em + 65.63vw, 61.25em);
	--line-gradient-colorGold: linear-gradient(90deg, #876926 0%, #FFDB8D 50%, #876926 100%);
	scroll-behavior: smooth;
}

/* View Transition API */
@supports (view-transition-name: none) {
	@view-transition {
		navigation: auto;
	}

	::view-transition-group(root) {
		animation-duration: 0.75s;
	}
}

/* -- レスポンシブFONTサイズ対応 -- */
/* モバイル（$301C767px） */
@media (768px < width) {
	:root {
		--base-font-size: 15px;
		--line-height-base: 1.7;
	}
}

/* タブレット・デスクトップ（768px$301C1919px） */
@media (768px <=width < 1920px) {
	:root {
		--base-font-size: 16px;
		--line-height-base: 1.7;
	}
}

/* 大画面（1920px$301C） */
@media (1920px <=width) {
	:root {
		/* 16px$301C24pxの範囲で比率拡大 __ 計算式: 16 ÷ 1920 × 100 = 0.833vw */
		--base-font-size: clamp(16px, 0.833vw, 24px);
	}
}

/* ========================================
   HTML/Body基本設定
======================================== */
html {
	box-sizing: border-box;
	scrollbar-gutter: stable;
	font-family: var(--font-family-base);
}

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

body {
	font-size: var(--base-font-size);
	line-height: var(--line-height-base);
	font-family: var(--font-family-base);
	color: var(--color-text);
	background-color: var(--color-white-color);
	padding: 0;
	margin: 0;
	position: relative;
	/* background-color: #f5f5f5; */
	height: 100dvh;
}

/* ========================================
   フォント設定（クラス）
======================================== */
.outfit {
	font-family: var(--font-family-sans-serif, "Outfit");
	font-optical-sizing: auto;
	font-style: normal;
}

.outfit-logo {
	font-family: var(--font-family-sans-serif, "Outfit");
	font-optical-sizing: auto;
}

.zen-old-mincho-regular {
	font-family: "Zen Old Mincho", serif;
	font-weight: 400;
	font-style: normal;
}

.zen-old-mincho-bold {
	font-family: "Zen Old Mincho", serif;
	font-weight: 700;
	font-style: normal;
}

.ysabeau-infant {
	font-family: "Ysabeau Infant", sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
}

.mix-normal {
	font-family: "Ysabeau Infant", "Zen Old Mincho", serif;
	font-weight: 400;
}

.cormorant-garamond {
	font-family: "Cormorant Garamond", serif;
	font-optical-sizing: auto;
	/* font-weight: 700; */
  }
.gfs-didot {
	font-family: "GFS Didot", serif;
	font-weight: 400;
  }

/* ========================================
   リセット・共通設定
======================================== */
ul,
ol {
	margin-block-start: 0;
	padding-inline-start: 0;
}

nav {

	ul,
	ol {
		list-style: none;
	}
}

a {
	color: inherit;
	text-decoration: none;
	font-family: inherit;
}

em,
address {
	font-style: normal;
}

img {
	width: 100%;
	height: auto;
	display: inline-block;
	object-fit: cover;
}

figure {
	margin: 0;
}

h1.outfit>a .brand.outfit {
	font-family: "Outfit", sans-serif;
	letter-spacing: 0.15em;
}

/* ローディングアニメーション */
div.loadinganimation {
	width: 100%;
	background-color: var(--color-main-color);
	display: grid;
	place-content: center;
	height: 100lvh;
	z-index: 999;
	position: fixed;
	top: 0;
	left: 0;
}

#loading {
	opacity: 1;
	pointer-events: auto;
	transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}

#loading[data-state="completed"] {
	opacity: 0;
	pointer-events: none;
	visibility: hidden;
}

#loading[data-state="pending"] p.loading {
	opacity: 0;
	visibility: hidden;
}

html.loader-hidden #loading {
	display: none;
}

div.loadinganimation.hidden {
	display: none;
}

p.loading {
	font-size: 5rem;
	text-align: center;
	line-height: 1.3;
	margin: 0;
	position: relative;
	display: inline-block;
	--underline-progress: 0; /* GSAPで制御するCSS変数 */
}
p.loading span.cormorant-garamond {
	font-family: var(--font-family-logo_font0);
	/* font-weight: 700; */
	color:var(--color-accent-color);
}
p.loading span.gfs-didot{
	font-family: var(--font-family-logo_font1);
	color:var(--wp--preset--color--white);
	font-weight: 400;
}
p.loading::after {
	content: "";
	position: absolute;
	bottom: -0.25em; /* テキストにかぶらない下の位置 */
	left: 0;
	width: 100%;
	height: 4px;
	background: var(--line-gradient-colorGold);
	transform: scaleX(var(--underline-progress));
	transform-origin: left;
}
@media (width <= 823px) {
	p.loading {
		margin-inline: auto;
		font-size: 4em
	}
}
/* ========================================
   ユーティリティクラス
======================================== */
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.nowraptext {
	white-space:nowrap;
}
/* ========================================
レイアウト構造
======================================== */
.container,
aside,
.footer-navi_block {
	position: relative;
}

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

/* Footer */
/* footer message　ブロック */
.footer-block-first {
	display: grid;
	gap: 3em;
	justify-items: center;
	background-color: var(--color-white-color);
	background-image: url('../../uploads/2025/10/page_common_top-footer_img.webp');
	background-position: left center;
	background-repeat: no-repeat;
	background-size: cover;
	padding-block: clamp(4em, -0.286em + 11.43vw, 10em) calc(clamp(4em, -0.286em + 11.43vw, 10em) - 3em);

	>* {
		padding-inline: 1em;
	}

	>div:nth-child(1) {
		h2 {
			list-style: none;
			margin-block-start: 0;
			color: var(--color-headline-color);
		}

		h2::first-letter {
			color: var(--color-accent-color);
		}

		p:nth-of-type(1) {
			font-size: clamp(1.25em, 0.682em + 1.52vw, 2.5em);
			font-weight: 400;
			letter-spacing: 0.1em;
			color: var(--color-headline-color);
			margin-block-start: 0;
			line-height: 2;
		}

		p:nth-of-type(2) {
			color: var(--color-text);
			letter-spacing: 0.1em;
			line-height: 3;
		}
	}

	.contact-phone {
		font-size: 1.125em;
		letter-spacing: 0.12em;
		line-height: 200%;
		font-family: var(--font-family-base_mincho);
		text-align: center;
	}

	.open-close-time {
		font-size: 0.78em;
		letter-spacing: 0.1em;
	}
}

/* 企業ロゴやfooter navigation */
.footer-navi_block {
	color: var(--color-white-color);
	background-color: var(--color-main-color);
	padding-block: 8.688em 9.3em;
	display: grid;
	justify-items: center;
	justify-content: center;

	>* {
		padding-inline: 1em;
		width: clamp(23em, -8.977em + 85.61vw, 93.75em);
	}
}

.company-information {
	padding-block-end: 5.3em;
	position: relative;
	border-bottom: none;

	/* 下線のグラデーション（p.loading::afterと同じデザイン） */
	&::after {
		content: "";
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 4px;
		background: var(--line-gradient-colorGold);
	}

	p,
	address {
		text-align: center;
	}

	p {
		font-size: clamp(1rem, 0.107rem + 2.38vw, 2.25rem);
		margin-block: 1.375em 3.43em;
	}
	.brand img{
		max-width: 207px;
		width: 100%;
		height: auto;
		object-fit: contain;
	}

	address {
		font-size: 0.875em;
		letter-spacing: 0.1em;
		line-height: 2;
		color: var(--color-dark-color);
	}
}

.footer-navi {
	padding-block-start: 5.3em;
}

@media(1024px < width) {
	.footer-block-first {
		grid-template-columns: repeat(2, auto);
		gap: 1em clamp(1em, -9.307em + 16.09vw, 10em);

		>div:nth-child(1) {
			justify-self: end;
		}

		>div:nth-child(2) {
			margin-block-end: 6em;
			justify-self: start;
			align-self: end;
			line-height: 3.84;
		}
	}
}

footer.site-footer {
	color: var(--color-white-color);
	display: grid;
	position: sticky;
	bottom: 0;
	align-items: end;
	justify-content: center;
	z-index: -1;
	width: 100%;
	aspect-ratio: 1 / 0.663;

	&::before {
		content: "";
		position: absolute;
		background-image: url('./images/footer_bg_image_light.webp');
		background-repeat: no-repeat;
		background-size: cover;
		background-position: left 45% top 20%;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: bclok;
	}

	@media (orientation: portrait) {
		aspect-ratio: 0.8 / 1;

		&::before {
			background-position: left 45% top 5%;
		}
	}
}

/* Single Column Layout */
#main.two-column #primary,
#main.one-column #primary {
	width: 100%;
}

#toTop {
	position: absolute;
	right: 0;
	bottom: 0;
}

.footer-navi_block small.copyright {
	position: absolute;
	width: fit-content;
	bottom: 1em;
	right: 1em;
	font-size: 0.75em;
	letter-spacing: 0.1em;
	color: #9f9f9f;
}

.goTop {
	position: fixed;
	width: fit-content;
	right: clamp(0.5em, -1.269em + 4.72vw, 1.75em);
	bottom: 2em;
	z-index: 899;
	opacity: 0;
	visibility: hidden;
	transform: translateY(20px);
	transition: opacity 0.4s, visibility 0.4s, transform 0.4s;

	svg,
	span {
		display: block;
	}

	svg {
		height: clamp(1.25em, 0.5em + 2vw, 2em);
		width: auto;
		aspect-ratio: 1 / 1;
	}

	a {
		font-family: "Ysabeau Infant", sans-serif;
		display: grid;
		gap: 4px;
		justify-items: center;
		align-content: center;
		width: 100%;
		height: 100%;
		aspect-ratio: 1 / 1;
		padding: clamp(0.5em, 1.33vw, 1em);
		color: var(--color-accent-color);
		border: 1px solid var(--color-accent-color);
		background-color: var(--color-main-color);
		transition: all 0.8s ease;

		&:hover {
			background-color: var(--color-headline-color);
			color: var(--color-dark-color)
		}

		span {
			font-weight: 800;
			font-size: clamp(0.563em, 0.25em + 0.83vw, 1em);
		}
	}
}

.goTop.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* ========================================
コンポーネント
======================================== */
/* wordpress管理バー対応 */
body.admin-bar header.site-header {
	top: 32px;

	@media(782px >=width) {
		top: 46px;
	}
}

/* Social Links */
.social-links {
	display: flex;
	gap: 1rem;
	width: fit-content;

	a svg {
		width: 2.5em;
		aspect-ratio: 1 / 1;
	}
}

/* Brand Logo */
.brand {
	font-size: clamp(2.625em, 0.482em + 5.71vw, 5.625em);
	line-height: 1.1;
	/* font-weight: 400; */
	/* letter-spacing: 0.25em; */
	text-align: center;
}

/* お問い合わせボタン */
.site-header-infor,
.site-footer-infor{
	transition: all 0.3s ease;
	color: var(--color-accent-color);
	position: relative;
	width: fit-content;
	letter-spacing: 0.11em;
	font-family: inherit;
	opacity: 1;
	visibility: visible;

	a {
		font-family: inherit;
		display: block;
		color: var(--color-accent-color);
		background-color: var(--color-main-color);
		border: 1px solid var(--color-accent-color);
		opacity: inherit;
		visibility: inherit;
		transition: inherit;

		&:hover {
			background-color: var(--wp--preset--color--black);
			/* color: #ddc89b; */
		}
	}

	/* 矢印 */
	a::after {
		content: "";
		display: block;
		width: 3em;
		height: 0.5em;
		position: absolute;
		background-color: var(--color-accent-color, #DAA7B5);
		-webkit-mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 48 5" xmlns="http://www.w3.org/2000/svg"><path d="M1 4H47L40.2058 0.5" stroke="black" stroke-width="0.8" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg>') no-repeat center / contain;
		mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 48 5" xmlns="http://www.w3.org/2000/svg"><path d="M1 4H47L40.2058 0.5" stroke="black" stroke-width="0.8" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg>') no-repeat center / contain;
		transition: transform 0.3s ease;
	}

	/* ホバー時のアニメーション */
	a:hover::after {
		transform: translateY(-50%) translateX(0.5em);
		background-color: #ddc89b;
	}
}

.site-header-infor {
	margin-right: 2.25em;
	white-space: nowrap;
	a {
		line-height: 144.92%;
		font-size: clamp(0.875em, 0.696em + 0.48vw, 1.125em);
		padding: clamp(0.625em, 0.446em + 0.48vw, 0.875em) clamp(1em, -1.321em + 6.19vw, 4.25em);

		&::after {
			top: 50%;
			right: -1.25em;
			transform: translateY(-50%);
			background-color: var(--color-accent-color, #ddc89b);
		}
	}
}

.site-footer-infor {
	margin-block: 0;
	width: 100%;
	line-height: 2;

	a {
		font-size: 1.125em;
		/* 18px */
		width: 100%;
		letter-spacing: normal;
		padding: 1em 2em;

		&::after {
			top: 50%;
			right: 1em;
			transform: translateY(-50%);
		}
	}
}

@media(600px >=width) {
	div:has(.site-footer-infor) {
		width: 100%;

		.contact-phone {
			font-size: 1.2em;

			span {
				font-size: 0.78em;
			}
		}
	}
}




/* Header */
header.site-header {
	z-index: 900;
	overflow-x: clip;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	padding-block: clamp(0.5em, 0.143em + 0.95vw, 1em) 0.75rem;
	display: grid;
	grid-template-columns: 1fr auto 3.74em;
	align-items: center;
	padding-inline: 1em;
	transition: opacity 0.7s cubic-bezier(.74, .19, .06, .98);
	opacity: 1;
	color: var(--color-main-color);

	/* border-bottom: 1px solid #eee; */
	.site-title {
		margin-block: 0;

		a {
			display: block;
		}
	}

	.site-description {
		line-height: 1;
		margin-block: 0;
		font-size: clamp(0.5em, 0.321em + 0.48vw, 0.75em);
		margin-block-end: 0.25em;
		/* kotei */
		font-weight: 300;
		color: var(--color-text);
		width:85%;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
	}

	.site-title {
		/* font-size: clamp(1.25em, 0.536em + 1.9vw, 2.25em); */
		/* font-size: clamp(1.5rem, 0.964rem + 1.43vw, 2.25rem); */
		font-size: clamp(1.5em, 1.143em + 0.95vw, 2em);
		font-weight: 300;
		/* kotei */
	}

	.header-block {
		display: flex;
		align-items: center;
		gap: 1em;
	}
}


@media(1024px >=width) {
	header.site-header{
		grid-template-columns: 1fr 3.74em;
		justify-content: space-between;
	}
	.site-header-infor {
		opacity: 0;
		display:none;
	}
}
@media(1024px < width) {
	.site-footer-infor {
		a {
			width: fit-content;
			padding: clamp(0.625em, 0.3em + 0.4vw, 0.875em) 6em clamp(0.625em, 0.3em + 0.4vw, 0.875em) 5.5em;

			&::after {
				right: 1.25em;
			}
		}
	}
}


/* スクロールダウン時にヘッダーを隠すためのクラス */
header.site-header.header-hidden {
	transform: translateY(-100%);
	opacity: 0;
	pointer-events: none;
	transition: all 0.7s cubic-bezier(.74, .19, .06, .98);
}

/* Hamburger Menu */
.hamburger-button {
	cursor: pointer;
	display: block;
	padding-inline: 0.5rem;
	padding-block-start: 0.5rem;
	z-index: 997;
	position: relative;
	width: fit-content;
	align-self: center;

	.menu-text {
		display: block;
		text-align: center;
		margin-inline: auto;
		line-height: 1;
		font-size: clamp(14px, 0.388vw + 12.55px, 30px);
		transition: all 0.7s cubic-bezier(.74, .19, .06, .98);
	}
}

.hamburger-icon {
	display: inline-block;
	vertical-align: middle;
	width: 100%;
	height: 20px;
	position: relative;
	margin-right: 8px;

	span {
		display: block;
		position: absolute;
		height: 1.5px;
		width: 100%;
		background-color: var(--color-main-color);
		border-radius: 2px;
		left: 0;
		transition: transform 0.3s, opacity 0.3s;
	}

	span:nth-child(1) {
		top: 0;
	}

	span:nth-child(2) {
		top: 9px;
	}
}

/* Full-screen Menu Container */
.header-right {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	color: var(--color-white-color);
	background-color: var(--color-main-color);
	background-image: url(../../uploads/2025/10/menu-panel_bg.webp);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	z-index: 900;
	/* display: flex;
	flex-direction: column;
	justify-content: center; */
	transform: translateX(100%);
	transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1);
	overflow-y: clip;
	-webkit-overflow-scrolling: touch;

	.site-header-nav ul {
		text-align: center;
	}
}

.header-right-inner-wrapper {
	position: absolute;
	padding-inline: 1em;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	height: 100dvh;
	top: 0;
	left: 0;

	&::after {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100dvh;
		background-image: linear-gradient(300deg, #1d1d1d 0%, #2b2b2b 35%, #a9a9a9 100%);
		mix-blend-mode: multiply;
	}
}

.header-right-inner {
	position: relative;
	z-index: 1;
}

.close-button {
	position: absolute;
	top: 1rem;
	right: 1rem;
	cursor: pointer;
	font-size: 2rem;
	z-index: 999;
}

/* Hamburger Toggle States */
#hamburger-toggle:checked~.hamburger-button .hamburger-icon span:nth-child(1) {
	transform: rotate(25deg);
	top: 4px;
}

#hamburger-toggle:checked~.hamburger-button .hamburger-icon span:nth-child(2) {
	transform: rotate(-25deg);
	top: 4px;
}

#hamburger-toggle:checked~.header-right {
	transform: translateX(0);
}

/* ハンバーガーメニューが開いている時に親のスクロールを無効化 */
body:has(#hamburger-toggle:checked) {
	overflow: hidden;
	height: 100dvh;
}

.hamburger-button>div>span {
	display: grid;
	place-items: center;
}

/* header-menu open 設定 */
.header-right-inner {
	display: grid;
	width: fit-content;
	margin-inline: auto;
	gap: 2em;

	.logotype {

		.outfit,
		.zen-old-mincho-regular {
			font-weight: 400;
			letter-spacing: 3.60px;
			margin-block: 0;
		}

		.outfit {
			/* 画面幅に応じてフォントサイズを調整 */
			/* 最小40px、最大90px、1920px幅で90pxになるように設定 */
			font-size: clamp(2.5em, 0.268em + 5.95vw, 5.625em);
			line-height: 1;
			margin-block-end: 0.25em;
			letter-spacing: 3.60px;
			font-weight: normal;
		}

		.zen-old-mincho-regular {
			font-size: clamp(1em, 0.107em + 2.38vw, 2.25em);
			line-height: 1;
			font-feature-settings: "palt";
			padding-inline-start: 0.3em;
		}
	}
}

.site-header-nav,
.footer-navigation {
	--menu-gap-size: clamp(0.25rem, 0.063rem + 0.5vw, 0.5rem);
	color: var(--color-dark-color);
	display: grid;
	gap: clamp(0.45rem, 0.037rem + 1.1vw, 1rem);
	transition: opacity 0.4s ease;
	font-family: "Zen Old Mincho", serif;
	&:hover a,
	&:hover p,
	&:hover #menu-header_navi2 a:before {
		opacity: 0.5;
		transition: opacity 0.4s ease;
	}
	&:hover .cart-mypage{
		border-color: #d9d9d98d;
	}

	.menu-header-ul,
	.menu-footer-ul {
		display: grid;
		gap: var(--menu-gap-size, clamp(0.25rem, 0.063rem + 0.5vw, 0.5rem));
	}

	li,
	a {
		text-align: left;
		font-feature-settings: "palt";
		transition: opacity 0.4s ease;
	}

	a {
		display: block;
		color: var(--color-dark-color);
		font-weight: 700;
		letter-spacing: 1.40px;
		padding-block: var(--menu-gap-size, clamp(0.25rem, 0.063rem + 0.5vw, 0.5rem));

		&:hover {
			opacity: 1;
			transition: opacity 0.4s ease;
		}
	}

		li.cart-mypage {
			border: 1px solid var(--color-dark-color);
			padding-inline: 1em;
			padding-block: 0.2em;
			line-height: 1;
			&:hover {
				opacity: 1;
				transition: opacity 0.4s ease;
			}
		}

	li.cart-mypage:hover{
		opacity: 1;
		transition: border 0.4s ease;
	}
	p {
		line-height: 1;
		margin-block: 0;
		padding-block: var(--menu-gap-size, 0.5em);
		margin-block-end: var(--menu-gap-size, 0.25em);
	}

	#menu-header_navi2 a:before,
	#menu-header_navi2-1 a:before {
		content: "";
		color: var(--color-accent-color);
		display: inline-block;
		width: 0.65em;
		height: 1em;
		margin-inline-end: 0.5em;
		background-image: url(../../uploads/2025/10/li-before-line.svg);
		background-position: left top 60%;
		background-repeat: no-repeat;
		background-size: contain
	}
}

.sns-link {
	color: var(--color-dark-color);
	position: relative;
	top: 9.5em;
	transition: all 0.4s ease;
	z-index: 1;

	&:hover svg {
		color: #d9d9d9b0;
	}
}

.social-links {
	margin-inline: auto clamp(1em, -47.125em + 48.13vw, 10.625em);

	a {
		display: block;
		transition: all 0.4s ease;

		&:hover svg {
			color: var(--color-dark-color);
			transition: all 0.4s ease;
		}
	}
}

.footer-navigation {
	width: fit-content;
	margin-inline: auto;
	justify-content: center;

	.menu-footer-ul {
		gap: var(--menu-gap-size, 0.5em);
	}
}

@media(1024px <=width) {
	.header-right-inner {
		grid-template-columns: 1fr;
		gap: 6em clamp(0.25em, -5.75em + 9.38vw, 5.5em);
	}

	.sns-link {
		top: 5em;
	}
}

@media(1024px < width) {
	.header-right-inner {
		.site-header-nav {
			grid-template-columns: 0.5fr 1fr 1fr;
			gap: 2em;
		}
	}

	.footer-navi_block {
		.footer-navigation {
			grid-template-columns: repeat(3, auto);
			gap: 5.5em;
		}
	}
}

@media(1280px < width) {
	.header-right-inner {
		grid-template-columns: repeat(2, 1fr);

		.site-header-nav {
			grid-template-columns: 0.8fr 1.25fr 0.8fr;
			gap: clamp(1em, -6.385em + 11.54vw, 2.5em);
		}
	}

	.footer-navi_block {
		.footer-navigation {
			gap: unset;
			padding-inline-start: 4em;

			.nav-menu-footer__inner:nth-child(2) {
				margin-inline-start: 6em;
			}

			.nav-menu-footer__inner:nth-child(3) {
				margin-inline-start: 4em;
			}
		}
	}
}

/* =======================================
   ヘッダーの配色切り替え (Intersection Observer)
======================================== */
/* 色の変化をスムーズにするための transition を設定 */
header.site-header,
header.site-header .site-title a,
header.site-header .site-description {
	transition: transform 0.3s, opacity 0.3s, color 0.3s, background-color 0.3s ease-in-out;
}

header.site-header .site-title a {
	color: var(--color-headline-color);
}

header.site-header-infor,
header.site-header-infor a {
	transition: transform 0.3s, opacity 0.3s, color 0.3s, background-color 0.3s ease-in-out;
}

.hamburger-icon span {
	/* 既存の transition に background を追加 */
	transition: transform 0.3s, opacity 0.3s, background-color 0.3s ease-in-out;
}

/* ダークテーマのセクション上にヘッダーがある場合のスタイル */
body:not(#hamburger-toggle:checked) header.header-theme-dark .site-title a,
header.site-header.header-theme-dark .menu-text {
	color: var(--color-white-color);
}

body:not(#hamburger-toggle:checked) header.header-theme-dark .site-description {
	color: var(--color-dark-color);
}

body:not(#hamburger-toggle:checked) header.header-theme-dark .site-title a {
	line-height: normal;
}

header.site-header.header-theme-dark .hamburger-icon span {
	/* ハンバーガーアイコンの線の色 */
	background: var(--color-white-color);
}

body:has(#hamburger-toggle:checked) header.site-header .menu-text {
	color: var(--color-white-color);
}

body:has(#hamburger-toggle:checked) header.site-header .hamburger-icon span {
	background: var(--color-white-color);
}

/* ========================================
   汎用表示アニメーション
======================================== */
/* 各アニメーションクラスの初期状態（画面外の状態）を定義 */
.effect-fadeup:not(.wp-block-video) {
	transform: translateY(2.5rem);
	opacity: 0.1;
	font-family: inherit;
}

/* アニメーションごとの初期位置やスケールを指定 */
.effect-fadeup.show {
	transform: translateY(0);
	opacity: 1;
	transition: all .7s ease-out;
}

.effect-in-right {
	transform: translateX(-50px);
}

.effect-in-left {
	transform: translateX(50px);
}

.effect-zoom-in {
	transform: scale(0.9);
}

/* レスポンシブ */
@media(600px >=width) {
	header.site-header {
		grid-template-columns: 1fr auto;

		.site-header-infor {
			display: none;
		}

		.site-description {
			width:32em;
		}
	}

	.hamburger-button {
		justify-self: end;
	}

	.header-right-inner {
		gap: 1em;
	}

	.site-header-nav .nav-menu-open__inner {
		.menu-header-ul {
			gap: unset;
			margin-block: 0;
		}

		p {
			margin-block: 0;
		}

		.site-header-nav {
			background-color: pink;
			gap: 0.5em;
		}
	}
}

@media(1240px >=height) {
	.header-right {
		.header-right-inner-wrapper .sns-link {
			top: unset;
			bottom: 5em;
			position: absolute;
			right: 3em;

			svg {
				width: 2em;
			}
		}

		.header-right-inner {
			overflow-y: auto;
			/* padding-block-start: 10em; */
			padding-block-start: min(5em, 4dvh);
		}
	}
}

/* カートの数値を増減するボタンと入力フィールドのスタイル */
/* ボタンの基本スタイル */
.btn-minus,
.btn-plus {
	border: none;
	width: fit-content;
	height: fit-content;
	padding-inline: 0.35em;
	cursor: pointer;
	font-size: 1.5em;
	font-weight: bold;
	transition: all 0.2s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	user-select: none;
	-webkit-user-select: none;
}

.btn-minus:hover,
.btn-plus:hover {
	background: #e9ecef;
}

.btn-minus:active,
.btn-plus:active,
.btn-minus.clicked,
.btn-plus.clicked {
	background: #dee2e6;
	transform: scale(0.95);
}

/* 無効状態のスタイル */
.btn-minus.disabled,
.btn-plus.disabled {
	background: #f1f3f4;
	color: #9aa0a6;
	cursor: not-allowed;
	opacity: 0.6;
}

.btn-minus.disabled:hover,
.btn-plus.disabled:hover {
	color: #9aa0a6;
	transform: none;
}

/* 数量セレクターの全体スタイル */
.quantity-selector {
	display: inline-flex;
	align-items: center;
}

.quantity-selector input[type="number"] {
	border: none;
	outline: none;
	text-align: center;
	width: fit-content;
	padding-inline: 0.5em;
	font-size: 1.25em;
	background: transparent;
	/* Firefox: スピンボタン削除 */
	-moz-appearance: textfield;
	/* その他のブラウザ: デフォルトスタイル削除 */
	appearance: none;
}


.quantity-selector input[type="number"]::-webkit-outer-spin-button,
.quantity-selector input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}





/* アクセシビリティ対応 */
@media (prefers-reduced-motion: reduce) {

	.btn-minus,
	.btn-plus {
		transition: none;
	}
}

/* モバイル対応 */
@media (768px >=width) {
	.quantity {
		display: block;
	}

	.btn-minus,
	.btn-plus {
		width: fit-content;
		height: fit-content;
		font-size: 1.5em;
		padding-inline: 0.5em;
	}

	.quantity-selector input[type="number"] {
		width: fit-content;
		padding: 0.5em;
		margin: auto;
	}
}

main {
	p {
		text-align: justify;
	}
}


.page-entry-width{
	width:var(--contents-block-width);
	margin-inline:auto;
	max-width: 1100px;
}


.navigation.post-navigation,
#wc_customer,
#wc_delivery,
#wc_confirm,
#wc_login,
#wc_newmemberform,
#page-usces-member,
#wc_ordercompletion {
	width:var(--contents-block-width);
	margin-inline:auto;
	padding-block: 5em 3em;
	.nav-links {
        display: flex;
								gap: 2em;
        line-height: 1;
        justify-content: center;
        align-items: center;
	a,
	span{
		display: block;
		width: fit-content;
	}
	a{
			display: flex;
			align-items: center;
			gap:1em
	}
}
.nav-previous a::before {content: "<-"; margin-right:0.3em;}
.nav-next a::after{content: "->"; margin-left:0.3em;}
}

#wc_login .whitebox .loginbox {
				width: var(--contents-blocknarrow-width);
				margin-inline: auto;
}

@media(600px >=width){
	.site-header-nav, .footer-navigation {
		li a{
			font-size:14px
		}
		li {
			position: relative;
			&.cart-mypage {
				border:none;
				
				float:left;
				width:fit-content;
				padding-inline: 0;
				a{
					padding: 0.5em;
					border:1px solid var(--color-dark-color);
				}
			}
		}

	}
}