/*
 * base-style.css
 * 共通レスポンシブ対応（BiNDup CMS対応）
 *
 * ブレークポイント
 *   タブレット・スマホ : 960px以下
 *   スマホ            : 599px以下
 */

/* ============================================================
   共通リセット
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: hidden; max-width: 100%; }

/* ============================================================
   タブレット・スマホ共通（960px以下）
   ============================================================ */
@media screen and (max-width: 960px) {

    /* --- 外側コンテナ幅解放 --- */
    html body #page,
    html body .wind-bg {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    html body .wrap,
    html body .area,
    html body .amm,
    html body .amc {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
    html body .aml,
    html body .amr {
        width: 0 !important;
        min-width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    html body .block,
    html body .simple,
    html body .col-1,
    html body .col-2,
    html body .col-3 {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /* --- ヘッダー lhn/column フロー化 --- */
    html body #area-header .lhn,
    html body #area-header .lhm {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        overflow: visible !important;
    }
    html body #area-header .column {
        position: static !important;
        width: 100% !important;
        left: auto !important;
        top: auto !important;
        float: none !important;
    }

    /* ヘッダー：SP幅では縦並び */
    html body #area-header p.ar {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 6px;
        padding: 10px 12px;
        margin: 0;
    }
    html body #area-header p.ar > span.img.noborder:first-child img {
        width: 200px !important;
        max-width: 60vw !important;
        height: auto !important;
    }
    html body #area-header p.ar > span.img.noborder:nth-child(2) {
        display: none !important;
    }
    html body #area-header p.ar > span.img:not(.noborder) img {
        width: auto !important;
        max-width: 110px !important;
        height: auto !important;
    }
    /* dcs-search SP幅 */
    html body #area-header .dcs-search {
        width: 100%;
        padding: 0 0;
    }

    /* --- ナビ：横並び --- */
    html body .menuh .menu-b ul,
    html body .menuh .menu-a ul {
        display: flex !important;
        flex-wrap: wrap !important;
        flex-direction: row !important;
        list-style: none !important;
        margin: 0 !important;
        padding: 4px 6px !important;
    }
    html body .menuh .menu-b ul li,
    html body .menuh .menu-a ul li {
        flex: 0 0 auto !important;
        padding: 2px 5px !important;
    }
    html body .menuh .menu-b ul li a,
    html body .menuh .menu-a ul li a {
        font-size: 13px;
        white-space: nowrap;
    }

    /* --- コンテンツエリア lhn/lhm フロー化 --- */
    html body #area-main .lhn,
    html body #area-main .lhm,
    html body #area-billboard .lhn,
    html body #area-billboard .lhm,
    html body #area-contents .lhn,
    html body #area-contents .lhm,
    html body #area-footer .lhn,
    html body #area-footer .lhm {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        overflow: visible !important;
    }
    html body #area-main .column,
    html body #area-billboard .column,
    html body #area-contents .column,
    html body #area-footer .column {
        position: static !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        left: auto !important;
        top: auto !important;
        float: none !important;
        overflow: hidden;
    }

    /* --- 画像流動化 --- */
    html body #area-main img,
    html body #area-billboard img,
    html body #area-contents img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        display: block;
    }
    html body #area-main span.img,
    html body #area-billboard span.img,
    html body #area-contents span.img {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden;
    }
    html body #area-main span.img img,
    html body #area-billboard span.img img,
    html body #area-contents span.img img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        display: block;
    }
    html body span[style*="width"][style*="height"] {
        width: 100% !important;
        height: auto !important;
    }

    /* --- 3カラムtable → 2列 --- */
    html body .col-3 table.table { display: block !important; width: 100% !important; }
    html body .col-3 table.table tbody { display: flex !important; flex-wrap: wrap; width: 100% !important; }
    html body .col-3 table.table tr { display: contents !important; }
    html body .col-3 table.table td { display: block !important; width: 50% !important; padding: 4px; }
    html body .col-3 table.table td img { width: 100% !important; height: auto !important; }

    /* --- 余白 --- */
    html body #area-main .lhm,
    html body #area-main .lhn,
    html body #area-contents .lhm,
    html body #area-contents .lhn {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* ============================================================
       company.html 固有スタイル
       tdのwidthは元HTMLのインラインstyleで制御済みのため触らない
       テーブル全体をSPで100%に広げるだけ
       ============================================================ */

    /* 会社概要テーブル・沿革テーブル：SP幅を100%に */
    #tbl-profile,
    #tbl-history {
        width: 100% !important;
    }
}

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

    /* 3カラム→縦積み */
    html body .col-3 table.table td { width: 100% !important; }

    /* 2カラム→縦積み */
    html body .col-2 table.table { display: block !important; width: 100% !important; }
    html body .col-2 table.table tbody { display: flex !important; flex-direction: column; width: 100% !important; }
    html body .col-2 table.table tr { display: contents !important; }
    html body .col-2 table.table td { display: block !important; width: 100% !important; padding: 8px; }

    html body span.img.left,
    html body span.img.right { float: none !important; }

    html body #area-side-a,
    html body #area-side-b {
        width: 100% !important;
        float: none !important;
        clear: both;
    }

    input[type="text"], input[type="email"], input[type="tel"],
    textarea, select { width: 100% !important; max-width: 100%; }

    /* フッターaml/amrを強制0（右ずれの原因） */
    html body #area-footer .aml,
    html body #area-footer .amr {
        width: 0 !important;
        min-width: 0 !important;
        display: none !important;
    }

    html body #area-footer .amc {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html body #area-footer .menuh .menu-a ul {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        padding: 4px 6px !important;
        gap: 0;
        justify-content: flex-start !important;
        width: 100% !important;
    }
    html body #area-footer .menuh .menu-a ul li {
        flex: 0 0 auto !important;
        padding: 2px 6px !important;
    }
    html body #area-footer .menuh .menu-a ul li a,
    html body #area-footer .menuh .menu-a ul li span {
        display: inline !important;
        padding: 0 !important;
        border-bottom: none !important;
        font-size: 12px;
    }

    html body #area-main .lhm,
    html body #area-main .lhn,
    html body #area-contents .lhm,
    html body #area-contents .lhn {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    body { font-size: 14px; }
}

/* ============================================================
   dcs-search：自前Google検索フォーム（company.html試験導入）
   ============================================================ */

/* PC・SP共通ベース */
.dcs-search {
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: 0;
}

.dcs-search .dcs-search-logo {
    flex: 0 0 auto;
    padding: 0 8px 0 0;
    display: flex;
    align-items: center;
}

.dcs-search .dcs-search-logo svg {
    width: 80px;
    height: 28px;
    display: block;
    overflow: visible;
}

.dcs-search input[type="text"] {
    flex: 0 0 240px;
    min-width: 0;
    padding: 5px 8px;
    font-size: 13px;
    border: 1px solid #ccc;
    outline: none;
    background: #fff;
    box-sizing: border-box;
    height: 30px;
    line-height: normal;
}

.dcs-search button {
    flex: 0 0 auto;
    padding: 0 14px;
    font-size: 13px;
    background: #f8f8f8;
    color: #333;
    border: 1px solid #ccc;
    cursor: pointer;
    white-space: nowrap;
    height: 30px;
    line-height: 30px;
    box-sizing: border-box;
    margin-left: 4px;
}

.dcs-search button:hover {
    background: #e8e8e8;
}

/* SP幅での調整 */
@media screen and (max-width: 960px) {
    .dcs-search {
        width: 100%;
        padding: 4px 12px;
        box-sizing: border-box;
    }

    .dcs-search input[type="text"] {
        flex: 1 1 auto;
        height: 32px;
    }

    .dcs-search button {
        height: 32px;
        line-height: 32px;
    }
}


/* ============================================================
   dcs-header-row：ヘッダー横並びラッパー（company.html）
   ============================================================ */
.dcs-header-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    width: 100%;
    box-sizing: border-box;
}

.dcs-logo {
    flex: 0 0 auto;
    margin-right: auto;
}

.dcs-logo img {
    width: auto !important;
    height: auto !important;
    display: block;
}

.dcs-fb {
    flex: 0 0 auto;
}

.dcs-fb img {
    width: auto !important;
    height: auto !important;
    max-width: 130px;
    display: block;
}

/* SP幅では縦並び */
@media screen and (max-width: 960px) {
    .dcs-header-row {
        flex-direction: column;
        align-items: center;
        justify-content: center !important;
        gap: 6px;
        padding: 10px 12px;
    }

    .dcs-logo {
        margin-right: 0;
        display: flex;
        justify-content: center;
        width: 100%;
    }

    .dcs-logo {
        margin-right: 0;
    }


    .dcs-fb {
        align-self: flex-start;
    }

    .dcs-header-row .dcs-search {
        width: 100%;
    }
}

/* ロゴのセンター（SP幅） */
@media screen and (max-width: 960px) {
    .dcs-header-row {
        align-items: center !important;
        text-align: center;
    }

    .dcs-logo {
        margin-right: 0 !important;
        display: flex;
        justify-content: center;
    }
}

/* index.html スライドはみ出し防止 */
#bk1883 {
    overflow: hidden !important;
}

#bk1883 .lhm,
#bk1883 .column {
    overflow: hidden !important;
}

/* index.html スライドショー：はみ出し防止のみ（アニメーション維持） */
@media screen and (max-width: 960px) {
    /* はみ出し防止：コンテナをoverflow:hiddenで包む */
    #bk1883,
    #bk1883 .col-1,
    #bk1883 .simple,
    #bk1883 .lhm,
    #bk1883 .column {
        overflow: hidden !important;
        max-width: 100% !important;
    }

    /* shift03：JSが設定するheight:736pxをSP幅に合わせて縮小 */
    /* 736px / 1920px × 100vw ≒ 38.3vw */
    .shift03 {
        max-width: 100% !important;
        overflow: hidden !important;
        height: 38vw !important;
    }

    /* boatの幅はJSに任せ、親でclipする */
}

/* ============================================================
   index.html 固有修正
   ============================================================ */

/* ロゴのセンター（SP幅） */
@media screen and (max-width: 960px) {

    /* 下線の除去 */
    .dcs-header-row a {
        border-bottom: none !important;
        text-decoration: none !important;
    }
}

/* index.html ヘッダー：columnをSP幅でフロー化してセンター有効化 */
@media screen and (max-width: 960px) {
    .dcs-header-block .column {
        position: static !important;
        width: 100% !important;
        left: auto !important;
        top: auto !important;
    }

    .dcs-header-block .lhn {
        height: auto !important;
        overflow: visible !important;
    }
}


@media screen and (min-width: 961px) {
    
@media screen and (max-width: 960px) {
    

    #tbl-top3 tbody {
        display: table-row-group !important;
        width: auto !important;
        flex-wrap: unset !important;
    }
    #tbl-top3 tr {
        display: table-row !important;
    }
    #tbl-top3 td {
        display: table-cell !important;
        width: auto !important;
    }
    #tbl-top3 


    #tbl-top3 td.cmc.set-1 

/* フッター：SP幅でセンター揃え */
@media screen and (max-width: 960px) {
    /* IDセレクタで確実にセンター */
    #footer-col {
        position: static !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        margin: 0 auto !important;
    }

    html body #area-footer .lhm,
    html body #area-footer .lhn {
        height: auto !important;
        overflow: visible !important;
    }

    html body #area-footer .menuh .menu-a ul {
        justify-content: flex-start !important;
    }
}

/* supportform_fixed.php フォームのずれ補正 */
#bk2652 .lhm {
    height: auto !important;
    overflow: visible !important;
}
#bk2652 .column {
    position: static !important;
    width: 100% !important;
    left: auto !important;
}