/* ======================================================
   COMPANY Responsive
   SERVICE Responsiveと同じレイアウト
   ※PCデザインは変更しない
   ※@mediaのみで上書き
====================================================== */


/* ======================================================
   タブレット
   1024px以下
====================================================== */
@media screen and (max-width:1024px){

    /* ==========================
       COMPANY Hero
       SERVICEと同じ設定
    ========================== */

    .company-hero{
        padding:100px 20px 80px;
    }

    .company-title{
        font-size:40px;
    }

    .company-description{
        font-size:17px;
        line-height:1.9;
    }

    /* ==========================
       COMPANY Section
       SERVICEと同じ設定
    ========================== */

    .company-section{
        padding:80px 0;
    }

    .company-container{
        width:92%;
        gap:50px;
    }

    .company-number{
        font-size:3.5rem;
    }

    .company-content h2{
        font-size:1.8rem;
    }

    .company-content p{
        font-size:0.95rem;
        line-height:1.9;
    }
}


/* ======================================================
   スマホ
   768px以下
====================================================== */
@media screen and (max-width:768px){

    /* ==========================
       Company Section
       SERVICEと同じ縦並び
    ========================== */

    .company-section{
        padding:60px 0;
    }

    .company-container{
        width:92%;
        flex-direction:column;
        gap:40px;
    }

    /*
    HTML内の順番（.reverseかどうか）に関わらず、
    orderで確実に「画像→文章」の順に表示する。
    */
    .company-container.reverse{
        flex-direction:column;
    }

    .company-image{
        width:100%;
        order:1;                 /* 常に画像を上に */
    }

    .company-content{
        width:100%;
    }

    .company-image img{
        width:100%;
        height:auto;
        display:block;
        object-fit:cover;
        border-radius:12px;
    }

    .company-content{
        width:100%;
        order:2;                 /* 常に文章を下に */
    }

    .company-number{
        font-size:3rem;
    }

    .company-content h2{
        margin-bottom:20px;
        font-size:1.6rem;
        line-height:1.5;
    }

    .company-content p{
        margin-bottom:25px;
        font-size:16px;
        line-height:1.9;
    }

    /* ==========================
       会社情報テーブル
       スマホでは表形式をやめ、
       項目ごとに縦積みにする
    ========================== */

    .company-table,
    .company-table tbody,
    .company-table tr,
    .company-table th,
    .company-table td{
        display:block;                      /* 表組みをやめて縦積みに */
        width:100%;                         /* 横幅いっぱい */
    }

    .company-table tr{
        border-bottom:1px solid #dddddd;    /* 項目ごとの区切り線 */
        padding:10px 0;                     /* 上下余白 */
    }

    .company-table th{
        border-right:none;                  /* PC用の縦線を解除 */
        padding:0 0 4px;                    /* 内側余白 */
        font-size:14px;                     /* 文字サイズ */
        background:transparent;             /* 背景色を解除 */
    }

    .company-table td{
        padding:0;                          /* 内側余白 */
        font-size:14px;                     /* 文字サイズ */
    }
}


/* ======================================================
   小型スマホ
   480px以下
====================================================== */
@media screen and (max-width:480px){

    .company-table th{
        font-size:13px;
    }

    .company-table td{
        font-size:13px;
    }
}