@charset "utf-8";
/* =========================================================
   LEX BEAUTY CLINIC  base + header + mv
   Figma: デザインB (PC 1440) / デザインB_sp (SP 375)
   数値はデザイン実測値。--u（本文・MV）と --hu（ヘッダー／固定ボタン）で
   幅に比例スケールさせる。
     >=1200px … PCデザイン（1600pxで頭打ち）
     600-1199 … MVはPC比率で縮小、ヘッダーはSPデザインを1.3倍で表示
     <=599px  … SPデザイン（375基準・完全比例）
   ========================================================= */

:root{
	--cream:#fff6e8;
	--brown:#755b39;
	--brown-dark:#5e492e;   /* #755b39 + 黒20%（Figmaの2枚重ね） */
	--green:#38b665;
	--ink:#000;
	--mincho:"Zen Old Mincho",serif;
	--cormorant:"Cormorant Garamond","Zen Old Mincho",serif;
	--u:calc(min(100vw, 1600px) / 1440);
	--hu:var(--u);
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
	margin:0;background:var(--cream);color:var(--ink);
	font-family:var(--mincho);
	font-feature-settings:"palt";
	-webkit-font-smoothing:antialiased;
	overflow-x:hidden;
}
img,picture,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
h1,h2,h3,p{margin:0;}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;}

.u-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.skip{position:absolute;left:-9999px;top:0;z-index:999;background:#fff;padding:10px 16px;}
.skip:focus{left:0;}
.l-pad{padding:140px 5% 80px;}

/* =========================================================
   Header
   ========================================================= */
.hd{position:fixed;top:0;left:0;width:100%;z-index:50;color:#fff;transition:background-color .3s,color .3s,box-shadow .3s;}
.admin-bar .hd{top:32px;}
/* MVを抜けたら白地に切り替える（MV上の白文字のままだとクリーム背景で読めない） */
.hd.is-scrolled{background:#fff;color:var(--brown-dark);box-shadow:0 1px 0 rgba(0,0,0,.08);}
.hd.is-scrolled .hd__veil{opacity:0;}
.hd__veil{transition:opacity .3s;}
/* Figma Rectangle 40：白→#cdcdcd→#545454 の乗算グラデ(opacity .5) を等価なα黒で再現 */
.hd__veil{
	position:absolute;top:0;left:0;width:100%;height:calc(366 * var(--u));
	background:linear-gradient(to bottom,rgba(0,0,0,.336) 0%,rgba(0,0,0,.098) 56.25%,rgba(0,0,0,0) 100%);
	pointer-events:none;
}
.hd__inner{
	position:relative;display:flex;align-items:flex-start;justify-content:space-between;
	max-width:1600px;margin-inline:auto;
	padding:calc(13 * var(--hu)) calc(39 * var(--hu)) 0 calc(19 * var(--hu));
}

/* logo（小さい文字はブラウザの最小フォントサイズ制限に掛かるため倍指定＋scale(.5)） */
.logo{display:flex;align-items:flex-start;gap:calc(6 * var(--hu));}
.logo__mark{position:relative;flex:none;width:calc(61 * var(--hu));height:calc(58 * var(--hu));margin:calc(8 * var(--hu)) 0 0 calc(8 * var(--hu));}
.logo__mark img{width:100%;height:100%;object-fit:cover;}
/* 白地に切り替わったら濃茶版を上にかぶせる（白ロゴは白背景で消えるため） */
.logo__mark-dark{position:absolute;inset:0;opacity:0;transition:opacity .3s;}
.hd.is-scrolled .logo__mark-dark{opacity:1;}
.logo__txt{position:relative;width:calc(212 * var(--hu));height:calc(52 * var(--hu));margin-top:calc(11 * var(--hu));}
.logo__name,.logo__sub{position:absolute;left:0;font-weight:500;white-space:nowrap;transform:scale(.5);transform-origin:left top;}
.logo__name{top:0;font-size:calc(40 * var(--hu));line-height:calc(60 * var(--hu));}
.logo__sub{top:calc(22 * var(--hu));font-size:calc(28 * var(--hu));line-height:calc(60 * var(--hu));}

.hd__right{display:flex;align-items:flex-start;}

/* global nav */
.gnav__list{display:flex;gap:calc(22 * var(--hu));margin-top:calc(26 * var(--hu));}
.gnav__list a{
	display:block;font-size:calc(14 * var(--hu));line-height:calc(20.272 * var(--hu));
	white-space:nowrap;transition:opacity .25s;
}
.gnav__list a:hover{opacity:.65;}

/* tel */
.hd__contact{display:flex;flex-direction:column;align-items:flex-end;margin:calc(12 * var(--hu)) 0 0 calc(31 * var(--hu));}
.hd__tel{display:flex;align-items:flex-start;gap:calc(5 * var(--hu));}
.ico-tel{flex:none;width:calc(19 * var(--hu));height:calc(19 * var(--hu));fill:currentColor;margin-top:calc(5 * var(--hu));}
.hd__telno{font-size:calc(20 * var(--hu));line-height:calc(28.96 * var(--hu));letter-spacing:calc(3.2 * var(--hu));white-space:nowrap;}
.hd__hours{display:flex;align-items:center;gap:calc(10 * var(--hu));font-size:calc(13 * var(--hu));line-height:calc(18.824 * var(--hu));white-space:nowrap;}
.hd__hours i{display:block;width:1px;height:calc(14 * var(--hu));background:currentColor;opacity:.7;}

/* hamburger（PCでは非表示） */
.hbg{display:none;flex:none;width:calc(32 * var(--hu));height:calc(32 * var(--hu));border-radius:50%;background:#fff;align-items:center;justify-content:center;}
.hbg__bars{display:block;width:calc(12 * var(--hu));height:calc(5 * var(--hu));position:relative;}
.hbg__bars i{position:absolute;left:0;width:100%;height:1px;background:#222;transition:transform .3s,background-color .3s;}
.hbg{transition:background-color .3s;}
.hd.is-scrolled .hbg{background:var(--brown-dark);}
.hd.is-scrolled .hbg__bars i{background:#fff;}
.hbg__bars i:nth-child(1){top:0;}
.hbg__bars i:nth-child(2){top:calc(5 * var(--hu));}
.hbg__bars i:nth-child(3){display:none;}
.hbg[aria-expanded="true"] .hbg__bars i:nth-child(1){transform:translateY(calc(2.5 * var(--hu))) rotate(28deg);}
.hbg[aria-expanded="true"] .hbg__bars i:nth-child(2){transform:translateY(calc(-2.5 * var(--hu))) rotate(-28deg);}

/* =========================================================
   Drawer（Figma未設計のため独自）
   ========================================================= */
.drawer{
	position:fixed;inset:0;z-index:45;background:var(--brown);color:#fff;
	padding:calc(90 * var(--hu)) 5% 90px;
	overflow-x:hidden;overflow-y:auto;
	opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;
}
.drawer[hidden]{display:block;}
body.is-drawer{overflow:hidden;}
body.is-drawer .drawer{opacity:1;visibility:visible;}
body.is-drawer .hd__veil{opacity:0;}
.drawer__list{display:flex;flex-direction:column;gap:1.3em;font-size:16px;padding-top:20px;}
.drawer__list a{display:block;border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:.7em;transition:opacity .25s;}
.drawer__list a:hover{opacity:.7;}
.drawer__foot{margin-top:44px;text-align:center;}
.drawer__tel{font-size:24px;letter-spacing:.1em;}
.drawer__hours{font-size:13px;margin-top:6px;opacity:.85;}

/* =========================================================
   右固定ボタン（PC・タブレット）
   ========================================================= */
.side{position:fixed;right:0;top:calc(340 * var(--hu));z-index:60;display:flex;flex-direction:column;gap:calc(8 * var(--hu));}
.side__btn{
	display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
	width:calc(46 * var(--hu));padding:calc(20 * var(--hu)) 0;gap:calc(10 * var(--hu));
	color:#fff;transition:opacity .25s;
}
.side__btn:hover{opacity:.85;}
.side__btn--web{background:var(--brown-dark);}
.side__btn--line{background:var(--green);}
.side__txt{
	writing-mode:vertical-rl;text-orientation:upright;
	font-size:calc(14 * var(--hu));line-height:1;letter-spacing:calc(3 * var(--hu));
}
.ico-arw{flex:none;width:calc(12 * var(--hu));height:calc(9 * var(--hu));fill:#fff;}

/* SP下部固定バー（PCでは非表示） */
.fixbar{display:none;position:fixed;left:0;bottom:0;width:100%;z-index:60;}
.fixbar__btn{
	flex:1 1 50%;display:flex;align-items:center;justify-content:center;gap:calc(7.3 * var(--hu));
	height:calc(42.3 * var(--hu));color:#fff;font-size:calc(14 * var(--hu));line-height:1;
}
.fixbar__btn--web{background:var(--brown);}
.fixbar__btn--line{background:var(--green);}
.fixbar .ico-arw{width:calc(9 * var(--hu));height:calc(6.8 * var(--hu));}

/* =========================================================
   MV
   ========================================================= */
/* CLINIC は左右に振り切るデザインのため横だけクリップ（縦のはみ出しは残す） */
/* MV＝ちょうど1画面。1行目「LEX BEAUTY」の下端が画面下端に接し、CLINIC は下へはみ出す。
   svh はアドレスバーの伸縮でMVの高さが跳ねないようにするため（非対応ブラウザは vh にフォールバック）。 */
.mv{position:relative;width:100%;height:100vh;height:100svh;overflow-x:clip;}
.admin-bar .mv{height:calc(100vh - 32px);height:calc(100svh - 32px);}
.mv__bg{position:absolute;inset:0;overflow:hidden;}
.mv__slide{position:absolute;inset:0;opacity:0;transition:opacity .9s ease;}
.mv__slide.is-active{opacity:1;}
.mv__bg picture{display:block;height:100%;}
.mv__bg img{width:100%;height:100%;object-fit:cover;object-position:center top;}
@media (prefers-reduced-motion:reduce){.mv__slide{transition:none;}}
.mv__body{position:absolute;z-index:2;left:calc(112 * var(--u));top:calc(153 * var(--u));color:#fff;}
.mv__catch{font-size:calc(60 * var(--u));line-height:calc(86.88 * var(--u));font-weight:400;}
.mv__lead{font-size:calc(18 * var(--u));line-height:calc(37 * var(--u));font-weight:400;margin-top:calc(13 * var(--u));}
.mv__logo{
	position:absolute;z-index:2;left:calc(-20 * var(--u));top:auto;
	/* 1行目「LEX BEAUTY」の“文字の下端”をMV下端にぴったり接地させる。
	   内訳（font-size を 1em としたときの比）＝ 行の高さ 0.9897em ＋ ベースライン下の余白 0.1667em。
	   em 基準なので PC/SP どちらの文字サイズでも同じ位置関係になる。 */
	bottom:-1.1564em;
	width:calc(1460 * var(--u));
	color:#fff;font-family:var(--cormorant);font-weight:300;
	font-size:calc(239.97 * var(--u));line-height:calc(237.5 * var(--u));letter-spacing:calc(12 * var(--u));
	white-space:nowrap;
}

/* =========================================================
   〜1199px：MVはPC比率で縮小、ヘッダーはSPデザイン（1.3倍）
   ========================================================= */
@media (max-width:1199px){
	:root{--u:calc(100vw / 1440);--hu:1.3px; /* 単位付きでないと calc(N * var(--hu)) が無効になる */}

	.hd__inner{padding:calc(9 * var(--hu)) calc(9 * var(--hu)) 0 calc(5 * var(--hu));}
	.hd__veil{height:calc(248 * var(--u));}

	.logo{gap:calc(3 * var(--hu));}
	.logo__mark{width:calc(36 * var(--hu));height:calc(34 * var(--hu));margin:calc(5 * var(--hu)) 0 0 calc(5 * var(--hu));}
	.logo__txt{width:calc(125 * var(--hu));height:calc(31 * var(--hu));margin-top:calc(6 * var(--hu));}
	.logo__name{top:0;font-size:calc(23.554 * var(--hu));line-height:calc(35.332 * var(--hu));}
	.logo__sub{top:calc(13 * var(--hu));font-size:calc(16.488 * var(--hu));line-height:calc(35.332 * var(--hu));}

	.gnav{display:none;}
	.hd__contact{margin:calc(4 * var(--hu)) 0 0 0;}
	.hd__tel{gap:calc(3.5 * var(--hu));}
	.ico-tel{width:calc(13.4 * var(--hu));height:calc(13.4 * var(--hu));margin-top:calc(3.3 * var(--hu));}
	.hd__telno{font-size:calc(14.06 * var(--hu));line-height:calc(20.363 * var(--hu));letter-spacing:calc(2.25 * var(--hu));}
	.hd__hours{gap:calc(7 * var(--hu));font-size:calc(9.14 * var(--hu));line-height:calc(13.236 * var(--hu));}
	.hd__hours i{height:calc(9.8 * var(--hu));}

	.hbg{display:flex;margin:calc(5 * var(--hu)) 0 0 calc(11 * var(--hu));}
	.hbg__bars{width:calc(12 * var(--hu));height:calc(5 * var(--hu));}

	.side{top:calc(200 * var(--hu));}
}

/* =========================================================
   〜599px：SPデザイン（375基準・完全比例）
   ========================================================= */
@media (max-width:599px){
	:root{--u:calc(100vw / 375);--hu:var(--u);}

	.side{display:none;}
	.fixbar{display:flex;}

	/* SPは下端に固定バー（WEB予約/LINE）が居座るので、その分だけMVを短くする。
	   こうしないと「LEX BEAUTY」がバーの裏に隠れる。 */
	.mv{height:calc(100vh - 42.3 * var(--hu));height:calc(100svh - 42.3 * var(--hu));}
	.admin-bar .mv{height:calc(100vh - 42.3 * var(--hu) - 32px);height:calc(100svh - 42.3 * var(--hu) - 32px);}
	.mv__body{left:5%;top:calc(325 * var(--u));}
	.mv__catch{font-size:calc(40.978 * var(--u));line-height:calc(59.336 * var(--u));}
	.mv__lead{font-size:calc(14 * var(--u));line-height:calc(25.27 * var(--u));margin-top:calc(10 * var(--u));}
	.mv__logo{
		left:calc(-4 * var(--u));top:auto;width:calc(384 * var(--u));
		font-size:calc(63.115 * var(--u));line-height:calc(62.465 * var(--u));letter-spacing:calc(3.156 * var(--u));
	}
	.drawer{padding:calc(70 * var(--u)) 5% 80px;}
}