@charset "utf-8";
/* CSS Document */
/* --- フォント定義 --- */
		:root {
			--lp-font-gothic: "Noto Sans JP", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
			--lp-font-serif: "Noto Serif JP", serif;
			--main-font: var(--lp-font-gothic);
			--title-font: var(--lp-font-serif);
			--accent-color: #a89988;
			--bg-gray: #f9f7f5;
			--text-color: #444444;
		}
		html {
			scroll-behavior: smooth;
		}
		
		#lp-wrap, #lp-wrap *, #lp-wrap p, #lp-wrap span, #lp-wrap a, #lp-wrap h2 {
			font-family: var(--main-font) !important;
			-webkit-font-smoothing: antialiased;
			color: var(--text-color) !important;
		}
		
		.main_visual img { width: 100%; max-width: 1200px; height: auto; display: block; margin: 0 auto; }
		#lp-wrap section { padding: 60px 0; }
		#lp-wrap .section-white { background-color: #ffffff !important; }
		#lp-wrap .section-gray { background-color: var(--bg-gray) !important; }
        .inner { max-width: 1000px; margin: 0 auto; padding: 0 20px; }
		.inner img { max-width: 100%; height: auto; display: block; }
		
		/* ---ナビゲーション --- */
		.lp-anchor-nav {
			width: 100%;
			background: #fff;
			border-bottom: 1px solid #eee;
			padding: 20px 0;
			z-index: 1000;
		}
		.lp-anchor-nav ul {
			display: flex;
			justify-content: center;
			gap: 40px;
			list-style: none;
			padding: 0;
			margin: 0;
		}
		.lp-anchor-nav a {
			text-decoration: none;
			font-size: 13px;
			font-weight: bold;
			color: #999 !important;
			letter-spacing: 0.12em;
			transition: 0.3s;
		}
		
		
		/* --- PC用 アンカーナビのデザイン変更 --- */
		@media (min-width: 769px) {
		.lp-anchor-nav {
			background-color: transparent;
			padding: 0;
			margin-bottom: 40px;
			border-bottom: none !important;
			position: static;
			}
		.lp-anchor-nav ul {
			display: flex;
			max-width: 1000px;
			margin: 0 auto;
			border: 1px solid #ddd;
			background-color: #fff;
			list-style: none;
			padding: 0; /* ★追加：ブラウザ標準の余白を消す */
			gap: 0;
			}	
		.lp-anchor-nav ul li {
			flex: 1;
			text-align: center;
			border-right: 1px solid #ddd;
			}
		.lp-anchor-nav ul li:last-child {
			border-right: none;
			}
		.lp-anchor-nav a {
			display: block;
			padding: 20px 0;
			font-size: 14px; 
			color: #666 !important;
			text-decoration: none;
			transition: all 0.4s ease;
			position: relative;
			}
		.lp-anchor-nav a:hover {
			background-color: var(--accent-color);
			color: #fff !important;
			opacity: 1;
			}
		}

/* --- ② PC用 アニメーション --- */
@media (min-width: 769px) {
    /* アニメーション時間を0.8s -> 1.5sに変更して優雅に */
    .fade-in-up, .fade-price { 
        transition: opacity 1.5s ease-out, transform 1.5s ease-out !important; 
    }
}

		/* SPのみ追従させる設定 */
		@media (max-width : 1007px ){
			.lp-anchor-nav {
				position: -webkit-sticky;
				position: sticky;
				top: 0;
				padding: 15px 0;
			}
			.lp-anchor-nav ul { gap: 20px; }
			.lp-anchor-nav a { font-size: 11px; color: var(--accent-color) !important; }
		}

		/* --- デティールブロック --- */
		.detail-wrapper { position: relative; width: 100%; margin: 0 auto; }
		.detail-scroll-container { display: flex; overflow-x: auto; scroll-behavior: smooth; gap: 15px; padding-bottom: 10px; -ms-overflow-style: none; scrollbar-width: none; }
		.detail-scroll-container::-webkit-scrollbar { display: none; }
		.detail-item { flex: 0 0 300px; text-align: left; }
		#lp-wrap .detail-item .detail-ttl { font-weight: bold; font-size: 15px; margin-bottom: 8px; display: block; }
		#lp-wrap .detail-item .detail-txt { font-size: 13px; line-height: 1.6; color: #282828 !important; }
		.scroll-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.8); border: 1px solid #ccc; width: 40px; height: 40px; cursor: pointer; z-index: 10; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
		.btn-prev { left: -20px; } .btn-next { right: -20px; }
		
		/* --- スタイリングブロック --- */
		.styling-flex-wrapper { display: flex; justify-content: space-between; align-items: flex-start; max-width: 900px; margin: 40px auto; }
		.styling-col { width: 48%; display: flex; flex-direction: column; align-items: center; }
		.styling-col img { width: 100%; height: auto; margin: 0 0 25px 0 !important; }
		.style-zoom-img { width: 70% !important; }
		.style-col-right .style-zoom-img { margin-left: 0; margin-right: auto; }
		.style-col-left .style-zoom-img { margin-left: auto; margin-right: 0; }
		.style-item-links { text-align: left; width: 70%; margin: 0 auto 30px; }
		.item-name {
			font-weight: 700 !important;
			letter-spacing: 0.05em;
			font-size: 13px;
}
		.style-item-links ul { list-style: none; padding: 10px 0 0; margin: 0; border-top: 1px solid #333; }
		#lp-wrap .style-item-links li a { display: flex; justify-content: space-between; align-items: center; font-size: 11px; line-height: 2.2; text-decoration: none; padding: 2px 5px; border-bottom: 1px dotted #eee; }
		
		@media (min-width: 769px) { .sp-only { display: none !important; } }
		
		/* --- SP用: スタイリング画像の横スクロール設定 --- */
		@media (max-width: 768px) {
			
		.sp-only { display: flex !important; }
			
		.styling-flex-wrapper {
			display: flex !important;
			overflow-x: auto;
			scroll-snap-type: x mandatory;
			gap: 10px;
			padding: 0 10px;
			-webkit-overflow-scrolling: touch;
			}
		.styling-flex-wrapper::-webkit-scrollbar { display: none; }
			
		.styling-col {
			display: contents;
		}
		.styling-flex-wrapper img {
        flex: 0 0 90vw; /* 画面幅の90%で1枚ずつ見せる */
        width: 90vw !important;
        height: auto;
        scroll-snap-align: center;
        margin: 0 !important;
        object-fit: cover;
    }
			
		/* SPではエフェクトを無効化 */
		.fade-in-up { opacity: 1 !important; transform: none !important; }
		/* --- SP用: 追従ナビのカレント表示 --- */
		.lp-anchor-nav {
			position: sticky;
			top: 0;
			background: #fff;
			z-index: 1000;
			border-bottom: 1px solid #eee;
			}
		.lp-anchor-nav a.is-active {
			color: var(--accent-color) !important;
			border-bottom: 2px solid var(--accent-color);
			padding-bottom: 5px;
			}
		}
        .color-grid{ display: grid; grid-template-columns: repeat(2,1fr); gap: 40px 10px !important; }
		#lp-wrap .color-item { display: flex !important; flex-direction: column !important; align-items: center !important; }
		#lp-wrap .color-item img {width: 80%!important; height: auto; margin: 0 0 10px 0 !important;}
		#lp-wrap .color-info { width: 80%; display: flex; flex-direction: column; align-items: flex-start; }
		#lp-wrap .color-name { font-size: 12px; font-weight: bold; margin: 0 0 10px 2px !important; }
		#lp-wrap .color-price { font-size: 13px; font-weight: bold; margin-bottom: 12px; }
		#lp-wrap .color-btn { display: inline-block !important; padding: 8px 20px !important; background-color: var(--accent-color) !important; color: #fff !important; text-decoration: none; font-size: 12px; border-radius: 2px; font-weight: bold; }
		/* PRICE訴求の復元 */
		.price-narrative { text-align: center; margin: 0 0 50px; }
		.price-label { font-size: 18px; letter-spacing: 0.18em; color: #888; margin-bottom: 12px; }
		.price-amount { font-size: 34px; font-weight: 600; position: relative; display: inline-block; z-index: 1; }
		.price-amount::before { content: ""; position: absolute; left: 0; bottom: 3px; width: 100%; height: 8px; background-color: rgba(168, 153, 136, 0.5); z-index: -1; }
		.price-amount span { font-size: 0.6em; }
		.price-box {
			text-align: right;
			line-height: 1.2;
		}
        .price-box strong {
			font-weight: 700 !important;
			font-size: 13px;
			letter-spacing: 0.02em;
}

		.arrival-note {
			font-size: 10px;
			color: #444;
			display: block;
			margin-bottom: 2px;
			font-weight: normal;
		}

		.fade-in-up, .fade-price { opacity: 0; transform: translateY(30px); transition: 0.8s ease; }
		.is-show { opacity: 1 !important; transform: translateY(0) !important; }

		.concept-logo-area { text-align: center; padding: 20px 20px; }
		.concept-logo { width: 100%; max-width: 600px; height: auto; }
		#lp-wrap .section-title { font-family: var(--title-font) !important; font-size: 28px !important; text-align: center; padding-top: 40px !important; margin-bottom: 30px !important; letter-spacing: 0.15em !important; }
		
		/* --- 表示切り替え用クラスの定義 --- */
		/* PC表示時（769px以上） */
		@media (min-width: 769px) {
		.sp-only { display: none !important; }
		.pc-only { display: block !important; }
		}
		
		/* SP表示時（768px以下） */
		@media (max-width: 768px) {
		.sp-only { display: flex !important; } 
		.pc-only { display: none !important; }
			
		/* SP用リンク集の配置調整 */
        .style-item-links.styling-links-sp {
			display: block !important;
			width: 90% !important;
			margin: 0 auto 40px !important; /* 中央寄せ & 下余白 */
			}
		.color-grid {
			gap: 30px 10px !important; /* 上下30px、左右10px */
			}
		#lp-wrap .color-item img,
		#lp-wrap .color-info {
			width: 100% !important;
		}
		#lp-wrap .color-name {
			margin-left: 0 !important;
			}
		}
		/* --- アンカーナビ：ホバー時の文字色上書き --- */
		@media (min-width: 769px) {
		#lp-wrap .lp-anchor-nav ul li a:hover {
			background-color: var(--accent-color) !important;
			color: #ffffff !important;
			}
		}

 .fade-up-item {
		   opacity: 0;
		   transform: translateY(20px);
		   transition: opacity 0.8s ease, transform 0.8s ease;
}.fade-up-item.is-show {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

#lp-wrap .section-title {
    position: relative;
    display: block;
    width: 100% !important;
	text-align: center;
    padding-bottom: 15px !important;
    margin-bottom: 40px !important;
    border-bottom: none !important; /* 細い線を削除 */
}


#lp-wrap .section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px; /* ラインをやや長く調整 */
    height: 4px;  /* やや太めに */
    background-color: var(--accent-color);
}

/* --- コンセプトエリアの共通設定 --- */
.concept-area {
    text-align: center;
}

.concept-text {
    line-height: 1.9;
    font-weight: 500;
    margin: 0 auto;
}

/* --- PC用の出し分け --- */
@media (min-width: 769px) {
    .concept-text {
        font-size: 20px; /* PCは少し大きめに */
        letter-spacing: 0.05em;
    }
    .concept-logo-area {
        margin-bottom: 40px;
    }
}

/* --- SP用の出し分け --- */
@media (max-width: 768px) {
    .concept-text {
        font-size: 15px; /* SPはスマホで見やすいサイズに */
        line-height: 1.7; /* スマホでは行間を少し詰めると読みやすいです */
    }
    .concept-logo-area {
        margin-bottom: 30px;
    }
}