@charset "utf-8";
/* ========================================
   たいわゴルフクラブ - 採用情報ページ専用CSS
   ファイル名: recruit.css
   説明: 採用情報ページ（recruit.html）のスタイル定義
   ======================================== */

/* スムーズスクロール */
html {
    scroll-behavior: smooth;
}

/* ========================================
   パンくずリスト
   説明: ページ上部のナビゲーション表示
   ======================================== */

.breadcrumb {
    /* 背景: 白から薄いグレーへのグラデーション */
    background: linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%);
    
    /* 余白 */
    padding: 10px 0;
    
    /* 下部の装飾 */
    border-bottom: 2px solid #e0e0e0; /* 2pxの灰色ボーダー */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* 軽い影で立体感 */
}

/* パンくずリストのコンテナ */
.breadcrumb .container {
    max-width: 1360px; /* 最大幅 */
    margin: 0 auto; /* 中央揃え */
    padding: 0 20px; /* 左右に20pxの余白 */
}

/* パンくずリストの順序付きリスト */
.breadcrumb ol {
    list-style: none; /* リストマーカーを非表示 */
    display: flex; /* 横並び配置 */
    align-items: center; /* 垂直方向中央揃え */
    margin: 0;
    padding: 0;
    flex-wrap: wrap; /* 折り返しを許可（スマホ対応） */
}

/* パンくずリストの各アイテム */
.breadcrumb li {
    font-size: 13px;
    color: #555; /* グレー系のテキスト */
    font-weight: 500; /* やや太字 */
    display: flex;
    align-items: center;
}

/* パンくずリストの区切り文字（最後の要素以外） */
.breadcrumb li:not(:last-child)::after {
    content: '|'; /* 縦棒で区切る */
    margin: 0 15px; /* 左右に15pxの余白 */
    color: #666;
    font-weight: normal;
}

/* パンくずリストのリンク */
.breadcrumb a {
    color: #003d82; /* ブランドカラー（青） */
    text-decoration: none; /* 下線なし */
    transition: all 0.3s ease; /* スムーズな変化 */
    padding: 5px 10px; /* クリック領域を広げる */
    border-radius: 4px; /* 角を丸める */
}

/* パンくずリストのリンク - ホバー時 */
.breadcrumb a:hover {
    background-color: #003d82; /* 背景を青に */
    color: #ffffff; /* テキストを白に */
    transform: translateY(-1px); /* 1px上に移動 */
}

/* パンくずリストの現在ページ（最後の要素） */
.breadcrumb li:last-child {
    color: #333; /* 濃いグレー */
    font-weight: 600; /* 太字 */
}

/* ========================================
   ヒーロー画像エリア
   説明: ページタイトル画像とテキストのオーバーレイ
   ======================================== */

.hero-image {
    position: relative; /* 子要素の絶対配置の基準 */
    width: 100%;
    height: 400px; /* 高さ固定 */
    overflow: hidden; /* はみ出しを隠す */
}

/* ヒーロー画像 */
.hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画像を枠内に収める（トリミング） */
    object-position: center; /* 中央を基準にトリミング */
}

/* ヒーロー画像上のテキスト */
.hero-text {
    position: absolute; /* 画像の上に重ねる */
    top: 50%; /* 上から50% */
    left: 50%; /* 左から50% */
    transform: translate(-50%, -50%); /* 中央に配置 */
    text-align: center;
    color: #ffffff; /* 白いテキスト */
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); /* 黒い影で視認性向上 */
}

/* ヒーローエリアのメインタイトル */
.hero-title {
    font-family: 'Montserrat', sans-serif; /* 英字フォント */
    font-size: clamp(48px, 8vw, 72px); /* 可変サイズ: 最小48px、最大72px */
    font-weight: 800; /* 極太 */
    font-style: italic; /* 斜体 */
    margin: 0;
    letter-spacing: 0.05em; /* 文字間隔を広げる */
}

/* ヒーローエリアのサブタイトル */
.hero-subtitle {
    font-size: clamp(14px, 2.5vw, 18px); /* 可変サイズ: 最小14px、最大18px */
    margin: 8px 0 0;
    letter-spacing: 0.2em; /* 文字間隔を広げる */
    font-weight: 500;
}

/* ========================================
   採用情報ページメインエリア
   説明: コンテンツ全体の背景と余白設定
   ======================================== */

.recruit-page {
    padding: 80px 0px 40px; /* 上80px、下40pxの余白 */
    background: #ffffff; /* 白い背景 */
}

/* コンテンツラッパー */
.wrap {
    max-width: 1200px; /* 最大幅 */
    margin: auto; /* 中央揃え */
    padding: 40px 20px; /* 上下40px、左右20pxの余白 */
}

/* ========================================
   ページタイトルセクション
   説明: 採用情報ページのタイトル表示
   ======================================== */

.recruit-title-section {
    margin-bottom: 30px; /* 下に30pxの余白 */
}

.page-title {
    font-size: clamp(24px, 3vw, 28px); /* 可変サイズ: 最小24px、最大28px */
    font-weight: 700; /* 太字 */
    color: #333; /* 濃いグレー */
    margin: 0;
    padding-bottom: 10px; /* 下に10pxの内側余白 */
    border-bottom: 2px solid #e0e0e0; /* 下に薄いグレーの線 */
}

/* ========================================
   メッセージセクション
   説明: 採用メッセージの表示
   ======================================== */

.recruit-message-section {
    margin-bottom: 60px; /* 下に60pxの余白 */
    text-align: center; /* 中央揃え */
}

.recruit-message {
    font-size: clamp(15px, 1.8vw, 18px); /* 可変サイズ: 最小15px、最大18px */
    color: #333; /* 濃いグレー */
    line-height: 1.8; /* 行間を広く */
    margin: 0;
    font-weight: 500; /* 標準の太さ */
}

/* ========================================
   求人セクション
   説明: 正社員・アルバイトの求人情報テーブル
   ======================================== */

.job-section {
    margin-bottom: 30px; /* 下に80pxの余白 */
    margin-top: 80px; /* 上に80pxの余白を追加 */
}

.job-section:first-of-type {
    margin-top: 0; /* 最初の求人セクション（正社員）は上余白なし */
}

.job-title {
    font-size: clamp(22px, 2.8vw, 26px); /* 可変サイズ: 最小22px、最大26px */
    font-weight: 700; /* 太字 */
    color: #333; /* 濃いグレー */
    margin: 0 0 30px; /* 下に30pxの余白 */
    padding-bottom: 10px; /* 下に10pxの内側余白 */
    border-bottom: 2px solid #e0e0e0; /* 下に薄いグレーの線 */
}

/* 求人情報テーブル */
.job-table {
    width: 100%; /* 幅100% */
    border-collapse: collapse; /* セル間の隙間をなくす */
    background: #ffffff; /* 白い背景 */
    border: 1px solid #d0d0d0; /* 外枠の線 */
}

.job-table th,
.job-table td {
    padding: 20px; /* 上下左右20pxの内側余白 */
    text-align: left; /* 左揃え */
    vertical-align: top; /* 上揃え */
    border: 1px solid #d0d0d0; /* セルの枠線 */
}

/* テーブルヘッダー（左列） */
.job-table th {
    background: #f5f5f5; /* 薄いグレーの背景 */
    font-weight: 700; /* 太字 */
    color: #333; /* 濃いグレー */
    width: 180px; /* 幅を固定 */
    font-size: clamp(14px, 1.6vw, 16px); /* 可変サイズ */
}

/* テーブルデータ（右列） */
.job-table td {
    color: #333; /* 濃いグレー */
    line-height: 1.8; /* 行間を広く */
    font-size: clamp(14px, 1.6vw, 16px); /* 可変サイズ */
}

/* テーブル内の段落 */
.job-table td p {
    margin: 0 0 12px; /* 下に12pxの余白 */
}

.job-table td p:last-child {
    margin-bottom: 0; /* 最後の段落は下余白なし */
}

/* テーブル内のリスト */
.job-table td ul {
    margin: 8px 0; /* 上下に8pxの余白 */
    padding-left: 20px; /* 左に20pxの余白 */
    list-style: disc; /* 黒丸のリストマーカー */
}

.job-table td ul li {
    margin-bottom: 6px; /* 下に6pxの余白 */
}

.job-table td ul li:last-child {
    margin-bottom: 0; /* 最後のアイテムは下余白なし */
}

/* サブセクションタイトル */
.job-subsection-title {
    font-weight: 700; /* 太字 */
    color: #333; /* 濃いグレー */
    margin: 15px 0 8px !important; /* 上15px、下8pxの余白 */
}

/* ハイライトテキスト */
.highlight-text {
    font-weight: 700; /* 太字 */
    color: #003d82; /* ブランドカラー（青） */
    margin: 15px 0 8px !important; /* 上15px、下8pxの余白 */
}

/* ========================================
   応募連絡先セクション
   説明: 電話番号での応募案内
   ======================================== */

.contact-section {
    margin-top: 60px; /* 上に60pxの余白 */
    margin-bottom: 60px; /* 下に60pxの余白 */
}

.contact-box {
    border: 2px solid #003d82; /* 青い枠線 */
    padding: 25px 40px; /* 上下25px、左右40pxの内側余白（30px→25pxに変更） */
    text-align: center; /* 中央揃え */
    background: #ffffff; /* 白い背景 */
    border-radius: 8px; /* 角を丸める */
    max-width: 600px; /* PC表示時の最大幅を600pxに制限 */
    margin-left: auto; /* 左右中央揃え */
    margin-right: auto; /* 左右中央揃え */
}

.contact-text {
    font-size: clamp(15px, 1.8vw, 17px); /* 可変サイズ */
    color: #333; /* 濃いグレー */
    margin: 0 0 10px; /* 下に10pxの余白（15px→10pxに変更） */
    line-height: 1.6; /* 行間（1.8→1.6に変更） */
}

.contact-tel {
    font-size: clamp(18px, 2.2vw, 20px); /* 可変サイズ */
    color: #003d82; /* ブランドカラー（青） */
    font-weight: 700; /* 太字 */
    margin: 0;
    letter-spacing: 0.05em; /* 文字間隔 */
}

.contact-tel a {
    color: #003d82; /* ブランドカラー（青） */
    text-decoration: none; /* 下線なし */
    transition: all 0.3s ease; /* スムーズな変化 */
}

.contact-tel a:hover {
    color: #0051a8; /* 明るい青に */
}

/* スマートフォンでのみタップ可能な見た目にする */
@media (max-width: 768px) {
    .contact-tel a {
        display: inline-block; /* インラインブロック */
        padding: 8px 16px; /* タップ領域を広げる */
        background: #003d82; /* 青い背景 */
        color: #ffffff; /* 白いテキスト */
        border-radius: 6px; /* 角を丸める */
        text-decoration: none; /* 下線なし */
    }
    
    .contact-tel a:active {
        background: #0051a8; /* タップ時に明るい青 */
    }
}

/* ========================================
   ページトップへボタン
   説明: 画面右下に固定表示されるトップへ戻るボタン
   ======================================== */

#page-top {
    position: fixed; /* 固定配置 */
    right: 20px; /* 右から20px */
    bottom: 20px; /* 下から20px */
    z-index: 100; /* 他の要素より前面に */
}

#page-top a {
    display: block; /* ブロック要素 */
    background: #003d82; /* ブランドカラー（青） */
    color: #ffffff; /* 白いテキスト */
    text-decoration: none; /* 下線なし */
    padding: 12px 20px; /* 上下12px、左右20pxの余白 */
    border-radius: 50px; /* 角を大きく丸める */
    font-size: 14px; /* フォントサイズ */
    font-weight: 600; /* やや太字 */
    text-align: center; /* 中央揃え */
    box-shadow: 0 4px 12px rgba(0, 61, 130, 0.3); /* 影 */
    transition: all 0.3s ease; /* スムーズな変化 */
}

#page-top a:hover {
    background: #0051a8; /* 明るい青に */
    transform: translateY(-3px); /* 上に3px移動 */
    box-shadow: 0 6px 16px rgba(0, 61, 130, 0.4); /* 影を強く */
}

#page-top a span {
    display: block; /* ブロック要素 */
}

/* ========================================
   レスポンシブデザイン
   説明: 画面サイズに応じたスタイル調整
   ======================================== */

/* タブレット以下（768px以下） */
@media (max-width: 768px) {
    /* ヒーロー画像 */
    .hero-image {
        height: 250px; /* 高さを小さく */
    }
    
    /* コンテンツラッパー */
    .wrap {
        padding-left: 15px; /* 左余白を小さく */
        padding-right: 15px; /* 右余白を小さく */
    }
    
    /* 採用情報ページメイン */
    .recruit-page {
        padding: 0; /* 上下の余白をなくす */
    }

    /* テーブルを縦並びに変更 */
    .job-table {
        border: none; /* テーブル外枠を削除 */
    }

    .job-table th,
    .job-table td {
        display: block; /* ブロック要素化 */
        width: 100%; /* 幅100% */
        padding: 15px; /* 余白を調整 */
        border: none; /* すべての枠線を削除 */
    }

    .job-table th {
        background: #003d82; /* 青い背景 */
        color: #ffffff; /* 白いテキスト */
        font-weight: 700; /* 太字 */
    }

    .job-table td {
        background: #ffffff; /* 白い背景 */
        border-bottom: 1px solid #e0e0e0; /* 下に薄い線 */
    }

    .job-table tr {
        display: block; /* ブロック要素化 */
        margin-bottom: 20px; /* 下に20pxの余白 */
        border: 1px solid #d0d0d0; /* カード全体の枠線 */
        border-radius: 8px; /* 角を丸める */
        overflow: hidden; /* 角丸を適用 */
    }

    .job-table tr:last-child {
        margin-bottom: 0; /* 最後のカードは下余白なし */
    }

    .job-table tr td:last-child {
        border-bottom: none; /* カード内の最後のtdは下線なし */
    }

    /* 応募連絡先ボックス */
    .contact-box {
        padding: 20px 25px; /* 余白を調整 */
        max-width: 100%; /* スマホでは幅制限を解除 */
    }

    /* ページトップへボタン */
    #page-top {
        right: 15px; /* 右から15px */
        bottom: 15px; /* 下から15px */
    }

    #page-top a {
        padding: 10px 16px; /* 余白を小さく */
        font-size: 13px; /* フォントサイズを小さく */
    }
}

/* スマートフォン（480px以下） */
@media (max-width: 480px) {
    /* ヒーロー画像 */
    .hero-image {
        height: 200px; /* 高さをさらに小さく */
    }

    /* 応募連絡先ボックス */
    .contact-box {
        padding: 15px 20px; /* 余白をさらに調整 */
    }
}