@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Sans+JP:wght@100..900&display=swap');


/* ==========================================================================
   共通設定(全ページ共通・変数・リセット)
   ========================================================================== */

:root {
  --color-bg: #f6f4ee;
  --color-bg-sub: #efece5;
  --color-black: #2f2f2f;
  --color-purple: #8e77ac;
  --color-purple-main: #dcbedd;
  --color-purple-sub2: #f8f4fa;
  --color-green: #bdd74d;
  --color-gray: #666666;
  --color-accent: #f4c077;
  --color-line: #dedcda;
  --color-houmonbg: #FFF9F1;

  --w-1072:1072px;
  --w-max:1072px;

  --font-en: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  --font-jp-bold: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-jp);
  color: var(--color-black);
  overflow-x: hidden;
}

a {
  text-decoration: none;
  color: inherit;
  transition: 0.5s;
}

a:hover{
  text-decoration: none;
  opacity: 0.8;
  transition: 0.5s;

}

img {
  max-width: 100%;
}

/* ==========================================================================
   表示切り替えユーティリティ(主にbr用。SP/PCの境目は991px/992pxで統一)
   ========================================================================== */

.sp-hide {
  display: inline;
}

@media (max-width: 991px) {
  .sp-hide {
    display: none;
  }
}

.pc-hide {
  display: inline;
}

@media (min-width: 992px) {
  .pc-hide {
    display: none;
  }
}

/* ==========================================================================
   セクション見出し(英字 + 日本語タイトル + 説明文の組み合わせ)
   Contact / Problems / Menu / Price / Self care / Voice / Access など
   同じ形式の見出しをサイト全体で使い回す。
   ========================================================================== */

.section-eyebrow {
  font-family: var(--font-jp-bold);
  font-weight: bold;
  font-size: 14px;
  line-height: 1.7;
  letter-spacing: 0.7px;
  color: var(--color-purple);
  margin-bottom: 0;
}

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



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

/* アクセントカラー(オレンジ)版の見出し。訪問鍼灸ページなどで使用 */
.section-eyebrow--accent {
  color: var(--color-accent);
}

@media (max-width: 767px) {
  .section-title {
    font-size: 28px;
    margin-bottom: 0;
  }
}



/* ==========================================================================
   flow(ご利用の流れ・施術の流れ)
   訪問鍼灸・サービスページなどで使用する共通の縦タイムライン型ステップリスト。
   ========================================================================== */

.flow-section {
  max-width: 1288px;
  padding: 80px 15px;
}

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

.flow-list {
  max-width: 641px;
  margin: 0 auto;
  position: relative;
  padding-left: 96px;
}

.flow-list::before {
  content: "";
  position: absolute;
  top: 28px;
  bottom: 28px;
  left: 28px;
  width: 1px;
  background-color: var(--color-line);
}

.flow-step {
  position: relative;
  padding-bottom: 48px;
}

.flow-step:last-child {
  padding-bottom: 0;
}

.flow-num {
  position: absolute;
  top: 0;
  left: -96px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-jp-bold);
  font-weight: bold;
  font-size: 24px;
  color: var(--color-black);
}

.flow-num--accent {
  background-color: var(--color-accent);
  color: #fff;
}

.flow-title {
  font-family: var(--font-jp-bold);
  font-weight: bold;
  font-size: 18px;
  line-height: 1.5;
  color: var(--color-black);
  margin-bottom: 8px;
  padding-top: 14px;
}

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

/* ==========================================================================
   パンくずリスト
   TOPページを除く全ページで使用する共通パーツ。
   ========================================================================== */

.breadcrumb-wrap {
  max-width: 1288px;
  padding: 20px 20px 80px 0;
}

@media (max-width: 991px) {
  .breadcrumb-wrap {
    padding: 20px 20px 20px 0;
  }
}

@media (max-width: 759px) {
  .breadcrumb-wrap {
    padding: 20px 20px 10px 0;
  }
}

.breadcrumb {
  gap: 8px;
  background-color: transparent;
  padding: 0;
  margin-bottom: 0;
}

.breadcrumb p {
  font-family: var(--font-jp);
  font-size: 14px;
  color: var(--color-black);
  margin-bottom: 0;
  white-space: nowrap;
}

.breadcrumb p.breadcrumb-current {
  color: var(--color-gray);
}

/* パンくずの区切り(装飾シェブロン) */
.breadcrumb-sep {
  position: relative;
  display: inline-block;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.breadcrumb-sep::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  border-top: 2px solid var(--color-gray);
  border-right: 2px solid var(--color-gray);
  transform: translate(-50%, -50%) rotate(45deg);
}

/* パンくずの「ホーム」アイコン(家の形) */
.icon-home {
  position: relative;
  display: inline-block;
  width: 16px;
  height: 14px;
  flex-shrink: 0;
}

.icon-home::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 7px solid var(--color-purple);
}

.icon-home::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 11px;
  height: 7px;
  background-color: var(--color-purple);
}

/* ==========================================================================
   FV(ヒーロー)
   TOPページを除く全ページで使用する共通パーツ。
   コンテンツ(見出し)は1050px幅に収め、写真は右側いっぱいまで表示する。
   ========================================================================== */

.fv-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  /* gap: 40px; */
  padding: 0 0 0 max(15px, calc((100% - 1078px) / 2 + 15px));
}

.fv-content {
  flex: 0 1 475px;
  max-width: 1050px;
}

@media (max-width: 991px) {
  .fv-inner {
    margin-top: 90px;
  }
  .fv-content {
    margin-bottom: 20px;
  }
}


.fv-eyebrow {
  font-family: var(--font-jp-bold);
  font-weight: bold;
  font-size: 18px;
  line-height: 1.7;
  letter-spacing: 0.9px;
  color: var(--color-purple);
  margin-bottom: 0px;
}

.fv-eyebrow--accent {
  color: var(--color-accent);
}

.fv-heading {
  font-family: var(--font-jp-bold);
  font-weight: bold;
  font-size: 48px;
  line-height: 1.5;
  letter-spacing: 9.6px;
  color: var(--color-black);
  margin-bottom: 0;
}



.fv-photo-wrap {
  flex: 1 1 480px;
  min-width: 0;
}



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

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

  .fv-heading {
    font-size: 36px;
  }

  .fv-photo-wrap {
    /* padding-right: 15px; */

  }
}

/* ==========================================================================
   FAQ(よくある質問)
   TOPページを除く全ページで使用する共通パーツ。
   Qをクリックすると該当のAが開閉する(assets/js/faq.js でクラスを切り替える)。
   ========================================================================== */

.faq-section {
  max-width: 1072px;
  margin: 0 auto;
  padding: 0 15px 160px;
}

.faq-inner {
  gap: 40px;
}

.faq-header {
  flex: 0 0 auto;
  width: 322px;
  max-width: 100%;
}

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

.faq-item {
  padding: 24px 0;
  border-bottom: 1px solid #ddd8cb;
}

.faq-item:first-child {
  padding-top: 0;
}

.faq-item:last-child {
  border-bottom: none;
}

.faq-question {
  gap: 24px;
  cursor: pointer;
}

.faq-answer {
  display: flex;
  gap: 24px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.3s ease, margin-top 0.3s ease;
}

.faq-item.is-open .faq-answer {
  max-height: 600px;
  margin-top: 16px;
  opacity: 1;
}

.faq-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 0;
}

.faq-badge--q {
  background-color: var(--color-purple-main);
  color: #fff;
}

.faq-badge--a {
  background-color: var(--color-bg);
  color: var(--color-black);
}

.faq-question-text {
  flex: 1 1 auto;
  font-family: var(--font-jp-bold);
  font-weight: bold;
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: 0.54px;
  color: var(--color-black);
  margin-bottom: 0;
}

.faq-answer-text {
  flex: 1 1 auto;
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: 0.48px;
  color: #333;
  margin-bottom: 0;
}

.faq-toggle {
  position: relative;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.faq-toggle::before,
.faq-toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: var(--color-gray);
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.faq-toggle::before {
  width: 14px;
  height: 2px;
}

.faq-toggle::after {
  width: 2px;
  height: 14px;
}

.faq-item.is-open .faq-toggle::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}

@media (max-width: 991px) {
  .faq-list{
    margin-bottom: 0;
  }
  .faq-inner {
    flex: 1 1 0;
  }
}

/* ==========================================================================
   feature(当院の特徴系セクション)
   TOPページを除く複数ページで使用する共通パーツ。
   外側の背景パネル(角丸・padding・max-width)はページごとに固有のため、
   各ページのCSSで定義する。ここでは内部のテキスト・バッジ・タグ部分のみ。
   ========================================================================== */

.feature-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-bottom: 24px;
}

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

.feature-symptom-row {
  margin-top: 24px;
  gap: 40px;
}

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

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

.feature-symptom-tags {
  gap: 22px;
  margin-bottom: 8px;
}

.feature-symptom-tags p {
  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;
}

.feature-symptom-sep {
  width: 1px;
  height: 25px;
  background-color: var(--color-black);
  flex-shrink: 0;
}

.feature-symptom-extra {
  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;
}

@media (max-width: 991px) {
  .feature-symptom-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* 特徴セクションの外枠(ベージュの角丸パネル)。
   鍼灸・美容鍼・猫背矯正など、幅1070px前後で揃うページで共通利用する。
   整体ページのみ幅・角丸が異なるため seitai.css に独自定義がある。 */
.feature-wrap {
  padding: 0 15px 80px;
  margin: 0 auto;
}

.feature-panel {
  max-width: 1070px;
  margin: 0 auto;
  background-color: var(--color-bg-sub);
  border-radius: 70px;
  padding: 58px 121px;
}

@media (max-width: 991px) {
  .feature-panel {
    padding: 20px 24px;
  }
}

/* ==========================================================================
   machine(お身体の状態に合わせた機器を使用します)
   TOPページを除く複数ページで使用する共通パーツ。
   ========================================================================== */

.machine-section {
  max-width: 1050px;
  margin: 0 auto;
  padding: 0 15px 80px;
}

.machine-inner {
  gap: 40px;
}

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

.machine-vertical {
  writing-mode: vertical-rl;
}

.machine-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;
}

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

.machine-cards {
  flex: 1 600px;
  gap: 56px 67px;
  justify-content: flex-end;
}

.machine-card {
  width: 313px;
  max-width: 100%;
}

.machine-card-photo {
  display: block;
  aspect-ratio: 313 / 200;
  width: 100%;
  object-fit: cover;
  border-radius: 16px;
  margin-bottom: 8px;
}

.machine-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: 8px;
}

.machine-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;
}

@media (max-width: 991px) {
  .machine-inner {
    flex-direction: column;
  }

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

  .machine-vertical-title {
    margin-bottom: 8px;
    letter-spacing: 0.54px;
  }

  .machine-vertical-note {
    letter-spacing: 0.54px;
    line-height: 1.4;
    margin-bottom: 30px;
  }

  .machine-vertical-note br {
    display: none;
  }
}

@media (max-width: 767px) {
  .machine-card {
    width: 100%;
  }
}

/* ==========================================================================
   price(施術メニュー)
   TOPページを除く複数ページで使用する共通パーツ。
   ========================================================================== */

.price-section {
  max-width: 1072px;
  margin: 0 auto;
  padding: 80px 15px 180px;
}

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

/* 1ページ内に複数の価格系セクション(Menu/Option/Courseなど)を
   連続配置する場合、2つ目以降の見出しに付与して間隔を空ける。 */
.price-header--sub {
  margin-top: 56px;
}

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

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

.price-item-photo,
.price-item-photo-placeholder {
  display: block;
  width: 293px;
  height: 187px;
  max-width: 100%;
  aspect-ratio: 293 / 187;
  flex-shrink: 0;
  border-radius: 16px;
  object-fit: cover;
}

.price-item-photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #d9d9d9;
}

.price-item-photo-placeholder p {
  font-family: var(--font-jp);
  font-size: 14px;
  color: var(--color-gray);
  margin-bottom: 0;
}

.price-item-body {
  flex: 1 1 420px;
  min-width: 280px;
}

.price-item-head {
  gap: 24px;
  margin-bottom: 36px;
}

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

.price-item-rates {
  text-align: right;
}

.price-item-rates p {
  font-family: var(--font-jp);
  font-size: 15px;
  letter-spacing: 0.45px;
  color: var(--color-black);
  margin-bottom: 4px;
  white-space: nowrap;
}

.price-item-rates p:last-child {
  margin-bottom: 0;
}

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

.price-tiers {
  gap: 12px;
  margin-bottom: 16px;
}

.price-tier {
  align-items: flex-end;
}

.price-tier-total {
  font-family: var(--font-jp);
  font-size: 15px;
  letter-spacing: 0.45px;
  color: var(--color-black);
  margin-bottom: 4px;
}

.price-tier-unit {
  display: inline-block;
  background-color: var(--color-purple);
  border-radius: 12px;
  padding: 2px 20px;
  font-family: var(--font-jp);
  font-size: 15px;
  letter-spacing: 0.45px;
  color: #fdf8f5;
  margin-bottom: 0;
  white-space: nowrap;
}

.price-divider {
  border-top: 1px solid #ddd8cb;
  margin-bottom: 56px;
}

@media (max-width: 767px) {
  .price-item-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .price-item-rates {
    text-align: left;
  }

  .price-tier {
    align-items: flex-start;
  }
}

/* ==========================================================================
   共通パーツ: 「もっと見る」丸矢印アイコン(装飾)
   ========================================================================== */

.arrow-more {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: var(--color-purple-main);
  flex-shrink: 0;
  transition : 1s;
}

a:hover .arrow-more{
  background-color:  var(--color-purple);
  
}

.arrow-more::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 7px solid #fdf8f5;
  transform: translate(-35%, -50%);
}

/* ==========================================================================
   self care商品カード(TOP・物販紹介ページなどで使用)
   ========================================================================== */

.selfcare-cards {
  gap: 24px;
}

.selfcare-card {
  position: relative;
  /* width: 313px; */
  width: calc( 33.3% - 26px);
  max-width: 100%;
  background-color: #fff;
  border-radius: 27px 27px 0 27px;
  overflow: hidden;
  padding-bottom: 48px;
  
  transition: transform .6s ease;
}

.selfcare-card:hover {
  opacity: 0.8;
  text-decoration: none;
  box-shadow: 0 4px 24px rgba(47, 47, 47, 0.06);
}

 .selfcare-card-photo{
  aspect-ratio: 382 / 243;
  object-fit: cover;
  overflow: hidden;
}

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

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

.selfcare-card:hover p {
  text-decoration: none;
}

.selfcare-card-photo {
  display: block;
  width: 100%;
  /* height: 243px; */
  object-fit: cover;
  
}



.selfcare-card-tag {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--color-purple);
  border-radius: 27px;
  padding: 4px 20px;
  font-family: var(--font-jp);
  font-size: 15px;
  color: #fff;
  letter-spacing: 0.45px;
  white-space: nowrap;
  margin-bottom: 0;
}

.selfcare-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: 20px 20px 8px;
}

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

.selfcare-card .arrow-more {
  position: absolute;
  right: 20px;
  bottom: 20px;
}

@media (max-width: 767px) {
  .selfcare-card {
    width: 100%;
  }
}

/* ==========================================================================
   ご挨拶パネル(写真+文章。院長ご挨拶・訪問鍼灸プロフィールなどで使用)
   TOPページを除く複数ページで使用する共通パーツ。
   ========================================================================== */

.greeting-panel {
  background-color: var(--color-bg-sub);
  border-radius: 70px;
  padding: 40px;
  gap: 32px;
}

.greeting-row {
  gap: 24px;
}

.greeting-photo {
  display: block;
  width: 417px;
  max-width: 100%;
  height: 398px;
  object-fit: cover;
  border-radius: 20px;
  flex-shrink: 0;
}

.greeting-text {
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: 0.48px;
  color: var(--color-black);
  flex: 1 1 300px;
  min-width: 280px;
}

.greeting-text p {
  margin-bottom: 0;
}

@media (max-width: 767px) {
  .greeting-panel {
    border-radius: 40px;
    padding: 24px;
  }
}

/* ==========================================================================
   アクセス情報の行(院名・住所・電話など)、診療時間表
   TOPページ・店舗紹介ページなど複数ページで使用する共通パーツ。
   ========================================================================== */

.access-info {
  max-width: 637px;
  width: 100%;
}

.access-photo {
  flex: 1 1 320px;
}

.access-photo img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  border-radius: 250px;
}

.access-row {
  gap: 16px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--color-line);
}

.access-row-label {
  width: 160px;
  flex-shrink: 0;
  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;
}

.access-row-value {
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: 0.48px;
  color: #333;
  margin-bottom: 0;
}

.access-hours-panel {
  background-color: var(--color-purple-sub2);
  border-radius: 20px;
  padding: 32px 24px;
  margin-top: 56px;
}

.access-hours-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;
}

.hours-chart-header,
.hours-chart-row {
  align-items: center;
}

.hours-chart-header {
  padding-bottom: 8px;
}

.hours-chart-row {
  padding: 12px 0;
  border-top: 1px solid var(--color-line);
}

.hours-chart-row:last-child {
  border-bottom: 1px solid var(--color-line);
}

.hours-chart-label-col {
  width: 96px;
  flex-shrink: 0;
}

.hours-chart-label-col p {
  font-family: var(--font-jp);
  font-size: 14px;
  color: var(--color-black);
  margin-bottom: 0;
  white-space: nowrap;
}

.hours-chart-day-col {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hours-chart-day-col--wide {
  flex: 1.6;
}

.hours-chart-day-col p {
  font-family: var(--font-jp-bold);
  font-weight: bold;
  font-size: 16px;
  color: var(--color-black);
  margin-bottom: 0;
  white-space: nowrap;
}

.hours-mark {
  /* width: 16px;
  height: 16px; */
  flex-shrink: 0;
  color: var(--color-purple);
}

.hours-mark--line {
  width: 16px;
  height: 2px;
  border-radius: 1px;
  background-color: var(--color-black);
}

.hours-legend {
  gap: 12px 24px;
  margin-top: 20px;
}

.hours-legend-item {
  align-items: center;
}

.hours-legend-item .hours-mark {
  margin-right: 8px;
}

.hours-legend-item p {
  font-family: var(--font-jp);
  font-size: 15px;
  color: var(--color-black);
  margin-bottom: 0;
  white-space: nowrap;
}

@media (max-width: 767px) {
  .access-row {
    flex-direction: column;
  }

  .access-row-label {
    width: 100%;
    margin-bottom: 8px;
  }
}