.vision-ci-content { display:grid; gap:80px; }
.vision-ci-content h2 { font-size:32px; line-height:1.5; margin-bottom:24px; }
.vision-ci-content h3 { font-size:20px; line-height:1.6; margin-bottom:12px; }
.vision-ci-content p { line-height:1.9; }
.ci-section-label { font-size:13px; font-weight:600; letter-spacing:.1em; color:var(--brand); margin-bottom:16px; }
.ci-vision { padding:48px; border-radius:20px; background:var(--ink); color:white; }
.ci-vision h2 { font-size:clamp(28px,3vw,44px); }
.ci-vision > p:not(.ci-section-label) { color:#e3e5e4; max-width:60em; margin-top:20px; }
.ci-logo-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin-top:36px; }
.ci-logo { margin:0; border:1px solid var(--line); border-radius:18px; padding:28px; background:#fbfbfb; }
.ci-logo-1 { grid-column:1/-1; }
.ci-logo>div { height:190px; display:flex; justify-content:center; align-items:center; }
.ci-logo-1>div {height:150px;}
.ci-logo img { width:100%; max-height:100%; object-fit:contain; min-width:0; }
.ci-logo-4 img {max-width:360px;}
.ci-logo figcaption { margin-top:20px; color:var(--muted); font-size:14px; }
.ci-download { margin:0; padding:28px; border:1px solid var(--line); border-radius:18px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:24px; }
.ci-download a { display:inline-flex; gap:24px; align-items:center; justify-content:center; padding:16px 28px; min-height:52px; border-radius:999px; background:var(--brand); color:white; font-weight:600; }
.ci-download a::after {display:none;}
.ci-download p {font-size:14px;color:var(--muted);}
.ci-usage {padding-top:28px;border-top:1px solid var(--line);}
.ci-colors ul {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;padding:0;margin:32px 0 0;list-style:none;}
.ci-swatch {height:140px;border:1px solid var(--line);border-radius:14px;margin-bottom:20px;}
.ci-colors dl>div {display:flex;gap:16px;font-size:14px;line-height:1.8;}
.ci-colors dt {width:36px;color:var(--muted);}
.ci-colors dd {margin:0;}
@media(max-width:767px) {
 .vision-ci-content {gap:48px;}
 .vision-ci-content h2 {font-size:26px;}
 .ci-vision {padding:28px 24px;}
 .ci-logo-grid {grid-template-columns:minmax(0,1fr);gap:16px;}
 .ci-logo {padding:24px 20px;}
 .ci-logo>div,.ci-logo-1>div {height:130px;}
 .ci-logo-1 {grid-column:auto;}
 .ci-colors ul {grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 16px;}
 .ci-swatch {height:100px;}
 .ci-colors h3 {font-size:16px;}
 .ci-colors dl>div {font-size:12px;gap:6px;flex-wrap:wrap;}
}

/* ビジョン */
.ci-vision { padding:0; border-radius:0; background:white; color:var(--ink); }
.vision-main { position:relative; isolation:isolate; padding:40px 24px 52px; text-align:center; }
.vision-main::before {content:'';position:absolute;inset:12px 0 40px;background:url('/site-assets/ci-20261012/vision-world-map.svg') center 20px / 100% auto no-repeat;opacity:.5;z-index:-1;pointer-events:none;}
.vision-main h2 {font-size:clamp(36px,4.6vw,64px);line-height:1.15;letter-spacing:-.025em;font-weight:700;margin:20px 0 32px;}
.vision-main h2 span {display:block;}
.vision-main h2 span:first-child {color:var(--brand);}
.vision-main .ci-section-label {font-size:13px;letter-spacing:.18em;}
.vision-statement {max-width:800px;margin:0 auto;}
.vision-statement p {font-size:18px;line-height:1.85;margin:0 0 6px;}
.vision-pillars {display:flex;justify-content:center;list-style:none;margin:44px 0 0;padding:0;}
.vision-pillars li {width:220px;aspect-ratio:1;flex:none;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;background:rgb(251 126 47 / .12);border:1px solid rgb(251 126 47 / .08);}
.vision-pillars li+li {margin-left:-16px;}
.vision-letter {font-family:Arial,sans-serif;font-size:64px;line-height:1;letter-spacing:0;margin-bottom:18px;}
.vision-pillars h3 {font-size:14px;font-weight:600;letter-spacing:.06em;margin:0 0 8px;color:#a94b12;}
.vision-pillars p {font-size:12px;line-height:1.5;margin:0;color:var(--ink);}
.vision-context {border-top:1px solid var(--line);padding:28px 0 0;max-width:980px;margin:0 auto;}
.vision-context p {font-size:16px;color:var(--muted);line-height:1.9;margin:0 0 16px;}
@media(max-width:767px) {
 .vision-main {padding:24px 0 32px;}
 .vision-main::before {inset:60px -12px 150px;background-position:center top;background-size:auto 260px;opacity:.35;}
 .vision-main h2 {font-size:clamp(27px,7.7vw,44px);line-height:1.2;margin-bottom:28px;}
 .vision-statement p {font-size:16px;}
 .vision-pillars {margin-top:32px;gap:12px;flex-direction:column;align-items:stretch;}
 .vision-pillars li {width:auto;aspect-ratio:auto;min-height:104px;display:grid;grid-template-columns:58px minmax(0,1fr);grid-template-rows:auto auto;text-align:left;gap:4px 16px;padding:20px 24px;border-radius:18px;}
 .vision-pillars li+li {margin-left:0;}
 .vision-letter {grid-row:1/3;align-self:center;font-size:48px;margin:0;}
 .vision-pillars h3 {font-size:14px;align-self:end;margin:0;}
 .vision-pillars p {align-self:start;font-size:13px;}
 .vision-context p {font-size:15px;}
}

.ci-signature-section {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:64px;padding:48px 0;border-bottom:1px solid var(--line);align-items:start;}
.ci-signature-copy::before {content:'';display:block;width:48px;height:3px;background:var(--brand);margin-bottom:24px;}
.ci-signature-copy .ci-signature-heading {font-size:20px;font-weight:600;line-height:1.5;margin-bottom:8px;}
.ci-signature-copy h3 {font-size:16px;font-weight:400;margin-bottom:28px;}
.ci-signature-copy>p:not(.ci-signature-heading) {font-size:16px;line-height:1.9;margin:0 0 20px;}
.ci-signature-logo {margin:0;}
.ci-signature-logo figcaption {font-size:14px;color:var(--muted);margin-bottom:20px;}
.ci-signature-logo>div {display:flex;align-items:center;justify-content:center;min-height:150px;padding:24px;}
.ci-signature-logo img {display:block;max-width:100%;height:auto;object-fit:contain;}
.ci-signature-logo-2 img {width:500px;}
.ci-signature-logo-3 img {width:620px;}
.ci-signature-logo-4 img {width:360px;}
.ci-combinations {display:grid;gap:44px;}
.ci-identity>.ci-download {padding:32px 0;border:0;background:transparent;align-items:center;gap:12px;}
@media(max-width:767px) {
 .ci-signature-section {grid-template-columns:minmax(0,1fr);gap:24px;padding:32px 0;}
 .ci-signature-copy h3 {margin-bottom:20px;}
 .ci-signature-logo>div {padding:16px 0;min-height:90px;}
 .ci-combinations {gap:28px;}
}

.ci-color-group {display:grid;grid-template-columns:180px minmax(0,1fr);gap:32px;margin-top:36px;align-items:start;}
.ci-color-group>h3 {font-size:18px;font-weight:500;color:var(--muted);margin:12px 0 0;}
.ci-colors .ci-color-group ul {grid-template-columns:repeat(2,minmax(0,1fr));margin:0;gap:24px;}
.ci-color-group h4 {font-size:18px;font-weight:600;margin:0 0 8px;}
.ci-color-group li p {font-size:14px;color:var(--muted);margin:0;}
.vision-ci-content>.ci-download {padding:40px 0 0;border:0;border-top:1px solid var(--line);border-radius:0;align-items:center;gap:14px;}
.ci-download a.ci-download-button {background:var(--button-brand);border:1px solid var(--button-brand);transition:background .18s,color .18s;}
.ci-download a.ci-download-button:is(:hover,:focus-visible) {background:var(--button-hover);border-color:var(--button-hover);color:white;}
.ci-download-arrow {display:inline-block;font-size:20px;line-height:1;transition:transform 180ms ease;}
.ci-download-button:is(:hover,:focus-visible) .ci-download-arrow {transform:translateY(3px);}
@media(max-width:767px) {
 .ci-color-group {grid-template-columns:minmax(0,1fr);gap:16px;margin-top:28px;}
 .ci-color-group>h3 {margin:0;}
 .ci-colors .ci-color-group ul {gap:16px;}
 .ci-color-group h4 {font-size:15px;}
 .ci-color-group li p {font-size:13px;}
 .ci-download a.ci-download-button {width:100%;gap:14px;padding:14px 18px;}
}
@media(prefers-reduced-motion:reduce) {.ci-download-arrow{transition:none;}.ci-download-button:is(:hover,:focus-visible) .ci-download-arrow{transform:none;}}

/* ロゴとブランドカラー */
.ci-brand-layout {display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:48px;align-items:start;margin-top:36px;}
.ci-logo-column {display:grid;gap:40px;}
.ci-brand-layout .ci-signature-section {display:block;padding:0;border:0;}
.ci-brand-layout .ci-signature-section>h3 {font-size:24px;margin-bottom:24px;}
.ci-brand-layout .ci-signature-logo {border:1px solid var(--line);border-radius:14px;padding:20px 24px;background:#fbfbfb;}
.ci-brand-layout .ci-signature-logo figcaption {margin-bottom:8px;}
.ci-brand-layout .ci-signature-logo-1 figcaption {display:none;}
.ci-brand-layout .ci-signature-logo>div {padding:16px 0;min-height:100px;}
.ci-brand-layout .ci-signature-logo-2>div {min-height:164px;}
.ci-brand-layout .ci-signature-logo-4>div {min-height:164px;}
.ci-brand-layout .ci-signature-logo-4 img {max-width:300px;}
.ci-brand-layout .ci-combinations {gap:20px;}
.ci-brand-layout .ci-colors {padding:28px;background:#faf9f7;border-radius:18px;}
.ci-brand-layout .ci-colors>h3 {font-size:24px;margin-bottom:28px;}
.ci-brand-layout .ci-color-group {display:block;margin-top:28px;}
.ci-brand-layout .ci-color-group>h3 {font-size:16px;margin:0 0 16px;}
.ci-brand-layout .ci-swatch {height:108px;margin-bottom:14px;}
.ci-brand-layout .ci-color-group h4 {font-size:15px;line-height:1.6;}
.ci-brand-layout .ci-color-group li p {font-size:13px;line-height:1.7;}
.ci-brand-layout .ci-color-group ul {gap:16px;}
@media(max-width:900px) {
 .ci-brand-layout {grid-template-columns:minmax(0,1fr);gap:40px;}
 .ci-brand-layout .ci-colors {padding:24px;}
}
@media(max-width:767px) {
 .ci-brand-layout .ci-signature-logo {padding:16px;}
 .ci-brand-layout .ci-signature-section>h3,.ci-brand-layout .ci-colors>h3 {font-size:22px;}
 .ci-brand-layout .ci-signature-logo-2>div,.ci-brand-layout .ci-signature-logo-4>div {min-height:110px;}
 .ci-brand-layout .ci-colors {padding:20px;}
}
.ci-logo-column {grid-template-columns:minmax(0,1fr);min-width:0;}
.ci-brand-layout .ci-signature-section,.ci-brand-layout .ci-signature-logo,.ci-brand-layout .ci-signature-logo>div {min-width:0;}
.ci-brand-layout .ci-signature-logo img {min-width:0;}
.ci-brand-layout .ci-color-group>h3 {font-weight:700;color:var(--ink);}
.ci-brand-layout .ci-swatch {display:flex;align-items:center;justify-content:center;padding:12px;}
.ci-color-code {font-family:Arial,sans-serif;font-size:18px;font-weight:700;line-height:1.4;white-space:nowrap;}
@media(max-width:767px) {.ci-color-code {font-size:14px;}}
/* ロゴの表示幅を統一 */
.ci-brand-layout .ci-signature-logo-1 img,
.ci-brand-layout .ci-signature-logo-2 img,
.ci-brand-layout .ci-signature-logo-3 img {width:500px;max-width:100%;}
.ci-brand-layout .ci-swatch {height:132px;padding:14px;}
.ci-brand-layout .ci-color-codes {margin:0;max-width:100%;font-family:Arial,sans-serif;}
.ci-brand-layout .ci-color-codes>div {display:grid;grid-template-columns:40px minmax(0,1fr);gap:8px;font-size:12px;line-height:1.8;}
.ci-brand-layout .ci-color-codes dt {width:auto;color:inherit;font-weight:600;}
.ci-brand-layout .ci-color-codes dd {color:inherit;white-space:nowrap;margin:0;}
@media(max-width:767px) {
 .ci-brand-layout .ci-color-group ul {grid-template-columns:minmax(0,1fr);}
 .ci-brand-layout .ci-color-codes>div {font-size:14px;grid-template-columns:46px minmax(0,1fr);gap:14px;}
}

/* カラー一覧 */
@media(min-width:901px) {
 .ci-brand-layout {grid-template-columns:minmax(0,1fr) 320px;}
}
@media(min-width:768px) {
 .ci-brand-layout .ci-colors {width:100%;max-width:320px;padding:24px;}
 .ci-brand-layout .ci-color-group ul {grid-template-columns:minmax(0,1fr);gap:22px;}
}
@media(max-width:767px) {
 .ci-brand-layout .ci-colors {padding:16px;}
 .ci-brand-layout .ci-colors>h3 {font-size:20px;margin-bottom:20px;}
 .ci-brand-layout .ci-color-group {margin-top:22px;}
 .ci-brand-layout .ci-color-group>h3 {font-size:15px;margin-bottom:12px;}
 .ci-brand-layout .ci-color-group ul {grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
 .ci-brand-layout .ci-swatch {height:104px;padding:8px;border-radius:10px;margin-bottom:10px;}
 .ci-brand-layout .ci-color-codes>div {grid-template-columns:30px minmax(0,1fr);gap:4px;font-size:10px;line-height:1.8;}
 .ci-brand-layout .ci-color-group h4 {font-size:13px;line-height:1.5;margin-bottom:6px;}
 .ci-brand-layout .ci-color-group li p {font-size:11px;line-height:1.6;}
}

/* 左右の高さを揃える */
@media(min-width:901px) {
 .ci-brand-layout {align-items:stretch;}
 .ci-logo-column {grid-template-rows:auto minmax(0,1fr);}
 .ci-brand-layout #combined-signatures {display:flex;flex-direction:column;}
 .ci-brand-layout #combined-signatures>.ci-combinations {display:flex;flex-direction:column;justify-content:space-between;flex:1;gap:20px;}
 .ci-brand-layout #combined-signatures .ci-signature-logo {flex:none;}
}
@media(min-width:901px) {
 .ci-brand-layout #combined-signatures {align-items:stretch;}
 .ci-brand-layout #combined-signatures>.ci-combinations {width:100%;}
}
.ci-brand-layout .ci-color-group h4 {font-size:14px;font-weight:700;line-height:1.5;margin-bottom:6px;}
@media(max-width:767px) {.ci-brand-layout .ci-color-group h4 {font-size:12px;}}

/* CIの説明文 */
.ci-description {margin:0 0 40px;color:var(--muted);}
.ci-description p {font-size:16px;line-height:1.9;margin:0 0 14px;}
.ci-description p:last-child {margin-bottom:0;}
@media(max-width:767px) {.ci-description {margin-bottom:28px;}}
