@charset "UTF-8";

/* =========================
   JYOSHINMON PAGE
   Common header/footer: ../style.css
========================= */

.joshinmon-hero { background: #fff; }
.joshinmon-hero-image { height: clamp(360px, 45vw, 640px); overflow: hidden; background: #151515; }
.joshinmon-hero-image img { width: 100%; height: 100%; object-fit: cover; object-position: center 53%; }
.joshinmon-hero-heading { padding-top: 68px; padding-bottom: 76px; }
.joshinmon-hero h1 { margin: 0; font-family: "Yu Mincho", "Hiragino Mincho ProN", serif; font-size: clamp(46px, 6vw, 76px); font-weight: 400; line-height: 1.4; }
.joshinmon-hero .section-label { color: var(--red); }
.joshinmon-hero-lead { margin: 26px 0 0; color: var(--gray); font-size: 14px; }

/* The same always-dark header used on the instructors page. */
.site-header { background: rgba(10, 10, 10, .94); }

.joshinmon-intro { padding: 108px 0 115px; background: #fff; }
.intro-layout, .philosophy-layout, .dojo-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; align-items: start; }
.joshinmon-intro h2, .joshinmon-philosophy h2, .joshinmon-dojo h2 { margin: 0; font-size: clamp(32px, 3.8vw, 49px); font-weight: 400; line-height: 1.65; }
.joshinmon-prose { color: #626262; font-size: 14px; line-height: 2.15; }
.joshinmon-prose p { margin: 0 0 21px; }

.joshinmon-person { padding: 118px 0; background: var(--offwhite); }
.person-layout { display: grid; grid-template-columns: .95fr 1.05fr; gap: 100px; align-items: center; }
.person-photo { margin: 0; overflow: hidden; background: #ddd; }
.person-photo img { width: 100%; aspect-ratio: 4 / 4.9; object-fit: cover; object-position: center 22%; }
.person-copy { max-width: 510px; }
.person-kicker { margin: 0 0 15px; color: var(--red); font-size: 12px; font-weight: 700; letter-spacing: .09em; }
.person-copy h2 { margin: 0; font-size: clamp(34px, 3.8vw, 54px); font-weight: 400; line-height: 1.5; }
.person-copy h2 span { display: inline-block; white-space: nowrap; }
.person-rule { width: 56px; height: 2px; margin: 35px 0; background: var(--red); }
.person-copy > p:not(.section-label):not(.person-kicker) { margin: 0 0 18px; color: #626262; font-size: 14px; line-height: 2.1; }

.joshinmon-philosophy { padding: 118px 0; background: #fff; }
.joshinmon-successor { background: #f1f0ec; }
.person-layout-reverse { grid-template-columns: 1.05fr .95fr; }
.person-layout-reverse .person-photo { grid-column: 2; grid-row: 1; }
.person-layout-reverse .person-copy { grid-column: 1; grid-row: 1; }
.joshinmon-dojo { padding: 118px 0; background: #fff; }
.joshinmon-links { display: flex; flex-wrap: wrap; gap: 10px 30px; margin-top: 26px; }
.joshinmon-links .text-link { font-size: 13px; }

.joshinmon-cta { padding: 105px 0 115px; background: #151515; color: #fff; text-align: center; }
.joshinmon-cta .section-label { color: #e2525a; }
.joshinmon-cta h2 { margin: 0; font-size: clamp(32px, 4.5vw, 56px); font-weight: 400; line-height: 1.5; }
.joshinmon-cta p:not(.section-label) { margin: 23px 0 0; color: rgba(255,255,255,.68); font-size: 13px; }
.joshinmon-cta-button { display: flex; align-items: center; justify-content: space-between; width: min(360px, 100%); min-height: 65px; margin: 36px auto 0; padding: 0 24px; background: var(--red); font-size: 13px; font-weight: 700; transition: background .2s; }
.joshinmon-cta-button:hover { background: var(--red-light); }
.joshinmon-cta-button span { font-size: 20px; }

@media (max-width: 900px) {
  .intro-layout, .philosophy-layout, .dojo-layout, .person-layout { gap: 46px; }
}
@media (max-width: 720px) {
  .joshinmon-hero-image { height: 400px; }
  .joshinmon-hero-image img { object-position: 46% center; }
  .joshinmon-hero-heading { padding-top: 48px; padding-bottom: 52px; }
  .joshinmon-hero h1 { font-size: 43px; }
  .joshinmon-hero-lead { font-size: 12px; }
  .joshinmon-intro, .joshinmon-philosophy, .joshinmon-person, .joshinmon-dojo { padding: 78px 0; }
  .intro-layout, .philosophy-layout, .dojo-layout, .person-layout, .person-layout-reverse { display: grid; grid-template-columns: 1fr; gap: 36px; }
  .person-layout-reverse .person-photo, .person-layout-reverse .person-copy { grid-column: auto; grid-row: auto; }
  .person-layout-reverse .person-photo { order: 0; }
  .person-layout-reverse .person-copy { order: 1; }
  .person-photo img { aspect-ratio: 4 / 4.5; }
  .person-copy h2 { font-size: 39px; }
  .joshinmon-intro h2, .joshinmon-philosophy h2, .joshinmon-dojo h2 { font-size: 34px; }
  .joshinmon-cta { padding: 80px 0 90px; }
  .joshinmon-cta h2 { font-size: 35px; }
}

/* 二代目宗家の写真：上側を優先してトリミング */
.joshinmon-successor .person-photo img {
  object-position: center top;
}