*, *::before, *::after {
    box-sizing:border-box;
    margin:0;
    padding:0;
}

:root{
	--nav-bg:linear-gradient(45deg,#f0f0f0,#d4d4d4,#a1a1a1,#d4d4d4,#f0f0f0);;/*var(--nav-bg)*/
	--header:linear-gradient(180deg, var(--black) 0%, #7c5310 50%, var(--black) 100%);
	--a-c:#d1b490;/*var(--a-c)*/
	--m-c:#2196F3;/*var(--m-c)*/
	--m-BG:#f5f5f5;/*var(--m-BG)*/
	--white:#fff;/*var(--white)*/
	--beige:beige;/*var(--beige)*/
	--blue:#1a73e8;/*var(--blue)*/
	--dark:#444;/*var(--dark)*/
	--black:#000;/*var(--black)*/
	--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(--dark),-1px 1px 2px var(--dark),-1px -1px 2px var(--dark),1px -1px 2px var(--dark);
	--box-shadow:0 0 15px rgba(0,0,0,0.2);
	--dl-shadow:-3px 4px 36px -25px var(--dark);
	--button:#8a6d46;
	--header-height:5em;
}


/* GSAPで複雑に動く要素に適用 
.hero-background,.gallery-container,.concept-image img {will-change:transform, opacity;}
*/
/* --------------------------------------
 * 共通レイアウト
 * -------------------------------------- */
body {font-family:'Arial', sans-serif;color:#333;line-height:1.6;background-color:#f8f8f8;/*transform:translate3d(0, 0, 0);-webkit-font-smoothing:antialiased;*/}
h1{text-shadow:var(--text-shadow-w);}
h2{color:#fffaf2;text-shadow:var(--text-shadow-b);margin:1.5em 0;font-family:serif;box-shadow: 9px 10px 18px -6px var(--a-c);padding: .5em 2em;border-radius: 50%;min-width: 12em;}
section {min-height:100vh !important;min-height:100svh !important;padding:115px 5%;max-width:1400px;margin:0 auto;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;position:relative;overflow:hidden; background-color:var(--white);text-align:center;height: 100%;}
p.description{text-align:left;}
section{padding:0 5%;}
img{border-radius:10px;}
footer {position:fixed;bottom:0;background-color:var(--white);text-align:center;width:100%;font-size:12px;box-shadow:inset 0px 6px 18px #e8e4e4;padding:3px 0;}
a{text-decoration:none;}
ul {list-style:none;}
/* --------------------------------------
 * ヘッダー/ナビゲーション (汎用性のある固定ナビ)
 * -------------------------------------- */
#header {
	position:fixed;top:0;left:0;width:100%;z-index:100;background:rgba(255, 255, 255, 0.1);backdrop-filter:blur(10px);
	border-radius:16px;padding:0 2rem;text-align:center;border:1px solid rgba(255, 255, 255, 0.2);/*transition:background-color 0.3s ease;*/
	.header-inner {display:flex;/*background:#d1b49017;*/flex-wrap:wrap;justify-content:space-between;align-items:center;padding:20px 5%;
		h1 a{white-space:nowrap;text-decoration:none;font-weight:700;font-size:2.5rem;color:#2c3e50;}
	}
}
/* --------------------------------------
 * モバイルナビゲーション (SP)
 * -------------------------------------- */

#hamburger {
	display:none;position:relative;z-index:101;width:30px;height:30px;background:none;border:none;cursor:pointer;padding:0;transition:transform 0.3s;
	.bar {display:block;width:100%;height:2px;background-color:#333;position:absolute;left:0;transition:transform 0.3s, opacity 0.3s;}
	.top {top:5px; }
	.middle {top:50%; transform:translateY(-50%); }
	.bottom {bottom:5px; }
}
#hamburger.is-active{
	.top {transform:rotate(45deg);top:50%;}
	.middle {opacity:0;}
	.bottom {transform:rotate(-45deg);top:50%;}
}

#gnav-overlay {
	position:fixed;top:0;left:0;width:100%;height:100vh;background-color:rgba(255, 255, 255, 0.95);z-index:100;opacity:0;visibility:hidden;overflow-y:scroll;
	ul {flex-direction:column;}
	.gnav-inner {height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;}
	.gnav-list {text-align:center;padding:0;}
	.gnav-list li {margin:5px 0;}
	.gnav-list a {opacity:0;transform:translateY(20px);font-size:1.8rem;font-weight:bold;display:block;padding:10px 0;}
}

.header-inner ul {display:flex;}
.header-inner li a {text-decoration:none;color:#333;margin-left:25px;font-weight:bold;transition:color 0.3s;}
.header-inner li a:hover {color:var(--a-c);}


/* --------------------------------------
 * メインビジュアル (Hero Section)
 * -------------------------------------- */
#hero {
	position:relative;justify-content:flex-end;font-size:120%;color:#222;max-height:100svh;
	h1 span {padding:10px;}
	.hero-background {position:absolute;top:63px;left:0;width:100%;height:100%;z-index:1;
		background:url('../images/hero.jpg') center/cover no-repeat;transform:scale(1.12);will-change:transform;}
	.hero-content {z-index:2;position:relative;/*opacity:0;*/transform:translateY(-20px);transition:opacity 1s, transform 1s;}
}

/* --------------------------------------
 * ギャラリーセクション (Gallery Section)
 * -------------------------------------- */
#gallery {
    padding:0; /* 水平スクロール実装時はパディングを調整 */
}
.gallery-item {
    width:90%;
    max-width:400px;
    flex:0 0 auto; 
    margin:20px;
    margin-right:30px;
    overflow:hidden;
    /* スクロールで出現するアニメーションの初期状態 */
    opacity:0;
    filter:blur(20px);
    transition:opacity 0.8s, filter 0.8s;
}
.gallery-section {
    min-height:auto; 
}
.gallery-container {
    display:flex; /* 横並び */
    /* JSで制御するため、CSSのoverflow-x:auto; は不要になる可能性が高い */
    white-space:nowrap;
    padding:50px 0;
    width:100%; /* 初期表示の幅はビューポート幅に合わせておく */
}

.gallery-item img,.concept-image img {
    width:100%;box-shadow:0px 0px 19px 1px #00000070;
    height:100%;
    object-fit:cover;
}


/* --------------------------------------
 * アニメーション用クラス
 * -------------------------------------- */
/* 初期状態 */
.animate-on-scroll, .gallery-item, .hero-content {
    opacity:0;
    transform:translateY(30px);
    /* イージングを統一 */
    transition:opacity 1s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                filter 0.8s; /* gallery-itemのfilterアニメーション用に追加 */
}

/* 終状態 (JSで is-visible が付与されたとき) */
.animate-on-scroll.is-visible, 
.gallery-item.is-visible, 
.hero-content.is-visible {
    opacity:1;
    transform:translateY(0);
    filter:blur(0); /* ギャラリーアイテムのぼかしを解除 */
}

/* --------------------------------------
 * セクション固有スタイル
 * -------------------------------------- */
.concept-body {
    max-width:100%;
}

.concept-image {
    position:relative;
    width:100%;
    height:480px; /* 画像コンテナの縦幅は固定 */
    margin-top:40px;
    overflow:hidden; 
}

/* 画像自体をアニメーションのターゲットから外し、シンプルなスタイルに */
.concept-image img {
    /* GSAPがclip-pathを操作する準備 */
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit:cover;
    will-change:clip-path; /* transformではなくclip-pathをwill-changeに追加 */
}

.concept-section {
    position:relative; /* 必要に応じてz-indexの基準に */
    z-index:10; /* 背景が固定された画像の上に来るように */
}

/* --------------------------------------
 * サービスカードの初期化 (GSAP使用時)
 * -------------------------------------- */
.service-section {z-index:10;}
.service-list {display:grid;grid-template-columns:repeat(auto-fit, minmax(270px, 1fr));gap:2rem;padding:2vw;max-width:100%;margin:0 auto;}
.service-item,.article-card-wrap {background:#fff;padding:2rem;border-radius:8px;box-shadow:0 4px 6px rgba(0, 0, 0, 0.1);}
.price,.article-title {font-size:1.5em;color:var(--a-c);margin:10px 0;font-weight:bold;}

/* GSAPを使う場合は、CSSのトランジションは削除するか、リセットする */
.service-section .service-item,.latest-articles-grid .article-card-wrap { /* opacity:1;transform:none; GSAPが初期のopacityを0にする */
    
}


.large {font-size:1.2em;padding:15px 40px;}
.btn-reserve,.all-news-link {display:inline-block;padding:12px 30px;background-color:var(--a-c);color:white;text-decoration:none;font-weight:bold;border-radius:5px;margin-top:20px;transition:background-color 0.3s;}
.btn-reserve:hover {background-color:#bfa17a;}
#gallery{height:100vh !important;}
.btn-pagetop {background:#000;color:#fff;border-radius:50%;padding:1em;opacity:0.6;position:fixed;bottom:0em;right:0;margin:2em;text-decoration:none;z-index:997;    transition:opacity 0.5s ease;box-shadow:0 4px 12px rgba(0, 0, 0, 0.15);visibility:hidden;}

.article-title{font-size:18px;}
.all-news-link{float: right;a{color:#fff}}
.latest-articles-grid {
	max-width: 100vw;padding: 2em;display: grid;  grid-template-columns:repeat(auto-fit, minmax(270px, 1fr));gap: 2rem;clear: both;
	.article-card-wrap {background: #fff;color: #333;text-align: left;margin-bottom: 2em;display: block;    position: relative;
    overflow: hidden;transition: all 0.6s 
ease;
    height: 100%;}
	.article-card-wrap:hover {box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);transform: scale(1.02);}
	.article-description{padding: 1em;}
	.image-container img{max-width: 80vw;height: auto;margin: 0 auto;display: block;width: 87%;}
}
/******************************************/
@media (min-width:646px) {
    #hamburger, #gnav-overlay {display:none !important;}
    #gnav {display:block !important;}
}
@media (max-width:700px) {
#header .header-inner {padding:20px 0;}
}
@media (max-width:646px) {
	.is-sp {display:block !important;}
	.is-pc {display:none !important;}
	#hero {font-size:100%;
		h1 span {padding:4px;}
	}
	.service-item{padding:1em;
		.description{font-size:12px;text-align:left;}
	}
	.latest-articles-grid {
	padding:1em;
	.article-card-wrap {padding:1em;}
	}
	.gallery-container {
	    -webkit-overflow-scrolling:touch;
		.gallery-item{margin:5px;}
		img{max-width:83%;height:auto;}
	}
	
}