/* トップページ：妙泉寺について */

.home-about {
 position: relative;
 z-index: 1;
 scroll-margin-top: clamp(76px, 6vw, 112px);
 padding: clamp(90px, 7.29167vw, 140px) 0 clamp(100px, 8.33333vw, 160px);
 background:
  radial-gradient(ellipse 58% 48% at -12% 18%, rgb(245 49 112 / 10%) 0%, rgb(245 49 112 / 5%) 42%, transparent 78%),
  radial-gradient(circle at 92% 72%, rgb(172 125 32 / 16%), transparent 25%),
  var(--color-white);
 color: var(--color-text);
 overflow: hidden;
}

.home-about__inner {
 width: min(var(--content-width-1400), calc(100% - 80px));
 margin-inline: auto;
}

.home-about__header {
 margin-bottom: clamp(48px, 4.16667vw, 80px);
 text-align: center;
}

.home-about__title {
 margin: 0;
 color: var(--color-text);
 font-family: var(--font-family-base);
 font-size: var(--font-size-60);
 font-weight: var(--font-weight-bold);
 line-height: 1.25;
 letter-spacing: .04em;
}

.home-about__title span {
 color: var(--color-accent-pink);
}

.home-about__lead {
 margin: clamp(12px, 1.04167vw, 20px) 0 0;
 color: var(--color-text);
 font-size: var(--font-size-24);
 font-weight: var(--font-weight-bold);
 line-height: 1.7;
}

.home-about-greeting {
 display: grid;
 grid-template-columns: minmax(320px, .78fr) minmax(0, 1.22fr);
 border: 3px solid var(--color-accent-pink-border);
 border-radius: clamp(24px, 2.08333vw, 40px);
 background: var(--color-white);
 box-shadow: var(--shadow-card);
 overflow: hidden;
}

.home-about-greeting__image {
 position: relative;
 min-height: 100%;
 background: #f5eee8;
 overflow: hidden;
}

.home-about-greeting__image::after {
 content: '';
 position: absolute;
 inset: 0;
 box-shadow: inset -20px 0 35px rgb(255 255 255 / 22%);
 pointer-events: none;
}

.home-about-greeting__photo,
.home-about-greeting__image img {
 display: block;
 width: 100%;
 height: 100%;
 min-height: 540px;
 object-fit: cover;
 object-position: center top;
}

.home-about-greeting__body {
 position: relative;
 padding: clamp(42px, 4.16667vw, 80px);
 background: linear-gradient(135deg, rgb(255 255 255 / 98%), var(--color-accent-pink-surface));
}

.home-about-greeting__body h3,
.home-about-temple__body h3 {
 position: relative;
 margin: 0;
 color: var(--color-text);
 font-family: var(--font-family-base);
 font-size: var(--font-size-54);
 font-weight: var(--font-weight-bold);
 line-height: 1.3;
 letter-spacing: .05em;
}

.home-about-greeting__body h3::after,
.home-about-temple__body h3::after {
 content: '';
 display: block;
 width: 72px;
 height: 3px;
 margin-top: 18px;
 border-radius: 999px;
 background: linear-gradient(90deg, var(--color-accent-pink), var(--color-brand-gold));
}

.home-about-greeting__lead {
 position: relative;
 margin: clamp(26px, 2.08333vw, 40px) 0 0;
 color: var(--color-accent-pink);
 font-size: var(--font-size-30);
 font-weight: var(--font-weight-bold);
 line-height: 1.65;
}

.home-about-greeting__message {
 position: relative;
 margin-top: clamp(20px, 1.5625vw, 30px);
 color: #424649;
 font-size: var(--font-size-21);
 line-height: 2;
}

.home-about-greeting__message p {
 margin: 0;
}

.home-about-greeting__message p + p {
 margin-top: 1em;
}

.home-about-greeting__signature {
 position: relative;
 display: flex;
 align-items: baseline;
 justify-content: flex-end;
 flex-wrap: wrap;
 gap: 6px 14px;
 margin: clamp(26px, 2.08333vw, 40px) 0 0;
 color: #5c4a2b;
}

.home-about-greeting__signature span {
 font-size: var(--font-size-24);
}

.home-about-greeting__signature strong {
 font-size: var(--font-size-36);
 font-weight: var(--font-weight-bold);
 letter-spacing: .12em;
}

.home-about-greeting__signature rt {
 font-size: .45em;
 letter-spacing: .08em;
}

.home-about-temple {
 display: grid;
 grid-template-columns: minmax(0, .95fr) minmax(380px, 1.05fr);
 margin-top: clamp(50px, 5.20833vw, 100px);
 border-radius: clamp(24px, 2.08333vw, 40px);
 background: var(--color-surface-cream);
 box-shadow: var(--shadow-card);
 overflow: hidden;
}

.home-about-temple__body {
 padding: clamp(40px, 4.16667vw, 80px);
}

.home-about-temple__details {
 margin: clamp(28px, 2.60417vw, 50px) 0 0;
}

.home-about-temple__details > div {
 display: grid;
 grid-template-columns: 100px minmax(0, 1fr);
 gap: 22px;
 padding: 16px 0;
 border-bottom: 1px solid rgb(172 125 32 / 23%);
 font-size: var(--font-size-18);
 line-height: 1.75;
}

.home-about-temple__details > div:first-child {
 border-top: 1px solid rgb(172 125 32 / 23%);
}

.home-about-temple__details dt {
 color: var(--color-brand-gold);
 font-weight: var(--font-weight-bold);
}

.home-about-temple__details dd {
 margin: 0;
}

.home-about-temple__details a {
 color: inherit;
 text-decoration: none;
}

.home-about-temple__link {
 display: inline-flex;
 align-items: center;
 gap: 12px;
 margin-top: 28px;
 padding: 13px 22px;
 border: 2px solid var(--color-brand-gold);
 border-radius: 999px;
 background: var(--color-white);
 color: var(--color-brand-gold);
 font-size: var(--font-size-16);
 font-weight: var(--font-weight-bold);
 text-decoration: none;
 transition: background-color .25s ease, color .25s ease;
}

.home-about-temple__link:hover {
 background: var(--color-brand-gold);
 color: var(--color-white);
}

.home-about-temple__link:focus-visible,
.home-about-temple__details a:focus-visible {
 outline: 3px solid var(--color-focus);
 outline-offset: 4px;
}

.home-about-temple__image {
 min-height: 100%;
 margin: 0;
 overflow: hidden;
}

.home-about-temple__photo {
 display: block;
 width: 100%;
 height: 100%;
 min-height: 620px;
 object-fit: cover;
 object-position: center;
}

.home-about-map {
 margin-top: clamp(36px, 3.125vw, 60px);
 border: 3px solid var(--color-accent-pink-border);
 border-radius: clamp(20px, 1.5625vw, 30px);
 background: #f5f5f5;
 box-shadow: var(--shadow-card);
 overflow: hidden;
}

.home-about-map iframe {
 display: block;
 width: 100%;
 height: clamp(360px, 26.04167vw, 500px);
 border: 0;
}



@media (min-width: 768px) and (max-width: 1199px) {
 .home-about__inner {
  width: calc(100% - clamp(40px, calc(25.745px + 1.85615vw), 48px));
 }

 .home-about-greeting {
  grid-template-columns: minmax(clamp(260px, calc(188.724px + 9.28074vw), 300px), .85fr) minmax(0, 1.15fr);
 }

 .home-about-greeting__body,
 .home-about-temple__body {
  padding: 36px;
 }

 .home-about-greeting__photo,
 .home-about-greeting__image img {
  min-height: clamp(480px, calc(444.362px + 4.64037vw), 500px);
 }

 .home-about-temple {
  grid-template-columns: minmax(0, 1fr) minmax(clamp(300px, calc(228.724px + 9.28074vw), 340px), .9fr);
 }

 .home-about-temple__details > div {
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 14px;
 }

 .home-about-temple__photo {
  min-height: 580px;
 }
}

@media (max-width: 767px) {
 .home-about {
  padding: 80px 0 100px;
 }

 .home-about__inner {
  width: calc(100% - 32px);
 }

 .home-about__header {
  margin-bottom: 36px;
 }

 .home-about__title {
  font-size: var(--font-size-42);
 }

 .home-about__lead {
  font-size: var(--font-size-16);
  text-align: left;
 }

 .home-about-greeting,
 .home-about-temple {
  grid-template-columns: minmax(0, 1fr);
  border-radius: 22px;
 }

 .home-about-greeting {
  border-width: 2px;
 }

 .home-about-greeting__photo,
 .home-about-greeting__image img {
  min-height: 0;
  aspect-ratio: 1 / 1;
 }

 .home-about-greeting__body,
 .home-about-temple__body {
  padding: 28px 22px 32px;
 }

 .home-about-greeting__body h3,
 .home-about-temple__body h3 {
  font-size: var(--font-size-30);
 }

 .home-about-greeting__lead {
  font-size: var(--font-size-21);
 }

 .home-about-greeting__message {
  font-size: var(--font-size-16);
  line-height: 1.9;
 }

 .home-about-greeting__signature {
  display: grid;
  grid-template-columns: max-content max-content;
  justify-content: end;
  gap: 4px 1.5em;
 }

 .home-about-greeting__signature span:first-child {
  grid-column: 1 / -1;
  text-align: right;
 }

 .home-about-temple {
  margin-top: 40px;
 }

 .home-about-temple__image {
  order: -1;
 }

 .home-about-temple__photo {
  min-height: 0;
  aspect-ratio: 4 / 3;
 }

 .home-about-temple__details > div {
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 12px;
  font-size: var(--font-size-14);
 }

 .home-about-temple__link {
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  font-size: var(--font-size-14);
 }

 .home-about-map {
  margin-top: 28px;
  border-width: 2px;
  border-radius: 20px;
 }

 .home-about-map iframe {
  height: 300px;
 }
}

@media (prefers-reduced-motion: reduce) {
 .home-about-temple__link {
  transition: none;
 }
}