/* ==========================================================
   Flora Tokyo - トップページ専用スタイル
   ========================================================== */

/* ===== ヒーロー =====
   画像そのものに金色のエンブレムが入っているため、
   別途ロゴは重ねず、文字はエンブレムを避けて下寄せにしている。
   画像を切らずに全体を見せるため height ではなく aspect-ratio で高さを決める。 */
.hero {
  position: relative;
  overflow: hidden;
  background: #f6efe4;
}

.hero picture { display: block; }

.hero-bg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1942 / 809;   /* hero.jpg の実寸比 */
  object-fit: cover;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  padding: 0 16px;
  color: var(--ink);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 62%, rgba(255, 255, 255, .34) 100%);
}

/* 画像に焼き込まれた金のエンブレムのすぐ下から文字を始める。
   縦並びの flex なので、この % は「ヒーローの高さ」に対する割合になる。
   エンブレムの下端は実測で PC 39.8% / スマホ 39.5%。 */
.hero-overlay::before {
  content: "";
  flex: 0 0 42%;
}

.hero-title {
  margin: 0;
  font-family: var(--latin);
  font-size: clamp(30px, 5.4vw, 58px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: .14em;
  text-indent: .14em;
  /* 白文字＋金の縁取り。金色は画像のエンブレムから採取した値 */
  color: #fff;
  text-shadow:
     1px  1px 0 #a8842f,
    -1px  1px 0 #a8842f,
     1px -1px 0 #a8842f,
    -1px -1px 0 #a8842f,
     0 3px 12px rgba(90, 65, 20, .30);
}

/* text-stroke が使えるブラウザでは、そちらの方が縁が均一に出る */
@supports (-webkit-text-stroke: 1px #000) {
  .hero-title {
    -webkit-text-stroke: 1.4px #a8842f;
    paint-order: stroke fill;   /* 縁を文字の内側に食い込ませない */
    text-shadow: 0 3px 12px rgba(90, 65, 20, .30);
  }
}

.hero-sub {
  margin: 4px 0 0;
  font-size: clamp(9px, 1.5vw, 13px);
  letter-spacing: .5em;
  text-indent: .5em;
  color: #6b5842;
  text-shadow: 0 1px 8px rgba(255, 255, 255, .95);
}

/* キャッチコピー：墨色の文字を細い金の罫線で上下から挟む。
   明るい画像の上でも読めるよう、白いにじみを敷いている。 */
.hero-catch {
  margin: clamp(8px, 1.6vw, 18px) 0 0;
  padding: clamp(5px, .9vw, 10px) clamp(12px, 2vw, 28px);
  font-size: clamp(10px, 1.7vw, 15px);
  letter-spacing: .12em;
  color: #1d1813;
  border-top: 1px solid rgba(168, 132, 47, .9);
  border-bottom: 1px solid rgba(168, 132, 47, .9);
  text-shadow: 0 1px 7px rgba(255, 255, 255, .95), 0 0 2px rgba(255, 255, 255, .9);
}

@media (max-width: 768px) {
  .hero-bg { aspect-ratio: 1552 / 1013; }  /* hero_sp.jpg の実寸比 */
}

/* ===== 予約バナー ===== */
.reserve {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  max-width: 1000px;
  margin: 0 auto;
  padding: 22px 16px 6px;
}

.reserve-item img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .10);
  transition: transform .25s;
}

.reserve-item:hover img { transform: translateY(-3px); }

/* ===== 単独画像ブロック ===== */
.plain-image {
  max-width: 1000px;
  margin: 0 auto;
  padding: 10px 16px;
  text-align: center;
}

.plain-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}

/* ===== CONCEPT ===== */
.concept-hero {
  margin: 0 0 30px;
}

.concept-hero img {
  display: block;
  width: 100%;
  height: clamp(200px, 34vw, 380px);
  object-fit: cover;
  border-radius: 6px;
}

/* 枠線つきカード＋左上の丸数字とリボン（元サイトの p-article-has-number） */
.concept-item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 212px;
  gap: 24px;
  align-items: start;
  margin: 0 0 58px;
  padding: 84px 20px 24px;
  border: 3px solid var(--beige);
  border-radius: 20px;
}

.concept-ribbon {
  position: absolute;
  top: 18px;
  left: -3px;
  width: min(340px, 78%);
  height: 30px;
  background: var(--beige);
}

.concept-ribbon::after {
  content: "";
  position: absolute;
  inset: 4px 10px 4px 84px;
  border-top: 1px dashed rgba(255, 255, 255, .85);
  border-bottom: 1px dashed rgba(255, 255, 255, .85);
}

.concept-no {
  position: absolute;
  top: -12px;
  left: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: var(--beige);
  color: #fff;
  font-family: var(--serif);
  font-size: 38px;
  line-height: 1;
}

.concept-img img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 4px;
}

.concept-title {
  margin: 0 0 .7em;
  font-size: 21px;
  font-weight: 500;
  color: var(--sub);
  letter-spacing: .06em;
}

.concept-text p {
  margin: 0;
  font-size: 14.5px;
  line-height: 2;
}

/* ===== SYSTEM ===== */
.notice {
  margin: 0 auto 34px;
  padding: 18px 20px;
  max-width: 640px;
  background: var(--sub);
  color: #fff;
  border-radius: 4px;
}

.notice-title {
  margin: 0 0 .5em;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .08em;
}

.notice p { margin: 0; font-size: 13.5px; line-height: 1.9; }

.plan-name {
  margin: 34px 0 12px;
  text-align: center;
  font-family: var(--latin);
  font-size: 26px;
  font-weight: 400;
  letter-spacing: .18em;
  text-indent: .18em;
  color: var(--sub);
}

.price-table {
  width: min(560px, 100%);
  margin: 0 auto;
  border-collapse: collapse;
  font-size: 14px;
}

.price-table th,
.price-table td {
  padding: 10px;
  border: 1px solid var(--hairline);
  color: var(--ink);
  font-weight: 400;
  text-align: left;
}

.price-table th {
  width: 60%;
  letter-spacing: .06em;
}

/* アクセス表は横罫のみ（元サイトに合わせる） */
.access-table th,
.access-table td {
  border: none;
  border-bottom: 1px solid var(--hairline);
}

.access-table { width: min(660px, 100%); }
.access-table th { width: 50%; }

/* ===== THERAPIST / SCHEDULE ===== */
.block-title {
  margin: 0 0 .8em;
  text-align: center;
  font-size: 19px;
  font-weight: 500;
  color: var(--sub);
  letter-spacing: .06em;
}

.therapist-shots {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 26px;
}

.therapist-shots img {
  display: block;
  width: 100%;
  height: clamp(160px, 26vw, 280px);
  object-fit: cover;
  border-radius: 4px;
}

/* ===== 求人・相互リンク ===== */
.banner-area { text-align: center; }

.recruit-type {
  display: inline-block;
  max-width: 320px;
  width: 100%;
  height: auto;
  border-radius: 4px;
}

.banner-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
}

.banner-list img { display: block; }

/* ===== スマホ対応 ===== */
@media (max-width: 720px) {
  .concept-item {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 72px 14px 20px;
  }
  .concept-img img {
    width: min(260px, 80%);
    margin: 0 auto;
  }
  .concept-no {
    width: 68px;
    height: 68px;
    font-size: 30px;
    top: -8px;
    left: 10px;
  }
  .concept-ribbon { top: 14px; height: 24px; }
  .concept-ribbon::after { inset: 3px 8px 3px 66px; }
  .concept-title { font-size: 18px; }
  .plan-name { font-size: 22px; }
  .block-title { font-size: 17px; }
}