/* 共通
-------------------------------------------- */
*, ::before, ::after {
  margin: 0;
  padding: 0;
	box-sizing: border-box;
}
:root {
	--colorText: #333;  /* font-colorの変数 */
	--colorMain: #FFE8CC;
	--colorBtn: #FFCE3D;
}
html {
	font-size: 10px;
}
body {
	font-family: "Noto Sans JP", serif;
	font-weight: 300;
	background-color: #faf9f9;
	color: var(--colorText);
}
.font-english {
	font-family: "Cormorant Garamond", serif;
	font-weight: normal;
	line-height: 1.7;
}
h1,h2,h3,h4,h5,h6 {
  font-size: 1em;
}
a {
	text-decoration: none;
	color: inherit;  /* 親要素と同じ値にする */
}
img {
	max-width: 100%;
  vertical-align: bottom; /* imgと親要素の高さを同じにする(画像の下端を文字のbase-lineではなく、bottom-lineに合わせる) */
}
li {
	list-style: none;
}
.container {
	max-width: 1000px;
	width: 100%;
	margin: 0 auto;
}
section {
	margin-top: 90px;
}
section h2 {
	font-size: 3em;
	font-family: "Cormorant Garamond", serif;
	font-weight: 700;
	text-align: center;
	padding-bottom: 30px;
}

/* header 
-------------------------------------------- */
header {
	width: 100%;
	height: 60px;
	background: var(--colorMain);
	border-bottom: 2px solid #D8D8D8;
	display: flex;
	justify-content: center;
	align-content: center;
}
.header-content {
	margin: 0 2em;
	display: flex;
	align-items: center;  /* 縦の中央揃え */
	justify-content: space-between;  /* 左右にスペースを均等に配置 */
}
header img {
	height: 35px;
}
nav {
	flex: 1;  /* 中央のナビゲーションが自由にスペースを取得 */
	font-size: 1.8em;
	font-weight: 700;
	padding: 5%;
}
nav ul {
	display: flex;  /* リストをフレックスボックスにする */
	justify-content: space-evenly;  /* ナビゲーションメニューを中央揃え */
	gap: 1em;
	padding-top: 1.5em;
}
.header-reserve {
	display: flex;
	gap: 1.5em;
	font-size: 1.4em;
}
.header-reserve span {
	height: 1em;
	padding-right: 1em;
}
.header-reserve a {
	padding: 6px 15px;
	border-radius: 99999px;
	background: var(--colorBtn);
	display: block;
	opacity: 1.0;
	white-space: nowrap;  /* 改行をさせない */
}
/* header アニメーション */
header nav li a:hover{
	opacity: 0.6;
}
.header-reserve a:hover {
	opacity: 0.6;
}

/* header タブレットに向けレイアウト
-------------------------------------------- */
.header-reserve-1000px {
	display: none;
	margin-left: auto;
}
.header-reserve-1000px img {
	height: 1.4em;
}
.header-reserve-1000px a {
	font-size: 1.4em;
	padding: 3px 6px;
	border-radius: 99999px;
	background: var(--colorBtn);
	display: block;
	opacity: 1.0;
	white-space: nowrap; /* 改行をさせない */
}

/* アニメーション */
.header-reserve-1000px a:hover{
	opacity: 0.6;
}

/* スマホ向けレイアウト
-------------------------------------------- */
/* ハンバーガーの実装 */
.header-nav-670px {
	display: none;
	margin: 0 30px 0 15px;
	animation: bugfix infinite 1s;  /*  繰り返しのアニメーションの設定 */
	-webkit-animation: bugfix infinite 1s;  /*WebKitエンジンを使用するブラウザ（例：Safariや古いバージョンのChrome）向け  */
  }
  
  @keyframes bugfix {
	from {
	  padding: 0;
	}
	to {
	  padding: 0;
	}
  }
  @-webkit-keyframes bugfix {
	from {
	  padding: 0;
	}
	to {
	  padding: 0;
	}
  }
  #overlay-button {
	position: fixed;  /* 画面の特定位置に固定 */
	z-index: 40;
	cursor: pointer;  /* カーソルの変更 */
	user-select: none;  /* 必要か不明 */
  }
  #overlay-button span {
	height: 3px;
	width: 24px;
	border-radius: 2px;
	background: var(--colorText);
	position: relative;
	display: block;
	transition: all .2s ease-in-out;  /* 開始・終了時ともに、easeよりもさらに緩やかに変化する */
  }
  #overlay-button span:before {
	top: -6px;
	visibility: visible;  /* 表示 */
  }
  #overlay-button span:after {
	top: 6px;  /* visibility: visible;を使用しない理由か不明(デフォルトだから？) */
  }
  #overlay-button span:before, #overlay-button span:after {
	height: 3px;
	width: 24px;
	border-radius: 2px;
	background-color: var(--colorText);
	position: absolute;
	content: "";
	transition: all .2s ease-in-out;  /* 開始・終了時ともに、easeよりもさらに緩やかに変化する */
  }
  #overlay-button:hover span, 
  #overlay-button:hover span:before, 
  #overlay-button:hover span:after {
	background: var(--colorText);
  }
  input[type=checkbox] {
	display: none;  /* チェックボックスの非表示*/
  }
  input[type=checkbox]:checked ~ #overlay {
	visibility: visible; /* 一般兄弟結合子 ~ overlay要素の表示*/
  }
  input[type=checkbox]:checked ~ #overlay-button:hover span, 
  input[type=checkbox]:checked ~ #overlay-button span {
	background: transparent;  /* 背景を透明に設定*/
  }
  input[type=checkbox]:checked ~ #overlay-button span:before {
	transform: rotate(45deg) translate(4.5px, 4.5px);  /* 回転させる変形 */
  }
  input[type=checkbox]:checked ~ #overlay-button span:after {
	transform: rotate(-45deg) translate(4.5px, -4.5px);  /* 回転させる変形 */
  }
  #overlay {
	height: 100vh;
	width: 100vw;
	background: var(--colorMain);
	z-index: 30;
	visibility: hidden;
	position: fixed;
	top: 0;
	left: 0;
  }
  #overlay.active {
  
  }
  #overlay ul {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	text-align: center;
	height: 100vh;
	padding-left: 0;
	list-style-type: none;
  }
  #overlay ul li {
	padding: 1em;
  }
  #overlay ul li a {
	color: var(--colorText);
	text-decoration: none;
	font-size: 2.0em;
  }
  #overlay ul li a:hover {
		color: var(--colorText) !important;
  }

  /* footer
-------------------------------------------- */
footer {
	height: 60px;
	width: 100%;
	background: var(--colorMain);
	position: relative;
	display: flex;
}
footer img {
	height: 20px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	padding-left: 2em;
}
footer small {
	margin: auto;
}

/* top-wrapper 
-------------------------------------------- */
.top-wrapper {
	display: flex;
	width: 100%;
	height: 500px;
	margin-top: 20px;
	align-items: stretch;  /* 子要素の高さを同じに */
}
.top-wrapper-left {
	display: flex;
	justify-content: flex-end; /* 子要素を右寄せ */
	flex-basis: 40%; 	/* 左コンテンツを40%に設定 */
	align-items: flex-end; /* 子要素を下端に配置 */
	position: relative;
}
.top-wrapper-left h1 {
	font-size: 2.6em;
	font-family: "Shippori Mincho";
	writing-mode: vertical-rl;  /* 右から始まる縦の文章 */
	position: absolute;  /* 中央揃えにするため */
	top: 50%;
	right: 50%;
	transform: translate(-50%, -50%);
	white-space: nowrap;  /* 改行をさせない */
	text-shadow: #fff 2px 0, #fff -2px 0, #fff 0 -2px, #fff 0 2px, #fff 2px 2px, #fff -2px 2px, #fff 2px -2px, #fff -2px -2px, #fff 1px 2px, #fff -1px 2px, #fff 1px -2px, #fff -1px -2px, #fff 2px 1px, #fff -2px 1px, #fff 2px -1px, #fff -2px -1px, rgba(0, 0, 0, .5) 3px 3px 3px;
} 
.top-wrapper-left img {
	width: 45%;
	margin-right: 10%;/* 左から10%の位置に配置  */
}
#slideshow {
	flex-basis: 60%; /* 右コンテンツを60%に設定 */
	position: relative;
	width:  100%;
}
#slideshow img {
	position: absolute;
	top:  0;
	left: 0;
	z-index: 8;
	opacity: 0.0;
	width: 100%;
	height: 500px;
	object-fit: cover;
	border-radius: 30px 0 0 30px;
}
#slideshow img.active {
	z-index: 10;
	opacity: 1.0;
}

#slideshow img.last-active {
	z-index: 9;
}



/* news
-------------------------------------------- */
.news-contents {
	display: flex;
	justify-content: space-between;
}
.news-content {
	display: flex;
	padding: 1em;
	background-color: #FFFFFF;
	border: 1px solid #B3B3B3;
	width: 300px;
}
.concept-content img {
	width: 75px;
}
.date {
	font-size: 1.2em;
	padding-left: 1em;
	opacity: 0.8;
}
.news-content-text p {
	font-size: 1.4em;
	padding-left: 1em;
	padding-top: 1em;
}
.news-more {
	font-size: 1.6em;
	font-weight: 500;
	margin-top: 1em;
	display: flex;
	justify-content: flex-end; /* 右端に配置 */
}
.fa-arrow-right {
	padding-left: 1em;
}

/* news-content アニメーション */
.news-more:hover {
	opacity: 0.6;
} 

/* concept
-------------------------------------------- */
.concept-content {
	display: flex;
	justify-content: center;
	flex-direction: row; /* 初期状態は横並び */
}
.concept-left {
	width: 50%;
	text-align: center;  /* img(インライン要素)を中央揃え */
}
.concept-left img{
	width: 90%;
	vertical-align: bottom;  /* 行全体の下端に要素と子孫要素を整える */
}
.concept-right {
	width: 50%;
	margin: 0 30px;
}
.concept-right span {
	font-size: 2.0em;
	font-family: "Shippori Mincho";
	font-weight: 700;
	display: block;
	margin-bottom: 15px;
}
.concept-right p {
	font-size: 1.6em;
	display: inline-block;
	text-align: justify;
}

/* style-wrapper
-------------------------------------------- */
.style-wrapper {
  background-image: linear-gradient(0deg, rgba(255, 160, 9, 0.3), rgba(255, 255, 255, 0) 70%);
	width: 100%;
	height: 100%;
}
.style-wrapper h3 {
	font-size: 2.4em;
	font-weight: 700;
	display: flex;
	align-items: center;
	gap: 1em;
	margin: 0 auto;
	width: fit-content;
	margin-bottom: 1.5em;
}
.style-wrapper h3 img {
	max-width: 1.6em;
	width: 100%;
}
.instagram-contents {
	display: flex;
	gap: 0.5em 1.5em;
	justify-content: center;
}
.instagram-content {
	width: calc(50% - 1.5em);
	max-width: 324px !important; /* 任意の最大幅に変更 */
	width: 100% !important; /* 幅を100%に */
}
.instagram-content-1000px {
	display: none;
}

/* instagram-contentの下に余白が生じる */

/* salon_info-wrapper
-------------------------------------------- */
.access-contents {
	display: flex;
	justify-content: center; /* 全体を中央寄せ */
	align-items: stretch;
}
.access-left {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center; /* 左側の要素を中央揃え */
	gap: 1.5em;
}
.access-left ul {
	font-size: 1.6em;
	width: 100%; /* 幅を100%に設定 */
	max-width: 300px; /* 必要に応じて最大幅を調整 */
	text-align: left; /* テキストを左揃えに */
}
.access-left ul li:first-of-type {
	list-style-type: disc;
	padding-bottom: 0.3em;
}
.access-right {
	flex: 1;
	display: flex;
	justify-content: center;
}
.access-right>iframe {
	max-width: 450px;
	width: 100%;
	height: auto;
}

/* reservation-wrapper
-------------------------------------------- */
.reservation-wrapper {
	width: 100%;
	height: 300px;
	display: flex;
	align-items: center;
	background-image: url(../_images/10_reservation-wrapper.png);
}
.reservation-text {
	text-align: center;
	font-size: 1.6em;
	font-weight: 400;
	line-height: 1;
	text-shadow: #fff 2px 0, #fff -2px 0, #fff 0 -2px, #fff 0 2px, #fff 2px 2px, #fff -2px 2px, #fff 2px -2px, #fff -2px -2px, #fff 1px 2px, #fff -1px 2px, #fff 1px -2px, #fff -1px -2px, #fff 2px 1px, #fff -2px 1px, #fff 2px -1px, #fff -2px -1px, rgba(0, 0, 0, .5) 3px 3px 3px;
	padding-bottom: 3em;
}
.reservation-wrapper ul {
	display: flex;
	justify-content: center;
	gap: 3em;
	font-size: 1.8em;
	line-height: 1;
	color: var(--colorText);
}

.reservation-wrapper li a {
	display: flex; /* Flexboxを使用 */
	justify-content: center; /* 横方向中央揃え */
	align-items: center; /* 縦方向中央揃え */
	text-align: center;
	height: 60px;
	width: 360px;
	background: var(--colorBtn);
	border-radius: 9999px;
	opacity: 1;
}

.reservation-wrapper ul li p {
	white-space: nowrap;
}

.reservation-wrapper p span {
	font-size: 1.4rem;
}

.reservation-wrapper li:hover {
	opacity: 0.8;
}