@charset "utf-8";
/* -----基本設定ここから----- */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
	}
body {
	font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
	font-size: 15px;
	background-color: #faf9f6; /* 優しいオフホワイト */
	line-height: 1.8;
	font-weight: 400;
	color: #2C2C2C;
}
img {
    max-width: 100%;    /* 親要素の幅いっぱいに広がる */
    height: auto;   /* 縦横比を維持して自動調整 */
}
ul {
	list-style: none;
}
a {
	color: inherit;
	text-decoration: none;
}
h2{
	font-family: "Noto Serif JP", "Yu Mincho", "MS Mincho", serif;
	font-size: 1.5rem;
    color: #5d4037;
    margin-bottom: 40px;
    text-align: left;
}
h3 {
	font-family: "Noto Serif JP", "Yu Mincho", "MS Mincho", serif;
}
section {
    padding: 100px 10%;
    text-align: center;
}
.view-more {
	display: inline-block;
	margin-top: 20px;
	padding: 8px 30px;
	border: 1px solid #bcaaa4;
	color: #bcaaa4;
	text-decoration: none;
	border-radius: 50px;
	transition: all 0.3s ease;
}
.view-more:hover{
	background-color: #bcaaa4;
	color: #fff;
	opacity: 1;
}

/* 下層ページヘッダーのスタイル */
.sub-page-header {
	position: relative;
	width: 100%;
	height: 300px; /* PCでの高さ（お好みで調整） */
	overflow: hidden;
 	display: flex;
	align-items: center;
 	justify-content: center;
	padding: 0 !important; 
    text-align: center;
}
.sub-header-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
 	z-index: 1;
}
.sub-header-bg img {
	width: 100%;
	height: 100%;
	object-fit: cover; /* 画像を枠いっぱいに広げる */
 	filter: brightness(0.7); /* 画像を少し暗くして文字を見やすくする */
}
.sub-header-title {
	font-family: "Noto Serif JP", "Yu Mincho", "MS Mincho", serif;
	position: relative;
	z-index: 2;
	color: #fff; /* 文字色 */
	font-size: 1.5rem;
	letter-spacing: 0.1em;
	text-transform: capitalize;
	text-align: center;
	width: 100%;
}
.sub-header-title h1 {
	margin: 0;
}
/* -----基本設定ここまで----- */


/* ====================トップページここから ====================*/

/* -----Headerここから----- */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 40px;
    position: fixed; /* 画面上部に固定 */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000; /* 他の要素より上に表示 */
    box-sizing: border-box; /* paddingを含めた横幅計算 */
    background: transparent; /* 初期状態は透明 */
    transition: background 0.3s ease, padding 0.3s ease; /* スクロール時の変化を滑らかに */
}
header ul {
    display: flex;
    align-items: center;
}
header ul li {
    margin-left: 40px;
}
header ul li a {
	font-family: "Playfair Display", serif;
	color: #fff;
    font-size: 0.9rem;
    letter-spacing: 0.1em;
	transition: color 0.3s ease;
}
li.has-child {
    position: relative;
}
.sub-nav {
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(10px); /* 最初は少し下にずらしておく */
    background-color: rgba(255, 255, 255, 0.85);
    min-width: 160px;
    padding: 10px 0;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    border-radius: 8px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
    z-index: 100;
    list-style: none;
    margin: 0;
    display: block; /* 親のflexを打ち消す */
}
li.has-child:hover .sub-nav {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
.sub-nav li {
    margin: 0 !important;
}
.sub-nav li a {
    display: block;
    padding: 10px;
    color: #5d4037 !important; /* 文字色はサロンのテーマカラーで固定 */
    font-size: 0.8rem !important;
    font-family: "Noto Serif JP", serif !important;
    text-align: center;
    white-space: nowrap;
}
.sub-nav li a:hover {
    background-color: #f5f0ed;
    opacity: 1 !important;
}
footer .sub-nav {
    bottom: 120%; /* MENUの文字より上に配置 */
    top: auto;    /* header用の設定を解除 */
    box-shadow: 0 -5px 15px rgba(0,0,0,0.1); /* 影を上向きにする */
}
.toggle-menu-button {
	display: none;
}
/* スクロールした時にJSで付与するクラス */
header.scrolled {
    background: rgba(255, 255, 255, 0.3); /* スクロール後、うっすら白背景（お好みで透明度を調整） */
    padding: 5px 40px; /* スクロール後は少しスリムにする */
    backdrop-filter: blur(5px); /* 背景をぼかすとお洒落で文字も見やすくなります */
}
/* ロゴ全体のリンク設定 */
.logo-link {
    display: inline-block; 
}
.logo {
    display: flex;
    flex-direction: column; /* 縦に並べる */
    align-items: center;    /* 中央揃え */
    line-height: 0.9;       /* 行間を詰めて文字を近づける */
    padding: 10px 0;
}
.logo-bottom {
    font-family: "Noto Serif JP", serif;
    font-size: 12px;         /* カンプに合わせた小さめのサイズ */
    color: #fff;
    letter-spacing: 0.05em;
    font-weight: 500;
	transition: color 0.3s ease; /* スムーズに色を変える */
}
.logo-main {
    font-family: "Gwendolyn", cursive;
    font-weight: 400;
    font-style: normal;
    font-size: 70px;
    color: #fff;
    display: block;
	transition: color 0.3s ease; /* スムーズに色を変える */
}
.reserve-btn {
    background: #687866; /* 緑ボタン */
    color: #fff !important;
	border: 1px solid #687866;
    padding: 10px 20px;
    border-radius: 50px;
	display: inline-block;
    transition: all 0.3s ease; /* 変化をなめらかにする */
}
.reserve-btn:hover {
	background: transparent;
	color: #687866 !important;
	opacity: 1;
}
header ul li a:not(.reserve-btn):hover {
    opacity: 0.6; /* 60%の薄さにする */
    transition: opacity 0.3s ease; /* 変化をなめらかにする */
}
header.scrolled .logo-bottom {
    color: #5d4037;
}
header.scrolled .logo-main {
    color: #000;
}
header.scrolled ul li a {
    color: #5d4037;
}
header.scrolled .reserve-btn {
    color: #fff !important; 
}
header.scrolled .reserve-btn:hover {
	background: transparent;
	color: #687866 !important;
	opacity: 1;
}
/* -----Headerここまで----- */


/* -----Main Visualここから----- */
.main-visual {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    padding: 0;         /* sectionの共通設定（10%の余白）を打ち消す */
    margin: 0;
}
.main-visual-img {
    width: 100%;
    height: 100%;
}
.main-visual-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;  /* これで画面いっぱいに広がり、かつ歪みません */
    object-position: center; /* 画像の中央を表示 */
    vertical-align: bottom;  /* 画像の下に隙間が出るのを防ぐ */
}
.main-copy {
	font-family: "Noto Serif JP", "Yu Mincho", "MS Mincho", serif;
    position: absolute;
    top: 60%;
    left: 70%;
    transform: translate(-50%, -50%); /* 画面のど真ん中に配置 */
    color: #fff;
    font-size: 3vw;
    text-shadow: 0 0 15px rgba(0,0,0,0.3);
    font-weight: 100;
    width: 100%;
    text-align: center;
    margin: 0;
	white-space: nowrap;
	}
/* -----Main Visualここまで----- */


/* -----Conceptここから----- */
/* -----Main Visualここまで----- */

/* -----Conceptここから----- */
.concept-container {
    display: flex;
    align-items: center;
    gap: 50px;
}
.concept-text {
    flex: 1;
    text-align: left;
}
.concept-image {
    flex: 1;
}
.concept .sub-text {
    line-height: 1.8;      /* 行間を広めに */
    letter-spacing: 0.05em; /* 文字の間隔を少し広げる */
    margin-bottom: 30px;    /* ボタンとの間隔を調整 */
}
.concept .title-text {
	font-weight: 600;
}
/* -----Conceptここまで----- */



/*-----menuここから-----*/
.menu {
	background-color: #f5f0ed;
}
.image-capsule {
    overflow: hidden;
    border-radius: 200px; /* 楕円形 */
    aspect-ratio: 3 / 4;
}
.image-capsule img {
    width: 100%;
    height: 100%;      /* 親要素（カプセル）の高さいっぱいに */
    object-fit: cover; /* 歪ませずに、はみ出た部分はカットする */
}
.menu-item img {
    width: 100%;
    height: auto;
    object-fit: cover;
}
.menu-grid {
    display: flex;
    justify-content: center;
    gap: 15vw;
    margin-top: 50px;
}
.menu-item {
    width: 300px;
}
.image-wrapper {
    position: relative;
    width: 100%;
    max-width: 300px; /* 画像のサイズに合わせて調整 */
    margin: 0 auto;
	transition: transform 0.3s ease; /* 変化をなめらかにする */
}
.curve-text {
    position: absolute;
    top: -25px; /* 画像のふちに被るように調整 */
    left: 0px;
    width: 100%;
    height: auto;
    overflow: visible;
    z-index: 2;
}
.curve-text text {
    font-family: "Noto Serif JP", serif;
    font-weight: 500;
    font-size: 13px; /* デザインに合わせて調整 */
    fill: #5d4037;   /* 文字色 */
    letter-spacing: 0.1em;
}
.curve-text.left-side {
 position: absolute;
    top: -165px;       /* 上に移動 */
    left: -40px;      /* 左に配置 */
    width: 120px;
    height: 100%;
    overflow: visible;
    z-index: 2;
}
/* 文字の向きを調整 */
.curve-text.left-side text {
    font-family: "Noto Serif JP", serif;
    font-size: 16px;
    fill: #5d4037;
    /* 必要に応じて文字を少し回転させるなら↓ */
    /* transform: rotate(-10deg); */
}
.image-wrapper:hover .image-capsule img {
    transform: scale(1.1);
}
.image-capsule img {
    transition: transform 0.3s ease;
}
.menu-simple-list {
    margin-top: 20px;
    padding: 0;
     font-size: 0.9rem;
    color: #5d4037;
}

.menu-simple-list li {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #bcaaa4; /* 薄い線で区切る */
}
.menu-link-text {
    display: inline-block;
    position: relative;
	width: 150px;
    padding-bottom: 12px;
    color: #5d4037;
    transition: all 0.3s ease;
	text-align: left; 
}
.menu-item a:hover .menu-link-text::before {
    width: calc(100% + 10px); 
}
.menu-item a:hover .menu-link-text::after {
    transform: translateX(10px) rotate(35deg); 
}





/* -----Staffここから----- */
.staff-grid {
    display: flex;
    justify-content: center;
    gap: 20px 100px;
    margin-top: 50px;
}
.staff-item {
    position: relative;
    width: 260px; /* PCでの基本サイズ */
    /* モバイルで2列にする際、計算しやすいよう box-sizing を意識 */
    box-sizing: border-box; 
}
.staff-photo {
    width: 100%;       /* 親要素（staff-item）の幅に合わせる */
    overflow: hidden;
    aspect-ratio: 3 / 4; /* ここで枠の比率を3:4に固定 */
}
.staff-photo img {
    width: 120%;
    height: 120%;
    object-fit: cover;   /* 比率を保ったまま枠いっぱいに表示し、はみ出しをカット */
    border-radius: 0px;
}
.staff-info {
    position: absolute;
    bottom: -20px;
    right: -20px;
    background: rgba(255, 255, 255, 0.8); /* 少し透けた白背景 */
    padding: 10px 20px;
    text-align: left;
    box-shadow: 5px 5px 15px rgba(0,0,0,0.05);
	min-width: 140px;
}
.staff-name {
    font-size: 1.1rem;
    margin: 0;
    letter-spacing: 0.1em;
	color: #5d4037;
}
.staff-role {
    font-size: 0.8rem;
    margin: 0;
    color: #888;
}
.staff-button {
    margin-top: 60px; /* 20pxから60pxに変更。好きな数値で調整してください */
}
/* -----Staffここまで----- */

/* -----Salonここから----- */
.salon-visual {
	width: 80%;
	height: 70%;
	margin: 0 auto 60px;
}

.salon-details {
    max-width: 800px;
    margin: 0 auto 60px;
    text-align: left;
}

.salon-details dl {
    display: grid;
    grid-template-columns: 180px 1fr; /* 項目名と内容の幅 */
    border-top: 1px solid #ddd;
}
.salon-details dt {
	padding: 25px 0;
	border-bottom: 1px solid #ddd;
    font-weight: ;
	font-weight: 500;
}
.salon-details dd {
    padding: 25px 0;
    margin: 0;
    border-bottom: 1px solid #ddd;
}
.salon-details dd span {
    font-size: 0.85rem;
    color: #888;
}
.salon-map {
    width: 80%;
    margin: 0 auto;
}
.salon-map iframe {
    width: 100%;    /* 親要素(salon-map)の幅いっぱいに広げる */
    height: 300px;  /* 高さはデザインに合わせて調整 */
    border: none;   /* 枠線を消す */
}
/* -----Salonここまで----- */

/* -----Footerここから----- */
footer {
	position: relative;
    z-index: 10; /* 他のセクションより上に来るように */
    background: #bfada3	; /* ブラウンベージュ */
    color: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 30px;
	padding-bottom: 15px;
}
.footer-logo-group {
    display: flex;
    align-items: center; /* 上下の中央を揃える */
    justify-content: center; /* フッターの中央に配置 */
    margin-top: 30px;
}
.separator-line {
    width: 1.5px;
    height: 50px; /* ロゴの高さに合わせて調整 */
    background-color: #fff; /* 線を白にする（背景色に合わせて変えてください） */
    margin: 0 60px; /* 左右に20pxずつの余白 */
    opacity: 0.7; /* 少し透かして馴染ませる */
}
.footer-sns img {
    width: 50px;
    height: 50px;
    object-fit: contain; /* 画像を枠内に収める */
}
.footer-sns a:hover {
    opacity: 0.6; /* ホバー時に60%の薄さにする（他のリンクと統一） */
}
/* フッターのnavも相対位置にする */
footer nav ul li.has-child {
    position: relative;
}
.footer-sub {
    top: auto;   /* ヘッダー用の設定をリセット */
    bottom: 110%; /* 下ではなく「上」に出したい場合はここを調整 */
    background-color: #fff;
    min-width: 140px;
}
footer ul {
	display: flex;
}
footer ul li {
    margin-left: 0px;
	margin-right: 40px;
}
footer ul li a {
	font-family: "Playfair Display", serif;
    font-size: 0.9rem;
    letter-spacing: 0.1em;
}
footer ul li a:hover {
    opacity: 0.6; /* 60%の薄さにする */
    transition: opacity 0.3s ease; /* 変化をなめらかにする */
}
.copyright {
    margin-top: 30px;
    font-size: 0.8rem;
}
/* -----Footerここまで----- */


/* アニメーションの初期状態：透明で20px下に配置 */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* JavaScriptでこのクラスがついたら表示される */
.fade-in.is-visible {
    opacity: 1;
    transform: translateY(0);
}
/* スタッフが順番に出るように遅延（delay）をかける */
.staff-item:nth-child(1) { transition-delay: 0.1s; }
.staff-item:nth-child(2) { transition-delay: 0.2s; }
.staff-item:nth-child(3) { transition-delay: 0.3s; }
.staff-item:nth-child(4) { transition-delay: 0.4s; }

/* ====================トップページここまで ====================*/


/* ====================CONCEPTページここから ====================*/
.sub-page {
    padding-top: 80px; /* ヘッダーとの重なり防止 */
}
.container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 5%;
}
.our-thought {
	padding: 100px 0;
	text-align: left;
}
.thought-text p {
    margin-bottom: 2em;
    line-height: 2;
    letter-spacing: 0.05em;
}
/* 3つのこだわり */
.commitment-section {
    padding-bottom: 100px;
}

.commitment-item {
    display: flex;
    align-items: center;
    gap: 60px;
    margin-bottom: 120px;
}
.commitment-item.reverse {
    flex-direction: row-reverse;
}

.commitment-text {
    flex: 1;
    text-align: left;
}
.commitment-text h3 {
    font-size: 1.3rem;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
}
.commitment-text h3 span {
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    color: #bcaaa4;
    margin-bottom: 5px;
}
.commitment-text p {
    line-height: 1.8;
}
.commitment-image {
    flex: 1;
}
.commitment-image img {
    width: 100%;
    border-radius: 150px; /* カプセル型 */
    aspect-ratio: 4 / 3;
    object-fit: cover;
}
/* ====================CONCEPTページここまで ====================*/

/* ====================MENUページここから ====================*/

.intro-text {
    margin-bottom: 4em;
    line-height: 2;
    letter-spacing: 0.05em;
	text-align: left;
}
.simultaneous-banner {
    background-color: #f5f0ed; /* 既存の優しいベージュ */
	padding: 60px 0; 
    margin-top: 60px;
    margin-bottom: 30px;
	width: 100vw;
    margin-left: calc(-50vw + 50%); /* 中央寄せのコンテナを打ち消すプロの技 */
    position: relative;
    left: 0;
}
.simultaneous-banner {
    background-color: #f5f0ed; 
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    padding: 50px 0;
    border: none;
    border-radius: 0;
	
	position: relative; /* 必須：装飾の基準点になります */
    overflow: hidden;    /* はみ出した文字をカットします */
}
.simultaneous-banner::after {
    content: "Time saving & Relax";     /* 表示したい文字 */
    position: absolute;
    right: -20px;         /* 右端に配置（少しはみ出させるとオシャレ） */
    bottom: -50px;        /* 下側に配置 */
    font-family: "Gwendolyn", cursive;
    font-size: 10rem;     /* かなり大きく */
    color: rgba(188, 170, 164, 0.08); /* 非常に薄い茶色（透明度0.1） */
    pointer-events: none; /* 文字がクリックの邪魔をしないようにする */
    white-space: nowrap;
    z-index: 1;           /* テキスト(z-index: 2)の下に潜り込ませる */
}
.banner-inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 5%;
    text-align: left; /* ← 左揃えに統一 */
}
.banner-jp {
    font-family: "Noto Serif JP", serif;
    font-size: 1.1rem;
    font-weight: 500;
    color: #5d4037;
    margin-bottom: 8px;
    letter-spacing: 0.05em;
}

.banner-note {
    font-size: 0.8rem;
    color: #888;
}
.menu-card {
    display: flex;
    background-color: #ffffff;
    margin-top: 30px;
    margin-bottom: 120px;
    position: relative;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
	text-align: left;
	align-items: stretch;
	border-radius: 8px;
}
/* 左右反転の指定 */
.menu-card.is-reverse {
    flex-direction: row-reverse;
}
.category-title {
    position: absolute;
    top: -75px;
    left: 20px;
    padding: 5px 20px;
    z-index: 10;
    font-family: "Playfair Display", serif;
    font-size: 2rem;
    color: #5d4037;
}
.menu-card.is-reverse .category-title {
    left: auto;
}
.category-title span {
    font-family: "Noto Serif JP", serif;
    font-size: 0.9rem;
    font-weight: normal;
    margin-left: 10px;
}
.menu-content {
    flex: 0 0 55%;
    padding: 40px;
	box-sizing: border-box;
}
.menu-sub-content {
    margin-bottom: 50px;
}
.menu-sub-content:last-child {
    margin-bottom: 0;
}
.item-sub-title {
	font-size: 105%;
	color: #5d4037;
	margin-bottom: 0;
	display: flex;
	font-weight: 500;
}
.sub-image-group {
    flex: 0 0 45%;    /* 左のmenu-content(60%)に対して、右を40%に */
    display: flex;
    flex-direction: column; /* 画像を縦に並べる */
	gap: 20px;
	padding: 20px;          /* 上下左右に一律で余白を作る */
    box-sizing: border-box; /* 余白を含めて45%の幅に収める */
	aspect-ratio: 16 / 9;
	height: auto;
}
.sub-image {
    flex: 1;          /* 3つの画像を均等な高さにする */
    width: 100%;      /* 横幅はいっぱいに */
    height: 100%;     /* 高さを親に合わせる */
}
.sub-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 縦長になってもきれいに切り抜く */
    display: block;    /* 下の隙間を消す */
}
.category-description {
    font-size: 0.75rem;
    line-height: 1.5;
    color: #666;
	margin-top: 0;
    margin-bottom: 15px;
}
.price-list {
    margin: 0;
    padding: 0;
}
.price-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 8px 0;
    border-bottom: 1px dotted #e0d5d0;
}
.price-item dt {
    font-size: 0.95rem;
}
.price-item dd {
    margin: 0;
    color: #5d4037;
}
.price-detail {
    display: block;    /* 改行させる */
    font-size: 0.75rem; /* 小さめの文字サイズ */
    color: #888;       /* 少し薄めの色（お好みで） */
}
.menu-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
	display: block;
	padding: 20px;          /* 上下左右に一律で余白を作る */
    box-sizing: border-box; /* 余白を含めて40%の幅に収める */
}
.link-btn {
	background: #687866; /* 緑ボタン */
    color: #fff !important;
	border: 1px solid #687866;
    padding: 10px 20px;
    border-radius: 50px;
	display: inline-block;
    transition: all 0.3s ease; /* 変化をなめらかにする */
}
.link-btn:hover {
	background: transparent;
	color: #687866 !important;
	opacity: 1;
}
/* ====================MENUページここまで ====================*/


/* ====================STAFFページここから ====================*/
.staff-list {
    padding: 150px 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	column-gap: 100px;
	row-gap: 70px;
	justify-content: center;
}
.staff-list li {
	position: relative;
}
.staff-list li img {
    width: 100%;
    aspect-ratio: 3 / 4;   /* 縦長 3:4 に固定 */
    object-fit: cover;     /* 比率を保ったまま枠いっぱいに表示 */
    display: block;        /* 下に謎の隙間ができるのを防ぐ */
}
.staff-list dl {
    margin-top: 15px;
    padding: 0; /* 余白を消す */
}
.staff-list .staff-label {
	position: absolute;
	top: 0;
	left: calc(100% + 18px);
	white-space: nowrap;
	transform-origin: top left;
	transform: rotate(90deg);
}
.staff-details p {
    font-size: 0.9rem;
}
.staff-details span {
    font-weight: 500;
}
.name-flex {
    display: flex;
    align-items: center; /* 上下の中央を揃える */
    justify-content: space-between; /* 名前とアイコンを両端に配置（好みで調整） */
}
.subpage-staff-name {
	color: #5d4037;
	border-bottom: 0.5px solid #bcaaa4; /* 線の太さ・種類・色 */
	padding-bottom: 8px;
	display: block;
	font-size: 1.1rem;
	letter-spacing: 0.1em;
}
.insta-icon {
    display: inline-block;
    width: 20px;  /* アイコンの大きさ */
    height: 20px;
    transition: opacity 0.3s ease;
}
.insta-icon img {
    width: 100% !important; /* li img の設定を上書き */
    height: 100% !important;
    aspect-ratio: auto !important; /* 3:4の設定を解除 */
    object-fit: contain !important;
}

.insta-icon:hover {
    opacity: 0.6;
}
/* ====================STAFFページここまで ====================*/