@charset "utf-8";
/* ABOUT 2026（固定ページ用）
 *
 * デザイナー提供の standalone HTML(v2.0) から起こしたもの。
 * 元ファイルのヘッダー・ナビ・フッターはテーマの現行のものを使うため落とし、
 * 残りのセレクタはすべて .about2026 の下にスコープしている。
 * :root の変数は .about2026 に移した（--gutter などがテーマ側と衝突しないように）。
 * 画像は images/about2026/ に実ファイルとして書き出し済み。
 *
 * 01 のグリッドは .grid ではなく .intro-grid。テーマの common.js が
 *   document.querySelector(".grid")
 * で最初の .grid を Masonry に渡すため、.grid のままだと height:10px に
 * 潰されて後続セクションが重なる。デザイナーから新版をもらったら毎回付け替える。
 */
.about2026{--gutter:36px;--ink:#20231f;--muted:#646861;--green:#465241;--paper:#f7f7f4;--line:#d9dcd6;--highlight:#efeee9}
.about2026 *{box-sizing:border-box}
html{scroll-behavior:smooth}
.about2026{font-family:"Noto Sans CJK JP","Noto Sans JP",sans-serif;color:var(--ink);background:white;-webkit-font-smoothing:antialiased}
.about2026 p, .about2026 h1, .about2026 h2, .about2026 h3{margin-top:0}
.about2026 a{text-decoration:none;color:inherit}
.about2026 .eyebrow{color:#697169;font-size:14px;font-weight:700;letter-spacing:.16em;line-height:1.7}
.about2026 .wrap{max-width:1190px;margin:auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.about2026 .hero{min-height:630px;display:grid;grid-template-columns:48% 52%;background:#f5f5f2}
.about2026 .hero .copy{padding:90px 44px 86px max(62px,calc((100vw - 1160px)/2));display:flex;flex-direction:column;justify-content:center}
.about2026 .hero .copy .eyebrow{font-size:17px;letter-spacing:.045em;color:#8c8e89}
.about2026 .hero h1{font-size:65px;letter-spacing:-.035em;line-height:1.25;font-weight:800;margin:32px 0 28px;white-space:nowrap}
.about2026 .hero .lead{font-size:20px;line-height:1.9;font-weight:550;margin:0;letter-spacing:.01em}
.about2026 .hero .photo{background-image:url('../images/about2026/hero.jpg');background-size:cover;background-position:center;clip-path:polygon(13% 0,100% 0,100% 100%,0 100%);margin-left:-65px}
.about2026 .intro{padding-top:140px;padding-bottom:135px}
.about2026 .section-hint{display:flex;align-items:center;gap:14px;color:#667264;font-size:13px;font-weight:800;letter-spacing:.17em;margin-bottom:20px}
.about2026 .section-hint:before{content:"";display:block;height:2px;width:31px;background:#73846f}
.about2026 .intro .intro-grid{display:grid;grid-template-columns:minmax(0,41fr) minmax(0,59fr);gap:62px;align-items:start}
.about2026 .intro .title{font-size:49px;line-height:1.38;letter-spacing:-.045em}
.about2026 .copybody{font-size:17px;line-height:2.15;letter-spacing:.025em;color:#3d413e}
.about2026 .copybody p{margin-bottom:20px}
.about2026 .small-note{font-size:12px;color:#92968f;margin-top:26px}
.about2026 .statement{background:#4b5546;color:white;padding:37px 0}
.about2026 .statement .in{display:flex;align-items:center;justify-content:space-between;gap:24px}
.about2026 .statement strong{font-size:27px;letter-spacing:.035em}
.about2026 .statement p{font-size:14px;line-height:1.7;opacity:.9;margin:0}
.about2026 .split{display:grid;grid-template-columns:50% 50%;min-height:600px}
.about2026 .split .textside{padding:92px min(7vw,108px);align-self:center}
.about2026 .split .textside .section-hint{margin-bottom:26px}
.about2026 .split h2{font-size:37px;line-height:1.5;letter-spacing:-.045em;margin:0 0 30px}
.about2026 .split .picture{min-height:570px;background-size:cover;background-position:center}
.about2026 .split.tradition{background:#f5f4f0}
.about2026 .split.tradition .picture{background-image:url('../images/about2026/tradition.jpg')}
.about2026 .split.innovation{background:#fff}
.about2026 .split.innovation .picture{background-image:url('../images/about2026/innovation.jpg')}
.about2026 .number{font-size:65px;font-weight:900;color:#d9ded5;line-height:1;margin-bottom:12px;letter-spacing:-.06em}
.about2026 .lifeblock{background:#f1f1ed}
.about2026 .nature{height:390px;width:100%;max-width:100%;overflow:hidden;background-image:url('../images/about2026/nature.jpg');background-size:cover;background-position:center 60%;background-repeat:no-repeat}
.about2026 .life-inner{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:70px;padding-top:100px;padding-bottom:110px}
.about2026 .life-inner h2{font-size:37px;line-height:1.55;letter-spacing:-.055em;margin-top:16px}
.about2026 .quote{font-size:24px;font-weight:800;line-height:1.75;border-left:3px solid #66755e;padding-left:24px;margin-top:42px}
.about2026 .creator{padding-top:135px;padding-bottom:140px}
.about2026 .creator-grid{display:grid;grid-template-columns:minmax(0,42fr) minmax(0,58fr);gap:80px;align-items:start}
.about2026 .portrait{height:600px;background:linear-gradient(160deg,#d0d2cb,#858f7b 70%,#59634f);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.about2026 .portrait:before{content:"";width:330px;height:330px;border-radius:50%;border:1px solid rgba(255,255,255,.35);position:absolute;top:55px;left:-140px}
.about2026 .portrait:after{content:"";width:430px;height:430px;border-radius:50%;border:1px solid rgba(255,255,255,.27);position:absolute;bottom:-210px;right:-200px}
.about2026 .portrait span{font-size:17px;font-weight:700;color:#fff;letter-spacing:.13em;border:1px solid rgba(255,255,255,.65);padding:18px 28px;text-align:center;line-height:2.1}
.about2026 .creator h2{font-size:42px;line-height:1.4;margin:12px 0 15px}
.about2026 .creator .byline{font-size:13px;letter-spacing:.15em;color:#6c776b;margin-bottom:24px}
.about2026 .facts{border-top:1px solid var(--line);margin-top:30px;padding-top:22px;display:grid;grid-template-columns:1fr 1fr;gap:12px 24px}
.about2026 .facts div{font-size:14px;line-height:1.7;border-bottom:1px solid #e9eae7;padding-bottom:12px}
.about2026 .foot-call{background:#f3f2ee;padding:83px 0;text-align:center}
.about2026 .foot-call h2{font-size:30px;margin:0 0 18px;letter-spacing:.09em}
.about2026 .foot-call p{color:#596358;font-size:15px;margin-bottom:28px}
.about2026 .foot-call a{display:inline-block;border:1px solid #637061;padding:16px 31px;font-size:14px;font-weight:700}
.about2026 .foot-call a:hover{background:#dee2d9}
@media(max-width:900px){
.about2026 .hero{grid-template-columns:1fr}
.about2026 .hero .copy{padding:55px var(--gutter);min-height:340px}
.about2026 .hero h1{font-size:42px}
.about2026 .hero .photo{height:310px;clip-path:none;margin:0}
.about2026 .intro{padding-top:80px;padding-bottom:80px}
.about2026 .intro .intro-grid, .about2026 .life-inner, .about2026 .creator-grid{grid-template-columns:1fr;gap:28px}
.about2026 .intro .title{font-size:34px}
.about2026 .statement .in{display:block}
.about2026 .statement p{margin-top:12px}
.about2026 .split{grid-template-columns:1fr}
.about2026 .split .textside{padding:70px var(--gutter);order:2}
.about2026 .split .picture{min-height:360px;order:1}
.about2026 .split h2, .about2026 .life-inner h2{font-size:29px}
.about2026 .life-inner{padding-top:70px;padding-bottom:80px}
.about2026 .nature{height:240px}
.about2026 .portrait{height:430px}
.about2026 .creator{padding-top:80px;padding-bottom:80px}
.about2026 .creator h2{font-size:36px}
.about2026 .facts{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
}


/* ABOUT v1.2: text-free panoramic banner at EVERY breakpoint.
 * Avoid screenshot-derived image containing text, border remnants and clipped letters.
 * Readable heading remains live HTML below the photo.
 */
.about2026 .lifeblock{width:100%; max-width:100%; overflow:hidden;}
.about2026 .lifeblock .nature{width:100%; max-width:100%; background-image:url('../images/about2026/nature.jpg'); background-size:cover; background-position:center 60%; background-repeat:no-repeat;}
.about2026 .life-inner > *{min-width:0;}

/* Avoid wide navigation overflow when mobile browser requests a desktop viewport (~980px). */
@media (min-width:901px) and (max-width:1100px){
}
@media (max-width:900px) {
.about2026 .lifeblock .nature{height:auto; aspect-ratio:16 / 10; min-height:220px; max-height:370px;}
.about2026 .lifeblock .life-inner{grid-template-columns:minmax(0,1fr);gap:28px;}
}
@media (max-width:480px){
.about2026 .lifeblock .nature{aspect-ratio:4 / 3; min-height:0;}
}


/* ABOUT v1.3: Unified horizontal rhythm for the landscape photograph.
 * Use the same .wrap as all text sections; do not let the image touch the viewport.
 * Give section 03→image and image→section 04 balanced vertical breathing room.
 */
.about2026 .lifeblock .nature-frame{padding-top:clamp(48px,6vw,88px);}
.about2026 .lifeblock .nature-frame .nature{width:100%; height:clamp(240px,30vw,390px);}
.about2026 .lifeblock .life-inner{padding-top:clamp(44px,5vw,72px);}
@media(max-width:900px){
.about2026 .lifeblock .nature-frame{padding-top:48px;}
.about2026 .lifeblock .nature-frame .nature{height:auto; aspect-ratio:16 / 10; min-height:0; max-height:none;}
.about2026 .lifeblock .life-inner{padding-top:44px;}
}
@media(max-width:480px){
.about2026 .lifeblock .nature-frame .nature{aspect-ratio:4 / 3;}
}


/* v1.4: One horizontal gutter across the entire ABOUT page.
   Desktop is unchanged: --gutter remains 36px. Mobile clamp follows the engineer audit.
   Avoid padding shorthands overriding the .wrap horizontal padding. */
@media (max-width: 900px) {
.about2026{--gutter: clamp(22px, 7vw, 40px);}
}


/* v1.5: Photo-only full bleed on mobile, matching other visual blocks.
   Keep the vertical gap and keep text on the shared --gutter grid.
   Do not change the PC image frame. */
@media (max-width:900px) {
.about2026 .lifeblock .nature-frame{padding-left:0;
    padding-right:0;}
}


/* ABOUT v1.6 — tablet image height audit (2026-10-20)
 * Portrait tablets: image height must NOT scale unbounded with viewport width.
 * Previous 16/10 sizing produced 480-563px at 768-900px widths.
 * Up to 900px preserve full-bleed image width; limit visual height to 345px.
 * At 901-1100px desktop side-by-side .split pictures stretched to 800-900px
 * because their grid tracks matched the full long-form copy height.
 * Use landscape-tablet image/text stacking with a capped image instead.
 * Desktop >=1101px and regular mobile <=480px remain structurally unchanged.
 */
@media(max-width:900px) {
.about2026 .lifeblock .nature-frame .nature{height:clamp(240px, 75vw, 345px);
    aspect-ratio:auto;
    min-height:0;
    max-height:345px;}
}
@media(min-width:901px) and (max-width:1100px) {
.about2026 .split{grid-template-columns:minmax(0,1fr);
    min-height:0;}
.about2026 .split .picture{order:1;
    height:clamp(300px, 34vw, 365px);
    min-height:0;}
.about2026 .split .textside{order:2;
    padding:70px var(--gutter);
    min-width:0;}
.about2026 .hero{grid-template-columns:minmax(0,1fr);
    min-height:0;}
.about2026 .hero .copy{padding:64px var(--gutter);}
.about2026 .hero h1{font-size:clamp(42px,5vw,58px);
    white-space:normal;}
.about2026 .hero .photo{height:clamp(300px,34vw,370px);
    margin-left:0;
    clip-path:none;}
.about2026 .creator .portrait{height:clamp(350px,42vw,440px);}
}



/* v1.7 — content expansion and FAQs. Inherit typography, layout and 1.6 tablet fixes. */
.about2026 .hero-year{margin:26px 0 0;color:#6d756c;letter-spacing:.2em;font-size:12px;font-weight:700}
.about2026 .intro-subtitle{color:#758174;font-size:17px;font-weight:600;margin-top:22px}
.about2026 .name-origin{margin-top:82px;border-top:1px solid var(--line);padding-top:40px}
.about2026 .subheading{font-size:22px;letter-spacing:.015em;margin-bottom:28px}
.about2026 .origin-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}
.about2026 .origin-item{background:#f3f4ef;border-top:3px solid #687765;padding:30px 34px;min-width:0}
.about2026 .origin-en{display:block;font-size:13px;letter-spacing:.18em;color:#788678;font-weight:800;margin-bottom:15px}
.about2026 .origin-item h4{font-size:24px;margin:0 0 15px}
.about2026 .origin-item p{font-size:16px;line-height:1.95;margin:0;color:#444d44}
.about2026 .statement.theme-statement{padding:92px 0;background:#4b5546}
.about2026 .theme-grid{display:grid;grid-template-columns:40% minmax(0,1fr);gap:65px;align-items:start}
.about2026 .theme-statement .theme-label{letter-spacing:.24em;color:#d8e0d6;font-size:13px;font-weight:750;margin:10px 0 20px}
.about2026 .theme-statement h2{font-size:44px;line-height:1.3;letter-spacing:.025em;margin:0;color:#fff}
.about2026 .theme-statement .copybody{color:#fff;font-size:17px;line-height:2}
.about2026 .theme-statement .copybody p:last-child{margin-bottom:0}
.about2026 .split .copybody p:last-child{margin-bottom:0}
.about2026 .events{padding-top:100px;padding-bottom:108px}
.about2026 .events h2{font-size:33px;line-height:1.5;margin:10px 0 14px}
.about2026 .events>p{font-size:15px;color:#6e766d;line-height:1.9;margin-bottom:28px}
.about2026 .map-placeholder{background:repeating-linear-gradient(-45deg,#f4f5f1,#f4f5f1 14px,#f0f2eb 14px,#f0f2eb 28px);border:1px dashed #adb7a7;min-height:290px;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:28px;gap:12px;text-align:center;color:#566454}
.about2026 .map-placeholder .map-icon{font-size:38px;line-height:1}
.about2026 .map-placeholder strong{font-size:20px;letter-spacing:.05em}
.about2026 .map-placeholder span{font-size:13px;color:#747f71}
.about2026 .creator{padding-top:115px;padding-bottom:125px}
.about2026 .creator h2 small{font-size:21px;font-weight:500;letter-spacing:0;color:#677363;white-space:nowrap}
.about2026 .creator-role{font-size:16px;font-weight:750;line-height:1.65;margin:0 0 18px}
.about2026 .creator-tags{font-size:13px;line-height:1.95;color:#687267;padding:15px 18px;background:#f2f3ee;border-left:3px solid #637562;margin-bottom:26px}
.about2026 .faq{background:#f6f6f2;padding:105px 0 125px}
.about2026 .faq-heading{display:flex;gap:25px;align-items:baseline;margin:0 0 32px}
.about2026 .faq-heading h2{font-size:39px;margin:0;letter-spacing:-.025em}
.about2026 .faq-heading p{font-size:16px;margin:0;color:#647064}
.about2026 .faq-list{border-top:1px solid #cfd5cb}
.about2026 .faq-list details{border-bottom:1px solid #cfd5cb;background:transparent}
.about2026 .faq-list summary{list-style:none;cursor:pointer;display:flex;gap:22px;align-items:center;padding:27px 17px 27px 4px;font-size:18px;font-weight:700;line-height:1.6}
.about2026 .faq-list summary::-webkit-details-marker{display:none}
.about2026 .faq-list .faq-q{font-size:22px;font-weight:800;color:#60735d;flex-shrink:0}
.about2026 .faq-list .chevron{margin-left:auto;width:12px;height:12px;flex:0 0 12px;border-right:2px solid #667564;border-bottom:2px solid #667564;transform:rotate(45deg);transition:transform .2s ease}
.about2026 .faq-list details[open] .chevron{transform:rotate(225deg)}
.about2026 .faq-answer{padding:0 55px 26px 47px;color:#444d44;font-size:16px;line-height:2}
.about2026 .faq-answer p{margin:0 0 13px}
.about2026 .faq-answer p:last-child{margin-bottom:0}
.about2026 .faq-answer strong{color:#344330}
@media(max-width:1100px){
.about2026 .theme-grid{grid-template-columns:minmax(0,1fr);gap:28px}
.about2026 .statement.theme-statement{padding:70px 0}
}
@media(max-width:900px){
.about2026 .name-origin{margin-top:52px;padding-top:32px}
.about2026 .origin-grid{grid-template-columns:1fr;gap:16px}
.about2026 .origin-item{padding:25px 26px}
.about2026 .theme-statement h2{font-size:34px}
.about2026 .events{padding-top:75px;padding-bottom:80px}
.about2026 .events h2{font-size:27px}
.about2026 .map-placeholder{min-height:240px}
.about2026 .creator h2 small{font-size:16px}
.about2026 .faq{padding:75px 0 90px}
.about2026 .faq-heading{display:block}
.about2026 .faq-heading h2{font-size:30px}
.about2026 .faq-heading p{margin-top:8px}
.about2026 .faq-list summary{font-size:16px;gap:12px;padding:23px 3px}
.about2026 .faq-answer{padding:0 9px 25px 34px;font-size:15px}
}
@media(max-width:480px){
.about2026 .hero .copy{padding-top:50px;padding-bottom:54px}
.about2026 .hero h1{font-size:39px;white-space:normal}
.about2026 .hero-year{margin-top:18px}
.about2026 .intro .title{font-size:32px}
.about2026 .origin-item h4{font-size:22px}
.about2026 .creator h2{font-size:33px}
.about2026 .creator h2 small{display:inline-block;font-size:15px}
.about2026 .creator-tags{font-size:12px}
.about2026 .faq-list .faq-q{font-size:20px}
}



/* ABOUT v1.8 — supplement merge. Preserve existing brand type and common gutter. */
.about2026 .basic-note{margin-top:64px;padding:42px 48px;background:#f4f5f1;border-left:4px solid #6b7a67}
.about2026 .basic-note-inner{display:grid;grid-template-columns:minmax(0,43fr) minmax(0,57fr);gap:42px;align-items:start}
.about2026 .basic-note .section-hint{grid-column:1 / -1;margin-bottom:0}
.about2026 .basic-note h3{font-size:29px;line-height:1.55;letter-spacing:-.028em;margin:0}
.about2026 .basic-note .copybody{font-size:16px;line-height:1.95}
.about2026 .basic-note .copybody p:last-child{margin-bottom:0}
.about2026 .basic-note .questions{font-weight:700;color:#4a5849}
.about2026 .quality{background:#f9f9f6;padding:110px 0 118px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.about2026 .quality-grid{display:grid;grid-template-columns:minmax(0,40fr) minmax(0,60fr);gap:72px;align-items:start}
.about2026 .quality-label{font-size:12px;letter-spacing:.2em;font-weight:700;color:#647463;margin:0 0 18px}
.about2026 .quality h2{font-size:37px;line-height:1.48;letter-spacing:-.04em;margin:0 0 22px}
.about2026 .quality-kicker{font-size:16px;font-weight:700;color:#63745e;line-height:1.8}
.about2026 .quality-story{font-size:17px}
.about2026 .quality-values{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:19px;margin-top:54px}
.about2026 .quality-value{background:white;border-top:3px solid #74856e;padding:28px 27px 31px;min-width:0}
.about2026 .value-num{font-size:13px;font-weight:800;letter-spacing:.15em;color:#8b9988;display:block;margin-bottom:16px}
.about2026 .quality-value h3{font-size:20px;letter-spacing:-.02em;margin:0 0 13px}
.about2026 .quality-value p{font-size:15px;line-height:1.95;color:#4b514b;margin:0}
.about2026 .quality-assurance{border-top:1px solid var(--line);padding-top:43px;margin-top:58px;display:grid;grid-template-columns:40% minmax(0,1fr);gap:60px}
.about2026 .quality-assurance-title h3{font-size:24px;line-height:1.6;letter-spacing:-.02em;margin:0}
.about2026 .quality-assurance .copybody{font-size:16px}
.about2026 .quality-faq-list{margin:9px 0 0;padding-left:1.45em}
.about2026 .quality-faq-list li{padding-left:5px;margin:0 0 13px}
@media(max-width:1100px){
.about2026 .quality-grid{gap:48px}
.about2026 .quality-assurance{gap:35px}
}
@media(max-width:900px){
.about2026 .basic-note{margin-top:45px;padding:29px 28px}
.about2026 .basic-note-inner{grid-template-columns:minmax(0,1fr);gap:17px}
.about2026 .basic-note .section-hint{grid-column:auto}
.about2026 .basic-note h3{font-size:26px}
.about2026 .quality{padding:76px 0 90px}
.about2026 .quality-grid, .about2026 .quality-assurance{grid-template-columns:minmax(0,1fr);gap:24px}
.about2026 .quality h2{font-size:30px}
.about2026 .quality-values{grid-template-columns:minmax(0,1fr);gap:13px;margin-top:36px}
.about2026 .quality-value{padding:25px 27px}
.about2026 .quality-assurance{margin-top:43px;padding-top:32px}
}
@media(max-width:480px){
.about2026 .basic-note{padding:26px 22px}
.about2026 .basic-note h3{font-size:23px}
.about2026 .quality h2{font-size:28px}
}


/* v2.0 editorial polish: restraint and clear anchors; preserve v1.9 responsive geometry. */
.about2026 .faq-inline-link{color:#476345;text-decoration:underline;text-underline-offset:3px;font-weight:700}
.about2026 .faq-inline-link:hover{color:#2f4c2f}
.about2026 .basic-note .copybody p:last-child{margin-bottom:0}
@media(max-width:480px){
.about2026 .quality-values{margin-top:32px}
}

/* テーマに載せたときの辻褄合わせ。
 *
 * standalone はブラウザ既定に任せていた値がいくつかあり、テーマの
 * html5reset.css と common.css の body{line-height:1.75} に上書きされる。
 * 見出し下の余白が消え、行間だけ広がって standalone と見え方がずれるので、
 * ここで明示して元の見え方に合わせる。
 */
.about2026 .intro .title{margin-bottom:.83em}
.about2026 .life-inner h2{margin-bottom:.83em}
.about2026 .section-hint,
.about2026 .byline,
.about2026 .statement strong,
.about2026 .foot-call h2{line-height:normal}

/* 固定ヘッダーの逃がし。
 *
 * テーマの .header は position:fixed で、どのページも main が 0 から始まる。
 * 各ページが自前の上余白でヘッダーを避ける作りになっている。
 * standalone はヘッダーが通常フローにある前提なのでその余白が無く、
 * ヒーローがヘッダーの下に潜っていた（900〜1199px では実際に重なっていた）。
 *
 * .header の高さは common.css で 65px、max-width:768px のとき 40px。
 * standalone がヘッダー直下に取っていた 55px をその上に足して、
 * どの幅でもヘッダー下端から 55px 空くようにする。
 * 1200px 以上はヒーローが左右2カラムで、もともと余白が足りているため触らない。
 */
.about2026{--tf-header-h:65px}
@media (max-width:768px){
  .about2026{--tf-header-h:40px}
}
/* v1.7 でヒーローの2カラム化が 1101px に前倒しされたので、逃がしもそこまで。
 * 1101px 以上は2カラムで、もともと余白が足りている。 */
@media (max-width:1100px){
  .about2026 .hero .copy{padding-top:calc(var(--tf-header-h) + 55px)}
}

/* 05 THE CREATOR の人物写真。
 *
 * 元の standalone はグラデーションのプレースホルダだった。
 * 実写真に差し替え、枠の縦横比に合わせて画角を出し分ける。
 *   501〜900px  … .portrait の枠が横長に転じる帯（500px でちょうど正方形）。座り姿の横位置。
 *   それ以外     … 縦長の枠。立ち姿を縦に切り出したもの。
 * 切り替えは <picture> の media。該当する1枚だけが読み込まれる。
 */
.about2026 .portrait{background:none;padding:0}
.about2026 .portrait:before,
.about2026 .portrait:after{content:none}
.about2026 .portrait picture{display:block;width:100%;height:100%}
.about2026 .portrait img{display:block;width:100%;height:100%;object-fit:cover}

/* 05 の写真枠を、端末で画角が入れ替わるようにする。
 *
 * 元は高さ430px固定で横幅だけ伸びる作りだったため、枠が横長になるのが
 * 501〜900px の隙間だけになり、スマホもPCも縦枠＝同じ写真になっていた。
 * スマホ・タブレットは横長の枠（座り姿）、PCは縦長の枠（立ち姿）に分ける。
 */
@media (max-width:900px){
  .about2026 .creator .portrait{
    height:clamp(240px, 56vw, 420px);
    width:100%;
  }
}

/* EVENTS の地図。
 *
 * デザイナーの standalone は MAP 差し込み予定のプレースホルダだったので、
 * 日本列島の簡略 SVG とピンに置き換えた。地図は緯度経度から起こしたもので
 * （36°N 基準の等距円筒、海岸線は代表点を滑らかにつないだ簡略形）、
 * 測量用ではなく「全国でやっている」ことを示すための図。
 *
 * 出展情報は最新3件を markup に直接書いている。差し替えるときは
 * ピンの transform（viewBox 座標）も一緒に動かすこと。
 */
.about2026 .ev-layout{display:grid;grid-template-columns:minmax(0,42fr) minmax(0,58fr);gap:48px;align-items:center;margin-top:34px}
.about2026 .ev-mapwrap{background:#f3f4ef;border:1px solid var(--line);padding:22px;display:flex;justify-content:center}
.about2026 .ev-map{width:100%;max-width:340px;height:auto;display:block}
.about2026 .ev-land{fill:#d7dcd3;stroke:#b3bdaf;stroke-width:.5;stroke-linejoin:round}
.about2026 .ev-inset{fill:none;stroke:#cbd3c6;stroke-width:.8}
.about2026 .ev-pin-halo{fill:#687765;opacity:.22}
.about2026 .ev-pin-dot{fill:#687765}
.about2026 .ev-pin-core{fill:#fff}
.about2026 .ev-lead{font-size:13px;font-weight:800;letter-spacing:.17em;color:#667264;margin-bottom:18px}
.about2026 .ev-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.about2026 .ev-list li{border-bottom:1px solid var(--line)}
.about2026 .ev-list a{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"pref name" "pref meta";column-gap:18px;padding:18px 4px;align-items:center}
.about2026 .ev-list a:hover .ev-name{text-decoration:underline}
.about2026 .ev-pref{grid-area:pref;align-self:center;background:#687765;color:#fff;font-size:13px;font-weight:800;letter-spacing:.08em;padding:7px 10px;min-width:58px;text-align:center}
.about2026 .ev-name{grid-area:name;font-size:17px;font-weight:700;line-height:1.6}
.about2026 .ev-meta{grid-area:meta;font-size:13px;color:#747f71;line-height:1.8}
.about2026 .ev-more{display:inline-block;margin-top:24px;border:1px solid #637061;padding:13px 24px;font-size:14px;font-weight:700}
.about2026 .ev-more:hover{background:#dee2d9}

@media (max-width:900px){
  .about2026 .ev-layout{grid-template-columns:minmax(0,1fr);gap:30px}
  .about2026 .ev-map{max-width:230px}
  .about2026 .ev-list a{padding:16px 2px;column-gap:14px}
  .about2026 .ev-name{font-size:16px}
}

@media (prefers-reduced-motion:no-preference){
  .about2026 .ev-pin-halo{animation:ev-pulse 2.6s ease-in-out infinite}
  @keyframes ev-pulse{0%,100%{r:7px;opacity:.3}50%{r:15px;opacity:0}}
}

/* 2026 THEME の行揃え。
 *
 * 左が「ラベル＋見出し」、右が本文。align-items:start のままだと、
 * 右の本文が小さいラベルの高さに並び、大きな見出しと無関係な位置に浮く。
 * ラベル・見出し・本文を行で配置し、本文の1行目を見出しの先頭に合わせる。
 *
 * デザイナーの版は左の2つを無名の <div> でくくっている。新しい版をもらうたび
 * その構造に戻るので、CSS だけでどちらでも成立するようにしてある。
 * display:contents でくくりを透過させ、中の2つを直接グリッドの要素にする。
 * markup が平たい場合は無名の div が無いので、この指定は何もしない。
 */
.about2026 .theme-grid > div:not([class]){display:contents}
.about2026 .theme-grid{
  grid-template-areas:"label gap" "head body";
  gap:0 65px;
  align-items:start;
}
.about2026 .theme-statement .theme-label{grid-area:label}
.about2026 .theme-statement h2{grid-area:head}
.about2026 .theme-statement .copybody{grid-area:body}

/* v2.0 は 1100px 以下で theme-grid を1列にする（232行目）。
 * 行の指定もそこに合わせないと、1本しかない列に2列ぶんの行を割り当てることになり、
 * 1列目が 0px に潰れて見出しが1文字ずつ折り返す。境界は必ず上の指定と揃えること。 */
@media (max-width:1100px){
  .about2026 .theme-grid{grid-template-areas:"label" "head" "body";gap:0}
  .about2026 .theme-statement .copybody{margin-top:26px}
}