/* --- 変数定義 (5色カラーパレット) --- */
:root {
    /* 1. Default:元のデザイン (アクティブ・情熱) */
    --c-bg:#f5f5f5;
    --c-text:#333;
    --c-accent:#f24e35; /* 赤 */
    --c-accent-text:#fff1f1;
    --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);
	--point:#3498db;
}

/* 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);
	--point:#d2d2ff;


}

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

}

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

}

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

}
/* 6. Bright:ビビッドイエロー/グレー (元気・ポップ・現代的) */
[data-theme="bright"] {
    --c-bg:#fefce8b0; /* 薄いクリーム */
    --c-text:#333;
    --c-accent:#f4c200; /* ビビッドイエロー */
    --c-accent-text:#fffcf3; 
    --c-card-bg:#fff;
    --c-border:#b2af76;
    --c-sub-text:#6b7280;
	--h2:var(--white);
	--point:#816915;

}
@font-face {
  font-family: 'Matura MT Script Capitals';
  src: url('/sample/font/MaturaMTScriptCapitals.woff2') format('woff2');
  font-display: swap; /* これを入れると読み込み中も代替フォントで表示されます */
}
/* --- Base Styles --- */
body {
	margin:0 auto;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;max-width:1200px;
}
.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);}

#gallery-fexed, #gallery-wrapper-1, #gallery-wrapper-2 {
}
#gallery-wrapper-1,#gallery-wrapper-2{display:none;transition: opacity 0.3s ease;}
#gallery-fexed{
	display:grid;gap:30px;justify-content: center;opacity1;
	grid-template-columns:repeat(auto-fit, minmax(21%, 1fr));
	img {
    width: 100%;
    height: 250px;
    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);
}
}
[data-layout-type="type2"] {
	#gallery-fexed{	grid-template-columns:repeat(auto-fit, minmax(28%, 1fr));}
}
@media (max-width:966px) {
	#gallery-fexed{grid-template-columns:repeat(auto-fit, minmax(45%, 1fr));}
}
@media (max-width:600px) {
	[data-layout-type="type2"] {
		#gallery-fexed{	grid-template-columns:repeat(auto-fit, minmax(45%, 1fr));}
	}
}
.hamburger{display:none;}
.nav-menu {
	display:flex;align-items:center;justify-content:flex-end;opacity:1 !important;visibility:visible !important;
	.nav-links {display:flex;gap:10px;text-align:center;}
	.nav-links a {text-decoration:none;color:var(--c-text);background-color:var(--c-accent-text);border:1px solid var(--c-border);
			padding:3px 5px;opacity:1 !important;border-radius:8px;min-width: 5em;}
}
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;color:var(--h1-fc);}
	.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;}
	.slide img {position:absolute;width:110%;opacity:0/*;z-index:1;*/;height:110%;object-fit:cover;transform:translate3d(0,0,0);filter:brightness(1.1);}
	.slide-content {position:relative;z-index:2;text-align:center;width:90%;}
	.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;
}

/* --- Fancybox --- */
.f-carousel-container {
    width:100%;padding:0 0 1em;
	.f-carousel {
	--f-carousel-slide-padding:15px;
	.f-carousel__slide {width:300px;height:auto;}
	.f-carousel__slide img {width:100%;height:250px;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%;box-shadow:0 10px 30px rgba(0,0,0,0.05);
			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);}

.service-list {display:grid;grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));gap:2rem;padding:1rem;max-width:100%;margin:0 auto;
	.price{font-size:1em;color:var(--point);margin:10px 0;font-weight:bold;float: inline-end;font-size:12px;}
	.service-item{}
}
/* --- 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:16px;}
	 }
}
iframe {border-radius:12px;box-shadow:0 4px 15px rgba(0,0,0,0.1);}

/* --- UI Controls (Theme Switcher 6 Colors) --- */

.switcher {
	position:fixed;width:250px;bottom:1px;right:1px;z-index:1000;display:grid;gap:4px;justify-items:center;background:#00000080;
	border-radius:8px;padding:10px;transition:.4s;transform:translateY(-10px);
	.choicename,.modal-choicename{width:100%;text-align:left;color:#fff;padding-left:5px;}
	.modal-contents{z-index: 1;position: absolute;top: 41px;height: 80%;background: aliceblue;padding: 1em;font-size: 13px;border-radius: 8px;
			/*overflow-x: scroll;*/width: 150%;box-shadow: -2px 0px 12px #666;transition:.4s;transform: translateX(150%);}
	.modal-contents.active {
		transform: translateX(-91px);
		.arrow {width: 14px;height: 14px;border-bottom: 3px solid #60a5fa;border-right: 3px solid #60a5fa;
				transition:.4s;transform: rotate(315deg);display: block;float: inline-end;margin-right: 6px;opacity:0.6;}
		.arrow:hover{opacity: 1;}
		.inner{display: grid;grid-template-columns:35px 1fr 59px;padding: 1em 0;
			div{border-bottom:1px solid #ccc;padding-bottom: 5px;}
				}
	}
	.modal-controls{justify-self:end;display:flex;font-size:12px;align-items:center;width:100%;background:#00000061;border-radius:4px;}
	.modal-control-btn {
		width:30px;height:30px;border:none;background-color:transparent;cursor:pointer;border-radius:4px;
		transition:background-color 0.4s ease;position:relative;margin:0 2px;color:antiquewhite;
	}
	.modal-control-btn:active {background-color:rgba(0, 0, 0, 0.2);}
	.modal-control-btn::before {content:'';position:absolute;width:12px;height:2px;background-color:currentColor;top:50%;left:50%;transform:translate(-50%, -50%);}

	.type-announce{color:#fff;word-break: keep-all;margin-right: 1em;cursor:pointer;transition: 0.4s;padding: 3px;border-radius: 8px;}
	.modal-control-btn:hover,.type-announce:hover{background-color:#000000b8;}
}
.switcher.active {
    transform:translateY(calc(100% - 33px));padding:0 10px;
	.modal-control-btn::before {content:'';position:absolute;width:12px;height:12px;border:2px solid currentColor;top:50%;left:50%;
		transform:translate(-50%, -50%);box-sizing:border-box;}
	.choicename,.theme-switcher,.type-switcher,.slide-switcher{display:none;}
}
.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;
}
.slide-switcher{display:grid;font-size:12px;border-radius:9px;
	span {min-width:4.5em;color:#333;display:inline-block;background:#ffd6d6ad;text-align:center;padding:2px 0;border-radius:6px;}
	button {font-size:12px;border-radius:4px;border:1px solid #8a8a8a;height:1.5em;box-sizing:content-box;}
	button.active{border:3px solid #065cf5bf;}
}
.theme-switcher:hover,.type-switcher:hover,.slide-switcher:hover{
    background:rgba(255, 255, 255, 0.95);
}
.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,.type-layout::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::after {left:-60px;}*/
.btn-right::after {left: -20px;}
.btn-end::after {left: -60px;}


.theme-btn:hover::after,.type-layout:hover:after  {opacity:1;transform:translateX(-50%) translateY(0);}
.type-layout {transition: 0.3s;border-radius: 4px;width: 33px;height: 23px;box-sizing: border-box;padding: 2px;background: #fff;cursor: pointer;
				color: #111;display: flex;justify-content: center;align-items: center;border: 1px solid #666;}
.theme-btn:hover,.type-layout:hover { transform:scale(1.2); }
.type-layout.active{background:burlywood;}
.theme-btn.active {transform:scale(1.3);box-shadow:0 0 0 2px #fff, 0 0 0 4px #065cf5bf;}
.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;}
}
#autoslide-wrapper{position: relative;}
#autoslide-wrapper::after {
    background-color: #c7c6c6c9;
    content: "Type2より設定可能";
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 120%;
    font-weight: 600;
    border-radius: 7px;
}
#autoslide-wrapper.active::after,.switcher.active #autoslide-wrapper{display:none;}

.icon-wrap{display:flex;gap:1em;padding:10px 0;}
footer{text-align: center;padding: 2em 0 0;
	.pagetop {position: fixed;right: 20px;bottom: 40px;width: 40px;height: 40px;background-color: #3333337a;border: none;border-radius: 50%;cursor: pointer;z-index: 100;opacity: 0;visibility: hidden;transform: translateY(20px);display: flex;justify-content: center;align-items: center;transition: 0.3s;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);}
	.pagetop:hover {background-color: #666;}
	.pagetop__arrow {display: block;width: 10px;height: 10px;border-top: 2px solid #fff;border-left: 2px solid #fff;transform: translateY(2px) rotate(45deg);}
}

.staff-subtitle {text-align:center;color:#666;margin-bottom:40px;}
.staff-grid {display:grid;grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));gap:30px;}
.staff-card {color: var(--c-text);border-radius:10px;overflow:hidden;box-shadow:0px 0px 30px rgba(0,0,0,0.1);text-align:left;}
.staff-image img {width:100%;height:100%;object-fit:cover;object-position:center 21%;overflow:hidden;}
.staff-info {padding:20px;}
.staff-name {font-size:1.3em;margin-bottom:5px;}
.staff-position {color:var(--point);font-weight:bold;margin-bottom:15px;float: inline-end;}
.staff-details {padding-top:15px;}
.staff-details p {margin:8px 0;font-size: clamp(12px, 1.2vw, 14px);}
.message {font-style:italic;line-height:1.6;}


/* ボタンの色設定 */
.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 */
.theme-btn[data-set="bright"] { background:#f5eea6; } /* 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:2px;right:2px;
		.modal-contents.active {transform: translateX(-49px);width: 122%;}
		.theme-switcher,type-switcher {padding:10px 10px;gap:8px;}
	}
	.staff-image img {height: 315px;object-position: center 11%;}
 /*   .staff-grid {grid-template-columns:1fr;}*/
    .staff-card {margin-bottom:20px;}
}

.reveal-text {
    opacity:0;
    transform:translateY(30px);
}
@media (max-width:600px) {
	.hamburger {position:fixed;top:15px;right:20px;width:30px;height:25px;z-index:1000;cursor:pointer;display:block;
		span {position:absolute;left:0;width:100%;height:2px;background-color:#333;transition:transform 0.1s;}
		span:nth-child(1) { top:0; }
		span:nth-child(2) { top:11px; }
		span:nth-child(3) { bottom:0; }
	}
	.nav-menu {
		position:fixed;top:0;right:-100%;height:100vh;background:#535151cf;z-index:999;display:flex;align-items:center;padding:0 2em;
		visibility:hidden;
		.nav-links {display:flex;flex-direction:column;gap:1em;text-align:center;}
		.nav-links a {font-size:20px;text-decoration:none;opacity:0;;color:var(--c-text);background-color:var(--c-accent-text);;border:1px solid var(--c-border);}
	}
}
/* スマホ（横向き）のみに適用 */
@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;
}
}