/* PC-only ISSUE art direction. Shared HOME styles are never modified. */
html { scroll-padding-top: 108px; }
body { background: #fff; }
body > footer img { filter: none; mix-blend-mode: screen; }
body > footer { padding-top: 38px; padding-bottom: 24px; }
.ie { --accent: #f90; --text: #252a27; --sub: #616961; --rule: #daddd7; --sheet: #f5f6f2; color: var(--text); }
.ie * { box-sizing: border-box; }
.ie-wrap { width: min(1280px, calc(100% - 144px)); margin-inline: auto; }
.ie p,.ie figure,.ie h1,.ie h2,.ie h3 { margin: 0; }
.ie a:focus-visible { outline: 2px solid #bd6f00; outline-offset: 7px; }
.ie h2 { font-size: clamp(38px,3.1vw,48px); line-height: 1.5; font-weight: 700; letter-spacing: -.045em; }
.ie p { font-size: 16px; line-height: 1.95; }
.ie-breadcrumb { display: flex; gap: 16px; padding-top: 26px; font-size: 11px; color: var(--sub); }
.ie-breadcrumb a { font-weight: 700; }
.ie-breadcrumb > span:nth-child(2) { color: #b4bbb2; }
.ie-opening { display: grid; grid-template-columns: 1.35fr 1fr; gap: 0 64px; padding: 40px 0 0; }
.ie-kicker { display: flex; align-items: center; gap: 24px; font-size: 12px!important; font-weight: 900; letter-spacing: .18em; color: #af6800; }
.ie-kicker span { font-size: 12px; letter-spacing: .06em; color: var(--sub); font-weight: 500; }
.ie h1 { margin-top: 22px; font-size: clamp(48px,4vw,62px); line-height: 1.4; letter-spacing: -.055em; }
.ie-lead { margin-top: 27px!important; color: var(--sub); }
.ie-opening-note { align-self: center; padding: 45px 0 32px 48px; border-left: 1px solid var(--rule); position: relative; }
.ie-opening-note > p { font-size: 29px; font-weight: 500; line-height: 1.65; letter-spacing: -.04em; }
.ie-note-line { display: block; width: 46px; height: 2px; margin: 25px 0 21px; background: var(--accent); }
.ie-opening-note a { font-size: 14px; display: flex; gap: 24px; align-items: center; }
.ie-opening-note a > span { color: #aa6300; }
.ie-contents { grid-column: 1/-1; display: flex; justify-content: space-between; gap: 12px; border-block: 1px solid var(--rule); margin-top: 52px; }
.ie-contents a { padding: 20px 0; font-size: 13px; font-weight: 700; white-space: nowrap; }
.ie-contents span { margin-right: 12px; color: #ac6600; font-size: 11px; font-weight: 900; }
.ie-contents a:hover { color: #a66000; }
.ie-section-label { display: flex; gap: 16px; align-items: center; font-size: 12px; font-weight: 700; letter-spacing: .06em; margin-bottom: 28px; }
.ie-section-label > span { color: #ac6600; font-size: 12px; font-weight: 900; }
.ie-unseen { padding: 50px 0 50px; }
.ie-unseen > h2 { font-size: clamp(34px, 3vw, 44px); line-height: 1.5; }
.ie-01-comparison { display: grid; grid-template-columns: 24% 10% 1fr; align-items: start; max-width: 1060px; margin: 30px auto 0!important; padding: 28px 0 26px; border-top: 1px solid var(--rule); }
.ie-01-visible { padding-top: 5px; }
.ie-01-visible h3 { font-size: 23px; line-height: 1.5; font-weight: 500; }
.ie-01-visible p { margin-top: 13px; font-size: 14px; color: var(--sub); }
.ie-01-connector { align-self: start; margin: 20px 28px 0 0; height: 1px; background: #c2c8be; font-size: 0; position: relative; }
.ie-01-connector::after { content: ''; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid #a66b19; border-right: 1px solid #a66b19; transform: rotate(45deg); }
.ie-01-unseen h3 { font-size: clamp(25px, 2.15vw, 30px); line-height: 1.5; letter-spacing: -.03em; }
.ie-01-unseen > p { margin-top: 11px; font-size: 16px; color: var(--text); font-weight: 500; }
.ie-01-unseen ul { display: flex; flex-wrap: wrap; gap: 12px 26px; list-style: none; margin: 23px 0 0; padding: 0; font-size: 14px; color: #70786f; }
.ie p.ie-01-definition { max-width: 1060px; border-top: 1px solid var(--rule); padding-top: 21px; padding-right: min(10vw, 140px); color: var(--sub); font-size: 16px; line-height: 2; text-wrap: pretty; }
.ie-01-definition strong { color: var(--text); font-weight: 700; white-space: nowrap; text-decoration: underline; text-decoration-color: #e7ba76; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.ie-discovery { display: grid; grid-template-columns: 40% 1fr; gap: 5%; }
.ie-discovery-copy p { color: var(--sub); margin-top: 24px; }
.ie-visibility { position: relative; padding-top: 6px; }
.ie-visible-record { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 0 30px 28px; }
.ie-micro { grid-column: 1/-1; font-size: 12px; letter-spacing: .08em; color: var(--sub); }
.ie-visible-record strong { font-size: 24px; font-weight: 500; }
.ie-visible-record > span:last-child { font-size: 13px; align-self: center; color: var(--sub); }
.ie-observation-line { border-top: 1px dashed #c4c9c0; text-align: center; position: relative; }
.ie-observation-line > span { font-size: 11px; color: var(--sub); background: #fff; padding: 0 10px; position: relative; top: -14px; }
.ie-hidden-record { padding: 7px 30px 25px; position: relative; background: var(--sheet); }
.ie-hidden-record:before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); }
.ie-hidden-record .ie-micro { display: block; padding-top: 18px; }
.ie-hidden-record strong { display: block; margin: 15px 0 6px; font-size: 25px; letter-spacing: -.03em; }
.ie-hidden-record > span:not(.ie-micro) { font-size: 13px; color: var(--sub); }
.ie-hidden-words { display: flex; gap: 26px; margin-top: 22px; padding-top: 15px; border-top: 1px solid #dfe2db; color: #70786f; font-size: 14px; }
.ie-definition { display: grid; grid-template-columns: 75px 340px 1fr; align-items: center; gap: 20px; margin-top: 28px; padding: 22px 0; border-block: 1px solid var(--rule); }
.ie-definition-label { font-size: 12px; color: var(--sub); }
.ie-definition h3 { font-size: 24px; letter-spacing: -.045em; }
.ie-definition h3 > span { display: block; font-size: 13px; font-weight: 400; margin-top: 4px; }
.ie-definition p { font-size: 15px; color: var(--sub); }
.ie-data { background: var(--sheet); padding: 55px 0 45px; }
.ie-data-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 60px; }
.ie-data-heading > div { width: 380px; }
.ie-data-heading p { color: var(--sub); }
.ie-unit { display: inline-block; font-size: 12px; font-weight: 700; margin-top: 16px; border-bottom: 2px solid var(--accent); padding-bottom: 3px; }
.ie-data-figure { margin-top: 34px!important; }
.ie-data-figure > figcaption { font-size: 14px; font-weight: 700; }
.ie-data-plot { position: relative; height: 302px; display: grid; grid-template-columns: repeat(4,1fr); padding-left: 72px; margin-top: 38px; }
.ie-plot-grid { position: absolute; left: 0; right: 0; top: 0; bottom: 50px; display: flex; flex-direction: column; justify-content: space-between; }
.ie-plot-grid span { position: relative; width: 100%; font-size: 10px; color: #788073; line-height: 0; }
.ie-plot-grid span:after { content: ''; position: absolute; left: 72px; right: 0; height: 1px; background: #dde1d7; }
.ie-data-item { position: relative; height: 252px; text-align: center; }
.ie-stem { position: absolute; bottom: 0; left: 50%; height: calc(var(--amount)*252px); width: 2px; background: #e4b26a; transform-origin: bottom; }
.ie-stem:before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); position: absolute; top: 0; left: -4px; }
.ie-value { position: absolute; bottom: calc(var(--amount)*252px + 10px); width: 100%; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ie-value strong { font-size: 35px; letter-spacing: -.025em; line-height: 1; font-weight: 700; }
.ie-value > span { font-size: 12px; margin-left: 5px; }
.ie-data-item p { position: absolute; top: 270px; width: 100%; font-size: 14px; font-weight: 700; letter-spacing: -.02em; }
.ie-data-foot { display: grid; grid-template-columns: 1fr 1.2fr; gap: 50px; border-top: 1px solid #d7dcd1; margin-top: 22px; padding-top: 22px; }
.ie-data-foot p { font-size: 12px; color: var(--sub); line-height: 1.8; }
.ie-data-foot a { font-size: 11px; color: var(--sub); line-height: 1.85; justify-self: end; }
.ie-data-foot a:hover { text-decoration: underline; }
.ie-context { padding: 64px 0 54px; }
.ie-context h2 { position: relative; z-index: 1; }
.ie-scene { margin: -36px 0 0 44%!important; }
.ie-scene-placeholder { height: 260px; position: relative; background: #e9eae4; display: grid; place-items: center; }
.ie-scene-placeholder span { color: #848a7f; font-size: 11px; letter-spacing: .2em; }
.ie-scene-placeholder i { position: absolute; inset: 20px; border: 1px solid #d8dcd1; }
.ie-scene-grid { height: 300px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: repeat(2,minmax(0,1fr)); gap: 8px; overflow: hidden; }
.ie-scene-grid img { width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: cover; }
.ie-scene-grid img:nth-child(1) { object-position: center 44%; }
.ie-scene-grid img:nth-child(2) { object-position: center 48%; }
.ie-scene-grid img:nth-child(3) { object-position: center 42%; }
.ie-scene-grid img:nth-child(4) { object-position: center 48%; }
.ie-scene figcaption { text-align: right; font-size: 12px; color: var(--sub); padding-top: 13px; }
.ie-context-bottom { display: grid; grid-template-columns: 1.1fr 1fr; gap: 100px; margin-top: 32px; }
.ie-work-factors { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 25px; align-self: start; }
.ie-work-factors li { border-bottom: 1px solid var(--rule); padding-bottom: 10px; font-size: 15px; }
.ie-work-factors li:before { content: '—'; color: #ac6600; margin-right: 10px; }
.ie-context-bottom > p { color: var(--sub); }
.ie-perspective { padding: 55px 0 48px; background: #faf9f6; }
.ie-scope-heading { display: flex; justify-content: space-between; gap: 30px; align-items: end; }
.ie-scope-heading h2 { font-size: clamp(36px,2.9vw,44px); }
.ie-scope-heading > p { color: var(--sub); font-size: 14px; }
.ie-lens { position: relative; margin-top: 32px; height: 350px; }
.ie-lens-frame { position: absolute; bottom: 0; left: 0; border: 1px solid; border-radius: 0 110px 0 0; }
.ie-lens-workplace { width: 100%; height: 100%; background: #f0f1eb; border-color: #c5cdc0; }
.ie-lens-work { width: 69%; height: 76%; background: #fff; border-color: #aebba7; }
.ie-lens-body { width: 35%; height: 53%; background: #fff4e2; border-color: #e4b46c; border-radius: 0 75px 0 0; }
.ie-lens-caption { padding: 24px 30px; }
.ie-lens-work .ie-lens-caption { margin-left: 52%; padding-left: 22px; }
.ie-lens-workplace .ie-lens-caption { margin-left: 72%; padding-left: 8px; }
.ie-lens-caption > span { display: block; font-size: 11px; color: #747d6c; font-weight: 700; letter-spacing: .1em; }
.ie-lens-body .ie-lens-caption > span { color: #aa6400; }
.ie-lens-caption h3 { font-size: 28px; margin: 12px 0 8px; letter-spacing: -.025em; }
.ie-lens-caption p { max-width: 250px; font-size: 14px; color: var(--sub); line-height: 1.85; }
.ie-lens-direction { position: absolute; right: 28px; bottom: 25px; width: 52%; display: flex; align-items: center; gap: 20px; color: #737c6c; font-size: 12px; }
.ie-lens-direction i { height: 1px; background: #9eab93; flex: 1; position: relative; }
.ie-lens-direction i:after { content: ''; position: absolute; right: 0; bottom: 0; height: 6px; width: 6px; border-right: 1px solid #9eab93; transform: skewX(45deg); }
.ie-conclusion { padding-top: 60px; padding-bottom: 45px; }
.ie-conclusion-body { display: grid; grid-template-columns: 1.3fr 1fr; gap: 80px; }
.ie-conclusion-body > div > p { margin-top: 24px; color: var(--sub); font-size: 15px; }
.ie-company-perspectives { padding-top: 7px; }
.ie-company-perspectives > p { font-size: 12px; color: var(--sub); }
.ie-company-perspectives ul { padding: 0; margin: 19px 0 0; list-style: none; }
.ie-company-perspectives li { border-bottom: 1px solid var(--rule); padding: 14px 0; font-size: 19px; font-weight: 500; }
.ie-company-perspectives li span { font-size: 11px; color: #ac6600; font-weight: 900; margin-right: 25px; }
.ie-next { margin-top: 52px; padding: 28px 32px; background: var(--sheet); display: grid; grid-template-columns: 1fr auto 58px; align-items: center; gap: 35px; }
.ie-next h3 { font-size: 25px; letter-spacing: -.025em; margin-top: 7px; line-height: 1.5; }
.ie-next p { font-size: 14px; color: var(--sub); }
.ie-next-arrow { border: 1px solid #d4dacf; border-radius: 50%; height: 58px; display: grid; place-items: center; color: #ae6600; font-size: 25px; transition: background .2s; }
.ie-next:hover .ie-next-arrow { background: #ffecd0; }
@media (prefers-reduced-motion:no-preference) {
  .ie-lens.is-seen .ie-lens-work { animation: ie-expand .65s ease both; }
  .ie-lens.is-seen .ie-lens-workplace { animation: ie-expand .65s .12s ease both; }
  @keyframes ie-expand { from { opacity: .3; clip-path: inset(0 50% 0 0); } to { opacity: 1; clip-path: inset(0); } }
}
@media (min-width:701px) and (max-width:1150px) {
  .ie-wrap { width: calc(100% - 80px); }
  .ie-opening { gap: 0 35px; }
  .ie-opening-note { padding-left: 25px; }
  .ie-definition { grid-template-columns: 65px 1fr; }
  .ie-definition p { grid-column: 2; margin-left: 0; }
  .ie-contents a { font-size: 11px; }
  .ie-lens-caption { padding: 22px 20px; }
  .ie-lens-caption h3 { font-size: 24px; }
  .ie-next { grid-template-columns: 1fr 50px; }
  .ie-next p { display: none; }
}