@charset "utf-8";
/* ヘッダー全体のスタイル */
* {
    margin: 0;
    padding: 0;
}


body {
font-family: "メイリオ","ヒラギノ角ゴ ProN",sans-serif;
}

/* 共通フォントスタイル */
h1, h2, h3, h4, h5, p {
  font-weight: normal;
  line-height: 1.7;
}

/* 幅が430px以下の場合 */
@media (max-width: 430px) {
  h1 { font-size: 24px; }
  h2 { font-size: 20px; }
  h3 { font-size: 14px; }
  h4 { font-size: 14px; }
  p { font-size: 13.5px; }
  .jewelrymouthpiece-explanation { font-size: 14px; }
  .post { font-size: 10px; }
  .font-10 { font-size: 10px; }
  .font-12 { font-size: 12px; }
  .font-13 { font-size: 13px; }
  .font-14 { font-size: 14px; }
  .font-15 { font-size: 15px; }
  .font-16 { font-size: 16px; }
  .font-17 { font-size: 17px; }
  .font-18{ font-size: 18px; }
  .font-19 { font-size: 19px; }
  .font-20 { font-size: 20px; }
  .font-22{ font-size: 22px; }
  .font-24{ font-size: 24px; }
  /* その他の要素にも適用 */
}

/* 幅が430px以上1000px以下の場合 */
@media (min-width: 431px) and (max-width: 1000px) {
  h1 { font-size: 26px; }
  h2 { font-size: 22px; }
  h3 { font-size: 16px; }
  h4 { font-size: 16px; }
  p { font-size: 15px; }
  .jewelrymouthpiece-explanation { font-size: 14px; }
  .post { font-size: 10px; }
  .font-10 { font-size: 12px; }
  .font-12 { font-size: 14px; }
  .font-13 { font-size: 15px; }
  .font-14 { font-size: 15px; }
  .font-15 { font-size: 16px; }
  .font-16 { font-size: 17px; }
  .font-17 { font-size: 18px; }
  .font-18{ font-size: 19px; }
  .font-19 { font-size: 20px; }
  .font-20 { font-size: 20px; }
  .font-22{ font-size: 21px; }
  .font-24{ font-size: 22px; }
}

/* 幅が1000px以上の場合 */
@media (min-width: 1001px) {
  h1 { font-size: 30px; }
  h2 { font-size: 26px; }
  h3 { font-size: 24px; }
  h4 { font-size: 22px; }
  p { font-size: 16px; }
  .jewelrymouthpiece-explanation {font-size: 20px;}
  .post { font-size: 17px; }
  .font-10 { font-size: 13px; }
  .font-12 { font-size: 14px; }
  .font-13 { font-size: 15px; }
  .font-14 { font-size: 17px; }
  .font-15 { font-size: 18px; }
  .font-16 { font-size: 19px; }
  .font-17 { font-size: 20px; }
  .font-18 { font-size: 21px; }
  .font-19 { font-size: 22px; }
  .font-20 { font-size: 24px; }
  .font-22 { font-size: 26px; }
  .font-24 { font-size: 28px; }
}

a {
  text-decoration: none;
}

.font-gray {
  color: #2f2f2f;
}

.font-gray-333 {
  color: #333;
}

/* ハンバーガーメニューを開いた際に白透明度77%をかける*/
.page-overlay {
  visibility: hidden; /* デフォルトでは見えない */
  opacity: 0; /* デフォルトでは透明 */
  position: fixed; /* ページ全体に固定 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.77); /* 白色で透明度77% */
  z-index: 999; /* メニューよりも低いが、他の要素よりは高いz-index */
  transition: opacity 0.6s ease; /* opacityは0.6秒かけて変化 */
}

.page-overlay.active {
  visibility: visible; /* 見えるようにする */
  opacity: 1; /* 完全に不透明にする */
}

.global-container {
  position: relative;/* コンテナを相対位置に設定。この設定により、内部の絶対位置要素（ハンバーガーメニューなど）がこの要素に対して位置が決定される */
  max-width: 1000px;
  margin: auto;
}



/* ハンバーガーメニューを開いた際に白透明度77%をかける */
.page-overlay {
  visibility: hidden;
  opacity: 0;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.77);
  z-index: 999;
  transition: opacity 0.6s ease;
}

.page-overlay.active {
  visibility: visible;
  opacity: 1;
}

.global-container {
  position: relative;
  max-width: 1000px;
  margin: auto;
}


@media (max-width: 1560px) {
.nav {
  visibility: hidden;
   position: absolute; 
   top: 50px;
   right: 0;
   width: 75%;
   height: calc(100vh);
   transform: translateX(100%);
   transition: transform .6s ease, visibility 0s .6s;
  z-index: 1000;
  background-color: white;
} 
}


.nav.active {
  visibility: visible;
  transform: translateX(0); /* アクティブ時に左へスライド */
  transition: transform .3s ease;
}




.nav ul {
  list-style: none;
  padding: 0;
  margin: 6% 18%;
}

.nav ul li {
  padding: 16px 0;
  font-size: 16px;
  white-space: nowrap;
}

.nav ul li a {
  color: inherit;
  text-decoration: none;
}

/* 961以上TEL非表示 */

@media screen and (min-width: 961px) {
  .nav li a[href^="tel:"] {
      display: none;
  }
}


/* メニュートグルのスタイル */
.menu-toggle {
  position: absolute;
  top: 45%;
  right: 3%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  cursor: pointer;
  z-index: 1000;
}

/* バーのスタイル */
.bar {
  display: block;
  width: 25px;
  height: 2px;
  margin: 2.5px auto;
  background-color: #333;
  transition: all 0.3s ease;
}


/* ビューポートの幅が390px以下の場合 */
@media (max-width: 430px) {
  .bar {
    width: 25px;
    height: 2px;
    margin: 3px auto;
  }
}


@media (min-width: 430px) and (max-width: 1560px) {
  .bar {
    width: 30px;
    height: 2.4px;
    margin: 3.3px auto;
  }
}


/* ビューポートの幅が1000px以上の場合 */
@media (min-width: 961px) {
  .bar {
    width: 40px;
    height: 3px;
    margin: 4px auto;
  }
}
/* デフォルトスタイル */
.menu-toggle.active .bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.menu-toggle.active .bar:nth-child(2) {
  opacity: 0; /* 2番目のバーを非表示に */
}

.menu-toggle.active .bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}


/* ビューポートの幅が390px以下の場合のメニュートグルの変更スタイル */
@media (max-width: 430px) {
  .menu-toggle.active .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .menu-toggle.active .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }
}

/* ビューポートの幅が390px以上1000px以下の場合のメニュートグルの変更スタイル */
@media (min-width: 430px) and (max-width: 999px) {
  .menu-toggle.active .bar:nth-child(1) {
    transform: translateY(8.8px) rotate(45deg);
  }

  .menu-toggle.active .bar:nth-child(3) {
    transform: translateY(-8.8px) rotate(-45deg);
  }
}
/* ビューポートの幅が1000px以上の場合のメニュートグルの変更スタイル */
@media (min-width: 1000px) {
  .menu-toggle.active .bar:nth-child(1) {
    transform: translateY(11.2px) rotate(45deg);
  }

  .menu-toggle.active .bar:nth-child(3) {
    transform: translateY(-11.2px) rotate(-45deg);
  }
}




header {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px; /* ビューポートに応じて変更する */
  position: fixed; /* ヘッダーを固定位置に設定 */
  top: 0; /* ページの最上部に固定 */
  left: 0; /* ページの最左部から開始 */
  right: 0; /* ページの最右部から開始 */
  width: 100%; /* 幅を100%に設定して画面全体に広がるようにする */
  margin-left: auto; /* 左のマージンを自動に設定 */
  margin-right: auto; /* 右のマージンを自動に設定 */
  z-index: 1000; /* 他の要素より前面に表示 */
  background-color: #fff;
  max-width: 1800px;
}


.logo img,
.menu-toggle img {
  height: auto;
}
header .logo {
  display: flex;
  align-items: center;
  height: 100%; /* ヘッダーの高さに合わせて調整 */
}

header .logo a {
  display: flex;
  align-items: center;
  height: 100%;
}

/* ビューポートの幅に応じてヘッダーの高さを変更 */
/* ビューポートの幅が390px以下の場合 */
@media (max-width: 440px) {
  header {
    height: 50px; /* ヘッダーの高さを50pxに固定 */
  }
  main {
    padding-top: 50px;
}
  .logo img {
    height: 36px; /* ロゴの高さを33pxに固定 */
  }
  .nav {
    top: 50px; /* ヘッダーの高さに応じて動的に変更 */
  }

}

/* ビューポートの幅が390px以上1920px以下の場合 */
@media (min-width: 440px) and (max-width: 1920px) {
  header {
    /* ヘッダーの高さを動的に調整 */
    height: 65px;
  }

  main {
    padding-top: 65px;
}
  .logo img {
    /* ロゴの高さを動的に調整 */
    height:50px;
  }
  .nav {
    top: 65px; /* デスクトップビューでのヘッダーの高さに合わせる */
  }
}

/* 1280px以上のビューポートのスタイル */
@media (min-width: 1560px) {
  header {
    display: flex;
    align-items: center; /* 上下中央揃え */
    justify-content: space-between; /* 要素を両端に配置 */
    height: 70px; /* ヘッダーの高さ */
  }

  .logo {
    visibility: visible; /* ロゴを表示 */
    flex: 0 0 auto; /* ロゴのサイズが内容に基づいて決まるように */
    margin-left: 3%; /* 左側に5%のマージンを設定 */
  }

  .nav {
    visibility: visible; /* ナビゲーションを表示 */
    display: flex; /* ナビゲーションメニューを横一列に配置 */
    top: 70px; /* デスクトップビューでのヘッダーの高さに合わせる */
  }

  .nav .menu-item {
    list-style: none; /* リストのスタイルをなくす */
    display: flex;
    padding: 0;
    margin: 0;
  }

  .nav .menu-item .list {
    margin-left: 25px; /* ナビゲーションアイテム間の間隔 */
  }

  .nav .menu-item .list a {
    text-decoration: none;
    color: #333; /* リンクの色 */
  }
  .menu-toggle {
    display: none; /* ハンバーガーメニューを非表示にする */
  }
  
}

/* ビューポートの幅が1920px以上の場合 */
@media (min-width: 1920px) {
  header {
    height: 80px; /* ヘッダーの高さを100pxに固定 */
  }
  main {
    padding-top: 80px;
}
  .logo img {
    height: 65px; /* ロゴの高さを80pxに固定 */
  }
}


/* 画像の基本スタイル */
.hero-image img {
    width: 100%; /* 画像の横幅を親要素の幅に合わせる */
    height: auto; /* 縦のサイズを自動調整してアスペクト比を保持 */
    display: block; /* ブロックレベル要素として表示 */
    margin: 0 auto; /* 横方向のマージンを自動で設定して中央揃え */
    max-width: 1800px;
    object-fit: cover;
}

/* CSSファイルに追加する場合は、style.css に以下のスタイルを追加 */
.apply-button {
  display: inline-block;
  padding: 10px 20px;
  background-color: grey;
  color: white;
  text-decoration: none;
  border-radius: 8px; /* 角を丸くする */
  font-weight: bold;
  text-align: center;
}

.apply-button-container {
  text-align: center; /* ボタンを中央に配置 */
  margin-top: 80px; /* 上部の余白を調整 */
}

/* ビューポートの幅が430px以下の場合 */
@media (max-width: 500px) {
  .apply-button {
    padding: 8px 16px; /* ボタンのパディングを小さくする */
    font-size: 18px; /* フォントサイズを小さくする */
  }
  .apply-button-container {
    margin-top: 80px; /* 上部の余白を小さくする */
  }
}

/* ビューポートの幅が1280px以上の場合 */
@media (min-width: 600px) {
  .apply-button {
    padding: 16px 36px; /* ボタンのパディングを大きくする */
    font-size: 26px; /* フォントサイズを大きくする */
  }
  .apply-button-container {
    margin-top: 90px; /* 上部の余白を大きくする */
  }
}

/* ビューポートの幅が1920px以上の場合 */
@media (min-width: 1600px) {
  .apply-button {
    padding: 18px 44px; /* ボタンのパディングをさらに大きくする */
    font-size: 30px; /* フォントサイズをさらに大きくする */
  }
  .apply-button-container {
    margin-top: 100px; /* 上部の余白をさらに大きくする */
  }
}

.margin-15 {
  margin: 0 15px 0 15px;
}
.margin-10 {
  margin: 0 10px 0 10px;
}

.margin-8 {
  margin: 0 8px 0 8px;
}

.staff {
  text-align: center;
  margin-top: 100px;
  } 


.main-heading {
    margin: 40px 0 0 18px;
}

.clinicnamechange {
  margin: 16px 18px 0 18px;
}

.intro-text {
    margin: 25px 0 0 18px;
}

.service-jewelrymouthpiece {
    margin: 100px 0 0 3px;
}


.explanation-text13 {
margin: 8px 15px 0 15px;
}

/* サービス画像コンテナのスタイル */
.service-image {
    text-align: center; /* 画像を中央に配置 */
    margin: 15px 15px 0 15px;
  }
  
  /* サービス画像のスタイル */
  .service-image img {
    width: 100%; /* 画像の横幅を親要素の幅に合わせる */
    height: auto; /* 縦のサイズを自動調整してアスペクト比を保持 */
  }

.servicemenu-image {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 900px;
}

.servicemenu-image img {
  width: 100%; /* 画像の幅をコンテナの幅に合わせる */
  height: auto; /* 画像の高さを自動調整してアスペクト比を維持する */
}

  .service-image2 {
    text-align: center; /* 画像を中央に配置 */
  }

  .service-image2 img {
    width: 100%; /* 画像の横幅を親要素の幅に合わせる */
    height: auto; /* 縦のサイズを自動調整してアスペクト比を保持 */
  }
  

  .servicemenu-image-620 {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 620px;
  }
  
  .servicemenu-image-620 img {
    width: 100%; /* 画像の幅をコンテナの幅に合わせる */
    height: auto; /* 画像の高さを自動調整してアスペクト比を維持する */
  }

  .servicemenu-image-600 {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 600px;
  }
  
  .servicemenu-image-600 img {
    width: 100%; /* 画像の幅をコンテナの幅に合わせる */
    height: auto; /* 画像の高さを自動調整してアスペクト比を維持する */
  }
  

/* 画像ギャラリー全体のスタイル */
.image-gallery {
    display: flex; /* フレックスボックスを使用して要素を横並びにする */
    justify-content: space-between; /* 各要素の間に均等なスペースを配置 */
    margin: 10px 15px 0 15px;
}

.image-gallery2 {
  display: flex; /* フレックスボックスを使用して要素を横並びにする */
  justify-content: space-between; /* 各要素の間に均等なスペースを配置 */
  margin: 0; /* 余白を0に設定 */
  padding: 0; /* 余白を0に設定、ただし次のスタイルで上書きされます */
}

.treatment-examples-heading {
    text-align: center; /* テキストを中央に揃える */
    margin-top: 15px; /* 上部に15pxのマージンを追加 */
}


/* 個々の画像コンテナのスタイル */
.image-container {
    flex: 1; /* フレックスアイテムが利用可能なスペースを均等に占めるように設定 */
    padding: 3px; /* 左右に3pxのパディングを追加 */
    margin: 0; /* 余白を0に設定 */
  }

/* 画像のスタイル */
.image-container img {
    width: 100%; /* 画像の横幅を親要素の幅に合わせる */
    height: auto; /* 縦のサイズを自動調整してアスペクト比を保持 */
    display: block;
}

.service-teethjewelry {
    margin-top: 90px; 
    margin-left: 3px; 
  }

.service-whitening {
    margin: 100px 0 0 3px;
}




.container-all {
  margin: 0 15px 0 15px;
}
/* コンテナ全体のスタイル */
.container {
  display: flex; /* フレックスボックスを使用して子要素を並べる */
  flex-direction: column; /* 子要素を縦方向に並べる */
  align-items: center; /* 子要素を中央に揃える */
  width: 100%; /* コンテナの幅を全体の100%に設定 */
  margin: 0 auto; /* 上下に10px、左右に15pxのマージンを設定 */
}


/* 各行のスタイル */
.row {
  display: flex; /* フレックスボックスを使用 */
  justify-content: center; /* 中央揃え */
  gap: 10px; /* 要素間のギャップ */
  margin: 16px 15px 0 15px;
}

/* 画像コンテナのスタイル（1行目） */
.row .image-container {
  width: calc(30% - 10px); /* 3列のレイアウト、ギャップを引いた値 */
  box-sizing: border-box; /* ボーダーやパディングを幅と高さに含める */
  text-align: center; /* テキスト中央揃え */
}

/* 画像のスタイル */
.image-container img {
  width: 100%; /* 幅を100%に設定 */
  height: auto; /* 高さを自動調整 */
  object-fit: cover; /* コンテナに合わせて調整 */
  display: block;
}

@media (max-width: 600px) {
  .row .image-container {
    width: 100%;
  }
}


/* スタッフ名と役職のスタイル */
.staff-name, .post {
  margin: 6px 0; /* 上下のマージン */
}


/* 画像コンテナ内の要素のスタイル（共通） */
.image-container, .image-container2 {
  text-align: center; /* テキストを中央揃えに設定 */
}

/* 画面幅が532px以下の場合 */
@media (max-width: 532px) {
  .image-container2 img {
    width: calc(43.5vw); /* 幅を画面の50%に設定 */
  }
}

.staff-name {
text-align: center;
}

.post {
text-align: center;
}

.infomation {
    margin-top: 100px; /* 上の余白を100pxに設定 */
    text-align: center;
}

.infomation-latest {
  margin-left: auto; /* 左のマージンを自動に設定 */
  margin-right: auto; /* 右のマージンを自動に設定 */
}

.custom-hr {
  max-width: 600px; /* 最大横幅を600pxに設定 */
  margin-left: auto; /* 左のマージンを自動に設定 */
  margin-right: auto; /* 右のマージンを自動に設定 */
    border: none;
    height: 1px;
    background-color: black;
    margin-bottom: 10px;
    margin-top: 2px;
}

.text-center {
    text-align: center;
}

.text-center-pink::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 2px;
  background-color: #d86a8d;
}
    
.tel a {
    color: inherit; /* 親要素の色を継承する */
    color: #005dc0
}

.simple-title {
  font-weight: 600;
  letter-spacing: 0.1em;
  color: #222222;
}

.simple-title-005 {
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #222222;
}

.consultation-hours {
  margin-left: auto; /* 左のマージンを自動に設定 */
  margin-right: auto; /* 右のマージンを自動に設定 */
}

.consultationday {
    width: 95%;
    text-align: center;
    margin: 10px auto; 
    border-collapse: collapse;
    }

.consultationday, .consultationday th, .consultationday td {
  font-weight: 300; /* テーブル内のテキストを細字に設定 */
}

.consultationday,
.consultationday th,
.consultationday td {
    border: 1px solid black;
}

.consultationday {
    width: 100%; /* テーブルの幅を100%に設定 */
    border-collapse: collapse; /* ボーダーの重なりを解消 */
}

.consultationday th,
.consultationday td {
    text-align: center; /* テキストを中央揃えにする */
    padding: 8px; /* セルの内側にパディングを追加 */
}

    

.copyright {
    background-color: black;
    color: white;
    text-align: center;
    padding: 10px;
    font-size: 8px;
}

/*↓access,map*/
.map iframe {
  width: 100%;
  height: 250px;
  display: block;
  margin: 0 auto;
}
/*↑map*/

/* ↓料金表のスタイル */
.spacing-01 {
  letter-spacing: 0.1em;
}
.price-item {
  display: flex;
  margin-bottom: 15px;
}
.item-label {
  margin-right: 10px;
  min-width: 90px;
}

.tax-included {
  color: #666;
}
/* ↑料金表 */

/* ここから下ジュエリーマウスピース矯正のページ */

.jewelrymouthpiece-explanation {
  margin: 12px 0 22px 0;
}
.margin-top-3 {
  margin-top: 3px;
}
.margin-top-5 {
  margin-top: 5px;
}
.margin-top-8 {
  margin-top: 8px;
}
.margin-top-10 {
  margin-top: 10px;
}
.margin-top-15 {
  margin-top: 15px;
}
.margin-top-20 {
  margin-top: 20px;
}
.margin-top-25 {
  margin-top: 25px;
}
.margin-top-30 {
  margin-top: 30px;
}
.margin-top-40 {
  margin-top: 40px;
}
.margin-top-45 {
  margin-top: 45px;
}
.margin-top-50 {
  margin-top: 50px;
}
.margin-top-60 {
  margin-top: 60px;
}
.margin-top-70 {
  margin-top: 70px;
}
.margin-top-80 {
  margin-top: 80px;
}
.margin-top-90 {
  margin-top: 90px;
}
.margin-top-95 {
  margin-top: 95px;
}

.margin-top-100 {
  margin-top: 100px;
}
.margin-top-110 {
  margin-top: 110px;
}
.margin-top-120 {
  margin-top: 120px;
}
.margin-top-130 {
  margin-top: 130px;
}
.margin-top-140 {
  margin-top: 140px;
}
.margin-top-150 {
  margin-top: 150px;
}
.margin-top-160 {
  margin-top: 160px;
}


.padding-top-5 {
  padding-top: 5px;
}
.padding-top-10 {
  padding-top: 10px;
}
.padding-top-15 {
  padding-top: 15px;
}
.padding-top-20 {
  padding-top: 20px;
}
.padding-top-25 {
  padding-top: 25px;
}
.padding-top-30 {
  padding-top: 30px;
}
.padding-bottom-10 {
  padding-bottom: 10px;
}
.padding-bottom-20 {
  padding-bottom: 20px;
}
.padding-bottom-30 {
  padding-bottom: 30px;
}
.padding-bottom-40 {
  padding-bottom: 40px;
}
.padding-bottom-50 {
  padding-bottom: 50px;
}
.padding-bottom-60 {
  padding-bottom: 60px;
}
.padding-bottom-70 {
  padding-bottom: 70px;
}
.padding-bottom-80 {
  padding-bottom: 80px;
}


@media (min-width: 600px) {
.margin-top-3 {
  margin-top: 5px;
}
.margin-top-5 {
  margin-top: 8px;
}
.margin-top-8 {
  margin-top: 12px;
}
.margin-top-10 {
  margin-top: 15px;
}
.margin-top-15 {
  margin-top: 23px;
}
.margin-top-20 {
  margin-top: 30px;
}
.margin-top-25 {
  margin-top: 38px;
}
.margin-top-30 {
  margin-top: 45px;
}
.margin-top-40 {
  margin-top: 60px;
}
.margin-top-45 {
  margin-top: 68px;
}
.margin-top-50 {
  margin-top: 75px;
}
.margin-top-60 {
  margin-top: 90px;
}
.margin-top-70 {
  margin-top: 100px;
}
.margin-top-80 {
  margin-top: 110px;
}
.margin-top-90 {
  margin-top: 120px;
}
.margin-top-95 {
  margin-top: 130px;
}
.margin-top-100 {
  margin-top: 140px;
}
.margin-top-110 {
  margin-top: 150px;
}
.margin-top-120 {
  margin-top: 160px;
}
.margin-top-130 { 
  margin-top: 170px;
}
.margin-top-140 {
  margin-top: 180px;
}
.margin-top-150 {
  margin-top: 190px;
}
.margin-top-160 {
  margin-top: 200px;
}



.padding-top-5 {
  padding-top: 8px;
}
.padding-top-10 {
  padding-top: 15px;
}
.padding-top-15 {
  padding-top: 23px;
}
.padding-top-20 {
  padding-top: 30px;
}
.padding-top-25 {
  padding-top: 38px;
}
.padding-top-30 {
  padding-top: 45px;
}
.padding-bottom-10 {
  padding-bottom: 15px;
}
.padding-bottom-20 {
  padding-bottom: 38px;
}
.padding-bottom-30 {
  padding-bottom: 35px;
}
.padding-bottom-40 {
  padding-bottom: 50px;
}
.padding-bottom-50 {
  padding-bottom: 60px;
}
.padding-bottom-60 {
  padding-bottom: 70px;
}
.padding-bottom-70 {
  padding-bottom: 80px;
}
.padding-bottom-80 {
  padding-bottom: 90px;
}

}




.margin-left-5{
  margin-left: 5px;
}
.margin-left-8{
  margin-left: 8px;
}
.margin-left-10{
  margin-left: 10px;
}
.margin-left-15{
  margin-left: 15px;
}
.margin-left-20{
  margin-left: 20px;
}
.margin-left-25{
  margin-left: 25px;
}
.margin-left-30{
  margin-left: 30px;
}

.margin-left-right-10{
  margin-left: 10px;
  margin-right: 10px;
}

.margin-left-right-15{
  margin-left: 15px;
  margin-right: 15px;
}

.padding-left-right-10{
  padding-left: 10px;
  padding-right: 10px;
}

.resize-image70 img {
  width: 70%;
}

.max-width-600 {
  max-width: 600px;
  margin: 0 auto;
}



.global-container-900 {
  position: relative;
  max-width: 900px;
  margin: auto;
  overflow: hidden;
}

.global-container-800 {
  position: relative;
  max-width: 800px;
  margin: auto;
  overflow: hidden; 
}

.global-container-700 {
  position: relative;
  max-width: 700px;
  margin: auto;
  overflow: hidden;
}

.global-container-620 {
  position: relative;
  max-width: 620px;
  margin: auto;
  overflow: hidden;
}

.title-center-refined {
  text-align: center;
  font-weight: 500;
  letter-spacing: 0.1em;
}

/* ギャラリーグリッド */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  max-width: 800px;
}

.gallery-item {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  cursor: pointer;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.gallery-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
  transition: background-color 0.2s ease;
}

.gallery-item:hover .gallery-overlay {
  background-color: rgba(0, 0, 0, 0.2);
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .gallery-grid {
    gap: 3px;
  }
  
  .gallery-header h2 {
    font-size: 1.5rem;
  }
}

/* step */
.step {
  background: white;
  border-radius: 5px;
  padding: 15px;
  margin-bottom: 15px;
  position: relative;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.step-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  gap: 12px;
}

.step-number {
  background: linear-gradient(135deg, #f49b9b, #f0c0c0);
  color: white;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(66, 153, 225, 0.2);
}

.label {
  font-size: 13px;
  font-weight: 500;
  opacity: 0.9;
  letter-spacing: 0.5px;
}

.number {
  font-size: 28px;
  font-weight: bold;
  line-height: 1;
}

.step-title {
  font-size: 20px;
  margin: 0;
  color: #333333;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.step-description {
  margin: 0 0 30px;
  line-height: 1.8;
  color: #414141;
  font-size: 15px;
}

@media (max-width: 600px) {
  .step-number {
      width: 40px; /* 70px * 0.7 */
      height: 40px; /* 70px * 0.7 */
  }

  .label {
      font-size: 9px; /* 13px * 0.7 */
  }

  .number {
      font-size: 14px;
  }

  .step-title {
      font-size: 16px; 
  }

  .step-description {
      font-size: 14px;
      margin: 0 5px 10px;
  }
}

.arrow {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 26px 35px 0 35px;
  border-color: #f5bcbc transparent transparent transparent;
  position: absolute;
  bottom: -21px;
  left: 50%;
  transform: translateX(-50%);
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.1));
  z-index: 1; /* Add z-index to ensure arrow appears above next step */
}

.arrow svg {
  width: 100%;
  height: 100%;
}

@media (min-width: 768px) {
  .step {
      padding: 40px;
  }

  .counseling-desk {
      width: 350px;
  }

  .tablet {
      width: 320px;
      height: 220px;
  }

  .step-title {
      font-size: 22px;
  }

  .step-description {
      font-size: 16px;
  }
  .arrow {
      border-width: 40px 50px 0 50px;
      bottom: -28px;
  }
}
/* ↑step */


/* ↓リップアートメイクページ-ピンク↓ */
.pink-title-01 {
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #333;
  position: relative;
  display: inline-block;
  padding-bottom: 3px;
}

.pink-title-01::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1.4px;
  background: linear-gradient(to right, rgba(216, 106, 141, 0.2), rgba(216, 106, 141, 0.8), rgba(216, 106, 141, 0.2));
}

.pink-title-02 {
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #d86a8d;
  position: relative;
  padding-bottom: 5px;
}

.pink-title-02::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 150px;
    height: 2px;
    background: linear-gradient(to right, #d86a8d, transparent);
}

.pink-title-03 {
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #ca4972;
  position: relative;
  display: inline-block;
  padding-bottom: 3px;
}

.pink-title-03::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1.4px;
  background: linear-gradient(to right, rgba(216, 106, 141, 0.2), rgba(216, 106, 141, 0.8), rgba(216, 106, 141, 0.2));
}


.simple-title-gray {
  color: #4f4f4f;
  font-weight: 600;
  position: relative;
  padding-bottom: 5px;
}

.fontgray-underpink {
  color: #4f4f4f;
  font-weight: 600;
  position: relative;
  padding-bottom: 5px;
}

.fontgray-underpink::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 150px;
  height: 2px;
  background: linear-gradient(to right, #f0c0c0, transparent);
}


.font-weight-600 {
  font-weight: 600;
}

.fontgray-600 {
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #333;
  position: relative;
}

.font-lightgray-600 {
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #4c4c4c;
  position: relative;
}


.fontgold-600 {
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #4b4200;
}

.fontpink-600 {
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #ca4972;
}

.fontlightpink-600 {
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #d86a8d;
}

.simple-title-gray::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 150px;
  height: 2px;
  background: linear-gradient(to right, #f0c0c0, transparent);
}




.borderleft-pink-title {
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #3c3c3c;
  border-left: 3px solid #f0c0c0;
  padding-left: 12px;
  align-items: center;
}

.borderleft-gold-title {
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #3c3c3c;
  border-left: 3px solid #a18100;
  padding-left: 12px;
  align-items: center;
}


.borderleft-blue-title {
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #3c3c3c;
  border-left: 3px solid #006885;
  padding-left: 12px;
  align-items: center;
}

@media (min-width: 768px) {
.pink-title-01::after {
  height: 2px;
}
.fontgray-underpink::after {
  width: 250px;
  height: 3px;

}
.pink-title-02::after {
  width: 250px;
  height: 3px;
}
}

/* セクションスタイル */
.content-section {
  position: relative;
  border-radius: 15px;
  overflow: hidden;
}

.content-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: -1;
}

.title-center-refined-02 {
  text-align: center;
  font-weight: 500;
  letter-spacing: 0.1em;
  position: relative;
  display: inline-block;
  left: 50%;
  transform: translateX(-50%);
}

.title-center-refined-02::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 2px;
  background-color: #d86a8d;
}

/* ピンク下線ハイライト用 */
.pink-underline {
color: #d86a8d;          
font-weight: 600;
position: relative;
display: inline-block;
}

.pink-underline::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 3px;
background: linear-gradient(
  to right,
  rgba(216, 106, 141, 0.3),
  rgba(216, 106, 141, 0.1)
);
border-radius: 3px;
}

/* リスト項目のスタイル */
.feature-list {
  list-style: none;
  padding-left: 4px;
  margin-top: 15px;
}

.feature-list li {
  position: relative;
  padding-left: 20px;
  padding-top: 8px;
  color: #393939;
  line-height: 1.7;
}

.feature-list li::before {
  content: '•';
  position: absolute;
  left: 1px;
  top: 50%;
  transform: translateY(-50%);
  color: #d57794;
  font-size: 26px;
}

/* アコーディオン */

  .accordion-item {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    margin-bottom: 16px;
    transition: all 0.3s ease;
  }

  .accordion-item.active {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  }

  .accordion-header {
    width: 100%;
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    border: none;
    text-align: left;
    font-weight: 500;
    background: linear-gradient(to right, #fff4f6, #ffffff);
    transition: all 0.3s ease;
  }

  .accordion-header:hover {
    background: linear-gradient(to right, #f8e8ed, #fefcfd);
  }

  .accordion-title {
    display: flex;
    align-items: center;
    color: #333333;
  }

  .accordion-icon {
    color: #d86a8d;
    transition: transform 0.3s ease, color 0.3s ease;
  }

  .accordion-item.active .accordion-icon {
    transform: rotate(180deg);
    color: white;
  }

  .accordion-content {
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }

  .accordion-item.active .accordion-content {
    max-height: 1000px; /* 十分な高さを確保 */
  }

  .accordion-body {
    padding: 20px;
    color: #555;
  }

/* 予約ボタン */
.apply-button-pink {
  text-align: center;
  position: relative;
}

.apply-button-pink::before,
.apply-button-pink::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 100px;
  background: linear-gradient(to right, transparent, rgba(216, 106, 141, 0.3));
}

.apply-button-pink::before {
  left: 20%;
}

.apply-button-pink::after {
  right: 20%;
  background: linear-gradient(to left, transparent, rgba(216, 106, 141, 0.3));
}

.apply-button-pink-02 {
  display: inline-block;
  padding: 18px 34px;
  background: linear-gradient(45deg, #d86a8d, #e8a0b6);
  color: white;
  text-decoration: none;
  border-radius: 50px;
  font-weight: bold;
  text-align: center;
  box-shadow: 0 10px 20px rgba(216, 106, 141, 0.3);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  z-index: 1;
  font-size: 26px;
  letter-spacing: 0.02em;
}

.apply-button-pink-03 {
  display: inline-block;
  padding: 10px 34px;
  background: linear-gradient(45deg, #e25a85, #ff93b4);
  color: white;
  text-decoration: none;
  border-radius: 50px;
  font-weight: bold;
  box-shadow: 0 10px 20px rgba(216, 106, 141, 0.3);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  z-index: 1;
  font-size: 26px;
  letter-spacing: 0.02em;
}

.text-center-pink {
  text-align: center;
  position: relative;
}

.text-center-pink::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 2px;
  background-color: #d86a8d;
}


/* 料金表セクション */
.price-title-pink {
  text-align: center;
  margin-bottom: 30px;
  position: relative;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #4f4f4f;
}

.price-title-pink::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: linear-gradient(45deg, #d86a8d, #e8a0b6);
}

.price-plan-pink {
  background-color: #fff;
  border-radius: 15px;
  padding: 30px;
  margin-bottom: 30px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.price-plan-pink::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: linear-gradient(45deg, #d86a8d, #e8a0b6);
}

.price-plan-pink h3 {
  color: #d86a8d;
  margin-bottom: 15px;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(216, 106, 141, 0.2);
}

.price-plan-pink h4 {
  color: #555;
}


.price-plan-gold {
  background-color: #fff;
  border-radius: 15px;
  padding: 15px;
  margin-bottom: 30px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.price-plan-gold::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: linear-gradient(45deg, #a18100, #e8e8a0);
}

.price-plan-gold h3 {
  color: #7c6300;
  margin-bottom: 15px;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(161, 129, 0, 0.2);
}


.price-plan-blue {
  background-color: #fff;
  border-radius: 15px;
  padding: 15px;
  margin-bottom: 30px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.price-plan-blue::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: linear-gradient(45deg, #07b9d4, #b0c9dd);
}

.price-plan-blue h3 {
  color: #006885;
  margin-bottom: 15px;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(0, 104, 133, 0.2);
}

.price-plan-blue h4 {
  color: #555;
}

/* ------ 特典カード ------ */
.benefits-card{
margin-top:18px;
background:linear-gradient(to right,#fff4f8,#ffffff);
border-radius:12px;
padding:20px;
box-shadow:0 4px 15px rgba(216,106,141,.1);
border:1px solid rgba(216,106,141,.2);
}
.benefits-title{
color:#d86a8d;font-size:14px;font-weight:600;text-align:center;
margin:0 0 8px 0;padding-bottom:5px;
border-bottom:1px dashed rgba(216,106,141,.3);
display:flex;align-items:center;justify-content:center;
}
.benefits-icon{color:#d86a8d;margin:0 8px;font-size:14px}
.benefits-list{list-style:none;padding:0;margin:0}
.benefits-list li{display:flex;align-items:flex-start;margin-bottom:12px}
.benefits-list li:last-child{margin-bottom:0}
.benefits-check{color:#d86a8d;margin-right:10px;flex-shrink:0;}
.benefit-content{display:flex;flex-direction:column}
.benefit-highlight{font-weight:600;color:#555555;font-size:14px}
.benefit-value{color:#d86a8d;font-size:14px}

/* ------ 注意書き ------ */
.notes-container{
margin-top:18px;background:#f8f9fa;border-radius:10px;padding:15px
}
.note-item{display:flex;margin-bottom:12px}
.note-item:last-child{margin-bottom:0}
.note-icon{color:#6c757d;margin-right:10px;flex-shrink:0;margin-top:2px}
.note-text{font-size:14px;color:#555;margin:0;line-height:1.6}

/* ------ レスポンシブ簡易調整 ------ */
@media (max-width:768px){
.benefits-card{padding:10px}
.notes-container{padding:10px}
}



/* レスポンシブ対応 */
@media (max-width: 768px) {
  .apply-button-pink-02 {
      padding: 15px 28px;
      font-size: 15px;
  }
  .apply-button-pink-03 {
    padding: 8px 30px;
    font-size: 15px;
}
  .apply-button-pink::before,
  .apply-button-pink::after {
      width: 60px;
  }
}

@media (max-width: 480px) {   
  .apply-button-pink::before,
  .apply-button-pink::after {
      display: none;
  }
  .price-section {
      padding: 30px 15px 1px 15px;
  }
  .price-plan-pink {
      padding: 15px;
  }
}

/* ↑リップアートメイクページ-ピンク↑ */


.fixed {
  display: block; /* display: none; を block に変更 */
  position: fixed;
  /* z-index: 1000; */
  left: 0;
  right: 0;
  bottom: 0;
}


.sp-fixed-footer {
  box-sizing: border-box;
  width: 100%;
}
.sp-fixed-footer ul {
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  list-style: none;
  margin: 0;
  width: 100%;
}
.sp-fixed-footer ul li {
  box-sizing: border-box;
  font-size: 16px;
  list-style: none;
  margin: 0;
  padding: 11px 0;
  text-align: center;
  width: 60%;
  border-radius: 10px;
  background: #F5769C; 
}
.sp-fixed-footer ul li a img {
  filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.70));
}
.sp-fixed-footer ul li a{
  color: #FFF ;
  align-items: center;
  justify-content: center;
  display: flex;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.70);
}
.sp-fixed-footer ul li:last-child {
  width: 40%;
  border-radius: 10px;
  background: #4CBED9;
}
.sp-fixed-footer ul li .fixedfooter-icon {
  padding-right: 6px;
  align-items: center;
  justify-content: center;
  display: flex;
}

@media screen and (max-width: 599px) {
  .sp-fixed-footer {
      box-sizing: border-box;
      width: 100%;
  }
  }

  @media screen and (min-width: 601px) {
    .sp-fixed-footer {
        display: none; /* PCサイズで非表示 */
    }
}