@import 'https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css';

body {
    font-family: 'Inter', sans-serif;
    .ceo-message {
        max-width: 1280px;
        margin: 0 auto;
        padding: 40px;
        background: white;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
    }
    /*スマホ用tableレスポンシブ対応*/
    .company-overview {
        margin: 2rem auto;
    }

    .company-overview table {
        width: 100%;
        margin: 0 auto;
        border-collapse: collapse;
    }

    .company-overview table th,
    .company-overview table td {
        padding: 12px;
        border: 1px solid #ddd;
    }

    .company-overview th {
        text-align: left;
        background-color: #f8f9fa;
        width: 30%;
    }

    .company-overview td {
        width: 70%;
    }

    /* スマホ用レスポンシブ対応 */
    @media (max-width: 640px) {
        .company-overview table {
            min-width: 100%;
        }

        .company-overview .overflow-x-auto {
            overflow-x: auto;
        }

        .company-overview th,
        .company-overview td {
            display: block;
            width: 100%;
        }

        .company-overview th {
            border-bottom: none;
            padding-bottom: 0;
        }

        .company-overview td {
            border-top: none;
            padding-top: 8px;
        }
    }
    .company-history {
        margin: 2rem auto;
    }

    .company-history table {
        width: 100%;
        margin: 0 auto;
        border-collapse: collapse;
    }

    .company-history table th,
    .company-history table td {
        padding: 12px;
        border: 1px solid #ddd;
    }

    /* スマホ用レスポンシブ対応 */
    @media (max-width: 640px) {
        .company-history table {
            min-width: 100%;
        }

        .company-history .overflow-x-auto {
            overflow-x: auto;
        }
    }


    /* タイトルのスタイル */
    .ceo-message h2 {
        text-align: center;
        color: #333;
        font-size: 28px;
        margin-bottom: 20px;
    }

    /* 本文のスタイル */
    .ceo-message p {
        font-size: 18px;
        line-height: 1.8;
        color: #555;
        margin-bottom: 20px;
        text-align: justify;
    }

    /* レスポンシブ対応 */
    @media (max-width: 1024px) {
        .ceo-message {
            max-width: 90%;
            padding: 30px;
        }

        .ceo-message h2 {
            font-size: 24px;
        }

        .ceo-message p {
            font-size: 16px;
        }
    }

    @media (max-width: 768px) {
        .ceo-message {
            max-width: 95%;
            padding: 20px;
        }

        .ceo-message h2 {
            font-size: 22px;
        }

        .ceo-message p {
            font-size: 14px;
        }
    }

    .company-overview {
        max-width: 1280px;
        margin: 0 auto;
        padding: 20px;
        background: white;
        border-radius: 8px;
    }

    /* テーブルの基本スタイル */
    table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 20px;
        overflow-x: auto;
        display: block; /* レスポンシブ対応 */
    }

    /* テーブルのヘッダー（左側） */
    th {
        background-color: #f4f4f4;
        text-align: left;
        padding: 12px;
        font-weight: bold;
        width: 30%;
        min-width: 150px; /* レスポンシブ時の最低幅 */
        border: 1px solid #ddd;
    }

    /* テーブルのデータ（右側） */
    td {
        padding: 12px;
        border: 1px solid #ddd;
        background-color: #fff;
    }

    /* レスポンシブ対応 */
    @media (max-width: 600px) {
        table {
            display: block;
            width: 100%;
        }

        tr {
            display: flex;
            flex-direction: column;
            border-bottom: 1px solid #ddd;
            padding: 10px 0;
        }

        th {
            width: 100%;
            background-color: #f8f8f8;
            border-bottom: none;
            padding-top: 8px;
            font-size: 14px;
        }

        td {
            width: 100%;
            font-size: 14px;
            border-top: none;
            padding-bottom: 8px;
        }
    }


    @keyframes fadeIn {
        0% { opacity: 0; transform: translateY(10px); }
        100% { opacity: 1; transform: translateY(0); }
    }

    .animate-fade-in {
        animation: fadeIn 2s ease-in-out forwards;
    }


    /* ソリューション */
    #solution-list {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 最小幅500px、最大フル幅 */
        gap: 10rem; /* アイテム間の間隔 */
        padding: 1rem; /* 余白 */
        margin: 10px;
        padding-left: 80px;
        padding-right: 80px;
    }
    #solution-list {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* レスポンシブ対応でカラム数調整 */
        gap: 1.5rem; /* アイテム間の余白 */
        padding: 2rem;
    }

    #solution-list > div {
        background-color: #ffffff; /* 背景を白に */
        border: 1px solid #e5e7eb; /* グレーの枠線 */
        border-radius: 12px; /* 角丸 */
        padding: 1.5rem;
        position: relative; /* アイコンの位置調整用 */
    }
    .icon-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 50px;
        width: 50px;
        border-radius: 50%;
        background-color: #3b82f6; /* アイコン背景色（青） */
        color: white;
        flex-shrink: 0; /* アイコンのサイズを固定 */

        #solution-list > div:hover {
            transform: translateY(-5px); /* ホバー時に少し浮かせる */

        }

        #solution-list > div .absolute {
            top: -20px; /* アイコンをカードの外側に配置 */
            left: 20px;
        }
    }

        /* ソリューション */

        #service-list {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 最小幅500px、最大フル幅 */
            gap: 10rem; /* アイテム間の間隔 */
            padding: 1rem; /* 余白 */
            margin: 10px;
            padding-left: 80px;
            padding-right: 80px;
        }

        #service-list {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* レスポンシブ対応でカラム数調整 */
            gap: 1.5rem; /* アイテム間の余白 */
            padding: 2rem;
        }

        #service-list > div {
            background-color: #ffffff; /* 背景を白に */
            border: 1px solid #e5e7eb; /* グレーの枠線 */
            border-radius: 12px; /* 角丸 */
            padding: 1.5rem;
            position: relative; /* アイコンの位置調整用 */
        }

        .icon-wrapper {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 50px;
            width: 50px;
            border-radius: 50%;
            background-color: #3b82f6; /* アイコン背景色（青） */
            color: white;
            flex-shrink: 0; /* アイコンのサイズを固定 */


            #service-list > div:hover {
                transform: translateY(-5px); /* ホバー時に少し浮かせる */

            }

            #service-list > div .absolute {
                top: -20px; /* アイコンをカードの外側に配置 */
                left: 20px;
            }


        }

    }