/* =========================================
   GRM Theme Base
   Root Variables / 共通変数
========================================= */

:root{

	/* Container / コンテナ幅 */
	--container:1200px;
	--container-wide:1400px;

	/* Break Point / ブレイクポイント */
	--sp:767px;
	--tab:991px;
	--pc:1200px;

	/* Gap / 余白 */
	--gap-xs:10px;
	--gap-sm:20px;
	--gap:30px;
	--gap-lg:50px;

	/* Font Family / フォント */
	--font-base:
		"Noto Sans JP",
		sans-serif;

	--font-mincho:
		"Shippori Mincho",
		"Yu Mincho",
		serif;

	/* Font Size / 文字サイズ */
	--font-xs:12px;
	--font-sm:14px;
	--font-base-size:16px;
	--font-lg:20px;
	--font-xl:28px;

	/* Line Height / 行間 */
	--line-height:1.8;

	/* Color / カラー */
	--color-main:#222222;
	--color-sub:#666666;
	--color-text:#333333;
	--color-border:#cccccc;

	/* Background / 背景 */
	--color-white:#ffffff;
	--color-black:#000000;
	--color-gray:#f6f4ef;

	/* Radius / 角丸
	   カード等は少し柔らかい角丸、ボタンは完全な丸角（ピル型） */
	--radius-sm:6px;
	--radius:12px;
	--radius-lg:24px;
	--radius-full:999px;

	/* Shadow / 影 */
	--shadow:
		0 3px 10px rgba(0,0,0,.08);

}

/* =========================================
	 View Transitions / 全ページ共通のページ遷移演出
	 ・サイト内のリンクをクリックしてページが切り替わる瞬間を、
	 　ふわっとクロスフェードさせる。対応ブラウザ（Chrome/Edge等の
	 　Chromium系）ではブラウザ標準の「クロスドキュメント
	 　View Transitions」機能により、JS不要でCSSのみで動作する。
	 ・Safari/Firefox等、まだ対応していないブラウザでは
	 　このルールは単に無視され、これまで通りの瞬時の
	 　ページ切り替えになるだけ（何も壊れない・エラーにもならない
	 　プログレッシブエンハンスメント）。
	 ・デフォルトのクロスフェードは0.25秒とやや速いため、
	 　少しゆっくり柔らかい速度・イージングに調整している。
	 ・単純なopacityのクロスフェードだけだと物足りなかったため、
	 　ごく軽いblurも一緒に効かせて、より「ふわっと」溶けるような
	 　質感にしている（デフォルトのanimation-nameを独自の
	 　keyframesで上書き）。durationも.5s→.8sに伸ばした。
========================================= */
@view-transition {
	navigation: auto;
}

::view-transition-old(root) {
	animation: .8s cubic-bezier(.22, 1, .36, 1) both grm-vt-fade-out;
}

::view-transition-new(root) {
	animation: .8s cubic-bezier(.22, 1, .36, 1) both grm-vt-fade-in;
}

@keyframes grm-vt-fade-out {
	from { opacity: 1; filter: blur(0); }
	to   { opacity: 0; filter: blur(12px); }
}

@keyframes grm-vt-fade-in {
	from { opacity: 0; filter: blur(12px); }
	to   { opacity: 1; filter: blur(0); }
}
/* =========================================
   Sckett Accent Colors / スケット独自アクセントカラー
   ・石垣島の海をイメージしたオーシャンブルー系
   ・grm-theme-base の共通変数はそのまま維持し、
	 サイト独自トーンだけをここに追加する
========================================= */
:root{
	--sckett-ocean-dark:#06232c;
	--sckett-ocean:#0e6e7c;
	--sckett-ocean-mid:#12909f;
	--sckett-ocean-light:#5cd6d0;
	--sckett-turquoise:#1fd6c8;
	--sckett-coral:#ff7a59;
	--sckett-foam:#f4fbfb;
	--sckett-gradient-deep:linear-gradient(160deg, #06232c 0%, #0e4a56 55%, #0e6e7c 100%);
	--sckett-gradient-surface:linear-gradient(180deg, #eafcfb 0%, #ffffff 60%);
}