/* ======================================================================
   パターン⑱ 横に進む展示型（2026-11-10 作り直し）
   淡い灰色の壁と床の線。額（白いマット＋濃いふち）に入った写真、小さな白い説明板。
   見出しは明朝。body.p18g-on（スクリプトが付ける）のときだけ横に並べ、それ以外は縦の並び。
   ====================================================================== */
body[data-pattern="18"]{
  --wall:#ecebe6;--ink:#1d1d1b;--sub:#5f5d57;--line:#cfccc3;
  --acc:color-mix(in srgb,var(--blue) 78%,#000);
  --frame:#2a2622;
  background:var(--wall);color:var(--ink);
}
body[data-pattern="18"] .sample-notice{background:#fff;color:var(--ink);border-radius:0;border:1px solid var(--line)}
.p18g-wrap{width:min(1100px,100% - 48px);margin:0 auto}

/* ヘッダー */
.p18g-header{background:rgba(236,235,230,.95);box-shadow:0 1px 0 var(--line)}
.p18g-logo{display:flex;flex-direction:column;font-family:"Noto Serif JP",serif;font-weight:900;font-size:20px;line-height:1.2;color:var(--ink)}
.p18g-logo small{font-family:"Noto Sans JP",sans-serif;font-size:12px;font-weight:500;color:var(--sub)}
.p18g-nav a{font-size:14px;font-weight:700;color:var(--ink)}
.p18g-nav a:hover{color:var(--acc)}
.p18g-nav a.p18g-nav__cta{background:var(--ink);color:#fff;padding:8px 18px}
body[data-pattern="18"] .menu-btn span{background:var(--ink)}

/* 額と説明板 */
.p18g-frame{display:block;margin:0;background:#fff;padding:22px;border:12px solid var(--frame);box-shadow:0 18px 30px -12px rgba(0,0,0,.35),inset 0 0 0 1px #e5e2da}
.p18g-frame img{display:block;width:100%;height:100%;object-fit:cover}
.p18g-frame--s{padding:12px;border-width:8px}
.p18g-plate{display:block;background:#fff;padding:14px 16px;font-size:14px;line-height:1.75;box-shadow:0 2px 4px rgba(0,0,0,.12);max-width:340px}
.p18g-plate__t{font-family:"Noto Serif JP",serif;font-weight:900;font-size:16px;margin-bottom:4px}
.p18g-plate__t em{font-style:normal;font-family:"Noto Sans JP",sans-serif;font-size:12px;background:color-mix(in srgb,var(--red) 85%,#000);color:#fff;padding:0 8px;margin-left:8px}
.p18g-tag{display:inline-block;font-size:12px;font-weight:700;border:1px solid var(--sub);padding:0 8px;margin:0 4px 4px 0}
.p18g-room{font-size:13px;font-weight:700;letter-spacing:.3em;color:var(--acc)}
body[data-pattern="18"] .p18g-h2{font-family:"Noto Serif JP",serif;font-weight:900;font-size:clamp(28px,3vw,40px);text-align:left;margin:6px 0 28px;color:var(--ink)}
body[data-pattern="18"] .p18g-h2::after{display:none}
.p18g-btn{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 32px;background:var(--ink);color:#fff !important;font-weight:800;font-size:16px}
.p18g-btn:hover{background:var(--acc)}
.p18g-btn--big{min-height:62px;padding:0 44px;font-size:18px}

/* 展示室（縦のときの基本の形） */
.p18g-hall{position:relative}
.p18g-sticky{position:relative}
.p18g-track{display:flex;flex-direction:column}
.p18g-panel{padding:64px max(24px,calc((100vw - 1100px) / 2))}
.p18g-progress{display:none}

/* 横に進むとき */
body.p18g-on .p18g-sticky{position:sticky;top:0;height:100vh;overflow:hidden;background:linear-gradient(transparent calc(100% - 64px),#dcd9d1 calc(100% - 64px))}
body.p18g-on .p18g-track{flex-direction:row;height:100%;will-change:transform;align-items:stretch}
body.p18g-on .p18g-panel{flex:none;height:100%;padding:110px 70px 90px;display:flex;flex-direction:column;justify-content:center;border-right:1px solid rgba(0,0,0,.06)}
body.p18g-on .p18g-progress{display:block;position:absolute;left:70px;right:70px;bottom:28px;height:3px;background:rgba(0,0,0,.12)}
body.p18g-on .p18g-progress span{display:block;height:100%;width:0;background:var(--acc)}

/* 入口 */
.p18g-p--entry{width:min(820px,72vw)}
.p18g-p--entry .sample-notice{margin-bottom:24px;align-self:flex-start}
.p18g-entry__role{font-size:15px;font-weight:700;color:var(--sub)}
.p18g-entry__name{font-family:"Noto Serif JP",serif;font-weight:900;font-size:clamp(48px,6vw,92px);line-height:1.15;margin:12px 0 26px}
.p18g-entry__name span{display:block;font-size:.36em;color:var(--acc);margin-top:6px}
.p18g-entry__catch{font-family:"Noto Serif JP",serif;font-weight:700;font-size:clamp(20px,2.2vw,28px);line-height:1.6}
.p18g-entry__catch span{display:block}
.p18g-entry__accent{margin-top:12px;font-weight:700;color:var(--sub)}
.p18g-entry__hint{margin-top:36px;font-weight:700;font-size:14px;letter-spacing:.1em;color:var(--acc)}
body:not(.p18g-on) .p18g-entry__hint{display:none}

/* 肖像 */
body.p18g-on .p18g-p--portrait{flex-direction:row;align-items:center;gap:44px}
.p18g-portrait{width:min(380px,100%);aspect-ratio:4/5}
body.p18g-on .p18g-portrait{height:min(560px,calc(100vh - 260px));width:auto}
.p18g-portrait img{object-position:center 15%}
.p18g-portrait__plate{margin-top:20px;align-self:flex-end}
.p18g-stats{list-style:none;display:grid;gap:10px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.p18g-stats b{font-family:"Noto Serif JP",serif;font-size:26px;color:var(--acc)}
.p18g-stats b small{font-size:13px;color:var(--ink);margin:0 2px}
.p18g-stats span{display:block;font-size:13px;line-height:1.6}

/* メッセージ：壁の文章 */
.p18g-p--msg{max-width:none}
body.p18g-on .p18g-p--msg{width:min(1000px,80vw)}
.p18g-msg__title{font-family:"Noto Serif JP",serif;font-weight:700;font-size:clamp(22px,2.2vw,28px);line-height:1.6;margin-bottom:20px}
.p18g-msg{columns:2 300px;column-gap:48px;font-size:15px;line-height:2}
.p18g-msg p{margin-bottom:1em;break-inside:avoid}
.p18g-big{font-family:"Noto Serif JP",serif;font-weight:900;font-size:19px !important;color:var(--acc)}
.p18g-sign{text-align:right;font-weight:700}

/* 取り組み：作品＋説明板 */
.p18g-works{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:40px 32px}
body.p18g-on .p18g-works{display:flex;gap:44px}
.p18g-work{display:flex;flex-direction:column;gap:16px;width:100%}
body.p18g-on .p18g-work{width:260px}
.p18g-canvas{aspect-ratio:1;background:var(--acc);color:#fff;border:10px solid var(--frame);box-shadow:0 18px 30px -12px rgba(0,0,0,.35);display:flex;flex-direction:column;justify-content:flex-end;padding:20px}
.p18g-work:nth-child(3n+2) .p18g-canvas{background:color-mix(in srgb,var(--yellow) 85%,#fff);color:#1a1a1a}
.p18g-work:nth-child(3n) .p18g-canvas{background:#fff;color:var(--ink)}
.p18g-canvas span{font-family:"Noto Serif JP",serif;font-weight:900;font-size:56px;line-height:1}
.p18g-canvas b{font-size:22px;font-weight:900;line-height:1.35;margin-top:8px}
body.p18g-on .p18g-work .p18g-canvas{height:min(260px,calc(100vh - 470px));min-height:170px;aspect-ratio:auto}

/* 議会：資料の展示 */
.p18g-lead{font-size:15px;line-height:1.9;max-width:680px;margin:-12px 0 24px;color:var(--sub)}
.p18g-docs{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px}
body.p18g-on .p18g-docs{display:flex}
.p18g-doc{background:#fffdf8;padding:22px;box-shadow:0 14px 24px -12px rgba(0,0,0,.3);border-top:4px solid var(--acc)}
body.p18g-on .p18g-doc{width:320px}
.p18g-doc__meta{font-size:13px;font-weight:700;color:var(--sub);margin-bottom:6px}
.p18g-doc__meta .p18g-tag{margin-left:6px}
.p18g-doc h3{font-family:"Noto Serif JP",serif;font-weight:900;font-size:18px;line-height:1.5;margin-bottom:8px}
.p18g-doc p{font-size:14px;line-height:1.85;margin-top:6px}
.p18g-doc p b{display:inline-block;background:var(--ink);color:#fff;font-size:12px;padding:0 6px;margin-right:6px}
.p18g-records{list-style:none;background:#fff;padding:10px 20px}
.p18g-records li{display:grid;grid-template-columns:12em 1fr;gap:14px;padding:10px 0;border-bottom:1px solid var(--line)}

/* 活動報告：小さな額のギャラリー */
.p18g-gallery{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:32px}
body.p18g-on .p18g-gallery{display:grid;grid-template-columns:repeat(3,230px);grid-auto-rows:auto;gap:24px 30px}
.p18g-gallery a{display:flex;flex-direction:column;gap:12px}
.p18g-gallery .p18g-frame{aspect-ratio:4/3}
body.p18g-on .p18g-gallery .p18g-frame{aspect-ratio:auto;height:min(140px,calc((100vh - 420px) / 2))}
.p18g-gallery .p18g-plate{padding:10px 12px}
.p18g-gallery time{font-size:12px;color:var(--sub);margin-right:6px}
.p18g-gallery b{display:block;font-size:14px;line-height:1.5}
.p18g-gallery a:hover b{color:var(--acc);text-decoration:underline}

/* プロフィール */
.p18g-prof{display:flex;gap:40px;align-items:flex-start;flex-wrap:wrap}
.p18g-prof__photo{width:min(300px,100%);aspect-ratio:4/5}
body.p18g-on .p18g-prof{flex-wrap:nowrap;align-items:center}
body.p18g-on .p18g-prof__photo{height:min(460px,calc(100vh - 320px));width:auto}
.p18g-prof__photo img{object-position:center 18%}
.p18g-prof__plate{max-width:440px;padding:22px 24px}
.p18g-prof__name{font-family:"Noto Serif JP",serif;font-weight:900;font-size:26px}
.p18g-prof__name small{display:block;font-family:"Noto Sans JP",sans-serif;font-size:13px;color:var(--sub);letter-spacing:.2em}
.p18g-prof__lines{font-weight:700;margin:8px 0 12px}
.p18g-table div{display:grid;grid-template-columns:6.5em 1fr;gap:10px;padding:7px 0;border-top:1px solid var(--line);font-size:13px;line-height:1.7}
.p18g-table dt{font-weight:700}
.p18g-prof__motto{margin-top:10px;font-weight:700;color:var(--acc)}

/* 出口 */
.p18g-p--exit{align-items:flex-start}
body.p18g-on .p18g-p--exit{width:520px}
.p18g-exit{font-family:"Noto Serif JP",serif;font-weight:700;font-size:26px;line-height:1.7;margin-bottom:24px}

/* 展示室のあと */
.p18g-extra{padding:20px 0 0}
.p18g-contact{padding:100px 0;background:var(--ink);color:#fff;text-align:center}
body[data-pattern="18"] .p18g-contact__title{font-family:"Noto Serif JP",serif;font-weight:900;font-size:clamp(26px,3.4vw,42px);line-height:1.5;color:#fff;margin:0 0 16px}
body[data-pattern="18"] .p18g-contact__title::after{display:none}
.p18g-contact .p18g-btn{background:var(--yellow);color:#1a1a1a !important}
.p18g-contact__lead{line-height:1.9;margin-bottom:26px}
.p18g-contact__info{margin-top:16px}
.p18g-contact a:not(.p18g-btn){color:#fff;text-decoration:underline}
.p18g-sns{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:18px}
.p18g-sns__link{display:inline-flex;gap:8px;align-items:center;border:1px solid rgba(255,255,255,.5);padding:6px 14px;font-size:14px;text-decoration:none !important}
.p18g-sns__link svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2}
.p18g-contact :focus-visible{outline-color:var(--yellow)}
.p18g-footer{background:var(--wall);color:var(--ink);border-top:1px solid var(--line)}
.p18g-footer__in{width:min(1100px,100% - 48px);margin:0 auto}
.p18g-footer__name{font-family:"Noto Serif JP",serif;font-weight:900;font-size:20px}
.p18g-footer__office{font-size:14px;line-height:1.9;color:var(--sub)}
body[data-pattern="18"] .float-cta{background:var(--ink);color:#fff;border-radius:0;box-shadow:0 8px 20px rgba(0,0,0,.25)}

@media (max-width:900px){
  .p18g-p--entry{width:auto;padding-top:96px}
  .p18g-panel{border-bottom:1px solid var(--line)}
  .p18g-portrait{max-width:340px}
}
@media (max-width:768px){
  .p18g-wrap,.p18g-footer__in{width:calc(100% - 36px)}
  .p18g-panel{padding:52px 18px}
  .p18g-p--entry{padding-top:86px}
  .p18g-frame{padding:12px;border-width:8px}
  .p18g-records li{grid-template-columns:1fr;gap:4px}
  .p18g-table div{grid-template-columns:6em 1fr}
  body[data-pattern="18"] .p18g-nav{background:var(--wall)}
}