@charset "utf-8";
/* CSS Document */

/* ------------------------------- */
/* Recruit */
/* ------------------------------- */

/* --- セクション全体のコンテナ --- */
        .job-description-section {
            max-width: 980px;
            margin: 30px auto;
            padding: 20px;
            background-color: #fff;
        }

        /* --- 「募集要項」と「おしごと用語集」のヘッダー --- */
        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 2px solid #00a0c6; /* dodaのアクセントカラー風 */
            padding-bottom: 10px;
            margin-bottom: 20px;
        }

        .section-header h2 {
            font-size: 24px;
            font-weight: bold;
            margin: 0;
            color: #333;
        }

        /* --- 説明リスト (dl) --- */
        .description-list {
            border: 1px solid #ddd;
            border-bottom: none; /* 最後のdd/dtで閉じる */
            margin: 0;
            padding: 0;
            overflow: hidden; /* floatの回り込み解除 (clearfix) */
        }

        /* --- リストの見出し (dt) と 内容 (dd) --- */
        .description-list dt,
        .description-list dd {
            margin: 0;
            padding: 20px;
            box-sizing: border-box; /* Padding/borderを幅に含める */
            float: left;
            border-bottom: 1px solid #ddd;
            min-height: 60px; /* 内容が少なくても高さを担保 */
        }

        /* --- リストの見出し (dt) --- */
        .description-list dt {
            width: 25%; /* 左側の幅 */
            font-weight: bold;
            background-color: #f7f7f7;
            clear: both; /* 常に新しい行の左側に配置 */
        }

        /* --- リストの内容 (dd) --- */
        .description-list dd {
            width: 75%; /* 右側の幅 */
            border-left: 1px solid #ddd;
        }

        /* --- レスポンシブ対応 (768px以下のスクリーン) --- */
        @media (max-width: 768px) {
            .job-description-section {
                margin: 10px;
                padding: 15px;
            }

            .section-header h2 {
                font-size: 20px;
            }

            .terminology-link {
                font-size: 12px;
                padding: 4px 8px;
            }
            
            .description-list dt,
            .description-list dd {
                width: 100%; /* フル幅 */
                float: none; /* floatを解除 */
                border-left: none; /* スマホでは縦線の必要なし */
            }

            .description-list dt {
                border-bottom: none; /* dtとddの間の線を消す */
                padding-bottom: 5px;
                font-size: 16px;
                background-color: #fff; /* 背景色をリセット */
            }
            
            .description-list dd {
                padding-top: 5px;
                border-bottom: 1px solid #ddd; /* ddの下に線を引く */
            }
        }


        /* --- dd内のコンテンツ書式 --- */
        .description-list dd h3,
        .description-list dd h4 {
            font-size: 16px;
            font-weight: bold;
            margin-top: 15px;
            margin-bottom: 10px;
            padding-bottom: 5px;
        }
        .description-list dd h3:first-child,
        .description-list dd h4:first-child {
            margin-top: 0;
        }

        /* 仕事内容の見出し */
        .job-title {
            font-size: 18px;
            color: #007bff;
            border-bottom: 1px solid #eee;
        }

        /* 【】の箇所 */
        .company-features {
            font-size: 14px;
            font-weight: bold;
            background-color: #f9f9f9;
            padding: 10px;
            border-radius: 4px;
        }

        /* ■の見出し */
        .sub-heading {
            font-size: 15px;
            border-bottom: 1px solid #eee;
        }
        
        .sub-heading span {
            font-weight: normal;
            font-size: 14px;
            color: #555;
            margin-left: 10px;
        }

        /* ＼...／ の囲み */
        .callout {
            background: #fffbef;
            border: 1px solid #f0e68c;
            padding: 15px;
            margin: 15px 0;
            border-radius: 4px;
        }
        .callout .callout-title {
            font-weight: bold;
            font-size: 16px;
            color: #c09853;
            margin-top: 0;
        }

        /* 箇条書き (ul/li) */
        .description-list dd ul {
            list-style-type: none;
            padding-left: 0;
            margin-top: 10px;
        }

        .description-list dd ul li {
            position: relative;
            padding-left: 1.5em; /* '■' のスペース */
            margin-bottom: 10px;
        }

        /* '■' や '・' のスタイル (元テキストに合わせて'■') */
        .description-list dd ul li::before {
            content: '■'; 
            position: absolute;
            left: 0;
            top: 0;
            color: #007bff; /* キーカラー */
            font-size: 12px;
        }

        /* 段落 */
        .description-list dd p {
            margin: 0 0 10px 0;
        }
        .description-list dd p:last-child {
            margin-bottom: 0;
        }

        /* インデントされた注釈 (※, └, （) */
        .note {
            font-size: 13px;
            color: #555;
            margin-top: 10px;
            padding-left: 1em; /* 少しインデント */
        }
        
        /* 「変更の範囲」 */
        .scope-note {
            font-size: 13px;
            color: #555;
            border-top: 1px dashed #ccc;
            padding-top: 10px;
            margin-top: 15px;
        }

        /* 給与補足 */
        .salary-note {
            font-size: 13px;
            background-color: #f9f9f9;
            padding: 10px;
            border-radius: 4px;
            margin-top: 15px;
            color: #555;
        }