@charset "utf-8"; /* 文字セットの指定 */

/* 共通CSS */
/*========= 全体のスタイル ===============*/
html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* 横スクロールを防ぐ */
  width: 100vw;
  max-width: 100vw;
}

body {
  font-family: "游明朝", "Yu Mincho", YuMincho, "Hiragino Mincho Pro","Noto Sans JP", sans-serif; /* フォントの指定 */
  color: #494746;
  background-color: #fdfdfd; /* 背景色 */
  line-height: 2.1; /* 行間 */
  letter-spacing: 0.1em; /* 文字間 */
  text-align: left; /* テキストの配置 */
  box-sizing: border-box; /* ボックスサイズの指定 */
  max-width: 100vw; /* 最大幅 */
}

section {
  max-width: 1300px;
}
/* section:not(:first-child) {
  padding-top: 5svh;
} */

article {
  max-width: 100vw;
}

p {
  font-size: 1.2rem;
  margin-bottom: 0;
}

.responsive-fs {
  font-size: clamp(18px, 1.5vw, 28px);
}

a {
  color: inherit; /* リンクのテキストカラー */
  text-decoration: none; /* リンクの下線を消す */
}

h3 {
  font-size: clamp(16px, 2.2vw, 30px);
}

.txt-gold {
  color: #ac9434;
}


/* ヘッダーの設定 */
/* ブランドロゴのスタイル */
.fixed-top {
  z-index: 49;
}

.navbar-brand {
  margin-left: 30px;
  margin-top: 0;
  width: 30vw;
  max-width: 300px;
  height: auto;
}
.brand-logo {
  display: block; /* 要素を表示するが、初期状態では透明にする */
  opacity: 0; /* 完全に透明 */
  transition: opacity 0.2s ease; /* フェードイン/フェードアウトのアニメーションを追加 */
  width: 30vw;
  max-width: 100px;
  height:auto;
}
.brand-logo.visible {
  opacity: 1; /* 完全に不透明に */
}

/* ハンバーガーメニューのボタンスタイル */
.navbar-toggler {
  border: 1px solid #494746;
  outline: none;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-right: 30px;
  margin-top: 10px;
  background: transparent;
  position: relative;
  z-index: 50;
}

/* 中央のバー */
.navbar-toggler span {
  display: block;
  position: absolute;
  width: 20px;
  height: 1px;
  background-color: #494746;
  transition: transform 0.3s ease, opacity 0.3s ease; /* アニメーション設定 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* トップバー */
.navbar-toggler span::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: #494746;
  transition: transform 0.3s ease, opacity 0.3s ease;
  top: -8px; /* 位置調整 */
  left: 0;
  transform-origin: center top; /* 原点を上中央に設定 */
}

/* ボトムバー */
.navbar-toggler span::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: #494746;
  transition: transform 0.3s ease, opacity 0.3s ease;
  top: 8px; /* 位置調整 */
  left: 0;
  transform-origin: center bottom; /* 原点を下中央に設定 */
}

/* トグルされた時の変形 */
.navbar-toggler.toggled span {
  transform: translate(-50%, -50%) rotate(45deg); /* 中央のバーを45度に回転 */
}

.navbar-toggler.toggled span::before {
  transform: translate(-3%, 800%) rotate(-90deg); /* 下のバーを-90度に回転 */
  opacity: 1; /* 透明度を1に */
}

.navbar-toggler.toggled span::after {
  transform: translate(0%, -1000%) rotate(-90deg); /* 下のバーを-90度に回転 */
  opacity: 0; /* 透明度を1に */
}

/* ハンバーガーメニューの設定 */
.navbar-nav .nav-link {
  color: #494746; /* リンクのテキストカラー */
  font-size: 16px; /* リンクのフォントサイズ */
  font-weight: bold; /* リンクのフォントウェイト */
}

/* メニュー展開の位置 */
.navbar-collapse {
  position: absolute; /* 絶対配置 */
  right: 15px; /* 右端から展開 */
  top: 80px; /* ナビゲーションバーの下から展開 */
  /* background: inherit; メニュー展開時の背景色 */
  background-color: rgba(255, 255, 255, 0.5); /* メニュー展開時の背景色 */
}

/*========= ヒーローセクションのCSS ===============*/
.hero-logo {
  width: 500px; /* ロゴの幅 */
  text-align: center; /* ロゴの配置 */
  margin-top: 50px; /* ロゴの上マージン */
}

#wrapper {
  width: 100%; /* ラッパーの全幅 */
  height: 100svh; /* ビューポートの高さ */
  display: flex; /* フレックスボックス */
  justify-content: center; /* 中央寄せ */
  align-items: center; /* 縦方向に中央寄せ */
  overflow-x: hidden; /* はみ出しを防ぐ */
  overflow-y: visible; /* 縦方向のはみ出しは許容 */
  position: relative; /* 相対配置 */
  bottom: 0;
}

/* 固定コンテンツのスタイル */
.text-contents,
.img-contents {
  position: fixed; /* 固定位置 */
  top: 0%; /* 上部の位置 */
  width: 50%; /* 幅 */
  height: 100svh; /* ビューポートの高さ */
  /* max-height: 50%; */
  overflow: hidden; /* はみ出しを防ぐ */
  z-index: -1; /* z-indexの設定 */
}
.text-contents {
  left: 0;
  margin-left: 80px;
  z-index: -1;
}
.text-contents .hero-logo {
  margin-right: 150px;
  width: 30vw;
  height: 100%;
  object-fit: cover;
}
.text-contents {
  left: 0; /* 左側に配置 */
}
.text-contents .msg {
  white-space: nowrap;
  font-size: 2vw;
  margin: 50px 100px 0 0;
}
.img-contents {
  right: 0;
  top: 0px;
  margin-right: 80px;
  z-index: -2;
}
.img-contents img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/*========= Waveを描画するエリア設定 ===============*/
/* スクロール可能なコンテンツのスタイル */
#waveCanvas {
  position: absolute;
  top: -130svh;
  left: 0;
  width: 100%;
  height: 400svh;
  z-index: 10;
  pointer-events: none;  /* キャンバスがクリックを受け付けないようにする */
}
/* AboutのCSS */
.about {
  margin-top: 240svh; /* 上の余白 */
  text-align: left;
  max-width: 1200px;
}

.about-text {
  width: 30vw;
  max-width: 550px;
}

.about-img {
  width: 30vw;
  max-width: 550px;
}

.about-img-01 {
  width: 30vw;
  max-width: 350px;
  height: 40.0125vw;
  max-height: 466.8125px;
  margin-left: 50px;
  margin-right: -60px;
  z-index: 1;
}
.about-img-02 {
  width: 25vw;
  max-width: 280px;
  height: 24.0417vw;
  max-height: 269.27px;
  margin: 350px 0 0 -40px;
  z-index: 0;
}

/* MENUのCSS */
.menu {
  max-width: 1300px;
}
.menu-card {
  width: 30vw;
  max-width: 360px;
  height: 45vw;
  max-height: 500px;
  box-shadow: 15px 15px 0px 5px #ddfff5;
  border-radius: 0px;
}
/* カラーセラピー＆カウンセリングのみ以下を指定 */
.menu-card :nth-child(3) {
  white-space: nowrap; /* テキストの折り返しを禁止 */
}

/* PriceのCSS */
.price {
  max-width: 1300px;
}
.img-price img {
  margin-left: 5vw;
  width: 45vw;
  max-width: 550px;
  height: auto;
  z-index: 0;
}

.price-card {
  border: none;
  background-color: #ddfff5;
  margin-top: 20px;
  margin-left: min(-2vw, 20%, 50px);
  z-index: -1;
}
.price-card-body {
  padding-bottom: 0;
}
.price-ttl {
  border-bottom: 1px solid #ac9434;
}

/* COLOR THERAPY, COUNSELING 共通のCSS */
.wht h2 {
  margin-bottom: -10px;
}
.num {
  font-family: "Herr Von Muellerhoff", "Snell Roundhand", serif;
  margin-bottom: -40px;
  z-index: 1;
  position: relative;
  font-style: italic;
}
.wht-card {
  max-width: 380px;
  line-height: 1.5;
}
.wht-card h3 {
  border-bottom: 1px solid #494746;
}

.card-body p {
  font-size: clamp(16px, 1vw, 18px);
}

.wht-btn {
  padding: 5px;
  z-index: 50;
}

.wht-pls {
  width: 1.2rem;
  height: 1.2rem;
  font-size: 1rem;
  font-weight: 400;
  color: #fdfdfd;
  border: 1px solid #494746;
  border-radius: 50%;
  background-color: #494746;
  text-align: center;
  line-height: 1.1rem;
  vertical-align: middle;
}

.whtis {
  background-color: #494746;
  color: #fdfdfd;
  width: 100%;
  position: relative;
  z-index: 30;
}

.whtis-box {
  display: inline-block;
  width: 35vw;
  max-width: 450px;
  border: 1px solid #ac9434;
  border-radius: 0px;
  padding: 28px 12px 12px;
  position: relative;
  text-align: left;
}

.whtis-box .whtis-box-ttl {
  padding: 4px;
  font-size: 19px;
  font-weight: bold;
  position: absolute;
  top: -21px;
  left: 50%;
  transform: translateX(-50%);
  background: #494746;
  white-space: nowrap;
}

.whtis-box > :last-child {
  margin-bottom: 0;
}

.whtis-txt {
  margin-left: 0;
  margin-right: 0;
}

/* COLOR THERAPYのCSS */
.clrtp {
  max-width: 1300px;
}
.clrtp-card {
  width: 30vw;
  height: 20vw;
  max-height: 250px;
}

/* COUNSELINGのCSS */
.cns {
  max-width: 1300px;
}
.cns-card {
  width: 30vw;
  height: 24vw;
  max-height: 280px;
}

/* THERAPISTのCSS */
.img-intro img {
  width: 40vw;
  max-width: 500px;
  height: 30.16vw;
  max-height: 377px;
}

/* FAQのCSS */
.FAQ h2 {
  margin-bottom: -10px;
}

.card-text h3 {
  border-bottom: 2px solid #ac9434;
  font-size: clamp(16px, 1.5vw, 28px);
}

/* CONTACTのCSS */
.contact-card {
  border: none;
  background-color: #ddfff5;
  line-height: 1.1;
}

.contact-btn {
  height: 60px;
  position: relative;
}
.contact-head {
  font-size: calc(0.8rem + 0.9vw);
}
/* 右側の矢印を絶対配置で右端に固定 */
.contact-arrow {
  position: absolute;
  right: 10px; /* ボタンの右端からの距離を指定 */
  top: 50%; /* 縦方向の中央位置を指定 */
  transform: translateY(-50%); /* 縦方向の位置を中央に調整 */
}

/* SNSアイコンのコンテナ */
.fixed-social-icons {
  position: fixed;
  right: 30px; /* 画面右に配置 */
  bottom: 95px; /* 画面下に配置 */
  display: flex;
  flex-direction: column;
  gap: 15px; /* 各アイコンの間隔 */
  opacity: 0; /* 初期状態で非表示 */
  transition: opacity 1s ease; /* フェードイン/アウトのトランジション */
  z-index: 1000; /* 他の要素よりも上に表示 */
}

/* SNSアイコン自体のスタイル */
.fixed-social-icons a {
  width: 60px; /* アイコンの幅 */
  height: 60px; /* アイコンの高さ */
  /* background-color: #444; 背景色 */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none; /* リンクの下線を除去 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* 軽いシャドウを追加 */
  transition: background-color 0.8s ease; /* 背景色のトランジション */
}

/* アイコンのホバー時のエフェクト */
.fixed-social-icons a:hover {
  background-color: #7ee1c4; /* ホバー時の背景色を変更 */
}

/* アイコン内のイメージスタイル */
.fixed-social-icons a img {
  width: 80%; /* アイコン内のイメージサイズ */
  height: 80%;
  /* border-radius: 50%; 丸くする */
}


/* ページBottom追従ボタンのCSS */
.fixed-bottom.fade-in {
  transition: opacity 1s ease-out;
  opacity: 0;  /* 初期状態では完全に透明 */
  z-index: 99;
}

.bottom-text {
  background-color: #cfb448;
  font-size: 1.2rem;
  text-align: center;
  vertical-align: middle;
  color: #fdfdfd;
  border-right: 2px solid #fdfdfd;
}
.bottom-text p {
  margin: 0;

}
.bottom-btn {
  background-color: #ac9434;
  padding-left: 0;
  padding-right: 0;
  font-size: 1.2rem;
  text-align: center;
  color: #fdfdfd;
  border-right: 2px solid #fdfdfd;
}

.bottom-btn :hover{
  background-color: #f1e8c7;
  font-size: 1.2rem;
  text-align: center;
  color: #ac9434;
}
.bottom-btn .col-12{
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}

/* footerのCSS */
.footer {
  position: absolute;
  margin-top: 100px;
  height: auto;
  max-height: 80px;
  background-color: #494746; /* 背景色を黒に */
  color: #fdfdfd; /* 文字色を白に */
  z-index: 100;
}

/* 中央寄せと左右の余白を指定 */
.footer .d-flex {
  justify-content: space-between; /* 左右に配置 */
  align-items: center; /* 縦方向の中央寄せ */
  padding: 0 20px; /* 左右の余白 */
}

.copy {
  font-size: clamp(0.6rem, 12px, 1.2rem);
}