:root {
    --primary: #5b62a6;
    /* メインカラー（既存より少し暗め・濃いめに調整） */
    --secondary: #ec6941;
    /* アクセントカラー（既存のままでも十分コントラスト良好） */
    --surface: #ffffff;
    --background: #f5f5f5;
    --on-primary: #ffffff;
    --on-secondary: #ffffff;
    --on-surface: #333333;
    --elevation-1: 0px 2px 4px rgba(0, 0, 0, 0.1);
    --elevation-2: 0px 4px 8px rgba(0, 0, 0, 0.15);
    --radius: 8px;

    /* 分野別カラー */
    --mechanical: #4a77a8;
    /* 機械設計：青み寄りの濃いめカラー（primaryと色相を近づけつつ差別化） */
    --electronics: #3fa7d6;
    /* 電気・電子：既存で十分コントラストあり */
    --software: #4da94d;
    /* ソフト・IT：やや暗くしてコントラストUP */

    --color-text-on-field: #ffffff;
}

/* レイアウト合わせのため（のちに修正予定）*/
.businessBox01 h1 .h2wrap {
    padding: 91px 0;
    width: 960px;
    margin: 0 auto;
}

h1 {
    max-width: 100%;
}

#container h1 .h2Eng {
    font-size: 150%;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--on-primary);
    max-height: 43px;
}

#container h1 .h2Jan {
    padding-top: 10px;
    font-weight: normal;
    font-size: 21px;
}

#container h1 .h2Eng,
#container h1 .h2Jan {
    display: block;
    color: var(--on-primary);
    text-align: center;
}

/* h1背景 */
.businessLayout .businessBox01 h1 {
    background-image: url(../common/img/h1_business.jpg);
}

/* 採用情報バナー */
div#banner {
    text-align: center;
}

div#banner img {
    max-width: 600px;
    height: auto;
}



html {
    scroll-behavior: smooth;
}


div.main-contents {
    width: 100%;
    margin: 50px auto;
}

body {
    font-family: 'Roboto', sans-serif;
    color: var(--on-surface);
    line-height: 1.6;
    margin: 0;
    padding: 2rem;
    font-size: 100%;
}

@media screen and (max-width: 760px) {

    body {
        padding: 0;
        /* モバイルでは余白削除 */
    }

    #container h1 .h2wrap {
        width: 90%;
        padding: 66px 0;
    }

}

/* セクションリンク */

.section-links a {
    white-space: nowrap;
    /* リンク内で改行しない */
    display: inline-block;
    /* マージンを適用するためにインラインブロックに */
    margin: 0.25rem 0.5rem;
    /* 上下左右の余白を調整 */
}

.section-links p {
    margin-bottom: 0.75rem;
    /* リンク集タイトル下の余白を調整 */
}

/*--- ロゴボックスを白背景に ---*/
.logo-wrapper {
    display: inline-block;
    background: var(--surface);
    padding: 1rem 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 12px var(--elevation-1);
    margin-bottom: 1rem;
}

/* ===== 上部セクション（事業概要） ===== */
section#overview {
    margin-bottom: 2rem;
}

.business-overview h2 {
    font-size: 2rem;
    color: var(--primary);
    text-align: center;
}

.upper-box {
    background: var(--primary);
    color: var(--on-primary);
    padding: 2rem;
    text-align: center;
    position: relative;
    clip-path: polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0 85%);
    box-shadow: var(--elevation-2);
}

.company-name {
    font-size: 1.8rem;
    font-weight: 500;
    margin-bottom: 1rem;
}

.services {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

div.service {
    background: var(--surface);
    color: var(--primary);
    border-radius: var(--radius);
    padding: 0.5rem 1rem;
    font-weight: 500;
    box-shadow: var(--elevation-1);
}

/* ===== 技術力の提供メニュー ===== */
.tech-support {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.support-title {
    font-weight: 500;
    font-size: 1.2rem;
    margin-bottom: 0rem;
}

.support-types {
    display: flex;
    gap: 1rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.support-types li {
    background: var(--surface);
    border-left: 4px solid var(--secondary);
    padding: 1rem 1.5rem;
    border-radius: var(--radius);
    font-weight: 500;
    box-shadow: var(--elevation-1);
    color: var(--on-surface);
}

.support-caption {
    font-size: 0.95rem;
    color: var(--on-primary);
    margin-top: 1rem;
}

/* ===== 開発フェーズ ===== */
.development-flow {
    margin-top: 1rem;
    padding: 2rem;
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--elevation-2);
    text-align: center;
}

.client {
    font-weight: 500;
    font-size: 1.2rem;
    color: var(--secondary);
    margin-bottom: 1rem;
}

.flow-container {
    background: #fff3ec;
    padding: 1rem;
    border-radius: var(--radius);
    border-left: 4px solid var(--secondary);
}

.flow {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1rem;
    margin-bottom: 1rem;
}



.arrow {
    font-size: 1.2rem;
    color: var(--secondary);
}

.phase-label {
    background: var(--secondary);
    color: var(--on-secondary);
    padding: 0.5rem 1rem;
    border-radius: var(--radius);
    font-weight: bold;
}

.manufacturing {
    margin-top: 1rem;
    font-size: 0.95rem;
    color: var(--on-surface);
}

/* ▶ PCサイズ用（明示的に ▶ に戻す） */
.arrow::before {
    content: "▶";
}

.manufacturing::before {
    content: "→";
    color: var(--on-surface);
    margin-bottom: 0.3rem;
}

/* アイコン付き共通レイアウト */
.with-icon {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.with-icon img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    margin: 0px;
}

/* 派遣・受託・教育にも同様に適用可能 */
.support-types li.with-icon {
    justify-content: flex-start;
}

/* アニメーション用CSS */

/* 初期状態 */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    will-change: opacity, transform;
}

/* アクティブ時 */
.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

.step {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    will-change: opacity, transform;
    background-color: var(--surface);
    color: var(--secondary);
    font-weight: 500;
    padding: 0.75rem 3rem;
    border-radius: var(--radius);
    box-shadow: var(--elevation-1);
}

/* アクティブになったとき */
.step.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ロゴアニメーション */

/* 初期状態：透明＆下にズレた状態 */
.animate-logo {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
    will-change: opacity, transform;
}

/* 表示トリガーがかかったらフェードイン */
.animate-logo.visible {
    opacity: 1;
    transform: translateY(0);
}

/* 共通リンクボックス */
.step-link {
    text-decoration: none;
    background-color: var(--primary);
    color: white;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
    /* より濃く */
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-bottom: 2.5rem;
    /* 擬似要素のスペース確保 */
}

/* ホバー時 */
.step-link:hover {
    transform: translateY(-6px) scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
    background-color: #343a75;
    /* 少し濃い背景に */
    cursor: pointer;
}

/* アイコンサイズを拡大 */
.step-link img {
    width: 64px;
    height: 64px;
    margin-bottom: 0.5rem;
    filter: brightness(0) invert(1);
    /* 白アイコン化 */
}

/* テキスト */
.step-link span {
    color: var(--on-primary);
    font-weight: bold;
    font-size: 1.1rem;
}

/* 擬似要素で詳細文を表示 */
.step-link::after {
    content: "▶ 詳細を見る";
    position: absolute;
    bottom: 0.5rem;
    font-size: 0.9rem;
    color: white;
    opacity: 0.9;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* ホバー時により明確に */
.step-link:hover::after {
    opacity: 1;
}

/* 画面上部の説明*/
.description {
    text-align: center;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background-color: var(--background);
    /* 淡い背景で視認性UP */
    border-radius: 8px;
    box-shadow: var(--elevation-2);
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.description h2 {
    font-size: 1.3rem;
    color: var(--on-surface);
    margin-bottom: 0.75rem;
}

.description p {
    font-size: 1rem;
    color: var(--on-surface);
}

/* スクロール時アニメーション */
.description.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ▼ スマホ画面用の縦並びレイアウト（600px以下） */
@media (max-width: 600px) {

    /* 開発フェーズ：矢印と縦並び */
    .flow {
        flex-direction: column;
        align-items: center;
    }

    .arrow::before {
        content: "▼";
        font-size: 1.2rem;
        color: var(--secondary);
    }

    .arrow {
        display: block;
        height: 1.5rem;
    }

    .tech-support {
        margin-bottom: 3rem;
    }


    /* サービス（機械・電気電子・ソフト）縦並びに */
    .services {
        flex-direction: column;
        align-items: center;
    }

    .service {
        width: 80%;
        text-align: center;
    }

    /* サポート項目（派遣・受託・教育）縦並びに */
    .support-types {
        flex-direction: column;
        align-items: center;
    }

    .support-types li {
        width: 80%;
        text-align: center;
    }


    .manufacturing {
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 0.95rem;
        margin-top: 1.5rem;
    }

    .manufacturing::before {
        content: "↓";
    }

    .with-icon {
        justify-content: center;
    }

    .support-types li.with-icon {
        justify-content: center;
    }
}

/* 派遣業務セクション */
.service-section {
    padding: 2rem 6rem;
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--elevation-1);
    margin-bottom: 2rem;
}

.service-section img.service-icon {
    height: 64px;
    width: 64px;
    filter: brightness(0) saturate(100%) invert(49%) sepia(53%) saturate(337%) hue-rotate(196deg) brightness(89%) contrast(86%);
}

img.filter-orange {
    filter: brightness(0) saturate(100%) invert(64%) sepia(53%) saturate(4745%) hue-rotate(333deg) brightness(95%) contrast(94%);
}

.service-section h2 {
    font-size: 2.5rem;
    color: var(--primary);
}

.service-section h3 {
    font-size: 1.3rem;
    color: var(--on-surface);
}

/* サービスの特徴 */


/* --- サービスの特徴リスト --- */
.dispatch-features ul,
.contract-features ul,
.education-features ul {
    list-style: disc inside;
    padding: 0;
    margin: 0;
}

.dispatch-features li,
.contract-features li,
.education-features li {
    position: relative;
    margin: 0.8rem 0;
    padding-left: 2rem;
    font-size: 1.05rem;
    line-height: 1.6;
}

/* 下線アニメーション */
/* 初期状態：下線非表示 */
.highlight {
    position: relative;
    font-weight: bold;
    color: var(--primary);
}

.highlight::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0;
    height: 3px;
    background: var(--primary);
    transition: width 0.6s ease-out;
}

/* 画面に入ったときにアニメーション開始 */
.highlight.visible::after {
    width: 100%;
}


/* ========== 対応領域（カードデザイン） ========== */
.dispatch-fields {
    margin-top: 2rem;
}

.dispatch-fields .caption {
    font-size: 0.95rem;
    color: var(--on-surface);
    margin-bottom: 1rem;
}

.fields-container {
    flex-wrap: wrap;
    gap: 1.5rem;
}

.field {
    margin-bottom: 10px;
    flex: 1 1 calc(33% - 1rem);
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--elevation-1);
    padding: 1.2rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.field h4 {
    font-weight: bold;
}

/* 分野ごとに色を変える */
.field.mechanical h4,
.field.mechanical h3 {
    border-color: var(--mechanical);
    color: var(--mechanical);
}

.field.electronics h4,
.field.electronics h3 {
    border-color: var(--electronics);
    color: var(--electronics);
}

.field.software h4,
.field.software h3 {
    border-color: var(--software);
    color: var(--software);
}

/* 対応技術領域リスト（横並び・色分け対応） */
.field ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.8rem;
    margin: 0;
    padding: 0;
    list-style: none;
    /* 黒丸削除 */
}

.field ul li {
    padding: 0.35rem 0.7rem;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--on-primary);
    /* 白文字で統一 */
    cursor: default;
    /* クリック不可を明示 */
    user-select: text;
    /* コピーは可能 */
    opacity: 0.95;
}

/* 分野ごとの色分け */
.field.mechanical ul li {
    background-color: var(--mechanical);
    /* 機械用ブルー */
}

.field.electronics ul li {
    background-color: var(--electronics);
    /* 電気電子用オレンジ */
}

.field.software ul li {
    background-color: var(--software);
    /* ソフトIT用グリーン */
}

/* hoverしても反応しないことを明示（変化なし） */
.field ul li:hover {
    opacity: 0.95;
}

.with-icon img.field-icon {
    width: 28px;
    height: 28px;
    vertical-align: middle;
}

img.field-icon.color-machine {
    filter: brightness(0) saturate(100%) invert(41%) sepia(73%) saturate(332%) hue-rotate(170deg) brightness(92%) contrast(92%);
}

img.field-icon.color-soft {
    filter: brightness(0) saturate(100%) invert(65%) sepia(69%) saturate(334%) hue-rotate(71deg) brightness(85%) contrast(92%);
}

img.field-icon.color-electronics {
    filter: brightness(0) saturate(100%) invert(51%) sepia(81%) saturate(363%) hue-rotate(153deg) brightness(98%) contrast(92%);
}

/* レスポンシブ対応（縦並びに切り替え） */
@media (max-width: 900px) {
    .service-section {
        padding: 2rem;
    }

    .field {
        flex: 1 1 100%;
    }
}

/* ========== 実績例テーブル ========== */
.dispatch-examples {
    margin-top: 2rem;
}

.dispatch-examples h3 {
    font-size: 1.2rem;
    margin-bottom: 1rem;
    font-weight: bold;
}

/* テーブルを囲むレスポンシブコンテナ */
.table-responsive {
    overflow-x: auto;
    /* 横スクロールを可能にする */
    -webkit-overflow-scrolling: touch;
    /* iOSでのスムーズなスクロール */
    margin-bottom: 1.5rem;
    /* 下部の余白 */
}

/* 表全体 */
.tb01 {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
    font-size: 0.95rem;
    background: var(--surface);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--elevation-1);
    min-width: 600px;
    /* テーブルが縮小する最小幅を設定（内容に合わせて調整） */
}

/* ヘッダー */
.tb01 thead th {
    background: var(--primary);
    color: var(--on-primary);
    font-weight: bold;
    text-align: left;
    padding: 0.75rem;
}

/* 各分野ごとにヘッダー色を変える */
.dispatch-examples.mechanical thead th {
    background: var(--mechanical);
}

.dispatch-examples.electronics thead th {
    background: var(--electronics);
}

.dispatch-examples.software thead th {
    background: var(--software);
}

/* 表の中身 */
.tb01 tbody td {
    border-top: 1px solid #ddd;
    padding: 0.75rem;
    color: var(--on-surface);
    vertical-align: top;
}

/* 偶数行で背景色を薄く変える */
.tb01 tbody tr:nth-child(even) {
    background: #fafafa;
}

/* 小画面でのテーブル表示調整 */
@media screen and (max-width: 768px) {
    .tb01 {
        min-width: unset;
        /* 小画面では最小幅の指定を解除 */
    }

    .dispatch-fields .tb01 {
        box-shadow: none;
        /* 小画面では表の影を解除 */
    }

    .tb01 thead {
        display: none;
        /* 小画面ではヘッダーを非表示 */
    }

    .tb01 tbody tr {
        display: block;
        /* 各行をブロック要素にする */
        margin-bottom: 1rem;
        /* 行間の余白 */
        border: 1px solid #ddd;
        /* 行ごとにボーダー */
        border-radius: var(--radius);
        /* 角丸 */
        background: var(--surface);
        /* 背景色 */
        box-shadow: var(--elevation-1);
        /* 影 */
    }

    .tb01 tbody td {
        display: block;
        /* 各セルをブロック要素にして縦に並べる */
        width: 100%;
        /* 幅を100%にする */
        box-sizing: border-box;
        /* パディングを含めて幅を計算 */
        padding: 0.75rem 1rem;
    }

    .tb01 tbody td::before {
        content: attr(data-label);
        /* data-label属性の値を表示（HTML側にdata-labelを追加する必要があります） */
        font-weight: bold;
        display: block;
        margin-bottom: 0.3rem;
    }

    .tb01 tbody td.displaynone::before {
        content: none;
    }

    .mechanical .tb01 tbody td::before {
        color: var(--mechanical);
    }

    .electronics .tb01 tbody td::before {
        color: var(--electronics);
    }

    .software .tb01 tbody td::before {
        color: var(--software);
    }

    /* 偶数行の背景色をリセット（行全体にボーダーと影が付くため） */
    .tb01 tbody tr:nth-child(even) {
        background: var(--surface);
    }

    /* 受託開発テーブルの特有の調整 */
    .contract-fields tbody td:first-child {
        border-right: none;
        border-bottom: 2px solid var(--mechanical);
        width: 100%;
        /* 小画面で幅を100%に */
        padding-bottom: 0.5rem;
    }

    .contract-fields tbody td:last-child {
        padding-top: 0.5rem;
    }
}


/* ========== サポート体制 & CTA ========== */
.dispatch-support {
    margin-top: 2rem;
    padding: 1rem;
    background: var(--background);
    border-left: 4px solid var(--secondary);
    border-radius: var(--radius);
}

.dispatch-cta,
.contract-cta,
.education-cta {
    margin-top: 2rem;
    text-align: center;
}

.btn-cta {
    display: inline-block;
    padding: 1rem 2rem;
    /* 余白を広くして強調 */
    background: var(--secondary);
    color: var(--on-secondary);
    font-weight: bold;
    font-size: 1.1rem;
    /* 少し大きめ */
    border-radius: var(--radius);
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    /* 浮かせる */
    transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}

.btn-cta:hover,
.btn-cta:focus {
    background: #c24f29;
    /* より濃いオレンジ */
    transform: translateY(-3px) scale(1.03);
    /* 浮き上がり+拡大 */
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

/* アイコンを右側に */
.btn-cta::after {
    content: " ➔";
    font-size: 1.2rem;
    transition: transform 0.2s ease;
}

.btn-cta:hover::after {
    transform: translateX(4px);
}

/* ========== 受託：対応技術領域 ========== */
.contract-fields {
    margin-top: 2rem;
}

.contract-fields table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0;
    font-size: 0.95rem;
    border: 1px solid #ddd;
    border-radius: var(--radius);
}

.contract-fields caption {
    font-weight: bold;
    margin-bottom: 0.5rem;
    text-align: left;
    color: var(--mechanical);
}

.contract-fields thead th {
    background: var(--mechanical);
    color: var(--on-primary);
    padding: 0.75rem;
    text-align: left;
    font-weight: 600;
}

/* 偶数行に背景色を付けて見やすく */
.contract-fields tbody tr:nth-child(even) {
    background: #fafafa;
}

/* 分野セル */
.contract-fields tbody td:first-child {
    font-weight: 600;
    color: var(--mechanical);
    padding: 0.75rem;
    vertical-align: top;
}

/* 内容セル */
.contract-fields tbody td:last-child {
    padding: 0.75rem;
}

/* リストを横並び → フラット化 */
.contract-fields ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    /* 項目間にしっかり余白 */
}

/* フラットな見た目 */
.contract-fields ul li {
    padding: 0.35rem 0.6rem;
    border-radius: 4px;
    font-size: 0.9rem;
    color: var(--on-surface);
    box-shadow: none;
    /* 影を消して誤認防止 */
}

/* アイコン風ドット → 小さめで誤認を避ける */
.contract-fields ul li::before {
    content: "◆";
    font-size: 0.65rem;
    color: var(--mechanical);
    margin-right: 0.4rem;
    vertical-align: middle;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .contract-fields tbody td:first-child {
        border-right: none;
        border-bottom: 2px solid var(--mechanical);
    }

    .contract-fields ul {
        flex-direction: column;
    }

    .contract-fields ul li {
        width: 100%;
        /* スマホは縦並びで全幅 */
    }

    .service-section {
        padding: 2rem;
    }
}

/* ========== 実績例セクション ========== */
.contract-examples {
    margin-top: 2rem;
}

.contract-examples h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--mechanical);
    position: relative;
}

.contract-examples ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

/* 実績カード */
.contract-examples li {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 1rem;
    /* box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* スクロールで浮き上がるアニメーション */
.contract-examples li.animate-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease-out;
}

.contract-examples li.visible {
    opacity: 1;
    transform: translateY(0);
}

/* 案件名 */
.contract-examples li strong {
    display: block;
    font-size: 1.1rem;
    color: var(--mechanical);
    margin-bottom: 0.5rem;
}

/* 担当工程（バッジ風） */
.contract-examples li em {
    display: inline-block;
    background: #f0f2f7;
    color: #444;
    font-size: 0.85rem;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    margin-bottom: 0.5rem;
}

/* 詳細説明 */
.contract-examples .example-detail {
    font-size: 0.9rem;
    color: #555;
    line-height: 1.5;
}

/* オフショア */
.contract-offshore,
.contract-3dprinter {
    margin-top: 2rem;
    padding: 1.5rem;
    background: var(--background);
    border-radius: var(--radiuss);
    border-left: 4px solid var(--mechanical);
    box-shadow: var(--elevation-1);
}

img.color-onsecondary {
    filter: brightness(0) saturate(100%) invert(26%) sepia(0%) saturate(2752%) hue-rotate(354deg) brightness(99%) contrast(94%);
}

img.printer-icon {
    width: 50px;
    height: 50px;
}

/* 3Dプリンターー部分の色変更 */
.contract-3dprinter .highlight {
    color: var(--mechanical);
}

.contract-3dprinter .highlight::after {
    background: var(--mechanical);
}

/* 3Dプリンターリンクボタン */
/* リンクのスタイル（標準の青＋下線を尊重） */
.contract-3dprinter a {
    color: #0645ad;
    /* アクセシブルな標準青 */
    text-decoration: underline;
    margin: 0 0.5rem;
    transition: color 0.2s ease, background-color 0.2s ease;
}

/* ===============================
   教育サービスセクション
   =============================== */
/* 対象者 */
.target-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: stretch;
    /* 高さを揃える */
}

.target-card {
    flex: 1 1 200px;
    display: flex;
    align-items: center;
    /* 垂直中央寄せ */
    justify-content: center;
    min-height: 100px;
    /* 高さを一定に */
    background: var(--surface);
    box-shadow: var(--elevation-1);
    border: 2px solid var(--mechanical);
    padding: 1rem;
    border-radius: var(--radius);
    text-align: center;
    font-weight: bold;
    color: var(--mechanical);
    line-height: 1.4;
}

/* カリキュラム */
.curriculum-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
}

.curriculum-card {
    flex: 1 1 200px;
    background: var(--mechanical);
    color: var(--color-text-on-field);
    text-align: center;
    padding: 1rem;
    border-radius: var(--radius);
    box-shadow: var(--elevation-1);
    font-weight: bold;
    line-height: 1.4;
    /* クリック誤認防止 → hover演出を除去し静的に */
    transition: none;
}

.curriculum-card.others {
    background: var(--background);
    color: var(--mechanical);
    border: var(--mechanical);
}

.section-links {
    margin: 2rem auto;
    padding: 1rem;
    background: var(--background);
    border-radius: var(--radius);
    text-align: center;
    font-size: 0.95rem;
    color: var(--on-surface);
    box-shadow: var(--elevation-1);
    max-width: 80%;
}

.section-links p {
    margin-bottom: 0.5rem;
    font-weight: bold;
    color: var(--primary);
}

/* リンクのスタイル（標準の青＋下線を尊重） */
.section-links a {
    color: #0645ad;
    /* アクセシブルな標準青 */
    text-decoration: underline;
    margin: 0 0.5rem;
    transition: color 0.2s ease, background-color 0.2s ease;
}