/* ==========================================================
   給与明細：トップページ
========================================================== */
.salary-statements-section { padding: 120px 32px; background: #fcf7fb; }
.salary-statements-section__inner { width: 100%; max-width: 1200px; margin: 0 auto; }
.salary-statements-section__header { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 480px); align-items: end; gap: 48px; margin-bottom: 48px; }
.salary-statements-section__eyebrow, .salary-statement-archive__eyebrow, .salary-statement-single__eyebrow, .salary-statement-single__section-label { margin: 0 0 12px; font-family: "Poppins", sans-serif; font-size: 13px; line-height: 1.5; letter-spacing: .2em; color: #e88fa4; }
.salary-statements-section__title, .salary-statement-archive__title { margin: 0; font-family: "Shippori Mincho", serif; font-size: clamp(38px, 4vw, 54px); font-weight: 400; line-height: 1.45; letter-spacing: .04em; color: #2f3440; }
.salary-statements-section__description, .salary-statement-archive__description { margin: 0; font-size: 15px; line-height: 2; letter-spacing: .03em; color: #686c73; }
.salary-statements-section__carousel { position: relative; }
.salary-statements-section__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 72px) / 4); gap: 24px; padding: 4px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.salary-statements-section__track::-webkit-scrollbar { display: none; }
.salary-statements-section__controls { display: flex; justify-content: flex-end; gap: 10px; margin: 0 4px 16px; }
.salary-statements-section__control { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; color: #d97f96; background: #fff; border: 1px solid rgba(232, 143, 164, .35); border-radius: 50%; cursor: pointer; transition: color .2s ease, background-color .2s ease, transform .2s ease; }
.salary-statements-section__control:hover, .salary-statements-section__control:focus-visible { color: #fff; background: #e88fa4; transform: translateY(-2px); }
.salary-statements-section__footer { display: flex; justify-content: center; margin-top: 48px; }
.salary-statements-section__button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-width: 270px; min-height: 56px; padding: 12px 28px; font-family: "Zen Kaku Gothic", sans-serif; font-size: 15px; font-weight: 700; line-height: 1.5; letter-spacing: .04em; color: #fff; text-align: center; text-decoration: none; background: #e88fa4; border: 1px solid #e88fa4; border-radius: 8px; transition: gap .25s ease, color .25s ease, background-color .25s ease; }
.salary-statements-section__button:hover, .salary-statements-section__button:focus-visible { gap: 16px; color: #e88fa4; background: #fff; }

/* ==========================================================
   給与明細カード（トップ／一覧共通）
========================================================== */
.salary-statement-card { min-width: 0; scroll-snap-align: start; }
.salary-statement-card__link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; background: #fff; border: 1px solid rgba(232, 143, 164, .22); border-radius: 18px; overflow: hidden; box-shadow: 0 8px 24px rgba(77, 61, 66, .04); transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
.salary-statement-card__link:hover, .salary-statement-card__link:focus-visible { border-color: rgba(232, 143, 164, .52); box-shadow: 0 18px 38px rgba(77, 61, 66, .1); transform: translateY(-4px); }
.salary-statement-card__image { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #f8eaf0; }
.salary-statement-card__thumbnail { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.salary-statement-card__link:hover .salary-statement-card__thumbnail, .salary-statement-card__link:focus-visible .salary-statement-card__thumbnail { transform: scale(1.04); }
.salary-statement-card__placeholder, .salary-statement-single__placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: #cb9ca9; font-family: "Poppins", sans-serif; font-size: 11px; letter-spacing: .16em; background: #f8eaf0; }
.salary-statement-card__content { display: flex; flex: 1; flex-direction: column; padding: 22px 20px 20px; }
.salary-statement-card__month { margin: 0 0 7px; font-family: "Poppins", sans-serif; font-size: 11px; line-height: 1.5; letter-spacing: .08em; color: #a9959c; }
.salary-statement-card__name { margin: 0; font-family: "Zen Kaku Gothic", sans-serif; font-size: 19px; font-weight: 700; line-height: 1.5; color: #373b43; }
.salary-statement-card__profile { min-height: 1.6em; margin: 5px 0 16px; font-size: 12px; line-height: 1.6; color: #8e8589; }
.salary-statement-card__amount { margin: 0 0 18px; font-family: "Poppins", sans-serif; font-size: clamp(27px, 2.2vw, 34px); font-weight: 600; line-height: 1.15; letter-spacing: -.02em; color: #e27898; }
.salary-statement-card__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; padding: 14px 0; border-top: 1px solid #f0e8ea; border-bottom: 1px solid #f0e8ea; }
.salary-statement-card__stats div { min-width: 0; text-align: center; }
.salary-statement-card__stats dt { margin: 0 0 3px; font-size: 10px; line-height: 1.4; color: #9d9598; }
.salary-statement-card__stats dd { margin: 0; font-family: "Poppins", "Noto Sans JP", sans-serif; font-size: 13px; font-weight: 600; line-height: 1.4; color: #55505a; white-space: nowrap; }
.salary-statement-card__more { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 18px; font-size: 12px; font-weight: 700; line-height: 1.5; color: #d97f96; transition: gap .2s ease, color .2s ease; }
.salary-statement-card__link:hover .salary-statement-card__more, .salary-statement-card__link:focus-visible .salary-statement-card__more { gap: 12px; color: #bd657d; }

/* ==========================================================
   給与明細一覧
========================================================== */
.salary-statement-archive__hero { padding: 100px 32px 80px; text-align: center; background: #fcf7fb; }
.salary-statement-archive__hero-inner, .salary-statement-archive__inner { width: 100%; max-width: 1200px; margin: 0 auto; }
.salary-statement-archive__description { max-width: 660px; margin: 22px auto 0; }
.salary-statement-archive__list { padding: 90px 32px 120px; background: #fff; }
.salary-statement-archive__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 24px; }
.salary-statement-archive__pagination { margin-top: 56px; }
.salary-statement-archive__pagination .page-numbers { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.salary-statement-archive__pagination a, .salary-statement-archive__pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; padding: 5px 10px; color: #a76277; text-decoration: none; border: 1px solid #ead7dd; border-radius: 6px; }
.salary-statement-archive__pagination .current { color: #fff; background: #e88fa4; border-color: #e88fa4; }
.salary-statement-archive__empty { margin: 0; padding: 40px; color: #777; text-align: center; background: #fcf7fb; border-radius: 12px; }

/* ==========================================================
   給与明細詳細
========================================================== */
.salary-statement-single { background: #fff; }
.salary-statement-single__hero { padding: 80px 32px; background: #fcf7fb; }
.salary-statement-single__hero-inner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(300px, .55fr); align-items: center; gap: 70px; width: 100%; max-width: 1080px; margin: 0 auto; }
.salary-statement-single__month { margin: 0 0 12px; font-size: 14px; line-height: 1.6; color: #a27480; }
.salary-statement-single__title { margin: 0; font-family: "Shippori Mincho", serif; font-size: clamp(32px, 4vw, 48px); font-weight: 400; line-height: 1.55; letter-spacing: .03em; color: #2f3440; }
.salary-statement-single__profile { margin: 16px 0 24px; font-size: 14px; line-height: 1.7; color: #777075; }
.salary-statement-single__amount { margin: 0; font-family: "Poppins", sans-serif; font-size: clamp(46px, 5.2vw, 68px); font-weight: 600; line-height: 1; letter-spacing: -.04em; color: #e27898; }
.salary-statement-single__amount-note { margin: 9px 0 0; font-size: 12px; color: #8f8589; }
.salary-statement-single__hero-image { aspect-ratio: 4 / 5; overflow: hidden; background: #f8eaf0; border-radius: 20px; }
.salary-statement-single__thumbnail { display: block; width: 100%; height: 100%; object-fit: cover; }
.salary-statement-single__inner { width: 100%; max-width: 900px; margin: 0 auto; padding: 90px 32px 120px; box-sizing: border-box; }
.salary-statement-single h2 { margin: 0; font-family: "Shippori Mincho", serif; font-size: clamp(27px, 3vw, 34px); font-weight: 400; line-height: 1.55; letter-spacing: .03em; color: #343840; }
.salary-statement-single__summary { padding: 42px; background: #fff9fa; border: 1px solid #f2e3e7; border-radius: 16px; }
.salary-statement-single__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 30px 0 0; }
.salary-statement-single__stats div { padding: 16px 10px; text-align: center; background: #fff; border-radius: 10px; }
.salary-statement-single__stats dt { margin: 0 0 7px; font-size: 12px; line-height: 1.5; color: #8f8589; }
.salary-statement-single__stats dd { margin: 0; font-family: "Poppins", "Noto Sans JP", sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; color: #d86f91; }
.salary-statement-single__stats dd span { margin-left: 2px; font-family: "Noto Sans JP", sans-serif; font-size: 12px; font-weight: 400; color: #777075; }
.salary-statement-single__comment, .salary-statement-single__time-flow, .salary-statement-single__details, .salary-statement-single__content { margin-top: 72px; }
.salary-statement-single__section-label { margin-bottom: 10px; font-size: 11px; }
.salary-statement-single__comment blockquote { position: relative; margin: 28px 0 0; padding: 32px 36px; font-size: 16px; line-height: 2; color: #5e5b60; background: #fcf7fb; border: 0; border-radius: 12px; }
.salary-statement-single__comment blockquote::before { content: "“"; position: absolute; top: 10px; left: 16px; font-family: "Shippori Mincho", serif; font-size: 54px; line-height: 1; color: #ecc1ce; }
.salary-statement-single__time-flow-content { margin-top: 28px; padding: 30px 34px; font-size: 16px; line-height: 2.1; color: #57545a; background: #fff; border: 1px solid #eee3e6; border-radius: 12px; }
.salary-statement-single__details table { width: 100%; margin-top: 28px; border-collapse: collapse; font-size: 15px; line-height: 1.7; }
.salary-statement-single__details th, .salary-statement-single__details td { padding: 18px 20px; text-align: left; border-bottom: 1px solid #eee7e8; }
.salary-statement-single__details th { width: 34%; color: #6d6669; background: #fcf8f9; }
.salary-statement-single__details-amount { font-family: "Poppins", "Noto Sans JP", sans-serif; font-size: 21px; font-weight: 600; color: #d86f91; }
.salary-statement-single__content > *:first-child { margin-top: 0; }
.salary-statement-single__notice { margin: 64px 0 0; padding: 18px 20px; font-size: 12px; line-height: 1.9; color: #716b6e; background: #f6f5f4; border-radius: 8px; }
.salary-statement-single__back { margin: 32px 0 0; text-align: center; }
.salary-statement-single__back a { display: inline-flex; align-items: center; gap: 9px; color: #c66f88; font-size: 14px; font-weight: 700; text-decoration: none; }

@media (max-width: 960px) {
    .salary-statements-section__track { grid-auto-columns: calc((100% - 24px) / 2); }
    .salary-statement-archive__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .salary-statement-single__hero-inner { gap: 40px; }
    .salary-statement-single__stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
    .salary-statements-section { padding: 72px 16px; }
    .salary-statements-section__header { display: block; margin-bottom: 32px; }
    .salary-statements-section__description { margin-top: 18px; font-size: 14px; }
    .salary-statements-section__track { grid-auto-columns: 82%; gap: 16px; }
    .salary-statements-section__controls { display: none; }
    .salary-statements-section__footer { margin-top: 36px; }
    .salary-statements-section__button { width: 100%; min-width: 0; }
    .salary-statement-archive__hero { padding: 72px 16px 58px; }
    .salary-statement-archive__list { padding: 60px 16px 80px; }
    .salary-statement-archive__grid { grid-template-columns: 1fr; gap: 20px; }
    .salary-statement-single__hero { padding: 56px 16px; }
    .salary-statement-single__hero-inner { grid-template-columns: 1fr; gap: 30px; }
    .salary-statement-single__hero-image { max-width: 360px; margin: 0 auto; }
    .salary-statement-single__inner { padding: 60px 16px 80px; }
    .salary-statement-single__summary { padding: 28px 20px; }
    .salary-statement-single__stats { gap: 8px; margin-top: 24px; }
    .salary-statement-single__stats div { padding: 13px 6px; }
    .salary-statement-single__stats dd { font-size: 21px; }
    .salary-statement-single__comment, .salary-statement-single__time-flow, .salary-statement-single__details, .salary-statement-single__content { margin-top: 54px; }
    .salary-statement-single__comment blockquote, .salary-statement-single__time-flow-content { padding: 25px 22px; font-size: 15px; }
    .salary-statement-single__details th, .salary-statement-single__details td { padding: 15px 12px; }
}
