/*-------------------------------------------
  ルート変数定義（ここで一元管理）
-------------------------------------------*/
:root {
    /* コンテンツの最大幅 */
    --content-max-width: 800px;
    /* 内側の余白（左右） */
    --content-gutter: 1rem;
    /* タブ周りの余白 */
    --tab-padding-y: 0.75rem;
    --tab-padding-x: 1.5rem;
    /* モバイル判定ブレークポイント */
    --breakpoint-mobile: 600px;
    /* 配色 */
    --color-text: #333;
    --color-primary: #d83c3c;
    --color-border: #eee;
    --color-tag-bg: #f5f5f5;
    --color-note-bg: #007bff;
}

/*-------------------------------------------
  全体レイアウト
-------------------------------------------*/
.job-tabs {
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: 0 var(--content-gutter);
    font-family: sans-serif;
    color: var(--color-text);
}

/*-------------------------------------------
  タブ
-------------------------------------------*/
.tab-list {
    display: flex;
    border-bottom: 2px solid var(--color-border);
    margin: 0 calc(-1 * var(--content-gutter));
    padding: 0;
    list-style: none;
    overflow-x: auto;
}

.tab-item {
    flex: none;
    padding: var(--tab-padding-y) var(--tab-padding-x);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color .2s, border-color .2s;
    white-space: nowrap;
}

    .tab-item.active {
        color: var(--color-primary);
        border-color: var(--color-primary);
    }

/*-------------------------------------------
  パネル（中身）
-------------------------------------------*/
.tab-panel {
    display: none;
    padding: 1.5rem 0;
}

    .tab-panel.active {
        display: block;
    }

/*-------------------------------------------
  定義リスト
-------------------------------------------*/
.job-details dt {
    font-weight: bold;
    margin-top: 1rem;
}

.job-details dd {
    margin: 0.5rem 0 1rem 1rem;
    line-height: 1.5;
}

    .job-details dd small {
        color: #666;
    }

/*-------------------------------------------
  タグ
-------------------------------------------*/
.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0;
    margin: 0;
    list-style: none;
}

    .tags li {
        padding: 0.3rem 0.6rem;
        font-size: 0.875rem;
        background: var(--color-tag-bg);
        border-radius: 4px;
    }

/*-------------------------------------------
  特徴セクション
-------------------------------------------*/
.feature-tags {
    margin-top: 2rem;
    border-top: 1px solid var(--color-border);
    padding-top: 1rem;
}
/*-------------------------------------------
  特徴セクション
-------------------------------------------*/
.p-1 {
    text-align: center;
}
/*-------------------------------------------
  Additional Info Wrapper
-------------------------------------------*/
.additional-info {
    max-width: var(--content-max-width);
    margin: 2rem auto 0;
    padding: 2rem var(--content-gutter);
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-sizing: border-box;
    line-height: 1.6;
}

    .additional-info section {
        margin-bottom: 2rem;
    }

    .additional-info h3 {
        position: relative;
        margin-bottom: 1rem;
        font-size: 1.25rem;
        color: #111;
    }

        .additional-info h3::after {
            content: "";
            display: block;
            width: 2.5rem;
            height: 3px;
            background: var(--color-primary);
            margin-top: 0.25rem;
        }

    .additional-info ul {
        list-style: disc inside;
        margin-left: 1rem;
    }

        .additional-info ul li {
            margin-bottom: 0.75rem;
        }

/*-------------------------------------------
  Profile & PR
-------------------------------------------*/
.profile-requirements ul,
.pr-section ul {
    list-style: none;
    padding: 0;
}

    .profile-requirements ul li,
    .pr-section ul li {
        margin-bottom: 1.5rem;
    }

.profile-requirements strong,
.pr-section strong {
    color: var(--color-primary);
}

/*-------------------------------------------
  Staff Photo
-------------------------------------------*/
.staff-photo {
    text-align: center;
    margin: 2rem 0;
}

    .staff-photo img {
        max-width: 100%;
        height: auto;
        border-radius: 4px;
    }

/*-------------------------------------------
  Company Vision & Unique Points
-------------------------------------------*/
.company-vision p {
    margin-top: 0.5rem;
}

.unique-points .subsection {
    margin-bottom: 1.5rem;
}

.unique-points h4 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    color: #222;
}

/*-------------------------------------------
  Application Flow
-------------------------------------------*/
.application-flow ul {
    list-style: none;
    padding: 0;
    margin-left: 0;
}

    .application-flow ul li {
        margin-bottom: 0.75rem;
    }

        .application-flow ul li small {
            display: block;
            margin-top: 0.25rem;
            color: #666;
            font-size: 0.875rem;
        }

/*-------------------------------------------
  Action Buttons
-------------------------------------------*/
.action-buttons {
    /* display: flex;
    flex-wrap: wrap;
    gap: 1rem;*/
    margin-top: 2rem;
    align-items: center;
}

    .action-buttons button {
        font-size: 1rem;
        padding: 0.6rem 1.2rem;
        border-radius: 4px;
        cursor: pointer;
        transition: background-color .2s, color .2s;
    }

.btn-keep {
    background: #fff;
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
}

.btn-apply-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.btn-apply {
    background: var(--color-primary);
    color: #fff;
    border: none;
}

.btn-apply-wrapper .question-note {
    position: absolute;
    bottom: -1.5rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-note-bg);
    color: #fff;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    border-radius: 2px;
    white-space: nowrap;
}

.btn-visit {
    background: transparent;
    color: #666;
    border: none;
    text-decoration: underline;
}

/*-------------------------------------------
  モバイル（スマホ）対応
-------------------------------------------*/
    @media (max-width: var(--breakpoint-mobile)) {
        .job-tabs {
            padding: 0 0.5rem;
        }

        .tab-list {
            margin: 0 calc(-0.5rem);
        }

        .tab-item {
            padding: 0.5rem 1rem;
            font-size: 0.9rem;
        }

        .job-details dt {
            font-size: 1rem;
        }

        .job-details dd {
            margin: 0.5rem 0 0.75rem 0.75rem;
        }

        .tags li {
            font-size: 0.75rem;
            padding: 0.25rem 0.5rem;
        }

        .additional-info {
            padding: 1rem 0.5rem;
            margin: 1.5rem auto 0;
        }
    }
    /*-------------------------------------------
  フォーム全体のカードレイアウト
-------------------------------------------*/
    .form-wrapper {
    background: #fff;
    padding: 2rem var(--content-gutter);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    max-width: var(--content-max-width);
    margin: 2rem auto;
}

.form-title {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 1.5rem;
    color: var(--color-primary);
    text-align: center;
}

/*-------------------------------------------
  各項目ブロック
-------------------------------------------*/
.form-group {
    margin-bottom: 1.2rem;
    display: flex;
    flex-direction: column;
}

    .form-group label {
        font-weight: bold;
        margin-bottom: 0.4rem;
    }

    .form-group .required {
        color: red;
        margin-left: 0.2rem;
    }

/*-------------------------------------------
  入力欄の統一スタイル
-------------------------------------------*/
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="url"],
input[type="file"],
select,
textarea {
    width: 100%;
    padding: 0.6rem;
    font-size: 1rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    box-sizing: border-box;
}

    input:focus,
    select:focus,
    textarea:focus {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 2px rgba(216,60,60,0.1);
    }

/*-------------------------------------------
  チェックボックスグループ
-------------------------------------------*/
.checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

    .checkbox-group label {
        font-weight: normal;
        display: flex;
        align-items: center;
    }

    .checkbox-group input {
        margin-right: 0.3rem;
    }

/*-------------------------------------------
  アクションボタンの余白
-------------------------------------------*/
.action-buttons {
    margin-top: 2rem;
    text-align: center;
}

/*-------------------------------------------
  レスポンシブ（スマホ対応）
-------------------------------------------*/
@media (max-width: var(--breakpoint-mobile)) {
    .form-wrapper {
        padding: 1rem;
        margin: 1rem;
    }

    .form-title {
        font-size: 1.25rem;
    }

    input, select, textarea {
        font-size: 0.95rem;
        padding: 0.5rem;
    }

    .form-group {
        margin-bottom: 1rem;
    }
}

/* STEP2: 確認画面用のラッパー */
.confirm-wrapper {
    background: #fafafa;
    border: 1px solid var(--color-border);
    padding: 2rem var(--content-gutter);
    margin-top: 1.5rem;
    border-radius: 8px;
    box-sizing: border-box;
    max-width: var(--content-max-width);
    margin-left: auto;
    margin-right: auto;
}

/* 確認リスト */
.confirm-dl dt {
    font-weight: bold;
    margin-top: 1rem;
}

.confirm-dl dd {
    margin: 0.25rem 0 1rem 1rem;
}