@charset "utf-8";

/* ==========================================================================
   適用ドメイン：www.dkt-s.com (店舗検索システムサイト用)
   共通マスターCSS（決定版）
   ========================================================================== */

/* ==========================================================================
   A. モダン・ベースリセット ＆ 共通コンテナ定義
   ========================================================================== */
*, *::before, *::after {
    box-sizing: border-box;
}
html, body, div, p, ul, li, h1, h2, h3, header, nav, main, footer, img {
    margin: 0;
    padding: 0;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: #444;
    background: #fff;
    -webkit-text-size-adjust: 100%;
}
a {
    color: #0066cc;
    text-decoration: none;
    transition: opacity 0.2s ease;
}
a:hover {
    text-decoration: underline;
    opacity: 0.85;
}
img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
    border: none !important; /* ➔ ロゴ等にブラウザ標準の黒枠が出るのを完全に防ぐ */
}

/* ➔ 【重要】中黒（・）漏れ防止：ヘッダー・フッター領域のリスト表示を確実に解除 */
#header ul, #header li, #footer ul, #footer li {
    list-style: none !important;
}

/* ➔ 自前描画 矢印アイコン（お問い合わせ等の先頭用） */
.icon-arrow::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-top: 2px solid #61b33a;
    border-right: 2px solid #61b33a;
    transform: rotate(45deg);
    margin-right: 6px;
    vertical-align: middle;
}
/* ➔ 採用情報の別窓アイコン */
.icon-window::before {
    content: "↗";
    display: inline-block;
    margin-right: 4px;
}

/* ➔ 共通レイアウト固定幅コンテナ（PC用：幅960px・左右余白20px確保） */
.hd-flex-header, #gNavi ul, #footerInner, .breadcrumbInner, #container {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 20px !important;
}

/* ==========================================================================
   B. 理想のロゴ部分（重複パーツ：安全のため残去せずキープ）
   ========================================================================== */
/* ➔ 修正：親ブロック自体に margin-bottom: 10px を指定し、緑のメニューバーを下に安全に押し下げる */
.hd-flex-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    box-sizing: border-box;
    height: 90px;
    padding-top: 18px !important;
    padding-bottom: 10px !important;
    margin-bottom: 10px; /* ➔ 追加：固定高ブロックの外側に余白を作り、メニューバーとの詰まり感を確実に解消！ */
}
.hd-logo-area a {
    display: block;
    line-height: 1;
}
.hd-meta-area {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    align-items: flex-end;
}
.hd-jpx-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: -4px;
}
.hd-jpx-row .tse-code {
    font-size: 12px;
    color: #333;
    margin: 0;
}

/* ➔ 修正：効かなかった内側マージンを綺麗にリセットし、改行防衛のみに洗練 */
.header-sub {
    white-space: nowrap; /* 要素全体の改行を徹底防衛 */
}
.lang-nav {
    display: flex;
    align-items: center; 
    gap: 15px;           
}
.lang-nav li a {
    color: #666;
    font-size: 12px;
    white-space: nowrap; 
}

/* ==========================================================================
   C. 理想のメニュー部分（グローバルナビゲーション：PC用スタイル）
   ========================================================================== */
#gNavi {
    background-color: #61b33a;
    width: 100%;
}
#gNavi ul {
    display: flex;
}
#gNavi li {
    flex: 1;
    border-right: 1px solid #81c261;
    text-align: center;
}
#gNavi li:first-child {
    border-left: 1px solid #81c261;
}
#gNavi li a {
    color: #fff;
    display: block;
    line-height: 50px;
    font-weight: bold;
    font-size: 14px;
}
#gNavi li a.active, #gNavi li a:hover {
    background: #339911;
    text-decoration: none;
}

/* ==========================================================================
   D. 理想のフッター部分（コンパクト版：PC用スタイル）
   ========================================================================== */
#footer { 
    background-color: #dddddd; 
    padding: 10px 0;          
    font-size: 12px; 
    line-height: 1.6;         
    margin-top: 30px;         
}
#footerInner { 
    position: relative; 
}
.totop { 
    text-align: right; 
    margin-bottom: 10px; 
}
.totop a { 
    display: inline-block; 
    font-size: 11px; 
    color: #666; 
    text-align: center; 
}
.totop img { 
    margin-bottom: 3px; 
}

.utility { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 6px 20px; 
    margin-bottom: 15px;      
    padding-bottom: 15px;     
    border-bottom: 1px solid #ccc; 
}
.utility li a { 
    color: #444; 
}

.bannerArea .title { 
    font-weight: bold; 
    margin-bottom: 6px; 
    color: #333; 
}
.bannerArea ul { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 10px; 
    margin-bottom: 15px;      
    margin-top: 5px; 
}
.bannerArea ul li a { 
    display: block; 
}
.bannerArea ul li img { 
    display: block; 
    border-radius: 3px; 
    box-shadow: 0 1px 3px rgba(0,0,0,0.1); 
}

#corporate { 
    max-width: 220px; 
    margin-bottom: 6px; 
}
#corporate img { 
    display: block; 
}
#copyright { 
    color: #666; 
    margin-bottom: 6px; 
    font-family: Arial, sans-serif; 
}     
#explanation { 
    color: #777; 
    line-height: 1.4; 
    text-align: left; 
}

/* ==========================================================================
   E. 📱 スマートフォン・タブレット用レスポンシブ共通ブロック (768px以下)
   ========================================================================== */
@media screen and (max-width: 768px) {
    /* ➔ ロゴ・メタエリアの縦並び中央寄せ化 */
    .hd-flex-header {
        flex-direction: column;
        align-items: center;
        gap: 15px;
        text-align: center;
        height: auto;
        padding: 15px 10px !important;
    }
    .hd-meta-area {
        align-items: center;
        gap: 10px;
    }
    .header-sub {
        width: 100%;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        border-top: 1px solid #eee;
        padding-top: 10px;
    }

    /* ➔ メニューバーの2カラム50%等倍折り返し化 */
    #gNavi ul {
        flex-wrap: wrap;
    }
    #gNavi li {
        min-width: 50%;
        border-bottom: 1px solid #81c261;
    }
    #gNavi li a {
        line-height: 45px;
        font-size: 13px;
    }

    /* --- 前回コード（中央一列に並んでしまい、画像レイアウトと異なっていた記述）
    .utility { 
        gap: 10px; 
    }
    #corporate { 
        max-width: 180px; 
        margin: 0 auto 6px;
    }
    #copyright, #explanation {
        text-align: center;
    }
    --- */

    /* ➔ 修正：添付画像（page.jpg）のスマホレイアウトを「2列グリッド」＆「左寄せ」で完全再現 */
    .utility { 
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important; /* リンクを画像通りの綺麗な2列配置に固定 */
        gap: 10px 15px !important; 
        padding-bottom: 15px !important;
        border-bottom: 1px solid #ccc !important;
    }
    .bannerArea ul {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important; /* グループバナーを画像通りの美しい2列配置に固定 */
        gap: 10px !important;
        margin-top: 8px !important;
    }
    .bannerArea ul li {
        width: 100% !important;
    }
    .bannerArea ul li img {
        width: 100% !important;
        height: auto !important;
    }
    #corporate { 
        max-width: 100% !important; 
        margin: 20px 0 6px !important;
        text-align: left !important; /* 画像通り：中央から「左寄せ」へ変更 */
    }
    #corporate img {
        display: inline-block !important;
    }
    #copyright {
        text-align: left !important; /* 画像通り：中央から「左寄せ」へ変更 */
        margin-bottom: 6px !important;
    }
    #explanation {
        text-align: left !important; /* 画像通り：中央から「左寄せ（両端揃え）」へ変更 */
        font-size: 11px !important;
        line-height: 1.5 !important;
    }
}