@charset "UTF-8";

/* ============================================================
   神宮茶屋 - スタイルシート
   カラー: 白(#fff) / 黒(#111) / グレー(#f5f5f5, #999)
   フォント: Noto Serif JP
   ============================================================ */

/* --- 表示切替ユーティリティ --- */
.sp-only { display: none !important; }

/* --- リセット・ベース --- */
*, *::before, *::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	font-size: 16px;
	scroll-behavior: smooth;
}

body {
	font-family: "Noto Serif JP", "游明朝", "Yu Mincho", serif;
	color: #111;
	background-color: #fff;
	line-height: 1.8;
	letter-spacing: 0.05em;
	-webkit-font-smoothing: antialiased;
}

a {
	color: #111;
	text-decoration: none;
	transition: opacity 0.3s;
}

a:hover {
	opacity: 0.7;
}

img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}

ul, ol {
	list-style: none;
}

/* --- ヘッダー --- */
.site-header {
	background: #fff;
	padding: 30px 0;
	border-bottom: 1px solid #eee;
}

.header-inner {
	max-width: 1000px;
	margin: 0 auto;
	padding: 0 20px;
	text-align: center;
}

.site-logo {
	line-height: 1;
}

.site-logo a {
	display: inline-block;
	line-height: 1;
}

.logo-placeholder {
	font-size: 28px;
	font-weight: 500;
	letter-spacing: 0.2em;
	color: #111;
}

.logo-img {
	height: 60px;
	width: auto;
}

/* --- セクション共通 --- */
.section {
	padding: 80px 20px;
	max-width: 1000px;
	margin: 0 auto;
}

.section-title {
	text-align: center;
	margin-bottom: 50px;
}

.section-title__ja {
	display: block;
	font-size: 24px;
	font-weight: 400;
	letter-spacing: 0.15em;
	color: #111;
}

.section-title__en {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: 8px;
	font-size: 11px;
	font-weight: 300;
	color: #999;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.section-title__en::before,
.section-title__en::after {
	content: '';
	display: block;
	width: 60px;
	height: 1px;
	background-color: #ccc;
}

/* --- メインビジュアル（ヒーローセクション） --- */
.hero-section {
	width: 100%;
	overflow: hidden;
}

.hero-slider {
	width: 100%;
}

.hero-slide {
	width: 100%;
	aspect-ratio: 16 / 7;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	color: #999;
	letter-spacing: 0.1em;
}

.hero-slide:nth-child(1) { background-color: #e8e8e8; }
.hero-slide:nth-child(2) { background-color: #ddd; }
.hero-slide:nth-child(3) { background-color: #d2d2d2; }
.hero-slide:nth-child(4) { background-color: #c8c8c8; }

.hero-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero-slider .swiper-pagination-bullet {
	background: #111;
	opacity: 0.3;
}

.hero-slider .swiper-pagination-bullet-active {
	opacity: 1;
}

/* --- 紹介テキスト --- */
.intro-section {
	padding: 80px 20px;
	text-align: center;
	max-width: 700px;
	margin: 0 auto;
}

.intro-text {
	font-size: 15px;
	line-height: 2.2;
	color: #333;
}

/* --- ニュースセクション --- */
.news-section {
	background-color: #f5f5f5;
}

.news-section .section {
	padding: 80px 20px;
}

.news-list {
	max-width: 700px;
	margin: 0 auto;
}

.news-item {
	padding: 24px 0;
	border-bottom: 1px solid #ddd;
}

.news-item:first-child {
	border-top: 1px solid #ddd;
}

.news-date {
	font-size: 12px;
	color: #999;
	letter-spacing: 0.1em;
	margin-bottom: 6px;
}

.news-title {
	font-size: 15px;
	font-weight: 500;
	margin-bottom: 8px;
	color: #111;
}

.news-body {
	font-size: 13px;
	line-height: 1.8;
	color: #666;
}

/* ニュース: 5件以降を非表示（アコーディオン） */
.news-item--hidden {
	display: none;
}

.news-item--hidden.show {
	display: block;
}

.news-item--hidden.show.news-item--has-image {
	display: flex;
}

.news-more {
	text-align: center;
	margin-top: 30px;
}

.news-more-btn {
	background: none;
	border: 1px solid #999;
	color: #111;
	font-family: "Noto Serif JP", serif;
	font-size: 13px;
	letter-spacing: 0.1em;
	padding: 10px 32px;
	cursor: pointer;
	transition: background 0.3s, color 0.3s;
}

.news-more-btn:hover {
	background: #111;
	color: #fff;
}

/* PC: 画像左 + 日付・タイトル・概要右 */
.news-item--has-image {
	display: flex;
	align-items: flex-start;
	gap: 24px;
}

.news-item--has-image .news-image {
	flex: 0 0 28%;
}

.news-item--has-image .news-content {
	flex: 1;
}

.news-image img {
	width: 100%;
	border-radius: 4px;
}

/* 「詳しく見る」ボタン */
.news-detail-btn {
	display: block;
	width: 60%;
	margin: 12px auto 0;
	text-align: center;
	border: 1px solid #999;
	color: #111;
	font-family: "Noto Serif JP", serif;
	font-size: 13px;
	letter-spacing: 0.1em;
	padding: 10px 0;
	text-decoration: none;
	transition: background 0.3s, color 0.3s;
}

.news-detail-btn:hover {
	background: #111;
	color: #fff;
}

/* --- お知らせ詳細ページ --- */
.news-detail-page {
	background-color: transparent;
}

.news-detail-page .section {
	padding: 80px 20px;
}

.news-detail-content {
	max-width: 700px;
	margin: 0 auto;
}

.news-detail-content .news-date {
	font-size: 12px;
	color: #999;
	letter-spacing: 0.1em;
	margin-bottom: 6px;
}

.news-detail-title {
	font-size: 18px;
	font-weight: 500;
	color: #111;
	margin-bottom: 24px;
	line-height: 1.6;
}

.news-detail-image {
	width: 60%;
	margin: 24px auto;
}

.news-detail-image img {
	width: 100%;
	border-radius: 4px;
}

.news-detail-body {
	font-size: 14px;
	line-height: 2;
	color: #333;
}

.news-detail-back {
	text-align: center;
	margin-top: 40px;
}

.news-detail-back-btn {
	display: inline-block;
	border: 1px solid #999;
	color: #111;
	font-family: "Noto Serif JP", serif;
	font-size: 13px;
	letter-spacing: 0.1em;
	padding: 10px 32px;
	text-decoration: none;
	transition: background 0.3s, color 0.3s;
}

.news-detail-back-btn:hover {
	background: #111;
	color: #fff;
}

/* --- ライトボックス --- */
.lightbox {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.85);
	z-index: 9999;
	justify-content: center;
	align-items: center;
}

.lightbox.active {
	display: flex;
}

.lightbox-img {
	max-width: 90%;
	max-height: 90vh;
	object-fit: contain;
	border-radius: 4px;
}

.lightbox-close {
	position: absolute;
	top: 20px;
	right: 30px;
	font-size: 36px;
	color: #fff;
	cursor: pointer;
}

/* --- 商品紹介セクション --- */
.products-section {
	padding: 80px 0;
}

.products-section .section-title {
	padding: 0 20px;
}

.product-slider {
	max-width: 1000px;
	margin: 0 auto;
	padding-bottom: 50px;
}

.product-slide {
	position: relative;
	border-radius: 4px;
	overflow: hidden;
}

.product-image {
	width: 100%;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	color: #999;
}

.product-image:nth-child(1) { background-color: #e0e0e0; }

.product-slide:nth-child(1) .product-image { background-color: #e8e8e8; }
.product-slide:nth-child(2) .product-image { background-color: #ddd; }
.product-slide:nth-child(3) .product-image { background-color: #d2d2d2; }

.product-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.product-overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 24px 20px;
	background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
	color: #fff;
}

.product-name {
	font-size: 16px;
	font-weight: 500;
	margin-bottom: 6px;
	letter-spacing: 0.1em;
}

.product-desc {
	font-size: 12px;
	line-height: 1.7;
	opacity: 0.9;
}

.product-slider .swiper-pagination-bullet {
	background: #111;
	opacity: 0.3;
}

.product-slider .swiper-pagination-bullet-active {
	opacity: 1;
}

.product-slider .swiper-button-next,
.product-slider .swiper-button-prev {
	color: #fff;
}

.product-slider .swiper-button-next::after,
.product-slider .swiper-button-prev::after {
	font-size: 32px;
}

/* --- SNSセクション --- */
.sns-section {
	text-align: center;
	padding: 60px 20px;
}

.sns-link {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 15px;
	color: #111;
	letter-spacing: 0.05em;
	transition: opacity 0.3s;
}

.sns-link:hover {
	opacity: 0.6;
}

.sns-icon {
	width: 28px;
	height: 28px;
}

/* Instagram SVG アイコン */
.sns-icon svg {
	width: 28px;
	height: 28px;
	fill: #111;
}

/* --- 店舗情報セクション --- */
.access-section {
	text-align: center;
	padding: 60px 20px;
	background-color: #f5f5f5;
}

.access-info {
	max-width: 500px;
	margin: 0 auto;
}

.access-list {
	text-align: left;
}

.access-list dt {
	font-size: 12px;
	color: #999;
	letter-spacing: 0.1em;
	margin-top: 20px;
}

.access-list dt:first-child {
	margin-top: 0;
}

.access-list dd {
	font-size: 15px;
	color: #111;
	margin-top: 4px;
}

/* --- フッター --- */
.site-footer {
	background: #fff;
	border-top: 1px solid #eee;
	padding: 40px 20px;
	text-align: center;
}

.footer-inner {
	max-width: 1000px;
	margin: 0 auto;
}

.footer-logo {
	margin-bottom: 16px;
}

.footer-logo .logo-placeholder {
	font-size: 18px;
}

.copyright {
	font-size: 11px;
	color: #999;
	letter-spacing: 0.1em;
}

/* ============================================================
   レスポンシブ（モバイル）
   ============================================================ */
@media (max-width: 767px) {
	.pc-only { display: none !important; }
	.sp-only { display: block !important; }

	.site-header {
		padding: 20px 0;
	}

	.logo-placeholder {
		font-size: 22px;
	}

	.logo-img {
		height: 40px;
	}

	.section {
		padding: 60px 16px;
	}

	.section-title {
		margin-bottom: 36px;
	}

	.section-title__ja {
		font-size: 20px;
	}

	.section-title__en::before,
	.section-title__en::after {
		width: 40px;
	}

	/* ヒーロー */
	.hero-slide {
		aspect-ratio: 3 / 4;
		font-size: 14px;
	}

	/* イントロ */
	.intro-section {
		padding: 60px 20px;
	}

	.intro-text {
		font-size: 14px;
		line-height: 2;
	}

	/* ニュース */
	.news-section .section {
		padding: 60px 16px;
	}

	.news-item {
		padding: 20px 0;
	}

	.news-title {
		font-size: 14px;
	}

	.news-body {
		font-size: 12px;
	}

	.lightbox-trigger {
		cursor: default !important;
	}

	/* ニュース画像: SP横並び（画像左） */
	.news-item--has-image {
		flex-wrap: wrap;
		gap: 12px;
	}

	.news-item--has-image .news-image {
		flex: 0 0 35%;
	}

	.news-item--has-image .sp-only.news-detail-btn {
		flex-basis: 100%;
	}

	/* お知らせ詳細ページ SP */
	.news-detail-page .section {
		padding: 60px 16px;
	}

	.news-detail-title {
		font-size: 16px;
	}

	.news-detail-body {
		font-size: 13px;
	}

	.news-detail-image {
		width: 80%;
	}

	/* 商品 */
	.products-section {
		padding: 60px 0;
	}

	/* [変更] スマホ: テキストを画像の下に配置・黒文字
	   元に戻す場合: 以下4ブロックを削除する */
	.product-slide {
		display: flex;
		flex-direction: column;
		/* 元: position: relative; border-radius: 4px; overflow: hidden; のみ */
	}

	.product-overlay {
		position: static;   /* 元: absolute */
		background: none;   /* 元: linear-gradient(transparent, rgba(0,0,0,0.7)) */
		padding: 12px 8px;  /* 元: 20px 16px */
		color: #111;        /* 元: #fff（.product-overlay自体に色指定なし、白は継承） */
	}

	.product-name {
		font-size: 14px;
		color: #111; /* 元: 色指定なし（白を継承） */
	}

	.product-desc {
		font-size: 11px;
		color: #444;  /* 元: 色指定なし（白を継承） */
		opacity: 1;   /* 元: 0.9 */
	}

	.product-slider .swiper-button-next,
	.product-slider .swiper-button-prev {
		display: none;
	}

	/* SNS */
	.sns-section {
		padding: 40px 20px;
	}

	/* フッター */
	.site-footer {
		padding: 30px 20px;
	}

	.footer-logo .logo-placeholder {
		font-size: 16px;
	}

	.copyright {
		font-size: 10px;
	}
}