@charset "utf-8";


/*--------------------------------------------------------------

salary（年収を知る）
デザインは「案3（求職者向けに魅力強化）」。px指定を採用サイトのrem指定に置き換えている

--------------------------------------------------------------*/

.salary {
--salary-green: var(--cl-key);
--salary-green-md: #1f6b47;
--salary-green-lt: #5e9a7a;
--salary-green-lt2: #a9cbb7;
--salary-green-lt3: #cfe2d6;
--salary-gold: #c9a55b;
--salary-gold-dk: #b08a3e;
--salary-gold-txt: #6b4e16;
--salary-gold-lt: #e2c98f;
--salary-txt: #2e3f37;
--salary-muted: #4a5a52;
--salary-line: #d9e3dd;
--salary-bg: #eef4f0;
color: var(--salary-txt); line-height: 1.7; letter-spacing: 0.04em;
}
.salary a:hover { opacity: 1; }
.salary a:focus-visible,
.salary summary:focus-visible { outline: 3px solid var(--salary-gold); outline-offset: 2px; }

.salary-sec { padding-top: 6.4rem; }
.salary-title { color: var(--salary-green); font-size: 2.6rem; font-weight: bold; line-height: 1.4; }
.salary-title::before { content: ""; display: block; width: 4rem; height: 4px; margin-bottom: 1.6rem; background-color: var(--salary-green-md); }
.salary-title-lead { max-width: 44em; margin-top: 1.2rem; font-size: 1.4rem; }
.salary-subtitle { margin: 5.6rem 0 0.6rem; color: var(--salary-green); font-size: 2rem; font-weight: bold; }
.salary-subtitle-lead { margin-bottom: 2.4rem; font-size: 1.4rem; }
.salary-mk { color: var(--salary-green); font-weight: bold; text-decoration: underline; text-decoration-color: var(--salary-gold); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.salary-notes { margin-top: 2rem; color: var(--salary-muted); font-size: 1.2rem; line-height: 1.9; }

@media print, screen and (min-width: 640px) {
.salary-sec { padding-top: 10rem; }
.salary-title { font-size: 3.4rem; }
.salary-title-lead { font-size: 1.5rem; }
.salary-subtitle { margin-top: 7.2rem; font-size: 2.4rem; }
.salary-subtitle-lead { margin-bottom: 3.2rem; }
.salary-notes { font-size: 1.25rem; }
}


/* ページタイトル（他の採用ページは日本語がp。ここはh1なので太字を打ち消して見た目を揃える） */
._salary .c-pageTitle-sub { font-weight: normal; }


/* hero */
.salary-hero { padding: 4rem 0 4.8rem; }
/* c-pageTitle の見出し（下に7rem・12remはみ出す）と重ならないよう、上を空ける */
.c-pageTitle + .salary .salary-hero { padding-top: 11rem; }
.salary-hero-grid { display: grid; gap: 4rem; }
.salary-hero-txt { min-width: 0; }
.salary-catch { color: var(--salary-green); font-size: 4.4rem; font-weight: bold; line-height: 1.25; letter-spacing: 0.02em; }
.salary-lead { max-width: 34em; margin-top: 2.4rem; font-size: 1.5rem; line-height: 2; }
.salary-anchor { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: 2.8rem; }
.salary-anchor a { display: inline-flex; align-items: center; min-height: 4.4rem; padding: 0 2rem; border: 1px solid var(--salary-green); border-radius: 999px; color: var(--salary-green); font-size: 1.4rem; font-weight: bold; }
.salary-anchor a:hover { background-color: var(--salary-green); color: var(--cl-wh); }

.salary-highlight { display: flex; flex-direction: column; gap: 2.4rem; min-width: 0; }
.salary-highlight-item + .salary-highlight-item { padding-top: 2.4rem; border-top: 1px solid var(--salary-line); }
.salary-highlight-item dt { color: var(--salary-green-md); font-size: 1.4rem; font-weight: bold; }
.salary-highlight-item dd { display: flex; align-items: baseline; gap: 0.8rem; color: var(--salary-green); font-size: 2rem; font-weight: bold; }
.salary-highlight-item dd span { font-size: 6.4rem; line-height: 1; letter-spacing: -0.02em; }
.salary-highlight-box { padding: 2rem 2.4rem; border-radius: 6px; background-color: var(--salary-green); color: #e4eee8; font-size: 1.4rem; line-height: 1.8; }
.salary-highlight-box-title { margin-bottom: 0.6rem; color: var(--cl-wh); font-size: 1.6rem; font-weight: bold; line-height: 1.6; }

@media print, screen and (min-width: 640px) {
.salary-hero { padding: 7.6rem 0 6.4rem; }
.c-pageTitle + .salary .salary-hero { padding-top: 20rem; }
.salary-hero-grid { grid-template-columns: minmax(0, 1fr) 44rem; gap: 7.2rem; align-items: start; }
.salary-catch { font-size: 6.8rem; }
.salary-lead { margin-top: 2.8rem; font-size: 1.6rem; }
.salary-highlight { gap: 2.8rem; }
.salary-highlight-item dt { font-size: 1.5rem; }
.salary-highlight-item dd { font-size: 2.6rem; }
.salary-highlight-item dd span { font-size: 9.6rem; }
}


/* stats */
.salary-stats { background-color: var(--salary-bg); }
.salary-stats-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.salary-stats-item { padding: 2.4rem 0; }
.salary-stats-item:nth-child(-n+2) { border-bottom: 1px solid #cfddd4; }
.salary-stats-item:nth-child(odd) { padding-right: 1.6rem; border-right: 1px solid #cfddd4; }
.salary-stats-item:nth-child(even) { padding-left: 1.6rem; }
.salary-stats-item dt { font-size: 1.2rem; font-weight: bold; }
.salary-stats-item dd { margin-top: 0.6rem; color: var(--salary-green); font-size: 1.4rem; font-weight: bold; white-space: nowrap; }
.salary-stats-num { margin: 0 0.4rem 0 0.2rem; font-size: 3.4rem; line-height: 1.1; }

@media print, screen and (min-width: 640px) {
.salary-stats-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.salary-stats-item { padding: 3.2rem 2.4rem; }
.salary-stats-item:nth-child(-n+2) { border-bottom: 0; }
.salary-stats-item:nth-child(odd),
.salary-stats-item:nth-child(even) { padding-right: 2.4rem; padding-left: 2.4rem; border-right: 1px solid #cfddd4; }
.salary-stats-item:first-child { padding-left: 0; }
.salary-stats-item:last-child { padding-right: 0; border-right: 0; }
.salary-stats-item dt { font-size: 1.3rem; }
.salary-stats-item dd { font-size: 1.5rem; }
.salary-stats-num { font-size: 4.4rem; }
}


/* story */
.salary-story { display: grid; gap: 2rem; margin-top: 3.2rem; }
.salary-story-item { display: flex; flex-direction: column; gap: 1.6rem; padding: 3.2rem 2.4rem; border: 1px solid var(--salary-line); border-top: 8px solid var(--salary-green-md); border-radius: 12px; }
.salary-story-item._gold { border-top-color: var(--salary-gold-dk); }
.salary-story-cat { color: var(--salary-green-md); font-size: 1.3rem; font-weight: bold; }
.salary-story-item._gold .salary-story-cat { color: var(--salary-gold-txt); }
.salary-story-main { color: var(--salary-green); font-size: 1.6rem; font-weight: bold; line-height: 1.3; }
.salary-story-main .u-ff01 { font-size: 4.4rem; }
.salary-story-when { display: block; font-size: 1.8rem; }
.salary-story-line { display: flex; align-items: center; margin-top: 0.4rem; }
.salary-story-line::before,
.salary-story-line::after { content: ""; flex: none; border-radius: 50%; }
.salary-story-line::before { width: 12px; height: 12px; background-color: var(--salary-green-lt2); }
.salary-story-line::after { width: 16px; height: 16px; background-color: var(--salary-green-md); }
.salary-story-line span { flex: 1; height: 3px; }
.salary-story-line span:nth-child(1) { background-color: var(--salary-green-lt2); }
.salary-story-line span:nth-child(2) { background-color: var(--salary-green-lt); }
.salary-story-line span:nth-child(3) { background-color: var(--salary-green-md); }
.salary-story-item._gold .salary-story-line::before { background-color: var(--salary-green-lt); }
.salary-story-item._gold .salary-story-line::after { background-color: var(--salary-gold-dk); }
.salary-story-item._gold .salary-story-line span:nth-child(1) { background-color: var(--salary-green-lt); }
.salary-story-item._gold .salary-story-line span:nth-child(2) { flex: 2; background-color: var(--salary-gold-dk); }
.salary-story-term { display: flex; justify-content: space-between; margin-top: -0.8rem; color: var(--salary-muted); font-size: 1.2rem; font-weight: bold; }
.salary-story-txt { font-size: 1.4rem; line-height: 1.9; }

.salary-point { display: flex; align-items: center; gap: 1.6rem; margin-top: 2.4rem; padding: 2rem; border-radius: 12px; background-color: var(--salary-bg); color: var(--salary-green-md); }
.salary-point svg { flex: none; }
.salary-point p { color: var(--salary-txt); font-size: 1.4rem; line-height: 1.8; }
.salary-point strong { color: var(--salary-green); }

@media print, screen and (min-width: 640px) {
.salary-story { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3.2rem; margin-top: 4rem; }
.salary-story-item { padding: 3.2rem 3.2rem 3.6rem; }
.salary-story-main { font-size: 1.8rem; }
.salary-story-main .u-ff01 { font-size: 5.2rem; }
.salary-story-when { font-size: 2rem; }
.salary-story-txt { font-size: 1.5rem; }
.salary-point { gap: 2.4rem; padding: 2.4rem 3.2rem; }
.salary-point p { font-size: 1.5rem; }
}


/* chart（SPは横スクロール） */
.salary-chart { margin-top: 3.2rem; overflow-x: auto; }
.salary-chart-fig { min-width: 76rem; padding: 3.2rem 3.2rem 2.8rem; border: 1px solid var(--salary-line); border-radius: 8px; }
.salary-chart-area { position: relative; }
.salary-chart-area::before { content: ""; position: absolute; top: 0; bottom: 0; left: 60%; border-left: 2px solid var(--salary-gold-dk); }
.salary-chart-line { position: absolute; top: 0; left: calc(60% + 1rem); color: var(--salary-gold-txt); font-size: 1.3rem; font-weight: bold; line-height: 1.5; }
.salary-chart-line span { color: var(--salary-muted); font-weight: normal; }
.salary-chart-line strong { font-size: 1.8rem; }
.salary-chart-bars,
.salary-chart-label,
.salary-chart-stage { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 1rem; }
.salary-chart-bars { align-items: end; height: 27rem; border-bottom: 2px solid var(--salary-green); }
.salary-chart-bars li { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }
.salary-chart-bars p { color: #12251c; font-size: 1.2rem; font-weight: bold; line-height: 1.2; text-align: center; }
.salary-chart-bars p .u-ff01 { font-size: 1.8rem; }
.salary-chart-bars small { color: var(--salary-muted); font-size: 1.2rem; font-weight: normal; }
.salary-chart-bars em { padding: 1px 0.8rem; border-radius: 3px; background-color: var(--salary-green); color: var(--cl-wh); font-size: 1.1rem; font-style: normal; font-weight: bold; }
.salary-chart-bars li._zero p { color: var(--salary-muted); }
.salary-chart-bar { display: block; width: 100%; border-radius: 3px 3px 0 0; }
/* 棒の高さ（最多の8名＝20rem）。人数が変わったらここを直す */
.salary-chart-bars li:nth-child(1) .salary-chart-bar { height: 5rem; background-color: var(--salary-green-lt3); }
.salary-chart-bars li:nth-child(2) .salary-chart-bar { height: 7.5rem; background-color: var(--salary-green-lt2); }
.salary-chart-bars li:nth-child(3) .salary-chart-bar { height: 5rem; background-color: var(--salary-green-lt2); }
.salary-chart-bars li:nth-child(4) .salary-chart-bar { height: 20rem; background-color: var(--salary-green-lt); }
.salary-chart-bars li:nth-child(5) .salary-chart-bar { height: 10rem; background-color: var(--salary-green-lt); }
.salary-chart-bars li:nth-child(6) .salary-chart-bar { height: 5rem; background-color: var(--salary-green-lt); }
.salary-chart-bars li:nth-child(7) .salary-chart-bar { height: 12.5rem; background-color: var(--salary-green-md); }
.salary-chart-bars li:nth-child(8) .salary-chart-bar { height: 10rem; background-color: var(--salary-gold-dk); }
.salary-chart-bars li:nth-child(9) .salary-chart-bar { height: 2px; border-radius: 0; background-color: var(--salary-gold-dk); }
.salary-chart-bars li:nth-child(10) .salary-chart-bar { height: 2.5rem; background-color: var(--salary-gold-dk); }
.salary-chart-label { padding-top: 1rem; color: #12251c; font-size: 1.3rem; font-weight: bold; text-align: center; }
.salary-chart-unit { margin-top: 2px; color: var(--salary-muted); font-size: 1.1rem; text-align: right; }
.salary-chart-stage { margin-top: 1.4rem; font-size: 1.2rem; font-weight: bold; line-height: 1.4; text-align: center; }
.salary-chart-stage li { padding-top: 0.8rem; border-top: 4px solid; }
.salary-chart-stage a { color: #12251c; }
.salary-chart-stage a:hover { text-decoration: underline; }
.salary-chart-stage ._a { border-color: var(--salary-green-lt3); }
.salary-chart-stage ._b { grid-column: span 2; border-color: var(--salary-green-lt2); }
.salary-chart-stage ._c { grid-column: span 3; border-color: var(--salary-green-lt); }
.salary-chart-stage ._d { border-color: var(--salary-green-md); }
.salary-chart-stage ._e { grid-column: span 3; border-color: var(--salary-gold-dk); }

@media print, screen and (min-width: 640px) {
.salary-chart { margin-top: 4rem; }
}


/* stage */
.salary-stage-item { display: grid; gap: 1.6rem; padding: 2.8rem 0; border-top: 1px solid var(--salary-line); }
.salary-stage-item:last-child { border-bottom: 1px solid var(--salary-line); }
.salary-stage-head::before { content: ""; display: block; width: 3.2rem; height: 6px; margin-bottom: 1.2rem; border-radius: 2px; }
.salary-stage-item._a .salary-stage-head::before { background-color: var(--salary-green-lt3); }
.salary-stage-item._b .salary-stage-head::before { background-color: var(--salary-green-lt2); }
.salary-stage-item._c .salary-stage-head::before { background-color: var(--salary-green-lt); }
.salary-stage-item._d .salary-stage-head::before { background-color: var(--salary-green-md); }
.salary-stage-item._e .salary-stage-head::before { background-color: var(--salary-gold-dk); }
.salary-stage-name { color: var(--salary-green); font-size: 1.8rem; font-weight: bold; }
.salary-stage-band { margin-top: 2px; color: #12251c; font-size: 1.4rem; font-weight: bold; }
.salary-stage-num { margin-top: 2px; color: var(--salary-muted); font-size: 1.3rem; }
.salary-stage-body { min-width: 0; font-size: 1.4rem; line-height: 1.9; }
.salary-stage-body h4 { margin-bottom: 0.8rem; color: var(--salary-green); font-size: 1.6rem; font-weight: bold; }
.salary-stage-list { display: flex; flex-direction: column; gap: 0.6rem; margin: 1.2rem 0; }

@media print, screen and (min-width: 640px) {
.salary-stage-item { grid-template-columns: 26rem minmax(0, 1fr); gap: 4.8rem; }
.salary-stage-body { font-size: 1.5rem; }
.salary-stage-body h4 { font-size: 1.7rem; }
}


/* policy（評価の考え方） */
.salary-policy { margin-top: 7.2rem; padding: 6.4rem 0; background-color: var(--salary-green); color: var(--cl-wh); }
.salary-policy-cat { margin-bottom: 1.6rem; color: var(--salary-gold-lt); font-size: 1.4rem; font-weight: bold; }
.salary-policy-title { font-size: 2.8rem; font-weight: bold; line-height: 1.5; }
.salary-policy-lead { max-width: 40em; margin-top: 2rem; color: #e4eee8; font-size: 1.5rem; line-height: 2; }
.salary-policy-subtitle { margin: 4.8rem 0 0.8rem; color: var(--salary-gold-lt); font-size: 2rem; font-weight: bold; }
.salary-policy-sublead { margin-bottom: 2.4rem; color: #c5d8cd; font-size: 1.4rem; }
.salary-policy-note { margin-top: 2.4rem; color: #c5d8cd; font-size: 1.3rem; line-height: 1.8; }

/* SPは縦に積み、PCは階段状に並べて点線の弧を重ねる */
.salary-step { position: relative; }
.salary-step-arc,
.salary-step-max { display: none; }
.salary-step-list { display: grid; gap: 1.2rem; }
.salary-step-item { padding: 2rem 2.2rem; border-radius: 10px; background-color: #1a5640; }
.salary-step-item:nth-child(2) { background-color: #23664c; }
.salary-step-item:nth-child(3) { background-color: #2f7758; }
.salary-step-item:nth-child(4) { background-color: var(--salary-gold); color: #1f1608; }
.salary-step-no { display: inline-flex; justify-content: center; align-items: center; width: 3.2rem; height: 3.2rem; border-radius: 50%; background-color: var(--salary-gold); color: #1f1608; font-size: 1.5rem; }
.salary-step-item:nth-child(4) .salary-step-no { background-color: var(--salary-green); color: var(--cl-wh); }
.salary-step-title { margin: 1.2rem 0 0.4rem; font-size: 1.7rem; font-weight: bold; line-height: 1.4; }
.salary-step-item p:last-child { color: #d6e5dc; font-size: 1.3rem; line-height: 1.7; }
.salary-step-item:nth-child(4) p:last-child { color: #2a1e08; }

.salary-cycle { display: grid; gap: 2.4rem; margin-top: 4rem; padding: 2.8rem 2.4rem; border-radius: 12px; background-color: #134a36; }
.salary-cycle-txt { display: flex; align-items: center; gap: 1.6rem; color: var(--salary-gold-lt); }
.salary-cycle-txt svg { flex: none; }
.salary-cycle-txt p { color: var(--cl-wh); font-size: 1.6rem; font-weight: bold; line-height: 1.6; }
.salary-cycle-bars,
.salary-cycle-label { display: flex; gap: 1.2rem; }
.salary-cycle-bars { align-items: flex-end; height: 9.6rem; border-bottom: 2px solid #4f7a66; }
.salary-cycle-bars span { flex: 1; border-radius: 3px 3px 0 0; }
.salary-cycle-bars span:nth-child(1) { height: 3.6rem; background-color: #2f7758; }
.salary-cycle-bars span:nth-child(2) { height: 5.8rem; background-color: var(--salary-green-lt); }
.salary-cycle-bars span:nth-child(3) { height: 8.4rem; background-color: var(--salary-gold); }
.salary-cycle-bars span:nth-child(4) { height: 9.6rem; border: 2px dashed var(--salary-gold); border-bottom: 0; }
.salary-cycle-label { padding-top: 0.6rem; color: #c5d8cd; font-size: 1.2rem; font-weight: bold; text-align: center; }
.salary-cycle-label span { flex: 1; }
.salary-cycle-fig figcaption { margin-top: 0.4rem; color: #c5d8cd; font-size: 1.1rem; text-align: right; }

@media print, screen and (min-width: 640px) {
.salary-policy { margin-top: 11.2rem; padding: 8.8rem 0; }
.salary-policy-title { font-size: 4rem; }
.salary-policy-lead { font-size: 1.6rem; }
.salary-policy-subtitle { margin-top: 5.6rem; font-size: 2.2rem; }

.salary-step { height: 42rem; border-bottom: 3px solid var(--salary-gold); }
.salary-step-arc { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.salary-step-arc path { fill: none; stroke: var(--salary-gold-lt); stroke-width: 2.5; stroke-dasharray: 2 8; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.salary-step-arc path._arrow { stroke: var(--salary-gold); stroke-width: 3; stroke-dasharray: 10 8; }
.salary-step-arc path._head { stroke: var(--salary-gold); stroke-width: 3; stroke-dasharray: none; stroke-linejoin: round; }
.salary-step-max { display: block; position: absolute; top: -1.4rem; right: 9%; color: var(--salary-gold-lt); font-size: 1.5rem; font-weight: bold; line-height: 1.4; }
.salary-step-list { position: absolute; right: 0; bottom: 0; left: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.6rem; align-items: end; }
.salary-step-item { border-radius: 10px 10px 0 0; }
.salary-step-item:nth-child(1) { height: 18rem; }
.salary-step-item:nth-child(2) { height: 24rem; }
.salary-step-item:nth-child(3) { height: 30rem; }
.salary-step-item:nth-child(4) { height: 36rem; }

.salary-cycle { grid-template-columns: minmax(0, 1fr) 32rem; gap: 4rem; align-items: center; padding: 2.8rem 3.2rem; }
.salary-cycle-txt p { font-size: 1.7rem; }
}


/* faq */
.salary-faq { display: grid; gap: 3.2rem; }
.salary-faq-list { min-width: 0; border-top: 1px solid var(--salary-line); }
.salary-faq-item { border-bottom: 1px solid var(--salary-line); }
.salary-faq-item summary { display: flex; align-items: center; gap: 1.6rem; min-height: 4.4rem; padding: 2.2rem 0.4rem; color: #12251c; font-size: 1.5rem; font-weight: bold; list-style: none; cursor: pointer; }
.salary-faq-item summary::-webkit-details-marker { display: none; }
.salary-faq-item summary::after { content: "＋"; margin-left: auto; color: var(--salary-green); font-size: 1.8rem; font-weight: normal; }
.salary-faq-item[open] summary::after { content: "−"; }
.salary-faq-item[open]._closing summary::after { content: "＋"; }
.salary-faq-q { color: var(--salary-green-md); font-size: 1.8rem; }
.salary-faq-a { display: flex; gap: 1.6rem; padding: 0 0.4rem 2.4rem; overflow: hidden; }
.salary-faq-a span { color: #9a7a35; font-size: 1.8rem; }
.salary-faq-a p { font-size: 1.4rem; line-height: 1.9; }

@media print, screen and (min-width: 640px) {
.salary-faq { grid-template-columns: 26rem minmax(0, 1fr); gap: 6.4rem; }
.salary-faq-item summary { font-size: 1.6rem; }
.salary-faq-a p { font-size: 1.5rem; }
}


/* cta */
.salary-cta { display: grid; gap: 3.2rem; margin: 6.4rem 0 8rem; padding: 4rem 2.4rem; border-radius: 16px; background-color: var(--salary-green); color: var(--cl-wh); }
.salary-cta-title { font-size: 2.6rem; font-weight: bold; line-height: 1.45; }
.salary-cta-txt p:last-child { margin-top: 1.6rem; color: #e4eee8; font-size: 1.4rem; line-height: 1.9; }
.salary-cta-btn { display: inline-flex; justify-content: center; align-items: center; gap: 1.2rem; padding: 2rem 3.2rem; border-radius: 999px; background-color: var(--salary-gold); color: #1f1608; font-size: 1.6rem; font-weight: bold; }
.salary-cta-btn:hover { background-color: var(--salary-gold-lt); color: #1f1608; }

@media print, screen and (min-width: 640px) {
.salary-cta { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4.8rem; margin: 9.6rem 0 11.2rem; padding: 6.4rem 5.6rem; }
.salary-cta-title { font-size: 3.6rem; }
.salary-cta-txt p:last-child { font-size: 1.5rem; }
.salary-cta-btn { padding: 2.2rem 4rem; font-size: 1.7rem; }
}