:root {
  --color-primary: #4e9bc2;
  --color-secondary: #67bc76;
  --color-text: #31466c;
  --color-white: #fff;
  --color-black: #000;
  --color-download: #00a9ff;
  --color-kv-base: #e7e7e7;
  --gradient-brand: linear-gradient(165.4655deg, var(--color-secondary) 12.831%, var(--color-primary) 87.072%);
  --gradient-heading: linear-gradient(166.6931deg, var(--color-secondary) 12.831%, var(--color-primary) 87.072%);
  --font-sans: "Noto Sans JP", sans-serif;
  --font-mincho: "Zen Old Mincho", serif;
  --font-rounded: "M PLUS Rounded 1c", sans-serif;
  --font-inter: "Inter", sans-serif;
  --font-roboto: "Roboto", sans-serif;
  --font-number: "Quattrocento", serif;
  --kv-circle-size: 689px;
  --content-width: 1202px;
  --page-gutter: 40px;
}
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
body { color: var(--color-text); background: var(--color-white); font: 700 16px/1.5 var(--font-sans); }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--color-text); outline-offset: 4px; }
.l-inner { width: calc(100% - 2 * var(--page-gutter)); max-width: var(--content-width); margin-inline: auto; }
/* ヘッダーとKVを同じグリッド領域に重ね、通常フローで高さを保つ。 */
.page-top { display: grid; }
.header { grid-area: 1 / 1; align-self: start; z-index: 2; display: flex; justify-content: space-between; align-items: center; padding-right: 20px; }
.header__brand { display: flex; align-items: flex-start; width: 716px; height: 116px; padding: 40px; border-bottom-right-radius: 20px; background: var(--color-white); }
.header__logo { width: 635.878px; height: 30.5313px; }
.header__actions { display: flex; gap: 10px; }
.button { display: flex; align-items: center; justify-content: center; width: 200px; min-height: 72px; padding: 12px; border-radius: 4px; color: var(--color-white); text-align: center; font-size: 16px; line-height: 1.5; }
.button--contact { background: var(--color-secondary); }
.button--download { background: var(--color-download); }
.section-heading { font-family: var(--font-roboto); font-size: 114px; line-height: 1.5; font-weight: 700; }
.main { grid-area: 1 / 1; min-width: 0; }
.kv { position: relative; isolation: isolate; display: grid; height: 910px; overflow: clip; color: var(--color-white); }
.kv__backdrop { position: absolute; z-index: -1; inset: 0; background: linear-gradient(rgb(231 231 231 / 20%), rgb(231 231 231 / 20%)), url("../img/kv-photo-01.jpg") center / cover no-repeat, var(--color-kv-base); }
.kv__backdrop::after { content: ""; position: absolute; inset: 587px 0 0; background: linear-gradient(to bottom, rgb(78 155 194 / 0), rgb(37 74 92 / 40%) 56.7308%); }
.kv__circle { grid-area: 1 / 1; align-self: start; justify-self: center; margin-top: 131px; width: var(--kv-circle-size); height: var(--kv-circle-size); padding-top: calc(var(--kv-circle-size) * 0.3364267); background: url("../img/kv-circle-gradient.svg") center / 100% 100% no-repeat, url("../img/kv-circle-white.svg") center / 100% 100% no-repeat; }
.kv__title { width: calc(var(--kv-circle-size) * 0.8272859); margin-left: calc(var(--kv-circle-size) * 0.1514978); font: 700 calc(var(--kv-circle-size) * 0.2322206)/1 var(--font-mincho); font-feature-settings: "halt" 1, "liga" 0; letter-spacing: -0.1em; text-align: center; background: var(--gradient-heading); background-clip: text; -webkit-background-clip: text; color: transparent; }
.kv__title-tight { letter-spacing: -0.24em; }
.kv__tagline { margin-top: calc(var(--kv-circle-size) * 0.037987); margin-left: calc(var(--kv-circle-size) * 0.3095951); font-size: calc(var(--kv-circle-size) * 0.0435414); font-weight: 500; line-height: 1; font-feature-settings: "halt" 1, "hwid" 1; color: var(--color-black); white-space: nowrap; }
.kv__caption { grid-area: 1 / 1; justify-self: start; align-self: end; display: flex; align-items: center; gap: 18px; margin: 0 0 55.4px 9.479167%; white-space: nowrap; }
.kv__number { font: 700 64px/1.8 var(--font-number); }
.kv__caption-text { font-size: 48px; line-height: 1.8; transform: translateY(-5.5px); }
.kv__lead { grid-area: 1 / 1; justify-self: end; align-self: end; margin: 0 6.770833% 75px 0; font-size: 20px; line-height: 1.8; white-space: nowrap; }
@media (min-width: 1280px) and (max-width: 1599px) {
  .kv__circle { --kv-circle-size: 600px; }
  .kv__caption { margin-left: 40px; }
  .kv__caption-text { font-size: 38px; }
  .kv__lead { margin-right: 40px; font-size: 18px; }
}
.reason { height: 1149px; padding-top: 153.012px; overflow: clip; background: var(--color-white); text-align: center; }
.reason__title { display: flex; justify-content: center; align-items: baseline; height: 110px; font-weight: 700; }
.reason__word { display: block; font: 900 110px/1 var(--font-mincho); letter-spacing: -0.05em; text-indent: -0.45em; font-feature-settings: "halt" 1, "liga" 0; color: transparent; background: linear-gradient(170.383deg, var(--color-secondary) 12.831%, var(--color-primary) 87.072%); background-clip: text; -webkit-background-clip: text; }
.reason__word-tight { letter-spacing: -0.18em; }
.reason__word-period { letter-spacing: -0.7em; }
.reason__explanation { font-size: 40px; line-height: 1.45; }
.reason__comma { letter-spacing: -11.8px; font-feature-settings: "liga" 0; }
.reason__intro { margin-top: 56.988px; font-size: 24px; line-height: 1.8; }
.reason__powers { display: flex; justify-content: center; align-items: center; gap: 30px; width: fit-content; margin: 18.8px auto 0; padding: 30px 60px; border: 1px solid transparent; border-radius: 8px; background: linear-gradient(var(--color-white), var(--color-white)) padding-box, var(--gradient-brand) border-box; }
.reason__power { display: flex; gap: 10px; align-items: center; font-size: 24px; line-height: 1; white-space: nowrap; }
.reason__power-icon { width: 42px; height: 54px; flex-shrink: 0; }
.reason__required { margin-top: 19px; font-size: 24px; line-height: 1.8; }
.strengths { position: relative; isolation: isolate; margin-top: 64.8px; }
.strengths::before { content: ""; position: absolute; z-index: -1; width: 2113px; height: 1403px; top: 86px; left: calc(50% - 1056px); background: url("../img/strengths-background.svg") center / 100% 100% no-repeat; }
.strengths__eyebrow { height: 171px; }
.strengths__eyebrow-svg { display: block; width: 100%; height: 171px; overflow: visible; }
/* C6: Figma strokes are OUTSIDE with no fill; the glyph mask hides the variable font's overlapping contours. */
.strengths__eyebrow-svg .outline-text, .value__reject-svg .outline-text { fill: none; stroke-width: 3px; }
.strengths__lead { margin-top: 6px; font-size: 40px; line-height: 1.5; }
.strengths__tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 45px; transform: translateX(16px); }
.strengths__tab { display: grid; grid-template-columns: 1fr 24px; align-items: center; gap: 0; height: 120px; padding-inline: 54px 30px; border-radius: 4px; color: var(--color-white); font-size: 32px; line-height: 1.45; font-feature-settings: "halt" 1; white-space: nowrap; }
.strengths__tab--accept { background: var(--color-secondary); }
.strengths__tab--utilize { background: var(--gradient-brand); }
.strengths__tab--entrust { background: var(--color-primary); }
.strengths__arrow { width: 24px; height: 24px; }

/* C2: セクション本文は通常フロー。図の内部座標はSVGのviewBoxに限定。 */
:root {
  --capability-width: 1000px;
  --capability-panel-width: 1250px;
  --color-table-heading: #e6e9ee;
  --color-table-alternate: #f4f4f4;
  --color-table-border: #a6b4cd;
  --color-table-rule: #cdcdcd;
  --color-table-text: #1a1a1a;
  --color-table-accent: #176389;
  --color-table-chemical: #c4f1da;
  --color-table-highlight: #ebf9ee;
  --color-diagram-background: #eef9ff;
  --color-diagram-blue: #245dc4;
  --color-diagram-shadow: rgb(227 240 240 / 80%);
  --gradient-capability: linear-gradient(176.86317deg, var(--color-secondary) 12.831%, var(--color-primary) 87.072%);
}
.capability { --content-width: var(--capability-width); }
.capability__panel { width: calc(100% - 2 * var(--page-gutter)); max-width: var(--capability-panel-width); margin-inline: auto; border-radius: 10px; background: var(--color-white); }
.capability__inner { min-width: 0; }
.capability__heading { text-align: center; }
.capability__title { height: 64px; color: transparent; background: var(--gradient-capability); background-clip: text; -webkit-background-clip: text; font-size: 64px; line-height: 1; letter-spacing: -0.05em; font-feature-settings: "halt" 1, "liga" 0; }
.capability__subtitle { margin-top: 14px; color: var(--color-primary); font-size: 28px; font-weight: 900; line-height: 1.8; }
.capability__lead { margin-top: 30px; color: var(--color-black); font-size: 16px; font-weight: 500; line-height: 1.8; }
.accept { min-height: 2332px; padding-top: 73px; padding-bottom: 93px; background: linear-gradient(to bottom, rgb(255 255 255 / 0) 269px, var(--color-white) 609px), linear-gradient(89.045126deg, rgb(103 188 118 / 20%) 14.955%, rgb(78 155 194 / 20%) 89.489%); }
.capability__panel--accept { min-height: 2166px; padding-top: 100px; padding-bottom: 7px; }
.accept__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 25px; margin-top: 59.2px; }
.accept__card { overflow: hidden; border-radius: 4px; }
.accept__photo { width: 100%; aspect-ratio: 316.667 / 216.667; object-fit: cover; }
.accept__card-title { display: flex; align-items: center; justify-content: center; height: 66.667px; background: var(--color-table-heading); text-align: center; font-size: 20px; line-height: 1.8; }
.accept__diagram { width: 963px; max-width: 100%; margin: 53.666px auto 0; }
.diagram__canvas { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--font-sans); }
.diagram__text { font-family: var(--font-sans); white-space: nowrap; }
.diagram__canvas foreignObject { overflow: visible; }
.diagram__text--gradient { background: var(--gradient-brand); background-clip: text; -webkit-background-clip: text; }
.diagram__map-emphasis { color: var(--color-diagram-blue); font-size: 28px; font-weight: 900; text-decoration: underline; }
.diagram__map-detail { font-size: 16px; }
.diagram__small { font-size: 20px; }
.accept__note { display: flex; gap: 0; margin-top: 46px; min-height: 74px; color: var(--color-black); font-size: 14px; font-weight: 500; line-height: 1.8; }
.accept__note > span { flex: 0 0 17px; }
.accept__table { width: 100%; margin-top: 30px; border-collapse: collapse; table-layout: fixed; font-size: 18px; line-height: 1.8; text-align: left; }
.accept__row { height: 56px; }
.accept__row:nth-child(2) { height: 86px; }
.accept__cell { padding: 10.5px 20px; border-block: 1px solid var(--color-table-border); color: var(--color-black); background: var(--color-white); font-weight: 500; }
.accept__row:nth-child(odd) .accept__cell { background: var(--color-table-alternate); }
.accept__cell--heading { width: 28%; color: var(--color-text); font-weight: 700; }
.accept__row .accept__cell--heading { background: var(--color-table-heading); }
.accept__link { display: grid; grid-template-columns: 1fr 24px; align-items: center; width: 400px; max-width: 100%; min-height: 80px; margin: 60px auto 0; padding: 16px 12px 16px 36px; border: 2px solid var(--color-secondary); border-radius: 4px; color: var(--color-secondary); text-align: center; font-size: 16px; }
.accept__link-arrow { width: 17.594px; height: 10.85px; transform: rotate(-90deg); }
.utilize { min-height: 2205px; }
.diagram-panel { display: flex; flex-direction: column; }
.diagram-panel__title { z-index: 1; display: flex; align-items: center; justify-content: center; align-self: center; width: 366px; height: 78px; margin-right: 14px; border-radius: 60px; color: var(--color-white); background: linear-gradient(169.819952deg, var(--color-secondary) 12.831%, var(--color-primary) 87.072%); font-size: 28px; line-height: 1.8; }
.diagram-panel__body { margin-top: -39px; padding-top: 79px; border-radius: 10px; background: var(--color-white); box-shadow: 0 0 8.333px 8.333px var(--color-diagram-shadow); }
.utilize__flow { margin-top: 40.2px; }
.utilize__flow .diagram-panel__body { padding-bottom: 60px; }
.utilize__flow-image { width: 920px; max-width: calc(100% - 78px); margin-inline: auto; }
.utilize__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 25px; margin-top: 80px; }
.utilize__card { min-width: 0; }
.utilize__illustration { overflow: hidden; width: 100%; aspect-ratio: 316.667 / 216.667; border-radius: 10px; background: var(--color-diagram-background); }
.utilize__card-title { display: flex; align-items: center; justify-content: center; height: 36.667px; margin-top: 15px; font-size: 20px; line-height: 1.8; text-align: center; }
.utilize__card-description { min-height: 95px; margin-top: 6.666px; color: var(--color-black); font-size: 13.333334px; font-weight: 500; line-height: 1.8; }
.utilize__table { width: 100%; margin-top: 63px; border-collapse: collapse; table-layout: fixed; color: var(--color-table-text); font-size: 16px; font-weight: 500; line-height: 1.8; text-align: left; }
.utilize__column--method { width: 16%; }
.utilize__column--process { width: 36%; }
.utilize__column--plastic { width: 20%; }
.utilize__column--product { width: 28%; }
.utilize__cell { padding: 14px 20px; vertical-align: top; border: 1px solid var(--color-table-rule); font-weight: 500; overflow-wrap: anywhere; }
.utilize__table thead .utilize__cell { height: 92px; vertical-align: middle; background: var(--color-primary); color: var(--color-white); font-weight: 700; }
.utilize__table tbody th { color: var(--color-table-accent); background: var(--color-table-heading); font-weight: 700; }
/* .utilize__table tbody .utilize__row:nth-child(1) { height: 82px; }
.utilize__table tbody .utilize__row:nth-child(2) { height: 110px; }
.utilize__table tbody .utilize__row:nth-child(3) { height: 112px; }
.utilize__table tbody .utilize__row:nth-child(4) { height: 145px; }
.utilize__table tbody .utilize__row:nth-child(5) { height: 88px; } */
.utilize__row--chemical .utilize__cell { background: var(--color-table-highlight); border-block: 2px solid var(--color-secondary); }
.utilize__table tbody .utilize__row--chemical th { background: var(--color-table-chemical); }
.utilize__row--chemical .utilize__cell:nth-child(2) { border-left: 2px solid var(--color-secondary); }
.utilize__row--chemical .utilize__cell:last-child { border-right: 2px solid var(--color-secondary); }
.entrust { min-height: 2109px; padding-top: 100px; padding-bottom: 195px; background: url("../img/entrust-background.svg") center top / 100% 2094px no-repeat, var(--color-diagram-background); }
.capability__panel--entrust { /*min-height: 1814px;*/ padding-bottom: 120px; }
.entrust__map { margin-top: 57px; }
.entrust__map .diagram-panel__body { padding-bottom: 39.73px; box-shadow: 0 0 9.167px 9.167px var(--color-diagram-shadow); }
.entrust__map-image { width: 904.003px; max-width: calc(100% - 96px); margin-inline: auto; }
.entrust__chart { width: 100%; margin-top: 70px; overflow: hidden; border-radius: 10px; background: var(--color-diagram-background); }

.utilize__table tbody .utilize__cell { padding-block: 11px; }

/* C3 BEGIN — 1920pxカンプの07〜11。動きはC4で追加。 */
:root {
  --color-c3-pale: #eef9ff;
  --color-c3-panel: #d6e8f2;
  --color-c3-faq: #f5fafd;
  --color-c3-blue: #245dc4;
  --color-c3-border: #779be2;
  --color-c3-yellow: #fde426;
  --color-c3-muted: #69727b;
  --c3-width: 1000px;
  --c3-shadow: 0 0 8px rgb(0 0 0 / 15%);
}
.c3-inner { width: var(--c3-width); max-width: calc(100% - 80px); margin-inline: auto; }
.c3-heading { font-feature-settings: "halt" 1, "liga" 0; margin: 0; height: 110px; text-align: center; font-size: 50px; line-height: 1.2; color: var(--color-text); }
.c3-heading::after { content: ""; display: block; width: 80px; height: 8px; margin: 30px auto 0; background: linear-gradient(to right, var(--color-primary) 50%, var(--color-secondary) 50%); }
.c3-lead { font-weight: 500; color: var(--color-black); font-size: 16px; line-height: 1.8; text-align: center; }
.value { padding-top: 123px; padding-bottom: 58px; background: var(--color-c3-pale); }
.value__heading { font-feature-settings: "halt" 1, "liga" 0; height: 77px; margin-inline: -16px; text-align: center; white-space: nowrap; font-size: 40px; line-height: 77px; background: var(--gradient-heading); background-clip: text; -webkit-background-clip: text; color: transparent; }
.value__large { font-size: 64px; letter-spacing: -0.04em; }
.value__benefits { margin-top: 36px; height: 578px; }
.value__cycle { margin-top: 60px; }
.value__reject { height: 110px; text-align: center; font: 700 114px/110px var(--font-roboto); }
.value__reject-svg { display: block; width: 100%; height: 110px; overflow: visible; }
.value__lead { margin-top: 20px; text-align: center; font-size: 20px; line-height: 1.5; background: var(--gradient-heading); background-clip: text; -webkit-background-clip: text; color: transparent; }
.value__diagram { margin-top: 40px; height: 446px; filter: drop-shadow(0 0 10px rgb(0 0 0 / 25%)); }
.value .diagram__canvas, .cases__capacity .diagram__canvas { width: 100%; height: 100%; }
.cases { position: relative; padding-top: 274px; padding-bottom: 100px; }
.cases::before { content: ""; position: absolute; inset: -6px 0 auto; height: 180px; background: var(--color-c3-pale); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.cases__statement { margin-top: 40px; height: 78px; display: grid; place-items: center; border-block: 1px solid var(--color-c3-border); font-size: 32px; color: var(--color-c3-blue); }
.cases__lead { margin-top: 20px; }
.cases__capacity { margin-top: 44px; height: 600px; border-radius: 10px; overflow: hidden; }
.cases__badge { width: 366px; height: 78px; display: grid; place-items: center; margin: 60px auto 0; border-radius: 50px; background: var(--gradient-brand); color: var(--color-white); font-size: 28px; line-height: 1.8; }
.cases__cards { margin-top: 30px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.cases__card { min-width: 0; min-height: 444px; border-radius: 4px; box-shadow: var(--c3-shadow); overflow: hidden; }
.cases__photo { width: 100%; height: 216px; object-fit: cover; }
.cases__label { font-weight: 500; margin-top: 16px; text-align: center; font-size: 16px; line-height: 36px; color: var(--color-c3-blue); }
.cases__title { margin-top: -9px; text-align: center; font-size: 20px; line-height: 36px; }
.cases__description { font-weight: 500; margin: 9px 16px 24px; color: var(--color-black); font-size: 16px; line-height: 1.8; }
.flow { padding-block: 100px 120px; background: var(--color-c3-pale); }
.flow__lead { margin-top: 40px; }
.flow__steps { margin: 30px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(5, 180px); gap: 25px; }
.flow__step { position: relative; display: grid; grid-template-rows: 73px 109px 68px; text-align: center; isolation: isolate; }
.flow__step::before { content: ""; grid-area: 1 / 1 / 4 / 2; z-index: -1; margin-top: 37px; border-radius: 4px; background: var(--color-white); box-shadow: var(--c3-shadow); }
.flow__step:not(:last-child)::after { content: ""; position: absolute; top: 130px; right: -20.5px; width: 16px; height: 30px; background: var(--gradient-brand); clip-path: polygon(0 0,100% 50%,0 100%); }
.flow__number { grid-area: 1 / 1; width: 68px; height: 68px; margin: 3px auto 0; border-radius: 50%; background: var(--color-primary); color: var(--color-white); font: 600 40px/68px var(--font-inter); }
.flow__icon { grid-area: 2 / 1; width: 70px; height: 70px; margin: 25px auto 0; }
.flow__icon .diagram__canvas { width: 100%; height: 100%; }
.flow__title { grid-area: 3 / 1; margin-top: 5px; font-size: 18px; line-height: 1.2; }
.faq { padding-top: 104px; padding-bottom: 120px; }
.faq__list { display: grid; gap: 20px; margin-top: 60px; }
.faq__item { padding: 25px 30px 25px; border-radius: 4px; background: var(--color-c3-faq); box-shadow: var(--c3-shadow); }
.faq__question { margin: 0; font-size: 20px; line-height: 1.35; }
.faq__toggle { display: flex; align-items: center; gap: 12px; width: 100%; padding: 0 0 19px; border: 0; border-bottom: 1px dashed var(--color-c3-border); background: transparent; color: var(--color-black); font-weight: 700; text-align: left; cursor: pointer; }
.faq__q { flex: 0 0 56px; width: 56px; height: 58px; border-radius: 50%; text-align: center; color: var(--color-white); background: var(--color-primary); font: 800 34px/56px var(--font-rounded); }
.faq__minus { margin-left: auto; color: var(--color-text); font-size: 32px; font-weight: 500; }
.faq__answer { display: flex; gap: 12px; margin-top: 20px; }
.faq__a { flex: 0 0 56px; text-align: center; color: var(--color-secondary); font: 800 40px/54px var(--font-rounded); }
.faq__body { font-weight: 500; width: 800px; max-width: calc(100% - 68px); padding-top: 10px; color: var(--color-black); font-size: 18px; line-height: 32px; }
.faq__link { display: block; margin-top: 20px; line-height: 27px; }
.faq__item:nth-child(4) .faq__body { padding-top: 0; }
.certification { display: grid; grid-template-columns: 1fr; margin-top: 80px; min-height: 178px; border: 2px solid var(--color-secondary); border-radius: 8px; padding: 3px; }
.certification__photo { grid-area: 1 / 1; width: 100%; height: 168px; object-fit: cover; border-radius: 4px; }
.certification__text { grid-area: 1 / 1; align-self: center; margin-left: 407px; color: var(--color-white); font-size: 32px; line-height: 1.5; }
.contact { padding-top: 123px; overflow: clip; background: linear-gradient(110deg, rgb(103 188 118 / 20%), rgb(78 155 194 / 20%)); }
.contact__heading { display: grid; height: 123px; grid-template-columns: 780px 180px; }
.contact__title { font-feature-settings: "halt" 1, "liga" 0; align-self: start; display: flex; align-items: baseline; white-space: nowrap; margin-left: -16px; }
.contact__word { font: 900 91.1543px/1 var(--font-mincho); background: var(--gradient-heading); background-clip: text; -webkit-background-clip: text; color: transparent; }
.contact__tagline { font-size: 35.8382px; font-weight: 900; line-height: 1.2; letter-spacing: 0; }
.contact__bubble { z-index: 1; width: 180px; height: 180px; border-radius: 50%; display: grid; place-content: center; background: var(--color-c3-yellow); text-align: center; font-size: 18px; line-height: 1.45; }
.contact__panel { padding: 60px 0 54px; border-radius: 10px; background: var(--color-white); }
.contact__actions { display: flex; justify-content: center; gap: 25px; margin-top: 39px; }
.contact__button { position: relative; width: 400px; min-height: 80px; }
.contact__button::after { content: ""; position: absolute; width: 12px; height: 12px; right: 23px; border-top: 3px solid var(--color-white); border-right: 3px solid var(--color-white); transform: rotate(45deg); }
.footer { position: relative; height: 325px; margin-top: 50px; display: grid; isolation: isolate; }
.footer__city { grid-area: 1 / 1; width: 1112px; max-width: 100%; height: 299px; justify-self: center; margin-top: 13px; transform: translateX(9px); }
.footer__city .diagram__canvas { width: 100%; height: 100%; }
.footer::after { content: ""; position: absolute; z-index: 0; top: 144px; left: 50%; width: 1568px; height: 757px; border-radius: 50%; transform: translateX(-50%); background: var(--color-white); }
.footer__content { grid-area: 1 / 1; z-index: 1; align-self: end; padding-bottom: 30px; text-align: center; }
.footer__logo { width: 500px; height: 24px; margin: 0 auto 28px; }
.footer__copyright { color: var(--color-c3-muted); font-size: 14px; line-height: 20px; font-weight: 500; }
/* C3 END */

/* C4: animations enhance an otherwise visible, static page. */
html { scroll-behavior: smooth; }
.kv__backdrop { opacity: 0; transition: opacity 1s ease; }
.kv__backdrop--active { opacity: 1; }
.kv__backdrop--second { background: url("../img/kv-photo-02.jpg") center / cover no-repeat; }
.kv__backdrop--third { background: url("../img/kv-photo-03.jpg") center / cover no-repeat; }
.kv__caption { opacity: 0; transition: opacity 1s ease; pointer-events: none; }
.kv__caption--active { opacity: 1; }
.kv__circle { position: relative; isolation: isolate; background: url("../img/kv-circle-white.svg") center / 100% 100% no-repeat; }
.kv__circle::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("../img/kv-circle-gradient.svg") center / 100% 100% no-repeat; animation: kv-ring-turn 5s linear infinite; }
@keyframes kv-ring-turn { to { transform: rotate(360deg); } }
/* C9: entrance wrappers keep slide opacity and ring rotation independent. */
.kv__photos { position: absolute; inset: 0; z-index: -1; isolation: isolate; pointer-events: none; animation: kv-photo-enter 1s ease 1s both; }
.kv__captions { grid-area: 1 / 1; display: grid; min-width: 0; pointer-events: none; }
.kv__circle, .kv__captions, .kv__lead { animation: kv-text-enter 1s ease 0.3s both; }
@keyframes kv-photo-enter { from { opacity: 0; } to { opacity: 1; } }
@keyframes kv-text-enter { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.reveal { transition: opacity 1.3s ease-out, translate 1.3s ease-out; }
/* Use the individual translate property so it never overrides an element's own transform (e.g. strengths__tabs translateX). */
.reveal--pending { opacity: 0; translate: 0 30px; }
.faq__answer[hidden] { display: none; }
.faq__toggle[aria-expanded="false"] { padding-bottom: 0; border-bottom-color: transparent; }
.button { transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease; }
.button--contact { --button-color: var(--color-secondary); }
.button--download { --button-color: var(--color-download); }
.button { box-shadow: inset 0 0 0 2px var(--button-color); }
.contact__button::after { border-color: currentColor; transition: border-color 0.3s ease; }
.strengths__tab, .accept__link, .faq__toggle, .faq__link { transition: opacity 0.3s ease; }
@media (any-hover: hover) {
  .button:hover { background-color: #fff; color: var(--button-color); }
  .strengths__tab:hover, .accept__link:hover, .faq__toggle:hover, .faq__link:hover { opacity: 0.7; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .kv__circle::before { animation: none; }
  .kv__backdrop, .kv__caption, .reveal, .button, .strengths__tab, .accept__link, .faq__toggle, .faq__link { transition: none; }
  .kv__photos, .kv__circle, .kv__captions, .kv__lead { animation: none; }
  .contact__button::after { transition: none; }
  .reveal--pending { opacity: 1; translate: none; }
}

/* C5: mixed tracking from saved reference code; the node export omits per-character runs. */
.contact__word { letter-spacing: -0.05em; text-indent: 0; }
.contact__word-tight { letter-spacing: -0.18em; }
.contact__word-period { letter-spacing: -0.7em; }
.contact__comma { letter-spacing: -17.9191px; font-feature-settings: "liga" 0; }
.reason__explanation { letter-spacing: 0; }
.accept__row:nth-child(2) .accept__cell { line-height: 1.5; }
/* Preserve the node section extents without clipping their contents. */
.accept { height: 2332px; }
.utilize { height: 2205px; }
.cases { min-height: 1936px; }

.reason__title { display: grid; grid-template-columns: 499px 425px; width: 924px; margin-inline: auto; transform: translateX(-21px); }
.reason__word { width: 547px; }
.reason__explanation { font-feature-settings: "halt" 1, "liga" 0; text-align: left; white-space: nowrap; }
.reason__word { text-indent: -0.05em; }
.reason__explanation { transform: translateY(-13px); }
.contact__word { flex: 0 0 454px; width: 454px; }
.contact__tagline { margin-left: -36.234375px; }

/* SP1 BEGIN — 375px基準のSP版。PC（768px以上）には下の2行以外は効かない。 */
.sp-only, .sp-bar { display: none; }
picture { display: contents; }
@media (max-width: 767px) {
  /* 共通：375pxで設計。375より広い幅はコンテンツを最大幅で中央寄せ、背景は全幅。 */
  :root { --page-gutter: 15px; --sp-content: min(100% - 30px, 345px); }
  .sp-only { display: revert; }
  .pc-only { display: none !important; }
  body { padding-bottom: 0; }

  /* ヘッダー：ロゴの白い札だけ（問い合わせ・資料DLは下部固定の帯へ） */
  .header { padding-right: 0; }
  .header__brand { width: 164px; height: 60px; padding: 13px; border-bottom-right-radius: 10px; }
  .header__logo { width: 134.768px; height: 34px; }
  .header__actions { display: none; }

  /* KV */
  .kv { height: 460px; }
  .kv__backdrop { background: url("../img/sp-kv-photo-01.jpg") center / cover no-repeat, var(--color-white); }
  .kv__backdrop--second { background-image: url("../img/sp-kv-photo-02.jpg"); }
  .kv__backdrop--third { background-image: url("../img/sp-kv-photo-03.jpg"); }
  .kv__backdrop::after { inset: 230px 0 0; background: linear-gradient(to bottom, rgb(217 217 217 / 0) 2.6%, rgb(37 74 92 / 80%) 100%); }
  .kv__backdrop--second::after { background: linear-gradient(to bottom, rgb(217 217 217 / 0) 2.6%, rgb(37 74 92) 100%); }
  .kv__backdrop--third::after { inset: 0; background: linear-gradient(to bottom, rgb(217 217 217 / 0) 48.7%, rgb(37 74 92 / 80%) 82.8%); }
  .kv__circle { --kv-circle-size: 241px; margin-top: 82px; }
  .kv__caption { justify-self: center; align-self: start; align-items: baseline; gap: 4px; margin: 338px 0 0; }
  .kv__number { font: 700 26px/1 var(--font-mincho); }
  .kv__caption-text { font-size: 22px; line-height: 1; transform: none; }
  .kv__lead { justify-self: center; align-self: start; width: min(100% - 28px, 346px); margin: 373.6px 0 0; font-size: 12px; line-height: 1.8; text-align: center; white-space: normal; }

  /* 理由 */
  .reason { height: auto; padding-top: 30px; }
  .reason__title { --reason-size: min(40px, 10.6667vw); grid-template-columns: calc(var(--reason-size) * 4.5375) calc(var(--reason-size) * 4.25); width: calc(var(--reason-size) * 8.7875); height: var(--reason-size); transform: translateX(calc(var(--reason-size) * -0.1625)); }
  .reason__word { width: calc(var(--reason-size) * 4.975); font-size: var(--reason-size); }
  .reason__explanation { margin-top: calc(var(--reason-size) * 0.4475); font-size: calc(var(--reason-size) * 0.4); line-height: 1.1875; transform: none; }
  .reason__comma { letter-spacing: -0.295em; }
  .reason__intro { margin-top: 18.8px; font-size: 14px; line-height: 1.8; }
  .reason__powers { justify-content: space-between; gap: 0; width: var(--sp-content); margin-top: 7.9px; padding: 9.35px 20px; border-width: 0.5px; border-radius: 2px; }
  .reason__power { gap: 3.57px; font-size: 10px; line-height: 1.5; text-align: left; }
  .reason__power:first-child { line-height: 1; }
  .reason__power-icon { width: 22px; height: 28px; }
  .reason__required { margin-top: 9.3px; font-size: 14px; line-height: 1.8; }

  /* STRENGTHS */
  .strengths { margin-top: 28px; padding-bottom: 39.9px; overflow: clip; }
  .strengths::before { width: 609px; height: 404.4px; top: 23.8px; left: calc(50% - 303.5px); }
  .strengths__eyebrow { height: 46px; }
  .strengths__eyebrow-svg { transform: translate(-6.5px, -11.3px) scale(0.4035); transform-origin: 50% 0; }
  .strengths__lead { margin-top: 10.1px; font-size: 14px; line-height: 1.5; }
  .strengths__tabs { gap: 7.5px; width: var(--sp-content); margin-top: 10px; transform: none; }
  .strengths__tab { display: flex; flex-direction: column; align-items: center; gap: 4px; height: 50px; padding: 14px 0 0; border-radius: 2px; font-size: 12px; line-height: 14px; }
  .strengths__arrow { width: 12px; height: 12px; }

  /* 3つの強み 共通 */
  .capability__panel { width: var(--sp-content); border-radius: 10px; }
  .capability__inner.l-inner { width: var(--sp-content); }
  .capability__panel .capability__inner.l-inner { width: auto; }
  .capability__title { height: 30px; font-size: 24px; line-height: 30px; }
  .capability__subtitle { margin-top: 10px; font-size: 16px; line-height: 1.5; }
  .capability__lead { margin: 16px 10px 0; font-size: 14px; line-height: 1.8; text-align: left; }

  /* 受け入れられる */
  .accept { height: auto; min-height: 0; padding: 0; background: linear-gradient(to bottom, rgb(255 255 255 / 0) 63px, var(--color-white) 144px), linear-gradient(90deg, rgb(103 188 118 / 20%), rgb(78 155 194 / 20%)); }
  .capability__panel--accept { min-height: 0; padding: 40px 0 0; }
  .accept__cards { gap: 10px; margin: 19.2px 10px 0; }
  .accept__card-title { height: 40px; font-size: 12px; line-height: 1.8; }
  .accept__card:nth-child(3) .accept__card-title { line-height: 1.25; }
  .accept__diagram { width: 342px; margin-top: 37.7px; }
  .accept__diagram > .diagram__canvas { display: none; }
  .accept__diagram-sp { display: block; width: 100%; height: auto; }
  .accept__note { min-height: 0; margin: 20px 10px 0; font-size: 12px; font-weight: 400; }
  .accept__table { width: auto; margin: 31.2px 10px 0; font-size: 14px; line-height: 1.5; }
  .accept__row, .accept__row:nth-child(2) { height: 59.2px; }
  .accept__row:nth-child(2) { height: 108.2px; }
  .accept__row:nth-child(3), .accept__row:nth-child(4) { height: 77.2px; }
  .accept__cell { padding: 4.8px 6px; font-weight: 400; }
  .accept__cell--heading { width: 39.4%; padding: 10px 24px 10px 6px; font-weight: 700; }
  .accept__link { width: auto; min-height: 69px; margin: 20px 10px 0; padding: 0 16px 0 18px; grid-template-columns: 1fr 14.3px; text-align: left; }
  .accept__link-arrow { width: 14.3px; height: 8.8px; }

  /* 活かせる */
  .utilize { height: auto; min-height: 0; padding-top: 40px; }
  .utilize__flow { margin-top: 19.1px; }
  .diagram-panel__title { width: 182.9px; height: 39px; margin-right: 0; border-radius: 30px; font-size: 14px; line-height: 1.8; }
  .diagram-panel__body { margin-top: -13.5px; padding-top: 27.3px; border-radius: 3.45px; box-shadow: 0 0 2.875px 2.875px var(--color-diagram-shadow); }
  .utilize__flow .diagram-panel__body { padding-bottom: 20.7px; }
  .utilize__flow-image { width: 317.4px; max-width: calc(100% - 27px); }
  .utilize__cards { grid-template-columns: minmax(0, 1fr); gap: 20px; margin: 39.5px 10px 0; }
  .utilize__card-title { height: 19px; margin-top: 20px; font-size: 18px; line-height: 1; }
  .utilize__card:nth-child(3) .utilize__card-title { font-size: 16px; }
  .utilize__card-description { min-height: 0; margin: 10px 0 -4.15px; font-size: 14px; line-height: 1.8; }
  .utilize__illustration:has(.utilize__illustration-sp) > .diagram__canvas { display: none; }
  .utilize__illustration-sp { display: block; width: 100%; height: 100%; object-fit: cover; }
  .utilize__table-scroll { margin: 40px calc((100% - 100vw) / 2) -1.5px 1px; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
  .utilize__table { width: 1000px; margin-top: 0; }

  /* 任せられる */
  .entrust { position: relative; isolation: isolate; min-height: 0; padding: 40px 0 66.9px; background: linear-gradient(var(--color-white), var(--color-white)) top / 100% calc(100% - 35px) no-repeat, var(--color-diagram-background); }
  .entrust::before { content: ""; position: absolute; z-index: -1; inset: auto 0 0; height: 179px; clip-path: polygon(0 0, 100% 0, 100% 144px, 50% 100%, 0 144px); background: linear-gradient(to bottom, var(--color-white) 43.75%, rgb(255 255 255 / 0) 100%) top / 100% 144px no-repeat, linear-gradient(90deg, rgb(103 188 118 / 20%), rgb(78 155 194 / 20%)), var(--color-white); }
  .capability__panel--entrust { min-height: 0; padding-bottom: 40px; }
  .entrust__map { margin-top: 8.7px; }
  .entrust__map .diagram-panel__body { margin-top: -14px; padding: 23px 0 30px; border-radius: 4px; box-shadow: 0 0 3.1625px 3.1625px var(--color-diagram-shadow); }
  .entrust__map-image { width: 325px; max-width: calc(100% - 20px); margin: 0 4px 0 16px; }
  .entrust__map-image > .diagram__canvas { display: none; }
  .entrust__map-sp { display: block; width: 100%; height: auto; }
  .entrust__factories { display: grid; gap: 8px; margin: 2.5px 20px 0 21px; }
  .entrust__factory { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; height: 62px; padding: 0 12px 0 14px; border: 1px solid #acd9f2; border-radius: 4px; background: linear-gradient(to right, var(--color-diagram-background) 152px, var(--color-white) 152px); }
  .entrust__factory-icon { width: 38px; height: 38.4px; }
  .entrust__factory-name { margin-left: 5px; font-size: 16px; line-height: 19px; }
  .entrust__factory-pref { display: block; margin-bottom: 4px; font-size: 12px; line-height: 14px; }
  .entrust__factory-spec { display: grid; gap: 5px; margin: 0; }
  .entrust__factory-row { display: flex; align-items: center; gap: 10px; height: 18px; padding-left: 7px; border-left: 2px solid var(--color-text); font-size: 12px; line-height: 1; }
  .entrust__factory-row dd { margin: 0; color: var(--color-table-text); }
  .entrust__chart { width: auto; margin: 30px 10px 0; border-radius: 4px; }
  .entrust__chart > .diagram__canvas { display: none; }
  .entrust__chart-sp { display: block; width: 100%; height: auto; }

  /* 企業価値 */
  .c3-inner { width: var(--sp-content); max-width: none; }
  .value { padding: 30px 0 33px; }
  .value__heading { height: 58px; margin-inline: 0; font-size: 16.5px; line-height: 29px; white-space: normal; }
  .value__large { font-size: 24px; letter-spacing: 0; }
  .value__intro { margin: 16px 10px 0; color: var(--color-black); font-size: 14px; font-weight: 500; line-height: 1.8; }
  .value__benefits { display: none; }
  .value__benefits-sp { display: block; margin-top: 19.1px; padding: 30px 20px; background: var(--color-c3-panel); }
  .value__benefits-lead { color: var(--color-black); font-size: 14px; font-weight: 500; line-height: 1.8; }
  .value__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; margin-top: 16px; }
  .value__card { display: flex; flex-direction: column; align-items: center; height: 130px; padding-top: 15px; border: 2px solid #c0dceb; border-radius: 4px; background: #f7fcff; overflow: hidden; }
  .value__card--wide { grid-column: 1 / -1; height: 112px; }
  .value__card-title { font-size: 16px; line-height: 1.35; text-align: center; }
  .value__card:nth-child(3) .value__card-title, .value__card:nth-child(4) .value__card-title { line-height: 1.2; }
  .value__card-icon { flex-shrink: 0; max-width: none; margin-top: 5px; }
  .value__card-icon--2 { margin-top: 3px; transform: translateX(-2.5px); }
  .value__card-icon--3, .value__card-icon--4 { margin-top: 10px; }
  .value__card-icon--5 { margin-top: 0; }
  .value__cycle { margin-top: 29.1px; }
  .value__reject { height: 50.6px; }
  .value__reject-svg { transform: translateY(-1.1px) scale(0.3947); transform-origin: 50% 0; }
  .value__reject-svg .outline-text { stroke-width: 5px; }
  .strengths__eyebrow-svg .outline-text { stroke-width: 4px; }
  .value__lead { margin-top: 0; font-size: 14px; line-height: 1.5; }
  .value__diagram { width: 354px; max-width: calc(100% + 15px); height: auto; margin: 9.4px auto 0; filter: none; }
  .value__diagram > .diagram__canvas { display: none; }
  .value__diagram-sp { display: block; width: 100%; height: auto; }

  /* 導入事例 */
  .cases { min-height: 0; padding: 75.1px 0 50px; }
  .cases::before { inset: 0 0 auto; height: 35.1px; }
  .c3-heading { height: auto; font-size: 20px; line-height: 1.5; }
  .c3-heading::after { width: 39px; height: 4px; margin-top: 8px; }
  .c3-lead { font-size: 14px; line-height: 1.8; text-align: left; }
  .cases__statement { height: 68px; margin-top: 30px; border-color: var(--color-c3-blue); font-size: 16px; line-height: 1.5; text-align: center; }
  .cases__lead { margin-top: 20px; }
  .cases__capacity { height: auto; margin-top: 39.2px; padding: 30px 20px; border-radius: 3.44px; background: var(--color-c3-pale); }
  .cases__capacity > .diagram__canvas { display: none; }
  .cases__capacity-sp { display: block; width: 100%; height: auto; aspect-ratio: 305 / 427.4; }
  .cases__badge { width: 180px; height: 40px; margin-top: 40px; border-radius: 30px; font-size: 14px; }
  .cases__cards { grid-template-columns: minmax(0, 1fr); gap: 22.5px; margin: 20px 20px 0; }
  .cases__card { min-height: 0; padding-bottom: 20px; box-shadow: 0 0 10px rgb(0 0 0 / 25%); }
  .cases__photo { height: 208px; }
  .cases__label { margin-top: 20px; line-height: 19px; }
  .cases__title { margin-top: 4px; line-height: 24px; }
  .cases__description { margin: 10px 15px -1.8px; font-size: 14px; line-height: 1.8; }

  /* 委託の流れ */
  .flow { padding-block: 40px; }
  .flow .c3-inner > * { margin-inline: 20px; }
  .flow__lead { margin-top: 20px; }
  .flow__steps { grid-template-columns: minmax(0, 1fr); gap: 35px; margin-top: 19.2px; }
  .flow__step { display: flex; align-items: center; gap: 10px; height: 100px; padding: 0 34px 0 20px; border-radius: 4px; background: var(--color-white); box-shadow: 0 0 6px rgb(0 0 0 / 20%); text-align: left; }
  .flow__step::before { content: none; }
  .flow__step:not(:last-child)::after { top: calc(100% + 9.5px); right: auto; left: calc(50% - 15px); width: 30px; height: 16px; clip-path: polygon(0 0, 100% 0, 50% 100%); }
  .flow__number { flex: 0 0 54px; width: 54px; height: 54px; margin: 0; font: 600 34px/54px var(--font-inter); text-align: center; }
  .flow__icon { flex: 0 0 60px; width: 60px; height: 60px; margin: 0; }
  .flow__icon .diagram__canvas { display: block; width: 47px; height: 43.3px; margin: 7px 0 0 6px; overflow: visible; }
  .flow__step:nth-child(2) .flow__icon .diagram__canvas { width: 78.5px; height: 94.1px; margin: -17.8px 0 0 -7.6px; }
  .flow__step:nth-child(3) .flow__icon .diagram__canvas { width: 73.9px; height: 88.6px; margin: -14.7px 0 0 -5.7px; }
  .flow__step:nth-child(4) .flow__icon .diagram__canvas { width: 64.5px; height: 76.7px; margin: -13.5px 0 0 -2.1px; }
  .flow__step:nth-child(5) .flow__icon .diagram__canvas { width: 37.5px; height: 50px; margin: 5px 0 0 12px; }
  .flow__title { margin: 0; font-size: 18px; line-height: 1.2; }

  /* よくある質問 */
  .faq { padding: 40px 0 35px; }
  .faq__list { gap: 20px; margin-top: 30px; }
  .faq__item { padding: 25px 20px; box-shadow: 0 0 10px rgb(0 0 0 / 10%); }
  .faq__question { font-size: 16px; line-height: 22px; }
  .faq__toggle[aria-expanded="false"] { border-bottom-width: 0; }
  .faq__toggle { gap: 10px; padding-bottom: 10px; border-bottom-color: var(--color-primary); }
  .faq__toggle > span:nth-child(2) { flex: 0 1 230px; }
  .faq__q { flex: 0 0 36px; width: 36px; height: 36px; font: 800 21.1px/36px var(--font-roboto); }
  .faq__minus { position: relative; flex: 0 0 20px; align-self: flex-start; width: 20px; height: 20px; margin-top: 11px; font-size: 0; }
  .faq__minus::before, .faq__minus::after { content: ""; position: absolute; inset: 8.5px 0 auto; height: 3px; background: var(--color-text); }
  .faq__minus::after { inset: 0 auto 0 8.5px; width: 3px; height: auto; }
  .faq__toggle[aria-expanded="true"] .faq__minus::after { content: none; }
  .faq__answer { gap: 10px; margin-top: 10px; }
  .faq__a { flex: 0 0 36px; font: 800 24.83px/34px var(--font-roboto); }
  .faq__body, .faq__item:nth-child(4) .faq__body { flex: 1 1 auto; width: auto; max-width: none; padding-top: 6px; margin-bottom: -2.4px; font-size: 14px; line-height: 1.8; }
  .faq__link { margin-top: 10px; line-height: 1.8; }
  .certification { min-height: 0; height: 160px; margin-top: 30px; padding: 3px; border: 2px solid transparent; border-radius: 10px; background: linear-gradient(var(--color-white), var(--color-white)) padding-box, var(--gradient-brand) border-box; }
  .certification__photo { height: 150px; border-radius: 6px; }
  .certification__text { align-self: start; margin: 30px 0 0 145px; font-size: 20px; line-height: 1.5; }

  /* お問い合わせ・フッター */
  .contact { padding-top: 42px; }
  .contact__heading { display: block; height: auto; }
  .contact__title { display: block; margin: 0; text-align: center; white-space: normal; }
  .contact__word { display: inline-block; flex: none; width: 256px; margin-left: -26px; font-size: 51.4286px; vertical-align: baseline; }
  .contact__word-period { letter-spacing: -0.7em; }
  .contact__tagline { margin-left: -20.44px; font-size: 20.5714px; line-height: 1.2; vertical-align: baseline; }
  .contact__comma { letter-spacing: -10.11px; }
  .contact__bubble { display: none; }
  .contact__panel { padding: 0; border-radius: 0; background: none; }
  .contact__panel .c3-lead { margin-top: 15.2px; text-align: center; }
  .contact__actions { flex-direction: column; align-items: center; gap: 20px; margin-top: 31px; }
  .contact__button { width: 100%; min-height: 80px; }
  .footer { grid-template-columns: minmax(0, 1fr); height: 256px; margin-top: 23px; }
  .footer__city { justify-self: start; width: 483.4px; max-width: none; height: 130px; margin: 0 calc((100% - 483.4px) / 2); transform: translateX(8.7px); opacity: 0.5; }
  .footer::after { top: 56.9px; width: 681.7px; height: 329.1px; }
  .footer__content { align-self: start; margin-top: 106px; padding-bottom: 0; }
  .footer__logo { width: 312px; height: 15px; margin: 0 auto 10px; }
  .footer__copyright { color: #5b646b; font-size: 12px; line-height: 14px; }

  /* 下部固定の帯 */
  .sp-bar { position: fixed; z-index: 10; inset: auto 0 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 55px; height: 60px; padding: 6px; background: rgb(75 75 75 / 80%); }
  .sp-bar__button { display: flex; align-items: center; justify-content: center; height: 48px; color: var(--color-white); font-size: 12px; line-height: 1.35; text-align: center; }
  .sp-bar__button--contact { padding: 0 8px 0 16px; border-radius: 2px 0 0 4px; background: var(--color-secondary); }
  .sp-bar__button--download { border-radius: 0 2px 4px 0; background: var(--color-download); }
  .sp-bar__top { position: relative; width: 48px; height: 48px; margin-left: 7px; border-radius: 2px; background: #a1a4a9; }
  .sp-bar__top::before { content: ""; position: absolute; top: 21px; left: 18px; width: 12px; height: 12px; border-top: 3px solid var(--color-white); border-left: 3px solid var(--color-white); transform: rotate(45deg); }

  /* 動き：PCと同じ仕組み。カードの拡大待機（scale 1.2）で横にはみ出さないよう、カードを含む区画は横だけ切る。 */
  .accept, .utilize, .cases { overflow-x: clip; }
  .sp-bar__button, .sp-bar__top { transition: opacity 0.3s ease; }
  @media (any-hover: hover) {
    .sp-bar__button:hover, .sp-bar__top:hover { opacity: 0.7; }
  }
  @media (prefers-reduced-motion: reduce) {
    .sp-bar__button, .sp-bar__top { transition: none; }
  }

  /* 375pxより狭い幅（320pxまで）：はみ出す行だけ文字と余白を幅に合わせて縮める。 */
  @media (max-width: 374px) {
    .kv__lead { font-size: 3.6vw; }
    .reason__powers { padding-inline: 3.2vw; }
    .reason__power { font-size: 2.6667vw; }
    .strengths__tab { font-size: 3.5vw; }
    .capability__title { font-size: 6.4vw; }
    .entrust__factory { padding: 0 2.4vw 0 3.2vw; }
    .entrust__factory-name { font-size: 4.2667vw; }
    .entrust__factory-pref, .entrust__factory-row { font-size: 3.2vw; }
    .entrust__factory-row { gap: 2vw; padding-left: 1.6vw; }
    .value__card-title { font-size: 4.2667vw; }
    .value__lead { font-size: 3.7333vw; }
    .contact__panel .c3-lead { font-size: 3.7333vw; }
    .contact__button { font-size: 4vw; }
    .footer__logo { width: calc(100% - 30px); height: auto; }
    .footer__copyright { font-size: 3.2vw; }
  }
}