/*
Theme Name: JTPAC Foundation
Theme URI: https://example.org/
Author: OpenAI
Description: 一般財団法人 日本伝統芸能文化財団向けオリジナルWordPressテーマ
Version: 2.5
Text Domain: jtpac
*/

:root{
  --ink:#202526;
  --navy:#0c2a47;
  --navy2:#113756;
  --paper:#fbfaf6;
  --cream:#f5f1e7;
  --gold:#b59643;
  --gold2:#c8af69;
  --muted:#757873;
  --line:#ded8ca;
  --white:#fff;
  --serif:"Yu Mincho","Hiragino Mincho ProN","Noto Serif JP",serif;
  --sans:"Helvetica Neue","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.9;letter-spacing:.025em}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
.container{width:min(1180px,calc(100% - 48px));margin:auto}
.narrow{width:min(960px,100%)}
.site-header{position:sticky;top:0;z-index:50;background:rgba(251,250,246,.97);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.header-inner{height:92px;display:flex;align-items:center;justify-content:space-between;gap:28px}
.brand{display:flex;align-items:center;min-width:220px}
.brand-logo{display:block;width:226px;height:auto}
.nav{display:flex;align-items:center;gap:25px;font-size:12px;letter-spacing:.08em}
.nav a{position:relative;padding:12px 0}
.nav a:not(.nav-contact):after{content:"";position:absolute;left:0;right:100%;bottom:6px;height:1px;background:var(--gold);transition:.25s}
.nav a:hover:after{right:0}
.nav-contact{border:1px solid var(--navy);padding:11px 16px!important;color:var(--navy)}
.hero{min-height:760px;height:calc(100vh - 92px);max-height:940px;display:grid;align-items:center;position:relative;overflow:hidden;background:var(--paper);border-bottom:1px solid var(--line)}
.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0 63%,rgba(181,150,67,.06) 63% 63.15%,transparent 63.15%),linear-gradient(0deg,transparent 0 72%,rgba(181,150,67,.06) 72% 72.15%,transparent 72.15%)}
.hero-inner{position:relative;z-index:2;padding:80px 0 100px}
.hero-rule{height:72px;width:1px;background:var(--gold);margin:0 0 24px 6px}
.kicker,.eyebrow{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);font-weight:600}
.hero h1{font-family:var(--serif);font-size:clamp(42px,5.6vw,76px);font-weight:400;line-height:1.5;letter-spacing:.08em;margin:22px 0 22px;color:var(--navy);max-width:900px}
.hero-lead{font-family:var(--serif);font-size:clamp(16px,1.8vw,22px);color:#555c5e;line-height:2.1;margin:0}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:38px}
.hero-mark{position:absolute;right:2.5vw;bottom:-.14em;font-family:Georgia,"Times New Roman",serif;font-size:clamp(130px,22vw,330px);line-height:1;color:rgba(12,42,71,.045);letter-spacing:-.08em;white-space:nowrap}.hero-mark span{font-size:.55em;margin:0 .05em}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:49px;padding:0 24px;border:1px solid var(--navy);font-size:12px;letter-spacing:.08em;transition:.2s;background:transparent}
.btn-primary{background:var(--navy);border-color:var(--navy);color:#fff}.btn-outline{color:var(--navy)}.btn-light{background:#fff;border-color:#fff;color:var(--navy)}
.btn:hover{transform:translateY(-1px);opacity:.88}
.section{padding:116px 0}.section-paper{background:var(--paper)}
.statement{font-family:var(--serif);font-weight:400;color:var(--navy);font-size:clamp(30px,4vw,50px);line-height:1.65;letter-spacing:.055em;margin:17px 0 42px}.statement.light{color:#fff}
.two-col-copy{display:grid;grid-template-columns:1fr 1fr;gap:54px}.long-copy p{margin:0;font-family:var(--serif);font-size:15px;line-height:2.25;color:#454a4b}
.navy-quote{margin-top:64px;background:var(--navy);color:#fff;padding:36px 42px;border-left:5px solid var(--gold)}.navy-quote span{font-family:var(--serif);font-size:22px;letter-spacing:.06em}.navy-quote p{margin:12px 0 0;color:rgba(255,255,255,.75);font-size:13px}
.vision-section{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section-heading-row{display:grid;grid-template-columns:1.1fr .9fr;gap:70px;align-items:end;margin-bottom:56px}.section-heading-row .statement{margin-bottom:0}.vision-intro,.section-heading-row>p{margin:0;color:#555b5c;font-size:14px;line-height:2.1}
.vision-grid{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.vision-card{display:grid;grid-template-columns:68px 1fr;gap:20px;min-height:230px;padding:32px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper)}
.vision-card:last-child{grid-column:1 / -1}.vision-no{height:68px;display:grid;place-items:center;background:var(--gold);color:#fff;font-family:Georgia,serif;font-size:18px}.vision-card h3{font-family:var(--serif);font-size:20px;font-weight:400;color:var(--navy);margin:4px 0 13px}.vision-card p{font-size:13px;line-height:2;margin:0;color:#626665}
.circulation-section{background:var(--navy);color:#fff}.eyebrow.gold{color:var(--gold2)}.compact{align-items:start;margin-bottom:48px}.compact>p{color:rgba(255,255,255,.72)}
.cycle-grid{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid rgba(255,255,255,.22);border-bottom:1px solid rgba(255,255,255,.22)}.cycle-grid div{min-height:170px;padding:28px 22px;border-right:1px solid rgba(255,255,255,.22)}.cycle-grid div:last-child{border-right:0}.cycle-grid span{display:block;color:var(--gold2);font-family:Georgia,serif;font-size:22px;margin-bottom:42px}.cycle-grid strong{font-family:var(--serif);font-size:15px;font-weight:400;line-height:1.7}
.news-section{background:var(--paper)}.section-heading-simple{display:flex;justify-content:space-between;align-items:end;margin-bottom:28px}.section-heading-simple h2{font-family:var(--serif);font-size:38px;color:var(--navy);font-weight:400;margin:8px 0 0}.text-link{font-size:12px;letter-spacing:.07em;border-bottom:1px solid var(--gold);padding-bottom:4px}
.news-list{border-top:1px solid var(--line)}.news-item{display:grid;grid-template-columns:130px 85px 1fr 30px;gap:20px;padding:22px 8px;border-bottom:1px solid var(--line);align-items:center;transition:.2s}.news-item:hover{background:#fff}.news-date,.news-cat{font-size:11px;color:var(--muted)}.news-cat{color:var(--gold)}.news-title{font-family:var(--serif);font-size:16px}.news-arrow{text-align:right;color:var(--gold)}
.support-section{background:var(--cream);border-top:1px solid var(--line)}.support-grid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);background:#fff}.support-grid article{min-height:190px;padding:28px 24px;border-right:1px solid var(--line);display:flex;flex-direction:column;justify-content:flex-end}.support-grid article:last-child{border-right:0}.support-grid span{font-family:var(--serif);font-size:16px;color:var(--navy);margin-bottom:auto}.support-grid strong{font-family:var(--serif);font-size:20px;font-weight:400}.support-grid small{color:var(--muted)}.support-grid .featured{background:var(--navy);color:#fff}.support-grid .featured span{color:var(--gold2)}.support-actions{display:flex;align-items:center;gap:28px;margin-top:34px}
.message-section{background:#fff}.message-wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:90px}.message-wrap .statement{margin-bottom:0}.message-copy{font-family:var(--serif);font-size:15px;line-height:2.25}.message-copy p{margin:0 0 24px}.signature{text-align:right;margin-top:48px;font-size:13px}.signature strong{display:inline-block;margin-top:5px;font-size:16px;font-weight:400}
.contact-band{background:var(--navy);color:#fff;padding:78px 0}.contact-band-inner{display:grid;grid-template-columns:1fr .7fr;gap:70px;align-items:center}.contact-band h2{font-family:var(--serif);font-weight:400;font-size:32px;line-height:1.7;letter-spacing:.05em;margin:12px 0 0}.contact-info{border-left:1px solid rgba(255,255,255,.25);padding-left:50px;font-size:13px}.contact-info p{margin:0 0 15px}.contact-info .btn{margin-top:12px}
.footer{padding:70px 0 28px;background:#f6f3eb;color:#515658;border-top:1px solid var(--line)}.footer-top{display:flex;align-items:center;justify-content:space-between;gap:40px;padding-bottom:38px;border-bottom:1px solid var(--line)}.footer-logo{width:240px}.footer-tagline{font-family:var(--serif);color:var(--navy);font-size:17px}.footer-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;padding:32px 0}.footer-brand{font-family:var(--serif);font-size:17px;color:var(--navy)}.footer-grid p{font-size:9px;letter-spacing:.14em}.footer-links{display:flex;gap:24px;align-items:start;justify-content:flex-end;font-size:11px}.footer-small{font-size:10px;border-top:1px solid var(--line);padding-top:18px;color:#8b8b84}
.page-hero{padding:100px 0 60px;border-bottom:1px solid var(--line);background:var(--cream)}.page-hero h1{font-family:var(--serif);font-size:48px;font-weight:400;color:var(--navy);margin:0}.content{padding:70px 0 100px}.content h2,.content h3{font-family:var(--serif);font-weight:400;color:var(--navy)}.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.post-card{padding:26px;border:1px solid var(--line);background:#fff}.post-card h2{font-family:var(--serif);font-size:20px;font-weight:400}.desktop-only{display:block}
@media(max-width:980px){.nav{display:none}.header-inner{height:78px}.brand-logo{width:205px}.hero{height:auto;min-height:680px}.section{padding:88px 0}.section-heading-row,.message-wrap,.contact-band-inner{grid-template-columns:1fr;gap:34px}.two-col-copy{gap:34px}.support-grid{grid-template-columns:repeat(2,1fr)}.support-grid article:nth-child(2){border-right:0}.support-grid article:nth-child(-n+2){border-bottom:1px solid var(--line)}.cycle-grid{grid-template-columns:1fr}.cycle-grid div{min-height:auto;border-right:0;border-bottom:1px solid rgba(255,255,255,.22);display:grid;grid-template-columns:70px 1fr;align-items:center}.cycle-grid div:last-child{border-bottom:0}.cycle-grid span{margin:0}.contact-info{border-left:0;padding-left:0;border-top:1px solid rgba(255,255,255,.25);padding-top:28px}}
@media(max-width:680px){.container{width:min(100% - 30px,1180px)}.hero{min-height:620px}.hero-inner{padding:70px 0}.hero-rule{height:52px}.hero h1{font-size:38px;line-height:1.55}.hero-lead{font-size:15px}.desktop-only{display:none}.section{padding:72px 0}.statement{font-size:29px}.two-col-copy,.vision-grid{grid-template-columns:1fr}.vision-card:last-child{grid-column:auto}.vision-card{grid-template-columns:52px 1fr;padding:24px 20px}.vision-no{width:52px;height:52px}.navy-quote{padding:28px 24px}.support-grid{grid-template-columns:1fr}.support-grid article{border-right:0!important;border-bottom:1px solid var(--line)!important;min-height:155px}.support-grid article:last-child{border-bottom:0!important}.news-item{grid-template-columns:86px 1fr 20px}.news-cat{display:none}.support-actions{align-items:flex-start;flex-direction:column}.footer-top,.footer-grid{display:grid;grid-template-columns:1fr}.footer-links{justify-content:flex-start;flex-wrap:wrap}.contact-band{padding:60px 0}.contact-band h2{font-size:27px}}


/* Membership application */
.membership-hero{padding:110px 0 72px}.membership-hero h1{line-height:1.55}.page-lead{font-family:var(--serif);font-size:16px;line-height:2.2;color:#555c5e;margin:24px 0 0;max-width:760px}
.membership-intro{padding:70px 0;background:var(--cream);border-bottom:1px solid var(--line)}
.membership-plan-grid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);background:#fff}.membership-plan-grid article{min-height:155px;padding:24px 20px;border-right:1px solid var(--line);display:flex;flex-direction:column;justify-content:flex-end}.membership-plan-grid article:last-child{border-right:0}.membership-plan-grid span{font-family:var(--serif);color:var(--navy);font-size:14px;margin-bottom:auto}.membership-plan-grid strong{font-family:var(--serif);font-size:18px;font-weight:400}.membership-plan-grid small{color:var(--muted)}.membership-plan-grid .featured{background:var(--navy);color:#fff}.membership-plan-grid .featured span{color:var(--gold2)}
.membership-note{font-size:12px;color:var(--muted);margin:20px 0 0}
.membership-form-section{padding:90px 0 120px;background:#fff}.form-heading{margin-bottom:42px}.form-heading h2,.form-success h2{font-family:var(--serif);font-size:36px;font-weight:400;color:var(--navy);margin:10px 0}.form-heading p{font-size:12px;color:var(--muted)}
.membership-form{border-top:1px solid var(--navy)}.form-block{border:0;border-bottom:1px solid var(--line);padding:38px 0 42px;margin:0}.form-block legend{font-family:var(--serif);color:var(--navy);font-size:18px;padding:0;margin:0 0 26px;width:100%}.required-mark{display:inline-block;background:var(--gold);color:#fff;font-size:9px;line-height:1;padding:5px 7px;margin-left:7px;vertical-align:middle;letter-spacing:.08em}
.plan-options{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.plan-option{position:relative;display:block;cursor:pointer}.plan-option input{position:absolute;opacity:0;pointer-events:none}.plan-option span{display:flex;min-height:88px;border:1px solid var(--line);padding:19px 20px;flex-direction:column;justify-content:center;transition:.2s;background:var(--paper)}.plan-option b{font-family:var(--serif);font-size:15px;font-weight:400;color:var(--navy)}.plan-option em{font-style:normal;font-size:12px;color:var(--muted);margin-top:5px}.plan-option input:checked+span{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold);background:#fff}.plan-option input:focus-visible+span{outline:2px solid var(--navy);outline-offset:2px}
.form-grid{display:grid;gap:22px 28px}.form-grid.two{grid-template-columns:1fr 1fr}.form-row{display:flex;flex-direction:column;gap:8px}.form-row.full{grid-column:1 / -1}.form-row label,.field-label{font-size:12px;font-weight:600;color:#3d4445}.form-row small{font-size:10px;color:var(--muted)}.form-row input,.form-row textarea{width:100%;border:1px solid #cbc7bd;background:#fff;color:var(--ink);font:inherit;font-size:14px;padding:13px 14px;border-radius:0;outline:none;transition:.2s}.form-row input:focus,.form-row textarea:focus{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}.form-row textarea{resize:vertical;min-height:150px}.compact-field{margin-top:22px;max-width:310px}.input-with-unit{display:flex;align-items:center;gap:10px}.input-with-unit input{width:100px}.input-with-unit span{font-size:13px}.inline-radios{display:flex;gap:28px;flex-wrap:wrap;padding:9px 0}.inline-radios label{font-weight:400}.inline-radios input{width:auto}
.consent-box{margin:34px 0 0;padding:22px 24px;background:var(--cream);border:1px solid var(--line)}.consent-box label{display:flex;gap:12px;align-items:flex-start;font-size:12px;line-height:1.9}.consent-box input{margin-top:7px}.form-submit{text-align:center;padding-top:40px}.submit-btn{min-width:300px;min-height:58px;cursor:pointer;font-family:var(--sans)}.form-submit p{font-size:11px;color:var(--muted);margin:14px 0 0}
.form-success{border:1px solid var(--line);background:var(--paper);padding:58px 54px}.form-success p{font-family:var(--serif);line-height:2.2;margin:20px 0 30px}.form-error{background:#fff8f2;border:1px solid #d6b69b;padding:16px 18px;margin-bottom:30px;font-size:12px}.hp-field{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important}
@media(max-width:980px){.membership-plan-grid{grid-template-columns:repeat(2,1fr)}.membership-plan-grid article:nth-child(2){border-right:0}.membership-plan-grid article:nth-child(-n+2){border-bottom:1px solid var(--line)}}
@media(max-width:680px){.membership-hero{padding:78px 0 50px}.membership-hero h1{font-size:34px}.membership-intro{padding:48px 0}.membership-plan-grid{grid-template-columns:1fr}.membership-plan-grid article{border-right:0!important;border-bottom:1px solid var(--line)!important;min-height:125px}.membership-plan-grid article:last-child{border-bottom:0!important}.membership-form-section{padding:66px 0 86px}.form-heading h2,.form-success h2{font-size:29px}.plan-options,.form-grid.two{grid-template-columns:1fr}.form-block{padding:30px 0 34px}.form-success{padding:38px 24px}.submit-btn{min-width:100%;width:100%}}

/* v1.3 - hero layout correction + officers */
.hero-inner{width:min(1320px,calc(100% - 48px))}
.hero h1{max-width:none;font-size:clamp(42px,5.1vw,72px);line-height:1.42;letter-spacing:.065em}
.hero-title-line{display:block;white-space:nowrap}

.message-wrap-with-photo{grid-template-columns:.72fr .62fr 1fr;gap:58px;align-items:center}
.message-heading .text-link{display:inline-block;margin-top:24px}
.message-portrait{margin:0;position:relative;overflow:hidden;aspect-ratio:4/5;background:var(--cream)}
.message-portrait:after,.representative-photo:after{content:"";position:absolute;inset:0;border:1px solid rgba(12,42,71,.10);pointer-events:none}
.message-portrait img{width:100%;height:100%;display:block;object-fit:cover;object-position:center 25%}

.officers-page-hero{padding-bottom:72px}
.officers-representative{background:#fff;padding-top:96px;padding-bottom:108px}
.representative-grid{display:grid;grid-template-columns:minmax(320px,.78fr) 1.22fr;gap:92px;align-items:center;max-width:1040px}
.representative-photo{margin:0;position:relative;background:var(--cream);aspect-ratio:4/5;overflow:hidden}
.representative-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 24%}
.representative-copy{max-width:560px}
.representative-copy .role-label{font-family:var(--serif);font-size:15px;color:var(--gold);margin:26px 0 4px}
.representative-copy h2{font-family:var(--serif);font-weight:400;font-size:clamp(34px,4vw,54px);line-height:1.45;letter-spacing:.08em;color:var(--navy);margin:0 0 30px}
.representative-copy p{font-family:var(--serif);font-size:15px;line-height:2.2;color:#4d5354;margin:0 0 18px}
.representative-copy .representative-note{font-size:12px;color:var(--muted);margin-top:30px}
.officers-list-section{background:var(--cream);border-top:1px solid var(--line)}
.officers-heading h2{font-family:var(--serif);font-weight:400;color:var(--navy);font-size:36px;margin:10px 0 34px}
.officers-list{border-top:1px solid var(--navy);background:rgba(255,255,255,.52)}
.officer-row{display:grid;grid-template-columns:210px 1fr;align-items:center;min-height:92px;border-bottom:1px solid var(--line);padding:0 34px}
.officer-role{font-size:12px;letter-spacing:.14em;color:var(--muted)}
.officer-name{font-family:var(--serif);font-size:22px;font-weight:400;color:var(--navy);letter-spacing:.08em}
.officer-row.representative{background:#fff}
.officer-row.representative .officer-role{color:var(--gold);font-weight:600}

@media(max-width:1100px){
  .hero h1{font-size:clamp(40px,5.8vw,62px)}
  .message-wrap-with-photo{grid-template-columns:.85fr .65fr;gap:42px}
  .message-wrap-with-photo .message-copy{grid-column:1 / -1;max-width:820px}
}
@media(max-width:980px){
  .hero-inner{width:min(100% - 48px,1180px)}
  .hero-title-line{white-space:normal}
  .representative-grid{gap:54px}
}
@media(max-width:680px){
  .hero h1{font-size:clamp(34px,10.4vw,46px);letter-spacing:.035em;line-height:1.5}
  .hero-title-line{white-space:normal}
  .message-wrap-with-photo{grid-template-columns:1fr;gap:30px}
  .message-portrait{max-width:420px;width:100%}
  .message-wrap-with-photo .message-copy{grid-column:auto}
  .representative-grid{grid-template-columns:1fr;gap:38px}
  .representative-photo{max-width:420px;width:100%}
  .officers-representative{padding-top:68px;padding-bottom:72px}
  .officer-row{grid-template-columns:88px 1fr;min-height:78px;padding:0 18px;gap:14px}
  .officer-name{font-size:19px}
  .officers-heading h2{font-size:30px}
}

/* v1.5 - preserve v1.3 design; responsive stability fixes only */
.statement,
.hero h1,
.representative-copy h2,
.officer-name{
  word-break:keep-all;
  overflow-wrap:normal;
}
.section-heading-row > div,
.message-heading,
.message-copy,
.representative-copy{min-width:0}

/* Keep the v1.3 desktop composition, but prevent the MESSAGE column becoming too narrow. */
@media (max-width:1200px){
  .message-wrap-with-photo{
    grid-template-columns:minmax(0,1fr) minmax(260px,.62fr);
    gap:48px;
    align-items:start;
  }
  .message-wrap-with-photo .message-copy{
    grid-column:1 / -1;
    max-width:820px;
  }
  .message-heading .statement{font-size:clamp(32px,4.2vw,48px)}
}

@media (max-width:980px){
  .section-heading-row{grid-template-columns:1fr;gap:30px;align-items:start}
  .section-heading-row .statement{max-width:860px;font-size:clamp(32px,5.2vw,46px)}
  .message-wrap-with-photo{grid-template-columns:minmax(0,1fr) minmax(240px,.72fr);gap:38px}
  .message-heading .statement{font-size:clamp(31px,5vw,44px)}
  .representative-grid{grid-template-columns:minmax(260px,.78fr) minmax(0,1.22fr);gap:46px}
}

@media (max-width:760px){
  .container,.hero-inner{width:min(100% - 36px,1180px)}
  .message-wrap-with-photo{grid-template-columns:1fr;gap:28px}
  .message-heading .statement{font-size:clamp(29px,8.2vw,39px);line-height:1.65}
  .message-portrait{width:min(100%,420px);justify-self:start}
  .message-wrap-with-photo .message-copy{grid-column:auto;max-width:none}
  .representative-grid{grid-template-columns:1fr;gap:34px}
  .representative-photo{width:min(100%,420px)}
  .section-heading-row .statement{font-size:clamp(29px,8vw,39px);line-height:1.65}
}

@media (max-width:680px){
  .page-hero h1{font-size:clamp(34px,10vw,44px)}
  .officer-row{grid-template-columns:82px minmax(0,1fr);padding:0 16px;gap:12px}
  .officer-role{font-size:11px;letter-spacing:.1em}
  .officer-name{font-size:18px;letter-spacing:.055em}
}

@media (max-width:420px){
  .container,.hero-inner{width:min(100% - 28px,1180px)}
  .hero h1{font-size:clamp(31px,9.8vw,39px);letter-spacing:.025em}
  .statement,.section-heading-row .statement,.message-heading .statement{font-size:clamp(27px,8.4vw,35px);letter-spacing:.035em}
  .officer-row{grid-template-columns:74px minmax(0,1fr);min-height:72px;padding:0 12px}
  .officer-name{font-size:17px}
}

/* v1.6 - MESSAGE desktop overflow correction only */
/* Keep the original v1.3 three-column composition on wide screens while
   reserving enough real width for the Japanese headline and body copy. */
@media (min-width:1201px){
  .message-wrap-with-photo{
    grid-template-columns:minmax(390px,1.08fr) minmax(300px,.82fr) minmax(280px,.82fr);
    gap:36px;
    align-items:center;
  }
  .message-heading .statement{
    font-size:clamp(38px,3.15vw,46px);
    line-height:1.7;
    letter-spacing:.045em;
    white-space:normal;
  }
  .message-heading .statement br{display:block}
  .message-portrait{width:100%;max-width:360px;justify-self:center}
  .message-copy{
    min-width:0;
    width:100%;
    font-size:14px;
    line-height:2.2;
    overflow-wrap:anywhere;
    word-break:normal;
  }
}

/* Before the three-column layout gets tight, retain the original hierarchy
   as heading + portrait, then place the message below. */
@media (min-width:981px) and (max-width:1200px){
  .message-wrap-with-photo{
    grid-template-columns:minmax(0,1fr) minmax(280px,.72fr);
    gap:44px;
    align-items:start;
  }
  .message-heading .statement{
    font-size:clamp(36px,4vw,46px);
    line-height:1.7;
  }
  .message-portrait{width:100%;max-width:360px;justify-self:end}
  .message-wrap-with-photo .message-copy{
    grid-column:1 / -1;
    max-width:820px;
    min-width:0;
  }
}

@media (max-width:980px){
  .message-wrap-with-photo{overflow:visible}
  .message-heading,.message-copy,.message-portrait{min-width:0;max-width:100%}
  .message-copy{overflow-wrap:anywhere;word-break:normal}
}

/* v1.7 - uniform officer/profile card directory */
.officers-directory-section{background:#fff;padding-top:96px;padding-bottom:120px}
.officers-directory-section .officers-heading{margin-bottom:42px}
.officer-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:54px 32px}
.officer-card{min-width:0}
.officer-card-photo{margin:0;position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--cream)}
.officer-card-photo:after{content:"";position:absolute;inset:0;border:1px solid rgba(12,42,71,.10);pointer-events:none}
.officer-card-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 24%}
.officer-photo-placeholder{width:100%;height:100%;display:grid;place-items:center;background:linear-gradient(145deg,#f7f4ec,#efeadf);color:#b8ad91}
.officer-photo-placeholder span{font-family:Georgia,"Times New Roman",serif;font-size:11px;letter-spacing:.24em}
.officer-card-body{padding:22px 2px 0}
.officer-card-role{font-size:10px;font-weight:600;letter-spacing:.18em;color:var(--gold);margin-bottom:7px}
.officer-card-name{font-family:var(--serif);font-weight:400;font-size:26px;line-height:1.5;letter-spacing:.075em;color:var(--navy);margin:0;padding-bottom:16px;border-bottom:1px solid var(--line);word-break:keep-all}
.officer-card-profile{font-family:var(--serif);font-size:13px;line-height:2.05;color:#555b5c;padding-top:16px}
.officer-card-profile p{margin:0 0 12px}
.officer-card-profile-empty{min-height:0;padding-top:0}
.officers-admin-note{margin:54px 0 0;padding-top:18px;border-top:1px solid var(--line);font-size:11px;color:var(--muted)}

/* The former representative/list layouts are intentionally unused on the officers page in v1.7. */
@media(max-width:980px){
  .officers-directory-section{padding-top:76px;padding-bottom:96px}
  .officer-card-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:46px 28px}
}
@media(max-width:600px){
  .officers-directory-section{padding-top:58px;padding-bottom:76px}
  .officer-card-grid{grid-template-columns:1fr;gap:42px}
  .officer-card{width:min(100%,440px)}
  .officer-card-name{font-size:24px}
  .officer-card-profile{font-size:13px}
}

/* v1.8 - OUR VISION overlap correction only */
/* The generic .statement uses keep-all in v1.5. That is useful elsewhere,
   but the long Japanese vision sentence must have intentional line breaks
   so it never intrudes into the explanatory column. */
.vision-section .section-heading-row{
  grid-template-columns:minmax(0,1.45fr) minmax(300px,.55fr);
  gap:64px;
  align-items:end;
}
.vision-section .section-heading-row > div,
.vision-section .vision-intro{min-width:0}
.vision-statement{
  font-size:clamp(34px,3.45vw,50px);
  line-height:1.65;
  letter-spacing:.045em;
  word-break:normal;
  overflow-wrap:normal;
  max-width:100%;
}
.vision-statement span{display:block;white-space:nowrap}
.vision-section .vision-intro{
  align-self:end;
  padding-bottom:.45em;
}

@media(max-width:1180px){
  .vision-section .section-heading-row{
    grid-template-columns:minmax(0,1fr) minmax(280px,.52fr);
    gap:44px;
  }
  .vision-statement{font-size:clamp(32px,3.65vw,44px)}
}

@media(max-width:980px){
  .vision-section .section-heading-row{
    grid-template-columns:1fr;
    gap:26px;
    align-items:start;
  }
  .vision-statement{font-size:clamp(31px,5.2vw,44px)}
  .vision-section .vision-intro{max-width:760px;padding-bottom:0}
}

@media(max-width:680px){
  .vision-statement{
    font-size:clamp(27px,7.8vw,37px);
    line-height:1.7;
    letter-spacing:.025em;
  }
  .vision-statement span{white-space:normal}
}


/* v1.9 - mobile responsive hardening (preserve desktop design) */
@media (max-width:680px){
  html,body{max-width:100%;overflow-x:hidden}
  .vision-section{overflow:hidden}
  .vision-section .container,
  .vision-section .section-heading-row,
  .vision-section .section-heading-row > div,
  .vision-section .vision-intro,
  .vision-statement{
    width:100%;
    max-width:100%;
    min-width:0;
  }
  .vision-section .section-heading-row{
    display:block;
    margin-bottom:38px;
  }
  .vision-section .eyebrow{margin-bottom:18px}
  .vision-statement{
    margin:0 0 28px;
    font-size:clamp(25px,7.1vw,30px);
    line-height:1.75;
    letter-spacing:.012em;
    word-break:normal;
    overflow-wrap:anywhere;
  }
  .vision-statement span{
    display:block;
    width:100%;
    max-width:100%;
    white-space:normal;
    word-break:normal;
    overflow-wrap:anywhere;
  }
  .vision-section .vision-intro{
    font-size:13px;
    line-height:2.15;
    overflow-wrap:anywhere;
  }
  .vision-grid{width:100%;max-width:100%;overflow:hidden}
  .vision-card{min-width:0;width:100%}
  .vision-card > div{min-width:0}
  .vision-card h3,.vision-card p{overflow-wrap:anywhere}
}

@media (max-width:420px){
  .vision-statement{
    font-size:clamp(24px,7vw,28px);
    line-height:1.72;
    letter-spacing:0;
  }
  .vision-section .vision-intro{font-size:12.5px}
  .vision-card{grid-template-columns:48px minmax(0,1fr);gap:16px;padding:22px 18px}
  .vision-no{width:48px;height:48px}
  .vision-card h3{font-size:18px;line-height:1.65}
}


/* v2.0 - mobile layout reset: preserve desktop, eliminate all horizontal overflow */
@media (max-width:680px){
  html, body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }

  /* Correct earlier invalid width expressions such as min(100% - 30px, ...). */
  .container,
  .hero-inner{
    width:min(1180px, calc(100% - 32px));
    max-width:calc(100% - 32px);
    margin-left:auto;
    margin-right:auto;
  }

  .site-header,
  main,
  .hero,
  .section,
  .footer,
  .contact-band{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }

  .header-inner{
    min-width:0;
    height:82px;
    padding:0;
  }
  .brand{
    min-width:0;
    width:auto;
    max-width:100%;
  }
  .brand-logo{
    width:min(205px, 72vw);
    max-width:100%;
  }

  /* Hero: same visual identity, but scale typography to the viewport. */
  .hero{
    min-height:0;
    height:auto;
    max-height:none;
  }
  .hero-inner{
    padding:64px 0 76px;
  }
  .hero-rule{
    height:48px;
    margin-bottom:22px;
  }
  .kicker,
  .eyebrow{
    max-width:100%;
    font-size:10px;
    line-height:1.8;
    letter-spacing:.19em;
    overflow-wrap:anywhere;
    word-break:normal;
  }
  .hero .kicker{
    font-size:9px;
    letter-spacing:.16em;
    line-height:1.7;
  }
  .hero h1{
    width:100%;
    max-width:100%;
    margin:22px 0 22px;
    font-size:clamp(32px, 9.2vw, 42px);
    line-height:1.52;
    letter-spacing:.025em;
    word-break:normal;
    overflow-wrap:anywhere;
  }
  .hero-title-line{
    display:block;
    width:100%;
    max-width:100%;
    white-space:normal;
  }
  .hero-lead{
    width:100%;
    max-width:100%;
    font-size:14px;
    line-height:2;
    overflow-wrap:anywhere;
  }
  .hero-actions{
    gap:10px;
    margin-top:30px;
  }
  .hero-actions .btn{
    min-width:0;
    padding:0 18px;
    font-size:11px;
  }
  .hero-mark{
    right:-4vw;
    max-width:108%;
    font-size:clamp(110px, 34vw, 180px);
    overflow:hidden;
  }

  /* Global Japanese display headings. */
  .statement,
  .section-heading-row .statement,
  .message-heading .statement,
  .vision-statement{
    width:100%;
    max-width:100%;
    min-width:0;
    font-size:clamp(28px, 8.1vw, 36px);
    line-height:1.68;
    letter-spacing:.025em;
    white-space:normal;
    word-break:normal;
    overflow-wrap:anywhere;
  }
  .statement br{
    display:block;
  }

  .section{
    padding:68px 0;
  }
  .beginning .statement{
    margin-bottom:30px;
  }
  .two-col-copy{
    grid-template-columns:1fr;
    gap:18px;
  }
  .long-copy p{
    min-width:0;
    font-size:14px;
    line-height:2.15;
    overflow-wrap:anywhere;
  }
  .navy-quote{
    margin-top:38px;
    padding:26px 22px;
  }
  .navy-quote span{
    font-size:19px;
    line-height:1.8;
  }

  /* Every two-column section becomes a clean vertical flow. */
  .section-heading-row,
  .vision-section .section-heading-row,
  .compact,
  .message-wrap,
  .message-wrap-with-photo,
  .contact-band-inner{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:26px;
    width:100%;
    max-width:100%;
    min-width:0;
  }
  .section-heading-row > *,
  .vision-section .section-heading-row > *,
  .message-wrap-with-photo > *,
  .contact-band-inner > *{
    min-width:0;
    max-width:100%;
  }

  .vision-section .section-heading-row{
    margin-bottom:38px;
  }
  .vision-statement{
    margin:16px 0 24px;
  }
  .vision-statement span{
    display:block;
    width:100%;
    max-width:100%;
    white-space:normal;
  }
  .vision-intro,
  .section-heading-row > p{
    width:100%;
    max-width:100%;
    font-size:13px;
    line-height:2.05;
    overflow-wrap:anywhere;
  }

  .vision-grid{
    grid-template-columns:1fr;
    width:100%;
    max-width:100%;
  }
  .vision-card,
  .vision-card:last-child{
    grid-column:auto;
    grid-template-columns:54px minmax(0,1fr);
    gap:18px;
    width:100%;
    min-width:0;
    padding:24px 20px;
  }
  .vision-no{
    width:54px;
    height:54px;
  }
  .vision-card h3{
    font-size:19px;
    line-height:1.6;
    word-break:normal;
    overflow-wrap:anywhere;
  }
  .vision-card p{
    font-size:13px;
    line-height:2;
    word-break:normal;
    overflow-wrap:anywhere;
  }

  .cycle-grid{
    grid-template-columns:1fr;
    width:100%;
  }
  .cycle-grid div{
    grid-template-columns:54px minmax(0,1fr);
    min-width:0;
    padding:22px 18px;
  }

  .support-grid{
    grid-template-columns:1fr;
    width:100%;
  }
  .support-grid article{
    min-width:0;
  }
  .support-actions{
    width:100%;
    gap:18px;
  }
  .support-actions .btn{
    width:100%;
  }

  .message-heading,
  .message-copy{
    width:100%;
    max-width:100%;
  }
  .message-portrait{
    width:min(100%, 420px);
    max-width:100%;
    justify-self:start;
  }
  .message-copy{
    font-size:14px;
    line-height:2.15;
    overflow-wrap:anywhere;
  }

  .contact-info{
    padding-left:0;
    width:100%;
  }

  .footer-top,
  .footer-grid{
    grid-template-columns:1fr;
    width:100%;
  }
  .footer-logo{
    width:min(230px, 72vw);
    max-width:100%;
  }
}

@media (max-width:420px){
  .container,
  .hero-inner{
    width:calc(100% - 28px);
    max-width:calc(100% - 28px);
  }
  .hero-inner{padding:56px 0 66px}
  .hero h1{
    font-size:clamp(30px, 8.9vw, 36px);
    letter-spacing:.012em;
  }
  .statement,
  .section-heading-row .statement,
  .message-heading .statement,
  .vision-statement{
    font-size:clamp(27px, 7.9vw, 33px);
    letter-spacing:.015em;
  }
  .hero-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    width:100%;
  }
  .hero-actions .btn{
    width:100%;
    padding:0 10px;
  }
  .vision-card{
    grid-template-columns:48px minmax(0,1fr);
    gap:15px;
    padding:22px 16px;
  }
  .vision-no{
    width:48px;
    height:48px;
  }
}

/* v2.1 — intentional Japanese title wrapping on phones */
.hero-title-mobile,
.title-mobile,
.vision-mobile{display:none}
.hero-title-desktop,
.title-desktop,
.vision-desktop{display:block}
.vision-desktop > span{display:block}

@media (max-width: 680px){
  .hero-title-desktop,
  .title-desktop,
  .vision-desktop{display:none !important}
  .hero-title-mobile,
  .title-mobile,
  .vision-mobile{display:block !important;width:100%;max-width:100%;}
  .hero-title-mobile > span,
  .title-mobile > span,
  .vision-mobile > span{
    display:block;
    width:100%;
    max-width:100%;
    white-space:nowrap;
  }

  .hero h1.hero-title{
    font-size:clamp(29px, 8.2vw, 34px) !important;
    line-height:1.55 !important;
    letter-spacing:.01em !important;
    width:100%;
    max-width:100%;
  }
  .hero-title-mobile > span + span{margin-top:.18em}

  .beginning-title{
    font-size:clamp(30px, 8.4vw, 35px) !important;
    line-height:1.62 !important;
    letter-spacing:.015em !important;
  }
  .beginning-title .title-mobile > span + span{margin-top:.08em}

  .vision-statement{
    font-size:clamp(28px, 7.65vw, 32px) !important;
    line-height:1.58 !important;
    letter-spacing:0 !important;
    overflow:visible !important;
  }
  .vision-mobile > span + span{margin-top:.08em}
  .vision-mobile > span:nth-child(3){margin-top:.55em}

  .beginning-title,
  .vision-statement,
  .hero-title,
  .beginning-title *,
  .vision-statement *,
  .hero-title *{
    overflow-wrap:normal !important;
    word-break:keep-all !important;
  }
}

@media (max-width: 360px){
  .hero h1.hero-title{font-size:28px !important}
  .beginning-title{font-size:29px !important}
  .vision-statement{font-size:27px !important}
}

/* v2.2 — unified mobile gutters
   Keep desktop untouched. On phones every major content block shares one
   30px left/right alignment line so headings, copy, images and cards do not
   drift toward the viewport edge. */
@media (max-width:680px){
  :root{--mobile-gutter:30px}

  html,body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }

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

  /* One source of truth for horizontal page spacing. Using auto width with
     explicit margins avoids Safari/min() rounding and legacy width overrides. */
  .container,
  .hero-inner{
    width:auto !important;
    max-width:none !important;
    margin-left:var(--mobile-gutter) !important;
    margin-right:var(--mobile-gutter) !important;
  }

  /* Never let section children escape the shared content column. */
  .container > *,
  .hero-inner > *,
  .section-heading-row,
  .section-heading-row > *,
  .message-wrap-with-photo > *,
  .contact-band-inner > *,
  .footer-top > *,
  .footer-grid > *{
    min-width:0;
    max-width:100%;
  }

  /* Align all prominent visual blocks to exactly the same 30px gutter. */
  .navy-quote,
  .vision-grid,
  .cycle-grid,
  .support-grid,
  .news-list,
  .message-portrait{
    width:100% !important;
    max-width:100% !important;
  }

  .message-portrait{
    justify-self:stretch !important;
  }

  /* Text blocks should wrap inside, never create a wider intrinsic column. */
  .hero h1,
  .hero-lead,
  .statement,
  .beginning-title,
  .vision-statement,
  .vision-intro,
  .long-copy,
  .long-copy p,
  .message-copy,
  .contact-info,
  .footer-tagline,
  .footer-brand{
    min-width:0;
    max-width:100%;
    overflow-wrap:break-word;
  }

  /* Keep the intentionally composed mobile title lines while respecting the
     common content width. */
  .hero-title-mobile,
  .title-mobile,
  .vision-mobile,
  .hero-title-mobile > span,
  .title-mobile > span,
  .vision-mobile > span{
    max-width:100%;
  }

  /* Footer navigation also follows the same visual left edge. */
  .footer-links{
    justify-content:flex-start;
  }
}

@media (max-width:380px){
  :root{--mobile-gutter:24px}
}


/* v2.4 — title variant visibility fix
   Desktop and mobile title markup coexist so each viewport can have deliberate
   Japanese line breaks. Earlier generic span rules were more specific than the
   variant classes, causing both OUR VISION versions to render at once. */
.vision-statement > .vision-mobile,
.beginning-title > .title-mobile,
.hero-title > .hero-title-mobile{
  display:none !important;
}
.vision-statement > .vision-desktop,
.beginning-title > .title-desktop,
.hero-title > .hero-title-desktop{
  display:block !important;
}

@media (max-width:680px){
  .vision-statement > .vision-desktop,
  .beginning-title > .title-desktop,
  .hero-title > .hero-title-desktop{
    display:none !important;
  }
  .vision-statement > .vision-mobile,
  .beginning-title > .title-mobile,
  .hero-title > .hero-title-mobile{
    display:block !important;
  }
}


/* v2.5 — officers: smaller portraits, larger biography area, English under portrait */
.officer-card-grid{display:grid;grid-template-columns:1fr;gap:30px}
.officer-card{
  display:grid;grid-template-columns:220px minmax(0,1fr);grid-template-rows:auto 1fr;
  column-gap:42px;align-items:start;border:1px solid var(--line);padding:34px;min-width:0
}
.officer-card-photo{grid-column:1;grid-row:1;width:100%;max-width:220px;aspect-ratio:4/5;margin:0}
.officer-card-english{grid-column:1;grid-row:2;text-align:center;padding:14px 4px 0;font-family:Georgia,"Times New Roman",serif;color:var(--navy)}
.officer-card-english-name{font-size:12px;line-height:1.55;letter-spacing:.14em}
.officer-card-english-role{margin-top:3px;font-size:11px;line-height:1.5;letter-spacing:.08em;color:var(--gold)}
.officer-card-body{grid-column:2;grid-row:1 / span 2;padding:0;min-width:0}
.officer-card-profile{min-height:250px;font-size:14px;line-height:2.1;padding-top:20px}
.officer-card-profile-empty{min-height:250px}
@media (max-width:900px){
  .officer-card{grid-template-columns:180px minmax(0,1fr);column-gap:30px;padding:28px}
  .officer-card-photo{max-width:180px}
  .officer-card-profile,.officer-card-profile-empty{min-height:220px}
}
@media (max-width:640px){
  .officer-card{display:block;padding:24px}
  .officer-card-photo{width:66.666%;max-width:240px;margin:0 auto}
  .officer-card-english{width:66.666%;max-width:240px;margin:0 auto 24px}
  .officer-card-body{padding:0}
  .officer-card-profile,.officer-card-profile-empty{min-height:280px}
}
