@charset "utf-8";
/* ==========================================================================
   トップページ専用スタイル
   レイアウト(コンテナ幅・flex配置)は極力 Bootstrap のユーティリティクラスを
   HTML側で使う前提とし、ここでは色・フォント・余白・背景画像など
   Bootstrap で表現できない部分のみを定義する。
   ========================================================================== */

/* ==========================================================================
   hero(FV) + 背景(ベージュの丸み背景)
   ========================================================================== */

.fv-inner{
  margin-bottom: 100px;
}

.fv-photo {
  display: block;
  width: 100%;
  height: 586px;
  object-fit: cover;
  border-bottom-left-radius: 300px;
}


.hero-bg-wrap {
  background-color: var(--color-bg);
  border-bottom-left-radius: 180px;
  overflow: hidden;
}

.hero-inner {
  max-width: var(--w-max);
  padding: 0 15px 80px;
  gap: 24px;
}

.hero-content {
  flex: 1 1 380px;
  max-width: 475px;
  padding-top: 60px;
}

.hero-eyebrow {
  font-family: var(--font-jp);
  font-size: 15px;
  line-height: 1.7;
  letter-spacing: 3px;
  color: var(--color-black);
  margin-bottom: 16px;
}

.hero-title {
  margin-bottom: 40px;
}

.hero-title p {
  font-family: var(--font-jp-bold);
  font-weight: 600;
  font-size: 32px;
  line-height: 1.7;
  letter-spacing: 4px;
  color: var(--color-black);
  margin-bottom: 0;
}

.hero-title p strong {
  color: #b394b7;
  font-weight: 600;
}

.hero-desc {
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: 0.48px;
  color: var(--color-black);
  margin-bottom: 0;
}

.hero-photo-wrap {
  position: relative;
  flex: 1 1 420px;
  max-width: 780px;
  margin-bottom: 90px;
}

.hero-photo {
  display: block;
  width: 100%;
  height: 320px;
  object-fit: cover;
  border-top-left-radius: 160px;
  border-bottom-left-radius: 160px;
}

.hero-buttons {
  position: absolute;
  right: 40%;
  bottom: -60px;
  /* bottom: 0px; */
  transform: translateX(-50%);
  display: flex;
  align-items: flex-end;
  z-index: 100;
}

.fv-photo-wrap{
  position: relative;
}

.hero-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  text-align: center;
}

.hero-btn--search {
  width: 130px;
  height: 130px;
  margin-bottom: 30px;
  margin-right: -15px;
  background-color: var(--color-purple-main);
  z-index: 2;
}

.hero-btn--line {
  width: 145px;
  height: 145px;
  z-index: 1;
  background-color: var(--color-green);
}

.hero-btn-icon {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  margin-bottom: 6px;
}

.hero-btn--search .hero-btn-icon {
  width: 26px;
  height: 26px;
  background-image: url("/system_panel/uploads/images/top_search_icon.svg");
}

.hero-btn--line .hero-btn-icon {
  width: 36px;
  height: 36px;
  background-image: url("/system_panel/uploads/images/top_line_chat_icon.svg");
}

.hero-btn p {
  font-family: var(--font-jp-bold);
  font-weight: bold;
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: 0.45px;
  color: var(--color-black);
  margin-bottom: 0;
}


@media (max-width: 991px) {
  .fv-photo {
    height: 260px;
    border-bottom-left-radius: 80px;
  }
}

/* ==========================================================================
   insta banner
   ========================================================================== */

.insta {
  max-width: var(--w-max);
  padding: 20px 15px;
  border-top: 1px solid #ddd8cb;
  border-bottom: 1px solid #ddd8cb;
}

.insta-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background-color: #fff;
  background-image: url("/system_panel/uploads/images/top_insta_icon.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  margin-right: 16px;
}

.insta-heading {
  font-family: var(--font-jp-bold);
  font-weight: bold;
  font-size: 18px;
  line-height: 2;
  letter-spacing: 0.54px;
  color: var(--color-black);
  margin: 0 24px 0 0;
}

.insta-text {
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: 0.48px;
  color: var(--color-black);
  margin: 0;
}

.insta .arrow-more {
  margin-left: auto;
}

/* ==========================================================================
   problems(あなたのお悩みから探す)
   ========================================================================== */

.problems-section {
  max-width: var(--w-max);
  /* padding: 80px 15px; */
  background-color: var(--color-bg-sub);
  border-radius: 40px;
  padding: 48px 80px;
}

.problems-panel {
  gap: 26px;
}

.problem-card {
  position: relative;
  z-index: 0;
  width: calc(33.4% - 20px);
  max-width: 100%;
  min-height: 273px;
  border-radius: 25px;
  padding: 30px;
  transition: transform 0.3s ease;
}

.problem-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--color-bg);
  border-radius: inherit;
  transition: transform 0.3s ease;
}
.problem-card:hover::before {
  transform: scale(1.05);
}


.problem-card:hover {
  box-shadow:0 4px 24px rgba(47, 47, 47, 0.06);
}

.problem-card-icon {
  display: block;
  height: 90px;
  width: auto;
  margin: 0 auto 16px;
}

.problem-card:hover .problem-card-title{
  color: var(--color-purple);

}

.problem-card-title {
  font-family: var(--font-jp-bold);
  font-weight: bold;
  font-size: 18px;
  line-height: 2;
  letter-spacing: 0.54px;
  color: var(--color-black);
  text-align: center;
  margin-bottom: 8px;
}

.problem-card-text {
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: 0.48px;
  color: var(--color-black);
  margin-bottom: 0;
}

.problem-card .arrow-more {
  position: absolute;
  right: 24px;
  bottom: 24px;
}

/* ==========================================================================
   reasons(女性に選ばれる理由)
   ========================================================================== */

.reasons-section {
  max-width: var(--w-max);
  padding: 80px 15px;
}

.reasons-inner {
  gap: 40px;
}

.reasons-vertical-group {
  gap: 16px;
}

.reasons-vertical {
  writing-mode: vertical-rl;
  /* height: 420px; */
}

.reasons-vertical-note {
    font-family: var(--font-jp);
  font-size: 16px;
  line-height: 2;
  letter-spacing: 0.14em;
  color: var(--color-black);
  margin: 0 8px 0 0;




}

.reasons-vertical-title {
  font-family: var(--font-jp-bold);
  font-weight: bold;
  font-size: 28px;
  line-height: 1.4;
  letter-spacing: 1.6px;
  color: var(--color-black);
  margin: 0;
}

.reason-item {
  gap: 40px;
  margin-bottom: 40px;
}

.reason-item-body {
  flex: 1 1 240px;
  min-width: 240px;
}

.reasons-list {
  flex: 1 1 280px;
  min-width: 280px;
}

.reason-item:last-child {
  margin-bottom: 0;
}

.reason-item-photo {
  display: block;
  width: 256px;
  max-width: 100%;
  height: 192px;
  aspect-ratio: 256 / 192 ;
  object-fit: cover;
  border-radius: 16px;
  flex-shrink: 0;
}

.reason-item-title {
  font-family: var(--font-jp-bold);
  font-weight: bold;
  font-size: 18px;
  line-height: 2;
  letter-spacing: 0.54px;
  color: var(--color-black);
  margin-bottom: 16px;
}

.reason-item-text {
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: 0.48px;
  color: var(--color-black);
  margin-bottom: 0;
}

/* ==========================================================================
   menu(施術メニュー)
   ========================================================================== */

.menu-section {
  max-width: var(--w-max);
  padding: 80px 15px;
}

.menu-header {
  gap: 32px;
  margin-bottom: 56px;
}

.menu-cards {
  gap: 32px 26px;
}

.menu-card {
  width: calc(34% - 26px);
  max-width: 100%;
}


.menu-card-photo-pair {
  display: block;
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 10px;
  /* margin-bottom: 8px; */
}

.menu-card-photo-box{
  aspect-ratio: 313 / 200;
  overflow: hidden;
  object-fit: cover;
  border-radius: 10px;
}

.menu-card-photo{
  transition: transform .6s ease;
}

.menu-card:hover .menu-card-photo{
  transform: scale(1.1);
}


.menu-card-photo-pair {
  display: flex;
  overflow: hidden;
}

.menu-card-photo-pair img {
  width: 50%;
  height: 100%;
  object-fit: cover;
}

.menu-card-badge-row {
  margin-bottom: 8px;
  margin-top: 8px;
}

.menu-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 21px;
  border-radius: 11px;
  background-color: var(--color-purple-main);
  font-family: var(--font-jp);
  font-weight: bold;
  font-size: 14px;
  color: #fff;
  letter-spacing: 0.5px;
  margin: 0 16px 0 0;
}
.menu-badge::before {
  content: "●";
  margin-top: 10px;
  line-height: 0;
  color: #FFF;
  font-size: 6px;
  display: block;
  width: 10px;
  height: 10px;
}



.menu-badge--accent {
  background-color: var(--color-accent);
}

.menu-card-title {
  font-family: var(--font-jp-bold);
  font-weight: bold;
  font-size: 18px;
  line-height: 2;
  letter-spacing: 0.54px;
  color: var(--color-black);
  margin-bottom: 0;
  white-space: nowrap;
}

.menu-card-text {
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: 0.48px;
  color: var(--color-black);
  margin-top: 8px;
  margin-bottom: 0;
}

/* ==========================================================================
   price(料金の目安)
   ========================================================================== */

.price-section {
  max-width: var(--w-max);
  padding: 80px 15px;
}

.price-header {
  margin-bottom: 56px;
}

.price-header-inner {
  gap: 24px;
}

.price-table {
  max-width: 1070px;
  width: 100%;
}

.price-cell-menu,
.price-cell-price {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border: 1px solid var(--color-line);
  border-top: none;
  text-align: center;
}

.price-row:first-child .price-cell-menu,
.price-row:first-child .price-cell-price {
  border-top: 1px solid var(--color-line);
}

.price-row:first-child .price-cell-menu{
  border-right: 1px solid #FFF;

}

.price-cell-menu {
  border-right: none;
  flex: 1 1 auto;
}

.price-cell-price {
  width: 240px;
  flex-shrink: 0;
}

.price-row-head .price-cell-menu,
.price-row-head .price-cell-price {
  background-color: var(--color-purple-main);
  border-color: var(--color-purple-main);
}

.price-cell-menu p,
.price-cell-price p {
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: 0.48px;
  color: var(--color-black);
  margin-bottom: 0;
}

.price-row-head .price-cell-menu p,
.price-row-head .price-cell-price p {
  font-family: var(--font-jp-bold);
  font-weight: bold;
  font-size: 18px;
  line-height: 2;
  letter-spacing: 0.54px;
}

/* ==========================================================================
   self care(ご自宅でのセルフケアに)
   ========================================================================== */

.selfcare-section {
  max-width: var(--w-max);
  padding: 80px 15px;
}

.selfcare-header {
  margin-bottom: 56px;
}

/* ==========================================================================
   voice(患者さまの声)
   ========================================================================== */

.voice-section {
  max-width: var(--w-max);
  padding: 80px 15px;
}

.voice-header {
  margin-bottom: 56px;
}

.voice-cards {
  margin-right:calc(50% - 50vw);
}

.voice-card {
  background-color: #fff;
  border-radius: 20px;
  padding: 32px 24px;
  /* width: 400px; */
  max-width: 100%;
  height: 100%;
}

.voice-card-photo {
  display: block;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  margin-right: 20px;
}

.voice-card-text {
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: 0.48px;
  color: var(--color-black);
  margin-bottom: 8px;
}

.voice-card-divider {
  border-top: 1px solid #ddd8cb;
  margin-bottom: 8px;
}

.voice-card-meta {
  font-family: var(--font-jp);
  font-size: 15px;
  line-height: 1.7;
  letter-spacing: 0.45px;
  color: var(--color-black);
  margin-bottom: 0;
}

.splide__arrow svg{
  fill: #FFF;
}
.splide__arrow{
  background: var(--color-purple-main);
}


/* ==========================================================================
   access(アクセス・院のご案内)
   ========================================================================== */

.access-section {
  max-width: var(--w-max);
  padding: 80px 15px;
}

.access-inner {
  gap: 56px;
  /* テキスト側の位置はそのままに、写真だけをウィンドウ右端まで伸ばす */
  width: calc(100% + ((100vw - 100%) / 2));
}

.access-inner .access-photo img {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}


/* ==========================================================================
   レスポンシブ
   ========================================================================== */

  @media (max-width: 1077px) {
    .hero-buttons{
      right:-70px;
    }
  }


@media (max-width: 991px) {
  
    .fv-inner{
      margin-bottom: 50px;
    }

    .mv_slider{
        margin: 0 calc(50% - 50vw);
        width: 100vw;
    }

  .hero-buttons{
    display: none;
  }

  .hero-bg-wrap {
    border-bottom-left-radius: 100px;
  }

  .hero-content {
    max-width: 100%;
    padding-top: 20px;
  }

  .hero-photo-wrap {
    margin-bottom: 100px;
  }


  .reasons-inner {
    flex-direction: column;
  }

  .reasons-vertical {
    writing-mode: horizontal-tb;
    height: auto;
  }

  .reason-item{
    gap: 10px;
  }

  .reason-item-photo {
    width: 100%;
    aspect-ratio: 256 / 192 ;
  }

  .reasons-vertical-title {
    margin-bottom: 8px;
  }
  .access-photo{
    height: 500px;
  }
  .access-inner .access-photo img{
    border-radius: 0;
  }
  .access-inner{
    width: 100%;
  }
}

@media (max-width: 767px) {

  .price-cell-price {
    width: 45%;
    flex-shrink: 0;
  }

  .problems-section{
    padding:40px 20px;
  }
  .hero-title{
    margin-bottom: 20px;
  }
  .hero-title p {
    font-size: 26px;
  }

  .hero-btn--line {
    width: 120px;
    height: 120px;
  }

  .hero-btn--search {
    width: 108px;
    height: 108px;
  }

  .menu-card{
    width: 100%;
  }


  .problem-card,
  /* .menu-card, */
  .voice-card {
    width: 100%;
    padding: 10px;
  }
  .voice-card img{
    margin: 0 auto 10px;
  }
}



/* ふわふわアニメーション */
.fluffy {
  /* width: 100px;
  height: 100px;
  margin: 80px auto;
  background: #ff7650; */

  /* アニメーション名 アニメーションにかかる時間 アニメーションの繰り返し回数 */
  /* fluffy 3秒 無限ループ */
  animation: fluffy 3s infinite;
}

@keyframes fluffy {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}