@charset "utf-8";
/* ==========================================================
   ▼ 全ページ共通
   ブレイクポイント
   このサイトは 744px の境目を使わない（運営者の指示 2026-10-17）
   SP : 360〜719px  @media (max-width: 719px)
        720px ＝ 余白 2px＋一覧 356px＋すき間 4px＋詳細 356px＋余白 2px（PC の最小）
   PC : 720〜1920px
   ヘッダーだけの境目：1280px（これより狭いと、メニューをメニューボタンで開閉する）
   ========================================================== */
/* グラデーションの色を、マウスを乗せたときなどに 0.3 秒かけて変えるための色の入れ物。
   背景のグラデーションそのものは動かせないので、端の色をこの入れ物に入れて動かす。
   使う部品は、background を「面（--fillFrom→--fillTo）」と「枠（--edgeFrom→--edgeMid→--edgeTo）」の2枚で描き、
   transition に var(--gradientTransition) を入れる（色は :root の --mainFrom などを入れる） */
@property --fillFrom{
    syntax: '<color>';
    inherits: false;
    initial-value: transparent;
}
@property --fillTo{
    syntax: '<color>';
    inherits: false;
    initial-value: transparent;
}
@property --edgeFrom{
    syntax: '<color>';
    inherits: false;
    initial-value: transparent;
}
@property --edgeMid{
    syntax: '<color>';
    inherits: false;
    initial-value: transparent;
}
@property --edgeTo{
    syntax: '<color>';
    inherits: false;
    initial-value: transparent;
}
:root{
    /* 色の設定（役割で命名）
       配色：ティール（濃い色）× マスカット × 光の金色、白ベース */
    --accent: #0e6b5c;              /* ティール：ボタン・リンク・ロゴ（白文字でコントラスト4.5:1以上） */
    --accentPressed: #0a5548;       /* 濃いティール：ボタンを押している間 */
    --accentSoft: #e8f4cf;          /* 薄いマスカット：選択中・強調の背景（上の文字は --accent） */
    --muscat: #b4d85a;              /* マスカット：線・飾り（文字には使わない） */
    --muscatSoft: #f1f8ec;          /* ごく薄いマスカット：フッターなど広い面の背景 */
    --shine: #f7b731;               /* 光の金色：新着など少しだけ目立たせる所 */
    --textOnShine: #4a3000;         /* 金色の上の文字 */
    --textMain: #1f2d2b;
    --textSub: #4f5b58;
    --textWeak: #6b7572;            /* 日付・補足（白背景でコントラスト4.5:1） */
    --textOnAccent: #ffffff;        /* 色付きボタンの上の文字 */
    --bgBase: #ffffff;              /* ページ全体・カードの背景 */
    --bgSoft: #f2f5f0;              /* タグ・表の見出しの背景 */
    --border: #d5dcd3;
    --borderStrong: #8f9a96;        /* 入力欄・選択肢の枠 */

    /* グラデーションの色（マウスを乗せたときなどに色を少しずつ変えるため、端の色を1色ずつ持つ） */
    --mainFrom: #0b7268;
    --mainTo: #11805a;
    --lineFrom: #0e6b5c;
    --lineMid: #b4d85a;
    --lineTo: #f7b731;
    --borderFrom: #a9d3c6;
    --borderTo: #d2e8a6;
    --softFrom: #e3f1cc;
    --softTo: #d6eee6;

    /* グラデーション */
    --gradientMain: linear-gradient(135deg, var(--mainFrom) 0%, var(--mainTo) 100%);                    /* ボタン・ロゴ（澄んだティール→エメラルド。どこでも白文字でコントラスト4.5:1以上） */
    --gradientLine: linear-gradient(90deg, var(--lineFrom) 0%, var(--lineMid) 65%, var(--lineTo) 100%); /* ヘッダー下の線（ティール→マスカット→金） */
    --gradientHero: linear-gradient(180deg, #e3f1cc 0%, #f1f8ec 55%, #ffffff 100%); /* 検索エリアの背景（薄いマスカット→白） */
    --gradientBorder: linear-gradient(135deg, var(--borderFrom) 0%, var(--borderTo) 100%);              /* ふだんの枠の線（淡いティール→淡いマスカット） */
    --gradientSoft: linear-gradient(135deg, var(--softFrom) 0%, var(--softTo) 100%);                    /* 薄い面：正社員ラベル・選択中（上の文字は --accent） */

    /* マウスを乗せたとき・選んだときの変化は、すべて 0.3 秒で動かす */
    --effectDuration: 0.3s;
    /* 枠がグラデーションの部品（--fillFrom などで色を持つもの）の変化 */
    --gradientTransition: --fillFrom 0.3s ease, --fillTo 0.3s ease, --edgeFrom 0.3s ease, --edgeMid 0.3s ease, --edgeTo 0.3s ease;
    --gradientGray: linear-gradient(135deg, #f2f5f0 0%, #e7ede4 100%);              /* ふつうのタグ */
    --gradientShine: linear-gradient(135deg, #f7b731 0%, #ffd66e 100%);             /* 新着ラベル（上の文字は --textOnShine） */
    --gradientDanger: linear-gradient(135deg, #b71c1c 0%, #cf3a24 100%);            /* 削除ボタン・必須ラベル（白文字でコントラスト4.5:1以上） */
    --gradientFavorite: linear-gradient(135deg, #e0496b 0%, #f7a14a 100%);          /* お気に入り済みのハート（コーラル→オレンジ） */

    /* アイコンの形。mask で切り抜いてグラデーションで塗るので、形だけで色は持たない */
    --iconHeartOutline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round' d='M12 20.5s-7.5-4.6-7.5-10.3A4.2 4.2 0 0 1 12 7.6a4.2 4.2 0 0 1 7.5 2.6c0 5.7-7.5 10.3-7.5 10.3z'/%3E%3C/svg%3E");
    --iconHeartFilled: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20.5s-7.5-4.6-7.5-10.3A4.2 4.2 0 0 1 12 7.6a4.2 4.2 0 0 1 7.5 2.6c0 5.7-7.5 10.3-7.5 10.3z'/%3E%3C/svg%3E");
    --iconPin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-6.5-6.2-6.5-11a6.5 6.5 0 0 1 13 0c0 4.8-6.5 11-6.5 11z'/%3E%3Ccircle cx='12' cy='10' r='2.4'/%3E%3C/svg%3E"); /* 勤務地 */
    --iconYen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8.5 6.8 12 12l3.5-5.2M12 12v5.5M9 12.8h6M9 15.4h6'/%3E%3C/svg%3E"); /* 給与 */
    --iconBriefcase: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='13' rx='2'/%3E%3Cpath d='M9 7V5.2A1.2 1.2 0 0 1 10.2 4h3.6A1.2 1.2 0 0 1 15 5.2V7M3 12.5h18'/%3E%3C/svg%3E"); /* 雇用形態 */
    --iconClock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3.2 2'/%3E%3C/svg%3E"); /* 勤務時間 */
    --iconCalendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2'/%3E%3Cpath d='M8 3v4M16 3v4M3.5 10h17'/%3E%3C/svg%3E"); /* 休日 */
    --iconGift: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='9.5' rx='1'/%3E%3Crect x='3' y='7.5' width='18' height='3.5' rx='1'/%3E%3Cpath d='M12 7.5v13M12 7.5C10.5 4 6.8 4 6.8 6.1S9.8 7.5 12 7.5zm0 0c1.5-3.5 5.2-3.5 5.2-1.4S14.2 7.5 12 7.5z'/%3E%3C/svg%3E"); /* 待遇 */
    --iconPerson: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.6'/%3E%3Cpath d='M4.8 20c.9-3.9 3.8-6 7.2-6s6.3 2.1 7.2 6'/%3E%3C/svg%3E"); /* 応募資格 */
    --iconDocument: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h7l4.5 4.5V21H7z'/%3E%3Cpath d='M14 3v4.5h4.5M10 12h5.5M10 15.5h5.5'/%3E%3C/svg%3E"); /* 仕事内容 */
    --iconTag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 12.2V4.5a1 1 0 0 1 1-1h7.7l8.3 8.3a1 1 0 0 1 0 1.4l-7.3 7.3a1 1 0 0 1-1.4 0z'/%3E%3Ccircle cx='8' cy='8' r='1.6'/%3E%3C/svg%3E"); /* 特徴 */
    --iconMail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3.5 7 8.5 6 8.5-6'/%3E%3C/svg%3E"); /* 応募方法 */
    --iconCheck: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12.3 2.8 2.7L16.2 9.5'/%3E%3C/svg%3E"); /* 選考 */
    --iconRise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3.5 17 6-6 4 4 7-7.5'/%3E%3Cpath d='M14.5 7.5h6v6'/%3E%3C/svg%3E"); /* 正社員登用 */
    --iconExternal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-8.5 8.5'/%3E%3Cpath d='M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E"); /* 別タブ */
    --iconRays: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M24 3v7M14.5 5.5l3 6M33.5 5.5l-3 6M6.5 11.5l5.5 3.5M41.5 11.5 36 15'/%3E%3C/svg%3E"); /* 見出しの上の光の線 */
    --iconSearch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3C/svg%3E"); /* 検索 */
    --iconHistory: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 12a8.5 8.5 0 1 0 2.5-6'/%3E%3Cpath d='M3.5 4.5V9H8'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E"); /* 履歴 */
    --iconHome: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 11 12 4l8.5 7'/%3E%3Cpath d='M5.5 9.5V20h4.5v-5.5h4V20h4.5V9.5'/%3E%3C/svg%3E"); /* ホーム */
    --iconBuilding: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20.5V5a1 1 0 0 1 1-1h9a1 1 0 0 1 1 1v15.5'/%3E%3Cpath d='M15 9h4a1 1 0 0 1 1 1v10.5M2.5 20.5h19M7.5 8h4M7.5 12h4M7.5 16h4'/%3E%3C/svg%3E"); /* 企業 */
    --iconArrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5.5 11.5 12 5l6.5 6.5'/%3E%3C/svg%3E"); /* 上へ */
    --iconClose: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E"); /* 閉じる */
    --iconBack: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E"); /* 戻る */
    --danger: #c62828;              /* エラー・削除・必須・新着 */
    --dangerBg: #fdecea;            /* エラーメッセージの背景 */
    --success: #2e7d32;
    --successBg: #e8f5e9;           /* 完了メッセージの背景 */
    --warnBg: #fdf1e6;              /* 注意書きの背景 */
    --adBg: #f7f7f7;                /* 広告枠 */
    --shadow: rgb(0 0 0 / 0.08);
    --shadowStrong: rgb(0 0 0 / 0.12);
    --overlay: rgb(0 0 0 / 0.4);     /* パネルの後ろを暗くする */

    /* フォントの設定 */
    --NotoSansJP: "Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic","Meiryo",sans-serif;

    /* 共通の寸法 */
    --headerHeight: 56px;
    --bottomNavHeight: 3.5rem;
    --radius: 0.75rem;
    /* 読みものの区切り。行間はそのままに、話題・項目の間で読み分ける */
    --readingSectionGap: 3rem;
    --readingItemGap: 0.75em;
}

/* ページ全体 */
html{
    font-size: 16px;
    scroll-padding-top: calc(var(--headerHeight) + 16px);
    scrollbar-gutter: stable;
    -webkit-text-size-adjust: 100%;
}
/* 画面いっぱいのパネルを開いている間は、後ろのページをスクロールさせない（スクロールバーを1本にする。top.js の updateScrollLock） */
html.isScrollLocked{
    overflow: hidden;
}
/* 共通リセット */
*,*::before,*::after{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    width: min(1920px, 100%);
    margin: 0 auto;
    background: var(--bgBase);
    color: var(--textMain);
    font-family: var(--NotoSansJP);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.6;
    overflow-x: clip;
}
ul,ol{
    list-style: none;
}
img,svg{
    display: block;
    max-width: 100%;
}
input,select,textarea,button{
    font: inherit;
    color: inherit;
}
/* hidden 属性の要素は、display を指定したクラスより優先して隠す（クラス側の display に負けないよう !important） */
[hidden]{
    display: none !important;
}
/* 見た目には出さない見出し（h1 など） */
.visuallyHidden{
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* リンク・ボタン：タップ後に hover / focus の見た目を残さない */
/* 下線は、ふだんは透明にしておき、マウスを乗せたら色を付ける（すっと出す） */
a{
    color: var(--accent);
    text-decoration-line: underline;
    text-decoration-color: transparent;
    transition: text-decoration-color var(--effectDuration) ease, color var(--effectDuration) ease, opacity var(--effectDuration) ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
@media (hover: hover){
    a:hover{
        text-decoration-color: currentColor;
    }
}
button{
    appearance: none;
    -webkit-appearance: none;
    border: none;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
summary:focus{
    outline: none;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible{
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* 開閉するメニュー・パネルは、ふわっと出して、ふわっと消す（0.3秒。閉じる動きは main.js の setPanelOpen）
   --fadeShift：出てくるときに動く向きと量（上から下に出るメニューは負、下から上に出るメニューは正） */
@keyframes fadeIn{
    from{
        opacity: 0;
        translate: 0 var(--fadeShift, 0);
    }
}
@keyframes fadeOut{
    to{
        opacity: 0;
        translate: 0 var(--fadeShift, 0);
    }
}
/* ページを開いたときは、ページ全体をふわっと（色の濃さだけを変える。動かすと画面に固定したパネルの位置がずれる） */
@keyframes pageFadeIn{
    from{
        opacity: 0;
    }
}
body{
    animation: pageFadeIn 0.3s ease;
}
/* ウィンドウやパネル・表示が切り替わる部分は、出てくるときにふわっと */
.historyPanel,
.savedSearchPanel,
.bottomNavSub,
.conditionPanel,
.faqAnswer,
.jobsDetailArea > *,
.jobList > *,
.contactReasonRow,
.deleteTargetJob,
.conversionRow,
.postPreview,
.postDone,
.photoPreview{
    animation: fadeIn 0.3s ease;
}
.historyPanel,
.savedSearchPanel{
    --fadeShift: -0.5rem;
}
.bottomNavSub{
    --fadeShift: 0.5rem;
}
.isFadingOut{
    animation: fadeOut 0.3s ease forwards;
    pointer-events: none;
}

/* 動きを減らす設定の利用者には、アニメーションを止める */
@media (prefers-reduced-motion: reduce){
    *,*::before,*::after{
        transition: none !important; /* 個別の transition より必ず優先させるため */
        animation: none !important;
    }
}

/* ---------- ボタン ---------- */
.btnPrimary,
.btnSecondary,
.btnDanger{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4em;
    padding: 0.7em 1.4em;
    border-radius: 0.5rem;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
    transition: opacity var(--effectDuration) ease;
}
.btnPrimary{
    background: var(--accent);
    background-image: var(--gradientMain);
    color: var(--textOnAccent);
}
.btnSecondary{
    color: var(--accent);
    border: 1px solid transparent;
    background: linear-gradient(var(--bgBase), var(--bgBase)) padding-box, var(--gradientMain) border-box;
}
.btnDanger{
    background: var(--danger);
    background-image: var(--gradientDanger);
    color: var(--textOnAccent);
}
@media (hover: hover){
    .btnPrimary:hover,
    .btnSecondary:hover,
    .btnDanger:hover{
        opacity: 0.8;
        text-decoration: none;
    }
}
.btnPrimary.isPressing{
    background: var(--accentPressed);
}
.btnSecondary.isPressing{
    background: linear-gradient(var(--accentSoft), var(--accentSoft)) padding-box, var(--gradientMain) border-box;
}
.btnDanger.isPressing{
    opacity: 0.8;
}
.btnPrimary:disabled,
.btnDanger:disabled{
    opacity: 0.5;
    cursor: not-allowed;
}

/* ---------- ヘッダー ----------
   PC（720px〜）：ロゴ｜求職者の方へ・企業の方へ・お役立ち記事（アイコン付き）｜お気に入り・履歴・求人掲載（無料）
   720〜1023px はメニューをアイコンの下に文字の縦並びに、お気に入り・履歴を文字なしのアイコンにして1行に収める（ヘッダーだけの境目 1024px）
   SP（〜719px）：丸いマーク＋検索バー。メニューは画面下の固定メニュー（.bottomNav） */
.siteHeader{
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--bgBase);
}
/* ヘッダー下のグラデーションの線 */
.siteHeader::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background: var(--gradientLine);
}
.siteHeaderInner{
    display: flex;
    align-items: center;
    gap: 1.25rem;
    height: var(--headerHeight);
    /* 下の 3px は、ヘッダー下のグラデーションの線（::after）が重なる分。ロゴなどは線より上の部分の上下中央に置く */
    padding: 0 1.5rem 3px;
}
@media (max-width: 1023.98px){
    .siteHeaderInner{
        gap: 0.75rem;
        padding: 0 1rem 3px;
    }
}
@media (max-width: 719px){
    .siteHeaderInner{
        gap: 0.6rem;
        padding: 0 0.75rem 3px;
    }
}
/* ロゴ：マーク（img/common/logoMark.svg）＋ 文字「シャイニー」（M PLUS Rounded 1c ExtraBold。head で「シャイニー」の5文字だけ読み込む）
   大きさは shiny-logo-kit の指定（ヘッダー高さ60px でマーク40px・文字31px）の比率で、高さ56px に合わせて小さくする。幅が狭いときは同じ比率でさらに小さくする */
.siteLogo{
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.38rem;
    color: var(--textMain);
    text-decoration: none;
}
/* 上下の位置：文字とマークの「見た目の中心」をヘッダーの上下中央にそろえる。
   マークは右上の星を除いた本体（丸と葉）が下寄りなので、高さの1割ほど上げる。
   文字はカタカナが文字の枠の中で下寄りなので、0.09文字ぶん上げる（どちらも位置だけ動かし、並びの幅は変えない） */
.siteLogoMark{
    display: block;
    flex-shrink: 0;
    width: auto;
    height: 37px;
    transform: translateY(-10%);
}
.siteLogoName{
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-size: 1.69rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.06em;
    white-space: nowrap;
    transform: translateY(-0.09em);
}
@media (max-width: 1023.98px){
    .siteLogoMark{
        height: 32px;
    }
    .siteLogoName{
        font-size: 1.44rem;
    }
}
@media (max-width: 719px){
    .siteLogoMark{
        height: 28px;
    }
    .siteLogoName{
        font-size: 1.28rem;
    }
}
/* ブランドの一言（ロゴの横）。メニューが窮屈にならない 1280px 以上だけ出す */
.siteTagline{
    display: none;
}
@media (min-width: 1280px){
    .siteTagline{
        display: block;
        flex-shrink: 0;
        margin-left: -0.5rem;
        padding-left: 0.75rem;
        border-left: 1px solid var(--border);
        color: var(--textSub);
        font-size: 0.81rem;
        line-height: 1.4;
        white-space: nowrap;
    }
}
/* SP の検索バー（PC では出さない） */
.headerSearch{
    display: none;
}
@media (max-width: 719px){
    .headerSearch{
        /* 幅は 13rem まで（狭い画面ではそれより縮む）。ロゴとのあいだを空けて右に寄せる */
        flex: 0 1 13rem;
        margin-left: auto;
        display: flex;
        align-items: center;
        gap: 0.5em;
        min-width: 0;
        justify-content: center;
        height: 2.25rem;
        padding: 0 0.8em;
        border: 1px solid transparent;
        border-radius: 2rem;
        background: linear-gradient(var(--bgBase), var(--bgBase)) padding-box, var(--gradientMain) border-box;
        color: var(--textSub);
        font-size: 0.88rem;
    }
}
@media (hover: hover){
    .headerSearch:hover{
        text-decoration: none;
    }
}
.headerSearchText{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
/* メインメニュー（PC） */
.globalNav{
    display: flex;
    align-items: center;
    height: 100%;
}
@media (max-width: 719px){
    .globalNav{
        display: none;
    }
}
.globalNavList{
    display: flex;
    align-items: stretch;
    gap: 0.25rem;
    height: 100%;
}
/* 「便利な機能」は、ヘッダーに入りきる 1440px 以上だけ出す */
.globalNavWide{
    display: none;
}
@media (min-width: 1440px){
    .globalNavWide{
        display: block;
    }
}
.globalNavList a{
    display: flex;
    align-items: center;
    gap: 0.35em;
    height: 100%;
    padding: 0 0.6em;
    color: var(--textMain);
    font-size: 0.94rem;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
    transition: color var(--effectDuration) ease, border-color var(--effectDuration) ease;
}
/* 720〜1023px は横幅が足りないので、SP の画面下のメニューと同じく、アイコンの下に文字を置く */
@media (max-width: 1023.98px){
    .globalNavList a{
        flex-direction: column;
        justify-content: center;
        gap: 0.2rem;
        padding: 0 0.5em;
        font-size: 0.75rem;
        line-height: 1.2;
    }
}
@media (hover: hover){
    .globalNavList a:hover{
        color: var(--accent);
        text-decoration: none;
    }
}
.globalNavList a[aria-current="page"]{
    color: var(--accent);
    border-bottom-color: var(--accent);
    font-weight: 700;
}
/* メニューのアイコン（SP の画面下のメニューと同じ。選んでいるとき・カーソルを乗せたときはグラデーション） */
.globalNavIcon{
    flex-shrink: 0;
    width: 1.15rem;
    height: 1.15rem;
    background: var(--textSub);
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
    transition: background-color var(--effectDuration) ease;
}
@media (max-width: 1023.98px){
    .globalNavIcon{
        width: 1.3rem;
        height: 1.3rem;
    }
}
.globalNavList a[aria-current="page"] .globalNavIcon{
    background: var(--gradientMain);
}
@media (hover: hover){
    .globalNavList a:hover .globalNavIcon{
        background: var(--gradientMain);
    }
}
/* ヘッダー右側（お気に入り・履歴・求人掲載（無料）） */
.headerActions{
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
@media (max-width: 1023.98px){
    .headerActions{
        gap: 0.25rem;
    }
}
@media (max-width: 719px){
    .headerActions{
        display: none;
    }
}
.headerAction{
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.35em;
    padding: 0.4em 0.6em;
    border-radius: 0.5rem;
    color: var(--textMain);
    font-size: 0.88rem;
    white-space: nowrap;
    background-color: transparent;
    transition: background-color var(--effectDuration) ease;
}
@media (hover: hover){
    .headerAction:hover{
        background-color: var(--bgSoft);
        text-decoration: none;
    }
}
.headerAction .favoriteIcon,
.headerAction .infoIcon{
    width: 1.25rem;
    height: 1.25rem;
}
@media (max-width: 1023.98px){
    .headerActionText{
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}
/* お気に入りの件数（丸いバッジ） */
.favoriteCount{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 0.3rem;
    border-radius: 1rem;
    background: var(--gradientFavorite);
    color: var(--textOnAccent);
    font-size: 0.69rem;
    font-weight: 700;
    line-height: 1;
}
@media (max-width: 1023.98px){
    .headerAction .favoriteCount{
        position: absolute;
        top: 0;
        right: 0;
    }
}
.headerPost{
    padding: 0.55em 1em;
    font-size: 0.88rem;
    white-space: nowrap;
}

/* ---------- 履歴のパネル（ヘッダーの「履歴」から開く） ----------
   画面の高さが足りないときは、パネルの中だけスクロールして画面内に収める */
.historyMenu{
    position: relative;
}
.historyPanel{
    position: absolute;
    top: calc(100% + 0.6rem);
    right: 0;
    z-index: 40;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    width: min(38rem, calc(100dvw - 2rem));
    max-height: calc(100dvh - var(--headerHeight) - 1.5rem);
    padding: 1.25rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: linear-gradient(var(--muscatSoft), var(--muscatSoft)) padding-box, var(--gradientBorder) border-box;
    box-shadow: 0 8px 24px var(--shadowStrong);
}
@media (max-width: 1023.98px){
    .historyPanel{
        grid-template-columns: minmax(0, 1fr);
        width: min(19rem, calc(100dvw - 2rem));
    }
}
.historyTitle{
    margin-bottom: 0.6rem;
    font-size: 0.94rem;
    font-weight: 700;
}
.historyTitle + .historyTitle,
.historyList + .historyTitle{
    margin-top: 1.25rem;
}
.historyList{
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.historyItem a{
    display: block;
    padding: 0.75em 0.9em;
    border-radius: 0.5rem;
    background: var(--bgBase);
    color: var(--textMain);
    font-size: 0.88rem;
    line-height: 1.5;
    transition: box-shadow var(--effectDuration) ease;
}
@media (hover: hover){
    .historyItem a:hover{
        text-decoration: none;
        box-shadow: 0 2px 8px var(--shadow);
    }
}
.historyItemTitle{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-weight: 700;
}
.historyItemLink{
    color: var(--accent);
}
.historyItem .jobCardInfo{
    margin-top: 0.3rem;
    font-size: 0.81rem;
}
.historyItemTime{
    display: block;
    margin-top: 0.3rem;
    color: var(--textWeak);
    font-size: 0.75rem;
}
.historyEmpty{
    color: var(--textSub);
    font-size: 0.88rem;
}
.historyMore{
    display: block;
    margin-top: 0.6rem;
    font-size: 0.81rem;
    text-align: right;
}

/* ---------- SP の画面下のメインメニュー ---------- */
.bottomNav{
    display: none;
}
@media (max-width: 719px){
    .bottomNav{
        position: fixed;
        left: 0;
        bottom: 0;
        z-index: 30;
        display: block;
        width: 100%;
        padding-bottom: env(safe-area-inset-bottom);
        border-top: 1px solid var(--border);
        background: var(--bgBase);
    }
    /* 下のメニューにページの最後が隠れないよう、その分の余白をとる */
    body{
        padding-bottom: calc(var(--bottomNavHeight) + env(safe-area-inset-bottom));
    }
}
.bottomNavList{
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    height: var(--bottomNavHeight);
}
.bottomNavItem{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    width: 100%;
    height: 100%;
    padding: 0 0.1em;
    color: var(--textSub);
    font-size: 0.63rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
}
.bottomNavItem[aria-current="page"],
.bottomNavSeekerToggle[aria-expanded="true"],
.bottomNavCompanyToggle[aria-expanded="true"]{
    color: var(--accent);
}
.bottomNavIcon{
    width: 1.5rem;
    height: 1.5rem;
    background: var(--textSub);
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
}
.bottomNavItem[aria-current="page"] .bottomNavIcon,
.bottomNavSeekerToggle[aria-expanded="true"] .bottomNavIcon,
.bottomNavCompanyToggle[aria-expanded="true"] .bottomNavIcon{
    background: var(--gradientMain);
}
.bottomNavBadge{
    position: absolute;
    top: 0.3rem;
    left: calc(50% + 0.4rem);
}
/* 「企業の方へ」（いちばん右）から上に出るメニュー。画面の右端からはみ出さないよう、右端にそろえる。
   「求職者の方へ」（左から2つ目）のメニューは、左端からはみ出さないよう左端にそろえる */
.bottomNavSeeker,
.bottomNavCompany{
    position: relative;
}
.bottomNavSub{
    position: absolute;
    bottom: calc(100% + 0.5rem);
    right: 0.5rem;
    width: 15rem;
    padding: 0.4rem;
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: linear-gradient(var(--bgBase), var(--bgBase)) padding-box, var(--gradientBorder) border-box;
    box-shadow: 0 -4px 16px var(--shadowStrong);
}
/* 「履歴書・職務経歴書 作成ツール」が1行に入る幅。いちばん狭い 360px の画面でも右端からはみ出さない */
.bottomNavSeekerSub{
    right: auto;
    left: 0;
    width: 17.5rem;
    max-width: calc(100vw - 5rem);
}
.bottomNavSub a{
    display: block;
    padding: 0.8em 1em;
    border-radius: 0.5rem;
    color: var(--textMain);
    font-size: 0.88rem;
}
.bottomNavSub li + li a{
    border-top: 1px solid var(--bgSoft);
}

/* ---------- 下層ページの本文エリア ---------- */
.pageMain{
    max-width: 1440px;
    margin: 0 auto;
    padding: 2rem 1.5rem 4rem;
}
@media (max-width: 719px){
    .pageMain{
        padding: 1.25rem 1rem 3rem;
    }
}
.pageNarrow{
    max-width: 960px;
}
/* 本文の幅（960px）は変えずに、右に広告の列を足す（求職者の方へ・企業の方へ・履歴書ツール）
   ・トップと同じ幅（表示幅 1105px 以上）で広告を出す。広告が出るぶん本文は縮むが、写真は縮めず（PC）、文字を折り返す
   ・広告が出るときは、本文と広告の組を真ん中に置く。出ないときは、本文だけが今までどおり真ん中
   ・列は本文の高さいっぱいに伸ばし、縦長の広告枠（300×1050）を1つ、列の上に置く（仮置き。増やすときは広告枠を足すだけ）。画面には止めない
   ・広告が入るかどうかは、スクロールバーを除いた実際の表示幅で判定する（コンテナクエリ） */
.pageAdLayout{
    container-type: inline-size;
    container-name: pageAd;
    display: flex;
    justify-content: center;
}
.pageAdMain{
    flex: 0 1 960px;
    min-width: 0;
    margin: 0;
}
.pageAdColumn{
    display: none;
}
/* トップ（css/top.css の topMain）と同じく、表示幅 1105px 以上で出す */
@container pageAd (min-width: 1105px){
    .pageAdColumn{
        display: flex;
        flex: 0 0 300px;
        flex-direction: column;
        margin-right: 1.5rem;
        padding: 2rem 0 4rem;
    }
}
/* PC（720px 以上）：広告が出て本文が縮んでも、画面が狭くなっても、写真は本文がいちばん広いとき（960px）の大きさのまま。文字のほうを折り返す
   （SP は今までどおり、写真を幅いっぱいに置く） */
@media (min-width: 720px){
    .pageAdMain .pageHeroPhoto{
        flex: 0 0 383px;
    }
    .pageAdMain .sectionPhoto{
        width: 305px;
    }
}
/* 右の列（トップ・求職者の方へ・企業の方へ・履歴書ツール）：広告の下の空いたところに、おすすめ記事を並べる
   列の高さは本文に合わせる（列の中身でページを縦に伸ばさない）。入りきらない記事は、空きがないので見せない */
.pageAdColumn,
.jobsAdColumn{
    contain: size;
    overflow: clip;
}
.sideArticles{
    margin-top: 2rem;
}
.sideArticlesTitle{
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--muscat);
    font-size: 1rem;
    font-weight: 700;
}
.sideArticleList{
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.sideArticleLink{
    display: grid;
    grid-template-columns: 6rem minmax(0, 1fr);
    align-items: start;
    gap: 0.75rem;
    color: var(--textMain);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
.sideArticleImage{
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 0.38rem;
    transition: opacity 0.3s;
}
.sideArticleTitle{
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    font-size: 0.88rem;
    line-height: 1.5;
    text-decoration: underline transparent;
    transition: text-decoration-color 0.3s;
}
@media (hover: hover){
    .sideArticleLink:hover .sideArticleImage{
        opacity: 0.85;
    }
    .sideArticleLink:hover .sideArticleTitle{
        text-decoration-color: currentColor;
    }
}
.sideArticlesMore{
    display: inline-block;
    margin-top: 1rem;
    color: var(--accent);
    font-size: 0.88rem;
}
/* ページの先頭の「戻る」リンク（入力のページなど） */
.pageBack{
    margin-bottom: 0.75rem;
}
.pageBackLink{
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    color: var(--accent);
    font-size: 0.88rem;
}
.pageBackLink .infoIcon{
    width: 1rem;
    height: 1rem;
}
.pageTitle{
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 1.5rem;
}
@media (max-width: 719px){
    .pageTitle{
        font-size: 1.38rem;
        margin-bottom: 1rem;
    }
}
.pageLead{
    color: var(--textSub);
    margin-bottom: 2rem;
}
/* ---------- ページの写真（求職者の方へ・企業の方へ）----------
   写真は tools/makePagePhotos.php で img/pages/ に作る。まだない写真は buildAll.sh が figure ごと外すので、
   先頭（.pageHero）は写真がなければ文字だけの1列になる */
.pageHero{
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-bottom: 2.5rem;
}
.pageHeroText{
    flex: 1 1 0;
    min-width: 0;
}
.pageHeroText .pageLead{
    margin-bottom: 0;
}
/* ページ名とキャッチの役割を分け、先に伝えたい内容を大きく見せる */
.pageHeroText .pageTitle{
    margin-bottom: 1rem;
    padding-left: 0.75rem;
    border-left: 3px solid var(--muscat);
    color: var(--textSub);
    font-size: 0.94rem;
}
.pageHeroText .pageCatchTitle{
    font-size: 1.75rem;
}
@media (max-width: 719px){
    .pageHeroText .pageCatchTitle{
        font-size: 1.5rem;
    }
}
.pageHeroText .pageCatchSub{
    margin-top: 0.75rem;
    font-weight: 400;
}
.pageHeroPhoto{
    flex: 0 0 42%;
}
.pagePhoto img{
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius);
}
/* 見出しの右に置く写真（文章がまわりに回り込む）。次の見出しは写真の下から始める */
.sectionPhoto{
    float: right;
    width: 36%;
    margin: 0.25rem 0 1rem 1.5rem;
}
.textBody:has(.sectionPhoto){
    display: flow-root;
}
.textBody:has(.sectionPhoto) h2{
    clear: both;
}
/* SP：先頭の写真は見出しの上、見出しの右の写真は文章の上に、幅いっぱいで置く */
@media (max-width: 719px){
    .pageHero{
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 1.25rem;
    }
    .pageHeroPhoto{
        flex: none;
    }
    .sectionPhoto{
        float: none;
        width: 100%;
        margin: 0 0 1rem;
    }
}
/* ページの見出しの下のキャッチフレーズ（求職者の方へ・企業の方へ・求人掲載） */
.pageCatch{
    margin-bottom: 1rem;
}
.pageCatchTitle{
    color: var(--accent);
    font-size: 1.38rem;
    font-weight: 700;
    line-height: 1.5;
}
.pageCatchSub{
    margin-top: 0.25rem;
    font-weight: 700;
}
/* 説明の多い案内ページの目次。既存の見出しへ移動するだけで、開閉操作は増やさない */
.pageContents{
    margin-bottom: 2rem;
    padding: 1.25rem 1.5rem;
    border-radius: var(--radius);
    background: var(--muscatSoft);
}
@media (max-width: 719px){
    .pageContents{
        padding: 1rem 1.25rem;
    }
}
.pageContentsTitle{
    margin-bottom: 0.75rem;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--textSub);
}
.pageContentsList{
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
}
.pageContentsList a{
    display: inline-flex;
    align-items: baseline;
    gap: 0.5em;
    padding: 0.25em 0;
    font-size: 0.94rem;
    font-weight: 700;
    text-underline-offset: 0.25em;
}
.pageContentsList a::after{
    content: "↓";
    font-size: 0.81rem;
}
@media (max-width: 719px){
    .pageCatchTitle{
        font-size: 1.19rem;
    }
}
/* 白い箱 */
.panel{
    border: 1px solid transparent;
    background: linear-gradient(var(--bgBase), var(--bgBase)) padding-box, var(--gradientBorder) border-box;
    border-radius: var(--radius);
    padding: 2rem;
}
@media (max-width: 719px){
    .panel{
        padding: 1.25rem;
    }
}
.panel + .panel{
    margin-top: 1.5rem;
}
.sectionTitle{
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 1rem;
}
/* お知らせ・注意書き */
.notice{
    background: var(--accentSoft);
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
    font-size: 0.94rem;
}
.noticeWarn{
    background: var(--warnBg);
}
/* 2列レイアウト（本文＋右の広告）：求人詳細・記事 */
.withAdLayout{
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    align-items: start;
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem 1.5rem 4rem;
}
/* 右の広告欄（300px）は、本文の列が十分に広く取れる 1024px 以上だけ出す（使いやすさを広告より優先する） */
@media (max-width: 1023px){
    .withAdLayout{
        grid-template-columns: minmax(0, 1fr);
    }
    .withAdLayoutAside{
        display: none;
    }
}
@media (max-width: 719px){
    .withAdLayout{
        padding: 1rem 1rem 3rem;
    }
}
/* 右の広告欄は画面に止めない（運営者の方針：広告は止めない） */
/* パンくずリスト */
.breadcrumb{
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
    margin-bottom: 1rem;
    color: var(--textSub);
    font-size: 0.81rem;
}
.breadcrumb li + li::before{
    content: "›";
    margin-right: 0.5rem;
}
.breadcrumb a{
    font-size: 0.81rem;
}
/* 手順（番号付き） */
.stepList{
    counter-reset: step;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}
.stepList li{
    counter-increment: step;
    position: relative;
    padding-left: 2.75rem;
    line-height: 1.8;
}
.stepList li::before{
    content: counter(step);
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    background: var(--accent);
    background-image: var(--gradientMain);
    color: var(--textOnAccent);
    font-weight: 700;
    font-size: 0.94rem;
}
.stepList strong{
    display: block;
    margin-bottom: 0.35rem;
}
/* 番号は ::before の丸数字だけにする（読みもの本文の ol の 1. 2. は出さない） */
.textBody .stepList{
    list-style: none;
    padding-left: 0;
}
/* 読みもの本文（企業の方へ・規約・記事） */
.textBody h2{
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.5;
    margin: var(--readingSectionGap) 0 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--muscat);
}
.textBody h2:first-child{
    margin-top: 0;
}
.textBody h3{
    font-size: 1.06rem;
    font-weight: 700;
    margin: 2rem 0 0.88rem;
}
.textBody p,
.textBody li{
    line-height: 1.9;
}
.textBody p + p{
    margin-top: 1rem;
}
.textBody ul,
.textBody ol{
    margin: 1rem 0 1.25rem;
}
.textBody li + li{
    margin-top: var(--readingItemGap);
}
/* 手順は gap で間隔を取り、長い説明のある箇条書きは1行分の余白を保つ */
.textBody .stepList li{
    margin-top: 0;
}
.textBody .pointList li + li{
    margin-top: 1.9em;
}
.textBody ul li{
    position: relative;
    padding-left: 1.2rem;
}
.textBody ul li::before{
    content: "";
    position: absolute;
    top: 0.8em;
    left: 0.3rem;
    width: 0.38rem;
    height: 0.38rem;
    border-radius: 50%;
    background: var(--accent);
}
/* 「見出し（太字）＋説明」の箇条書き（求職者の方へ・企業の方へ）：見出しの後で改行し、項目の間は1行分（行の高さ 1.9）空ける */
.pointList > li > strong:first-child{
    display: block;
    margin-bottom: 0.35rem;
    color: var(--accent);
}
.pointList li + li{
    margin-top: 1.9em;
}
/* 1項目内でも「説明」「補足」を段落で分ける。内容は折りたたまず、そのまま読める */
.readingParagraph{
    display: block;
}
.readingParagraph + .readingParagraph{
    margin-top: 0.75rem;
}
/* 案内ページだけは見出しを淡い帯で区切る。記事・規約の見出しは下線のまま */
.guideBody h2{
    padding: 0.75rem 1rem;
    border-bottom: none;
    border-left: 3px solid var(--accent);
    border-radius: 0 0.5rem 0.5rem 0;
    background: var(--muscatSoft);
}
.textBody p a,
.textBody li a,
.textBody td a{
    text-underline-offset: 0.2em;
}
.textBody ol{
    list-style: decimal;
    padding-left: 1.5rem;
}
.textBody .notice{
    margin: 1rem 0;
}
.textBody table{
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
    font-size: 0.94rem;
}
.textBody th,
.textBody td{
    border: 1px solid var(--border);
    padding: 0.88rem 1rem;
    text-align: left;
    vertical-align: top;
    line-height: 1.7;
}
.textBody th{
    background: var(--bgSoft);
    white-space: nowrap;
}
@media (max-width: 719px){
    .textBody th{
        white-space: normal;
    }
}

/* ---------- 広告枠 ----------
   AdSense のコードは各 .adSlot の中に貼る。
   未設定のあいだは「広告」の枠だけ表示 */
.adSlot{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--adBg);
    border: 1px dashed var(--border);
    border-radius: 0.5rem;
    color: var(--textWeak);
    font-size: 0.75rem;
    overflow: hidden;
}
.adSlot::before{
    content: "広告";
    position: absolute;
    top: 0.25rem;
    left: 0.5rem;
    font-size: 0.69rem;
}
/* 右の縦長広告：幅 300px の縦長で AdSense の規定でいちばん大きい 300×1050（ポートレート） */
.adSidebar{
    width: 300px;
    min-height: 1050px;
}
@media (max-width: 719px){
    .adSidebar{
        display: none;
    }
}
.adInList{
    min-height: 250px;
}
.adInArticle{
    min-height: 250px;
    margin: 2.5rem 0;
}
.footerAdvertisement{
    max-width: 1280px;
    margin: 0 auto;
    padding: 2.5rem 1.5rem;
}
.adFooterBanner{
    width: 100%;
    min-height: 120px;
}
@media (max-width: 719px){
    .footerAdvertisement{
        padding: 2rem 1rem;
    }
    .adFooterBanner{
        min-height: 100px;
    }
}

/* ---------- 求人カード（一覧・お気に入り） ---------- */
.jobList{
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.jobListEmpty{
    border: 1px solid transparent;
    background: linear-gradient(var(--bgBase), var(--bgBase)) padding-box, var(--gradientBorder) border-box;
    border-radius: var(--radius);
    padding: 2.5rem 1.5rem;
    text-align: center;
    color: var(--textSub);
}
.jobCard{
    --fillFrom: var(--bgBase);
    --fillTo: var(--bgBase);
    --edgeFrom: var(--borderFrom);
    --edgeMid: var(--borderTo);
    --edgeTo: var(--borderTo);
    position: relative;
    border: 1px solid transparent;
    background: linear-gradient(var(--fillFrom), var(--fillTo)) padding-box, linear-gradient(90deg, var(--edgeFrom) 0%, var(--edgeMid) 65%, var(--edgeTo) 100%) border-box;
    border-radius: var(--radius);
    transition: var(--gradientTransition), box-shadow var(--effectDuration) ease;
}
@media (hover: hover){
    .jobCard:hover{
        --edgeFrom: var(--lineFrom);
        --edgeMid: var(--lineMid);
        --edgeTo: var(--lineTo);
        box-shadow: 0 2px 10px var(--shadow);
    }
}
/* 選択中のカード（薄いマスカットの面＋グラデーションの枠） */
.jobCard.isSelected{
    --fillFrom: var(--muscatSoft);
    --fillTo: var(--muscatSoft);
    --edgeFrom: var(--mainFrom);
    --edgeMid: var(--mainTo);
    --edgeTo: var(--mainTo);
    border: 2px solid transparent;
    margin: -1px;
}
.jobCardLink{
    display: block;
    padding: 1.25em 1.25em 1em;
    color: var(--textMain);
}
@media (hover: hover){
    .jobCardLink:hover{
        text-decoration: none;
    }
}
@media (max-width: 719px){
    .jobCardLink{
        padding: 1em 1em 0.9em;
    }
}
.jobCardLink:focus-visible{
    outline-offset: -2px;
    border-radius: var(--radius);
}
.jobCardTitle{
    font-size: 1.13rem;
    font-weight: 700;
    line-height: 1.5;
    margin-bottom: 0.3rem;
    color: var(--textMain);
    text-decoration-line: underline;
    text-decoration-color: transparent;
    transition: text-decoration-color var(--effectDuration) ease;
}
@media (hover: hover){
    .jobCardLink:hover .jobCardTitle{
        text-decoration-color: currentColor;
    }
}
@media (max-width: 719px){
    .jobCardTitle{
        font-size: 1.06rem;
    }
}
.jobCardCompany{
    color: var(--textSub);
    font-size: 0.94rem;
    line-height: 1.5;
}
/* 仕事内容のひとこと（上下を線で挟む） */
.jobCardCatch{
    margin-top: 0.75rem;
    padding: 0.5rem 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    font-size: 0.94rem;
    line-height: 1.6;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
/* 勤務地・給与・雇用形態（アイコン付きの行） */
/* カードの情報と画像の並び（画像があるときは右に小さく出す） */
.jobCardMain{
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}
.jobCardMain .jobCardInfo{
    flex: 1;
    min-width: 0;
}
.jobCardImage{
    flex-shrink: 0;
    width: 7.5rem;
    height: auto;
    aspect-ratio: 4 / 3;
    margin-top: 0.75rem;
    border-radius: 0.5rem;
    object-fit: cover;
}
@media (max-width: 719px){
    .jobCardImage{
        width: 6rem;
    }
}
.jobCardInfo{
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin-top: 0.75rem;
    font-size: 0.94rem;
    line-height: 1.5;
}
.jobCardInfo li{
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
}
.jobCardInfo .infoIcon{
    margin-top: 0.15rem;
}
/* 新着ラベルと掲載日（右下にハートが来るので右側を空ける） */
.jobCardFoot{
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding-right: 2.5rem;
    color: var(--textWeak);
    font-size: 0.81rem;
}
.jobCardNew{
    display: inline-block;
    background: var(--shine);
    background-image: var(--gradientShine);
    color: var(--textOnShine);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.6;
    padding: 0 0.5rem;
    border-radius: 0.25rem;
}
.jobCard .favoriteBtn{
    position: absolute;
    right: 0.5rem;
    bottom: 0.4rem;
}

/* ---------- 項目のアイコン（形は :root の --icon〇〇。色はグラデーションで塗る） ---------- */
.iconPin{ --icon: var(--iconPin); }
.iconYen{ --icon: var(--iconYen); }
.iconBriefcase{ --icon: var(--iconBriefcase); }
.iconClock{ --icon: var(--iconClock); }
.iconCalendar{ --icon: var(--iconCalendar); }
.iconGift{ --icon: var(--iconGift); }
.iconPerson{ --icon: var(--iconPerson); }
.iconDocument{ --icon: var(--iconDocument); }
.iconTag{ --icon: var(--iconTag); }
.iconMail{ --icon: var(--iconMail); }
.iconCheck{ --icon: var(--iconCheck); }
.iconRise{ --icon: var(--iconRise); }
.iconExternal{ --icon: var(--iconExternal); }
.iconSearch{ --icon: var(--iconSearch); }
.iconHistory{ --icon: var(--iconHistory); }
.iconHome{ --icon: var(--iconHome); }
.iconBuilding{ --icon: var(--iconBuilding); }
.iconArrow{ --icon: var(--iconArrow); }
.iconClose{ --icon: var(--iconClose); }
.iconBack{ --icon: var(--iconBack); }
.iconHeart{ --icon: var(--iconHeartOutline); }
/* 文字の横に並べる小さいアイコン */
.infoIcon{
    display: inline-block;
    flex-shrink: 0;
    width: 1.1rem;
    height: 1.1rem;
    background: var(--gradientMain);
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
}
/* 求人のタグ（雇用形態・給与・特徴） */
.jobTags{
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.75rem;
}
.jobTag{
    display: inline-block;
    background: var(--bgSoft);
    background-image: var(--gradientGray);
    border-radius: 0.25rem;
    padding: 0.15rem 0.5rem;
    font-size: 0.81rem;
    font-weight: 700;
    color: var(--textSub);
}
.jobTagMain{
    background: var(--accentSoft);
    background-image: var(--gradientSoft);
    color: var(--accent);
}
/* 求人の詳細：特徴の下の「〇〇活躍中」の補足 */
.jobFeatureNote{
    margin-top: 0.6rem;
}

/* ---------- 条件の説明（Q&A の形で、開いて読む）----------
   検索の条件パネル・投稿フォームの特徴・求人の詳細で使う */
.conditionHelp{
    margin-top: 0.75rem;
    font-size: 0.88rem;
}
.conditionHelp summary{
    color: var(--accent);
    cursor: pointer;
}
.conditionHelpList,
.conditionHelpText{
    margin-top: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    background: var(--muscatSoft);
}
.conditionHelpList dt{
    font-weight: 700;
}
.conditionHelpList dd{
    margin-top: 0.25rem;
    margin-bottom: 1rem;
    color: var(--textSub);
}
.conditionHelpList dd:last-child{
    margin-bottom: 0;
}
.conditionHelpText{
    color: var(--textSub);
    line-height: 1.8;
}

/* ---------- 入力欄の下の「例文を入れる」ボタン ----------
   求人の投稿フォーム（js/post.js）と履歴書ツール（js/resume.js）で使う */
.exampleButtons{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.4rem;
}
.exampleButtonsLabel{
    color: var(--textSub);
    font-size: 0.81rem;
}
.exampleButton{
    --fillFrom: var(--bgBase);
    --fillTo: var(--bgBase);
    --edgeFrom: var(--borderFrom);
    --edgeMid: var(--borderTo);
    --edgeTo: var(--borderTo);
    padding: 0.2em 0.9em;
    border: 1px solid transparent;
    border-radius: 2rem;
    background: linear-gradient(135deg, var(--fillFrom), var(--fillTo)) padding-box, linear-gradient(135deg, var(--edgeFrom), var(--edgeMid), var(--edgeTo)) border-box;
    color: var(--accent);
    font-size: 0.81rem;
    transition: var(--gradientTransition);
}
@media (hover: hover){
    .exampleButton:hover{
        --fillFrom: var(--softFrom);
        --fillTo: var(--softTo);
        --edgeFrom: var(--mainFrom);
        --edgeMid: var(--mainTo);
        --edgeTo: var(--mainTo);
    }
}

/* ---------- 法律で決まっている条件（どの求人にも共通）----------
   選ぶものではないので、チップではなく、チェックの付いた一覧で見せる */
.legalBasics{
    padding: 1rem 1.1rem;
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: linear-gradient(var(--bgBase), var(--bgBase)) padding-box, var(--gradientBorder) border-box;
}
.jobDetailSection .legalBasics{
    margin-top: 1rem;
}
.legalBasicsTitle{
    font-size: 0.94rem;
    font-weight: 700;
}
.legalBasicsLead{
    margin-top: 0.25rem;
    color: var(--textSub);
    font-size: 0.81rem;
}
.legalBasicsList{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: 0.75rem 1rem;
    margin-top: 0.75rem;
    font-size: 0.88rem;
}
.legalBasicsList li{
    position: relative;
    padding-left: 1.4em;
}
/* 行頭のチェックの印 */
.legalBasicsList li::before{
    content: "";
    position: absolute;
    top: 0.35em;
    left: 0;
    width: 1em;
    height: 1em;
    background: var(--gradientMain);
    -webkit-mask: var(--iconCheck) center / contain no-repeat;
    mask: var(--iconCheck) center / contain no-repeat;
}
/* お気に入りボタン（ハート） */
.favoriteBtn{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    color: var(--textSub);
    background-color: transparent;
    transition: background-color var(--effectDuration) ease;
}
@media (hover: hover){
    .favoriteBtn:hover{
        background-color: var(--bgSoft);
    }
}
/* ハートの形（ふちだけ）をグラデーションで塗る */
.favoriteIcon{
    display: block;
    flex-shrink: 0;
    width: 1.4rem;
    height: 1.4rem;
    background: var(--gradientMain);
    -webkit-mask: var(--iconHeartOutline) center / contain no-repeat;
    mask: var(--iconHeartOutline) center / contain no-repeat;
}
/* お気に入り済みは、塗りつぶしたハートをコーラル→オレンジで塗る */
.favoriteBtn.isFavorite .favoriteIcon{
    background: var(--gradientFavorite);
    -webkit-mask-image: var(--iconHeartFilled);
    mask-image: var(--iconHeartFilled);
}

/* ---------- 求人詳細（トップの右側・詳細ページ・投稿の確認画面） ---------- */
.jobDetail{
    border: 1px solid transparent;
    background: linear-gradient(var(--bgBase), var(--bgBase)) padding-box, var(--gradientBorder) border-box;
    border-radius: var(--radius);
}
.jobDetailHead{
    padding: 1.5rem 1.5rem 1.25rem;
    border-bottom: 1px solid var(--border);
}
@media (max-width: 719px){
    .jobDetailHead{
        padding: 1.25rem 1rem 1rem;
    }
}
.jobDetailTitle{
    font-size: 1.38rem;
    font-weight: 700;
    line-height: 1.45;
    margin-bottom: 0.75rem;
}
@media (max-width: 719px){
    .jobDetailTitle{
        font-size: 1.25rem;
    }
}
.jobDetailCompany{
    font-size: 1rem;
    font-weight: 700;
}
/* 求人名の下の 勤務地・給与・雇用形態（カードと同じアイコン付きの行） */
.jobDetailHead .jobCardInfo{
    margin-top: 0.6rem;
}
.jobDetailActions{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.25rem;
}
@media (max-width: 719px){
    .jobDetailActions .btnPrimary{
        flex: 1 1 100%;
    }
}
.jobDetailActions .favoriteBtn{
    border: 1px solid transparent;
    background: linear-gradient(var(--bgBase), var(--bgBase)) padding-box, var(--gradientBorder) border-box;
    border-radius: 0.5rem;
}
/* 共有（URL）と「X でポスト」は同じ形の四角いボタン */
.shareBtn,
.shareXBtn{
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid transparent;
    background: linear-gradient(var(--bgBase), var(--bgBase)) padding-box, var(--gradientBorder) border-box;
    border-radius: 0.5rem;
    color: var(--textSub);
}
.shareBtn svg{
    width: 1.3rem;
    height: 1.3rem;
}
.shareXBtn svg{
    width: 1.1rem;
    height: 1.1rem;
}
@media (hover: hover){
    .shareXBtn:hover{
        color: var(--textMain);
        text-decoration: none;
    }
}
/* 「別タブで見る」（トップの一覧の横に出しているときだけ） */
/* 勤務地・給与・雇用形態の行。「別タブで見る」は右下に置き、縮めない */
.jobDetailInfoRow{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.5rem 1rem;
}
.jobDetailInfoRow > :first-child{
    min-width: 0;
}
.jobDetailOpen{
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.3em;
    white-space: nowrap;
    padding: 0.4em 0.8em;
    border: 1px solid transparent;
    background: linear-gradient(var(--bgBase), var(--bgBase)) padding-box, var(--gradientBorder) border-box;
    border-radius: 0.5rem;
    color: var(--textSub);
    font-size: 0.81rem;
}
/* 求人画像のスライダー（横にスワイプ。前へ・次へのボタン） */
.jobSlider{
    position: relative;
    margin-top: 1.25rem;
}
.jobSliderTrack{
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    border-radius: var(--radius);
}
.jobSliderTrack::-webkit-scrollbar{
    display: none;
}
.jobSliderImage{
    flex: 0 0 100%;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    scroll-snap-align: start;
}
.jobSliderPrev,
.jobSliderNext{
    position: absolute;
    top: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--bgBase);
    box-shadow: 0 2px 8px var(--shadowStrong);
    opacity: 0.7;
    transform: translateY(-50%);
    transition: opacity var(--effectDuration) ease;
}
@media (hover: hover){
    .jobSliderPrev:hover,
    .jobSliderNext:hover{
        opacity: 1;
    }
}
.jobSliderPrev .infoIcon,
.jobSliderNext .infoIcon{
    width: 1rem;
    height: 1rem;
}
.jobSliderPrev{
    left: 0.5rem;
}
.jobSliderNext{
    right: 0.5rem;
}
.jobSliderNext .infoIcon{
    transform: scaleX(-1);
}
.jobSliderSecond{
    display: none;
}
/* PC：高さを半分にして2枚ずつ見せる（1枚だけのときは横長に切り抜く） */
@media (min-width: 720px){
    .jobSliderTrack{
        gap: 0.5rem;
    }
    .jobSliderImage{
        flex-basis: calc((100% - 0.5rem) / 2);
        width: calc((100% - 0.5rem) / 2);
        border-radius: var(--radius);
    }
    .jobSlider[data-count="1"] .jobSliderImage{
        flex-basis: 100%;
        width: 100%;
        aspect-ratio: 8 / 3;
    }
    .jobSliderSecond{
        display: inline;
    }
    .jobSlider[data-count="2"] .jobSliderPrev,
    .jobSlider[data-count="2"] .jobSliderNext{
        display: none;
    }
}
.jobSliderCount{
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    padding: 0.1rem 0.6rem;
    border-radius: 1rem;
    background: var(--textMain);
    color: var(--textOnAccent);
    font-size: 0.75rem;
}
.jobDetailBody{
    padding: 0.5rem 1.5rem 1.5rem;
}
@media (max-width: 719px){
    .jobDetailBody{
        padding: 0.25rem 1rem 1rem;
    }
}
.jobDetailSection{
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--border);
}
.jobDetailSection:last-child{
    border-bottom: none;
}
/* 見出し（左にグラデーションのバー） */
.jobDetailHeading{
    position: relative;
    padding-left: 0.8rem;
    font-size: 1.13rem;
    font-weight: 700;
    line-height: 1.5;
    margin-bottom: 0.75rem;
}
.jobDetailHeading::before{
    content: "";
    position: absolute;
    top: 0.2em;
    bottom: 0.2em;
    left: 0;
    width: 4px;
    border-radius: 2px;
    background: var(--gradientMain);
}
.jobDetailText{
    font-size: 1rem;
    line-height: 1.8;
    overflow-wrap: anywhere;
}
/* 募集要項（左にアイコンと項目名、右に内容） */
.jobInfoRow{
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--bgSoft);
}
@media (max-width: 719px){
    .jobInfoRow{
        grid-template-columns: 4.5rem minmax(0, 1fr);
        gap: 0.75rem;
    }
}
.jobInfoRow:last-child{
    border-bottom: none;
}
.jobInfoLabel{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    color: var(--accent);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
}
/* 丸の中に白いアイコン */
.jobInfoIcon{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--gradientMain);
}
.jobInfoIcon::before{
    content: "";
    width: 1.3rem;
    height: 1.3rem;
    background: var(--textOnAccent);
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
}
.jobInfoBody{
    font-size: 0.94rem;
    line-height: 1.8;
    overflow-wrap: anywhere;
}
.jobInfoBody p + p{
    margin-top: 0.75rem;
}
.jobInfoSubTitle{
    color: var(--textSub);
    font-weight: 700;
}
/* 国税庁の登録と照合済みの印（法人番号・インボイスの登録番号の横） */
.verifiedBadge{
    display: inline-flex;
    align-items: center;
    gap: 0.25em;
    margin-left: 0.5em;
    padding: 0.05em 0.6em;
    border-radius: 1rem;
    background: var(--gradientSoft);
    color: var(--accent);
    font-size: 0.75rem;
    font-weight: 700;
    vertical-align: middle;
}
.verifiedBadge .infoIcon{
    width: 0.9rem;
    height: 0.9rem;
}
.jobDetailMeta{
    color: var(--textWeak);
    font-size: 0.81rem;
    line-height: 1.8;
}
.jobDetailMeta a{
    color: var(--textSub);
    font-size: 0.81rem;
}
.jobDetailPlaceholder{
    background: var(--bgBase);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--textSub);
}

/* ---------- 記事カード（トップ・記事一覧）：画像＋タイトル ---------- */
/* PC：最大4列。1枚が 176px を切る幅では列を減らす */
.articleCards{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(max(176px, calc((100% - 3 * 1.25rem) / 4)), 1fr));
    gap: 2rem 1.25rem;
}
/* SP：2列。360px の画面で 176px＋すき間 4px＋176px（一覧と同じ 356px） */
@media (max-width: 719px){
    .articleCards{
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: clamp(4px, calc(100% - 352px), 0.75rem);
        row-gap: 1.5rem;
    }
}
.articleCard a{
    display: block;
    color: var(--textMain);
}
@media (hover: hover){
    .articleCard a:hover{
        text-decoration: none;
    }
    .articleCard a:hover .articleCardImage{
        opacity: 0.85;
    }
    .articleCard a:hover .articleCardTitle{
        text-decoration-color: currentColor;
    }
}
.articleCardImage{
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 0.5rem;
    transition: opacity var(--effectDuration) ease;
}
/* 画像がまだない記事 */
.articleCardNoImage{
    background: var(--gradientSoft);
}
.articleCardTitle{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin-top: 0.6rem;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.6;
    text-decoration-line: underline;
    text-decoration-color: transparent;
    transition: text-decoration-color var(--effectDuration) ease;
}
@media (max-width: 719px){
    .articleCardTitle{
        font-size: 0.88rem;
    }
}
.articleCardDescription{
    margin-top: 0.4rem;
    color: var(--textSub);
    font-size: 0.88rem;
    line-height: 1.7;
}
/* 記事のラベル（求職者向け・企業向け・時間など） */
.articleCardLabels{
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.5rem;
}
.articleCardLabel{
    padding: 0.1rem 0.6rem;
    border: 1px solid transparent;
    border-radius: 1rem;
    background: linear-gradient(var(--bgBase), var(--bgBase)) padding-box, var(--gradientBorder) border-box;
    color: var(--accent);
    font-size: 0.75rem;
}

/* 入力欄の薄い説明（フリーワードなど）は灰色 */
input::placeholder,
textarea::placeholder{
    color: var(--textWeak);
    opacity: 1;
}

/* ---------- フォーム共通（投稿・削除・お問い合わせ） ---------- */
.formRow{
    display: block;
    margin-bottom: 1.5rem;
}
.formLabel{
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    margin-bottom: 0.4rem;
}
.formRequired,
.formOptional{
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.1rem 0.4rem;
    border-radius: 0.25rem;
}
.formRequired{
    background: var(--danger);
    background-image: var(--gradientDanger);
    color: var(--textOnAccent);
}
.formOptional{
    background: var(--bgSoft);
    background-image: var(--gradientGray);
    color: var(--textSub);
}
.formHelp{
    display: block;
    color: var(--textSub);
    font-size: 0.94rem;
    margin-top: 0.5rem;
}
.formInput,
.formSelect,
.formTextarea{
    display: block;
    width: 100%;
    padding: 0.7rem 0.8rem;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    background: linear-gradient(var(--bgBase), var(--bgBase)) padding-box, var(--gradientBorder) border-box;
    font-size: 1rem;
}
.formTextarea{
    min-height: 10rem;
    resize: vertical;
    line-height: 1.7;
}
.formInput:focus-visible,
.formSelect:focus-visible,
.formTextarea:focus-visible{
    outline: 2px solid var(--accent);
    outline-offset: 0;
}
.formInput.isInvalid,
.formSelect.isInvalid,
.formTextarea.isInvalid{
    background: linear-gradient(var(--bgBase), var(--bgBase)) padding-box, linear-gradient(var(--danger), var(--danger)) border-box;
}
.formChecks{
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
}
.formCheck{
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
}
.formCheck input{
    width: 1.1rem;
    height: 1.1rem;
    accent-color: var(--accent);
}
.formGrid2{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 1.25rem;
}
@media (max-width: 719px){
    .formGrid2{
        grid-template-columns: minmax(0, 1fr);
    }
}
/* 送信結果のメッセージ */
.formMessage{
    margin-top: 1rem;
    padding: 1rem 1.25rem;
    border-radius: 0.5rem;
    font-size: 0.94rem;
    white-space: pre-line;
}
.formMessage:empty{
    display: none;
}
.formMessage.isError{
    background: var(--dangerBg);
    color: var(--danger);
}
.formMessage.isSuccess{
    background: var(--successBg);
    color: var(--success);
}
.formActions{
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2rem;
}
.formActionsCenter{
    justify-content: center;
}
/* スパム対策の見えない項目 */
.formTrap{
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---------- トースト（お気に入り保存などのお知らせ） ---------- */
.toast{
    position: fixed;
    left: 50%;
    bottom: 1.5rem;
    z-index: 40;
    transform: translate(-50%, 1rem);
    background: var(--textMain);
    color: var(--textOnAccent);
    padding: 0.75rem 1.25rem;
    border-radius: 0.5rem;
    font-size: 0.94rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--effectDuration) ease, transform var(--effectDuration) ease, visibility var(--effectDuration) ease;
    white-space: nowrap;
}
.toast.isShown{
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

/* ---------- よくある質問（各ページの下、フッターの上） ---------- */
.faqSection{
    width: min(1060px, 96%);
    margin: 0 auto;
    padding: 1rem 0 3.5rem;
}
@media (max-width: 719px){
    .faqSection{
        width: max(356px, 96%);
    }
}
.faqTitle{
    margin-bottom: 1.25rem;
    font-size: 1.38rem;
    font-weight: 700;
    text-align: center;
}
@media (max-width: 719px){
    .faqTitle{
        font-size: 1.25rem;
    }
}
.faqList{
    display: flex;
    flex-direction: column;
    gap: 0.88rem;
}
.faqItem{
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: linear-gradient(var(--bgBase), var(--bgBase)) padding-box, var(--gradientBorder) border-box;
}
.faqQuestion{
    position: relative;
    display: block;
    width: 100%;
    padding: 1em 3em 1em 3em;
    font-weight: 700;
    line-height: 1.6;
    text-align: left;
}
/* 「Q」の印と、開閉の矢印 */
.faqQuestion::before{
    content: "Q";
    position: absolute;
    top: 0.85em;
    left: 1em;
    color: var(--accent);
    font-size: 1.13rem;
}
.faqQuestion::after{
    content: "";
    position: absolute;
    top: 50%;
    right: 1.25em;
    width: 0.5em;
    height: 0.5em;
    border-right: 2px solid var(--textSub);
    border-bottom: 2px solid var(--textSub);
    transform: translateY(-70%) rotate(45deg);
    transition: transform var(--effectDuration) ease;
}
.faqQuestion[aria-expanded="true"]::after{
    transform: translateY(-30%) rotate(-135deg);
}
.faqAnswer{
    position: relative;
    padding: 0 1.25rem 1.1rem 3rem;
    color: var(--textSub);
    line-height: 1.8;
}
.faqAnswer::before{
    content: "A";
    position: absolute;
    top: 0;
    left: 1rem;
    color: var(--shine);
    font-size: 1.13rem;
    font-weight: 700;
    line-height: 1.6;
}

/* ---------- フッター ----------
   上：サイトマップ（ごく薄いマスカット）、下：ロゴと説明（薄いマスカット）の2段に色分け */
.footerSitemap{
    border-top: 1px solid var(--border);
    background: var(--muscatSoft);
}
.footerSitemapInner{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
    width: min(1060px, 96%);
    margin: 0 auto;
    padding: 2.5rem 0 2rem;
}
@media (max-width: 719px){
    .footerSitemapInner{
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: max(356px, 92%);
        padding: 2rem 0 1.5rem;
    }
}
.footerGroupTitle{
    margin-bottom: 0.6rem;
    padding-left: 0.6rem;
    border-left: 3px solid var(--muscat);
    font-size: 0.94rem;
    font-weight: 700;
    line-height: 1.4;
}
.footerLinks li + li{
    margin-top: 0.3rem;
}
.footerLinks a{
    color: var(--textSub);
    font-size: 0.81rem;
    line-height: 1.6;
}
.footerBottom{
    background: var(--accentSoft);
}
.footerBottomInner{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    width: min(1060px, 96%);
    margin: 0 auto;
    padding: 1.75rem 0 1.5rem;
    text-align: center;
}
/* フッターのロゴは、ヘッダーより少し小さく */
.footerLogo .siteLogoMark{
    height: 32px;
}
.footerLogo .siteLogoName{
    font-size: 1.44rem;
}
/* ブランドの一言（フッターのロゴの下） */
.footerCatch{
    color: var(--accent);
    font-weight: 700;
}
.footerSocialLink{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    color: var(--textMain);
    text-decoration: none;
    transition: color var(--effectDuration) ease, background-color var(--effectDuration) ease;
}
.footerSocialLink svg{
    display: block;
    width: 1.4rem;
    height: 1.4rem;
}
@media (hover: hover){
    .footerSocialLink:hover{
        color: var(--accent);
        background: var(--bgBase);
        text-decoration: none;
    }
}
.footerNote{
    color: var(--textSub);
    font-size: 0.81rem;
    line-height: 1.7;
}
.footerBottom small{
    color: var(--textSub);
    font-size: 0.75rem;
}

/* ---------- 画面右下の「Topに戻る」ボタン ---------- */
.backToTop{
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--gradientMain);
    box-shadow: 0 2px 8px var(--shadowStrong);
    opacity: 0;
    visibility: hidden;
    transform: translateY(0.5rem);
    transition: opacity var(--effectDuration) ease, transform var(--effectDuration) ease, visibility var(--effectDuration) ease;
}
@media (max-width: 719px){
    .backToTop{
        bottom: calc(var(--bottomNavHeight) + env(safe-area-inset-bottom) + 0.75rem);
        width: 2.5rem;
        height: 2.5rem;
    }
}
.backToTop.isShown{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.backToTop .infoIcon{
    width: 1.25rem;
    height: 1.25rem;
    background: var(--textOnAccent);
}
/* 先頭が見えているかを調べる目印（見た目には出さない） */
.topSentinel{
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 300px;
    pointer-events: none;
}

/* ---------- 便利な機能のカード（便利な機能のページ・トップ・求職者の方へ） ---------- */
.featureGroup + .featureGroup{
    margin-top: 2.5rem;
}
.featureGroupTitle{
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--muscat);
    font-size: 1.25rem;
    font-weight: 700;
}
.featureCards{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 1rem;
}
.textBody .featureCards{
    clear: both;
    margin: 1.5rem 0;
}
.featureCard{
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.25em;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bgBase);
    color: var(--textMain);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: border-color 0.3s, box-shadow 0.3s;
}
@media (hover: hover){
    .featureCard:hover{
        border-color: var(--accent);
        box-shadow: 0 4px 14px var(--shadowStrong);
    }
}
.featureCard:focus-visible{
    border-color: var(--accent);
}
.featureCardIcon{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--gradientSoft);
}
.featureCardIcon .infoIcon{
    width: 1.38rem;
    height: 1.38rem;
}
.featureCardTitle{
    font-size: 1.06rem;
    font-weight: 700;
    line-height: 1.5;
}
.featureCardText{
    color: var(--textSub);
    font-size: 0.94rem;
    line-height: 1.8;
}
.featureCardMore{
    margin-top: auto;
    padding-top: 0.25rem;
    color: var(--accent);
    font-size: 0.88rem;
    font-weight: 700;
}
.featureCardMore::after{
    content: "　→";
}

/* ---------- 掲載した求人の表示回数（delete.html。js/delete.js の buildStatsHtml） ---------- */
.jobStatsJob{
    margin-bottom: 1rem;
    font-weight: 700;
}
.jobStatsCards{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}
@media (max-width: 719px){
    .jobStatsCards{
        grid-template-columns: minmax(0, 1fr);
    }
}
.jobStatsCard{
    border-radius: 0.5rem;
    background: var(--gradientSoft);
    padding: 1rem 1.25rem;
}
.jobStatsLabel{
    color: var(--textSub);
    font-size: 0.875rem;
    font-weight: 700;
}
.jobStatsValue{
    margin-top: 0.25rem;
    color: var(--accent);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}
.jobStatsUnit{
    margin-left: 0.15em;
    font-size: 1rem;
}
.jobStatsRecent{
    margin-top: 0.25rem;
    color: var(--textSub);
    font-size: 0.875rem;
}
.jobStatsTable caption{
    margin-bottom: 0.5rem;
    text-align: left;
    font-weight: 700;
}
.textBody .jobStatsTable td{
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.textBody .jobStatsTable thead th{
    text-align: center;
}
.jobStatsTotal{
    margin-right: 0.35em;
    font-size: 0.875rem;
}
.jobStatsJob .formHelp{
    font-weight: 400;
}

/* 2026-10-24：ヘッダーの中央配置・FAQと広告の共通配置 */
@media (min-width: 720px){
    .globalNav{ flex: 1 1 auto; justify-content: center; min-width: 0; }
    .globalNavWide{ display: block; }
    .headerActions{ margin-left: 0; flex-shrink: 0; }
    .siteTagline{ display: none; }
}
@media (min-width: 1280px){
    .siteHeaderInner{ position: relative; }
    .globalNav{ position: absolute; left: 50%; transform: translateX(-50%); width: max-content; }
    .headerActions{ margin-left: auto; }
}
@media (min-width: 1600px){
    .siteTagline{ display: block; }
}
@media (min-width: 720px) and (max-width: 1023.98px){
    .siteHeaderInner{ gap: 0.5rem; }
    .globalNavList{ gap: 0; }
    .globalNavList a{ padding: 0 0.4em; }
}
.footerGroupTitle{ width: fit-content; }
.footerSitemapInner{ width: min(1280px, 96%); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.footerLinks a{ overflow-wrap: anywhere; }
.pageBottomAdvertisement{ margin: 2.5rem auto; padding: 0; width: 100%; max-width: 1200px; }
.pageBottomAdvertisement .adFooterBanner{ min-height: 120px; }
.pageAdMain .faqSection, .withAdLayout > div > .faqSection{ width: 100%; }
.withAdLayoutAside{ align-self: stretch; }
.faqSection{ max-width: 100%; }
@media (max-width: 743px){
    .footerSitemapInner{ width: 92%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pageBottomAdvertisement .adFooterBanner{ min-height: 100px; }
    .faqSection{ width: 100%; }
}

@media (min-width: 1024px) and (max-width: 1279.98px){
    .globalNavList a{ flex-direction: column; justify-content: center; gap: 0.2rem; font-size: 0.75rem; line-height: 1.2; padding: 0 0.5em; }
}
@media (min-width: 720px) and (max-width: 799.98px){
    .headerActionText{ font-size: 0.65rem; }
    .headerPost{ font-size: 0.72rem; padding-left: 0.65em; padding-right: 0.65em; }
    .globalNavList a{ padding: 0 0.25em; font-size: 0.7rem; }
}

/* 幅の左右に関係なく、4項目そのものをヘッダーの中心へ。 */
@media (min-width: 720px){
    .siteHeaderInner{ position: relative; }
    .globalNav{ position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: max-content; height: calc(100% - 3px); }
    .headerActions{ margin-left: auto; }
}
@media (min-width: 800px) and (max-width: 1023.98px){
    .globalNavList a{ font-size: 0.72rem; padding: 0 0.25em; }
}
@media (min-width: 1024px) and (max-width: 1279.98px){
    .headerActions{ gap: 0.25rem; }
    .headerAction{ padding: 0.4em 0.35em; font-size: 0.81rem; }
    .headerPost{ font-size: 0.81rem; padding: 0.55em 0.8em; }
}

/* 2026-10-25：ヘッダーは常に1段。狭いPC幅のアイコン＋文字の縦配置は維持。 */
.iconPencil{ --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15.5 4.5 4 4M4 20l1-5L16.7 3.3a1.4 1.4 0 0 1 2 0l2 2a1.4 1.4 0 0 1 0 2L9 19z'/%3E%3C/svg%3E"); }
@media (min-width:720px){
    .headerAction .favoriteIcon, .headerAction .infoIcon{ width:1rem; height:1rem; }
}
@media (min-width:720px) and (max-width:1599.98px){
    .globalNav{ position:static; top:auto; left:auto; transform:none; width:auto; }
}

/* 項目を中央で詰めず、使える横幅へ均等に配置する。ヘッダー自体は1段。 */
@media (min-width:720px){
    .globalNavList{ width:100%; justify-content:space-evenly; gap:0.5rem; }
}
@media (min-width:720px) and (max-width:799.98px){
    .siteHeaderInner{ gap:0.25rem; }
}
@media (min-width:1600px){
    .globalNavList{ width:auto; gap:1.25rem; }
}