/* =========================================
   Sckett Front Page / トップページ専用スタイル
   ・front-page.php / header.php(フォールバック) / footer.php
	 で使用。読み込みは is_front_page() 時のみ（functions.php参照）
========================================= */

/* =========================================
   Language Toggle / 言語切替
   ・デフォルトは日本語表示。
	 body.sckett-lang-en が付くと英語表示に切り替わる
	 （front.js がボタン操作・localStorageで管理）
========================================= */
.lang-en{display:none;}
body.sckett-lang-en .lang-ja{display:none;}
body.sckett-lang-en .lang-en{display:inline;}
body.sckett-lang-en .sckett-body-text .lang-en,
body.sckett-lang-en .sckett-hero-lead .lang-en,
body.sckett-lang-en .sckett-quote .lang-en,
body.sckett-lang-en .sckett-cinematic-text .lang-en{display:block;}
.sckett-body-text .lang-ja,
.sckett-hero-lead .lang-ja,
.sckett-quote .lang-ja,
.sckett-cinematic-text .lang-ja{display:block;}

.sckett-lang-btn{
	background:none;
	border:none;
	color:inherit;
	font-size:12px;
	letter-spacing:.03em;
	cursor:pointer;
	opacity:.6;
	padding:4px 2px;
}
.sckett-lang-btn.is-active{
	opacity:1;
	text-decoration:underline;
	text-underline-offset:3px;
}
.sckett-lang-switch{
	display:flex;
	align-items:center;
	gap:6px;
	font-size:12px;
}
.sckett-lang-switch span{opacity:.4;}

/* =========================================
   Preloader / 初回読み込み時のローディング演出
   ・ユーザー提供のtetopaint.jp画面録画で確認したところ、実際の
     ローディングはロゴ1つを静止表示するだけの、ごく短時間・
     最小限のものだった。以前付けていたタグライン文字・満ちる
     ように伸びるバー・ロゴの拡大演出はすべて撤去し、ロゴが
     さっと現れてすぐ消えるだけの、シンプルな表示に変更した
========================================= */
.sckett-preloader{
	position:fixed;
	inset:0;
	z-index:9999;
	display:flex;
	align-items:center;
	justify-content:center;
	background:var(--sckett-gradient-deep);
	transition:opacity .5s ease, visibility .5s ease;
}
.sckett-preloader-inner{
	display:flex;
	flex-direction:column;
	align-items:center;
}
.sckett-preloader-logo{
	height:52px;
	width:auto;
	opacity:0;
	animation:sckett-preloader-in .5s ease forwards;
}
@keyframes sckett-preloader-in{
	to{opacity:1;}
}
.sckett-preloader.is-hidden{
	opacity:0;
	visibility:hidden;
	pointer-events:none;
}
@media(prefers-reduced-motion:reduce){
	.sckett-preloader-logo{animation:none;opacity:1;}
}

/* =========================================
   Front Page Body / ヒーロー直下に余白を作らない
========================================= */
body.sckett-front .head-margin{
	margin-top:0;
}

/* =========================================
   Header / ヘッダー
========================================= */
.sckett-header{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	z-index:100;
	transition:box-shadow .4s ease;
}
/* =========================================
   Header Background / ヘッダー背景（blur用の別レイヤー）
   ・backdrop-filterを.sckett-header本体ではなくこの子要素に
	 かけることで、.sckett-headerがposition:fixedな子要素
	 （モバイルナビ）のcontaining blockになってしまうのを防ぐ
	 （backdrop-filter/transform等を持つ祖先は、position:fixed
	 な子にとって viewport の代わりのcontaining blockになる仕様）
========================================= */
.sckett-header-bg{
	position:absolute;
	inset:0;
	z-index:-1;
	background:rgba(10,20,24,.32);
	backdrop-filter:blur(2px);
	transition:background .4s ease, backdrop-filter .4s ease;
}
.sckett-header.is-scrolled{
	box-shadow:0 4px 20px rgba(0,0,0,.15);
}
.sckett-header.is-scrolled .sckett-header-bg{
	background:rgba(10,24,28,.92);
	backdrop-filter:blur(8px);
}
body:not(.sckett-front) .sckett-header-bg{
	background:rgba(10,24,28,.92);
	backdrop-filter:blur(8px);
}

.sckett-header-inner{
	max-width:var(--container-wide);
	margin:0 auto;
	padding:16px 24px;
	display:flex;
	align-items:center;
	gap:24px;
	color:#fff;
}

.sckett-logo{display:block;}
.sckett-logo-img{
	height:28px;
	width:auto;
	display:block;
}

.sckett-nav{
	flex:1;
	overflow-x:auto;
	scrollbar-width:none;
}
.sckett-nav::-webkit-scrollbar{display:none;}
.sckett-nav ul{
	display:flex;
	align-items:center;
	gap:26px;
	list-style:none;
	margin:0;
	padding:0;
	white-space:nowrap;
}
.sckett-nav a{
	display:flex;
	flex-direction:column;
	line-height:1.3;
	font-size:13px;
	font-weight:400;
	color:#fff;
	opacity:.9;
	letter-spacing:.02em;
}
.sckett-nav a .lang-ja{
	display:block !important;
	font-size:10px;
	opacity:.65;
	margin-top:2px;
}
body.sckett-lang-en .sckett-nav a .lang-ja{display:none !important;}
body.sckett-lang-en .sckett-nav a .lang-en{display:block !important;}
.sckett-nav a:hover{opacity:1;}

.sckett-header-tools{
	display:flex;
	align-items:center;
	gap:18px;
	color:#fff;
}

.sckett-social{
	display:flex;
	gap:12px;
}
.sckett-social a{
	color:#fff;
	opacity:.85;
	display:flex;
}
.sckett-social a:hover{opacity:1;}

.sckett-nav-toggle{
	display:none;
	flex-direction:column;
	justify-content:center;
	gap:5px;
	width:30px;
	height:24px;
	background:none;
	border:none;
	cursor:pointer;
	padding:0;
}
.sckett-nav-toggle span{
	display:block;
	width:100%;
	height:2px;
	background:#fff;
	transition:.3s;
}
.sckett-nav-toggle.is-active span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.sckett-nav-toggle.is-active span:nth-child(2){opacity:0;}
.sckett-nav-toggle.is-active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

@media(max-width:991px){
	.sckett-nav{
		position:fixed;
		inset:0;
		top:64px;
		background:rgba(8,18,22,.98);
		display:flex;
		align-items:flex-start;
		justify-content:center;
		padding:40px 24px;
		transform:translateY(-8px);
		opacity:0;
		pointer-events:none;
		transition:.3s ease;
		overflow-y:auto;
	}
	.sckett-nav.is-open{
		opacity:1;
		pointer-events:auto;
		transform:translateY(0);
	}
	.sckett-nav ul{
		flex-direction:column;
		align-items:flex-start;
		gap:22px;
		white-space:normal;
	}
	.sckett-nav a{font-size:18px;}
	.sckett-nav-toggle{display:flex;}
	.sckett-header-tools .sckett-social{display:none;}
}

/* =========================================
   Hero Pin & Reveal / ヒーロー固定＋Aboutがせり上がる演出
   ・PC版のみ：.sckett-hero-stageを画面より縦長にし、その中で
	 ヒーローをposition:stickyで固定。Aboutをマイナスマージンで
	 手前（上のレイヤー）にかぶせることで、スクロールに応じて
	 「めくれ上がる」ような一枚岩の動きを作る
	 （参考：siobara.or.jpのヒーロー〜Pickup部分の挙動を実機確認）
========================================= */
@media(min-width:992px){
	.sckett-hero-stage{
		position:relative;
		height:170vh;
	}
	.sckett-hero-stage .sckett-hero{
		position:sticky;
		top:0;
	}
	.sckett-about{
		position:relative;
		z-index:2;
		margin-top:-30vh;
		border-radius:56px 56px 0 0;
		box-shadow:0 -40px 80px rgba(0,0,0,.18);
	}
}

/* =========================================
   Hero / ヒーロー
========================================= */
.sckett-hero{
	position:relative;
	height:100svh;
	min-height:560px;
	display:flex;
	align-items:center;
	overflow:hidden;
	background:var(--sckett-ocean-dark);
}

.sckett-hero-video{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:center;
	animation:sckett-hero-breathe 18s ease-in-out infinite;
}
/* ゆっくりとした呼吸するようなズームで、実写映像に立体感を出す */
@keyframes sckett-hero-breathe{
	0%{transform:scale(1);}
	50%{transform:scale(1.06);}
	100%{transform:scale(1);}
}
@media(prefers-reduced-motion:reduce){
	.sckett-hero-video,
	.sckett-cinematic-media{animation:none;}
}

.sckett-hero-overlay{
	position:absolute;
	inset:0;
	background:
		linear-gradient(180deg, rgba(6,18,22,.55) 0%, rgba(6,18,22,.35) 40%, rgba(6,18,22,.75) 100%);
}

.sckett-hero-content{
	position:relative;
	z-index:2;
	color:#fff;
}
.sckett-hero-content > *{
	opacity:0;
	transform:translateY(24px);
	animation:sckett-hero-in .9s cubic-bezier(.22,1,.36,1) forwards;
}
.sckett-hero-content > *:nth-child(1){animation-delay:.15s;}
.sckett-hero-content > *:nth-child(2){animation-delay:.3s;}
.sckett-hero-content > *:nth-child(3){animation-delay:.45s;}
.sckett-hero-content > *:nth-child(4){animation-delay:.6s;}
@keyframes sckett-hero-in{
	to{opacity:1;transform:translateY(0);}
}
.sckett-hero-eyebrow{
	font-size:13px;
	letter-spacing:.14em;
	text-transform:uppercase;
	opacity:.85;
	margin-bottom:18px;
}
/* =========================================
   Hero Logo / ヒーローロゴ
   ・以前は常時上下にフロートする演出＋ロゴの形にマスクした光の
     帯が繰り返し通過する「しずく」演出を付けていたが、「気持ち
     悪い」というフィードバックを受け、01〜03の傾き（skew）と
     同様に完全に撤去。常時動き続ける演出は追加せず、静止した
     ロゴをそのまま見せる（tetopaint.jpのヘッダーロゴも動かない）
========================================= */
.sckett-hero-logo{
	margin:0;
	line-height:0;
}
.sckett-hero-logo-img{
	display:block;
	height:clamp(64px, 11vw, 132px);
	width:auto;
	filter:drop-shadow(0 4px 24px rgba(0,0,0,.25));
}
.sckett-hero-tagline{
	font-size:14px;
	letter-spacing:.2em;
	text-transform:uppercase;
	opacity:.75;
	margin:14px 0 0;
}
.sckett-hero-lead{
	max-width:520px;
	margin-top:26px;
	font-size:16px;
	line-height:1.9;
	opacity:.92;
}

.sckett-scroll-cue{
	position:absolute;
	left:50%;
	bottom:72px;
	transform:translateX(-50%);
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:10px;
	color:#fff;
	z-index:2;
	opacity:.85;
}
.sckett-scroll-cue-line{
	width:1px;
	height:44px;
	background:rgba(255,255,255,.5);
	position:relative;
	overflow:hidden;
}
.sckett-scroll-cue-line::after{
	content:"";
	position:absolute;
	left:0;
	top:-100%;
	width:100%;
	height:100%;
	background:#fff;
	animation:sckett-scroll-line 1.8s ease-in-out infinite;
}
@keyframes sckett-scroll-line{
	0%{top:-100%;}
	60%{top:100%;}
	100%{top:100%;}
}
.sckett-scroll-cue-text{
	font-size:11px;
	letter-spacing:.18em;
	text-transform:uppercase;
}

/* =========================================
   Section Common / セクション共通
========================================= */
.sckett-section{
	padding:110px 0;
}
@media(max-width:767px){
	.sckett-section{padding:70px 0;}
}

.sckett-eyebrow{
	font-size:12px;
	letter-spacing:.18em;
	text-transform:uppercase;
	color:var(--sckett-ocean);
	font-weight:500;
	margin-bottom:10px;
}

.sckett-heading{
	font-family:var(--font-mincho);
	font-size:clamp(28px, 4vw, 42px);
	font-weight:500;
	line-height:1.3;
	margin:0 0 26px;
	color:var(--sckett-ocean-dark);
}
.sckett-heading-sub{
	display:block;
	font-family:var(--font-base);
	font-size:14px;
	font-weight:400;
	letter-spacing:.06em;
	color:var(--color-sub);
	margin-top:8px;
}

.sckett-quote{
	font-family:var(--font-mincho);
	font-size:20px;
	line-height:1.9;
	color:var(--sckett-ocean-dark);
	margin:0 0 26px;
	padding-left:20px;
	border-left:2px solid var(--sckett-ocean-light);
}

.sckett-body-text p{
	margin:0 0 18px;
	color:var(--color-text);
	line-height:1.95;
}
.sckett-body-text p:last-child{margin-bottom:0;}

.sckett-button{
	margin-top:8px;
}
/* ページ内のボタンはほぼ全て class="button button-outline sckett-button"
   という組み合わせで使われており、塗りつぶし（.button）を意図しているのに
   .button-outlineの文字色（濃紺）が上書きしてしまい、海色の背景に
   濃紺の文字が乗って読みにくくなっていた不具合を修正。
   .buttonを伴う場合は常に塗りつぶし＋白文字を優先する */
a.sckett-button.button{
	background:var(--sckett-ocean);
	border-color:var(--sckett-ocean);
	color:#fff;
}
a.sckett-button.button:hover{
	background:var(--sckett-ocean-dark);
	border-color:var(--sckett-ocean-dark);
	color:#fff;
}
/* 本当の意味でのアウトラインボタン（.buttonを伴わない単独使用）のみ、
   枠線＋濃紺文字のスタイルにする */
a.sckett-button.button-outline:not(.button){
	color:var(--sckett-ocean-dark);
	border-color:var(--sckett-ocean-dark);
}
a.sckett-button.button-outline:not(.button):hover{
	background:var(--sckett-ocean-dark);
	border-color:var(--sckett-ocean-dark);
	color:#fff;
}

.sckett-chip-link{
	display:inline-flex;
	align-items:center;
	gap:8px;
	padding:9px 18px;
	border:1px solid var(--color-border);
	border-radius:var(--radius-full);
	font-size:13px;
	color:var(--sckett-ocean-dark);
	margin:4px 8px 4px 0;
}
.sckett-chip-link:hover{
	background:var(--sckett-ocean-dark);
	color:#fff;
	border-color:var(--sckett-ocean-dark);
}
.sckett-chip-link.is-disabled{
	opacity:.5;
	cursor:default;
	pointer-events:none;
}
/* 【追加】「Instagram DM/WhatsApp/LINEはロゴアイコンを文字の前に
   わかるように入れて」との指定。WhatsApp・LINEには既に画像アイコンが
   あったがInstagram DMには無かったため、header.phpと同じ
   インラインSVGを追加。stroke=currentColorのため、
   .sckett-chip-link:hover時の白文字化にも自動で追従する */
.sckett-chip-icon{
	flex:0 0 auto;
	width:16px;
	height:16px;
}

/* =========================================
   About / スケットとは
========================================= */
.sckett-about{background:var(--sckett-gradient-surface);position:relative;}
.sckett-about-grid{
	display:grid;
	grid-template-columns:.9fr 1.1fr;
	gap:60px;
	align-items:center;
}
.sckett-about-image{
	border-radius:var(--radius-lg);
	box-shadow:var(--shadow);
	overflow:hidden;
}
.sckett-about-image img{
	display:block;
	width:100%;
	aspect-ratio:4/5;
	object-fit:cover;
	will-change:transform;
}
@media(max-width:991px){
	.sckett-about-grid{
		grid-template-columns:1fr;
		gap:36px;
	}
	.sckett-about-image{max-width:360px;}
}

/* =========================================
   Profile / Jack Fukushima
   ・sckett.com本体（scket2024テーマ）が実際に使用している、
	 背景を透過処理済みの本人カットアウト（jack2.png）をそのまま使用。
	 本物の透過PNGなので、自前で背景を切り抜く必要がなく、
	 頭部が欠ける等のリスクがない。透過を活かし、背後に
	 ターコイズのグローを置いて立体感を出す
========================================= */
.sckett-profile{
	background:var(--sckett-gradient-deep);
	position:relative;
	overflow:hidden;
}
.sckett-profile .sckett-eyebrow{color:var(--sckett-turquoise);}
.sckett-profile .sckett-heading,
.sckett-profile .sckett-heading-sub{color:#fff;}
.sckett-profile .sckett-heading-sub{color:rgba(255,255,255,.65);}
.sckett-profile .sckett-body-text p{color:rgba(255,255,255,.85);}
.sckett-profile-grid{
	display:grid;
	grid-template-columns:1fr 1.2fr;
	gap:60px;
	align-items:center;
}
.sckett-profile-image{
	position:relative;
	display:flex;
	justify-content:center;
}
.sckett-profile-glow{
	position:absolute;
	left:50%;
	top:46%;
	width:75%;
	height:75%;
	transform:translate(-50%,-50%);
	background:radial-gradient(circle, rgba(31,214,200,.4) 0%, rgba(31,214,200,0) 70%);
	filter:blur(12px);
	pointer-events:none;
}
.sckett-profile-image img{
	position:relative;
	display:block;
	width:100%;
	height:auto;
	max-width:480px;
	object-fit:contain;
	will-change:transform;
}
.sckett-profile-links{margin-top:22px;}
.sckett-profile .sckett-chip-link{
	border-color:rgba(255,255,255,.35);
	color:#fff;
}
.sckett-profile .sckett-chip-link:hover{
	background:var(--sckett-turquoise);
	border-color:var(--sckett-turquoise);
	color:#04141a;
}
@media(max-width:991px){
	.sckett-profile-grid{
		grid-template-columns:1fr;
		gap:36px;
	}
	.sckett-profile-image{max-width:320px;margin:0 auto;}
}
/* 【再修正】前回のalign-self:endだけでは直らなかった。実機で
   確認したところ、写真の下の余白の正体は行内の中央揃えではなく、
   .sckett-section共通のpadding:110px 0（下側）だった。写真は
   テキストより背が高く、centerであってもすでに行の下端に達して
   いたため、align-self:endを付けても表示上は何も変わって
   いなかった（Playwrightで検証：付けても外しても写真の下に
   110pxの余白が残ることを確認済み）。PC幅では.sckett-profileに
   overflow:hiddenを付けたうえで、写真をposition:relative；
   bottom:-120pxでセクション下端のpadding分より少し多めに押し下げ、
   境界で切ることで、写真の下の余白を実質ゼロにした（分離環境で
   992px〜1920pxの幅で検証し、余白が最大でも1px未満になることを
   確認済み。-120pxは意図的にpaddingの110pxより少し大きくして
   あり、写真がわずかに境界の外に出る分はoverflow:hiddenで
   切られるだけなので見た目に影響はない） */
@media(min-width:992px){
	.sckett-profile-image{
		align-self:end;
		position:relative;
		bottom:-120px;
	}
}

/* =========================================
   Services / Coordination・Photograph・Diving
   ・【再修正】v1.3.7では「スクロールで現在の項目だけ開き、他は
     見出し1行に閉じる」動きをJS（is-active切り替え＋max-heightの
     アニメーション）で再現していたが、「動き見てないの？」という
     指摘を受けtetopaint.jpの動画を高フレームレートで見直したところ、
     実物にはそもそも開閉アニメーションが存在せず、しかも一度
     積み重なった見出し（01・02）はスクロールを進めても消えずに
     残り続けると判明した。これはposition:stickyの制約上、項目を
     フラットなli兄弟として並べただけでは実現できない（各項目の
     stickyは自分自身の要素の高さ分でしか張り付き続けられないため）。
     そこで次の項目を前の項目の「内側」に入れ子にする構成に変更。
     外側の項目（先に出てくる項目）の高さがリストの最後まで伸びる
     ため、その見出しはリストの終わりまでずっとsticky張り付きを
     維持できる
========================================= */
.sckett-services{position:relative;}
.sckett-svc-list{
	margin:0;
	padding:0;
	border-bottom:1px solid var(--color-border);
}
.sckett-svc-item{
	border-top:1px solid var(--color-border);
	position:relative;
}
/* 見出しの高さを78pxに固定し（padding分でなくheight指定）、
   積み重ね時のtopオフセット計算を確実にする。ラベルが折り返しても
   はみ出さないよう、align-items:centerで縦中央に配置する。
   ・【不具合修正】実際に公開画面で検証したところ、見出しが
     常に写真・動画の下に隠れて見えなくなっていた。原因は2つ：
     (1) 固定ヘッダーの実際の高さは60pxではなく100px
        （sckett独自の.sckett-headerではなく、GRM Core本体の
        header.grm-global-menuが使われており、想定していたよりも
        高かった）で、見出しがその下に潜り込んでいた
     (2) z-indexの実効値が足りず、.sckett-svc-media内の写真・動画
        （position:absolute）が見出しより手前に描画されていた
     この2点を修正し、実機で見出しが常に手前に表示されることを
     確認済み */
.sckett-svc-header{
	position:sticky;
	z-index:5;
	height:78px;
	box-sizing:border-box;
	background:var(--color-bg,#fff);
	display:flex;
	align-items:center;
	gap:16px;
	padding:0 4px;
}
/* 入れ子の深さごとに積み重なる位置を変える。100pxは固定ヘッダー
   （header.grm-global-menu）の実際の高さ、78pxは見出し自体の高さ
   （sckettは3階層のため決め打ち） */
.sckett-svc-list > .sckett-svc-item > .sckett-svc-header{top:100px;}
.sckett-svc-list > .sckett-svc-item > .sckett-svc-item > .sckett-svc-header{top:178px;}
.sckett-svc-list > .sckett-svc-item > .sckett-svc-item > .sckett-svc-item > .sckett-svc-header{top:256px;}
.sckett-svc-num{
	font-family:var(--font-base);
	font-size:13px;
	color:var(--color-sub);
	font-variant-numeric:tabular-nums;
}
.sckett-svc-name{
	display:flex;
	flex-wrap:wrap;
	align-items:baseline;
	gap:10px;
	font-size:17px;
	font-weight:500;
	color:var(--sckett-ocean-dark);
}
.sckett-svc-name-sub{
	font-size:12px;
	font-weight:400;
	color:var(--color-sub);
}

/* 開閉アニメーションは行わない。本文・写真は常に通常のフローに
   存在し、スクロールで見出し（sticky）の背後を通り過ぎるだけ。
   position:relative + z-index:0で独立したスタッキングコンテキストを
   作り、中の写真・動画（position:absolute）がsckett-svc-header
   （z-index:5）より手前に描画されてしまわないようにする */
.sckett-svc-detail-inner{
	position:relative;
	z-index:0;
	display:grid;
	grid-template-columns:1.3fr 1fr;
	gap:48px;
	align-items:start;
	padding:6px 4px 44px;
}
.sckett-svc-media{
	position:relative;
	aspect-ratio:16/10;
	overflow:hidden;
	border-radius:var(--radius-sm);
	background:var(--sckett-gradient-deep);
}
.sckett-svc-media img,
.sckett-svc-media video{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	object-fit:cover;
	transition:transform .8s ease, opacity 1.1s ease;
}
.sckett-svc-title{
	display:inline-block;
	font-family:var(--font-mincho);
	font-size:22px;
	font-weight:500;
	color:var(--sckett-ocean-dark);
	margin:0 0 18px;
	padding-bottom:14px;
	border-bottom:2px solid var(--sckett-ocean-dark);
}
.sckett-svc-title-sub{
	display:block;
	font-family:var(--font-base);
	font-size:12px;
	font-weight:400;
	letter-spacing:.06em;
	color:var(--color-sub);
	margin-top:6px;
}
.sckett-svc-body .sckett-body-text{margin-bottom:22px;}

@media(max-width:767px){
	.sckett-svc-header{padding:0;gap:12px;}
	.sckett-svc-name{font-size:15px;}
	.sckett-svc-detail-inner{
		grid-template-columns:1fr;
		gap:22px;
		padding:2px 0 32px;
	}
}

/* =========================================
   Service Slider / Photograph・Divingの2枚切替
   ・takenaka-foodware.jpのブランド紹介（大きな写真＋サムネイル
	 帯）を参考に、実際に手元にあった未使用カットを活かして構成
   ・以前は単純なopacityのクロスフェードだったが、「スライドした
     時の動きが違う」という指摘を受け、実際に横方向へ動く
     スライド（translateX）に変更。次の写真は右側から入ってきて、
     前の写真は左側へ抜けていく、実物のカルーセルに近い動きにした
========================================= */
.sckett-slider-slide{
	transform:translateX(100%);
	transition:transform .85s cubic-bezier(.65,0,.35,1);
	z-index:1;
}
.sckett-slider-slide.is-active{
	transform:translateX(0);
	z-index:3;
}
.sckett-slider-slide.is-prev{
	transform:translateX(-100%);
	z-index:2;
}
@media(prefers-reduced-motion:reduce){
	.sckett-slider-slide{transition:none;}
}
.sckett-slider-thumbs{
	position:absolute;
	left:16px;
	bottom:16px;
	z-index:3;
	display:flex;
	gap:8px;
}
.sckett-slider-thumb{
	width:46px;
	height:46px;
	padding:0;
	border-radius:8px;
	overflow:hidden;
	border:2px solid rgba(255,255,255,.45);
	background:none;
	cursor:pointer;
	opacity:.65;
	transition:opacity .3s ease, border-color .3s ease, transform .3s ease;
}
.sckett-slider-thumb img{
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
}
.sckett-slider-thumb:hover{opacity:.9;}
.sckett-slider-thumb.is-active{
	opacity:1;
	border-color:var(--sckett-turquoise);
	transform:translateY(-2px);
}
@media(max-width:767px){
	.sckett-slider-thumb{width:36px;height:36px;}
}

/* =========================================
   [削除済み] Videos / 動画で見るスケット
   ・「その下の動画で見るスケットは削除」との指定でセクションごと
     削除。.sckett-section-headは他セクションでも使う共通ルール
     のため、ここに残して維持する
========================================= */
.sckett-section-head{
	text-align:center;
	max-width:640px;
	margin:0 auto 46px;
}

/* =========================================
   News / お知らせ
   ・ユーザー提供のtetopaint.jp画面録画を高フレームレートで
     コマ送りし、実際のBlogカードを確認し直した。最初に作った
     「写真の上に半透明キャプションを重ねるオーバーレイ」は
     実物と違っており（「カードデザインが違う」という指摘）、
     正しくは【写真】と【キャプション帯】が重ならず積み重なる
     構成で、写真は隠れず全部見える。日付は写真の左に縦書きで
     添えられ、丸い矢印ボタンだけが写真とキャプションの境目を
     またぐ位置に乗る。これに合わせて積み重ね構成に作り直した
========================================= */
.sckett-news-slider{
	margin:0 0 20px;
	padding:0 max(24px, calc((100% - var(--container-wide)) / 2 + 24px));
}
.sckett-news-list{
	list-style:none;
	margin:0;
	padding:0 0 10px;
	display:flex;
	gap:22px;
	overflow-x:auto;
	scroll-snap-type:x proximity;
	-webkit-overflow-scrolling:touch;
	scrollbar-width:none;
}
.sckett-news-list::-webkit-scrollbar{display:none;}
.sckett-news-item{
	flex:0 0 clamp(240px, 29vw, 340px);
	scroll-snap-align:start;
}
.sckett-news-card{
	display:flex;
	align-items:stretch;
	gap:10px;
	color:inherit;
}
/* 日付：写真の左側に縦書きで添える。「日付はもう少し大きく」との
   指定で11px→13pxに拡大 */
.sckett-news-date{
	flex:0 0 auto;
	writing-mode:vertical-rl;
	text-orientation:mixed;
	letter-spacing:.06em;
	font-size:13px;
	color:var(--color-sub);
	padding:2px 0;
}
.sckett-news-photo-wrap{
	flex:1;
	min-width:0;
}
/* 【修正】以前はこの要素自体にoverflow:hiddenを付けていたため、
   写真とキャプションの境目にまたがるよう配置した.sckett-news-arrow
   （bottom:-17pxで下にはみ出す）まで一緒に切り取られ、
   「矢印がバックのグレーに隠れてる」状態になっていた。写真の
   クロップ用overflow:hiddenは内側の.sckett-news-thumb-clipへ
   移し、矢印はこの要素の直下（クリップの外）に置くことで、
   矢印を隠さずに写真の角丸クロップだけ維持する */
.sckett-news-thumb{
	position:relative;
	display:block;
	aspect-ratio:4/3;
	background:var(--sckett-gradient-deep);
}
.sckett-news-thumb-clip{
	position:absolute;
	inset:0;
	overflow:hidden;
	border-radius:var(--radius-sm);
}
.sckett-news-thumb img{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	object-fit:cover;
	transition:transform .7s ease;
}
.sckett-news-card:hover .sckett-news-thumb img{transform:scale(1.06);}
.sckett-news-thumb.is-empty .sckett-news-thumb-clip{display:flex;align-items:center;justify-content:center;}
.sckett-news-thumb.is-empty .sckett-news-thumb-mark{
	position:static;
	width:30%;
	height:auto;
	opacity:.35;
	transition:none;
}
/* キャプション帯：写真の下に積み重なる（重ねない） */
.sckett-news-caption{
	display:block;
	background:var(--sckett-foam);
	padding:14px 40px 14px 14px;
}
.sckett-news-title{
	display:-webkit-box;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:2;
	overflow:hidden;
	font-size:14px;
	font-weight:500;
	line-height:1.5;
	color:var(--sckett-ocean-dark);
}
.sckett-news-meta{
	display:-webkit-box;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:2;
	overflow:hidden;
	margin-top:6px;
	font-size:11px;
	line-height:1.6;
	color:var(--color-sub);
}
/* 矢印ボタン：写真自身の右下に半分はみ出させ、
   下に続くキャプション帯との境目にまたがせる */
.sckett-news-arrow{
	position:absolute;
	right:12px;
	bottom:-17px;
	z-index:2;
	display:flex;
	align-items:center;
	justify-content:center;
	width:34px;
	height:34px;
	border-radius:var(--radius-full);
	background:#fff;
	border:1px solid var(--color-border);
	color:var(--sckett-ocean-dark);
	transition:background .25s ease, border-color .25s ease, color .25s ease;
}
.sckett-news-card:hover .sckett-news-arrow{
	background:var(--sckett-ocean-dark);
	border-color:var(--sckett-ocean-dark);
	color:#fff;
}
/* 【元に戻す】「お知らせ一覧のボタンは中央にして右の線をなくして
   元に戻して」との指定で、ボタン＋横スクロール位置バーの並びを
   廃止し、他セクション（Reservation等）と同じ、単一ボタンを
   中央に置くだけのシンプルな構成に戻した */
.sckett-news-controls{
	display:flex;
	justify-content:center;
}

@media(max-width:767px){
	.sckett-news-slider{padding:0 24px;}
}

/* =========================================
   Reservation
   ・これまで単色（--sckett-ocean）だけの平坦な帯だったため、
	 素材フォルダに未使用のまま眠っていた石垣島の夕景（hero-01.jpg）
	 を全面に敷き、海の色一色に偏っていたページに暖色を1箇所差す
========================================= */
.sckett-reservation{
	position:relative;
	overflow:hidden;
	background:var(--sckett-ocean);
	color:#fff;
}
.sckett-reservation-media{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	object-fit:cover;
}
.sckett-reservation-overlay{
	position:absolute;
	inset:0;
	background:linear-gradient(160deg, rgba(6,20,26,.85) 0%, rgba(10,50,48,.55) 55%, rgba(6,20,26,.88) 100%);
}
.sckett-reservation .sckett-heading{color:#fff;}
.sckett-reservation .sckett-eyebrow{color:var(--sckett-turquoise);}
.sckett-reservation .sckett-body-text p{color:rgba(255,255,255,.92);}
.sckett-reservation-inner{
	position:relative;
	z-index:2;
	max-width:640px;
}
.sckett-reservation-actions{
	display:flex;
	flex-wrap:wrap;
	gap:16px;
	margin-top:26px;
}
.sckett-reservation .button:not(.button-outline){
	background:#fff;
	color:var(--sckett-ocean-dark);
}
.sckett-reservation .button-outline{
	color:#fff;
	border-color:rgba(255,255,255,.6);
}
.sckett-reservation .button-outline:hover{
	background:#fff;
	color:var(--sckett-ocean-dark);
	border-color:#fff;
}

/* =========================================
   Contact
========================================= */
.sckett-contact-grid{max-width:640px;}
.sckett-contact-address{
	font-style:normal;
	line-height:1.9;
	margin:0 0 26px;
	color:var(--color-text);
}
.sckett-contact-channels{
	display:flex;
	flex-wrap:wrap;
}
.sckett-contact-channels img{
	display:inline-block;
	vertical-align:middle;
}

/* =========================================
   Footer
========================================= */
.sckett-footer{
	background:var(--sckett-ocean-dark);
	color:#fff;
	padding:60px 0 30px;
}
.sckett-footer-top{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	justify-content:space-between;
	gap:28px;
	padding-bottom:34px;
	border-bottom:1px solid rgba(255,255,255,.15);
}
.sckett-footer-logo img{height:24px;}
.sckett-footer-nav ul{
	display:flex;
	flex-wrap:wrap;
	gap:18px;
	list-style:none;
	margin:0;
	padding:0;
	font-size:13px;
}
.sckett-footer-nav a{opacity:.85;}
.sckett-footer-nav a:hover{opacity:1;text-decoration:underline;}
.sckett-footer-social{
	display:flex;
	gap:14px;
}
.sckett-footer-social a{color:#fff;opacity:.85;}
.sckett-footer-social a:hover{opacity:1;}

.sckett-footer-bottom{
	padding-top:28px;
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	gap:16px;
	font-size:12px;
	opacity:.75;
	line-height:1.8;
}

@media(max-width:767px){
	.sckett-footer-top{flex-direction:column;align-items:flex-start;}
	.sckett-footer-bottom{flex-direction:column;}
}

/* =========================================
   Anchor Scroll Offset / 固定ヘッダー分のスクロール補正
========================================= */
#about,
#profile,
#coordination,
#photograph,
#diving,
#news,
#reservation,
#contact{
	scroll-margin-top:84px;
}


/* =========================================
   Hero Wave / ヒーロー下端の波
   ・SVG内蔵のSMILアニメーション（<animate>）でd属性そのものを
	 なめらかに変化させ、実際に波打っているように見せる
	 （静的な帯ではなく、常に揺れ続ける）
   ・高さを抑え、Scroll cue（bottom:70px〜）と重ならない位置に配置
========================================= */
.sckett-wave-hero{
	position:absolute;
	left:0;
	right:0;
	bottom:-1px;
	line-height:0;
	pointer-events:none;
}
.sckett-wave-hero svg{
	display:block;
	width:100%;
	height:125px;
}
/* fillはpath要素のfill属性（グラデーション）を使用するため、
   ここでは上書きしない。
   【再調整】「波の動きを1.5倍ほど大きくして、また下から少しだけ
   上に上げて（下のグリーンの空きを1.3倍に」との指定で、表示高さを
   96px→125px（約1.3倍）に拡大。前面パスのanimate側の揺れ幅も
   広げ（front-page.php）、高さ拡大分と合わせて実際の揺れ幅は
   約1.5倍になる。viewBoxは変えていないため、波の下の緑
   （ターコイズ）の塗り面積も高さに比例して約1.3倍になった。
   Scroll cue（bottom:72px、実高さ約68px→上端は約140px)との
   間隔は、波の最高点（新しい高さで約112px）に対しなお約28px
   確保できているため重ならない */
@media(max-width:767px){
	.sckett-wave-hero svg{height:70px;}
}
@media(prefers-reduced-motion:reduce){
	.sckett-wave-hero animate{display:none;}
}

/* =========================================
   Cinematic Break / 動画メインの全幅ブレイクセクション
   ・About/Profileの後に挟む、ヒーローとは別の実写映像
   ・スクロールで通り過ぎる「静」のセクションではなく、
	 動画そのものを主役にした「魅せる」セクション
========================================= */
.sckett-cinematic{
	position:relative;
	height:70vh;
	min-height:420px;
	display:flex;
	align-items:center;
	justify-content:center;
	overflow:hidden;
	background:var(--sckett-ocean-dark);
}
/* 【変更】「クジラの写真は3枚フェードで入れ替えて」との指定で、
   静止画1枚→3枚の自動クロスフェードに変更。is-activeが付いた
   画像だけopacity:1になり、JS（front.js）が一定間隔で
   is-activeを次の画像へ渡すことでフェード切替する */
.sckett-cinematic-media{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	object-fit:cover;
	opacity:0;
	z-index:0;
	transition:opacity 1.8s ease;
	animation:sckett-hero-breathe 22s ease-in-out infinite;
}
.sckett-cinematic-media.is-active{
	opacity:1;
	z-index:1;
}
/* 母子クジラの写真は縦長のため、横長のセクションでは中央より
   やや上（母子の姿が収まる位置）を基準にトリミングする */
.sckett-cinematic-media--calf{
	object-position:50% 25%;
}
@media(prefers-reduced-motion: reduce){
	.sckett-cinematic-media{transition:none;}
}
.sckett-cinematic-overlay{
	position:absolute;
	inset:0;
	background:linear-gradient(0deg, rgba(4,16,20,.65) 0%, rgba(4,16,20,.25) 50%, rgba(4,16,20,.65) 100%);
}
.sckett-cinematic-text{
	position:relative;
	z-index:2;
	max-width:760px;
	margin:0 auto;
	padding:0 24px;
	text-align:center;
	color:#fff;
}
.sckett-cinematic-text p{
	font-family:var(--font-mincho);
	font-size:clamp(22px, 3.4vw, 36px);
	line-height:1.8;
	letter-spacing:.03em;
}

/* =========================================
   Reveal Upgrade / より印象的なスクロール表示
   ・単純なフェードだけでなく、下からのクリップ（マスク）で
	 「めくれ上がる」ような見え方にする
========================================= */
.sckett-reveal{
	opacity:0;
	transform:translateY(46px) scale(.97);
	clip-path:inset(0 0 14% 0);
	transition:
		opacity 1s cubic-bezier(.22,1,.36,1),
		transform 1s cubic-bezier(.22,1,.36,1),
		clip-path 1s cubic-bezier(.22,1,.36,1);
}
.sckett-reveal.is-visible{
	opacity:1;
	transform:translateY(0) scale(1);
	clip-path:inset(0 0 0% 0);
}
/* 画像は少し長め・遅めにすることで、テキストとの時差を出す */
.sckett-about-image.sckett-reveal,
.sckett-profile-image.sckett-reveal{
	transition-duration:1.3s;
}
/* 重要な不具合修正：clip-path:inset(0 0 0% 0)は「4辺とも0」でも
   実際にはその要素自身の枠にぴったり合わせてクリップする指定であり、
   「クリップなし」にはならない。そのため、object-fit:containで
   枠より縦長に表示される画像（Jack Fukushimaのカットアウト等）は、
   is-visible後も頭部など枠からはみ出た部分が切れてしまっていた。
   これらの画像ラッパーだけはclip-pathを使わず、
   フェード＋わずかな移動のみで表示する */
.sckett-about-image.sckett-reveal,
.sckett-profile-image.sckett-reveal{
	clip-path:none;
}
html.no-js .sckett-reveal{
	opacity:1;
	transform:none;
	clip-path:none;
}

/* =========================================
   Text Reveal / ぼかしから輪郭が合ってくる文字演出
   ・spiral-cap.comのラベル文字（ぼやけた状態からスクロールで
	 くっきり合ってくる）を参考にした「文字の遊び」。既存の
	 .sckett-reveal（IntersectionObserverでis-visibleを付与）に
	 便乗させ、新しいJSは追加していない
========================================= */
.sckett-text-reveal{
	display:inline-block;
	opacity:0;
	filter:blur(7px);
	transform:translateY(6px);
	transition:opacity 1s ease .1s, filter 1s ease .1s, transform 1s ease .1s;
}
.sckett-reveal.is-visible .sckett-text-reveal{
	opacity:1;
	filter:blur(0);
	transform:translateY(0);
}
html.no-js .sckett-text-reveal{opacity:1;filter:none;transform:none;}
@media(prefers-reduced-motion:reduce){
	.sckett-text-reveal{transition:opacity .4s ease;filter:none;transform:none;}
}