:root {
    --accent: #3e8c7c;
    --accent-dark: #2d6b5e;
    --accent-light: #e8f5f2;
    --text: #1a1a1a;
    --text-sub: #555;
    --bg: #fff;
    --border: #e0e0e0;
    --card-bg: #f5f5f5;
    --pink-bg: #fce8e8;
    --blue-bg: #e8ecf8;
    --font: "Noto Sans JP", sans-serif;
    --red: #900;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.7;
}

.wrapper {
    /*box-shadow: 0 0 5px 0 rgba(0, 0, 0, .1);*/
    margin: 0 auto;
    max-width: 1920px;
    min-width: 1000px;
    width: 100%;
}

.red {
    color: var(--red);
}

/* ===== COMMON PARTS ==== */
/* ===== HEADER ===== */
.global-hdr {
    align-items: center;
    background: #fff;
    border-bottom: 1px solid var(--border);
    display: flex;
    gap: 10px;
    height: 60px;
    padding: 0 clamp(10px, calc(1.52174vw - 5.2174px), 24px);
    position: sticky;
    top: 0;
    z-index: 100;
}

.logo {
    color: var(--text);
    flex-shrink: 0;
    font-size: clamp(16px, calc(0.43478vw + 11.6522px), 20px);
    font-weight: 700;
    letter-spacing: clamp(-0.5px, calc(0.07609vw - 1.2609px), 0.2px);
    white-space: nowrap;
}

.logo a {
    color: var(--text);
    text-decoration: none;
}

nav {
    display: flex;
    align-items: center;
    gap: clamp(12px, calc(1.52174vw - 3.2174px), 26px);
    margin-left: auto;
    flex-wrap: wrap;
}

nav a {
    text-decoration: none;
    color: var(--text);
    font-size: clamp(14px, calc(0.10870vw + 12.913px), 15px);
    letter-spacing: clamp(-0.5px, calc(0.05435vw - 1.0435px), 0px);
    white-space: nowrap;
}

nav a:hover {
    color: var(--accent);
    font-weight: 500;
}

.btn-apply,
.btn-portal {
    background: var(--accent);
    border: none;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    font-family: var(--font);
    font-size: clamp(14px, calc(0.10870vw + 12.913px), 15px);
    padding: 9px clamp(8px, calc(1.30435vw - 5.0435px), 20px);
    text-decoration: none;
    white-space: nowrap;
}

.btn-apply:hover,
.btn-portal:hover {
    background: var(--accent-dark);
    color: #fff;
}

/* ===== FOOTER ===== */
footer {
    background: #f0f0f0;
    padding: 40px 32px;
}

.footer-inner {
    max-width: 1040px;
    margin: 0 auto;
}

.footer-top {
    display: flex;
    align-items: center;
    gap: 48px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.footer-logo {
    font-size: 15px;
    font-weight: 700;
}

.footer-nav {
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
}

.footer-nav a {
    text-decoration: none;
    font-size: 14px;
    color: var(--text-sub);
}

.footer-nav a:hover {
    color: var(--accent);
}

.footer-copy {
    font-size: 14px;
    color: #999;
}


/* ===== HERO ===== */
.hero {
    align-items: center;
    background: #b2d8d2 url(../img/staff-recruitment/staff-recruitment-mv_pc.svg) no-repeat center / cover;
    display: flex;
    height: 560px;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.hero-content {
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    background: rgba(255, 255, 255, 0.65);
    border-radius: 2px;
    padding: 40px 60px;
    position: relative;
    text-align: center;
    z-index: 2;
}

.hero-ttl {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin-bottom: 16px;
}

.hero-txt {
    color: var(--text-sub);
    font-size: 16px;
    line-height: 2;
    margin-bottom: 28px;
}

.btn-outline {
    background: #fff;
    border: 1.5px solid var(--text);
    color: var(--text);
    cursor: pointer;
    display: inline-block;
    font-size: 16px;
    padding: 10px 36px;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}

.btn-outline:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

/* ===== PAGE HERO ===== */
.page-hero {
    align-items: center;
    background: #5fa899;
    display: flex;
    height: 240px;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.recruit-news .page-hero {
    background: linear-gradient(135deg, #3E8C7C 0%, #2d5a6e 40%, #3a4a7a 70%, #4a3a6a 100%)
}

.recruit-faq .page-hero {
    background: linear-gradient(135deg, #3E8C7C 0%, #2d5a6e 40%, #3a4a7a 70%, #4a3a6a 100%);
}

.recruit-contact .page-hero {
    background: linear-gradient(135deg, #666 0%, #888 50%, #777 100%);
}

.recruit-requirement .page-hero {
    background: linear-gradient(135deg, #3E8C7C 0%, #2d5a6e 40%, #3a4a7a 70%, #4a3a6a 100%);
}

.page-hero::after {
    content: "";
    display: block;
    height: 100%;
    left: 50%;
    opacity: 0.75;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}

.recruit-about .page-hero::after {
    background: #5fa899 url(../img/staff-recruitment/about-mv_pc.svg) no-repeat center top / 1920px auto;
}

.recruit-news .page-hero::after {
    background: linear-gradient(135deg, rgba(255, 200, 100, 0.15) 0%, transparent 40%),
        linear-gradient(225deg, rgba(100, 150, 200, 0.2) 0%, transparent 50%),
        url(../img/staff-recruitment/news-mv_pc.svg) no-repeat center top / 1920px auto
}

.recruit-requirement .page-hero::after {
    background: linear-gradient(135deg, rgba(255, 200, 100, 0.15) 0%, transparent 40%),
        linear-gradient(225deg, rgba(100, 150, 200, 0.2) 0%, transparent 50%),
        url(../img/staff-recruitment/requirement-mv_pc.svg) no-repeat center top / 1920px auto
}

.recruit-faq .page-hero::after {
    background: url(../img/staff-recruitment/faq-mv_pc.svg) no-repeat center top / 1920px auto;
}

.recruit-contact .page-hero::after {
    background: url(../img/staff-recruitment/contact-mv_pc.svg) no-repeat center top / 1500px auto;
}

.page-hero-title {
    color: #fff;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 0.1em;
    position: relative;
    z-index: 2;
}

/* ===== BREADCRUMB ===== */
.breadcrumb {
    border-bottom: 1px solid var(--border);
    color: var(--text-sub);
    font-size: 14px;
    padding: 12px 40px;
    text-align: right;
}

.breadcrumb-list {
    display: flex;
    gap: 8px;
    justify-content: end;
    list-style: none;
}

.breadcrumb-item:not(.current)::after {
    content: "／";
    margin-left: 8px;
}

.breadcrumb-item a {
    color: var(--text-sub);
    text-decoration: none;
}

.breadcrumb-item a:hover {
    color: var(--accent);
}


/* ===== SECTION COMMON ===== */
.section {
    padding: 80px 0;
}

.content-section {
    max-width: 900px;
    margin: 0 auto;
    padding: 64px 40px;
}

.section-inner {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 32px;
}

.section-title {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.06em;
    margin-bottom: 40px;
    text-align: center;
}

.content-section .section-title,
.jobs-section .section-title,
.organigram-section .section-title,
.recruit-news .news-section .section-title {
    margin-bottom: 28px;
    letter-spacing: 0.02em;
    text-align: left;
}

.organigram-section .section-title {
    margin: 0 auto 60px;
    max-width: 1100px;
}

.jobs-section .section-title {
    margin-bottom: 40px;
}

.section-txt {
    font-size: 15px;
    color: var(--text-sub);
}

.content-section .section-txt {
    color: var(--text);
    margin-bottom: 12px;
    line-height: 2;
}

/* ===== NEWS ===== */
.news-list {
    list-style: none;
    border-top: 1px solid var(--border);
}

.news-item {
    display: grid;
    gap: 0 28px;
    grid-template-columns: 80px 1fr;
    padding: 20px 0;
    border-bottom: 1px solid var(--border);
    align-items: flex-start;
}

.news-date {
    color: var(--text-sub);
    font-size: 14px;
    grid-row: 1 / 4;
    line-height: 1.2;
    min-width: 80px;
    white-space: nowrap;
}

.news-ttl {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 6px;
}

.news-ttl a {
    color: #333;
    display: block;
    text-decoration: none;
    width: fit-content;
}

.hover-underline::after {
    border-bottom: 1px solid #333;
    content: "";
    display: block;
    transition: width .2s;
    width: 0;
}

.hover-underline:hover::after {
    width: 100%;
}

.news-txt {
    font-size: 15px;
    color: var(--text-sub);
    margin-bottom: 8px;
}

.news-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    list-style: none;
}

.news-tag {
    background: var(--accent-light);
    border-radius: 2px;
    color: var(--accent);
    display: inline-block;
    font-size: 12px;
    padding: 2px 10px;
    text-decoration: none;
    width: fit-content;
}

.btn-outline.btn-more {
    display: block;
    margin: 36px auto 0;
    padding: 10px 40px;
    width: fit-content;
}

.news-tag-list {
    display: flex;
    flex-wrap: wrap;
    font-weight: 500;
    gap: 0 2em;
    list-style: none;
    margin-bottom: 30px;
}

.news-tag-list a {
    color: #333;
    text-decoration: none;
}

.news-detail-section {
    margin: 0 auto;
    width: 900px;
}

.news-detail-hdr {
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr auto;
}

.news-detail-ttl {
    font-size: 32px;
    grid-column: 1 / 3;
}

.news-detail-section .news-date {
    grid-row: auto;
}

.news-detail-body {
    margin: 50px 0 120px;
}

.news-detail-btn {
    text-align: center;
}

/* ===== ROUTE INTRO ===== */
.route-intro {
    padding: 0 0 24px;
    text-align: center;
}

.route-intro .section-txt {
    margin-bottom: 25px;
}

/* ===== TABS ===== */
.tabs-wrap {
    max-width: 1040px;
    margin: 0 auto 0;
    padding: 0 32px;
}

[data-tab="tab-normal"] {
    --tab-col: #fce8e8;
    --shadow-position-x: -5px;
}

[data-tab="tab-referral"] {
    --tab-col: #e8ecf8;
    --shadow-position-x: 5px
}

.tab-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 0 auto -1px;
    max-width: 780px;
    overflow: hidden;
    position: relative
}

.tab-btn {
    background: var(--tab-col);
    border: 1px solid var(--border);
    border-radius: 10px 10px 0 0;
    box-shadow: var(--shadow-position-x) -5px 10px -10px rgba(0, 0, 0, .5) inset;
    color: var(--text-sub);
    cursor: pointer;
    font-size: 17px;
    font-family: var(--font);
    margin-top: .5em;
    padding: 14px;
}

.tab-btn.active {
    border-bottom-color: transparent;
    box-shadow: none;
    color: var(--text);
    font-weight: 700;
    margin-top: 0;
}

.tab-btn:hover {
    opacity: 0.85;
}

/* ===== TAB PANELS ===== */
.tab-panel {
    border: 1px solid var(--border);
    display: none;
}

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

/* タブ部分 */
.tab-panel {
    background-color: var(--tab-col);
    min-height: 500px;
    padding: 48px 40px;
}

.tab-panel[data-tab="tab-normal"] {
    --step-col: #e07040;
    background-image:
        radial-gradient(ellipse 90px 60px at 10% 30%, rgba(255, 200, 200, 0.5) 0%, transparent 100%),
        radial-gradient(ellipse 70px 90px at 80% 60%, rgba(255, 180, 180, 0.4) 0%, transparent 100%),
        radial-gradient(ellipse 60px 60px at 50% 80%, rgba(255, 160, 160, 0.3) 0%, transparent 100%),
        radial-gradient(ellipse 80px 50px at 20% 70%, rgba(255, 210, 210, 0.4) 0%, transparent 100%),
        radial-gradient(ellipse 100px 70px at 70% 20%, rgba(255, 190, 190, 0.3) 0%, transparent 100%);
}

.tab-panel[data-tab="tab-referral"] {
    background-image:
        radial-gradient(ellipse 90px 60px at 15% 25%, rgba(180, 200, 240, 0.5) 0%, transparent 100%),
        radial-gradient(ellipse 70px 90px at 75% 55%, rgba(160, 180, 230, 0.4) 0%, transparent 100%),
        radial-gradient(ellipse 60px 60px at 45% 75%, rgba(140, 170, 225, 0.3) 0%, transparent 100%),
        radial-gradient(ellipse 80px 50px at 25% 65%, rgba(190, 205, 235, 0.4) 0%, transparent 100%),
        radial-gradient(ellipse 100px 70px at 65% 15%, rgba(170, 190, 232, 0.3) 0%, transparent 100%);
}

/* Steps */
.step-tbl {
    --circle-size: 62px;
    --gap: 30px;
    border-collapse: separate;
    border-spacing: var(--gap);
    counter-reset: step-counter;
    margin: 0 auto;
    width: fit-content;
}

.tab-panel[data-tab="tab-normal"] .step-tbl {
    --grid-width: 360px;
    --step-col: #e07040;
}

.tab-panel[data-tab="tab-referral"] tr> :nth-child(1) {
    --step-col: #3a4fa0;
}

.tab-panel[data-tab="tab-referral"] tr> :nth-child(2) {
    --step-col: #3e8c7c;
}

.step-tbl-caption {
    font-weight: 500;
    margin: 0 auto;
    width: fit-content;
}

.step-tbl tbody tr {
    counter-increment: step-counter;
}

.step-tbl-hdr {
    background-color: var(--step-col);
    border-radius: 4px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
    margin-bottom: 8px;
    padding: 12px 8px;
    position: relative;
    text-align: center;
}

.step-tbl-item {
    background-color: #fff;
    border-radius: 6px;
    height: var(--circle-size);
    position: relative;
    width: var(--grid-width);
}

.tab-panel[data-tab="tab-referral"] .step-tbl {
    --grid-width: 260px;
}

.blank-item {
    position: relative;
}

.step-tbl-hdr::after,
tr:not(:last-of-type) .step-tbl-item::after,
.blank-item::before,
.blank-item::after {
    bottom: calc((var(--gap) - 1em) / -2);
    content: "▼";
    text-align: center;
    font-size: 24px;
    color: var(--step-col);
    left: calc(var(--grid-width) / 2);
    line-height: 1;
    position: absolute;
    transform: translate(-50%, 100%)
}


.step-tbl tbody tr:nth-of-type(3) .blank-item::before {
    bottom: auto;
    top: calc((var(--gap) - 1em) / -2);
    transform: translate(-50%, -100%)
}

.step-tbl tbody tr:nth-of-type(3) .blank-item::after {
    bottom: auto;
    top: 50%;
    transform: translate(-50%, 25%);
}

.step-tbl tbody tr:nth-of-type(4) .blank-item::after {
    bottom: 50%;
    transform: translate(-50%, -25%);
}


.step-tbl tbody tr:nth-of-type(1) {
    text-align: center;
}

tr .step-tbl-item:first-of-type {
    padding: 0 10px 0 calc(var(--circle-size) / 2 + .75em)
}

.step-tbl tbody tr:nth-of-type(1) .step-tbl-item:nth-of-type(2) {
    line-height: 1.2;
}

tr .step-tbl-item:first-of-type::before {
    align-items: center;
    background: #fff;
    box-shadow: .1em 0 5px 0 #bbb;
    border-radius: 50%;
    color: var(--text);
    content: counter(step-counter);
    display: flex;
    font-size: 24px;
    font-weight: 700;
    height: var(--circle-size);
    justify-content: center;
    left: 0;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: var(--circle-size);
}

/* ===== CONTACT ===== */
.section.contact-section {
    background: #f7f7f7;
    text-align: center;
}

.contact-section .section-txt {
    margin-bottom: 40px;
}

/* ===== DIVIDER ===== */
.divider {
    border: none;
    border-top: 1px solid var(--border);
    margin: 0;
}

/* ===== JOB CARDS ===== */
.jobs-section {
    background: var(--card-bg);
    padding: 64px clamp(30px, calc(1.08696vw + 19.1304px), 40px);
}

.jobs-inner {
    max-width: 1100px;
    margin: 0 auto;
}

.cards {
    display: grid;
    gap: clamp(16px, calc(0.86957vw + 7.3043px), 24px);
    grid-template-columns: repeat(3, 1fr);
    list-style: none;
}

.card {
    background: #fff;
    border-radius: 8px;
    padding: 32px clamp(20px, calc(0.86957vw + 11.3043px), 28px);
}

.card-ttl {
    color: var(--text);
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
}

.card-sub {
    color: var(--accent);
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 8px;
}

.card-txt {
    color: var(--text-sub);
    font-size: 14px;
    line-height: 1.8;
    margin-bottom: 20px;
}


.organigram-section {
    padding: 64px clamp(30px, calc(1.08696vw + 19.1304px), 40px);
}

/* 組織図部分 clampの基準値は1000px,1280px */
.organigram-wrapper {
    --gap-x: clamp(15px, calc(5.35714vw - 38.5714px), 30px);
    align-items: center;
    display: grid;
    gap: var(--gap-x);
    grid-template-columns: auto 1fr;
    margin: 0 auto;
    width: fit-content;
}

.organigram-hdr {
    align-items: center;
    background-color: #808080;
    border-radius: 35px;
    color: #fff;
    display: flex;
    font-size: clamp(16px, calc(0.71429vw + 8.8571px), 18px);
    font-weight: 700;
    height: 70px;
    justify-content: center;
    letter-spacing: clamp(0px, calc(1.28571vw - 12.8571px), 3.6px);
    padding-left: clamp(0px, calc(1.28571vw - 12.8571px), 3.6px);
    width: clamp(110px, calc(25vw - 140px), 180px);
}

.organigram {
    display: grid;
    font-size: clamp(13px, calc(0.35714vw + 9.4286px), 14px);
    gap: 30px;
    list-style: none;
}

.organigram-category {
    align-items: center;
    display: grid;
    gap: var(--gap-x);
    grid-template-columns: auto 1fr;
}

.organigram-category.cat-1 {
    --cat-col: #f5cb35;
}

.organigram-category.cat-2 {
    --cat-col: #ff8802;
}

.organigram-category.cat-3 {
    --cat-col: #00a400;
}

.organigram-category.cat-4 {
    --cat-col: #008cff;
}

.organigram-category-hdr {
    --hdr-height: clamp(55px, calc(3.57143vw + 19.2857px), 65px);
    align-items: center;
    background-color: #d6d6d6;
    border-radius: calc(var(--hdr-height) / 2);
    display: flex;
    font-size: clamp(14.5px, calc(0.53571vw + 9.1429px), 16px);
    height: var(--hdr-height);
    letter-spacing: clamp(-1px, calc(0.35714vw - 4.5714px), 0px);
    line-height: 1.3;
    padding: 0 0 0 calc(var(--hdr-height) + 5px);
    position: relative;
    width: clamp(180px, calc(17.85714vw + 1.4286px), 230px);
}

.organigram-category-hdr::before {
    background-color: var(--cat-col);
    border-radius: 50%;
    content: "";
    display: block;
    height: var(--hdr-height);
    position: absolute;
    left: 0;
    top: 0;
    width: var(--hdr-height);
}

.organigram-positions {
    display: grid;
    gap: 10px clamp(8px, calc(25vw - 17px), 15px);
    grid-template-columns: repeat(3, auto);
    justify-content: start;
}

.organigram-category:not(.cat-4) .organigram-positions::after {
    align-self: center;
    background: radial-gradient(circle, #d6d6d6 6px, transparent 7px) repeat-x left center / 30px 14px;
    content: "";
    display: block;
    height: 14px;
    width: 90px;
}

.cat-2 .organigram-positions {
    grid-template-columns: repeat(2, auto);
}

.organigram-position {
    background-color: #d6d6d6;
    border-radius: 30px;
    display: grid;
    gap: 5px;
    grid-template-columns: clamp(90px, calc(7.14286vw + 18.5714px), 110px) 1fr;
    width: clamp(290px, calc(17.85714vw + 111.4286px), 340px);
}

.organigram-position-item {
    align-items: center;
    background-color: var(--cat-col);
    border-radius: 30px;
    color: #fff;
    display: flex;
    font-weight: 500;
    justify-content: center;
    letter-spacing: clamp(-1px, calc(0.35714vw - 4.5714px), 0px);
    line-height: 1.1;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, .2)
}

.organigram-position-item.ls-narrow {
    font-size: clamp(12px, calc(0.71429vw + 4.8571px), 14px);
    letter-spacing: -.1em;
    padding-left: .5em;
}

.organigram-position-dtl {
    align-items: center;
    display: flex;
    letter-spacing: clamp(-1px, calc(0.35714vw - 4.5714px), 0px);
    line-height: 1.1;
    height: clamp(48px, calc(2.5vw + 23px), 55px);
    text-shadow: 1px 1px 0 rgba(255, 255, 255, .2);
}

@media screen and (max-width:1600px) {
    .organigram-positions {
        grid-template-columns: repeat(2, auto);
    }
}


/* ===== FAQ ===== */
.faq-section {
    margin: 0 auto;
    max-width: 980px;
    padding: 48px 40px 80px;
}

.faq-intro {
    color: var(--text-sub);
    font-size: 14px;
    line-height: 1.9;
    margin-bottom: 40px;
}

.faq-category {
    border: 1px solid var(--border);
    border-radius: 5px;
    margin-bottom: 60px;
    overflow: hidden;
}

.faq-category-hdr {
    align-items: center;
    background-color: #f5f5f5;
    color: var(--text);
    cursor: pointer;
    display: flex;
    font-size: 16px;
    justify-content: start;
    padding: 16px 20px;
    user-select: none;
}

.faq-category-hdr:hover {
    background-color: #eee;
}

.faq-category-hdr::after,
.faq-question::after {
    color: var(--text-sub);
    content: "▼";
    margin: 0 0 0 auto;
    transition: transform .2s;
}

.faq-category-hdr.active::after,
.faq-question.active::after {
    transform: rotate(180deg);
}

.category-body .faq-item:first-of-type {
    border-top: 1px solid var(--border);
}

.category-body .faq-item:not(:last-of-type) {
    border-bottom: 1px solid var(--border);
}

.faq-question {
    align-items: center;
    cursor: pointer;
    display: flex;
    font-weight: 500;
    gap: .5em;
    justify-content: start;
    padding: 12px 20px;
    user-select: none;
}

.faq-question:hover {
    background: #fafafa;
}

.faq-question::before {
    content: "・";
}

.faq-answer {
    color: var(--text-sub);
    display: none;
    padding: 12px calc(20px + 1.5em);
}

.faq-answer a {
    color: var(--accent);
    text-decoration: underline;
}

.faq-answer a:hover {
    color: var(--accent-dark);
}


.recruit-contact .content {
    max-width: 900px;
    margin: 0 auto;
    padding: 56px 40px 80px;
}

/* 注意書き（赤字） */
.notice {
    font-size: 15px;
    line-height: 2;
    margin-bottom: 56px;
}

.notice .notice-label {
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 4px;
}

/* セクション */
.inquiry-section {
    margin-bottom: 64px;
}

.inquiry-hdr {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--border);
}

.inquiry-section p {
    font-size: 15px;
    line-height: 2;
    margin-bottom: 12px;
}

.inquiry-section a {
    color: var(--accent);
    text-decoration: underline;
}

.inquiry-section a:hover {
    color: var(--accent-dark);
}

/* ステップ */
.step-txt {
    font-size: 15px;
    margin: 28px 0 12px;
    padding-left: 1em;
    text-indent: -1em;
}

.step-txt.fs-bold {
    font-weight: 700;
}

.screenshot-wrap {
    border: 1px solid #ccc;
    border-radius: 4px;
    overflow: hidden;
    margin: 8px auto 28px;
    background: #f5f5f5;
    max-width: 780px;
}

.screenshot-wrap img {
    display: block;
    width: 100%;
    height: auto;
}

.inquiry-steps {
    list-style: none;
}

.inquiry-step {
    color: var(--text);
    margin-bottom: 60px;
    padding: 0 1em;
}

.requirements {
    display: grid;
    font-size: 16px;
    margin: 100px auto;
    max-width: 1000px;
    min-width: 900px;
    width: 90%;
}

.requirement-item {
    align-items: center;
    border-top: 1px solid var(--border);
    display: grid;
    grid-template-columns: clamp(125px, calc(37.5vw - 250px), 200px) 1fr;
    padding: 1em;
}

.requirement-dtl-list {
    list-style: none;
}

.with-asterisk.requirement-dtl-annotation::before,
.with-asterisk .requirement-dtl-item::before {
    content: "※";
}

.with-bullet .requirement-dtl-item::before {
    content: "・";
    margin-right: .25em;
}

.requirement-dtl-annotation,
.with-asterisk .requirement-dtl-item {
    padding-left: 1em;
    text-indent: -1em;
}

.requirement-dtls-wrapper {
    padding-left: 1.25em;
}