@charset "UTF-8";
/*
 * 基板実装（works01）専用スタイル
 *
 * サイズは calc(デザイン値 * var(--u)) で指定する。--u は「デザイン上の 1px」が実際にいくつになるか。
 *
 * PC（768px以上）: サイト全体が header.php の .scale_wrapper で 80% 縮小表示されているため、
 *                  --u: 0.0125rem（= 1.25px ÷ 100、1.25 = 1 ÷ 0.8）として縮小後にデザイン通りの見た目にする。
 *                  1024px以上は 1rem = 100px なので 1.25px 固定、768〜1023px は 1rem = 9.76vw で
 *                  他ページと同じく画面幅に連動して縮む。
 * SP（767px以下）: 縮小はかからず、他ページと同じく rem で画面幅に連動させる。
 *                  このサイトの SP は 1rem = 26.67vw（375px幅で100px）なので --u: 0.01rem。
 *                  SP専用の上書き値も rem（SPデザイン 375px 幅の値 ÷ 100）で指定する。
 */

/*----------------------------*/
/* 基本 */
/*----------------------------*/
.w01 {
    --u: 0.01rem;
    --red: #e90c16;
    --red-dark: #8c0008;
    --ink: #231815;
    --gray: #555;
    --bg-gray: #f3f3f3;
    --bg-pink: #fff0f0;
    --line: #ddd;
    font-weight: 400;
    color: var(--ink);
}
@media screen and (min-width: 768px) {
    .w01 { --u: 0.0125rem; }
}
.w01 ul, .w01 ol { list-style: none; }
.w01 a { color: inherit; text-decoration: none; }
.w01 em { font-style: normal; color: var(--red); }
.w01 img { display: block; }
.w01 .w01-sp { display: none; }

/* 既存フッター（CTA・メニュー）はこのページでは非表示。コピーライトのみ残す */
#footer .footer-cta,
#footer .footer-menu { display: none; }

.w01-inner { width: calc(1236 * var(--u)); max-width: calc(100% - 64px); margin: 0 auto; }
.w01-sec { padding: calc(110 * var(--u)) 0; background: #fff; }
.w01-sec--gray { background: var(--bg-gray); }
.w01-center { display: flex; justify-content: center; }
.w01-arrow { font-weight: 700; }

/*----------------------------*/
/* 見出し */
/*----------------------------*/
.w01-heading { display: flex; flex-direction: column; align-items: center; margin-bottom: calc(56 * var(--u)); text-align: center; }
.w01-heading__en { margin-bottom: calc(14 * var(--u)); font-style: italic; font-weight: 700; font-size: calc(20 * var(--u)); line-height: 1.2; letter-spacing: calc(2 * var(--u)); color: var(--red); }
.w01-heading__badge { margin-bottom: calc(14 * var(--u)); padding: calc(6 * var(--u)) calc(18 * var(--u)); border-radius: calc(40 * var(--u)); background: var(--red); font-weight: 700; font-size: calc(16 * var(--u)); line-height: 1.5; color: #fff; }
.w01-heading__title { font-weight: 700; font-size: calc(40 * var(--u)); line-height: 1.5; }
.w01-heading__title::after { content: ""; display: block; width: calc(60 * var(--u)); height: calc(4 * var(--u)); margin: calc(14 * var(--u)) auto 0; background: var(--red); }
.w01-heading__title--sm { font-size: calc(30 * var(--u)); }
.w01-heading__lead { margin-top: calc(36 * var(--u)); font-size: calc(18 * var(--u)); line-height: 1.8; color: var(--gray); }

/*----------------------------*/
/* ボタン */
/*----------------------------*/
.w01-btn { display: inline-flex; justify-content: center; align-items: center; gap: calc(14 * var(--u)); padding: calc(18 * var(--u)) calc(30 * var(--u)); border-radius: calc(8 * var(--u)); background: var(--red); box-shadow: 0 calc(5 * var(--u)) 0 var(--red-dark); font-weight: 700; font-size: calc(18 * var(--u)); line-height: 1.4; color: #fff !important; transition: transform .2s, box-shadow .2s; }
.w01-btn:hover { transform: translateY(calc(3 * var(--u))); box-shadow: 0 calc(2 * var(--u)) 0 var(--red-dark); }
.w01-btn--white { padding: calc(24 * var(--u)) calc(52 * var(--u)); background: #fff; font-size: calc(20 * var(--u)); color: var(--red) !important; }
.w01-btn--lg { padding: calc(26 * var(--u)) calc(64 * var(--u)); font-size: calc(24 * var(--u)); }
.w01-btn--outline { gap: calc(12 * var(--u)); padding: calc(16 * var(--u)) calc(40 * var(--u)); border: calc(2 * var(--u)) solid var(--red); border-radius: calc(40 * var(--u)); background: #fff; box-shadow: none; font-size: calc(17 * var(--u)); color: var(--red) !important; }
.w01-btn--outline:hover { transform: none; box-shadow: none; background: var(--bg-pink); }

/*----------------------------*/
/* 重要帯 */
/*----------------------------*/
.w01-notice { background: #1a1a1a; }
.w01-notice__inner { display: flex; justify-content: center; align-items: center; gap: calc(20 * var(--u)); padding: calc(16 * var(--u)) 0; }
.w01-notice__label { flex-shrink: 0; padding: calc(3 * var(--u)) calc(12 * var(--u)); border-radius: calc(3 * var(--u)); background: var(--red); font-weight: 700; font-size: calc(15 * var(--u)); line-height: 1.5; color: #fff; }
.w01-notice__text { font-weight: 700; font-size: calc(19 * var(--u)); line-height: 1.5; color: #fff; }
.w01-notice__link { display: inline-flex; align-items: center; gap: calc(8 * var(--u)); font-weight: 500; font-size: calc(18 * var(--u)); line-height: 1.5; color: #f99 !important; text-decoration: underline !important; }
.w01-notice__link .w01-arrow { display: inline-block; text-decoration: none; }
.w01-notice__link:hover { opacity: .8; }

/*----------------------------*/
/* FV */
/*----------------------------*/
.w01-fv { padding: calc(80 * var(--u)) 0 calc(110 * var(--u)); background: #fff; }
.w01-fv__row { display: flex; align-items: center; gap: calc(60 * var(--u)); }
.w01-fv__text { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: calc(28 * var(--u)); min-width: 0; }
.w01-fv__tag { padding: calc(6 * var(--u)) calc(16 * var(--u)); border-radius: calc(4 * var(--u)); background: var(--bg-pink); font-weight: 700; font-size: calc(15 * var(--u)); line-height: 1.5; color: var(--red); }
.w01-fv__title em { display: inline-block; }
.w01-fv__title { font-weight: 900; font-size: calc(50 * var(--u)); line-height: 1.45; }
.w01-fv__lead { font-size: calc(16 * var(--u)); line-height: 1.9; }
.w01-fv__chips { display: flex; flex-wrap: wrap; gap: calc(10 * var(--u)); max-width: calc(650 * var(--u)); }
.w01-fv__chips li { display: flex; align-items: center; gap: calc(6 * var(--u)); padding: calc(8 * var(--u)) calc(16 * var(--u)) calc(8 * var(--u)) calc(12 * var(--u)); border: calc(1.5 * var(--u)) solid var(--red); border-radius: calc(40 * var(--u)); background: #fff; font-weight: 700; font-size: calc(15 * var(--u)); line-height: 1.4; color: var(--red); }
.w01-fv__chips li::before { content: ""; flex-shrink: 0; width: calc(18 * var(--u)); height: calc(18 * var(--u)); background: url("../images/works01/icon-check-chip.svg") no-repeat center / contain; }
.w01-fv__cta { display: flex; flex-direction: column; align-items: flex-start; gap: calc(14 * var(--u)); }
.w01-btn--fv { flex-direction: column; gap: calc(4 * var(--u)); padding: calc(20 * var(--u)) calc(56 * var(--u)); }
.w01-btn__main { display: flex; align-items: center; gap: calc(14 * var(--u)); font-size: calc(22 * var(--u)); }
.w01-btn__sub { font-weight: 500; font-size: calc(14 * var(--u)); line-height: 1.5; }
.w01-fv__tel { display: flex; align-items: center; gap: calc(10 * var(--u)); }
.w01-fv__tel-label { font-weight: 700; font-size: calc(15 * var(--u)); line-height: 1.4; }
.w01-fv__tel-num { font-weight: 700; font-size: calc(30 * var(--u)); line-height: 1.2; }
.w01-fv__tel-hour { font-size: calc(14 * var(--u)); line-height: 1.4; color: var(--gray); }
.w01-fv__image { flex-shrink: 0; width: min(calc(496 * var(--u)), 42%); }
.w01-fv__image img { width: 100%; height: auto; aspect-ratio: 496 / 440; object-fit: cover; border-radius: calc(12 * var(--u)); }

/*----------------------------*/
/* こんなご依頼に対応しています */
/*----------------------------*/
.w01-request__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(24 * var(--u)); }
.w01-request__card { padding: calc(34 * var(--u)) calc(32 * var(--u)); border-radius: calc(10 * var(--u)); background: #fff; }
.w01-request__title { display: flex; align-items: center; gap: calc(14 * var(--u)); margin-bottom: calc(16 * var(--u)); padding-bottom: calc(16 * var(--u)); border-bottom: 1px solid var(--line); font-weight: 700; font-size: calc(19 * var(--u)); line-height: 1.5; }
.w01-request__title::before { content: ""; flex-shrink: 0; width: calc(44 * var(--u)); height: calc(44 * var(--u)); border-radius: 50%; background: var(--bg-pink) url("../images/works01/icon-check-card.svg") no-repeat center / calc(22 * var(--u)); }
.w01-request__text { font-size: calc(15 * var(--u)); line-height: 1.85; color: var(--gray); }
.w01-request__card.is-accent { background: var(--red); }
.w01-request__card.is-accent .w01-request__title { border-bottom-color: #f36a71; color: #fff; }
.w01-request__card.is-accent .w01-request__title::before { background-color: #fff; }
.w01-request__card.is-accent .w01-request__text { color: #fff; }

/*----------------------------*/
/* 2026年 基板業界の状況 */
/*----------------------------*/
.w01-situation .w01-heading { margin-bottom: calc(48 * var(--u)); }
.w01-situation__pains { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(24 * var(--u)); }
.w01-situation__pains li { display: flex; align-items: center; gap: calc(18 * var(--u)); padding: calc(30 * var(--u)) calc(28 * var(--u)); border-radius: calc(10 * var(--u)); background: var(--bg-gray); font-weight: 700; font-size: calc(20 * var(--u)); line-height: 1.6; }
.w01-situation__pains li::before { content: "!"; display: flex; flex-shrink: 0; justify-content: center; align-items: center; width: calc(48 * var(--u)); height: calc(48 * var(--u)); border-radius: 50%; background: var(--ink); font-size: calc(26 * var(--u)); line-height: 1; color: #fff; }
.w01-situation__arrow { display: flex; justify-content: center; margin: calc(48 * var(--u)) 0; }
.w01-situation__arrow img { width: calc(60 * var(--u)); height: calc(30 * var(--u)); }
.w01-situation__solution { display: flex; align-items: center; gap: calc(44 * var(--u)); padding: calc(48 * var(--u)) calc(52 * var(--u)); border: calc(3 * var(--u)) solid var(--red); border-radius: calc(12 * var(--u)); background: #fff; }
.w01-situation__body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: calc(20 * var(--u)); min-width: 0; }
.w01-situation__label { padding: calc(5 * var(--u)) calc(16 * var(--u)); border-radius: calc(4 * var(--u)); background: var(--red); font-weight: 700; font-size: calc(15 * var(--u)); line-height: 1.5; color: #fff; }
.w01-situation__title { font-weight: 700; font-size: calc(30 * var(--u)); line-height: 1.55; }
.w01-situation__text { font-size: calc(16 * var(--u)); line-height: 1.9; }
.w01-situation__note { padding: calc(14 * var(--u)) calc(18 * var(--u)); border-radius: calc(6 * var(--u)); background: var(--bg-gray); font-size: calc(15 * var(--u)); line-height: 1.6; color: var(--gray); }
.w01-situation__cta { display: flex; flex-shrink: 0; flex-direction: column; align-items: center; gap: calc(18 * var(--u)); width: calc(440 * var(--u)); padding: calc(36 * var(--u)) calc(32 * var(--u)); border-radius: calc(10 * var(--u)); background: var(--bg-pink); text-align: center; }
.w01-situation__cta-title { font-weight: 700; font-size: calc(19 * var(--u)); line-height: 1.6; }
.w01-situation__cta-note { font-size: calc(13 * var(--u)); line-height: 1.7; color: var(--gray); }

/*----------------------------*/
/* HSETが選ばれる理由 */
/*----------------------------*/
.w01-reason__diagram { display: flex; justify-content: center; align-items: center; gap: calc(28 * var(--u)); padding: calc(56 * var(--u)) calc(64 * var(--u)); border-radius: calc(12 * var(--u)); background: #fff; }
.w01-reason__customer { display: flex; flex: 0 1 calc(200 * var(--u)); justify-content: center; align-items: center; min-width: 0; height: calc(130 * var(--u)); border: calc(2 * var(--u)) solid var(--ink); border-radius: calc(10 * var(--u)); font-weight: 700; font-size: calc(24 * var(--u)); line-height: 1.4; }
.w01-reason__exchange { flex-shrink: 0; width: calc(64 * var(--u)); height: calc(28 * var(--u)); }
.w01-reason__hset { display: flex; flex: 0 1 calc(300 * var(--u)); flex-direction: column; justify-content: center; align-items: center; gap: calc(8 * var(--u)); min-width: 0; height: calc(180 * var(--u)); border-radius: calc(10 * var(--u)); background: var(--red); font-weight: 700; color: #fff; }
.w01-reason__hset-name { font-size: calc(44 * var(--u)); line-height: 1.2; }
.w01-reason__hset-role { font-size: calc(16 * var(--u)); line-height: 1.5; }
.w01-reason__factories { display: flex; flex: 0 1 calc(360 * var(--u)); flex-direction: column; gap: calc(14 * var(--u)); min-width: 0; }
.w01-reason__factories li { display: flex; align-items: center; gap: calc(12 * var(--u)); width: 100%; padding: calc(16 * var(--u)) calc(24 * var(--u)); border: calc(2 * var(--u)) solid var(--line); border-radius: calc(8 * var(--u)); background: var(--bg-gray); font-weight: 700; font-size: calc(17 * var(--u)); line-height: 1.5; }
.w01-reason__factories li::before { content: ""; flex-shrink: 0; width: calc(10 * var(--u)); height: calc(10 * var(--u)); border-radius: 50%; background: var(--red); }
.w01-reason__points { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(24 * var(--u)); margin-top: calc(56 * var(--u)); }
.w01-reason__points li { display: flex; flex-direction: column; gap: calc(14 * var(--u)); padding: calc(36 * var(--u)) calc(32 * var(--u)); border-radius: calc(10 * var(--u)); background: #fff; }
.w01-reason__num { font-style: italic; font-weight: 700; font-size: calc(52 * var(--u)); line-height: 1; color: var(--red); }
.w01-reason__title { font-weight: 700; font-size: calc(22 * var(--u)); line-height: 1.5; }
.w01-reason__text { font-size: calc(15 * var(--u)); line-height: 1.85; color: var(--gray); }

/*----------------------------*/
/* 基板実装の対応工程 */
/*----------------------------*/
.w01-process__steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(24 * var(--u)); }
.w01-process__step { overflow: hidden; border: 1px solid var(--line); border-radius: calc(10 * var(--u)); background: #fff; }
.w01-process__image img { width: 100%; height: auto; aspect-ratio: 291 / 190; object-fit: cover; }
.w01-process__body { display: flex; flex-direction: column; align-items: flex-start; gap: calc(12 * var(--u)); padding: calc(24 * var(--u)) calc(24 * var(--u)) calc(30 * var(--u)); }
.w01-process__num { display: inline-flex; align-items: flex-end; gap: calc(6 * var(--u)); padding: calc(4 * var(--u)) calc(12 * var(--u)); background: var(--red); font-style: italic; font-weight: 700; font-size: calc(22 * var(--u)); line-height: 1.1; color: #fff; }
.w01-process__num span { font-size: calc(14 * var(--u)); line-height: 1.3; }
.w01-process__title { font-weight: 700; font-size: calc(22 * var(--u)); line-height: 1.5; color: var(--red); }
.w01-process__text { font-size: calc(15 * var(--u)); line-height: 1.85; }
.w01-process__partial { display: flex; justify-content: space-between; align-items: center; gap: calc(32 * var(--u)); margin-top: calc(56 * var(--u)); padding: calc(40 * var(--u)) calc(52 * var(--u)); border-radius: calc(12 * var(--u)); background: var(--bg-pink); }
.w01-process__partial-title { font-weight: 700; font-size: calc(26 * var(--u)); line-height: 1.5; color: var(--red); }
.w01-process__partial-text { max-width: calc(640 * var(--u)); margin-top: calc(10 * var(--u)); font-size: calc(16 * var(--u)); line-height: 1.8; }
.w01-process__partial .w01-btn { flex-shrink: 0; padding: calc(20 * var(--u)) calc(34 * var(--u)); }

/*----------------------------*/
/* 中間CTA */
/*----------------------------*/
.w01-midcta { padding: calc(64 * var(--u)) 0; background: var(--red); }
.w01-midcta__inner { display: flex; justify-content: space-between; align-items: center; gap: calc(32 * var(--u)); }
.w01-midcta__title { font-weight: 700; font-size: calc(32 * var(--u)); line-height: 1.5; color: #fff; }
.w01-midcta__text { margin-top: calc(10 * var(--u)); font-size: calc(17 * var(--u)); line-height: 1.8; color: #fff; }
.w01-midcta .w01-btn { flex-shrink: 0; }

/*----------------------------*/
/* 対応仕様・納期の目安 */
/*----------------------------*/
.w01-spec__table { display: grid; gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: calc(10 * var(--u)); background: var(--line); }
.w01-spec__row { display: flex; background: #fff; }
.w01-spec__row dt { display: flex; flex-shrink: 0; align-items: center; width: calc(260 * var(--u)); padding: calc(26 * var(--u)) calc(32 * var(--u)); background: var(--bg-pink); font-weight: 700; font-size: calc(17 * var(--u)); line-height: 1.6; color: var(--red); }
.w01-spec__row dd { flex: 1; padding: calc(26 * var(--u)) calc(36 * var(--u)); font-size: calc(16 * var(--u)); line-height: 1.8; }

/*----------------------------*/
/* 基板実装の対応事例 */
/*----------------------------*/
.w01-case__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(24 * var(--u)); margin-bottom: calc(56 * var(--u)); }
.w01-case__card { height: 100%; overflow: hidden; border: 1px solid var(--line); border-radius: calc(10 * var(--u)); background: #fff; }
.w01-case__image.is-logo { border-bottom: 1px solid var(--line); }
.w01-case__image img { width: 100%; height: auto; aspect-ratio: 396 / 240; object-fit: cover; }
.w01-case__body { display: flex; flex-direction: column; gap: calc(16 * var(--u)); padding: calc(28 * var(--u)) calc(30 * var(--u)) calc(32 * var(--u)); }
.w01-case__meta { display: flex; align-items: center; gap: calc(10 * var(--u)); }
.w01-case__industry { font-size: calc(14 * var(--u)); line-height: 1.5; color: var(--gray); }
.w01-case__tag { flex-shrink: 0; white-space: nowrap; padding: calc(3 * var(--u)) calc(12 * var(--u)); border-radius: calc(40 * var(--u)); background: var(--red); font-weight: 700; font-size: calc(13 * var(--u)); line-height: 1.5; color: #fff; }
.w01-case__title { font-weight: 700; font-size: calc(20 * var(--u)); line-height: 1.6; }
.w01-case__detail { display: flex; flex-direction: column; gap: calc(10 * var(--u)); padding: calc(18 * var(--u)); border-radius: calc(8 * var(--u)); background: var(--bg-gray); }
.w01-case__detail div { display: flex; align-items: flex-start; gap: calc(12 * var(--u)); }
.w01-case__detail dt { flex-shrink: 0; width: calc(84 * var(--u)); padding: calc(2 * var(--u)) calc(8 * var(--u)); border: 1px solid var(--red); border-radius: calc(4 * var(--u)); background: #fff; font-weight: 700; font-size: calc(12 * var(--u)); line-height: 1.6; text-align: center; color: var(--red); }
.w01-case__detail dd { font-size: calc(14 * var(--u)); line-height: 1.7; }

/*----------------------------*/
/* ご依頼の流れ */
/*----------------------------*/
.w01-flow__steps { display: flex; justify-content: center; gap: calc(32 * var(--u)); }
.w01-flow__steps li { position: relative; display: flex; flex: 0 1 calc(215 * var(--u)); flex-direction: column; align-items: center; gap: calc(12 * var(--u)); min-height: calc(256 * var(--u)); padding: calc(32 * var(--u)) calc(20 * var(--u)) calc(34 * var(--u)); border-radius: calc(10 * var(--u)); background: #fff; text-align: center; }
.w01-flow__steps li:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: calc(-24 * var(--u)); width: calc(16 * var(--u)); height: calc(24 * var(--u)); background: url("../images/works01/arrow-flow.svg") no-repeat center / contain; transform: translateY(-50%); }
.w01-flow__num { font-style: italic; font-weight: 700; font-size: calc(44 * var(--u)); line-height: 1; color: var(--red); }
.w01-flow__title { display: flex; justify-content: center; align-items: center; min-height: calc(58 * var(--u)); font-weight: 700; font-size: calc(18 * var(--u)); line-height: 1.6; }
.w01-flow__text { font-size: calc(14 * var(--u)); line-height: 1.8; color: var(--gray); }
.w01-flow__text::before { content: ""; display: block; width: calc(30 * var(--u)); height: calc(2 * var(--u)); margin: 0 auto calc(12 * var(--u)); background: var(--red); }

/*----------------------------*/
/* よくあるご質問 */
/*----------------------------*/
.w01-faq__list { display: flex; flex-direction: column; gap: calc(16 * var(--u)); }
.w01-faq__item { overflow: hidden; border: 1px solid var(--line); border-radius: calc(10 * var(--u)); background: #fff; }
.w01-faq__item summary { display: flex; align-items: center; gap: calc(18 * var(--u)); padding: calc(22 * var(--u)) calc(32 * var(--u)); background: var(--bg-gray); font-weight: 700; font-size: calc(18 * var(--u)); line-height: 1.6; list-style: none; cursor: pointer; }
.w01-faq__item summary::-webkit-details-marker { display: none; }
.w01-faq__item summary::before,
.w01-faq__item p::before { display: flex; flex-shrink: 0; justify-content: center; align-items: center; width: calc(40 * var(--u)); height: calc(40 * var(--u)); border-radius: 50%; font-weight: 700; font-size: calc(20 * var(--u)); line-height: 1; }
.w01-faq__item summary::before { content: "Q"; background: var(--red); color: #fff; }
.w01-faq__item summary::after { content: "+"; margin-left: auto; font-size: calc(24 * var(--u)); line-height: 1; color: var(--red); }
.w01-faq__item[open] summary::after { content: "−"; }
.w01-faq__item p { display: flex; align-items: flex-start; gap: calc(18 * var(--u)); padding: calc(22 * var(--u)) calc(32 * var(--u)) calc(24 * var(--u)); font-size: calc(16 * var(--u)); line-height: 1.9; }
.w01-faq__item p::before { content: "A"; background: var(--bg-pink); color: var(--red); }

/*----------------------------*/
/* 基板実装について詳しく知る（ブログ直近3件） */
/*----------------------------*/
.w01-column__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(24 * var(--u)); }
.w01-column__card { display: block; height: 100%; overflow: hidden; border-radius: calc(10 * var(--u)); background: #fff; transition: opacity .2s; }
.w01-column__card:hover { opacity: .85; }
.w01-column__image { aspect-ratio: 396 / 220; background: #d9d9d9; }
.w01-column__image img { width: 100%; height: 100%; object-fit: cover; }
.w01-column__body { display: flex; flex-direction: column; align-items: flex-start; gap: calc(12 * var(--u)); padding: calc(24 * var(--u)) calc(28 * var(--u)) calc(30 * var(--u)); }
.w01-column__tag { padding: calc(2 * var(--u)) calc(12 * var(--u)); border: 1px solid var(--red); border-radius: calc(40 * var(--u)); font-weight: 700; font-size: calc(13 * var(--u)); line-height: 1.6; color: var(--red); }
.w01-column__title { font-weight: 700; font-size: calc(17 * var(--u)); line-height: 1.7; }

/*----------------------------*/
/* あわせて依頼されることの多いサービス */
/*----------------------------*/
.w01-service { padding: calc(90 * var(--u)) 0 calc(100 * var(--u)); }
.w01-service .w01-heading { margin-bottom: calc(44 * var(--u)); }
.w01-service__links { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(24 * var(--u)); }
.w01-service__links a { display: flex; justify-content: space-between; align-items: center; gap: calc(12 * var(--u)); padding: calc(26 * var(--u)) calc(24 * var(--u)) calc(26 * var(--u)) calc(28 * var(--u)); border: 1px solid var(--line); border-radius: calc(8 * var(--u)); background: #fff; box-shadow: 0 calc(4 * var(--u)) calc(12 * var(--u)) rgba(0, 0, 0, .06); font-weight: 700; font-size: calc(18 * var(--u)); line-height: 1.5; transition: opacity .2s; }
.w01-service__links a::after { content: ""; flex-shrink: 0; width: calc(32 * var(--u)); height: calc(32 * var(--u)); border-radius: 50%; background: var(--red) url("../images/works01/icon-arrow-right.svg") no-repeat center / calc(14 * var(--u)); }
.w01-service__links a:hover { opacity: .8; }

/*----------------------------*/
/* 最終CTA */
/*----------------------------*/
/* テーマの section:last-child の下余白（フッターCTAの重なり用）を打ち消すため .w01 を付けて詳細度を上げる */
.w01 .w01-lastcta { padding: calc(100 * var(--u)) 0; background: var(--ink); }
.w01-lastcta__box { display: flex; flex-direction: column; align-items: center; gap: calc(20 * var(--u)); padding: calc(64 * var(--u)) calc(80 * var(--u)); border-radius: calc(14 * var(--u)); background: #fff; text-align: center; }
.w01-lastcta__title { font-weight: 900; font-size: calc(40 * var(--u)); line-height: 1.5; }
.w01-lastcta__text { font-size: calc(18 * var(--u)); line-height: 1.9; color: var(--gray); }
.w01-lastcta__actions { display: flex; align-items: center; gap: calc(48 * var(--u)); margin-top: calc(28 * var(--u)); }
.w01-lastcta__tel { display: flex; flex-direction: column; align-items: flex-start; gap: calc(2 * var(--u)); }
.w01-lastcta__tel a { display: flex; align-items: center; gap: calc(10 * var(--u)); font-weight: 700; font-size: calc(38 * var(--u)); line-height: 1.2; }
.w01-lastcta__tel a span { font-size: calc(20 * var(--u)); color: var(--red); }
.w01-lastcta__tel p { font-size: calc(14 * var(--u)); line-height: 1.6; color: var(--gray); }

/*----------------------------*/
/* PC幅が狭いとき（768〜1500px） */
/*----------------------------*/
@media screen and (min-width: 768px) and (max-width: 1500px) {
    /* 重要帯：ページヘッダーの赤三角（.page-header::before）が帯の文字に届くため帯を前面に出す。
       1501px以上は三角が文字に届かないので（実測で約1480pxから）、デザイン通り三角を前面に残す */
    .w01-notice { position: relative; z-index: 1; }
}
@media screen and (min-width: 768px) and (max-width: 1350px) {
    /* 重要帯：1行に収まりにくくなる幅では、ピンクのリンクを2行目の中央に配置する */
    .w01-notice__inner { flex-wrap: wrap; gap: calc(8 * var(--u)) calc(20 * var(--u)); }
    .w01-notice__link { flex-basis: 100%; justify-content: center; }
    /* 対応事例：文章が長いため、3列だと本文の欄が狭くなる幅では2列にする */
    .w01-case__cards { grid-template-columns: repeat(2, 1fr); }
}

/*----------------------------*/
/* タブレット（768〜1023px） */
/*----------------------------*/
@media screen and (min-width: 768px) and (max-width: 1023px) {
    .w01-situation__solution,
    .w01-reason__diagram { flex-direction: column; }
    .w01-situation__cta { width: 100%; }
    /* 工場ネットワーク図：縦並び時は各要素の幅を揃える */
    .w01-reason__exchange { transform: rotate(90deg); }
    .w01-reason__customer,
    .w01-reason__hset,
    .w01-reason__factories { flex: none; width: 100%; max-width: calc(560 * var(--u)); }
    .w01-reason__customer { height: auto; padding: calc(24 * var(--u)); }
    .w01-reason__hset { height: auto; padding: calc(28 * var(--u)); }
    .w01-process__steps,
    .w01-service__links { grid-template-columns: repeat(2, 1fr); }
    .w01-flow__steps { gap: calc(24 * var(--u)); }
    .w01-flow__steps li:not(:last-child)::after { right: calc(-20 * var(--u)); }
    /* 最終CTA：電話番号が改行される前にボタンと電話番号を縦並びにする */
    .w01-lastcta__actions { flex-direction: column; gap: calc(24 * var(--u)); }
    .w01-lastcta__tel { align-items: center; }
}

/*----------------------------*/
/* SP（767px以下）：SPデザイン 375px 幅の値で上書き */
/*----------------------------*/
@media screen and (max-width: 767px) {
    .w01 .w01-pc { display: none; }
    .w01 .w01-sp { display: revert; }
    .w01 .w01-fv__image.w01-sp { display: block; }

    .w01-inner { width: auto; max-width: none; margin: 0 0.15rem; }
    .w01-sec { padding: 0.56rem 0; }

    .w01-heading { margin-bottom: 0.28rem; }
    .w01-heading__en { margin-bottom: 0.07rem; font-size: 0.15rem; letter-spacing: 1px; }
    .w01-heading__badge { margin-bottom: 0.07rem; padding: 0.03rem 0.09rem; font-size: 0.14rem; }
    .w01-heading__title { font-size: 0.22rem; }
    .w01-heading__title::after { width: 0.6rem; height: 0.04rem; margin-top: 0.07rem; }
    .w01-heading__title--sm { font-size: 0.2rem; }
    .w01-heading__lead { margin-top: 0.18rem; font-size: 0.14rem; }

    .w01-btn { width: 100%; padding: 0.14rem 0.16rem; font-size: 0.15rem; gap: 0.08rem; }
    .w01-btn--white { padding: 0.14rem 0.16rem; font-size: 0.15rem; }
    .w01-btn--lg { padding: 0.16rem; font-size: 0.17rem; }
    .w01-btn--outline { width: auto; padding: 0.08rem 0.2rem; border-width: 0.02rem; font-size: 0.14rem; }

    .w01-notice__inner { flex-direction: column; align-items: flex-start; gap: 0.06rem; padding: 0.12rem 0; }
    .w01-notice__label { padding: 0.02rem 0.06rem; font-size: 0.13rem; }
    .w01-notice__text { font-size: 0.15rem; }
    .w01-notice__link { gap: 0.04rem; font-size: 0.14rem; }

    .w01-fv { padding: 0.4rem 0 0.55rem; }
    .w01-fv__row { display: block; }
    .w01-fv__text { gap: 0.14rem; }
    .w01-fv__tag { padding: 0.03rem 0.08rem; font-size: 0.13rem; }
    .w01-fv__title { font-size: 0.26rem; }
    .w01-fv__lead { font-size: 0.14rem; }
    .w01-fv__image { width: 100%; }
    .w01-fv__image img { border-radius: 0.12rem; }
    .w01-fv__chips { gap: 0.06rem; max-width: none; }
    .w01-fv__chips li { gap: 0.03rem; padding: 0.04rem 0.08rem 0.04rem 0.06rem; border-width: 0.015rem; font-size: 0.13rem; }
    .w01-fv__chips li::before { width: 0.18rem; height: 0.18rem; }
    .w01-fv__cta { align-items: stretch; gap: 0.1rem; width: 100%; }
    .w01-btn--fv { padding: 0.1rem 0.16rem; gap: 0.02rem; }
    .w01-btn__main { gap: 0.08rem; font-size: 0.16rem; }
    .w01-btn__sub { font-size: 0.12rem; }
    .w01-fv__tel { flex-wrap: wrap; gap: 0 0.08rem; }
    .w01-fv__tel-label { font-size: 0.13rem; }
    .w01-fv__tel-num { font-size: 0.22rem; }
    .w01-fv__tel-hour { font-size: 0.13rem; }

    .w01-request__cards { grid-template-columns: 1fr; gap: 0.12rem; }
    .w01-request__card { padding: 0.17rem 0.16rem; }
    .w01-request__title { gap: 0.07rem; margin-bottom: 0.08rem; padding-bottom: 0.08rem; font-size: 0.15rem; }
    .w01-request__title::before { width: 0.44rem; height: 0.44rem; background-size: 0.22rem; }
    .w01-request__text { font-size: 0.13rem; }

    .w01-situation .w01-heading { margin-bottom: 0.24rem; }
    .w01-situation__pains { grid-template-columns: 1fr; gap: 0.12rem; }
    .w01-situation__pains li { gap: 0.12rem; padding: 0.14rem; font-size: 0.15rem; }
    .w01-situation__pains li::before { width: 0.4rem; height: 0.4rem; font-size: 0.2rem; }
    .w01-situation__arrow { margin: 0.24rem 0; }
    .w01-situation__arrow img { width: 0.6rem; height: 0.3rem; }
    .w01-situation__solution { flex-direction: column; align-items: stretch; gap: 0.22rem; padding: 0.24rem 0.15rem; border-width: 0.03rem; }
    .w01-situation__body { gap: 0.1rem; }
    .w01-situation__label { padding: 0.02rem 0.08rem; font-size: 0.13rem; }
    .w01-situation__title { font-size: 0.2rem; }
    .w01-situation__text { font-size: 0.14rem; }
    .w01-situation__note { padding: 0.07rem 0.09rem; font-size: 0.13rem; }
    .w01-situation__cta { width: 100%; gap: 0.09rem; padding: 0.18rem 0.16rem; }
    .w01-situation__cta-title { font-size: 0.15rem; }
    .w01-situation__cta-note { font-size: 0.12rem; }

    .w01-reason__diagram { flex-direction: column; gap: 0.12rem; padding: 0.28rem 0.16rem; }
    .w01-reason__customer,
    .w01-reason__hset,
    .w01-reason__factories { flex: none; }
    .w01-reason__customer { width: 100%; height: auto; padding: 0.06rem; border-width: 0.02rem; font-size: 0.17rem; }
    .w01-reason__exchange { width: 0.48rem; height: 0.21rem; transform: rotate(90deg); margin: 0.08rem 0; }
    .w01-reason__hset { width: 100%; height: auto; gap: 0.02rem; padding: 0.14rem; }
    .w01-reason__hset-name { font-size: 0.24rem; }
    .w01-reason__hset-role { font-size: 0.14rem; }
    .w01-reason__factories { gap: 0.07rem; width: 100%; }
    .w01-reason__factories li { width: 100%; gap: 0.08rem; padding: 0.08rem 0.12rem; border-width: 0.02rem; font-size: 0.14rem; }
    .w01-reason__points { grid-template-columns: 1fr; gap: 0.12rem; margin-top: 0.28rem; }
    .w01-reason__points li { gap: 0.07rem; padding: 0.18rem 0.16rem; }
    .w01-reason__num { font-size: 0.26rem; }
    .w01-reason__title { font-size: 0.16rem; }
    .w01-reason__text { font-size: 0.13rem; }

    .w01-process__steps { grid-template-columns: 1fr; gap: 0.12rem; }
    .w01-process__body { gap: 0.06rem; padding: 0.12rem 0.12rem 0.15rem; }
    .w01-process__num { padding: 0.02rem 0.06rem; font-size: 0.16rem; }
    .w01-process__num span { font-size: 0.12rem; }
    .w01-process__title { font-size: 0.16rem; }
    .w01-process__text { font-size: 0.13rem; }
    .w01-process__partial { flex-direction: column; align-items: stretch; gap: 0.12rem; margin-top: 0.28rem; padding: 0.2rem 0.16rem; }
    .w01-process__partial-title { font-size: 0.18rem; }
    .w01-process__partial-text { margin-top: 0.05rem; font-size: 0.14rem; }
    .w01-process__partial .w01-btn { padding: 0.14rem 0.16rem; }

    .w01-midcta { padding: 0.32rem 0; }
    .w01-midcta__inner { flex-direction: column; gap: 0.16rem; text-align: center; }
    .w01-midcta__title { font-size: 0.2rem; }
    .w01-midcta__text { margin-top: 0.05rem; font-size: 0.14rem; }

    .w01-spec__row { flex-direction: column; }
    .w01-spec__row dt { width: auto; padding: 0.1rem 0.12rem; font-size: 0.14rem; }
    .w01-spec__row dd { padding: 0.1rem 0.12rem; font-size: 0.14rem; }

    .w01-case__cards { grid-template-columns: 1fr; gap: 0.12rem; margin-bottom: 0.28rem; }
    .w01-case__body { gap: 0.08rem; padding: 0.14rem 0.15rem 0.16rem; }
    .w01-case__industry { font-size: 0.13rem; }
    .w01-case__tag { padding: 0.02rem 0.06rem; font-size: 0.12rem; }
    .w01-case__title { font-size: 0.15rem; }
    .w01-case__detail { gap: 0.05rem; padding: 0.09rem; }
    .w01-case__detail div { gap: 0.06rem; }
    .w01-case__detail dt { width: 0.84rem; padding: 1px 0.04rem; font-size: 0.11rem; }
    .w01-case__detail dd { font-size: 0.13rem; }

    .w01-flow__steps { flex-direction: column; align-items: stretch; gap: 0.34rem; }
    .w01-flow__steps li { flex: none; gap: 0.06rem; min-height: 0; padding: 0.16rem 0.1rem 0.17rem; }
    .w01-flow__steps li:not(:last-child)::after { top: auto; right: auto; bottom: -0.29rem; left: 50%; width: 0.16rem; height: 0.24rem; transform: translateX(-50%) rotate(90deg); }
    .w01-flow__num { font-size: 0.24rem; }
    .w01-flow__title { min-height: 0; font-size: 0.14rem; }
    .w01-flow__text { font-size: 0.13rem; }
    .w01-flow__text::before { width: 0.3rem; height: 0.02rem; margin-bottom: 0.06rem; }

    .w01-faq__list { gap: 0.08rem; }
    .w01-faq__item summary { gap: 0.09rem; padding: 0.11rem 0.16rem; font-size: 0.14rem; }
    .w01-faq__item summary::before,
    .w01-faq__item p::before { width: 0.32rem; height: 0.32rem; font-size: 0.15rem; }
    .w01-faq__item summary::after { font-size: 0.17rem; }
    .w01-faq__item p { gap: 0.09rem; padding: 0.11rem 0.16rem 0.12rem; font-size: 0.14rem; }

    .w01-column__cards { grid-template-columns: 1fr; gap: 0.12rem; }
    .w01-column__body { gap: 0.06rem; padding: 0.12rem 0.14rem 0.15rem; }
    .w01-column__tag { padding: 1px 0.06rem; font-size: 0.12rem; }
    .w01-column__title { font-size: 0.14rem; }

    .w01-service { padding: 0.45rem 0 0.5rem; }
    .w01-service .w01-heading { margin-bottom: 0.22rem; }
    .w01-service__links { grid-template-columns: 1fr; gap: 0.12rem; }
    .w01-service__links a { padding: 0.13rem 0.12rem 0.13rem 0.14rem; font-size: 0.14rem; }

    .w01-lastcta { padding: 0.5rem 0; }
    .w01-lastcta__box { gap: 0.1rem; padding: 0.32rem 0.2rem; }
    .w01-lastcta__title { font-size: 0.22rem; }
    .w01-lastcta__text { font-size: 0.14rem; }
    .w01-lastcta__actions { flex-direction: column; align-items: stretch; gap: 0.2rem; width: 100%; margin-top: 0.04rem; }
    .w01-lastcta__tel { align-items: center; }
    .w01-lastcta__tel a { gap: 0.08rem; font-size: 0.22rem; }
    .w01-lastcta__tel a span { font-size: 0.15rem; }
    .w01-lastcta__tel p { font-size: 0.13rem; }
}