@charset "UTF-8";
	
/*
Theme Name: R YACHT ティザーサイト
Author: Rヨット株式会社
Author URI: https://r-yacht.jp/
Description: 
Version: 2025-11-27

*/

/*-----------------------------------------------------------
	
	
	style.css


-----------------------------------------------------------*/



/*==========================================================
   Web Fonts
==========================================================*/

/* Fonts
 * ABC Arizona Flare © Dinamo — Web License (self-hosted, WOFF2/WOFF)
 * Licensed to: R Yacht Co., Ltd.  Domain: r-yacht.jp
 * EULA ref: Dinamo EULA v2.39 (kept internally)
 */
 
/* Thin */
@font-face{
	font-family: 'ABC Arizona Flare';
	src:url('assets/fonts/arizona-flare/ABCArizonaFlare-Thin.woff2') format('woff2'),
		url('assets/fonts/arizona-flare/ABCArizonaFlare-Thin.woff') format('woff');
	font-weight: 200;
	font-style: normal;
	font-display: swap;
	unicode-range:U+0020-007E, U+00A0-00FF, U+2010-2015, U+2018-201F, U+2032-2033;
}
 
/* Light */
@font-face{
	font-family: 'ABC Arizona Flare';
	src:url('assets/fonts/arizona-flare/ABCArizonaFlare-Light.woff2') format('woff2'),
		url('assets/fonts/arizona-flare/ABCArizonaFlare-Light.woff') format('woff');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
	
	/* ── ここがポイント：英数・記号だけをカバー ── */
	unicode-range:
	U+0020-007E,            /* Basic Latin: 英数・記号 */
	U+00A0-00FF,            /* Latin-1 Supplement（必要なら） */
	U+2010-2015,            /* ダッシュ類 */
	U+2018-201F,            /* ‘ ’ “ ” など */
	U+2032-2033;            /* ′ ″ */
}

/* Regular */
@font-face{
	font-family: 'ABC Arizona Flare';
	src:url('assets/fonts/arizona-flare/ABCArizonaFlare-Regular.woff2') format('woff2'),
		url('assets/fonts/arizona-flare/ABCArizonaFlare-Regular.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range:U+0020-007E, U+00A0-00FF, U+2010-2015, U+2018-201F, U+2032-2033;
}

/* Medium */
@font-face{
	font-family: 'ABC Arizona Flare';
	src:
		url('assets/fonts/arizona-flare/ABCArizonaFlare-Medium.woff2') format('woff2'),
		url('assets/fonts/arizona-flare/ABCArizonaFlare-Medium.woff') format('woff');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
	unicode-range:U+0020-007E, U+00A0-00FF, U+2010-2015, U+2018-201F, U+2032-2033;
}



/*==========================================================
   共通：Arizonaフォント対応
==========================================================*/

.arizona__15__16__reg {
	font-size: 1.5rem;
	font-family: 'ABC Arizona Flare';
	font-weight: 400;
}

.arizona__15__16__lt {
	font-size: 1.5rem;
	font-family: 'ABC Arizona Flare';
	font-weight: 300;
}

.arizona__14__15__lt {
	font-size: 1.4rem;
	font-family: 'ABC Arizona Flare';
	font-weight: 300;
}

.arizona__13__16__lt {
	font-size: 1.3rem;
	font-family: 'ABC Arizona Flare';
	font-weight: 300;
}

.arizona__13__lt {
	font-size: 1.3rem;
	font-family: 'ABC Arizona Flare';
	font-weight: 300;
}

@media only screen and (min-width: 768px) {
	
	.arizona__15__16__reg,
	.arizona__15__16__lt {
		font-size: 1.6rem;
	}
	
	.arizona__14__15__lt {
		font-size: 1.5rem;
	}
	
	.arizona__13__16__lt {
		font-size: 1.6rem;
	}
	
}


/*==========================================================
   Base / Reset
==========================================================*/

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* hidden を確実に非表示にする（ブラウザ差異対策） */
[hidden] { display: none !important; }

/* ルートのスクロールを戻す（もし残っていたら強制復帰） */

html {
  overflow-y: scroll !important;  /* スクロールは html が担当 */
  overflow-x: hidden;
  scroll-behavior: auto !important; /* ネイティブのスムースは無効 */
}

html.is-loading,
body.is-loading {
  height: 100%;
  overflow: hidden !important;
}

html.is-loading .bg-video__el {
	 opacity: 0;
}




body {
  overflow: visible !important; /* ← body の overflow:auto をやめる */
}



img { max-width: 100%; height: auto; display: block; }
ol, ul { list-style: none; margin: 0; padding: 0; }

/* ↓ 重複していたので1回だけ残す */
html {
  font-size: 62.5%;
  -webkit-text-size-adjust: 100%;
}

body {
	background: #031024;
	/* 全体の基本は 日本語 + 英数混在向けスタック */
	font: 300 1.3rem/1.8 "ABC Arizona Flare", "Noto Serif JP", serif;
	/* Arizona は unicode-range で英数のみ適用される */
	color: #fff;
}


@media only screen and (min-width: 768px) {
	
	body {
		font-size: 1.4rem;
	}
	
}


/* 見出しや英字多めの箇所でウエイトを切り替えたい場合 */
h1,h2,h3 { font-weight: 300; }        
.en--light  { font-weight: 300; } 
.en--regular  { font-weight: 400; } 
.en--medium { font-weight: 500; }



/* ブロック要素のデフォルト上下マージンをリセット */
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* ul / ol もついでに余白リセット（リスト前後のマージン） */
ul, ol {
  margin-block-start: 0;
  margin-block-end: 0;
}

br.pc {
	display: none;
}

@media only screen and (min-width: 768px) {
	
	br.pc {
		display: block;
	}
	
	br.sp {
		display: none;
	}

}


/* ==========================================================
   Global Base / Shared Section Backgrounds
========================================================== */

/* カラーバリエーション変数 */
:root {
  --bg-deep: #031024;
}

/* 背景：動画エリア以降は実背景、前半は透過 */
.home,
.concept,
.ship-name { background: transparent; }

.specialist,
.mailing-list,
.company { background: var(--bg-deep); }

/* 共通SVG設定 */
.home__logo-svg,
.ship-name__logo-svg,
.overlay-nav__logo-svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: currentColor;
}


/*==========================================================
   Reveal-in (共通)
==========================================================*/


.reveal {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 1.2s ease,
    transform 1.2s cubic-bezier(.22, 1, .36, 1);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

#concept .reveal,
#ship-name .reveal,
#specialist .reveal,
.mailing-list .reveal,
#company .reveal {
  transition: none; /* GSAP制御対象はCSS transition無効 */
}


/*==========================================================
   Header
==========================================================*/

.site-header {
	display: flex;
	width: 100%;
	height:36.58px;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 35px;
	left: 0;
	z-index: 100;
}

.site-title {
	margin: 0;
	color: #fff;
}

.site-title__logo-svg { 
	display:block; 
	width:40.52px; 
	height:36.58px;
}


@media only screen and (min-width: 768px) {
	
	.site-header {
		display: flex;
		width: 100%;
		height: 43.603px; 
		top: 30px;
	}
		
	.site-title__logo-svg { 
		width:48.3px; 
		height:43.598px;
	}
	
}



/*下層ページ*/
.site-title.is-gray .site-title__logo-svg {
	color: #B0B9BF;
}

/*==========================================================
   言語切替 
==========================================================*/

.lang-switch {
	display: none;
}

@media only screen and (min-width: 768px) {
	
	.lang-switch {
		display: block;
		position: absolute;
		top: 0;
		right: 103px;
	}
	
}

.lang-switch__list { 
	display: flex;
	gap: .6em; 
	line-height: 1;
}

.lang-switch__link {
  font-size: 1.4rem;
  font-weight: 400;
  color: #fff;
  opacity: 0.5;
  text-decoration: none!important;
  letter-spacing: .1em;
  transition: color 0.6s ease;
}

.lang-switch__link:hover,
.lang-switch__link.selected {
	opacity: 1;
	transition: opacity .3s ease-in-out;
}


@media only screen and (min-width: 768px) {
	
	.lang-switch__link {
	  font-size: 1.3rem;
	  color: #fff;
	  opacity: 0.5;
	  text-decoration: none!important;
	  letter-spacing: .04em;
	  transition: color 0.6s ease;
	}

	
}

/*==========================================================
   ハンバーガーメニュー
==========================================================*/

.burger {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 9px;
	background: none;
	font: 500 1.3rem/1 'ABC Arizona Flare';
	width: 44px;
	height: 40px;
	color: #fff;
	border: none;
	cursor: pointer;
	position: fixed;
	top: 33px;
	right: 6.41vw;
	z-index: 10020;
	transition: color 0.6s ease;
}

@media only screen and (min-width: 768px) {
	
	.burger {
		width: 48px;
		top: 30px;
		right: 30px;
	}
	
}

.burger:hover {
	opacity: 0.8;
}



/* 初期は非表示（JSでフェードイン） */
/* ローディング中はトランジションを無効化 */
html.is-loading .burger {
	transition: none !important;
	opacity: 0;
	pointer-events: none;
	transform: translateY(-10px);
}

/* ローディング中はhoverで透明にならない */
html.is-loading .burger:hover {
	opacity: 1 !important;
}

.burger.is-gray {
	color: #B0B9BF;
}


@media (max-width: 768px) {
	/* スマホのみFVで非表示 */
	body.home .burger {
		opacity: 0;
		pointer-events: none;
		transition: opacity .4s ease, transform .4s ease;
	}
	
	body.home .burger.is-burger-show {
		opacity: 1;
		pointer-events: auto;
		transform: none;
	}
	
}




/* テキスト部分 */
.burger__text {
	font-size: 1.3rem;
	font-weight: 400;
	letter-spacing: 0.1em;
	transition: opacity .4s ease-in-out;
    position: relative;
    left: 0.5px;
}

/* SVGバー2本を縦方向に並べる */
.burger__icon {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	position: relative;
	height: 16px;
}

.burger__bar-svg {
	display: block;
	width: 43.12px;
	height: 3.87px;
	transition: transform 0.6s ease;
	position: absolute;
	color: currentColor;
}

/* 上下バー配置 */
.burger__bar-svg:first-child { top: 6px; }
.burger__bar-svg:last-child { bottom: 0; }

/* 開いたとき（グレー＆クロス） */
.burger.is-open .burger__bar-svg:first-child {
	color: #B0B9BF;
	transform: translateY(6px);
}

.burger.is-open .burger__bar-svg:last-child {
	color: #B0B9BF;
	transform: none;
}

/* 開いたときの文字色 */
.burger.is-open .burger__text { 
  color: #B0B9BF;
}

/*==========================================================
   OVERLAY ナビゲーション
==========================================================*/

/* オーバーレイ表示中はブラウザのスクロール連鎖も止める */
html.is-overlay-open,
body.is-overlay-open {
	overflow: hidden;
	overscroll-behavior: none; /* iOS用*/
}

.overlay-nav {
	background: #031024;
	position: fixed;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	will-change: opacity, visibility;
	transition: opacity .6s ease-in-out, visibility .6s ease-in-out;
	z-index: 10010;
	touch-action: none; /* オーバーレイ自身にもタッチ操作を伝搬させない（裏が動かない） */ 
}

.overlay-nav.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/* Overlay Logo（ナビ内ロゴ） */
.overlay-nav__logo {
    width: 40.52px;
    height: 36.58px;
	color:#B0B9BF;
	position: absolute;
	top: 35px;
	left: 50%;
	pointer-events: none;
	transform: translateX(-50%);
	z-index: 3;
}


@media only screen and (min-width: 768px) {
	
	/* Overlay Logo（ナビ内ロゴ） */
	.overlay-nav__logo {
		width: 48.3px;
		height: 43.603px; 
		color:#B0B9BF;
		position: absolute;
		top: 30px;
		left: 50%;
		pointer-events: none;
		transform: translateX(-50%);
		z-index: 3;
	}
	
}

.overlay-nav__logo-svg {
	display:block; 
	width:100%; 
	height:100%;
}



/* 下部中央ロゴ（FVと同じサイズ・位置） */
.overlay-nav__logo-bottom {
	width: 1433.04px;
	height: 37.7px;
	color: #B0B9BF;
	position: absolute;
	left: 50%;
	bottom: 35px;
	transform: translateX(-50%);
	z-index: 3;
	pointer-events: none;
	will-change: opacity, visibility;
}

.overlay-nav__logo-bottom svg {
	display: block;
	width: 1433.04px;
	height: 37.7px;
}

@media only screen and (min-width: 768px) {
	
	.overlay-nav__logo-bottom {
		width: 170.52px;
		height: 44.94px;
		bottom: 30px;
	}
	
	.overlay-nav__logo-bottom svg {
		width: 170.52px;
		height: 44.94px;
	}
	
}

/* 位置＆初期は非表示（ロゴと同様に） */
.overlay-nav .lang-switch {
	display: block;
	position: fixed;
	top: 95px;
	right: 5.7vw;
	z-index: 3;
}

@media only screen and (min-width: 768px) {
	
	.overlay-nav .lang-switch {
		position: absolute;
		top: 30px;
		right: 103px;
	}
	
}

.overlay-nav .lang-switch__link {
	color: #B0B9BF;
	opacity: 0.7;
	text-decoration: none;
	transition: opacity .3s ease;
}
.overlay-nav .lang-switch__link:hover,
.overlay-nav .lang-switch__link.selected {
	opacity: 1;
}

.overlay-nav__item {
	display: inline-block;
	font-size: 4.2rem;
	font-weight: 300;
	line-height: 1.38;
	letter-spacing: .1em;
	color: #B0B9BF;
}

.overlay-nav__list {
	width: 100%;
	max-width: 400px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%); /* 縦横中央 */
	text-align: center;
	pointer-events: none;
}

@media only screen and (min-width: 768px) {
	
	.overlay-nav__item {
		font-size: 5.5rem;
		line-height: 1.3;
	}
	
	.overlay-nav__list {
		max-width: none;
		top: 52%; /* 11月5日 アートレス指定 PCのみ52% */
	}
}


.overlay-nav__list,
.overlay-nav__logo,
.overlay-nav__logo-bottom,
.overlay-nav .lang-switch {
	opacity: 0;
	transition: opacity 0.5s ease;
	transition-delay: 0s; /* 通常時 */
}

.overlay-nav.is-open .overlay-nav__list,
.overlay-nav.is-open .overlay-nav__logo,
.overlay-nav.is-open .overlay-nav__logo-bottom,
.overlay-nav.is-open .lang-switch {
	opacity: 1;
	transition-delay: 0.15s; /* 開くときだけ少し遅らせる */
}

/* オーバーレイが閉じている間は非表示 */
.overlay-nav[hidden] .overlay-nav__logo,
.overlay-nav[hidden] .lang-switch {
	display: none;
}

.overlay-nav__link {
	font-weight: 300;
	color: #B0B9BF;
	pointer-events: auto;
	text-decoration: none;
	transition: opacity .3s ease, visibility .3s ease;
}


@media only screen and (min-width: 768px) {
	
	.overlay-nav__item.slash:after {
		content: '/';
		font-weight: 200;
		margin: 0 .4em 0 0.5em;
		margin: 0 11px 0 17px;
	}

}

.overlay-nav__item:last-child {
	display:block;
    position: relative;
    line-height: 1;
    top: 5px; 
}

.overlay-nav__item:last-child .overlay-nav__link {
	font-size: 1.3rem;
	letter-spacing: .1em;
}

@media only screen and (min-width: 768px) {
	
	.overlay-nav__item:last-child {
	    top: -10px; 
	}
	
	.overlay-nav__item:last-child .overlay-nav__link {
		font-size: 1.4rem;
	}
	
}

.overlay-nav__link:hover,
.overlay-nav__link:focus {
  text-decoration: none;
  outline: none;
}

.overlay-nav__link:hover {
	transition: opacity .3s ease, visibility .3s ease;
	opacity: 0.5;
}


/*==========================================================
   全体背景動画
==========================================================*/

.bg-video {
	background:#031024;
	position: fixed;
	inset: 0;
	z-index: -1;           /* 最背面 */
	pointer-events: none;  /* クリック貫通 */
}

.bg-video__el {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	transform: translateZ(0);
	will-change: transform;
}

/* HOMEは動画の上に内容だけを重ねる */
.home {
	position: relative;
	height: 100vh;
	overflow: hidden;
	z-index: 1;             /* 背景動画より前 */
}

@supports (height: 100dvh) {
	.home { 
		height: 100dvh;
	}
}



/* 背景ディム（濃さとブラーは CSS 変数で制御） */
.bg-dim{
  position: fixed;
  inset: 0;
  background: rgba(3,16,36, var(--dim, 0));
  backdrop-filter: blur(var(--blur, 0px));
  -webkit-backdrop-filter: blur(var(--blur, 0px));
  opacity: 1; /* ← ここは固定 */
  transition: none; /* or 短くしたいなら 0.15s 程度に */
  pointer-events: none;
  z-index: 0;
}


/* =============================
   Section 共通
============================= */

/* 念のため、コンテンツ側は前面に。 */
.main, section {
  position: relative;
  z-index: 1;
}

.section {
  padding: 10rem 0;
}

.section__inner {
  width: 87.18vw;
  margin-inline: auto;
}

@media only screen and (min-width: 768px) {
	
	.section__inner {
		width: 100%;
		min-width: 1024px;
		max-width: 1420px;
	}

}

.section__title {
  text-align: center;
  color: #fff;
}

/* =============================
   Utility
============================= */
a { color: #fff; text-decoration: none; }
a:hover { text-decoration: underline; }
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}


/*==========================================================
   Footer / Company
==========================================================*/

.company.section {
	color: #fff;
	text-align: center;
	padding: 120px 0 0;
}

/* SEFU LOGO*/
.company__sefu-logo {
	width: 100%;
	max-width: 326px;
	height: auto;
	color: #B0B9BF;
	margin: 0 auto 60px;
}

/* R YACHT LOGO*/
.company__logo {
  width: 143.86px;
  height: 23px;
  color: #B0B9BF;
  margin: 0 auto 18px;
}

@media only screen and (min-width: 768px) {
	
	.company.section {
	  color: #fff;
	  text-align: center;
	  padding: 120px 0 18px;
	}
	
	.company__sefu-logo {
		width: 430.53px;
		max-width: none;
		height: 113.46px;
		margin: 0 auto 80px;
	}
	
	.company__logo {
		width: 170.38px;
		height: 27.24px;
		margin: 0 auto 22px;
	}
	
}


.company__sefu-logo svg,
.company__logo svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* ADDRESS*/
.company__info p {
  font-size: 1.2rem;
  line-height: 1.83!important;
  letter-spacing: 0.05em;
  color: #B0B9BF;
}

/* E-Mail*/
.company__mail a {
  color: #B0B9BF;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.company__mail a:hover {
	opacity: 0.7;
}

/* LINK*/
.company__link {
	display: block;
	font-size: 1.2rem;
	line-height: 1;
	color: #B0B9BF;
	letter-spacing: 0.1em;
	transition: opacity 0.3s ease;
	margin: 28px 0 8px;
}

.company__link:hover {
	opacity: 0.7;
	text-decoration: none;
}


/*==========================================================
   Fixed Copyright（左端縦配置）
==========================================================*/

.fixed-copy {
    font-size: 1.2rem;
    line-height: 1.5;
    text-align: center;
    letter-spacing: 0.125em;
    color: #B0B9BF;
    padding-bottom: 20px;
    transition: color .5s ease;
    position: relative;
    z-index: 5;
}

@media only screen and (min-width: 768px) {
	
	.fixed-copy {
		font-size: 1rem;
		color: #fff;
		letter-spacing: 0.05em;
		padding: 0;
		position: fixed;
		left: 24px;
		top: 50%;
		transform: translateY(calc(-50% - 61px)) rotate(90deg);
		transform-origin: left center;
		z-index: 20000;
		white-space: nowrap;
		pointer-events: none;
	}
	
}

/* MENUオープン時と下層ページは常にグレー状態 */
.fixed-copy.is-gray,
.privacy-policy .fixed-copy {
  color: #B0B9BF!important;
}




/*==========================================================
   Opening Loader
==========================================================*/

.op {
	position: fixed;
	inset: 0;
	z-index: 99999;
	background: #031024;
	display: grid;
	place-items: center;
	opacity: 1;
	visibility: visible;
	overscroll-behavior: contain;
	touch-action: none;
}

.op__center {
	position: relative;
	width: min(70vw, 520px);
	height: auto;
}

.op__logo {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	opacity: 0;
 }

.op__logo svg {
	display:block;
	width: 100%;
	height: auto;
	color: #B0B9BF;
	fill: currentColor;
}

/* Opening Loader 内のロゴ色を固定 */
.op .op__logo svg { 
	color: #B0B9BF;
}

/* 念のため（テンプレの中で fill="currentColor" にしてある前提） */
.op .op__logo svg path { 
	fill: currentColor;
}

/* Opening Loader — サイズ変数 */
:root {
  --op-mark-w: 50.49px;  /* マークの横幅 */
  --op-typo-w: 233.1px;    /* タイポの横幅 */
}

html[lang^="en"] {
  /* 英語は横幅が長くなりがちなので少し小さめに */
  --op-typo-w: 274.02px;   /* ← まだ大きければ 200px まで下げてもOK */
}

@media only screen and (min-width: 768px) {
	
	:root {
		--op-mark-w: 58.57px;  /* マークの横幅 */
		--op-typo-w: 301.665px;    /* タイポの横幅 */
	}
	
	html[lang^="en"] {
		--op-typo-w: 372.67px; /* ← はみ出すようなら 270px など微調整 */
	}

}

/* 器：幅を “2つのロゴの大きい方” に固定して正中配置 */
.op__center{
  position: relative;
  /* ここを width:max-content から “明示幅” に変更 */
  width: min(80vw, max(var(--op-mark-w), var(--op-typo-w)));
  display: grid;
  place-items: center;       /* 念のため中央揃えを維持 */
}

html[lang^="en"] .op__center {
	width: 274.02px;
}

@media only screen and (min-width: 768px) {
	
	html[lang^="en"] .op__center {
		width: 372.67px;
	}
	
}

/* ロゴ2枚は重ねる（器の中で正確に中央に吸着） */
.op__logo{
  position: absolute;
  inset: 0;                  /* 器の内側全体に広げる */
  display: grid;
  place-items: center;
  opacity: 0;                /* GSAPで制御 */
}

/* それぞれのロゴの実サイズだけを設定（高さは比率維持）*/
.op__logo--mark svg {
	width: var(--op-mark-w);
	height: auto;
	display:block;
}

.op__logo--typo svg { 
	width: var(--op-typo-w);
	height:auto;
	overflow:visible;
}

html[lang^="ja"] .op__logo--typo {
	transform: translateY(-25px); 
}

html[lang^="en"] .op__logo--typo {
	transform: translateY(-28px);
}

@media only screen and (min-width: 768px) {
	
	html[lang^="ja"] .op__logo--typo {
		transform: translateY(-30px);
	}
  
  	html[lang^="en"] .op__logo--typo {
		transform: translateY(-35px);
	}
	
}



/*==========================================================
   Soft Enter / Exit
==========================================================*/

/* ページ遷移時の背景カラー（黒系#031024）を全体に統一 */
html, body {
  background-color: #031024; /* フェード時の下地 */
}

/* skip-op クラスが付いていたら OPローダーを完全に非表示 */
html.skip-op #op-loader,
html.skip-op .op {
  display: none !important;
}

/* まず非表示（ロード直後 or 退出準備） */
html.soft-enter body {
  opacity: 0;
}

/* ページが表示されるとき（フェードイン） */
html.soft-enter--in body {
  opacity: 1;
  transition: opacity 0.6s ease;
  background-color: #031024; /* 常に同じカラーで出現 */
}

/* ページを離れるとき（フェードアウト） */
html.soft-exit body {
  opacity: 0;
  transition: opacity 0.4s ease;
  background-color: #031024; /* 白ではなく深いネイビー */
  pointer-events: none;
}

/* page-fade を使わない純フェード用。html に soft-enter を先行で付与 ⇒ soft-enter--in でフェードイン */
html.soft-enter body { opacity: 0; }              /* 初期フレームで透明化、body の background そのまま活かす */
html.soft-enter.soft-enter--in body { transition: opacity .35s ease; opacity: 1; }