/*
Theme Name: Shima Yado
Theme URI: https://example.com/
Author: Ryosuke
Description: 島の一棟貸し別荘・ゲストハウスのための、木のぬくもりと海の景色を活かした和モダンなワンページテーマ。トップページの文章や連絡先は「外観 > カスタマイズ > 貸別荘の設定」から編集できます。
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: shima-yado
*/

/* ===================================================================
   0. Design tokens
   =================================================================== */
:root {
	--sy-wood:        #c99a63;
	--sy-wood-light:  #e9d3ac;
	--sy-wood-deep:   #8a6a3f;
	--sy-cream:       #faf7f1;
	--sy-cream-deep:  #f2ead9;
	--sy-ink:         #2f2a22;
	--sy-ink-soft:    #5c5546;
	--sy-green:       #8a9a5f;
	--sy-green-deep:  #5f6f3c;
	--sy-sea:         #3f6e82;
	--sy-sea-deep:    #2b4d5c;
	--sy-line:        #ddd0b3;
	--sy-white:       #ffffff;

	--sy-serif: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
	--sy-sans:  "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;

	--sy-radius: 6px;
	--sy-shadow: 0 18px 40px -20px rgba(47, 42, 34, 0.35);
	--sy-container: 1180px;
}

/* ===================================================================
   1. Reset & base
   =================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: var(--sy-sans);
	color: var(--sy-ink);
	background: var(--sy-cream);
	line-height: 1.9;
	font-weight: 300;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { font-family: var(--sy-serif); font-weight: 600; margin: 0; color: var(--sy-ink); }
p { margin: 0 0 1em; }
button { font-family: inherit; cursor: pointer; }

.sy-container {
	max-width: var(--sy-container);
	margin: 0 auto;
	padding: 0 32px;
}

.sy-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--sy-serif);
	font-size: 13px;
	letter-spacing: 0.32em;
	color: var(--sy-wood-deep);
	text-transform: uppercase;
	margin-bottom: 18px;
}
.sy-eyebrow::before {
	content: "";
	width: 28px;
	height: 1px;
	background: var(--sy-wood-deep);
}

.sy-section-title {
	font-size: clamp(26px, 3.4vw, 38px);
	line-height: 1.5;
	margin-bottom: 22px;
	letter-spacing: 0.04em;
}

.sy-section-lead {
	max-width: 640px;
	color: var(--sy-ink-soft);
	font-size: 16px;
	white-space: pre-line;
}

.sy-section {
	padding: 96px 0;
	position: relative;
}
.sy-section--tint { background: var(--sy-cream-deep); }

.sy-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 16px 34px;
	border-radius: 999px;
	font-size: 14px;
	letter-spacing: 0.14em;
	border: 1px solid var(--sy-ink);
	background: transparent;
	color: var(--sy-ink);
	transition: all 0.3s ease;
}
.sy-btn:hover { background: var(--sy-ink); color: var(--sy-white); }
.sy-btn--solid {
	background: var(--sy-sea-deep);
	border-color: var(--sy-sea-deep);
	color: var(--sy-white);
}
.sy-btn--solid:hover { background: var(--sy-sea); border-color: var(--sy-sea); }

/* ===================================================================
   2. Header / nav
   =================================================================== */
.sy-header {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 100;
	padding: 22px 0;
	transition: background 0.35s ease, padding 0.35s ease, box-shadow 0.35s ease;
}
.sy-header .sy-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}
.sy-header.is-scrolled {
	background: rgba(250, 247, 241, 0.94);
	backdrop-filter: blur(6px);
	padding: 14px 0;
	box-shadow: 0 8px 24px -18px rgba(0,0,0,0.4);
}

.sy-brand {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: var(--sy-serif);
	font-size: 20px;
	letter-spacing: 0.1em;
	color: var(--sy-white);
	transition: color 0.35s ease;
}
.sy-header.is-scrolled .sy-brand { color: var(--sy-ink); }
.sy-brand img { height: 40px; width: auto; border-radius: 4px; }
.sy-brand-sub {
	display: block;
	font-family: var(--sy-sans);
	font-size: 10px;
	letter-spacing: 0.2em;
	opacity: 0.75;
	font-weight: 400;
}

.sy-nav-list {
	display: flex;
	gap: 34px;
	font-size: 13.5px;
	letter-spacing: 0.06em;
	color: var(--sy-white);
	transition: color 0.35s ease;
}
.sy-header.is-scrolled .sy-nav-list { color: var(--sy-ink); }
.sy-nav-list a { position: relative; padding-bottom: 4px; }
.sy-nav-list a::after {
	content: "";
	position: absolute;
	left: 0; bottom: 0;
	width: 0; height: 1px;
	background: currentColor;
	transition: width 0.3s ease;
}
.sy-nav-list a:hover::after { width: 100%; }

.sy-nav-toggle {
	display: none;
	background: none;
	border: none;
	width: 30px;
	height: 22px;
	position: relative;
}
.sy-nav-toggle span, .sy-nav-toggle::before, .sy-nav-toggle::after {
	content: "";
	position: absolute;
	left: 0; right: 0;
	height: 1.5px;
	background: var(--sy-white);
	transition: transform 0.3s ease, opacity 0.3s ease, background 0.35s ease;
}
.sy-header.is-scrolled .sy-nav-toggle span,
.sy-header.is-scrolled .sy-nav-toggle::before,
.sy-header.is-scrolled .sy-nav-toggle::after { background: var(--sy-ink); }
.sy-nav-toggle::before { top: 0; }
.sy-nav-toggle span { top: 50%; transform: translateY(-50%); }
.sy-nav-toggle::after { bottom: 0; }
.sy-nav-open .sy-nav-toggle::before { transform: translateY(10px) rotate(45deg); }
.sy-nav-open .sy-nav-toggle::after { transform: translateY(-10px) rotate(-45deg); }
.sy-nav-open .sy-nav-toggle span { opacity: 0; }

/* ===================================================================
   3. Hero
   =================================================================== */
.sy-hero {
	position: relative;
	height: 100vh;
	min-height: 620px;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	color: var(--sy-white);
}
.sy-hero-slides {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.sy-hero-slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0;
	animation: sy-hero-fade 18s infinite;
}
.sy-hero-slide:nth-child(1) { animation-delay: 0s; }
.sy-hero-slide:nth-child(2) { animation-delay: 6s; }
.sy-hero-slide:nth-child(3) { animation-delay: 12s; }
@keyframes sy-hero-fade {
	0%   { opacity: 0; }
	5%   { opacity: 1; }
	33%  { opacity: 1; }
	38%  { opacity: 0; }
	100% { opacity: 0; }
}
.sy-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(30,26,18,0.28) 0%, rgba(30,26,18,0.18) 45%, rgba(24,20,14,0.72) 100%);
	z-index: 1;
}
.sy-hero-content {
	position: relative;
	z-index: 2;
	width: 100%;
	padding: 0 0 110px;
	text-align: center;
}
.sy-hero-eyebrow {
	font-family: var(--sy-serif);
	letter-spacing: 0.5em;
	font-size: 12px;
	opacity: 0.9;
	margin-bottom: 26px;
}
.sy-hero h1 {
	font-size: clamp(34px, 6vw, 64px);
	line-height: 1.55;
	color: var(--sy-white);
	text-shadow: 0 4px 24px rgba(0,0,0,0.25);
}
.sy-hero-sub {
	margin-top: 22px;
	font-size: 16px;
	letter-spacing: 0.06em;
	opacity: 0.92;
}
.sy-hero-scroll {
	position: absolute;
	left: 50%;
	bottom: 36px;
	transform: translateX(-50%);
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	font-size: 10px;
	letter-spacing: 0.3em;
}
.sy-hero-scroll-line {
	width: 1px;
	height: 42px;
	background: rgba(255,255,255,0.6);
	overflow: hidden;
	position: relative;
}
.sy-hero-scroll-line::after {
	content: "";
	position: absolute;
	top: -100%;
	left: 0; right: 0;
	height: 100%;
	background: var(--sy-white);
	animation: sy-scroll-drip 2.2s infinite;
}
@keyframes sy-scroll-drip {
	0% { top: -100%; }
	60% { top: 100%; }
	100% { top: 100%; }
}

/* ===================================================================
   4. About
   =================================================================== */
.sy-about {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
}
.sy-about-media {
	position: relative;
	border-radius: var(--sy-radius);
	overflow: hidden;
	box-shadow: var(--sy-shadow);
}
.sy-about-media img { aspect-ratio: 4/3; object-fit: cover; }
.sy-about-media-tag {
	position: absolute;
	bottom: 20px;
	left: 20px;
	background: rgba(250,247,241,0.92);
	color: var(--sy-ink);
	font-family: var(--sy-serif);
	font-size: 13px;
	letter-spacing: 0.08em;
	padding: 10px 18px;
	border-radius: 999px;
}
.sy-about-text p { color: var(--sy-ink-soft); }

/* ===================================================================
   5. Amenities
   =================================================================== */
.sy-amenities-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
	margin-top: 46px;
}
.sy-amenity {
	background: var(--sy-white);
	border: 1px solid var(--sy-line);
	border-radius: var(--sy-radius);
	padding: 30px 26px;
	display: flex;
	gap: 18px;
	align-items: flex-start;
}
.sy-amenity-icon {
	flex: none;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--sy-cream-deep);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--sy-sea-deep);
}
.sy-amenity-icon svg { width: 22px; height: 22px; }
.sy-amenity h3 { font-size: 16px; margin-bottom: 6px; letter-spacing: 0.04em; }
.sy-amenity p { font-size: 13.5px; color: var(--sy-ink-soft); margin: 0; }

/* ===================================================================
   6. Gallery
   =================================================================== */
.sy-gallery {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 220px;
	gap: 14px;
	margin-top: 46px;
}
.sy-gallery-item {
	position: relative;
	overflow: hidden;
	border-radius: var(--sy-radius);
	cursor: zoom-in;
}
.sy-gallery-item img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}
.sy-gallery-item:hover img { transform: scale(1.07); }
.sy-gallery-item.is-tall { grid-row: span 2; }
.sy-gallery-item.is-wide { grid-column: span 2; }
.sy-gallery-caption {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: 14px 16px 10px;
	font-size: 12px;
	letter-spacing: 0.06em;
	color: var(--sy-white);
	background: linear-gradient(0deg, rgba(20,17,12,0.72), transparent);
	opacity: 0;
	transition: opacity 0.35s ease;
}
.sy-gallery-item:hover .sy-gallery-caption { opacity: 1; }

/* Lightbox */
.sy-lightbox {
	position: fixed;
	inset: 0;
	z-index: 1000;
	background: rgba(20, 17, 12, 0.92);
	display: none;
	align-items: center;
	justify-content: center;
	padding: 40px;
}
.sy-lightbox.is-open { display: flex; }
.sy-lightbox img {
	max-width: 92vw;
	max-height: 82vh;
	border-radius: 4px;
	box-shadow: 0 30px 60px rgba(0,0,0,0.5);
}
.sy-lightbox-caption {
	position: absolute;
	bottom: 36px;
	left: 0; right: 0;
	text-align: center;
	color: var(--sy-white);
	font-family: var(--sy-serif);
	font-size: 14px;
	letter-spacing: 0.1em;
}
.sy-lightbox-close, .sy-lightbox-prev, .sy-lightbox-next {
	position: absolute;
	background: rgba(255,255,255,0.1);
	border: 1px solid rgba(255,255,255,0.4);
	color: var(--sy-white);
	width: 44px; height: 44px;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-size: 18px;
	transition: background 0.25s ease;
}
.sy-lightbox-close:hover, .sy-lightbox-prev:hover, .sy-lightbox-next:hover { background: rgba(255,255,255,0.25); }
.sy-lightbox-close { top: 28px; right: 28px; }
.sy-lightbox-prev { left: 28px; top: 50%; transform: translateY(-50%); }
.sy-lightbox-next { right: 28px; top: 50%; transform: translateY(-50%); }

/* ===================================================================
   7. Surroundings (area)
   =================================================================== */
.sy-area {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 20px;
}
.sy-area-media {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}
.sy-area-media img {
	border-radius: var(--sy-radius);
	object-fit: cover;
	width: 100%;
	height: 100%;
	box-shadow: var(--sy-shadow);
}
.sy-area-media .sy-area-media-main { grid-column: 1 / -1; aspect-ratio: 16/9; }
.sy-area-media .sy-area-media-sub { aspect-ratio: 4/3; }
.sy-area-text { display: flex; flex-direction: column; justify-content: center; }
.sy-area-text p { color: var(--sy-ink-soft); }

/* ===================================================================
   8. Access / info table
   =================================================================== */
.sy-access {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: start;
}
.sy-info-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 8px;
}
.sy-info-table th, .sy-info-table td {
	text-align: left;
	padding: 18px 0;
	border-bottom: 1px solid var(--sy-line);
	font-size: 14.5px;
	vertical-align: top;
}
.sy-info-table th {
	width: 150px;
	font-family: var(--sy-serif);
	font-weight: 600;
	color: var(--sy-wood-deep);
	letter-spacing: 0.06em;
}
.sy-info-table td { color: var(--sy-ink-soft); }
.sy-map {
	border-radius: var(--sy-radius);
	overflow: hidden;
	box-shadow: var(--sy-shadow);
	aspect-ratio: 4/3;
	background: var(--sy-cream-deep);
}
.sy-map iframe { width: 100%; height: 100%; border: 0; }
.sy-map-fallback {
	width: 100%; height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 10px;
	color: var(--sy-ink-soft);
	font-size: 13px;
	text-align: center;
	padding: 24px;
}

/* ===================================================================
   9. Reservation / contact CTA
   =================================================================== */
.sy-contact {
	position: relative;
	border-radius: var(--sy-radius);
	overflow: hidden;
	padding: 90px 40px;
	text-align: center;
	color: var(--sy-white);
	background: linear-gradient(180deg, rgba(24,20,14,0.55), rgba(24,20,14,0.75)), url('assets/img/view-harbor-03.jpg') center/cover;
}
.sy-contact h2 { color: var(--sy-white); }
.sy-contact-lead { max-width: 560px; margin: 18px auto 40px; opacity: 0.92; font-size: 15px; }
.sy-contact-actions {
	display: flex;
	gap: 18px;
	justify-content: center;
	flex-wrap: wrap;
}
.sy-contact-actions .sy-btn { border-color: rgba(255,255,255,0.7); color: var(--sy-white); }
.sy-contact-actions .sy-btn:hover { background: var(--sy-white); color: var(--sy-ink); }
.sy-contact-meta {
	margin-top: 38px;
	display: flex;
	gap: 34px;
	justify-content: center;
	flex-wrap: wrap;
	font-size: 14px;
	letter-spacing: 0.04em;
}

/* ===================================================================
   10. Footer
   =================================================================== */
.sy-footer {
	background: var(--sy-ink);
	color: rgba(255,255,255,0.75);
	padding: 60px 0 30px;
}
.sy-footer-top {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 24px;
	flex-wrap: wrap;
	padding-bottom: 40px;
	border-bottom: 1px solid rgba(255,255,255,0.14);
}
.sy-footer-brand {
	font-family: var(--sy-serif);
	color: var(--sy-white);
	font-size: 20px;
	letter-spacing: 0.1em;
	margin-bottom: 10px;
}
.sy-footer-address { font-size: 13.5px; line-height: 1.9; max-width: 320px; }
.sy-footer-nav { display: flex; gap: 26px; flex-wrap: wrap; font-size: 13px; }
.sy-footer-bottom {
	padding-top: 26px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	font-size: 12px;
	opacity: 0.6;
	letter-spacing: 0.04em;
}

/* ===================================================================
   11. Responsive
   =================================================================== */
@media (max-width: 960px) {
	.sy-about, .sy-area, .sy-access { grid-template-columns: 1fr; }
	.sy-amenities-grid { grid-template-columns: repeat(2, 1fr); }
	.sy-gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px; }
	.sy-gallery-item.is-wide { grid-column: span 2; }
	.sy-gallery-item.is-tall { grid-row: span 1; }
	.sy-map { aspect-ratio: 16/9; }
}

@media (max-width: 720px) {
	.sy-container { padding: 0 22px; }
	.sy-section { padding: 70px 0; }

	.sy-nav-toggle { display: block; }
	.sy-nav-list {
		position: fixed;
		top: 0; right: 0;
		height: 100vh;
		width: min(78vw, 320px);
		background: var(--sy-cream);
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		gap: 26px;
		padding: 0 40px;
		color: var(--sy-ink) !important;
		transform: translateX(100%);
		transition: transform 0.4s ease;
		box-shadow: -20px 0 40px rgba(0,0,0,0.15);
	}
	.sy-nav-open .sy-nav-list { transform: translateX(0); }

	.sy-amenities-grid { grid-template-columns: 1fr; }
	.sy-gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; }
	.sy-contact { padding: 64px 22px; }
	.sy-contact-meta { flex-direction: column; gap: 10px; }
	.sy-footer-top { flex-direction: column; }
}