/* ======================================= About Us（マイリリーについて） ======================================= */

/* Design tokens */
/* MUTED GOLD: #75612C, CLEAR MOSS: #B2A581, MOSS BLACK: #42220F */
/* BACKGROUND WHITE: #FEFDFB, SUBTLE MOSS: #E9E9E2 */

/* Figma 7649:13337 準拠: Header高さ + 見出し y=200
   テーマヘッダー PC 80px / SP 56px、見出しまで 200px を維持 */
.about-page {
  background-color: #fefdfb;
  padding-top: 80px; /* ヘッダー高さ（PC） */
}

/* ======================================= ブランドメッセージ（参照HTML準拠） ======================================= */
.about-message {
  position: relative;
}

/* クリーム背景エリア（ブランドテキスト） */
.about-message__cream {
  background: linear-gradient(
    to bottom,
    #fefdfb 36.094%,
    #fff1da 71.011%,
    #f6e1ce 97.5%
  );
  padding: 220px 80px 40px;
}

/* 夕焼け山背景 + THE GOLDEN HOUR ウォーターマーク */
.about-message__sunset {
  position: relative;
  height: 860px;
  overflow: hidden;
}

/* 背景画像のみ（golden-text は除外）
   一定幅以下でスケールせず、両端を切り落とす形式 */
.about-message__sunset img:not(.about-message__golden-text) {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  min-width: 1440px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}

.about-message__sunset::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 300px;
  background: linear-gradient(
    to bottom,
    rgba(246, 225, 206, 1) 0%,
    rgba(246, 225, 206, 0.6) 40%,
    rgba(246, 225, 206, 0) 100%
  );
  z-index: 1;
  pointer-events: none;
}

.about-message__brand {
  max-width: 1280px;
  margin: 0 auto;
  text-align: left;
}

.about-message__heading {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  font-size: 36px;
  letter-spacing: 0.04em;
  line-height: 1.7;
  color: #75612c;
  margin: 0 0 40px;
}

.about-message__body {
  display: flex;
  flex-direction: column;
  gap: 24px;
  text-align: left;
  max-width: none;
}

.about-message__body p {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0.04em;
  line-height: 2.1;
  color: #75612c;
  margin: 0;
}


/* THE GOLDEN HOUR（画像・白枠基準で配置、下一部が白枠にかかる） */
.about-message__golden-text {
  position: absolute;
  bottom: 185px; /* タブレット フォールバック（白枠 margin-top 200px - 15px） */
  left: 0;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
  z-index: 2;
  margin: 0;
  pointer-events: none;
  opacity: 0.8;
}

/* PC のみ（1025px 以上）: 白枠 margin-top 320px 基準、約15px 重なり */
@media (min-width: 1025px) {
  .about-message__golden-text {
    top: auto;
    bottom: 305px;
  }
}

/* ======================================= 院長メッセージ ======================================= */
/* 上部は背景画像（山）に跨り、下部は白背景に乗る（参照HTML準拠） */
.about-director {
  position: relative;
  z-index: 3;
  max-width: 1280px;
  margin: -320px auto 0;
  padding: 100px 80px;
  background: #fefdfb;
  box-shadow: 0 4px 40px #e7e2d7;
}

.about-director__header {
  text-align: center;
  margin-bottom: 56px;
}

.about-director__label {
  font-family: "Lato", sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.08em;
  color: #b2a581;
  margin: 0 0 12px;
}

.about-director__title {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  font-size: 32px;
  letter-spacing: 0.08em;
  color: #42220f;
  margin: 0;
}

.about-director__content {
  display: flex;
  gap: 48px;
  max-width: 1120px;
  margin: 0 auto;
}

.about-director__photo {
  flex: 0 0 480px;
}

.about-director__photo img {
  display: block;
  width: 100%;
  height: 610px;
  object-fit: cover;
}

.about-director__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 10px 0;
  min-width: 0;
}

.about-director__quote {
  font-family: "Zen Old Mincho", serif;
  font-weight: 500;
  font-size: 28px;
  letter-spacing: 0.08em;
  line-height: 1.7;
  color: #42220f;
  margin: 0;
}

.about-director__paragraphs {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.about-director__paragraphs p {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.04em;
  line-height: 2.1;
  color: #42220f;
  margin: 0 0 16px;
}

.about-director__paragraphs p:last-child {
  margin-bottom: 0;
}

/* Figma 7649:13368: gap 16px, no border */
.about-director__name {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.about-director__name-role {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.64px;
  color: #42220f;
  margin: 0;
  text-transform: uppercase;
}

.about-director__name-jp {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  font-size: 28px;
  letter-spacing: 2.24px;
  color: #42220f;
  margin: 0;
}

/* ======================================= 私たちのチーム ======================================= */
.about-team {
  position: relative;
  overflow: hidden;
  padding: 100px 80px 100px;
}

/* column-cta-wrap__bg と同じ方式（background-image + 疑似要素） */
.about-team__bg {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  background-image: url("../img/renewal/column/column-bg.png");
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
}

/* #vision内（section#vision > div#director）: top: 4200px */
#vision .about-team__bg,
.about-team__bg--vision {
  top: 4200px;
}

/* #quality内: top: 243px */
#quality .about-team__bg {
  top: 243px;
}

@media (min-width: 1025px) {
  #quality .about-team__bg {
    background-position: center 179px;
  }
}

@media (max-width: 1024px) {
  #quality .about-team__bg {
    background-position: -164px 317px;
  }
}

.about-team__bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 180px;
  background: linear-gradient(to bottom, #FEFDFB, #F5F5F5);
  z-index: 1;
}

.about-team__bg::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 35%;
  background: linear-gradient(to bottom, transparent, rgba(78, 63, 28, 0.5));
  mix-blend-mode: multiply;
  z-index: 1;
}

.about-team__inner {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
}

.about-team__header {
  text-align: center;
  margin-bottom: 56px;
}

.about-team__label {
  font-family: "Lato", sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.08em;
  color: #b2a581;
  margin: 0 0 12px;
}

.about-team__title {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  font-size: 32px;
  letter-spacing: 0.08em;
  color: #42220f;
  margin: 0;
}

.about-team__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 64px;
  row-gap: 80px;
  margin-bottom: 80px;
}

.about-team__card {
  display: flex;
  gap: 0;
  overflow: hidden;
}

.about-team__card-photo {
  flex: 0 0 260px;
}

.about-team__card-photo img {
  width: 260px;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
}

.about-team__card-info {
  flex: 1;
  padding: 10px 0 10px 40px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.about-team__card-role {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 14px;
  color: #b2a581;
  margin: 0 0 4px;
}

.about-team__card-name {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 16px;
}

.about-team__card-name-jp {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: #42220f;
  margin: 0;
}

.about-team__card-name-en {
  font-family: "Lato", sans-serif;
  font-size: 13px;
  color: #42220f;
  margin: 0;
}

.about-team__card-quals {
  border-left: 2px solid #b2a581;
  padding-left: 20px;
  margin-bottom: 16px;
}

.about-team__card-quals p {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 14px;
  line-height: 1.7;
  color: #42220f;
  margin: 0 0 4px;
}

.about-team__card-quals p:last-child {
  margin-bottom: 0;
}

.about-team__card-quote {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.7;
  color: #42220f;
  margin: 0 0 12px;
}

.about-team__card-bio {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: #42220f;
  margin: 0 0 12px;
}

.about-team__card-bio:last-of-type {
  margin-bottom: 0;
}

/* ======================================= CTAセクション（mystory と同じ img タグ方式） ======================================= */
.about-cta {
  position: relative;
  overflow: hidden;
  min-height: 576px;
}

.about-cta__bg {
  position: absolute;
  inset: 0;
}

.about-cta__bg img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 576px;
  object-fit: cover;
  object-position: center center;
}

.about-cta__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(78, 63, 28, 0) 0%, rgba(78, 63, 28, 0.5) 65.77%);
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* トップページ cta-banner と同じレイアウト */
.about-cta__inner {
  position: relative;
  z-index: 1;
  max-width: 1440px;
  margin: 0 auto;
  padding: 512px 80px 80px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 32px;
}

@media (min-width: 1025px) {
  .about-cta__inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0;
  }

  /* トップページ cta-banner__btn と同一 */
  .about-page .about-cta__inner .cta-banner__btn {
    width: 245px;
    min-height: 64px;
    flex-shrink: 0;
    align-self: flex-end;
    padding: 24px;
    box-sizing: border-box;
  }
}

.about-cta__text {
  max-width: 600px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  text-shadow: 0 0 24px rgba(0, 0, 0, 0.2);
}

.about-cta__heading {
  font-family: "Zen Old Mincho", serif;
  font-weight: 500;
  font-size: 32px;
  letter-spacing: 2.56px;
  line-height: 1.5;
  color: #fefdfb;
  margin: 0;
  text-transform: uppercase;
}

.about-cta__body {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0.72px;
  line-height: 1.7;
  color: #fefdfb;
  margin: 0;
}

/* トップページ cta-banner と同じ: サブテキスト間は13px */
.about-cta__body + .about-cta__body {
  margin-top: -7px;
}

.about-cta__body:last-child {
  margin-bottom: 0;
}

/* トップページ cta-banner__btn と同一（message__cta の padding 上書き） */
.about-page .about-cta__inner .cta-banner__btn {
  padding: 24px;
  min-height: 64px;
  box-sizing: border-box;
}

/* ======================================= タブレット（1024px以下） ======================================= */
@media (max-width: 1024px) {
  .about-message__cream {
    padding: 100px 40px 40px;
  }

  .about-message__sunset {
    height: 600px;
  }

  .about-message__sunset img:not(.about-message__golden-text) {
    min-width: 768px;
  }

  .about-message__golden-text {
    bottom: 160px; /* 白枠 margin-top 200px 基準、約40px 重なり（タブレット 769–1024px） */
  }

  .about-director {
    padding: 80px 40px;
    margin-top: -200px;
  }

  .about-director__content {
    flex-direction: column;
    align-items: center;
  }

  .about-director__photo {
    flex: 0 0 auto;
    max-width: 400px;
    width: 100%;
  }

  .about-director__photo img {
    height: auto;
  }

  .about-director__quote {
    font-size: 22px;
  }

  .about-team {
    padding: 80px 40px 160px;
  }

  .about-team__card-photo {
    flex: 0 0 220px;
  }

  .about-team__card-photo img {
    width: 220px;
    min-height: 360px;
  }

  .about-team__card-info {
    padding-left: 28px;
  }
}

/* ======================================= SP（768px以下） ======================================= */
@media (max-width: 1024px) {
  .about-page {
    padding-top: 56px; /* ヘッダー高さ（SP） */
  }
}

@media (max-width: 1024px) {
  .about-message__cream {
    padding: 100px 24px 16px;
  }

  .about-message__heading {
    font-size: 24px;
    letter-spacing: 0.96px;
    margin-bottom: 24px;
  }

  .about-message__body p {
    font-size: 15px;
    line-height: 2;
  }

  .about-message__body p br {
    display: none;
  }

  .about-message__sunset {
    height: 500px;
  }

  .about-message__sunset::before {
    height: 150px;
  }

  .about-message__golden-text {
    bottom: 115px;
  }

  .about-director {
    padding: 60px 24px;
    margin: -120px 24px 0;
  }

  .about-director__header {
    margin-bottom: 32px;
  }

  .about-director__label {
    font-size: 13px;
    letter-spacing: 1.04px;
  }

  .about-director__title {
    font-size: 24px;
    letter-spacing: 1.92px;
  }

  .about-director__content {
    flex-direction: column;
    gap: 28px;
  }

  .about-director__photo {
    flex: 0 0 auto;
    width: 100%;
  }

  .about-director__quote {
    font-size: 16px;
    letter-spacing: 1.28px;
    text-align: center;
    margin-bottom: 24px;
  }

  .about-director__paragraphs p {
    font-size: 14px;
    letter-spacing: 0.56px;
  }

  .about-director__name {
    text-align: left;
  }

  .about-director__name-jp {
    font-size: 20px;
    letter-spacing: 1.6px;
  }

  .about-team {
    padding: 48px 24px 100px;
  }

  .about-team__header {
    margin-bottom: 40px;
  }

  .about-team__label {
    font-size: 13px;
    letter-spacing: 1.04px;
  }

  .about-team__title {
    font-size: 24px;
    letter-spacing: 1.92px;
  }

  .about-team__grid {
    grid-template-columns: 1fr;
    gap: 56px;
    margin-bottom: 56px;
  }

  .about-team__card {
    flex-direction: column;
  }

  .about-team__card-photo {
    flex: none;
  }

  .about-team__card-photo img {
    width: 100%;
    min-height: 360px;
  }

  .about-team__card-info {
    padding-left: 0;
    padding-top: 20px;
  }

  .about-cta {
    min-height: 694px;
  }

  .about-cta__bg img {
    min-height: 694px;
    object-position: 30% 30%;
  }

  .about-cta__inner {
    padding: 400px 24px 40px;
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
  }

  .about-cta__heading {
    font-size: 28px;
    letter-spacing: 2.24px;
  }

  .about-cta__body {
    font-size: 16px;
    letter-spacing: 0.64px;
  }

  /* トップページ cta-banner SP と同じ: サブテキスト間は12px */
  .about-cta__body + .about-cta__body {
    margin-top: -8px;
  }

  /* トップページ cta-banner SP と同一: ボタン幅100%・高さ64px */
  .about-page .about-cta__inner .cta-banner__btn {
    align-self: stretch;
    width: 100%;
    min-height: 64px;
    box-sizing: border-box;
  }
}

/* SP（768px以下）: 白枠 margin-top 120px 基準 */
@media (max-width: 768px) {
  .about-message__golden-text {
    bottom: 115px;
  }
}