@charset "utf-8";

/* === Robot Parts Organic Section (Manufacturing Portal Version) === */
.robot_parts_organic_section {
    background-color: #f4f6f8; /* ややクールなオフホワイトまたはライトグレー */
    color: #4a5568; /* 基本テキストカラーを少し濃く */
    overflow: hidden;
    padding: 80px 0;
    position: relative;
}

.organic_bg_layer { /* 背景レイヤーの調整 */
    border-radius: 10px; /* 円形から少し角のある形状も混ぜる */
    opacity: 0.1; /* 透明度をさらに下げるか、調整 */
    pointer-events: none;
    position: absolute;
    transition: transform 0.5s ease-out;
    mix-blend-mode: multiply; /* 背景色との馴染みを良くする（オプション） */
}
.layer_o1 {
    background-color: #cfe2ff; /* 淡い青系 (技術的、信頼感) */
    height: 450px;
    left: -120px;
    top: 30px;
    transform: rotate(-15deg);
    width: 450px;
}
.layer_o2 {
    background-color: #d1fae5; /* 淡い緑系 (成長、安定) */
    bottom: -80px;
    height: 380px;
    right: -100px;
    transform: rotate(10deg);
    width: 380px;
}
.layer_o3 { /* 細かいラインパターンのようなものを追加しても良い */
    background-image:
        linear-gradient(45deg, rgba(156, 163, 175, 0.1) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(156, 163, 175, 0.1) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(156, 163, 175, 0.1) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(156, 163, 175, 0.1) 75%);
    background-size: 40px 40px;
    height: 100%;
    left: 0;
    opacity: 0.5;
    top: 0;
    width: 100%;
    border-radius: 0; /* パターンなので角丸なし */
}


.organic_parts_container {
    margin: 0 auto;
    max-width: 1100px;
    padding: 0 20px;
    position: relative;
    z-index: 1;
}

.section_top_organic_parts {
    margin-bottom: 55px; /* 微調整 */
    text-align: center;
}
.section_title_organic {
    color: #1e3a8a; /* 深い青、信頼感 */
    font-family: 'Roboto Condensed', sans-serif; /* モダンで読みやすいサンセリフ */
    font-size: 2.6em; /* 微調整 */
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 15px;
    text-transform: uppercase; /* 製造業向けに力強さを */
}
.section_subtitle_organic {
    color: #4b5563; /* やや濃いグレー */
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1.1em; /* 微調整 */
    line-height: 1.65;
    margin: 0 auto;
    max-width: 900px; /* 微調整 */
}

.organic_parts_showcase_grid {
    display: grid;
    gap: 28px; /* 微調整 */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* 最小幅微調整 */
}

.organic_part_card {
    background-color: #ffffff;
    border-radius: 8px; /* 角丸を少しシャープに */
    border: 1px solid #e5e7eb; /* ボーダーを明確に */
    box-shadow: 0 4px 10px rgba(30, 58, 138, 0.07); /* 青系の薄い影で統一感 */
    color: inherit;
    display: flex;
    flex-direction: column;
    padding: 25px;
    text-align: left; /* カード内テキストは左寄せに */
    text-decoration: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    position: relative;
}
.organic_part_card::after { /* 下部の線は削除、または別の表現に */
    display: none; /* 今回は削除 */
}
.organic_part_card:hover {
    border-color: #93c5fd; /* ホバーでボーダー色変更 */
    box-shadow: 0 6px 15px rgba(30, 58, 138, 0.1);
    transform: translateY(-4px); /* 傾けるのはやめて、上に少し浮かす程度に */
}

/* 各カードのアクセントカラー（より落ち着いた工業的な色合いも検討） */
/* ここでは既存の色を少し調整する程度に留めますが、例えばグレー、シルバー、濃い青なども使えます */
.card_arm_leg { border-top: 4px solid #dc2626; } /* 赤系 (警告・重要) */
.card_finger_grip { border-top: 4px solid #16a34a; } /* 緑系 (精密・制御) */
.card_wheel_drive { border-top: 4px solid #2563eb; } /* 青系 (動力・技術) */
.card_joints { border-top: 4px solid #f5970b; } /* オレンジ系 (可動・エネルギー) */
.card_housing { border-top: 4px solid #6d28d9; } /* 紫系 (構造・保護) */
.card_sensors { border-top: 4px solid #0891b2; } /* シアン系 (知覚・情報) */
.card_display { border-top: 4px solid #eab308; } /* 黄色系 (表示・UI) */
.card_processing_unit { border-top: 4px solid #db2777; } /* ピンク系 (知能・ロジック) */
.card_software { border-top: 4px solid #4f46e5; }
/* アクセントを左ボーダーから上ボーダーに変更 */

.card_icon_organic_wrapper {
    align-self: flex-start; /* 左寄せ */
    border-radius: 6px; /* 円形から角丸四角形に */
    /* border: 2px dashed currentColor; ← 点線枠はやめて、背景色で表現 */
    background-color: currentColor; /* 各カードのアクセントカラーを背景に */
    display: inline-flex;
    height: 50px; /* サイズ調整 */
    justify-content: center;
    align-items: center;
    margin-bottom: 18px;
    padding: 10px;
    transition: background-color 0.3s ease;
    width: 50px;
}
.organic_part_card:hover .card_icon_organic_wrapper {
    /* transform: rotate(10deg) scale(1.05); ← 回転は削除 */
    opacity: 0.85; /* ホバーで背景色を少し薄く */
}
.card_part_icon_organic {
    fill: #ffffff; /* アイコンの色は白で統一（背景色で区別） */
    height: 28px; /* サイズ調整 */
    width: 28px;
}

.card_text_content_organic {
    flex-grow: 1;
}
.card_part_title_organic {
    color: #1f2937; /* より濃いテキストカラー */
    font-family: 'Noto Sans JP', sans-serif; /* メインの見出しと統一感を出すか、明確に区別 */
    font-size: 1.25em; /* サイズ調整 */
    font-weight: 600;
    line-height: 1.35;
    margin: 0 0 8px 0;
}
.card_part_description_organic {
    color: #4b5563; /* やや濃いグレー */
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 0.9em;
    line-height: 1.6;
    margin-bottom: 15px; /* 微調整 */
}
.card_cta_organic {
    align-self: flex-start;
    background-color: transparent; /* 背景色はなしに */
    border-radius: 4px; /* 角丸を小さく */
    border: 1px solid currentColor; /* 各カードのアクセントカラーで枠線 */
    color: #4a5568; /* 各カードのアクセントカラーをテキスト色に */
    display: inline-block;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 0.85em;
    font-weight: 500;
    margin-top: auto;
    padding: 7px 15px; /* パディング調整 */
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.organic_part_card:hover .card_cta_organic {
    background-color: #4a5568; /* ホバーで背景をアクセントカラーに */
    border: 1px solid #4a5568;
    color: white; /* テキストを白に */
    /* opacity: 1; transform: scale(1); ← 元々派手ではないので削除 */
}

@media (max-width: 768px) {
    .robot_parts_organic_section {
        padding: 70px 0;
    }
    .section_title_organic {
        font-size: 2.2em;
    }
    .organic_part_card { text-align: left; }
    .organic_parts_showcase_grid {
        gap: 25px;
    }
    .organic_part_card {
        padding: 20px;
        text-align: left;
    }
    .card_part_title_organic {
        font-size: 1.3em;
    }
}
@media (max-width: 576px) {
    .organic_parts_container {
        padding: 0 15px;
    }
    .section_title_organic {
        font-size: 1.9em;
    }
    .organic_parts_showcase_grid {
        grid-template-columns: 1fr;
    }
    .card_icon_organic_wrapper {
        height: 44px;
        width: 44px;
    }
    .card_part_icon_organic {
        height: 24px;
        width: 24px;
    }
    .card_part_title_organic {
        font-size: 1.25em;
    }
}