/* Public layouts checked on 2026-10-27. Shared chrome and fonts are in site.css. */
.inner-page { line-height: 1.65; }
.inner-page p { margin: 0 0 1.6em; }
.subpage-banner { position: relative; display: flex; align-items: center; justify-content: center; min-height: 40vh; padding: 5% 3%; background-color: #f3f5f8; background-size: cover; background-position: center; }
.subpage-banner::before { content: ''; position: absolute; inset: 0; background: rgb(255 255 255 / .59); }
.subpage-banner h1 { position: relative; margin: 0; color: #3f4047; text-align: center; font-size: 43px; font-weight: 700; line-height: 63px; letter-spacing: 10px; word-spacing: .2em; }
.section-heading { display: flex; align-items: center; justify-content: center; min-height: 250px; padding: 10px; text-align: center; }
.section-heading h2 { margin: 0; color: var(--ink); font-size: 3vw; font-weight: 400; line-height: 1.3; letter-spacing: 10px; text-transform: uppercase; }
.intro-split { display: flex; min-height: 557px; background: rgb(232 235 234 / .66); }
.intro-copy, .intro-photo { flex: 0 0 50%; min-width: 0; }
.intro-copy { display: flex; align-items: center; justify-content: center; padding: 4%; }
.intro-copy > div { width: 100%; max-width: 46vw; font-size: 19px; line-height: 22px; }
.concept-copy { text-align: center; }
.intro-photo { background-repeat: no-repeat; }
.concept-photo { background-size: cover; background-position: center right; }
.strength { display: flex; align-items: stretch; margin-top: 8%; padding-left: 3%; }
.strength-copy { flex: 0 0 45%; display: flex; flex-direction: column; justify-content: center; gap: 15px; min-width: 0; padding: 0 9%; }
.strength .strength-number { margin: 0; font-size: 40px; line-height: 65px; letter-spacing: 7px; color: #454545; }
.strength h3 { margin: 0; color: #1c244b; font-size: 20px; font-weight: 600; line-height: 32px; }
.strength-1 h3 { line-height: 34px; letter-spacing: -.4px; }
.strength-body { font-size: 14px; line-height: 22.4px; }
.strength-1 .strength-body { line-height: 23.8px; }
.strength-photo { flex: 0 0 55%; min-width: 0; }
.strength-photo img { width: 100%; }
.president-message { display: flex; align-items: stretch; min-height: 100vh; background: #f4f4f4; }
.president-photo { flex: 0 0 45%; min-width: 0; background: #e8ebea center top / cover no-repeat; }
.president-copy { flex: 0 0 55%; display: flex; flex-direction: column; justify-content: center; min-width: 0; gap: 30px; padding: 0 5%; }
.president-name h3 { margin: 0; color: var(--ink); font-size: 23px; font-weight: 400; line-height: 49px; letter-spacing: 5.5px; }
.president-body { font-size: 15px; line-height: 21px; }
.history-row { display: flex; align-items: center; }
.history-media, .history-copy { flex: 0 0 50%; min-width: 0; }
.history-media { padding: 6%; background: var(--pale); }
.history-carousel .carousel-frame, .history-carousel .carousel-frame img { aspect-ratio: 645 / 458; }
.history-copy { padding: 0 15% 0 6%; font-size: 16px; line-height: 22px; }
.history-reverse .history-copy { order: -1; }
.company-details { display: flex; justify-content: center; align-items: flex-start; font-size: 16px; line-height: 22px; }
.company-labels { padding: 0 2px 0 75px; }
.company-values { padding: 0 2px 0 9px; }
.company-map { display: block; width: 100%; height: 496px; border: 0; }
.company-image { display: flex; justify-content: center; padding: 50px; }
.company-image img { width: 100%; max-width: 1197px; object-fit: contain; }
.catalog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.catalog-cover { display: block; }
.catalog-cover img { width: 214px; height: auto; margin: 0 auto; }
.catalog-caption { text-align: center; font-size: 16px; line-height: 22px; }
.satoko-page .subpage-banner { background-position: 0 -150px; }
.artisan-photo { background-size: auto; background-position: center top; }
@media (min-width: 1025px) { .concept-photo { background-attachment: fixed; } }
@media (max-width: 1024px) {
  .subpage-banner { padding: 5% 8%; }
  .subpage-banner h1 { font-size: 40px; line-height: 1; }
  .section-heading h2 { font-size: 2.8vw; line-height: 1.2; }
  .intro-copy { flex-basis: 45%; }
  .intro-photo { flex-basis: 55%; }
  .intro-copy > div { font-size: 15px; line-height: 21px; }
  .concept-photo { background-size: cover; background-position: -54vw -5vh; }
  .president-message { min-height: 0; }
  .president-photo { flex-basis: 50%; }
  .president-copy { flex-basis: 50%; padding: 6%; }
  .history-media { padding: 15% 6%; }
  .history-copy { padding: 0 6%; font-size: 15px; line-height: 21px; }
  .company-details { font-size: 15px; line-height: 21px; }
  .catalog-caption { font-size: 15px; line-height: 21px; }
  .satoko-page .subpage-banner { background-position: 0 -85px; }
  .artisan-photo { background-size: cover; background-position: -18vw 0; }
}
@media (max-width: 767px) {
  .subpage-banner { padding: 10% 5%; }
  .subpage-banner h1 { font-size: 28px; line-height: 1; letter-spacing: 3px; }
  .section-heading h2 { font-size: 5vw; letter-spacing: 4px; }
  .strengths-heading h2 { letter-spacing: 3.6px; }
  .intro-split { flex-direction: column; min-height: 0; }
  .intro-copy, .intro-photo { flex-basis: auto; width: 100%; }
  .intro-copy { padding: 20% 8%; }
  .intro-copy > div { max-width: 100%; }
  .intro-photo { min-height: 70vh; }
  .concept-photo { background-position: -81vw -1vh; }
  .strength { flex-direction: column; gap: 30px; margin-top: 25%; padding: 0 5%; }
  .strength-copy, .strength-photo { flex-basis: auto; width: 100%; padding: 0; }
  .strength-copy { align-items: center; }
  .strength .strength-number { font-size: 28px; line-height: 28px; letter-spacing: 3px; }
  .strength h3 { line-height: 22px; }
  .president-message { flex-direction: column; }
  .president-copy { order: -1; flex-basis: auto; padding: 15% 8%; }
  .president-photo { flex-basis: auto; min-height: 56vh; }
  .president-name h3 { font-size: 28px; line-height: 1.3; letter-spacing: 3px; }
  .history-row { flex-direction: column; }
  .history-media, .history-copy { flex-basis: auto; width: 100%; padding: 16% 8%; }
  .history-reverse .history-copy { order: 0; }
  .company-details { justify-content: flex-start; }
  .company-labels { flex: 0 0 24vw; max-width: 24vw; padding: 0 0 0 10px; font-size: 13px; line-height: 1.4; }
  .company-labels p { margin-bottom: 0; }
  .company-values { flex: 0 1 71vw; min-width: 0; max-width: 71vw; padding: 0 2px 0 9px; font-size: 12px; line-height: 1.4; }
  .company-image { padding: 0 0 18px; }
  .catalog-grid { grid-template-columns: 1fr; }
  .catalog:first-child .catalog-caption { padding-bottom: 15px; }
  .satoko-page .subpage-banner { background-position: 0 0; }
  .artisan-photo { background-position: -13vw 0; }
}
@media (prefers-reduced-motion: reduce) { .concept-photo { background-attachment: scroll; } }