/* --- 変数定義 (5色カラーパレット) --- */
:root {
    /* 1. Default:元のデザイン (アクティブ・情熱) */
    --c-bg:#f5f5f5;
    --c-text:#333;
    --c-accent:#f24e35; /* 赤 */
    --c-accent-text:#fff;
    --c-card-bg:#fff;
    --c-border:#00000030;
    --c-sub-text:#757575;
    --font-main:'Helvetica Neue', Arial, sans-serif;
	--h1-fc:#2c3e50;
	--white :#fff;
    --text-shadow-w:1px 1px 2px var(--white), -1px 1px 2px var(--white), -1px -1px 2px var(--white), 1px -1px 2px var(--white);
    --text-shadow-b:1px 1px 2px var(--c-accent), -1px 1px 2px var(--c-accent), -1px -1px 2px var(--c-accent), 1px -1px 2px var(--c-accent);
	--h2:var(--white);
}

/* 2. Chic:ネイビー/グレー (都会的・クール・メンズライク) */
[data-theme="chic"] {
    --c-bg:#0f172a;
    --c-text:#e2e8f0;
    --c-accent:#38bdf8; /* シアンブルー */
    --c-accent-text:#0f172a;
    --c-card-bg:#1e293b;
    --c-border:#94a3b8;
    --c-sub-text:#94a3b8;
	--h2:var(--white);

}

/* 3. Natural:セージグリーン/ベージュ (癒し・オーガニック・自然体) */
[data-theme="natural"] {
    --c-bg:#f2f8f5d1;
    --c-text:#5c665d;
    --c-accent:#58a682; /* くすみグリーン */
    --c-accent-text:#fff;
    --c-card-bg:#fff;
    --c-border:#8da399;
    --c-sub-text:#9aa59d;
	--h2:var(--white);
}

/* 4. Luxury:ダークブラウン/ゴールド (上質・エイジングケア・温かみ) */
[data-theme="luxury"] {
    --c-bg:#ddd0bca8; /* クリーム系 */
    --c-text:#4a3b32; /* こげ茶 */
    --c-accent:#b08d55; /* ゴールド/キャメル */
    --c-accent-text:#fff;
    --c-card-bg:#fff;
    --c-border:#b08d55;
    --c-sub-text:#8c7b70;
	--h2:var(--white);
}

/* 5. Lavender:ラベンダー/グレー (フェミニン・透明感・上品) */
[data-theme="lavender"] {
    --c-bg:#f8f0fc;
    --c-text:#555;
    --c-accent:#b86cdb; /* 藤色 */
    --c-accent-text:#fff;
    --c-card-bg:#fff;
    --c-border:#bfaec7;
    --c-sub-text:#999;
	--h2:var(--white);
}

/* --- Base Styles --- */
body {
    margin:0;
    padding:0;
    font-size:16px;
    background-color:var(--c-bg);
    color:var(--c-text);
    font-family:var(--font-main);
    transition:background-color 0.6s ease, color 0.6s ease; /* 切り替えをゆっくりに */
    overflow-x:hidden;
}

.container {
    margin:0 auto;
    max-width:1200px;
    padding:0 2em 4em;
}

/* --- Typography --- */
h1 {font-size:clamp(2rem, 4vw, 2.5rem);font-weight:bold;line-height:1.4;color:var(--h1-fc);
	text-shadow:var(--text-shadow-w);margin:7px;text-align:left;font-family:"Matura MT Script Capitals";}
h2 {font-size:clamp(1.2rem, 3vw, 2rem);padding:5px 0 5px 20px;margin:60px 0 30px;font-weight:bold;
	border-left:5px solid var(--c-accent);color:var(--c-text);transition:border-color 0.6s ease;}
h3 {font-size:clamp(1rem, 2.5vw, 1.5rem);font-weight:bold;padding-bottom:20px;margin-bottom:20px;
	border-bottom:2px solid var(--c-border);transition:border-color 0.6s ease;color:var(--c-text);}
h4 {font-size:clamp(1rem, 2vw, 1.3rem);font-weight:bold;line-height:1.5;color:var(--c-text);}
a{text-decoration:none;transition:sclae 0.6s ease;}
a:hover{transform:scale(1.02);}
nav {display:flex;font-size:12px;gap:1em;align-items:center;justify-content:flex-end;
	a{display:block;padding:3px 5px;border:1px solid var(--c-border);border-radius:5px;box-shadow:1px 1px 10px -4px ;color:var(--c-text);background-color:var(--c-accent-text);position:sticky;top:0;}
}
p {font-size:clamp(13px, 1.5vw, 15px);line-height:2;color:var(--c-text);}
.header{width:100%;height:100vh;display:grid;align-items:center;position:relative;overflow:hidden;}
.header-bg {
	position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:center;
	background-attachment:fixed;transform-origin:center;}
.logo{
	position:fixed;right:0;top:0;left:0;z-index:100;background:rgba(255, 255, 255, 0.1);backdrop-filter:blur(10px);
	border-radius:16px;text-align:center;border:1px solid rgba(255, 255, 255, 0.2);padding:2px 17px 1em;
	.sub-title{font-size:clamp(12px, 1.5vw, 15px);text-align:right;padding-bottom:.5rem;}
	.title-wrap{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;}
}	
.hero-text {
	font-weight:bold;margin-bottom:10px;color:#fff;letter-spacing:0.05em;padding:2rem;font-size:clamp(1.3rem, 4vw, 2.5rem);position: absolute;
	text-shadow:1px 1px 2px var(--c-accent), -1px 1px 2px var(--c-accent), -1px -1px 2px var(--c-accent), 1px -1px 2px var(--c-accent);;
}
.slider-container {
	color:#fff;position:absolute;width:100vw;height:100vh;display:flex;justify-content:center;align-items:center;
	.slider-wrapper {position:relative;width:100%;height:100%;overflow:hidden;perspective:1000px;transform-style:preserve-3d;}
	.slide {position:absolute;width:100%;height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;/*   opacity:0;初期状態で非表示 transition:opacity 0.5s ease-in-out;backface-visibility:hidden; *//* 裏面の表示を非表示にする */}
	.slide img {position:absolute;width:110%;/*opacity:0;*/height:110%;object-fit:cover;z-index:1;}
	.slide-content {position:relative;z-index:2;text-align:center;}
	.slide-title{font-size:clamp(2rem, 9vw, 4rem);font-weight:700;margin-bottom:1rem;text-shadow:2px 2px 4px var(--c-accent);letter-spacing:2px;border:0;}
	.slide-description{font-size:clamp(1.2rem, 3vw, 2rem);text-shadow:2px 2px 4px var(--c-accent);}
}
.controls {
	position:absolute;width:100%;display:flex !important;z-index:1;justify-content:space-between;
	.control-btn {background-color:rgba(255, 255, 255, 0.4);border:none;padding:15px 20px;font-size:1.2rem;cursor:pointer;transition:background-color 0.3s ease-in-out;color:#000;border-radius:50%;box-shadow:0px 0px 19px -9px #666;margin:2em 1em 0;}
	.control-btn:hover {background-color:rgba(255, 255, 255, 0.75);}
}

/* --- Layout Components --- */
.outer {
    background-color:var(--c-card-bg);
    padding:50px 40px;
    border-radius:20px;
    box-shadow:0 10px 30px rgba(0,0,0,0.05);
    transition:background-color 0.6s ease, box-shadow 0.6s ease;
}

/* --- Swiper (Image List) --- */
.f-carousel-container {
    width:100%;padding:4em 0;
	.f-carousel {
	--f-carousel-slide-padding:15px;
	.f-carousel__slide {width:300px;height:auto;}
	.f-carousel__slide img {width:100%;height:200px;object-fit:cover;display:block;border-radius:12px;border-radius:12px;
		overflow:hidden;cursor:pointer;transition:transform 0.3s ease;box-shadow:0 4px 15px rgba(0,0,0,0.1);}
	.f-carousel__slide img:hover {transform:scale(1.02);}
	}
}


/* --- Feature Section --- */
.wrap {display:flex;align-items:center;margin-bottom:15px;
	 h4 {padding-left:15px;width:auto;margin:0;}
	strong {width:40px;height:40px;background:var(--c-accent);color:var(--c-accent-text);border-radius:50%;
			display:flex;justify-content:center;align-items:center;font-size:16px;font-weight:bold;flex-shrink:0;transition:background-color 0.6s ease;}
}
		
.flex {display:flex;justify-content:space-between;align-items:stretch;gap:40px;
	p {flex:1;padding-right:0;margin-top:0;}
	.bg-img {width:300px;height:200px;background-repeat:no-repeat;background-size:cover;
			background-position:center;border-radius:12px;box-shadow:0 4px 15px rgba(0,0,0,0.1);flex-shrink:0;}
}		
		
.feature-item:not(:last-child) {margin-bottom:40px;padding-bottom:40px;border-bottom:1px solid var(--c-border);}

/* --- Address Section --- */
.address-wrap {
	display:flex;gap:30px;align-items:flex-start;
	.address {flex:1;display:grid;grid-template-columns:5em 1fr;gap:10px 15px;
		 > div:nth-child(odd) {font-weight:bold;background-color:var(--c-bg);color:var(--c-text);padding:10px;border-radius:6px;font-size:13px;display:flex;
		justify-content:center;transition:background-color 0.6s ease, color 0.6s ease;}
		 > div:nth-child(even) {padding:10px;line-height:1.6;font-size:14px;}
	 }
}
iframe {border-radius:12px;box-shadow:0 4px 15px rgba(0,0,0,0.1);}

/* --- UI Controls (Theme Switcher 5 Colors) --- */
.switcher {
    position:fixed;
    bottom:25px;
    right:25px;
    z-index:1000;
    display:grid;
    gap:4px;
    justify-items:end;
}

.theme-switcher,.type-switcher,.slide-switcher {
    background:rgba(255, 255, 255, 0.3);
    padding:12px;
    border-radius:50px;
    box-shadow:0 8px 30px rgba(0,0,0,0.15);
    display:flex;
    gap:12px;
    backdrop-filter:blur(8px);
    border:1px solid rgba(255,255,255,0.5);
    transition:all 0.3s ease;
font-size:12px;}
.type-switcher {}
.slide-switcher{display:grid;font-size:12px;
	span{min-width:4.5em;display: inline-block;}
	button{font-size:12px;}
	}
.theme-switcher:hover,.type-switcher:hover  {
    background:rgba(255, 255, 255, 0.95);
    transform:translateY(-2px);
}
.type-switcher {padding:8px 10px;}
.theme-btn {
    width:24px;
    height:24px;
    border-radius:50%;
    border:2px solid transparent;
    cursor:pointer;
    transition:transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position:relative;
}

/* ツールチップ (Hoverで色名表示) */
.theme-btn::after {
    content:attr(title);
    position:absolute;
    bottom:35px;
    left:50%;
    transform:translateX(-50%) translateY(10px);
    background:#333;
    color:#fff;
    padding:4px 8px;
    border-radius:4px;
    font-size:11px;
    white-space:nowrap;
    opacity:0;
    pointer-events:none;
    transition:0.3s;
}
.theme-btn:hover::after {
    opacity:1;
    transform:translateX(-50%) translateY(0);
}
.type-btn {
    transition:0.3s;
    padding:6px 3px;
    border-radius:6px;
}

.theme-btn:hover,.type-btn:hover { transform:scale(1.2); }
.type-btn.active{background:burlywood;}
.theme-btn.active { 
    transform:scale(1.3);
    box-shadow:0 0 0 2px #fff, 0 0 0 4px rgba(0,0,0,0.2); 
}
.icon {
  width:24px;
  height:24px;
  color:#333; /* デフォルトカラー */
  transition:color 0.3s ease;
}
.link-wrap{
	display:inline-flex;
    gap:0 1em;
	padding:11px 0 0;
    flex-wrap:wrap;
	div{display:flex;}
}
.icon-wrap{display:flex;
    gap:1em;
    padding:10px 0;
}
/* ボタンの色設定 */
.theme-btn[data-set="default"] { background:#f24e35; } /* Red */
.theme-btn[data-set="chic"] { background:#0f172a; } /* Navy */
.theme-btn[data-set="natural"] { background:#8da399; } /* Green */
.theme-btn[data-set="luxury"] { background:#b08d55; } /* Gold/Brown */
.theme-btn[data-set="lavender"] { background:#bfaec7; } /* Lavender */

/* --- Responsive --- */
@media (max-width:900px) {
    .address-wrap {
        flex-direction:column;
    }
	.map{width:100%;}
}
@media (max-width:768px) {
    body { margin:0; padding:0; }
    .container { padding:.5em 1.5em 3em; }
    .outer { padding:30px 20px; }
    
    .flex {
        flex-direction:column;
        gap:20px;
    .bg-img {
        width:100%;
        height:200px;
        order:-1;
    }
    }
	.logo{
		.sub-title{width:100%;}
		.title-wrap{}
	}	
    
    .address {
        gap:5px;
    }
	
	.controls {
		.control-btn {width:40px;padding:0;height:40px;margin:4px;}
	}

	.switcher {
    bottom:15px;
    right:15px;
}

    .theme-switcher,type-switcher {
        padding:10px 10px;
        gap:8px;
    }
}

.reveal-text {
    opacity:0;
    transform:translateY(30px);
}
/* スマホ（横向き）のみに適用 */
@media screen and (orientation:landscape) and (max-width:768px) {
.header-bg {
    background-position:top;
}
	.logo{
		.sub-title{width:auto;}
		.title-wrap{}
	}	
.hero-text {
    font-size:clamp(1.3rem, 2vw, 2.5rem);
}
}

/* PCの横長画面に適用 */
@media screen and (orientation:landscape) and (min-width:915px) {
.header-bg {
    background-position:top;
}
}

.slider-container {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    will-change: transform, opacity, filter;
}

/* レイヤー構造の最適化 */
.slide:nth-child(1) {
    z-index: 1;
}

.slide:nth-child(2) {
    z-index: 1;
}

.slide:nth-child(3) {
    z-index: 1;
}

/* アニメーション性能向上 */
.slide img {
    transform: translate3d(0,0,0);
    backface-visibility: hidden;
}