@charset "UTF-8";.industry-detail-page { --id-navy: #123d84; --id-deep: #071f42; --id-blue: #2f67c8; --id-light: #f4f7fc; --id-line: #d8e1ef; --id-text: #24364a; --id-muted: #617287; --id-shadow: 0 24px 50px rgba(9, 29, 67, 0.08); color: var(--id-text); background: #fff; } .industry-detail-page * { box-sizing: border-box; } .industry-detail-container { width: min(1200px, calc(100% - 40px)); margin: 0 auto; } .industry-break-pc { display: block; }   .industry-detail-hero { position: relative; min-height: 280px; display: flex; align-items: center; overflow: hidden; background: var(--id-deep); } .industry-detail-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; } .industry-detail-hero__content { position: relative; z-index: 2; padding: 28px 0 24px; color: #fff; } .industry-detail-hero__eyebrow { display: inline-block; margin-bottom: 14px; padding: 7px 12px; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 999px; background: rgba(255, 255, 255, 0.08); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; } .industry-detail-hero__title { margin: 0; font-size: clamp(34px, 4.5vw, 52px); line-height: 1.16; font-weight: 800; letter-spacing: 0.02em; } .industry-detail-hero__lead { max-width: 780px; margin: 18px 0 0; font-size: 17px; line-height: 1.85; color: rgba(255, 255, 255, 0.92); } .industry-detail-hero__chips { display: flex; flex-wrap: wrap; gap: 12px; padding: 0; margin: 26px 0 0; list-style: none; } .industry-detail-hero__chips li { min-width: 0; } .industry-detail-hero__chips a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 999px; background: rgba(255, 255, 255, 0.10); color: #fff; text-decoration: none; font-size: 13px; font-weight: 700; line-height: 1.5; transition: 0.25s ease; backdrop-filter: blur(4px); } .industry-detail-hero__chips a:hover { background: rgba(255, 255, 255, 0.18); transform: translateY(-2px); }   .industry-detail-page--parts-manufacturing .industry-detail-hero { background: linear-gradient(135deg, #05152f 0%, #0d4f9e 48%, #4a97ff 100%); } .industry-detail-page--parts-manufacturing .industry-detail-hero::before { background: radial-gradient(circle at 14% 18%, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 24%), radial-gradient(circle at 84% 18%, rgba(74, 151, 255, 0.30) 0%, rgba(255, 255, 255, 0) 24%), radial-gradient(circle at 78% 82%, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 22%); }   .industry-detail-page--trading-company .industry-detail-hero { background: linear-gradient(135deg, #05152f 0%, #0a6074 48%, #28b7cf 100%); } .industry-detail-page--trading-company .industry-detail-hero::before { background: radial-gradient(circle at 14% 18%, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 24%), radial-gradient(circle at 84% 18%, rgba(40, 183, 207, 0.28) 0%, rgba(255, 255, 255, 0) 24%), radial-gradient(circle at 78% 82%, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 22%); }   .industry-detail-page--maker .industry-detail-hero { background: linear-gradient(135deg, #07142d 0%, #3f4eb3 48%, #8b6dff 100%); } .industry-detail-page--maker .industry-detail-hero::before { background: radial-gradient(circle at 14% 18%, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 24%), radial-gradient(circle at 84% 18%, rgba(139, 109, 255, 0.28) 0%, rgba(255, 255, 255, 0) 24%), radial-gradient(circle at 78% 82%, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 22%); }   .industry-detail-page--construction .industry-detail-hero { background: linear-gradient(135deg, #07152b 0%, #44644e 48%, #84aa71 100%); } .industry-detail-page--construction .industry-detail-hero::before { background: radial-gradient(circle at 14% 18%, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 24%), radial-gradient(circle at 84% 18%, rgba(132, 170, 113, 0.26) 0%, rgba(255, 255, 255, 0) 24%), radial-gradient(circle at 78% 82%, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 22%); }   .industry-detail-page--sign-company .industry-detail-hero { background: linear-gradient(135deg, #10162b 0%, #6b4c1f 48%, #c99746 100%); } .industry-detail-page--sign-company .industry-detail-hero::before { background: radial-gradient(circle at 14% 18%, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 24%), radial-gradient(circle at 84% 18%, rgba(201, 151, 70, 0.24) 0%, rgba(255, 255, 255, 0) 24%), radial-gradient(circle at 78% 82%, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 22%); }   .industry-detail-intro { padding: 88px 0 44px; } .industry-detail-section-head { text-align: center; } .industry-detail-section-head__eyebrow { display: inline-block; margin-bottom: 16px; color: var(--id-blue); font-size: 12px; font-weight: 800; letter-spacing: 0.14em; } .industry-detail-section-head__title { margin: 0; font-size: clamp(28px, 4vw, 42px); line-height: 1.45; font-weight: 800; color: var(--id-text); } .industry-detail-section-head__lead { max-width: 820px; margin: 20px auto 0; font-size: 16px; line-height: 2; color: var(--id-muted); } .industry-detail-overview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 42px; } .industry-detail-overview__card { padding: 32px; border: 1px solid var(--id-line); border-radius: 28px; background: #fff; box-shadow: var(--id-shadow); } .industry-detail-overview__card--accent { border-color: transparent; background: linear-gradient(135deg, #123d84 0%, #2b66c7 100%); color: #fff; } .industry-detail-overview__title { margin: 0 0 18px; font-size: 24px; line-height: 1.5; font-weight: 800; } .industry-detail-overview__card--accent .industry-detail-overview__title { color: #fff; } .industry-check-list, .industry-note-list { padding: 0; margin: 0; list-style: none; } .industry-check-list li, .industry-note-list li { position: relative; padding-left: 34px; font-size: 15px; line-height: 1.9; } .industry-check-list li + li, .industry-note-list li + li { margin-top: 14px; } .industry-check-list li::before, .industry-note-list li::before { content: "✓"; position: absolute; left: 0; top: 2px; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: #edf4ff; color: var(--id-blue); font-size: 13px; font-weight: 800; } .industry-detail-overview__card--accent .industry-check-list li { color: rgba(255, 255, 255, 0.94); } .industry-detail-overview__card--accent .industry-check-list li::before { background: rgba(255, 255, 255, 0.96); color: var(--id-navy); }   .industry-point { padding: 70px 0 110px; scroll-margin-top: 0; } .industry-point--alt { background: linear-gradient(180deg, #fafcff 0%, #f4f7fc 100%); } .industry-point__grid { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 34px; align-items: start; } .industry-point__heading { position: sticky; top: 108px; } .industry-point__label { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; background: #edf3ff; color: var(--id-blue); font-size: 13px; font-weight: 800; letter-spacing: 0.08em; } .industry-point__title { margin: 18px 0 0; font-size: clamp(28px, 3vw, 38px); line-height: 1.45; font-weight: 800; color: var(--id-text); } .industry-point__lead { margin: 18px 0 0; font-size: 20px; line-height: 1.9; font-weight: 700; color: var(--id-navy); } .industry-point__tags { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 24px 0 0; list-style: none; } .industry-point__tags li { display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px; border: 1px solid var(--id-line); border-radius: 999px; background: #fff; color: var(--id-text); font-size: 13px; font-weight: 700; } .industry-point__content { position: relative; border: 1px solid var(--id-line); border-radius: 28px; background: #fff; overflow: hidden; box-shadow: var(--id-shadow); } .industry-point__content::before { content: attr(data-point); position: absolute; top: 18px; right: 24px; z-index: 1; font-size: clamp(58px, 7vw, 90px); line-height: 1; font-weight: 800; color: rgba(18, 61, 132, 0.06); pointer-events: none; } .industry-point__visual { position: relative; margin: 0; padding: 34px 36px; border-bottom: 1px solid #e3ebf6; background: radial-gradient(circle at top right, rgba(47, 103, 200, 0.14) 0%, rgba(47, 103, 200, 0) 38%), linear-gradient(180deg, #fbfdff 0%, #f3f7fd 100%); } .industry-point__visualLayout { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 28px; align-items: center; } .industry-point__visualText { min-width: 0; } .industry-point__visualEyebrow { display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border-radius: 999px; background: #eaf2ff; color: var(--id-blue); font-size: 12px; font-weight: 800; letter-spacing: 0.08em; } .industry-point__visualTitle { margin: 14px 0 0; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.55; font-weight: 800; color: var(--id-text); } .industry-point__visualLead { margin: 14px 0 0; font-size: 15px; line-height: 1.9; color: var(--id-muted); } .industry-point__visualIllust { position: relative; display: flex; align-items: center; justify-content: center; min-height: 220px; padding: 0; border: none; background: transparent; overflow: hidden; } .industry-point__visualIllust::before { display: none; } .industry-point__visualIllust img { display: block; width: 100%; height: auto; max-width: 100%; max-height: none; object-fit: contain; } .industry-point__body { position: relative; z-index: 2; padding: 34px 36px 8px; } .industry-point__body p { margin: 0 0 1.15em; font-size: 16px; line-height: 2; color: var(--id-text); } .industry-point__body strong { color: var(--id-navy); } .industry-point__note { margin: 0 36px 36px; padding: 26px 28px; border: 1px solid #d7e2f4; border-radius: 22px; background: linear-gradient(180deg, #f7faff 0%, #eef4fe 100%); } .industry-point__note h3 { margin: 0 0 14px; font-size: 20px; line-height: 1.5; font-weight: 800; color: var(--id-text); }   .industry-detail-cta { padding: 0 0 110px; } .industry-detail-cta__box { padding: 42px; border-radius: 30px; background: linear-gradient(135deg, rgba(18, 61, 132, 0.96) 0%, rgba(43, 102, 199, 0.96) 100%); box-shadow: 0 28px 50px rgba(15, 44, 92, 0.16); color: #fff; } .industry-detail-cta__box .industry-detail-section-head__eyebrow { color: rgba(255, 255, 255, 0.82); } .industry-detail-cta__title { margin: 10px 0 0; font-size: clamp(28px, 4vw, 40px); line-height: 1.45; font-weight: 800; } .industry-detail-cta__lead { max-width: 760px; margin: 18px 0 0; font-size: 16px; line-height: 2; color: rgba(255, 255, 255, 0.92); } .industry-detail-cta__links { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; } .industry-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 22px; border-radius: 999px; text-decoration: none; font-size: 15px; font-weight: 800; line-height: 1; transition: 0.25s ease; } .industry-btn:hover { transform: translateY(-2px); } .industry-btn--primary { background: #fff; color: var(--id-navy); } .industry-btn--secondary { background: rgba(255, 255, 255, 0.12); color: #fff; border: 1px solid rgba(255, 255, 255, 0.24); } .industry-btn--ghost { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, 0.26); }   @media (max-width: 1080px) { .industry-point__grid { grid-template-columns: 1fr; gap: 24px; } .industry-point__heading { position: static; } } @media (max-width: 900px) { .industry-detail-overview { grid-template-columns: 1fr; } .industry-detail-hero { min-height: 400px; } .industry-detail-hero__content { padding: 24px 0 14px; } .industry-detail-hero__title { font-size: clamp(30px, 5.8vw, 42px); } .industry-detail-hero__lead { font-size: 16px; line-height: 1.8; } .industry-detail-hero__chips { margin-top: 22px; } .industry-detail-hero__chips a { min-height: 44px; padding: 0 14px; } .industry-point__visualLayout { grid-template-columns: 1fr; } } @media (max-width: 767px) { .industry-detail-container { width: calc(100% - 32px); } .industry-break-pc { display: none; } .industry-detail-hero { min-height: auto; align-items: flex-start; } .industry-detail-hero__content { padding: 64px 0 44px; } .industry-detail-hero__eyebrow { margin-bottom: 12px; padding: 6px 10px; font-size: 10px; letter-spacing: 0.10em; } .industry-detail-hero__title { font-size: clamp(28px, 8vw, 36px); line-height: 1.22; } .industry-detail-hero__lead { margin-top: 14px; font-size: 15px; line-height: 1.8; } .industry-detail-hero__lead br { display: none; } .industry-detail-hero__chips { gap: 8px; margin-top: 20px; } .industry-detail-hero__chips a { min-height: 44px;   max-width: 100%; padding: 8px 12px; font-size: 12px; line-height: 1.45; } .industry-detail-intro { padding: 68px 0 24px; } .industry-detail-section-head__lead { font-size: 15px; line-height: 1.9; } .industry-detail-overview__card { padding: 24px; border-radius: 22px; } .industry-detail-overview__title { font-size: 21px; } .industry-point { padding: 52px 0 76px; scroll-margin-top: 0; } .industry-point__lead { font-size: 18px; line-height: 1.8; } .industry-point__visual { padding: 24px 22px 18px; } .industry-point__visualLayout { gap: 18px; } .industry-point__visualTitle { font-size: 20px; line-height: 1.55; } .industry-point__visualLead { font-size: 14px; line-height: 1.85; } .industry-point__visualIllust { min-height: 170px; padding: 0; border-radius: 0; } .industry-point__visualIllust::before { display: none; } .industry-point__visualIllust img { display: block; width: 100%; height: auto; max-width: 100%; max-height: none; object-fit: contain; } .industry-point__body { padding: 26px 22px 2px; } .industry-point__body p { font-size: 15px; line-height: 1.95; } .industry-point__note { margin: 0 22px 22px; padding: 22px 18px; border-radius: 18px; } .industry-point__note h3 { font-size: 18px; } .industry-detail-cta { padding-bottom: 76px; } .industry-detail-cta__box { padding: 28px 22px; border-radius: 24px; } .industry-detail-cta__lead { font-size: 15px; line-height: 1.9; } .industry-detail-cta__links { flex-direction: column; align-items: stretch; } .industry-btn { width: 100%; } }   .industry-detail-related { padding: 0 0 96px; } .industry-detail-related__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 42px; } .industry-detail-related-card { --related-accent: var(--id-blue); display: flex; flex-direction: column; min-width: 0; height: 100%; border: 1px solid var(--id-line); border-top: 4px solid var(--related-accent); border-radius: 24px; overflow: hidden; background: #fff; color: inherit; text-decoration: none; box-shadow: var(--id-shadow); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .industry-detail-related-card:hover { transform: translateY(-4px); border-color: rgba(18, 61, 132, 0.18); box-shadow: 0 28px 52px rgba(9, 29, 67, 0.14); } .industry-detail-related-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #dfe8f6; } .industry-detail-related-card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7, 23, 50, 0) 0%, rgba(7, 23, 50, 0.10) 100%); pointer-events: none; } .industry-detail-related-card__media img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform 0.45s ease; } .industry-detail-related-card:hover .industry-detail-related-card__media img { transform: scale(1.04); } .industry-detail-related-card__body { display: flex; flex-direction: column; flex: 1; padding: 20px 20px 18px; } .industry-detail-related-card__eyebrow { display: inline-block; margin-bottom: 10px; color: var(--related-accent); font-size: 11px; font-weight: 800; letter-spacing: 0.12em; line-height: 1.5; } .industry-detail-related-card__title { margin: 0; font-size: 22px; line-height: 1.45; font-weight: 800; color: var(--id-text); } .industry-detail-related-card__lead { margin: 12px 0 0; font-size: 14px; line-height: 1.85; color: var(--id-muted); } .industry-detail-related-card__cta { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 16px; color: var(--related-accent); font-size: 14px; font-weight: 800; line-height: 1.4; } .industry-detail-related-card__cta i { font-size: 12px; }   .industry-detail-related-card--parts { --related-accent: #4a97ff; } .industry-detail-related-card--trading { --related-accent: #28b7cf; } .industry-detail-related-card--maker { --related-accent: #8b6dff; } .industry-detail-related-card--construction { --related-accent: #84aa71; } .industry-detail-related-card--sign { --related-accent: #c99746; }   @media (min-width: 1280px) { .industry-detail-related__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .industry-detail-related-card__title { font-size: 20px; } .industry-detail-related-card__lead { font-size: 13px; line-height: 1.75; } } @media (max-width: 767px) { .industry-detail-related { padding: 0 0 72px; } .industry-detail-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 24px; } .industry-detail-related-card { border-radius: 18px; } .industry-detail-related-card__media { aspect-ratio: 4 / 3; } .industry-detail-related-card__body { padding: 12px 12px 12px; } .industry-detail-related-card__eyebrow { margin-bottom: 6px; font-size: 9px; letter-spacing: 0.08em; line-height: 1.4; } .industry-detail-related-card__title { font-size: 15px; line-height: 1.4; } .industry-detail-related-card__lead { margin-top: 8px; font-size: 12px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .industry-detail-related-card__cta { gap: 6px; padding-top: 10px; font-size: 12px; } .industry-detail-related-card__cta i { font-size: 10px; } }   .industry-detail-case-studies { padding: 0 0 96px; } .industry-detail-case-studies__shell { padding: 40px; border: 1px solid var(--id-line); border-radius: 30px; background: radial-gradient(circle at top right, rgba(47, 103, 200, 0.14) 0%, rgba(47, 103, 200, 0) 36%), linear-gradient(180deg, #fbfdff 0%, #f3f7fd 100%); box-shadow: var(--id-shadow); } .industry-detail-page--parts-manufacturing .industry-detail-case-studies__shell { background: radial-gradient(circle at top right, rgba(74, 151, 255, 0.18) 0%, rgba(74, 151, 255, 0) 36%), linear-gradient(180deg, #fbfdff 0%, #f3f7fd 100%); } .industry-detail-case-studies__body { margin-top: 34px; } .industry-detail-case-studies__body .gallery-page { background: transparent !important; } .industry-detail-case-studies__body .case_studies_list { row-gap: 14px; align-items: flex-start; } .industry-detail-case-studies__body .gallery-case-card { height: auto; border: 1px solid var(--id-line); border-radius: 24px; overflow: hidden; background: #fff; box-shadow: 0 18px 34px rgba(9, 29, 67, 0.08); transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease; } .industry-detail-case-studies__body .gallery-case-card:hover { transform: translateY(-6px); border-color: rgba(18, 61, 132, 0.18); box-shadow: 0 28px 52px rgba(9, 29, 67, 0.14); } .industry-detail-case-studies__body .gallery-case-card__link { display: block; color: var(--id-text); text-decoration: none; } .industry-detail-case-studies__body .gallery-case-card__image-wrap { position: relative; aspect-ratio: 512 / 384; overflow: hidden; background: linear-gradient(180deg, #f4f7fc 0%, #e9eef7 100%); } .industry-detail-case-studies__body .gallery-case-card__image { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.32s ease; } .industry-detail-case-studies__body .gallery-case-card:hover .gallery-case-card__image { transform: scale(1.04); } .industry-detail-case-studies__body .gallery-case-card__body { display: flex; flex-direction: column; gap: 12px; padding: 18px 16px 16px; height: auto; } .industry-detail-case-studies__body .gallery-case-card__title { margin: 0; font-size: 17px; line-height: 1.6; font-weight: 800; color: var(--id-text); } .industry-detail-case-studies__body .gallery-case-card__facts { display: flex; flex-wrap: wrap; gap: 8px; } .industry-detail-case-studies__body .gallery-case-card__fact { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 12px; border-radius: 999px; background: #f7f9fc; border: 1px solid #e0e8f4; color: #42556e; font-size: 12px; font-weight: 700; line-height: 1.4; } .industry-detail-case-studies__body .gallery-case-card__fact-label { color: #7b8da5; font-weight: 800; } .industry-detail-case-studies__body .gallery-case-card__group { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: start; } .industry-detail-case-studies__body .gallery-case-card__group-label { display: inline-flex; align-items: center; justify-content: center; min-height: 28px; border-radius: 999px; background: rgba(18, 61, 132, 0.07); color: #4f678f; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; } .industry-detail-case-studies__body .gallery-case-card__tags, .industry-detail-case-studies__body .gallery-case-card__industry-tags { display: flex; flex-wrap: wrap; gap: 8px; } .industry-detail-case-studies__body .main_process, .industry-detail-case-studies__body .etc_process, .industry-detail-case-studies__body .surface_process { display: inline-flex; align-items: center; min-height: 28px; margin: 0; padding: 7px 10px; border-radius: 999px; box-shadow: none; color: #fff; font-size: 11px; font-weight: 700; line-height: 1.4; white-space: nowrap; } .industry-detail-case-studies__body .main_process { background-color: #0D3388; } .industry-detail-case-studies__body .etc_process { background-color: #948547; } .industry-detail-case-studies__body .surface_process { background-color: #E82C0C; } .industry-detail-case-studies__body .gallery-case-card__industry-tag { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: 999px; background: linear-gradient(180deg, #ffffff 0%, #f1f5fb 100%); border: 1px solid #dce5f2; color: #3b4f68; font-size: 11px; font-weight: 700; line-height: 1.4; white-space: nowrap; } .industry-detail-case-studies__body .gallery-empty-panel { padding: 44px 28px; border: 1px dashed rgba(18, 61, 132, 0.18); border-radius: 24px; background: rgba(255, 255, 255, 0.88); text-align: center; box-shadow: 0 18px 34px rgba(9, 29, 67, 0.05); } .industry-detail-case-studies__body .gallery-empty-panel__title { margin: 0 0 8px; font-size: 22px; font-weight: 800; color: var(--id-text); } .industry-detail-case-studies__body .gallery-empty-panel__text { margin: 0; color: var(--id-muted); line-height: 1.9; } .industry-detail-case-studies__footer { display: flex; justify-content: center; margin-top: 30px; } .industry-detail-case-studies__footer .industry-btn--secondary { background: linear-gradient(135deg, #0a2b61 0%, #123d84 55%, #2f67c8 100%); color: #fff; border: none; box-shadow: 0 18px 34px rgba(18, 61, 132, 0.18); } .industry-detail-case-studies__footer .industry-btn--secondary:hover { transform: translateY(-2px); } @media (max-width: 767px) { .industry-detail-case-studies { padding: 0 0 72px; } .industry-detail-case-studies__shell { padding: 26px 18px; border-radius: 24px; } .industry-detail-case-studies__body { margin-top: 24px; } .industry-detail-case-studies__body .gallery-case-card { border-radius: 20px; } .industry-detail-case-studies__body .gallery-case-card__body { padding: 16px 14px 14px; } .industry-detail-case-studies__body .gallery-case-card__title { font-size: 15px; } .industry-detail-case-studies__body .gallery-case-card__group { grid-template-columns: 1fr; gap: 6px; } .industry-detail-case-studies__body .gallery-case-card__group-label { justify-content: flex-start; padding: 0 10px; } .industry-detail-case-studies__footer { margin-top: 22px; } .industry-detail-case-studies__footer .industry-btn { width: 100%; } }   .industry-detail-case-studies .industry-detail-container { width: min(1360px, calc(100% - 40px)); } .industry-detail-case-studies__shell { padding-left: 34px; padding-right: 34px; } .industry-detail-case-studies__body .case_studies_list { justify-content: center; row-gap: 18px; }   @media (min-width: 992px) { .industry-detail-case-studies__body .case_studies_list > [class*="col-"] { flex: 0 0 33.333333%; max-width: 33.333333%; } }   .industry-detail-case-studies__body .gallery-case-card__group { grid-template-columns: 1fr; gap: 6px; } .industry-detail-case-studies__body .gallery-case-card__group-label { justify-content: flex-start; padding: 0 10px; } .industry-detail-case-studies__body .gallery-case-card__body { gap: 10px; } .industry-detail-case-studies__body .gallery-case-card__tags, .industry-detail-case-studies__body .gallery-case-card__industry-tags { gap: 6px; } .industry-detail-case-studies__body .main_process, .industry-detail-case-studies__body .etc_process, .industry-detail-case-studies__body .surface_process, .industry-detail-case-studies__body .gallery-case-card__industry-tag { font-size: 10px; padding-left: 9px; padding-right: 9px; } @media (max-width: 767px) { .industry-detail-case-studies .industry-detail-container { width: calc(100% - 32px); } .industry-detail-case-studies__shell { padding-left: 18px; padding-right: 18px; } }   @media (max-width: 991.98px) { .industry-detail-case-studies__body .gallery-case-card__fact span:not([class]) { font-size: 13px; } }   .industry-detail-page { --site-radius-xl: 14px; } @media (max-width: 767px) { .industry-detail-page { --site-radius-xl: 12px; } }   .industry-detail-overview__card, .industry-point__content, .industry-point__note, .industry-detail-cta__box, .industry-detail-related-card, .industry-detail-case-studies__shell { border-radius: var(--site-radius-xl); }   .industry-detail-section-head__eyebrow { display: inline-flex; align-items: center; gap: 8px; } .industry-detail-section-head__eyebrow::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: currentColor; opacity: 0.55; }   .ci-item { opacity: 0; transform: translateY(14px); transition: opacity 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1); } .ci-item.ci-item--pop { transform: scale(0.92) translateY(10px); transition: opacity 0.4s ease-out, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); } .ci-in .ci-item, .ci-in.ci-item { opacity: 1; transform: none; }   .industry-detail-hero__chips a:focus-visible, .industry-detail-related-card:focus-visible, .industry-btn:focus-visible { outline: 3px solid #79a9ff; outline-offset: 4px; } @media (min-width: 768px) and (max-width: 900px) { .industry-detail-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .industry-detail-overview__card { padding: 24px; } .industry-point { padding: 48px 0 68px; } .industry-point__visualLayout { grid-template-columns: minmax(0, 1fr) 190px; gap: 22px; } .industry-point__visualIllust { min-height: 180px; } .industry-point__visualIllust img { max-height: 220px; } .industry-detail-related__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 28px; } .industry-detail-related-card__media { aspect-ratio: 16 / 8; } .industry-detail-related-card__body { padding: 12px; } .industry-detail-related-card__eyebrow, .industry-detail-related-card__lead { display: none; } .industry-detail-related-card__title { font-size: 15px; } .industry-detail-related-card__cta { gap: 5px; padding-top: 8px; font-size: 0; } .industry-detail-related-card__cta::before { content: "見る"; font-size: 12px; } } @media (max-width: 767px) { .industry-btn--desktop-estimate { display: none; } .industry-detail-hero__content { padding: 48px 0 36px; } .industry-detail-hero__title { font-size: clamp(28px, 8vw, 34px); } .industry-detail-hero__lead { line-height: 1.7; } .industry-detail-hero__chips { gap: 7px; margin-top: 16px; } .industry-detail-hero__chips a { min-height: 44px; padding: 7px 11px; font-size: 11px; } .industry-detail-intro { padding: 42px 0 12px; } .industry-detail-section-head__eyebrow { margin-bottom: 10px; } .industry-detail-section-head__title { font-size: 25px; line-height: 1.45; } .industry-detail-section-head__lead { margin-top: 13px; font-size: 14px; line-height: 1.75; } .industry-detail-overview { gap: 0; margin-top: 26px; } .industry-detail-overview__card { padding: 19px 18px; } .industry-detail-overview__card:first-child { border-bottom: 0; border-radius: var(--site-radius-xl) var(--site-radius-xl) 0 0; box-shadow: 0 12px 26px rgba(9, 29, 67, 0.05); } .industry-detail-overview__card--accent { border-radius: 0 0 var(--site-radius-xl) var(--site-radius-xl); } .industry-detail-overview__title { margin-bottom: 12px; font-size: 18px; } .industry-check-list li, .industry-note-list li { padding-left: 30px; font-size: 14px; line-height: 1.7; } .industry-check-list li + li, .industry-note-list li + li { margin-top: 8px; } .industry-point { padding: 38px 0 48px; } .industry-point__grid { gap: 18px; } .industry-point__label { min-height: 32px; padding: 0 12px; font-size: 11px; } .industry-point__title { margin-top: 12px; font-size: 24px; line-height: 1.4; } .industry-point__lead { margin-top: 10px; font-size: 16px; line-height: 1.65; } .industry-point__tags { gap: 6px; margin-top: 14px; } .industry-point__tags li { min-height: 32px; padding: 0 10px; font-size: 11px; } .industry-point__content::before { top: 14px; right: 16px; font-size: 54px; } .industry-point__visual { padding: 18px; } .industry-point__visualLayout { grid-template-columns: minmax(0, 1fr) 102px; gap: 12px; } .industry-point__visualEyebrow { min-height: 28px; padding: 0 9px; font-size: 10px; } .industry-point__visualTitle { margin-top: 9px; font-size: 17px; line-height: 1.45; } .industry-point__visualLead { display: none; } .industry-point__visualIllust { min-height: 0; } .industry-point__visualIllust img { max-height: 132px; object-fit: contain; } .industry-point__body { padding: 20px 18px 3px; } .industry-point__body p { margin-bottom: 1em; font-size: 15px; line-height: 1.75; } .industry-point__note { margin: 0 18px 18px; padding: 18px 16px; } .industry-detail-case-studies { padding-bottom: 54px; } .industry-detail-cta { padding-bottom: 48px; } .industry-detail-cta__box { padding: 24px 18px; } .industry-detail-cta__title { font-size: 24px; line-height: 1.45; } .industry-detail-cta__lead { margin-top: 12px; line-height: 1.7; } .industry-detail-cta__links { gap: 8px; margin-top: 20px; } .industry-btn { min-height: 50px; } .industry-detail-related { padding-bottom: 48px; } .industry-detail-related__grid { gap: 10px; margin-top: 20px; } .industry-detail-related-card { border-top-width: 3px; } .industry-detail-related-card__media { aspect-ratio: 16 / 7; } .industry-detail-related-card__body { padding: 10px; } .industry-detail-related-card__eyebrow, .industry-detail-related-card__lead { display: none; } .industry-detail-related-card__title { font-size: 15px; line-height: 1.4; } .industry-detail-related-card__cta { gap: 5px; padding-top: 8px; font-size: 0; } .industry-detail-related-card__cta::before { content: "見る"; font-size: 12px; } .industry-detail-related-card__cta i { font-size: 10px; } } @media (max-width: 350px) { .industry-point__visualLayout { grid-template-columns: minmax(0, 1fr) 88px; } .industry-point__visualTitle { font-size: 16px; } .industry-detail-related-card__title { font-size: 14px; } } @media (prefers-reduced-motion: reduce) { .industry-detail-page .ci-item, .industry-detail-related-card, .industry-detail-related-card__media img, .industry-btn { opacity: 1; transform: none; transition: none; } }