/* サイトトップ暫定版 */
:root {
  --st-green: #234e3a;
  --st-green-soft: rgba(35, 78, 58, 0.18);
  --st-brown: #5c4a3a;
  --st-brown-soft: rgba(92, 74, 58, 0.2);
  --st-text: #1f2c22;
  --st-mincho: "リュウミン B-KL", "Ryumin B-KL", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --st-sans: "新ゴ R", "Shin Go Regular", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--st-sans);
  color: var(--st-text);
  background: #fff;
  line-height: 1.7;
}

img {
  max-width: 100%;
  height: auto;
}

.site-top {
  --st-leaf-w: min(9.5rem, 22vw);
  --st-stone-w: min(9rem, 20vw);
  width: min(1100px, 100%);
  margin: 0 auto;
  padding: 0 0 2.25rem;
}

/* ===== Hero =====
 * メイン画像の左右に余白を取り、BGイラストの横半分が見える配置
 */
.site-top-hero {
  position: relative;
  width: 100%;
  margin: 0 0 2.75rem;
  padding:
    calc(var(--st-leaf-w) * 0.18)
    calc(var(--st-stone-w) * 0.72)
    calc(var(--st-stone-w) * 0.22)
    calc(var(--st-leaf-w) * 0.5);
  overflow: visible;
  z-index: 0;
}

/* 葉・石はメイン画像の下層（BG）。横半分はパディング側にはみ出す */
.site-top-hero__illust {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

.site-top-hero__illust--leaf {
  top: calc(var(--st-leaf-w) * 0.18 + 20px);
  left: 0;
  width: var(--st-leaf-w);
  transform: rotate(-14deg);
  transform-origin: 30% 70%;
}

.site-top-hero__illust--stone {
  right: 0;
  bottom: 0;
  width: var(--st-stone-w);
}

.site-top-hero__main {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  vertical-align: middle;
}

/* ===== Services（左右3行を subgrid で水平揃え） ===== */
.site-top-services {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto;
  column-gap: 0;
  row-gap: 1.1rem;
  width: auto;
  margin: 0 calc(var(--st-stone-w) * 0.72) 3.5rem calc(var(--st-leaf-w) * 0.5);
  padding: 0;
  align-items: start;
}

.site-top-card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  justify-items: center;
  text-align: center;
  background: transparent;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}

.site-top-card__display {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-size: 0;
  line-height: 0;
}

.site-top-card__display img {
  display: block;
  max-width: none !important;
  object-fit: fill;
}

.site-top-card--yomogi .site-top-card__display img {
  width: 360px;
  height: 40px;
}

.site-top-card--esthetic .site-top-card__display img {
  width: 208px;
  height: 40px;
}

.site-top-card__body {
  margin: 0;
  font-family: var(--st-mincho);
  font-size: 0.95rem;
  line-height: 1.9;
  color: var(--st-green);
  max-width: 22em;
}

.site-top-btn {
  position: relative;
  display: inline-block;
  line-height: 0;
  text-decoration: none;
}

.site-top-btn img {
  display: block;
  width: 343px;
  height: 83px;
  max-width: none !important;
  object-fit: fill;
}

.site-top-btn__hover {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.site-top-btn:hover .site-top-btn__hover,
.site-top-btn:focus-visible .site-top-btn__hover {
  opacity: 1;
}

.site-top-btn:focus-visible {
  outline: 2px solid var(--st-green);
  outline-offset: 4px;
}

/* ===== About ===== */
.site-top-about {
  display: grid;
  grid-template-columns: min(18rem, 38%) 1fr;
  gap: 1.75rem 2.25rem;
  align-items: center;
  width: min(52rem, calc(100% - 2rem));
  margin: 0 auto;
  padding: 0 1rem;
}

.site-top-about__photo {
  margin: 0;
}

.site-top-about__photo a {
  display: block;
  color: inherit;
  text-decoration: none;
}

.site-top-about__photo a:hover img {
  opacity: 0.88;
}

.site-top-about__photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}

.site-top-about__eyebrow {
  margin: 0 0 0.2rem;
  font-family: var(--st-sans);
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--st-green);
  line-height: 1.2;
}

.site-top-about__title {
  margin: 0 0 0.9rem;
  font-family: var(--st-mincho);
  font-size: clamp(1.15rem, 1rem + 0.45vw, 1.35rem);
  font-weight: 600;
  color: var(--st-green);
  line-height: 1.4;
}

.site-top-about__title a {
  color: inherit;
  text-decoration: none;
}

.site-top-about__title a:hover {
  opacity: 0.75;
}

.site-top-about__body {
  margin: 0;
  font-family: var(--st-mincho);
  font-size: 0.95rem;
  line-height: 1.95;
  color: var(--st-green);
}

/* ===== アイコンボタン ===== */
.site-top-icons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 1.75rem;
  row-gap: 2.1rem;
  width: min(46rem, calc(100% - 2rem));
  margin: 3.25rem auto 0;
}

.site-top-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 9.2rem;
  text-align: center;
  text-decoration: none;
  color: var(--st-green);
}

.site-top-icon img {
  display: block;
  width: 145px;
  height: 145px;
  max-width: 100%;
}

.site-top-icon:hover img,
.site-top-icon:focus-visible img {
  opacity: 0.8;
}

.site-top-icon:focus-visible {
  outline: 2px solid var(--st-green);
  outline-offset: 4px;
}

.site-top-icon__name {
  margin: 0.45rem 0 0;
  font-family: var(--st-mincho);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.35;
}

.site-top-icon__en {
  display: block;
  margin-top: 0.1rem;
  font-family: var(--st-sans);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: #7a8a80;
}

@media (max-width: 720px) {
  .site-top {
    --st-leaf-w: min(6.5rem, 28vw);
    --st-stone-w: min(6rem, 26vw);
  }

  .site-top-services {
    grid-template-columns: 1fr;
  }

  .site-top-card--yomogi .site-top-card__display img,
  .site-top-card--esthetic .site-top-card__display img,
  .site-top-btn img {
    width: auto;
    height: auto;
    max-width: 100% !important;
  }

  .site-top-icon {
    width: calc(50% - 1rem);
  }

  .site-top-icon img {
    width: min(145px, 72%);
    height: auto;
  }

  .site-top-about {
    grid-template-columns: 1fr;
  }

  .site-top-about__photo {
    max-width: 20rem;
    margin-inline: auto;
  }
}