@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/
    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* ==========================================================
   MV下グロナビ カスタマイズ（SWELL）
   ========================================================== */

/* --- 0. カラー変数 ---------------------------------------- */
:root{
	--cta-navy: #14235c;             /* ロゴ・見出しの濃紺。要調整 */
	--cta-navy-border: rgba(20,35,92,.4);
	--cta-navy-border-fix: rgba(20,35,92,.35);
}

/* --- 1. 移動前のチラつき防止 ------------------------------ */
.home #header #gnav{ visibility:hidden; }
.home .l-gnavUnder #gnav{ visibility:visible; }

/* --- 2. ヘッダーのレイアウト ------------------------------ */
.home .l-header__inner{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:2em;
	padding-top:20px;
}
.home .l-header__logo{ flex:0 0 auto; }
.home .l-header .w-header,
.home .l-fixHeader .w-header{
	flex:0 0 auto;
	width:auto;
	max-width:none;
}

/* --- 3. MV下のメニュー帯 ---------------------------------- */
.l-gnavUnder{
	position:relative;
	z-index:5;
	background:#fff;
	box-shadow:0 2px 8px rgba(0,0,0,.05);
}
.l-gnavUnder #gnav{
	max-width:1300px;
	margin:0 auto;
}
.l-gnavUnder .c-gnav{ justify-content:center; }
.l-gnavUnder .c-gnav > li > a{
	flex-direction:column;
	padding:1.4em 2.4em;
	color:#333;
	line-height:1.5;
}
.l-gnavUnder .c-gnav .ttl{
	font-size:1.05em;
	letter-spacing:.06em;
}
.l-gnavUnder .c-gnav .desc{
	font-size:.72em;
	color:#666;
	margin-top:.5em;
}

/* --- 4. 区切り線（短め・薄め） ----------------------------- */
.l-gnavUnder .c-gnav > li{
	position:relative;
	border:none;
}
.l-gnavUnder .c-gnav > li::before,
.l-gnavUnder .c-gnav > li:last-child::after{
	content:'';
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	width:1px;
	height:45%;          /* 線の長さ */
	background:#e8e8e8;  /* 線の色 */
}
.l-gnavUnder .c-gnav > li::before{ left:0; }
.l-gnavUnder .c-gnav > li:last-child::after{ right:0; }

/* --- 5. ヘッダーCTA（TEL・WEB予約） ----------------------- */
.header-cta{
	display:flex;
	align-items:stretch;
	gap:12px;
}
.header-cta__tel,
.header-cta__btn{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	padding:.7em 1.5em;
	line-height:1.45;
	text-decoration:none;
	white-space:nowrap;
	transition:opacity .3s;
}

/* 既定＝濃色。下層ページの白背景ヘッダー用 */
.header-cta__tel{
	border:1px solid var(--cta-navy-border);
	color:var(--cta-navy);
}

/* トップのMV上ヘッダーのみ白抜き */
.home .l-header .header-cta__tel{
	border-color:rgba(255,255,255,.85);
	color:#fff;
}

.header-cta__btn{
	background:rgba(90,90,95,.8);
	color:#fff;
}
.header-cta__sub{ font-size:.72em; }
.header-cta__num{ font-size:1.3em; letter-spacing:.02em; }
.header-cta__label{ font-size:1.1em; }
.header-cta a:hover{ opacity:.75; }

/* --- 6. 追従ヘッダー内のCTA ------------------------------- */
.l-fixHeader .header-cta{ padding:8px 0; }
.l-fixHeader .header-cta__tel{
	border-color:var(--cta-navy-border-fix);
	color:var(--cta-navy);
}
.l-fixHeader .header-cta__tel .header-cta__sub,
.l-fixHeader .header-cta__tel .header-cta__num{
	color:var(--cta-navy);
}

/* --- 7. 追従ヘッダーの出現タイミング ---------------------- */
#fix_header{ transition:opacity .3s, visibility .3s; }
body.is-gnavUnderVisible #fix_header{
	opacity:0 !important;
	visibility:hidden !important;
	pointer-events:none !important;
}

/* --- 8. キービジュアルの見出し下線 ------------------------ */
.mv-catch{
	display:inline-block;
	position:relative;
	padding-bottom:.6em;
}
.mv-catch::after{
	content:'';
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
	height:1.5px;
	background:rgba(255,255,255,.65);
}

/* --- 10. Instagram追従アイコン ---------------------------- */
.sns-float{
	--ico:56px;      /* アイコンのサイズ */
	--x:36px;        /* 右からの距離 */
	--y:110px;       /* 下からの距離 */

	position:fixed;
	right:var(--x);
	bottom:var(--y);
	z-index:99;
	display:block;
	line-height:0;
	border-radius:14px;
	overflow:hidden;
	box-shadow:0 4px 14px rgba(0,0,0,.18);
	transition:transform .25s, box-shadow .25s;
}
.sns-float img{
	display:block;
	width:var(--ico);
	height:var(--ico);
	object-fit:contain;
}

.sns-float:hover{
	transform:translateY(-3px);
	box-shadow:0 8px 20px rgba(0,0,0,.24);
}
.sns-float:focus-visible{
	outline:2px solid var(--cta-navy);
	outline-offset:3px;
}

/* スマホ */
@media (max-width:600px){
	.sns-float{
--ico: 44px;
    --x: 18px;
    --y: 88px;
	}
	.sns-float{ border-radius:11px; }
}

@media (prefers-reduced-motion:reduce){
	.sns-float{ transition:none; }
	.sns-float:hover{ transform:none; }
}