/*!
Theme Name: wptest
Theme URI: http://underscores.me/
Author: 矢萩主真
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: theme
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

wptest is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
	font-family: "yu-mincho-pr6n", sans-serif;
}

/* Sections
	 ========================================================================== */

/**
 * Remove the margin in all browsers.
 */
body {
	margin: 0;
	font-family: "yu-mincho-pr6n", sans-serif;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
	display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

/* Grouping content
	 ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
	font-family: monospace, monospace;
	font-size: 1em;
}

/* Text-level semantics
	 ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */
a {
	background-color: transparent;
}

@media (max-width: 1024px) {
	.pc {
		display: none;
	}
}

@media (min-width: 1025px) {
	.sp {
		display: none;
	}
}

/* 1024px 以下 */
@media (max-width: 1024px) {
	.maxwidth {
		max-width: 84%;
		margin: auto;
	}

}

/* 1025px 以上 1281px 以下 */
@media (min-width: 1025px) and (max-width: 1280px) {
	.maxwidth {
		max-width: 1180px;
		margin: auto;
	}
}

/* 1282px 以上 */
@media (min-width: 1281px) {
	.maxwidth {
		max-width: 1440px;
		margin: auto;
	}

}

/* ========= PCのみ ========= */
@media (min-width: 768px) {

	/* リスト内リンクのベース */
	.g-nav__list a {
		position: relative;
		display: inline-block;
		padding: 8px 6px;
		text-decoration: none;
		color: inherit;
		/* 初期はヘッダーの色に追従 */
		transition: color .25s ease;
	}

	/* 下線（非表示→スケールで表示） */
	.g-nav__list a::after {
		content: "";
		position: absolute;
		left: 6px;
		right: 6px;
		bottom: -6px;
		height: 2px;
		background: linear-gradient(90deg, #CB9C9C, #B77272, #9A7A47);
		transform: scaleX(0);
		transform-origin: left;
		transition: transform .35s cubic-bezier(.2, .7, 0, .99);
	}

	/* hover：色を金、下線を表示 */
	.g-nav__list a:hover {
		color: #CBA96E;
	}

	.g-nav__list a:hover::after {
		transform: scaleX(1);
	}

	/* 可能ならテキストも金グラデで“流れる”演出（対応ブラウザのみ） */
	@supports (-webkit-background-clip: text) or (background-clip: text) {
		.g-nav__list a:hover {
			color: transparent;
			/* いったん透明にして… */
			background-image: linear-gradient(90deg, #CB9C9C, #B77272, #9A7A47);
			background-size: 200% 100%;
			background-position: 0% 50%;
			-webkit-background-clip: text;
			background-clip: text;
			-webkit-text-fill-color: transparent;
			transition: background-position 1.0s ease, color .2s ease;
		}

		.g-nav__list a:hover {
			background-position: 100% 50%;
			/* 左→右へ流れる */
		}
	}

	/* ===================== 「お問い合わせ」だけ枠付きボタン風 ===================== */
	/* HTMLを触れない前提で「最後の項目」をCTA扱い */
	.g-nav__list li:last-child a {
		padding: 10px 16px;
		border: 1px solid currentColor;
		/* 初期は文字色の枠 */
		border-radius: 2px;
		line-height: 1;
		isolation: isolate;
		/* ::before の重なり順制御 */
		overflow: hidden;
	}

	/* 金スイープ背景（.viewmoreと同じ考え方） */
	.g-nav__list li:last-child a::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background: linear-gradient(90deg,
				#E7B0B0 0%,
				#DD9B9B 22%,
				#CD8282 45%,
				#B66363 70%,
				#7A3030 100%);
		background-size: 200% 100%;
		background-position: 0% 50%;
		clip-path: inset(0 100% 0 0);
		/* 右100%で見えない状態 */
		transition:
			clip-path .75s cubic-bezier(.2, .7, 0, .99),
			background-position 1.2s ease;
	}

	/* CTA hover時：金背景が満ちて文字を白に */
	.g-nav__list li:last-child a:hover {
		color: #fff;
		/* 背景に乗る文字色 */
		border-color: transparent;
		/* 枠は背景に溶かす */
	}

	.g-nav__list li:last-child a:hover::before {
		clip-path: inset(0 0 0 0);
		/* 全面表示 */
		background-position: 100% 50%;
		/* 左→右へ流れる */
	}

	.extratext {
		font-size: 14px;
		padding-top: 16px;
	}

	/* グラデテキスト化はCTAでは不要なので打ち消す */
	@supports (-webkit-background-clip: text) or (background-clip: text) {
		.g-nav__list li:last-child a:hover {
			background-image: none;
			-webkit-background-clip: initial;
			background-clip: initial;
			-webkit-text-fill-color: initial;
		}
	}
}



/* 固定ヘッダー */
.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	color: white;
}

/* WP管理バー（ログイン時）で隠れないように */
body.admin-bar .site-header {
	top: 32px;
}

@media (max-width: 782px) {
	body.admin-bar .site-header {
		top: 46px;
	}
}

.headerflex {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 80px;
	width: 95%;
	margin: auto;
}

.logo {
	display: flex;
	width: 140px;
	align-items: center;
}

.contents {
	width: 100%;
	height: auto;
}

.contents img {
	width: 100%;
}

/* ヘッダー土台（初期：透明＋白系） */
/* 可変ヘッダー高（必要なら数値調整） */
:root {
	--header-h: 80px;
}

/* 固定ヘッダー本体 */
.site-header {
	position: fixed;
	/* ← sticky ではなく fixed に */
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	background: transparent;
	/* 初期は透明 */
	color: #fff;
	/* 初期は白文字 */
	transition: background .25s, box-shadow .25s, color .25s;
}

/* ログイン時の管理バー考慮 */
body.admin-bar .site-header {
	top: 32px;
}

@media (max-width: 782px) {
	body.admin-bar .site-header {
		top: 46px;
	}
}

/* 中身の整列 */
.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 10px 16px;
	min-height: var(--header-h);
}

/* ロゴ：imgは非表示、背景で白/カラーを切替（画像パスは環境に合わせて） */
.logo a {
	display: block;
	position: relative;
}

.logo img {
	display: none;
}

/* ===== PCメニュー ===== */
.g-nav {
	display: block;
}

.g-nav__list {
	display: flex;
	gap: 24px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.g-nav__list a {
	text-decoration: none;
	color: inherit;
	font-weight: 500;
	/* ヘッダーの color に追従 */
}

/* ===== ハンバーガー（PCでは非表示） ===== */
.hamburger {
	display: none;
	width: 44px;
	height: 44px;
	padding: 10px;
	border: none;
	background: transparent;
	position: relative;
}

.hamburger span {
	position: absolute;
	left: 10px;
	right: 10px;
	height: 2px;
	background: currentColor;
	/* ヘッダー色に追従 */
	transition: transform .25s, opacity .2s;
}

.hamburger span:nth-child(1) {
	top: 14px;
}

.hamburger span:nth-child(2) {
	top: 21px;
}

.hamburger span:nth-child(3) {
	top: 28px;
}

/* ===== SPレイアウト（ヘッダー下・右→左 全画面） ===== */
@media (max-width: 767px) {
	.g-nav {
		position: fixed;
		top: var(--header-h, 80px);
		/* ヘッダーの高さ分下に配置 */
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: calc(100vh - var(--header-h, 80px));
		background: #000;
		/* 黒背景 */
		color: #fff;
		transform: translateX(100%);
		/* 初期は右の外へ */
		transition: transform .35s ease;
		z-index: 120;
		display: flex;
		flex-direction: column;
		padding: 32px 20px;
	}

	.g-nav__list {
		display: flex;
		flex-direction: column;
		gap: 0;
		margin: 0;
		padding: 0;
		list-style: none;
		flex: 1 1 auto;
		overflow-y: auto;
	}

	.g-nav__list li a {
		position: relative;
		display: block;
		padding: 16px 28px 16px 4px;
		font-size: 16px;
		line-height: 1.8;
		color: #f5f5f5;
		text-decoration: none;
		border-bottom: 1px solid rgba(255, 255, 255, .15);
		transition: color .2s ease, background-color .2s ease;
	}

	.g-nav__list li a::after {
		content: "";
		position: absolute;
		right: 6px;
		top: 50%;
		width: 8px;
		height: 8px;
		margin-top: -6px;
		border-right: 1.5px solid #CBA96E;
		border-top: 1.5px solid #CBA96E;
		transform: rotate(45deg);
		opacity: .9;
	}

	.g-nav__list li a:hover {
		color: #CBA96E;
		background-color: rgba(188, 133, 133, .1);
	}

	/* ハンバーガーはSPで表示 */
	.hamburger {
		display: block;
		z-index: 130;
	}

	/* 背景オーバーレイ（全画面） */
	.g-nav__overlay {
		position: fixed;
		top: var(--header-h, 80px);
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, .45);
		z-index: 110;
		display: none;
	}

	/* 開いた時の状態 */
	body.is-nav-open {
		overflow: hidden;
	}

	body.is-nav-open .g-nav {
		transform: translateX(0);
	}

	body.is-nav-open .g-nav__overlay {
		display: block;
	}

	/* ハンバーガー → 白い× */
	body.is-nav-open .hamburger span {
		background: black;
	}

	body.is-nav-open .hamburger span:nth-child(1) {
		transform: translateY(7px) rotate(45deg);
	}

	body.is-nav-open .hamburger span:nth-child(2) {
		opacity: 0;
	}

	body.is-nav-open .hamburger span:nth-child(3) {
		transform: translateY(-7px) rotate(-45deg);
	}

	/* CTA（お問い合わせ）だけボタン風 */
	.g-nav__list li:last-child {
		border-bottom: none;
	}

	.g-nav__list li:last-child a {
		margin-top: 24px;
		border: 1.5px solid #E6D6D6;
		text-align: center;
		line-height: 1;
		padding: 14px 16px;
		font-weight: 500;
		letter-spacing: .06em;
		background: linear-gradient(90deg, #E7B0B0 0%, #DD9B9B 22%, #CD8282 45%, #B66363 70%, #7A3030 100%);
		background-size: 200% 100%;
		background-position: 200% 50%;
		color: #fff;
		transition: background-position 1.2s ease, color .2s ease, border-color .2s ease;
	}

	.extratext {
		font-size: 10px;
		padding-top: 6px;
	}

}

/* ===== スクロール後（白背景＋濃色文字＋カラーのロゴ） ===== */
.site-header.is-scrolled {
	background: #fff;
	color: #222;
	box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
}

.site-header.is-scrolled .logo a {
	background-image: none;
}

/* SPメニュー展開中は常に”スクロール後”の見た目 */
body.is-nav-open .site-header {
	background: #fff !important;
	color: #222 !important;
}

body.is-nav-open .logo a {
	background-image: none !important;
}

/* ===== レイアウトの押し下げ対策（FVだけ重ねたい場合） =====
   - 固定ヘッダーで隠れないように body に上余白を付け、
     ヒーロー(.fv)だけは引き上げて重ねます。不要なら削除OK。 */
body {
	padding-top: var(--header-h);
}

.fv {
	margin-top: calc(-1 * var(--header-h));
}

/* fv */

.fv {
	width: 100%;
}

.fv img {
	width: 100%;
}

/* concept */

.conceptback {
	background: url('images/common/conceptbackpc.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* 1025px 以上 1281px 以下 */
@media (min-width: 1025px) and (max-width: 1280px) {
	.concepttitle {
		font-size: 52px;
		color: #CBA96E;
		padding-top: 10%;
		padding-bottom: 5%;
		font-family: "garamond-premier-pro-display", serif;
		font-weight: 300;
		font-style: normal;
	}

	.conceptsubtitle {
		font-size: 24px;
		color: white;
		padding-bottom: 5%;
		line-height: 1.8;
	}

	.concepttext {
		font-size: 16px;
		color: white;
		line-height: 1.8;
		padding-bottom: 5%;
	}

}

/* 1282px 以上 */
@media (min-width: 1281px) and (max-width: 1921px) {

	.concepttitle {
		font-size: 52px;
		color: #CBA96E;
		padding-top: 15%;
		padding-bottom: 5%;
		font-family: "garamond-premier-pro-display", serif;
		font-weight: 300;
		font-style: normal;
	}

	.conceptsubtitle {
		font-size: 24px;
		color: white;
		padding-bottom: 5%;
		line-height: 1.8;
	}

	.concepttext {
		font-size: 16px;
		color: white;
		line-height: 1.8;
		padding-bottom: 15%;
	}
}

/* 1922px 以上 */
@media (min-width: 1922px) {

	.concepttitle {
		font-size: 52px;
		color: #CBA96E;
		padding-top: 25%;
		padding-bottom: 5%;
		font-family: "garamond-premier-pro-display", serif;
		font-weight: 300;
		font-style: normal;
	}

	.conceptsubtitle {
		font-size: 24px;
		color: white;
		padding-bottom: 5%;
		line-height: 1.8;
	}

	.concepttext {
		font-size: 16px;
		color: white;
		line-height: 1.8;
		padding-bottom: 25%;
	}
}


/* Works */
/* ========== Works スライダー（オーバーレイ方式） ========== */
.works-slider {
	position: relative;
	width: 100%;
	overflow: hidden;
}

/* 同じ座標に重ねる */
.works-track {
	position: relative;
	width: 100%;
	height: 100%;
	min-height: 415px;
	/* 任意の高さ */
}

/* 全スライドを重ね置き */
.works-track>img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	/* 初期は見えない（下地は残す） */
	z-index: 0;
	transform: translateY(0);
	transition: none;
	will-change: transform, opacity;
}

/* 表示中（下地） */
.works-track>img.is-active {
	opacity: 1;
	z-index: 1;
}

/* ポインタ */
.works-slider:hover {
	cursor: pointer;
}

/* 利用者設定で動きを減らす */
@media (prefers-reduced-motion: reduce) {
	.works-track>img {
		transition: none !important;
		transform: none !important;
	}
}

/* ========== ホバー時の暗幕＆キャプション ========== */
/* 暗幕（ホバー時のみ。アニメ中の“上から被さる画像”にも効く） */
.works-dim {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .45);
	opacity: 0;
	transition: opacity .2s ease;
	z-index: 4;
	/* 動く画像(z=2)より前、キャプション(z=5)より下 */
	pointer-events: none;
}

.works-slider.is-hovering .works-dim {
	opacity: 1;
}

/* キャプション本体 */
.works-caption {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	pointer-events: none;
	/* クリックは下地へ */
	opacity: 0;
	transition: opacity .3s ease;
	z-index: 5;
	/* 画像より前面 */
}

.works-slider.is-hovering .works-caption {
	opacity: 1;
}

/* 中身のボックス */
.works-caption__inner {
	text-align: center;
	color: #fff;
	max-width: min(80%, 720px);
	padding: 24px 28px;
}

/* タイトルと説明 */
.works-caption__title {
	font-size: clamp(18px, 2.8vw, 24px);
	letter-spacing: .02em;
	margin: 0 0 10px;
	font-family: "garamond-premier-pro-display", serif;
	font-weight: 300;
	font-style: normal;
}

.works-caption__desc {
	font-size: clamp(12px, 1.4vw, 16px);
	line-height: 1.8;
	opacity: .9;
}

/* 矢印 */
.works-caption__arrow {
	display: block;
	width: 110px;
	/* 矢印の長さは好みで */
	height: auto;
	margin: 16px auto 0;
	pointer-events: none;
	/* キャプションは操作不可のまま */
}

/* タイムバー */
.works-progress {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	/* 太さは好みで */
	background: rgba(255, 255, 255, .18);
	/* 台座 */
	z-index: 6;
	/* 画像より前、キャプションと同層でOK */
	pointer-events: none;
}

.works-progress__bar {
	display: block;
	width: 0%;
	height: 100%;
	background: #C08888;
	/* 指定色 */
	transition: width 0ms linear;
	/* 時間はJSで都度設定 */
}

/* ========== 既存レイアウト（モバイル基準：縦積み） ========== */
.worksflex {
	display: flex;
	flex-direction: column;
	/* SPは縦積み */
	justify-content: space-between;
	align-items: center;
	padding-top: 45px;
	padding-bottom: 45px;
}

.worksflex img {
	width: 100%;
}

/* SPはタイトル→本文→（サムネ）→ボタンの順 */
.worksflextext {
	width: 100%;
	display: contents;
	/* 子要素をフレックス直下に見せる（SP用） */
}

/* 並び順（SPのまま維持） */
.workstitle {
	order: 1;
	width: 100%;
}

.workstext {
	order: 2;
	width: 100%;
}

.viewmore {
	order: 4;
}

/* タイポ・装飾 */
:root {
	--gold-grad: linear-gradient(90deg, #CB9C9C, #B77272, #9A7A47);
}

.workstitle {
	font-size: 52px;
	color: #CBA96E;
	padding-bottom: 10px;
	margin-bottom: 10px;
	position: relative;
	display: inline-block;
	font-family: "garamond-premier-pro-display", serif;
	font-weight: 300;
	font-style: normal;
}

.workstitle::after {
	content: "";
	position: absolute;
	left: 0;
	right: 180px;
	bottom: 0;
	height: 2px;
	background: var(--gold-grad);
}

.workstext {
	font-size: 16px;
	line-height: 1.8;
	padding-bottom: 20px;
}

.viewmore {
	--grad: linear-gradient(90deg, #CB9C9C 0%, #B77272 48%, #9A7A47 100%);
	/* ▼ホバー時の背景用（よりリッチな金） */
	--grad-hover: linear-gradient(90deg,
			#E7B0B0 0%,
			#DD9B9B 22%,
			#CD8282 45%,
			#B66363 70%,
			#7A3030 100%);

	position: relative;
	display: inline-block;
	padding: 12px 48px;
	line-height: 1;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: .18em;
	text-align: center;
	cursor: pointer;
	overflow: hidden;
	isolation: isolate;

	/* 初期は “金の文字＋透明背景”（既存のまま） */
	background-image: var(--grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;

	/* 枠は金のグラデ（既存のまま） */
	border: 2px solid transparent;
	border-image: var(--grad) 1;
	border-radius: 2px;

	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04);
	transition: color .25s ease, border-color .25s ease, box-shadow .25s ease;
}

/* 金背景を流し込むレイヤー（ホバー時だけ見える） */
.viewmore::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;

	/* ▼ここだけ “ホバー用の金” に変更 */
	background: var(--grad-hover);
	background-size: 200% 100%;
	background-position: 0% 50%;

	/* 初期は左から0%の幅（=見えない） */
	clip-path: inset(0 100% 0 0);

	transition:
		clip-path .75s cubic-bezier(.2, .7, 0, .99),
		background-position 1.5s ease;
}

/* テキストは初期金のまま（既存） */
.viewmore>span {
	background-image: var(--grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	/* Safari対策 */
}

/* Hover：背景スイープ、文字は黒（既存挙動を維持） */
.viewmore:hover {
	background-image: none;
	/* 親のテキスト用クリップを無効化 */
	-webkit-background-clip: initial;
	background-clip: initial;
	color: white;
	/* 念のため親にも色 */
	border-color: transparent;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}

.viewmore:hover::before {
	clip-path: inset(0 0 0 0);
	/* 金背景が全面に満ちる */
	background-position: 100% 50%;
	/* グラデが左→右へ流れる */
}

.viewmore:hover>span {
	background-image: none;
	/* 金文字の下地を解除 */
	-webkit-background-clip: initial;
	background-clip: initial;
	-webkit-text-fill-color: white;
	/* Safariで確実に黒に */
	color: white;
	/* 他ブラウザ用 */
}

/* フォーカス（キーボード操作配慮） */
.viewmore:focus-visible {
	outline: 2px solid #9A7A47;
	outline-offset: 2px;
}

/* 低モーション設定の配慮 */
@media (prefers-reduced-motion: reduce) {
	.viewmore::before {
		transition: none;
	}

	.viewmore {
		transition: none;
	}
}

/* ===== viewmore2（通常：白文字＋白枠 / ホバー：金スイープ） ===== */
.viewmore2 {
	--grad: linear-gradient(90deg, #CB9C9C 0%, #B77272 48%, #9A7A47 100%);
	--grad-hover: linear-gradient(90deg, #E7B0B0 0%, #DD9B9B 22%, #CD8282 45%, #B66363 70%, #7A3030 100%);
	position: relative;
	display: inline-block;
	padding: 12px 48px;
	line-height: 1;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: .18em;
	text-align: center;
	cursor: pointer;
	overflow: hidden;
	isolation: isolate;
	/* ← 通常は透明背景＋白文字＋白枠 */
	background: transparent;
	color: #fff;
	border: 1px solid #fff;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04);
	transition: color .25s ease, border-color .25s ease, box-shadow .25s ease;
	/* margin-bottom: 20px; */
}

/* 金背景を流し込むレイヤー（ホバー時だけ見える） */
.viewmore2::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--grad-hover);
	background-size: 200% 100%;
	background-position: 0% 50%;
	clip-path: inset(0 100% 0 0);
	transition: clip-path .75s cubic-bezier(.2, .7, 0, .99), background-position 1.5s ease;
}

/* 内側のテキスト（通常は白でOK） */
.viewmore2>span {
	color: #fff;
	/* 重要：通常白文字 */
	-webkit-text-fill-color: #fff;
	/* Safari */
}

/* Hover：金が満ちる。文字は白のまま、枠は金背景で隠すため透明に。 */
.viewmore2:hover {
	color: #fff;
	border-color: transparent;
	/* 金背景と重なるので枠は消す */
	box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}

.viewmore2:hover::before {
	clip-path: inset(0 0 0 0);
	background-position: 100% 50%;
}

.viewmore2:hover>span {
	color: #fff;
	-webkit-text-fill-color: #fff;
}

/* フォーカス（キーボード操作配慮） */
.viewmore2:focus-visible {
	outline: 2px solid #fff;
	/* 通常白枠に合わせて白アウトライン */
	outline-offset: 2px;
}

.padding-bottom {
	padding-bottom: 25px;
}

/* ========== PC用：画像左／テキスト右に戻す ========== */
@media (min-width: 1025px) {
	.worksflex {
		flex-direction: row;
		/* 横並び */
		align-items: center;
	}

	.works-slider.pc {
		flex: 1 1 60%;
		max-width: 60%;
	}

	.worksflextext {
		display: block;
		/* PCでは“塊”に戻す */
		flex: 1 1 40%;
		max-width: 40%;
		padding-left: 48px;
		/* 画像との間隔 */
	}

	.thumb-315x300.sp {
		display: none;
	}

	/* PCでサムネ枠は非表示 */
}



/* styles */

.styletitle {
	font-size: 52px;
	text-align: center;
	color: #CBA96E;
	padding-top: 40px;
	padding-bottom: 20px;
	font-family: "garamond-premier-pro-display", serif;
	font-weight: 300;
	font-style: normal;
}

.styleluxsback {
	background: url('images/common/styleluxs.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.stylejapandiback {
	background: url('images/common/stylejapandi.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}


.stylenameright {
	padding-top: 45px;
	padding-bottom: 35px;
}

.stylenameright img {
	width: 205px;
	height: auto;
	display: block;
	margin-left: auto;
}

.styletextright {
	text-align: right;
	font-size: 16px;
	color: white;
	line-height: 2.5;
	padding-bottom: 35px;
}

.stylenameleft {
	text-align: left;
	padding-top: 45px;
	padding-bottom: 35px;
}

.stylenameleft img {
	width: 205px;
}

.styletextleft {
	text-align: left;
	font-size: 16px;
	color: white;
	line-height: 2.5;
	padding-bottom: 35px;
}

@media (max-width: 1024px) {

	/* fv */

	.fv {
		width: 100%;
	}

	.fv img {
		width: 100%;
	}

	/* concept */

	.conceptback {
		background: url('images/common/sp/conceptbacksp.jpg');
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}

	.concepttitle {
		font-size: 36px;
		color: #CBA96E;
		padding-top: 68px;
		padding-bottom: 34px;
	}

	.conceptsubtitle {
		font-size: 24px;
		color: white;
		padding-bottom: 34px;
		line-height: 1.8;
	}

	.concepttext {
		font-size: 16px;
		color: white;
		line-height: 1.8;
		padding-bottom: 68px;
	}

	/* works */
	.worksflex {
		display: flex;
		flex-direction: column;
		/* ← column-reverse から変更 */
		justify-content: space-between;
		align-items: center;
		padding-top: 45px;
		padding-bottom: 45px;
	}

	.worksflex img {
		width: 100%;
	}

	.worksflextext {
		width: 100%;
		display: contents;
		/* ← 子要素（title/text/viewmore）をフレックス直下に */
	}

	/* 並び順：title(1) → text(2) → thumb(3) → viewmore(4) */
	.workstitle {
		order: 1;
		width: 100%;
	}

	.workstext {
		order: 2;
		width: 100%;
	}

	.thumb-315x300 {
		order: 3;
		margin: 16px 0;
	}

	.viewmore {
		order: 4;
	}

	.viewmore {
		display: block !important;
		/* ← ブロックにする */
		width: fit-content;
		/* ← 中身ぶんの幅 */
		margin: 0 auto;
		/* ← 中央寄せ */
	}

	/* サムネ枠を固定サイズに */
	.thumb-315x300 {
		width: 100%;
		height: auto;
		overflow: hidden;
		/* はみ出し隠す（保険） */
		padding-bottom: 14px;
	}

	/* 画像を枠いっぱいに＋中央でトリミング */
	.thumb-315x300 img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		/* 縦横比は保持しつつ、はみ出しカット */
		object-position: center;
		/* 真ん中で切り抜き */
		display: block;
		/* 画像下の隙間防止 */
	}

	:root {
		--gold-grad: linear-gradient(90deg, #CB9C9C, #B77272, #9A7A47);
	}

	.works-track {
		position: relative;
		width: 100%;
		height: 100%;
		min-height: 300px;
		/* サムネ用の高さ or 任意の高さを指定 */
	}

	.workstitle {
		font-size: 36px;
		color: #CBA96E;
		padding-bottom: 10px;
		margin-bottom: 10px;
		/* 下線との間隔 */
		position: relative;
		display: inline-block;
		/* 文字幅ぶんだけ下線にしたい場合 */
	}

	.workstitle::after {
		content: "";
		position: absolute;
		left: 0;
		right: 180px;
		bottom: 0;
		/* ちょうどpaddingの下端に線が来る */
		height: 2px;
		/* 下線の太さ */
		background: var(--gold-grad);
	}

	.workstext {
		font-size: 16px;
		line-height: 1.8;
		padding-bottom: 20px;
	}

	.viewmore {
		/* 好みで調整 */
		--grad: linear-gradient(90deg, #CB9C9C, #B77272, #9A7A47);
		font-size: 16px;
		font-weight: 500;
		line-height: 1;
		padding: 10px 40px;
		display: inline-block;
		text-align: center;

		/* グラデ文字 */
		color: transparent;
		background-image: var(--grad);
		-webkit-background-clip: text;
		background-clip: text;

		/* グラデボーダー */
		border: 2px solid transparent;
		border-image: var(--grad) 1;
		/* ←これだけで枠がグラデに */

	}

	/* styles */

	.styleluxsback {
		display: none;
	}

	.stylejapandiback {
		display: none;
	}

	.styletitle {
		font-size: 36px;
		text-align: left;
		color: black;
		padding-bottom: 10px;
	}

	.stylesubtitle {
		font-size: 16px;
		color: black;
		padding-bottom: 10px;
	}

	.styleimage {
		width: 100%;
	}

	.styleimage img {
		width: 100%;
	}

	.stylename {
		--overlap: 24px;
		/* ここを増減して食い込み量を調整 */
		width: 118px;
		position: relative;
		/* z-index を効かせるために必要 */
		z-index: 5;
		/* 上の画像より前面に */
		transform: translateY(calc(-1 * var(--overlap)));
		/* 上にずらす */
	}

	.stylename img {
		width: 118px;
		display: block;
		/* 画像下の隙間防止（任意） */
	}

	.styletext {
		line-height: 2.2;
		--overlap: 38px;
		/* ここを増減して食い込み量を調整 */
		transform: translateY(calc(-1 * var(--overlap)));
		padding-bottom: 20px;
	}

}

/* package plans */

/* package plans */
.tabname {
	font-size: 36px;
	line-height: 2;
}

/* 見出し */
.plantitle {
	font-size: 52px;
	text-align: center;
	color: #CBA96E;
	padding-bottom: 20px;
	font-family: "garamond-premier-pro-display", serif;
	font-weight: 300;
	font-style: normal;
}

.plansubtitle {
	font-size: 20px;
	text-align: center;
	padding-bottom: 20px;
	line-height: 2;
}

/* 非表示のタブコンテンツ（JSで読むだけ） */
.tab-contents {
	display: none;
}

/* セクション外枠（背景は当てない） */
.plan-carousel {
	position: relative;
	padding: 40px 0;
}

/* ▼ 背景を当てる面（タブ＋中身だけ） */
.plan-surface {
	--hero-bg: none;
	/* JSで差し替え */
	--hero-mask: rgba(255, 255, 255, 0);
	/* マスク濃度 */
	position: relative;
	padding: 20px 0;
	color: var(--text-color, #222);
}

/* 背景を画面いっぱいに広げる疑似要素 */
.plan-surface::before {
	content: "";
	position: absolute;
	top: -2px;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100vw;
	/* ビューポート幅いっぱい */
	z-index: 0;
	background:
		linear-gradient(var(--hero-mask), var(--hero-mask)),
		var(--hero-bg);
	background-size: cover;
	background-position: center;
}

/* 内部要素は上に載せる */
.plan-surface>* {
	position: relative;
	z-index: 1;
}

/* 上部3タブ（プラン切替） */
.plan-switch {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	margin: auto;
}

.switch {
	position: relative;
	overflow: hidden;
	background-size: cover;
	background-position: center;
	color: #222;
	text-align: center;
	transition: background .4s ease, color .4s ease;
	cursor: pointer;
	border: 1px solid #ccc;
	background-color: rgba(255, 255, 255, 0.75);
	padding-bottom: 20px;
}

.switch:hover {
	transform: translateY(-1px);
}

.switch.is-active {
	box-shadow: 0 0 0 2px rgba(142, 53, 53, .15) inset;
}

/* スライドレイアウト */
.slides {
	position: relative;
	border-radius: 12px;
	overflow: hidden;
}

.slide {
	display: none;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: center;
	opacity: 0;
	transform: translateX(0);
	transition: opacity .48s cubic-bezier(.2, .6, .2, 1);
	will-change: opacity;
	background: transparent;
	border-radius: 12px;
}

.slide.is-active {
	display: grid;
	opacity: 1;
}

/* 左側 */
.plan-head {
	margin-bottom: 20px;
}

.plan-ttl.en {
	font: 300 36px/1.2 "Noto Serif JP", serif;
	text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
}

.plan-ttl-ja {
	color: #666;
	margin-top: 6px;
}

.plan-lead {
	margin: 16px 0;
	line-height: 1.8;
	text-shadow: 0 1px 0 rgba(255, 255, 255, .25);
}

.plan-back {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	margin-top: 24px;
	padding: 6px 10px;
	border: 1px solid #ccc;
	background: #fff;
	font-size: 16px;
}

.plan-back[hidden] {
	display: none !important;
}

/* 設備タブ */
.plan-tabs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.tab {
	position: relative;
	overflow: hidden;
	padding: 12px;
	border: 1px solid #1B1D25;
	background: #fff;
	font-size: 16px;
	letter-spacing: .08em;
	cursor: pointer;
	text-align: center;
	color: #222 !important;
	transition: all .3s ease;
}

.tab.is-active {
	border-color: #9A7A47;
	color: #9A7A47;
	box-shadow: 0 0 0 2px rgba(142, 53, 53, .15) inset;
}

.tab::after {
	content: "";
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 6px;
	height: 1px;
	background: currentColor;
	opacity: .5;
	transform: scaleX(0);
	transform-origin: center;
	transition: transform .48s cubic-bezier(.2, .6, .2, 1), opacity .28s cubic-bezier(.2, .6, .2, 1);
}

.tab:hover::after {
	transform: scaleX(1);
	opacity: .8;
}

/* 右側（画像） */
.plan-right {
	position: static;
	overflow: hidden;
}

.plan-img {
	display: none;
	width: 100%;
	height: auto;
	opacity: 0;
	transition: opacity .48s cubic-bezier(.2, .6, .2, 1);
}

.plan-img.is-active {
	display: block;
	opacity: 1;
}

/* タブ切替時の軽いフェード */
.lux-fade-in {
	animation: luxFadeIn .48s cubic-bezier(.2, .6, .2, 1) both;
}

.lux-fade-in-right {
	animation: luxFadeInRight .48s cubic-bezier(.2, .6, .2, 1) both;
}

@keyframes luxFadeIn {
	from {
		opacity: 0;
		transform: translateY(8px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes luxFadeInRight {
	from {
		opacity: 0;
		transform: translateX(12px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* 省エネモーション */
@media (prefers-reduced-motion:reduce) {
	* {
		animation: none !important;
		transition: none !important;
	}
}

/* SP/タブレット */
@media (max-width:1180px) {

	.plan-carousel {
		position: relative;
		padding: 20px 0;
	}

	.plansubtitle {
		font-size: 16px;
		text-align: left;
	}

	.tabname {
		font-size: 22px;
	}

	.slide {
		grid-template-columns: 1fr;
		row-gap: 10px;
		grid-template-areas: "ttl" "ttlja" "img" "lead" "tabs" "back";
	}

	.plan-left {
		display: contents;
	}

	.plan-head {
		display: contents;
	}

	.plan-ttl.en {
		grid-area: ttl;
		font-size: 32px;
		line-height: 1.1;
		text-align: center;
	}

	.plan-ttl-ja {
		grid-area: ttlja;
		display: block;
		margin-top: 0;
		text-align: center;
	}

	.plan-right {
		grid-area: img;
	}

	.plan-lead {
		grid-area: lead;
		margin: 10px 0 0;
	}

	.plan-tabs {
		grid-area: tabs;
		grid-template-columns: 1fr 1fr;
		gap: 10px;
	}

	.plan-back {
		grid-area: back;
		justify-self: center;
		margin-top: 8px;
		font-size: 14px;
	}

	.plantitle {
		font-size: 36px;
		padding-bottom: 14px;
	}

	.tab {
		padding: 12px 10px;
		font-size: 16px;
	}

	.plan-switch {
		margin: auto;
	}

	.switch {
		font-size: 12px;
	}
}

/* flowとQAはreform.css */

/* footer */

.site-footer {
	background: #2f2f2f;
	color: #ddd;
	padding: 48px 0 24px;
	font-size: 14px;
	line-height: 1.9;
}

.site-footer a {
	color: #ddd;
	text-decoration: none;
}

.site-footer a:hover {
	color: #fff;
}

/* container */
.footer-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}

/* ===== PC: 左広め + 右2列（計3カラム） ===== */
.footer-grid {
	display: grid;
	grid-template-columns: minmax(440px, 2.8fr) 1fr 1fr;
	/* 左をぐっと広く */
	gap: 32px 48px;
	align-items: start;
}

/* brand / 会社情報 */
.footer-logo img {
	width: 160px;
	height: auto;
	display: block;
	margin-bottom: 20px;
}

.footer-company__name {
	font-weight: 600;
	margin: 0 0 8px;
	font-size: 16px;
	color: #eee;
}

.footer-company__addr {
	margin: 0 0 14px;
}

.footer-company__area .label {
	color: #bfbfbf;
	font-weight: 600;
}

/* nav columns */
.footer-nav__title {
	font-size: 12px;
	letter-spacing: .2em;
	color: #a3a3a3;
	margin: 6px 0 14px;
	font-weight: 600;
}

.footer-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-nav__list li {
	margin: 6px 0;
	position: relative;
	padding-left: 1.2em;
}

.footer-nav__list li::before {
	content: "—";
	position: absolute;
	left: 0;
	top: 0;
	color: #a3a3a3;
}

/* bottom */
.footer-bottom {
	margin-top: 28px;
}

.footer-bottom .copyright {
	text-align: right;
	color: #bdbdbd;
	font-size: 12px;
	margin: 0;
}

/* ===== 1024px以下：上段=ブランド全幅、下段=ナビ2カラム ===== */
@media (max-width:1024px) {
	.footer-grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		/* 左右同幅で固定 */
		grid-template-areas:
			"brand brand"
			"nav1  nav2";
		gap: 24px 20px;
	}

	.footer-grid>* {
		min-width: 0;
	}

	/* はみ出し防止 */
	.footer-brand {
		grid-area: brand;
	}

	.footer-grid>.footer-nav:nth-of-type(1) {
		grid-area: nav1;
	}

	/* SERVICES */
	.footer-grid>.footer-nav:nth-of-type(2) {
		grid-area: nav2;
	}

	/* INFORMATION */

	.footer-logo img {
		width: 200px;
	}

	/* SPでロゴ大きめ */
	.footer-company__addr,
	.footer-company__area {
		font-size: 13px;
		line-height: 1.9;
	}

	.footer-nav__title {
		font-size: 11px;
		letter-spacing: .2em;
		margin-bottom: 10px;
	}

	.footer-nav__list a {
		overflow-wrap: anywhere;
		word-break: break-word;
	}

	.footer-bottom .copyright {
		text-align: center;
		margin-top: 16px;
	}
}

/* ===== 767px以下：見た目微調整のみ（レイアウトは上と同じ2カラム） ===== */
@media (max-width:767px) {
	.site-footer {
		padding: 36px 0 20px;
	}

	.footer-grid {
		gap: 20px 16px;
	}
}

/* animation */

/* ベース：最後ゆっくり着地 */
.slide-up-fade-in {
	opacity: 0;
	transform: translateY(var(--y, 60px));
	/* 200px→24〜40pxくらいが自然 */
	transition:
		opacity var(--dur, .9s) cubic-bezier(0, 0, 0.2, 1),
		transform var(--dur, .9s) cubic-bezier(0, 0, 0.2, 1);
	will-change: opacity, transform;
}

.slide-up-fade-in.active {
	opacity: 1;
	transform: translateY(0);
}

/* お好みのバリエーション */
.slide-up-fade-in.slow {
	--dur: 1.5s;
}

/* ゆっくり */
.slide-up-fade-in.fast {
	--dur: .5s;
}

/* 速め */

/* さらに柔らかい“とろっと着地” */
.slide-up-fade-in.soft {
	--dur: 1.1s;
	/* 少し強めの減速（お好みで） */
	transition-timing-function: cubic-bezier(.2, .8, .2, 1);
}

.is-anime.mask {
	-webkit-clip-path: inset(0 100% 0 0);
	clip-path: inset(0 100% 0 0);
	-webkit-transition: 1s ease-in-out;
	transition: 1s ease-in-out;
}

.is-anime.mask.active {
	-webkit-clip-path: inset(0 0 0 0);
	clip-path: inset(0 0 0 0);
}

.is-anime.mask.slow {
	-webkit-transition: 1.5s ease-in-out;
	transition: 1.5s ease-in-out;
}

.is-anime.fade {
	-webkit-filter: blur(20px);
	filter: blur(20px);
	opacity: 0;
	-webkit-transition: 0.5s ease-in-out;
	transition: 0.5s ease-in-out;
}

.is-anime.fade.active {
	opacity: 1;
	-webkit-filter: blur(0);
	filter: blur(0);
}

/* 調整ノブ */
:root {
	--reveal-duration: 2.8s;
	--reveal-ease: cubic-bezier(.2, .8, .2, 1);
}

/* 初期状態：少し下＆小さく＆薄く＆うっすらブラー */
.textanimation-reveal {
	--delay: 0ms;
	/* 個別遅延 */
	--y: 0px;
	/* 縦移動距離 */
	--scale: .98;
	/* ふわっと感 */
	--blur: 5px;
	/* ほんのりブラー */

	opacity: 0;
	transform: translateY(var(--y)) scale(var(--scale));
	filter: blur(var(--blur));
	transition:
		opacity var(--reveal-duration) var(--reveal-ease) var(--delay),
		transform var(--reveal-duration) var(--reveal-ease) var(--delay),
		filter var(--reveal-duration) var(--reveal-ease) var(--delay);
	will-change: opacity, transform, filter;
}

/* 表示状態 */
.textanimation-reveal.is-inview {
	opacity: 1;
	transform: translateY(0) scale(1);
	filter: blur(0);
}

/* features */

.featureIndex {
	font-size: 60px;
}

/* セクション全体：3画面ぶんの高さ（スクロール用） */
.feature-scroll {
	position: relative;
	height: 300vh;
	/* 3スクロール分 */
	background-color: #f5f5f5;
	/* お好みで */
}

/* 中身：常に1画面に貼り付き */
.feature-scroll-inner {
	position: sticky;
	top: 0;
	height: 100vh;
	display: flex;
	padding-top: 60px;
	flex-direction: column;
	justify-content: center;
}

/* 上段：Features + サブタイトル + 01/03 */
.feature-top {
	display: flex;
	justify-content: space-between;
	align-items: end;
	margin-bottom: 32px;
}

.feature-top-left {
	max-width: 60%;
}

.featurestitile {
	font-size: 52px;
	color: #CBA96E;
	margin-bottom: 8px;
	font-family: "garamond-premier-pro-display", serif;
}

.featuressubtitle {
	font-size: 26px;
	line-height: 1.6;
}

/* 01 / 03 */
.feature-number {
	font-size: 40px;
	letter-spacing: 0.2em;
	display: flex;
	align-items: baseline;
	gap: 8px;
}

/* 下段：左テキスト／右画像 */
.feature-main {
	display: flex;
	align-items: center;
	gap: 40px;
	box-sizing: border-box;
}

.feature-content {
	flex: 1;
}

.feature-title {
	font-size: 22px;
	margin-bottom: 20px;
	color: #CBA96E;
	display: inline-block;
	/* ← これが超重要 */
	padding-bottom: 14px;
	/* 線との距離 */
	border-bottom: 2px solid transparent;
	border-image: var(--gold-grad) 1;
	/* グラデーション下線 */
}

.feature-text {
	font-size: 16px;
	line-height: 2;
}

.feature-image {
	flex: 1.4;
}

.feature-image img {
	width: 100%;
	height: auto;
	display: block;
}

/* 1025px 以上 1281px 以下 */
@media (min-width: 1025px) and (max-width: 1280px) {

	.feature-title {
		font-size: 23px;
		margin-bottom: 20px;
	}

	.featuressubtitle {
		font-size: 31px;
		line-height: 1.6;
	}

	.feature-text {
		font-size: 19px;
		line-height: 2;
	}

	/* 01 / 03 */
	.feature-number {
		font-size: 52px;
		letter-spacing: 0.2em;
		display: flex;
		align-items: baseline;
		gap: 8px;
	}
}

/* 1282px 以上 */
@media (min-width: 1281px) {

	.feature-title {
		font-size: 29px;
		margin-bottom: 20px;
	}

	.featuressubtitle {
		font-size: 38px;
		line-height: 1.6;
	}

	.feature-text {
		font-size: 23px;
		line-height: 2;
	}

	/* 01 / 03 */
	.feature-number {
		font-size: 68px;
		letter-spacing: 0.2em;
		display: flex;
		align-items: baseline;
		gap: 8px;
	}
}

@media (max-width: 767px) {
	.featuretitle {
		font-size: 36px;
		text-align: center;
		font-family: "garamond-premier-pro-display", serif;
		padding: 40px 0px 20px;
		color: #CBA96E;
	}

	.featuressubtitle {
		font-size: 18px;
		text-align: center;
		padding-bottom: 20px;
	}

	.sp-features {
		/* ヘッダー高さ（JSで上書きされる） */
		--app-header-h: 0px;
		/* カードの表示高さ：100vh - ヘッダー高さ */
		--card-h: calc(100svh - var(--app-header-h));

		background: #A46363;
	}

	.sp-features-track {
		/* 3枚ぶんのスクロール距離を確保 */
		height: calc(var(--card-h) * 3);
	}

	.sp-feature-card {
		position: sticky;
		top: var(--app-header-h);
		/* ヘッダーの下から貼り付く */
		height: var(--card-h);
		display: grid;
		grid-template-rows: 1fr auto;
		background: #A46363;
	}

	/* 画像エリア */
	.sp-feature-img {
		overflow: hidden;
	}

	.sp-feature-img img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}

	/* 下のテキスト帯 */
	.sp-feature-body {
		padding: 22px 18px 26px;
		color: #fff;
	}

	/* 01/03 */
	.sp-feature-num {
		display: flex;
		align-items: baseline;
		gap: 8px;
		margin-bottom: 14px;
		letter-spacing: .12em;
	}

	.sp-feature-num-main {
		font-size: 44px;
		line-height: 1;
		font-family: "garamond-premier-pro-display", serif;
	}

	.sp-feature-num-slash {
		opacity: .85;
	}

	.sp-feature-num-sub {
		font-size: 20px;
		opacity: .85;
	}

	/* タイトルと本文 */
	.sp-feature-title {
		font-size: 16px;
		line-height: 1.6;
		margin: 0 0 14px;
		font-weight: bold;
	}

	.sp-feature-text {
		font-family: "yu-gothic";
		font-size: 14px;
		line-height: 2;
		margin: 0;
		opacity: .95;
	}

	/* 前後切替感（任意：軽くフェード） */
	.sp-feature-card {
		transition: opacity .25s ease;
	}

	.sp-feature-card.is-dim {
		opacity: .35;
	}
}

/* styles */

.stylebg {
	background-color: #EFE8E8;
	color: #523C3C;
}

.textstyle {
	text-align: center;
	font-size: 20px;
	padding-bottom: 40px;
}

.styleflex {
	display: flex;
	gap: 40px;
	align-items: flex-start;
	padding-bottom: 40px;
}

.stylefleximage {
	flex: 2;
	overflow: hidden;
}

.stylefleximage-main {
	width: 100%;
	height: auto;
	display: block;
}

.styleflextext {
	flex: 1.2;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

/* テキスト部分 */
.styletag {
	width: 158px;
	padding-bottom: 20px;
}

.stylename {
	font-size: 24px;
	margin-bottom: 30px;
}

.styledesc {
	font-size: 16px;
	line-height: 1.8;
}

/* サムネ */
.stylethumbs {
	display: flex;
	gap: 10px;
	margin-top: 30px;
	flex-wrap: wrap;
}

.stylethumb {
	border: none;
	padding: 0;
	cursor: pointer;
	background: none;
	display: block;
	width: 90px;
	overflow: hidden;
}

.stylethumb img {
	width: 100%;
	height: auto;
	display: block;
	opacity: 0.7;
	transition: transform 0.3s ease, opacity 0.3s ease;
}

.stylethumb:hover img {
	transform: scale(1.03);
	opacity: 0.9;
}

.stylethumb.is-active img {
	opacity: 1;
	outline: 2px solid #000;
}

/* VIEW MORE ボタン（aタグ版にも適用） */
.stylecta {
	margin-top: 24px;
}

.stylebtn {
	display: inline-block;
	padding: 10px 32px;
	border: 1px solid #333;
	text-decoration: none;
	font-size: 13px;
	letter-spacing: 0.1em;
}

.viewmore3 {
	--grad: linear-gradient(90deg, #9A7A47 0%, #523C3C 48%, #523C3C 100%);
	--grad-hover: linear-gradient(90deg,
			#E7B0B0 0%,
			#DD9B9B 22%,
			#CD8282 45%,
			#B66363 70%,
			#7A3030 100%);

	position: relative;
	display: inline-block;
	width: 200px;
	padding: 12px 0px;
	line-height: 1;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: .18em;
	text-align: center;
	cursor: pointer;
	overflow: hidden;
	isolation: isolate;

	background-image: var(--grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;

	border: 2px solid transparent;
	border-image: var(--grad) 1;
	border-radius: 2px;

	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04);
	transition: color .25s ease, border-color .25s ease, box-shadow .25s ease;
	margin-top: 20px;
}

.viewmore3::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--grad-hover);
	background-size: 200% 100%;
	background-position: 0% 50%;
	clip-path: inset(0 100% 0 0);
	transition:
		clip-path .75s cubic-bezier(.2, .7, 0, .99),
		background-position 1.5s ease;
}

.viewmore3>span {
	background-image: var(--grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

.viewmore3:hover {
	background-image: none;
	-webkit-background-clip: initial;
	background-clip: initial;
	color: white;
	border-color: transparent;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}

.viewmore3:hover::before {
	clip-path: inset(0 0 0 0);
	background-position: 100% 50%;
}

.viewmore3:hover>span {
	background-image: none;
	-webkit-background-clip: initial;
	background-clip: initial;
	-webkit-text-fill-color: white;
	color: white;
}

.viewmore3:focus-visible {
	outline: 2px solid #9A7A47;
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.viewmore3::before {
		transition: none;
	}

	.viewmore3 {
		transition: none;
	}
}

/* ===============================
	   SP レイアウト（順番入れ替え）
	   =============================== */
@media (max-width: 767px) {

	.styletitle {
		font-size: 36px;
		color: #CBA96E;
	}

	/* 縦積みレイアウトに */
	.styleflex,
	.styleflex.reverse {
		flex-direction: column;
	}

	/* 中のラッパーを“素通し”にして、子要素を同じ階層として並べ替え */
	.styleflextext,
	.stylelogo {
		display: contents;
	}

	/* 並び順：
		   1 styletag
		   2 stylename
		   3 stylefleximage（メイン画像）
		   4 stylethumbs
		   5 styledesc
		   6 viewmore3
		*/
	.styletag {
		order: 1;
	}

	.stylename {
		order: 2;
	}

	.stylefleximage {
		order: 3;
	}

	.stylethumbs {
		order: 4;
	}

	.styledesc {
		order: 5;
	}

	.viewmore3 {
		order: 6;
	}

	.styleflex {
		display: flex;
		align-items: flex-start;
		padding-bottom: 20px;
		gap: 10px;
	}

	.stylename {
		font-size: 20px;
	}

	.stylename img {
		width: 118px;
		display: block;
		/* 画像下の隙間防止（任意） */
	}

	.viewmore3 {
		--grad: linear-gradient(90deg, #9A7A47 0%, #523C3C 48%, #523C3C 100%);
		--grad-hover: linear-gradient(90deg,
				#E7B0B0 0%,
				#DD9B9B 22%,
				#CD8282 45%,
				#B66363 70%,
				#7A3030 100%);
		position: relative;
		display: inline-block;
		width: 200px;
		padding: 12px 0px;
		line-height: 1;
		font-size: 16px;
		font-weight: 500;
		letter-spacing: .18em;
		text-align: center;
		cursor: pointer;
		overflow: hidden;
		isolation: isolate;
		margin: auto;
		background-image: var(--grad);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
		border: 2px solid transparent;
		border-image: var(--grad) 1;
		border-radius: 2px;
		box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04);
		transition: color .25s ease, border-color .25s ease, box-shadow .25s ease;
	}

	.textstyle {
		text-align: left;
		font-size: 16px;
	}

	.styleflex {
		display: flex;
		align-items: flex-start;
		padding-bottom: 40px;
	}

	.stylefleximage-main {
		width: 100%;
		height: auto;
		display: block;
	}

	/* テキスト部分 */
	.styletag {
		width: 158px;
		padding-bottom: 0px;
	}

	.stylename {
		font-size: 18px;
		margin-bottom: 0px;
		font-weight: bold;
	}

	.styledesc {
		font-size: 14px;
		line-height: 1.8;
	}

	/* サムネ */
	.stylethumbs {
		display: flex;
		gap: 10px;
		margin-top: 0px;
		flex-wrap: wrap;
	}

	.stylethumb {
		border: none;
		padding: 0;
		cursor: pointer;
		background: none;
		display: block;
		width: 90px;
		overflow: hidden;
	}

	.stylethumb img {
		width: 100%;
		height: auto;
		display: block;
		opacity: 0.7;
		transition: transform 0.3s ease, opacity 0.3s ease;
	}

	.stylethumb:hover img {
		transform: scale(1.03);
		opacity: 0.9;
	}

	.stylethumb.is-active img {
		opacity: 1;
		outline: 2px solid #000;
	}

	/* VIEW MORE ボタン（aタグ版にも適用） */
	.stylecta {
		margin-top: 24px;
	}

	.stylebtn {
		display: inline-block;
		padding: 10px 32px;
		border: 1px solid #333;
		text-decoration: none;
		font-size: 13px;
		letter-spacing: 0.1em;
	}
}

/* ========================================
   Plan section: 文字可視性修正
   ======================================== */

/* plan-left に白背景を敷いてテキストを常に読みやすく */
.plan-left {
  background: rgba(250, 250, 248, 0.96);
  padding: 40px 36px;
  border-radius: 8px;
}

/* plan-ttl・説明文・小見出しは常にチャコール */
.plan-ttl.en,
.plan-ttl-ja,
.plan-lead,
.plan-head,
.extratext {
  color: #1A1A1A !important;
}

/* 設備タブボタン */
.tab {
  color: #1A1A1A !important;
  background: #ffffff;
}
.tab.is-active {
  color: #B8965A !important;
  border-color: #B8965A;
}

/* 上部プラン切替ボタン：テキストは常にチャコール */
.switch {
  color: #1A1A1A !important;
}
.switch.is-active {
  border-color: #B8965A;
  box-shadow: 0 0 0 2px rgba(184,150,90,.3) inset;
}

/* ======================================
   SP: plan-left が display:contents になるため
   子要素に直接背景・文字色を適用
   ====================================== */
@media (max-width: 767px) {
  .slide {
    background-image: none !important;
  }
  .slide::before {
    display: none !important;
  }
  .plan-ttl.en,
  .plan-ttl-ja {
    background: #1A1A1A;
    color: #FAFAF8 !important;
    padding: 12px 20px 4px;
    margin: 0;
  }
  .plan-ttl-ja {
    padding: 0 20px 12px;
  }
  .plan-lead {
    background: #FAFAF8;
    color: #1A1A1A !important;
    padding: 20px 20px 0;
    margin: 0;
    font-size: 13px;
    line-height: 1.8;
  }
  .plan-tabs {
    background: #FAFAF8;
    padding: 16px 20px;
  }
  .extratext {
    background: #FAFAF8;
    color: #6B6B6B !important;
    padding: 0 20px 16px;
    font-size: 11px;
  }
  .tab {
    background: #ffffff !important;
    color: #1A1A1A !important;
    border: 1px solid #E8E4DE;
  }
}
}