@charset "utf-8";
/* ==========================================================================
   サービス一覧ページ専用スタイル
   feature-symptom-/flow- 系の共通コンポーネントは assets/css/common.css を
   使い回す。ここにはこのページ固有の背景(bg-wrap)・カテゴリ別お悩みパネル・
   施術メニュー例(価格表)のレイアウトを定義する。
   ========================================================================== */

/* ==========================================================================
   bg(ベージュの丸み背景。FV〜5カテゴリ分すべてを内包)
   ========================================================================== */

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

.service-intro {
  max-width: 1072px;
  padding: 0 15px 40px;
  margin-bottom: 160px;
}

.flow-section{
  max-width: 1072px;
}

/* ==========================================================================
   category(お悩みカテゴリ別パネル)
   ========================================================================== */

.service-categories {
  padding: 0 15px 80px;
}

.service-category {
  gap: 40px;
  margin-bottom: 56px;
}

.service-category:last-child {
  margin-bottom: 0;
}

.service-category-label {
  gap: 15px;
  flex-shrink: 0;
  width: 57px;
}

.service-category-icon {
  display: block;
  height: 100px;
  width: 78px;
  max-width: none;
}

.service-category-name {
  font-family: var(--font-jp-bold);
  font-weight: bold;
  font-size: 24px;
  letter-spacing: 0.72px;
  color: var(--color-black);
  writing-mode: vertical-rl;
  margin-bottom: 0;
}

/* パネル背景は本来「上段は全幅、下段は左側が凹んだ幅」の2枚の角丸矩形を
   重ねた変則形状(Figma上はUnion図形)。991px以下はタグ折り返しで上段の
   実高さが崩れるため通常の角丸矩形とし、992px以上でのみ疑似要素2つを
   重ねて変則形状を再現する。 */
.service-panel {
  position: relative;
  z-index: 0;
  background-color: var(--color-bg-sub);
  border-radius: 48px;
  padding: 40px;
  flex: 1 1 600px;
  min-width: 280px;
}

@media (min-width: 992px) {
  .service-panel {
    background-color: transparent;
  }

  .service-panel::before,
  .service-panel::after {
    content: "";
    position: absolute;
    background-color: var(--color-bg-sub);
    
    z-index: -1;
  }

  .service-panel::before {
    top: 0;
    left: 0;
    right: 0;
    height: 296px;
    border-radius: 48px 48px 0 48px;
  }

  .service-panel::after {
    top: 294px;
    left: 19%;
    right: 0;
    bottom: 0;
    border-radius: 0 0 48px 48px;
  }
}

.service-panel-top {
  gap: 16px;
  margin-bottom: 24px;
}

.service-panel-row {
  gap: 40px;
}

.service-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 92px;
  flex-shrink: 0;
  background-color: #fffffe;
  border-radius: 46px;
  text-align: center;
}

.service-badge p {
  font-family: var(--font-jp-bold);
  font-weight: bold;
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: 0.54px;
  color: var(--color-black);
  margin-bottom: 0;
}

.service-tags {
  gap: 22px;
}

.service-tags p {
  font-family: var(--font-jp-bold);
  font-weight: bold;
  font-size: 18px;
  letter-spacing: 0.54px;
  color: var(--color-black);
  margin-bottom: 0;
  white-space: nowrap;
}

.service-tag-sep {
  width: 1px;
  height: 25px;
  background-color: var(--color-line);
  flex-shrink: 0;
}

.service-approach-text {
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: 0.48px;
  color: var(--color-black);
  margin-bottom: 0;
  flex: 1 1 300px;
}

.service-stage-label {
  font-size: 14px;
  color: var(--color-black);
  background-color: var(--color-bg);
  text-align: center;
  margin: 16px 0 20px;
  padding: 5px 0;
}

.service-menu-list{
  width: 80%;
  margin-left: auto;
}

.service-menu-links {
  border-top: 1px solid var(--color-line);
}

.service-menu-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12.5px 10px;
  border-bottom: 1px solid var(--color-line);
}

.service-menu-link p {
  font-family: var(--font-jp-bold);
  font-weight: bold;
  font-size: 18px;
  letter-spacing: 0.54px;
  color: var(--color-black);
  margin-bottom: 0;
}

.service-menu-link-arrow {
  position: relative;
  width: 20px;
  height: 14.7px;
  flex-shrink: 0;
}

.service-menu-link-arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--color-black);
  border-right: 2px solid var(--color-black);
  transform: translateY(-50%) rotate(45deg);
}

.service-photos {
  gap: 16px;
  margin-top: 24px;
}

.service-photo {
  display: block;
  width: calc(33% - 10px);
  aspect-ratio: 130 / 90;
  object-fit: cover;
  border-radius: 8px;
}

/* ==========================================================================
   price(施術メニューの一例)
   ========================================================================== */

.service-price-section {
  max-width: 1072px;
  padding: 80px 15px;
}

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

.service-price-table {
  max-width: 1070px;
  margin: 0 auto;
}

/* ヘッダー行(メニュー / 料金(税込)) */
.service-price-head-row {
  width: 100%;
}

.service-price-head-cell {
  background-color: var(--color-purple-main);
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.service-price-head-cell p {
  font-family: var(--font-jp-bold);
  font-weight: bold;
  font-size: 18px;
  letter-spacing: 0.54px;
  color: var(--color-black);
  margin-bottom: 0;
  white-space: nowrap;
}

.service-price-head-menu {
  flex: 0 0 70.28%; /* 752 / 1070 */
}

.service-price-head-price {
  flex: 1 1 auto;
}

/* カテゴリ行(整体/鍼灸/猫背/美容鍼) */
.service-price-group {
  width: 100%;
}

.service-price-category {
  flex: 0 0 20.84%; /* 223 / 1070 */
  background-color: var(--color-purple-main);
  border-top: #FFF solid 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  text-align: center;
}

.service-price-category p {
  font-family: var(--font-jp-bold);
  font-weight: bold;
  font-size: 18px;
  letter-spacing: 0.54px;
  color: var(--color-black);
  margin-bottom: 0;
  white-space: nowrap;
}

.service-price-items {
  flex: 1 1 auto;
  min-width: 280px;
}

.service-price-item {
  width: 100%;
}

.service-price-name,
.service-price-value {
  background-color: #fffffe;
  border-bottom: 1px solid var(--color-line);
  border-right: 1px solid var(--color-line);
  display: flex;
  align-items: center;
  min-height: 64px;
  padding: 10px;
  font-family: var(--font-jp);
  font-size: 16px;
  letter-spacing: 0.48px;
  color: var(--color-black);
  margin-bottom: 0;
}

.service-price-name {
  flex: 0 0 62.4%; /* 529 / 847 */
  justify-content: flex-start;
}

.service-price-value {
  flex: 1 1 auto;
  justify-content: center;
  white-space: nowrap;
  border-right: none;
  border-right: 1px solid var(--color-line);
}

/* ==========================================================================
   flow(施術の流れ)
   ========================================================================== */

.flow-inner {
  gap: 40px;
}

/* 各ステップの高さ = 切り替え写真(.flow-photo-wrap)の高さ400px + 20px */
.flow-step {
  min-height: 420px;
}

/* スクロールに合わせて写真がフェードイン・フェードアウトで切り替わる演出。
   ステップ番号が変わるタイミングで対応する写真がフェード表示される
   (assets/js/flow.js が .flow-step の可視状態を見て .is-active を切り替える)。 */
.flow-photo-wrap {
  position: sticky;
  top: 120px;
  width: 100%;
  max-width: 495px;
  /* height: 500px; */
  aspect-ratio: 495 / 500;
  overflow: hidden;
  flex: 1 1 320px;
}

@media (min-width: 992px) {
  /* テキスト側の位置はそのままに、写真だけをウィンドウ右端まで伸ばす
     (tenpo.html/index.htmlのアクセス写真と同じ手法) */
  .flow-inner {
    width: calc(100% + ((100vw - 100%) / 2));
  }

  .flow-photo-wrap {
    max-width: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
}

.flow-photo-img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  /* object-fit: cover; */
  opacity: 0;
  transition: opacity 0.7s ease;
}

.flow-photo-img.is-active {
  opacity: 1;
}

/* SP用の各ステップ直下の写真。PCでは.flow-photo-wrapのフェード切り替え演出を
   使うため非表示にする。 */
.flow-step-photo {
  display: none;
}

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

@media (max-width: 991px) {
  .service-bg-wrap {
    border-bottom-left-radius: 100px;
  }

  .service-intro {
    margin-bottom: 20px;
  }

  .service-category {
    flex-direction: column;
  }

  .service-category-label {
    flex-direction: row;
    width: auto;
    align-items: center;
    padding: 40px 0 0 0;
    background-color: var(--color-bg-sub);
    border-radius: 48px 48px 0 0 ;

  }

  .service-category-name {
    writing-mode: horizontal-tb;
  }

  .service-panel{
    border-radius: 0 0  48px 48px;
    padding: 20px 20px 40px 20px;
  }

  .service-panel-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }


  .service-menu-list{
    width: 100%;
  }

  .service-approach-text{
    flex: 0;
  }

  .service-badge{
    width: 100%;
    height: auto;
    padding: 5px;
  }

  .service-badge br{
    display: none;
  }

  .service-tags{
    gap: 10px;

  
}


  .flow-inner {
    flex-direction: column-reverse;
  }

  .flow-photo-wrap {
    display: none;
  }

  .flow-step {
    min-height: 0;
  }

  .flow-step-photo {
    display: block;
    width: 100%;
    height: 260px;
    object-fit: cover;
    border-radius: 24px;
    margin-top: 24px;
  }
}


@media (max-width: 767px) {
  .service-price-head-cell{
    display: none;
  }
  .service-price-head-row,
  .service-price-group,
  .service-price-item {
    flex-direction: column;
  }

  .service-price-category,
  .service-price-head-menu {
    flex: 1 1 auto;
    width: 100%;
  }

  .service-price-category{
    border-top: none;
  }

  .service-price-name,
  .service-price-value {
    flex: 1 1 auto;
    width: 100%;
    border-right: none;
    justify-content: flex-start;
    min-height:auto;
  }
  .service-price-name{
    border-bottom: none;
    padding-bottom: 0;
  }
  .service-price-value{
    /* font-weight: bold; */
    padding-top: 0;
  }

}