@charset "UTF-8";
:root {
	--font-shippori-mincho: "Shippori Mincho", serif;
	--font-castoro-titling: "Castoro Titling", serif;
	--font-noto-serif-jp: "Noto Serif JP", serif;
	--font-bodoni: "bodoni-std", serif;
	--font-main-text-small: clamp(14px, 0.8vw, 16px);
	--font-main-text-medium: clamp(16px, 1vw, 20px);
	--font-main-text-large: clamp(20px, 1.6vw, 35px);
	--font-promise-text-small: 1.1rem;
	--font-promise-text-large: 1.5rem;
	--font-button-text-medium: clamp(22px, 1.3vw, 26.98px);
	--header-height: 80px;
	--header-height-sp: 50px;
	--sec-title-font-size-l: 45px;
	--sec-title-font-size-ja: 30px;
}
html {
  scroll-behavior: smooth;
}
/* PC: 固定ヘッダー分ずらす */
[id] { scroll-margin-top: var(--header-height); }

/* SP: ヘッダー高さが違う場合 */
@media (max-width: 768px){
  [id] { scroll-margin-top: var(--header-height-sp); }
}

/* WP管理バーが出る時の補正（任意） */
/* body.admin-bar [id] { scroll-margin-top: calc(var(--header-height) + 32px); }
@media (max-width: 768px){
  body.admin-bar [id] { scroll-margin-top: calc(var(--header-height-sp) + 32px); }
} */

/* モーション配慮 */
@media (prefers-reduced-motion: reduce){
  html { scroll-behavior: auto; }
}


.l-header .l-header-nav li:has(> a[href*="/menu_category/menu-category04"]),
  .l-header .l-header-nav li:has(> a[href*="/menu_category/menu-category05"]),
  .l-header .l-header-nav li:has(> a[href*="/menu_category/%e3%82%a2%e3%83%bc%e3%83%88%e3%83%a1%e3%82%a4%e3%82%af"]),
  .l-header .l-header-nav li:has(> a[href*="/menu_category/アートメイク"]),
  /* 追加：眉/ヘアアートメイクの詳細ページ */
  .l-header .l-header-nav li:has(> a[href*="/menu/108"]),
  .l-header .l-header-nav li:has(> a[href*="/menu/3032"]) {
    display: none !important;
}

/* 共通: ヘッダーの通常状態は0.8 */
.header-wrapper {
  width: 100%;
  max-width: 100vw;
  visibility: visible;
  transform: translate(-50%, 0);
  -webkit-transform: translate3d(-50%, 0, 0);
  opacity: 0.8;
  transition: transform 1.5s ease-out, opacity 1.5s ease-out;
}

/* 共通: PCハンバーガーメニューOPEN時のみ1.0（SPは触らない） */
body.menu-open .header-wrapper {
  opacity: 1 !important;
  transition: opacity 0s linear;
}

/* TOPのアニメ完了後はここに落ちる想定 */
.header-wrapper.animate-in {
  opacity: 0.8; /* 統一 */
}
.header-inner {
	padding-top: 17px;
	width: 100%;
	display: flex;
	align-items: center;
	max-width: 1470px;
	margin-inline: auto;
}
@media screen and (max-width: 768px) {
    body.page-template-page-monitor202504 .header-wrapper {
        transform: translate(-50%, 0) !important;
        -webkit-transform: translate3d(-50%, 0, 0) !important;
        opacity: 0.8 !important;
        visibility: visible !important;
        transition: none !important; /* 即時でOKなら */
    }

    /* メニューOPEN中は即 1.0（モニターSP用） */
    body.page-template-page-monitor202504.menu-open .header-wrapper {
        opacity: 0.8 !important;
        transition: opacity 0s linear !important;
    }
}

/* =================
固定アイコン
=================== */
.fixed-icon {
	display: none;
	position: fixed;
	right: 0;
	bottom: 5%;
	transform: translateY(50%);
	z-index: 99999;
	max-width: 100%; 
	width: 100%;
}
.fixed-icon__label {
	color: #fff;
	font-weight: 600;
	font-size: max(10px, 3.5vw);
	font-family: "Hiragino Sans", "ヒラギノ角ゴシック", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", sans-serif;
}
.fixed-icon__label--line {
	font-size: max(9px, 3vw);
}
.reserve-btn {
	width: min(8.5vw, 169px);
	height: min(6.2vw, 124px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1%;
}
.fixed-icon-branch, 
.fixed-icon-line, 
.fixed-icon-web {
  display: block;
  width: 100%;
  height: 100%;
  padding-top: 5px;
}
.reserve-line {
	position: relative;
  background-image: linear-gradient(
    to right,
    #54E155 0%,
    #4EC91C 100%
  );
}
.fixed-icon-line {
	width: 40%;
	aspect-ratio: 33.38 / 31.93;
}
.icon-bubble {
	position: absolute;
	top: -13%;
	width: 88%;
}

.reserve-web {
	background-image: linear-gradient(
		to right,
		#FFA1A3 0%,
		#FC7578 100%
	);
}
.fixed-icon-web {
	width: 28%;
	aspect-ratio: 19.78 / 29.94;
}
.reserve-shinjuku {
	background-image: linear-gradient(
	to right,
	#7CCDEB 0%,
	#5DB7D8 100%
);
}
.reserve-ginza {
	background-image: linear-gradient(
	to right,
	#AAB0EE 0%,
	#7E86D9 100%
);
}
.fixed-icon-branch {
	width: 24%;
	aspect-ratio: 17.93 / 30;
}
@media (min-width: 769px) {
  .fixed-icon {
    display: none !important;   /* JS で display を上書きしても隠れるように */
  }
}
/* ▼ 新規：固定フローティング共通 */
.fixed-floating{
  display:none;               /* JSのfadeIn制御 */
  position:fixed;
  z-index:1001;               /* .fixed-icon(999)より上 */
  max-width:430px;
  width: 100%;
  aspect-ratio: 430 / 141.09;
  right:5%;
  bottom:5%;
  line-height:0;              /* 画像の隙間対策 */
}

/* 閉じるボタン */
.fixed-floating__close{
  position:absolute;
  top:-8px;
  left:-8px;
  width:19px; height:19px;
  border:0; border-radius:50%;
  background:#fff; color:#545454;
  font-size:12px; cursor:pointer;
  padding-bottom: 2px;
}

/* 768px以下：中央寄せ＋.fixed-iconの上に配置 */
@media (max-width:768px){
  .fixed-floating{
	display: none;
    /* left:50%;
    right:auto;
    transform:translateX(-50%);
    bottom: 15%; */
  }
    .fixed-icon {
		display: flex;
		flex-direction: row;
		bottom: 0;
		transform: translateY(0);
	}
  	.reserve-btn {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 2px;
		width: calc(100% / 4);
		height: auto;
	}
	.header-wrapper{
    position: fixed;      /* 追加 */
    top: 0;               /* 追加 */
    left: 0;              /* 追加 */
    width: 100%;          /* 追加 */
    transform: none !important;          /* 追加 */
    -webkit-transform: none !important;  /* 追加 */
    z-index: 1002;        /* 追加：SPナビより上 */
    height: var(--header-height-sp);     /* 既存変数を利用 */
  }
  /* コンテンツ潜り込み防止 */
  body{ padding-top: var(--header-height-sp); } /* 追加 */
}
.icon-bubble {
	top: -45.588%;
	left: 50%;
	transform: translate(-50%, 0);
	animation: upDown 2s infinite;
}
/* 450px以下：幅92%で中央 */
/* @media (max-width:450px){
  .fixed-floating{
	display: none;
  }
}
.fixed-floating img{ width:100%; height:auto; display:block; } */

/* ==============
pcヘッダー
=================*/
/* ========
    PCナビゲーション
======== */
.pc-nav {
	font-family: var(--font-shippori-mincho);
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: end;
	height: 100%;
	padding-right: 20px;
}

.pc-nav>ul {
	display: flex;
	width: 100%;
	max-width: 900px;
	justify-content: flex-end;
	align-items: center;
	height: 100%;
	display: flex;
	align-items: center;
	height: 100%;
	gap: 3.888%;
	padding: 0 3.888%;
}

.pc-nav>ul>li {
	position: relative;
}

.pc-nav>ul>li {
	position: relative;
}

.pc-nav>ul>li>a {
	text-decoration: none;
	color: #2a2825;
	font-size: min(18px, 1vw, 20px);
	display: flex;
	align-items: center;
	height: 100%;
	padding: 0;
}

.pc-nav>ul>li>a:hover {
	opacity: 0.5;
}

.nav_line-item {
	position: absolute;
	width: 64.912%;
	top: -22.717%;
	left: 50%;
	transform: translateX(-50%);
}

.pc-nav>ul>li>img {
	width: 100%;
	height: auto;
	object-fit: contain;
}

.header-branch {
	aspect-ratio: 227 / 46;
	max-width: 227px;
	width: 100%;
}

.header-line,
.header-web {
	aspect-ratio: 171 / 46;
	max-width: 171px;
	width: 100%;
}

/* レスポンシブなスクロールマージン */
#ginza-branch,
#shinjuku-branch {
	scroll-margin-top: 50px;
}
.pc-nav-close {
	position: absolute;
	width: 19.09px;
	height: 19.09px;
	top: 30.45px;
	right: 36.45px;
	cursor: pointer;
}

@media screen and (max-width: 768px) {
		.pc-nav {
		display: none;
	}
		.pc-only {
		display: none;
	}

	.pc-only-inline {
		display: none;
	}

	.sp-only {
		display: block;
	}

	.mega-menu {
		display: none !important;
	}

	.header-wrapper {
		height: var(--header-height-sp);
	}

	.header-inner {
		width: 100%;
		height: var(--header-height-sp);
		background-color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 1001;
		padding-top: 0;
	}
}

/* ================
バーガーメニュー
==============*/
/* ========
    ハンバーガーメニュー PC
======== */
.hamburger-pc {
	display: block;
	cursor: pointer;
	width: 30px;
	height: 20px;
	position: relative;
	z-index: 1001;
}

.hamburger-pc span {
	display: block;
	height: 2px;
	width: 100%;
	background-color: #333;
	position: absolute;
	transition: all 0.3s;
}

.hamburger-pc span:nth-child(1) {
	top: 0;
}

.hamburger-pc span:nth-child(2) {
	top: 9px;
}

.hamburger-pc span:nth-child(3) {
	top: 18px;
}

/* ハンバーガーメニューがアクティブ時 */
.hamburger-pc.active span:nth-child(1) {
	transform: translateY(9px) rotate(45deg);
}

.hamburger-pc.active span:nth-child(2) {
	opacity: 0;
}

.hamburger-pc.active span:nth-child(3) {
	transform: translateY(-9px) rotate(-45deg);
}

.pc-hamburger-menu {
	display: none;
	position: fixed;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	max-width: 1470px;
	width: 100%;
	height: 100vh;
	background-color: #fff;
	z-index: 100000;
	opacity: 1;
}

.pc-hamburger-menu.active {
	display: flex;
}

.pc-hamburger-menu__left {
	min-width: 600px;
	/* width: 40.816%; */
	width: 600px;
	height: auto;
}

.pc-hamburger-menu__left img {
	width: 100%;
	height: auto;
}

.pc-hamburger-menu__right {
	position: relative;
	width: 59.184%;
	height: auto;
	padding: 105px 0 80.46px;
}

@media screen and (max-width: 1200px) {
	.pc-hamburger-menu__left {
		display: none;
	}

	.pc-hamburger-menu__right {
		width: 100%;
	}
}

@media screen and (max-width: 600px) {
	.pc-hamburger-menu {
		display: none;
	}

	.pc-hamburger-menu.active {
		display: none;
	}
}

.pc-hamburger-menu__contents {
	max-width: 484px;
	width: 100%;
	height: auto;
	margin: 0 auto;
}

.pc-hamburger-menu__contents__logo {
	/* display: inline-block; */
	width: 175px;
	margin: 0 auto 40px;
}

.pc-hamburger-menu__contents__menu {
	display: flex;
	justify-content: space-between;
	width: 100%;
	margin-bottom: 50px;
	font-family: var(--font-shippori-mincho);
}

.pc-hamburger-menu__contents__menu ul li a {
	color: #2a2825;
	font-size: 16px;
	font-weight: 400;
	margin-left: 20px;
}

.pc-hamburger-menu__contents__menu ul li .accent {
	color: #2a2825;
	font-size: 20px;
	font-weight: 600;
	margin-left: 0;
}

.pc-hamburger-menu__contents__menu01 li {
	margin-bottom: 14px;
}

.pc-hamburger-menu__contents__menu02 li {
	margin-bottom: 40px;
}

.pc-hamburger-menu__contents__menu03 li {
	margin-bottom: 15px;
}

.pc-hamburger-menu__contents__menu03 li:nth-child(4) {
	margin-bottom: 40px;
}

.pc-hamburger-menu__contents__btns1 {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	margin-bottom: 33px;
	gap: 3%;
}

.pc-hamburger-menu__contents__btns1 a {
	position: relative;
}

.hbg_btn01 {
	height: 48px;
	aspect-ratio: 223/48;
}

.hbg_btn02 {
	height: 48px;
	aspect-ratio: 22p/49;
}

.hamburger_line-item {
	position: absolute;
	/* width: 64.912%; */
	width: 51.2%;
	/* top: -22.717%; */
	top: -22.448%;
	left: 50%;
	transform: translateX(-50%);
}

.pc-hamburger-menu__contents__btns2 {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	margin-bottom: 40px;
	gap: 3%;
}

.hbg_btn03 {
	height: 48px;
	aspect-ratio: 227/48;
}

.hbg_btn04 {
	height: 48px;
	aspect-ratio: 227/48;
}

.pc-hamburger-menu__contents__sns {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	margin-bottom: 24px;
	gap: 10.33%;
}

.pc-hamburger-menu__contents__sns img {
	width: 29.7px;
	height: 29.7px;
}

.pc-hamburger-menu__contents__copyright {
	/* display: inline-block; */
	max-width: 322px;
	width: 100%;
	margin: 0 auto;
	font-size: 16px;
	color: #bda777;
	font-family: var(--font-bodoni);
}


/* ========
    ハンバーガーメニュー SP
======== */
.hamburger {
	display: none;
	cursor: pointer;
	width: 30px;
	height: 20px;
	position: relative;
	z-index: 1001;
}

.hamburger span {
	display: block;
	height: 2px;
	width: 100%;
	background-color: #333;
	position: absolute;
	transition: all 0.3s;
}

.hamburger span:nth-child(1) {
	top: 0;
}

.hamburger span:nth-child(2) {
	top: 9px;
}

.hamburger span:nth-child(3) {
	top: 18px;
}

/* ハンバーガーメニューがアクティブ時 */
.hamburger.active span:nth-child(1) {
	transform: translateY(9px) rotate(45deg);
}

.hamburger.active span:nth-child(2) {
	opacity: 0;
}

.hamburger.active span:nth-child(3) {
	transform: translateY(-9px) rotate(-45deg);
}

header.menu-open {
	background-color: #fff;
	top: 0;
	left: 0;
	width: 100%;
	height: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1001;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* SPナビゲーション */
.sp-nav {
	display: none;
	position: fixed;
	top: 50px;
	right: 0;
	width: 100%;
	height: auto;
	background-color: #2a2825;
	z-index: 1000;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding-top: 20px;
}

.sp-nav ul {
	list-style: none;
	padding: 20px;
}

.sp-nav ul li {
	margin-bottom: 15px;
}

.sp-nav ul li a {
	text-decoration: none;
	color: #fff;
	font-size: 16px;
	display: block;
	padding: 10px;
	border-bottom: 1px solid #ddd;
	font-family: var(--font-shippori-mincho);
}

.sp-nav .dropdown-sp {
	margin-top: 10px;
	display: none;
	max-height: none;
}

.sp-nav>ul {
	padding-bottom: 100px;
}

.sp-nav .dropdown-sp ul {
	padding: 0 0 0 20px;
}

.sp-nav .dropdown-sp ul li a {
	font-size: 14px;
}

.sp-nav .has-dropdown.active .dropdown-sp {
	display: block;
}

.sp-nav .has-dropdown>a::after {
	content: "";
	background-image: url(../img/top202504/droppdown-arrow.svg);
}
.logo {
	max-width: 116px;
	width: 15%;
	margin-left: 40px;
}

.logo img {
	width: 100%;
	height: auto;
}

@media screen and (max-width: 768px) {
		.logo {
		position: absolute;
		/* top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); */
		text-align: center;
		max-width: 100px;
		margin: 0;
	}

	.logo img {
		width: 100%;
		height: auto;
	}

	.hamburger-pc {
		display: none;
	}

	.hamburger {
		position: absolute;
		right: 20px;
		top: 50%;
		transform: translateY(-50%);
		z-index: 1002;
	}

	.sp-nav.active {
		display: block;
	}

	.hamburger {
		display: block;
		position: absolute;
		right: 20px;
		top: 50%;
		transform: translateY(-50%);
	}

	.sp-nav.active {
		display: block;
	}

	.sp-nav .has-dropdown>a {
		position: relative;
		padding-right: 30px;
		/* 矢印のスペースを確保 */
	}

	.sp-nav .has-dropdown>a::after {
		content: "";
		position: absolute;
		right: 10px;
		top: 50%;
		width: 12px;
		height: 12px;
		background-image: url("../img/top202504/droppdown-arrow.svg");
		background-size: contain;
		background-repeat: no-repeat;
		transform: translateY(-50%);
		transition: transform 0.3s ease;
	}

	.sp-nav .has-dropdown.active>a::after {
		transform: translateY(-50%) rotate(180deg);
	}

	/* ドロップダウンメニュー */
	.sp-nav .dropdown-sp {
		display: none;
		background-color: #2a2825;
	}

	.sp-nav .has-dropdown.active .dropdown-sp {
		display: block;
	}

	.sp-nav .dropdown-sp ul li {
		border-bottom: none;
	}

	.sp-nav .dropdown-sp ul li a {
		padding: 12px 35px;
		font-size: 14px;
		color: #fff;
		text-decoration: none;
		display: block;
	}

	.sp-nav .dropdown-sp ul li:last-child {
		border-bottom: none;
	}

	/* 詳細メニュー */
	.sp-detailed-menus {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #3a3a39;
		z-index: 1001;
		overflow-y: auto;
		display: none;
	}

	.sp-detailed-menu {
		display: none;
		padding: 50px 0 30px;
	}

	.sp-detailed-menu.active {
		display: block;
	}

	.sp-detailed-menu-header {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		background-color: #2a2825;
		padding: 15px 20px;
		display: flex;
		align-items: center;
		z-index: 1002;
	}

	.sp-back-btn {
		color: #fff;
		text-decoration: none;
		font-size: 14px;
		padding-left: 20px;
		position: relative;
	}

	.sp-back-btn::before {
		content: "";
		width: 10px;
		height: 10px;
		border-left: 1px solid #fff;
		border-bottom: 1px solid #fff;
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%) rotate(45deg);
	}

	.sp-menu-title {
		color: #fff;
		font-size: 16px;
		margin-left: 20px;
	}

	.sp-menu-items {
		list-style: none;
		padding: 0;
		margin: 0;
	}

	.sp-menu-items li {
		border-bottom: 1px solid #4b4b4a;
	}

	.sp-menu-items li a {
		color: #fff;
		text-decoration: none;
		display: block;
		padding: 15px 20px;
		font-size: 14px;
	}
}


/* ===========
footer
============= */
.footer {
	background-color: #435168;
	color: white;
	padding-block: min(17.3vw, 65px) min(22.13vw, 83px);
	text-align: center;
	width: 100%;
}

.footer__content {
	max-width: 994px;
	padding-inline: 20px;
	margin-inline: auto;
	width: 100%;
}

.footer__logo {
	margin-bottom: 80px;
}

.footer__logo img {
	max-width: 220px;
	height: auto;
	margin-inline: auto;
}

.footer__main-wrapper {
	max-width: 995px;
	display: flex;
	gap: 10%;
	margin-bottom: 80px;
}

.footer__contact {
	max-width: 480px;
	display: flex;
	justify-content: center;
	gap: 30px;
	margin-bottom: 30px;
}

.footer__nav {
	max-width: 415px;
	width: 100%;
	display: flex;
	justify-content: left;
	flex-wrap: wrap;
	font-size: var(--font-promise-text-large);
}

.footer__tel {
	width: 225px;
}

.footer__nav--wrapper {
	display: flex;
	margin-bottom: 30px;
	font-family: var(--font-shippori-mincho);
	font-size: 1.1rem;
	font-weight: 500;
}

.footer__nav--wrapper-bottom {
	margin-bottom: 0;
}

.footer__nav--wrapper a {
	color: white;
	text-decoration: none;
	margin: 0 15px;
	white-space: nowrap;
}

.footer__sns {
	max-width: 154px;
	width: 11%;
	display: flex;
	justify-content: space-between;
	margin: 0 auto 20px;
}

.footer__sns a {
	display: inline-block;
	width: 30px;
	height: 30px;
	object-fit: contain;
}

.footer__copyright {
	font-size: 16px;
	color: #9f9f9f;
	font-family: var(--font-bodoni);
}
@media screen and (max-width: 994px) {
	/* =========
    footer
    =========== */
	.footer {
		padding: 110px 30px 43px;
	}

	.footer__logo {
		max-width: 186px;
		width: 43.549%;
		margin-inline: auto;
	}

	.footer__contact {
		flex-direction: column;
		align-items: center;
		justify-content: start;
	}

	.footer__tel {
		width: 100%;
		max-width: 300px;
	}

	.footer__nav {
		flex-direction: column;
		align-items: flex-end;
		width: 25%;
	}

	.footer__main-wrapper {
		justify-content: space-between;
		align-items: stretch;
		gap: 35px;
	}

	.footer__nav--wrapper {
		flex-direction: column;
		align-items: flex-end;
		width: 100%;
		gap: 15px;
	}

	.footer__nav a {
		margin: 0;
	}

	.footer__sns {
		margin-right: 0;
		gap: 5%;
		width: 19%;
	}

	.footer__sns a {
		width: 22px;
		height: 22px;
	}

	.footer__content {
		width: 100%;
		padding: 0 0 25%;
	}

	.footer__contact {
		width: 53%;
	}

	.footer__logo img {
		max-width: 100%;
	}

	.footer__copyright {
		font-size: 12px;
	}
}