@charset "UTF-8";

/* ==========================================================================
   Recruit Flow Page Styles (PC)
   ========================================================================== */

/* Header styles handled in common.css */

/* Common */
main {
    background-color: #E1F0FA; /* Page background */
}

.container {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 40px;
}

/* --------------------------------------------------------------------------
   Hero Section
   -------------------------------------------------------------------------- */
.hero-flow {
    position: relative;
    width: 100%;
    height: 445px;
    background: linear-gradient(179.66deg, #004981 0.58%, #0068B7 59.44%, #004981 98.68%);
    color: #FFF;
    display: flex;
    align-items: center;
    padding-top: 80px; /* Header height offset */
    box-sizing: border-box;
    overflow: hidden; /* For container overflow */
}

.hero-flow-inner {
    width: 100%;
    max-width: 100%; /* コンテナ幅制限解除 */
    margin: 0;
    padding: 40px 80px; /* 左右パディング80px */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 32px;
}

.hero-flow-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
}

.hero-subtitle {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
    line-height: 2.7; /* 43.2px / 16px */
    color: #FFF;
}

.hero-line {
    width: 61px;
    height: 1px;
    background-color: #FFF;
    margin: 0;
}

.hero-title {
    font-size: 48px;
    font-weight: 700;
    margin: 0 0 16px 0; /* gap 16px + margin 16px = 32px */
    line-height: 1.375; /* 66px / 48px */
    color: #FFF;
}

.hero-desc {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.8; /* 36px / 20px */
    color: #FFF;
    margin: 0;
}

/* --------------------------------------------------------------------------
   Flow Overview (Image Visualization)
   -------------------------------------------------------------------------- */
.section-flow-overview {
    position: relative;
    margin-top: 0;
    padding: 40px 0 60px;
    z-index: 10;
    background-color: #FFF; /* 背景を白に設定 */
}

.flow-chart-image-wrapper {
    width: 100%;
    max-width: 933px; /* Match Figma frame width */
    margin: 0 auto;
    display: flex;
    justify-content: center;
}

.flow-chart-image {
    width: 100%;
    height: auto;
    display: block;
}

/* SP用フロー図と拡大モーダルを非表示 */
.section-flow-overview-sp {
    display: none;
}

.zoom-modal {
    display: none !important;
}

/* --------------------------------------------------------------------------
   Flow Details (List)
   -------------------------------------------------------------------------- */
.section-flow-details {
    padding: 64px 0;
    background-color: #E1F0FA;
}

.flow-details-list {
    display: flex;
    flex-direction: column;
    gap: 0; /* Gap is handled by arrow elements */
    width: 100%;
    max-width: 1080px;
}

/* Detail Card */
.flow-detail-card {
    display: flex;
    background-color: #FFF;
    border-radius: 12px;
    overflow: hidden;
    /* Remove box-shadow not in Figma? Actually Figma shows none explicit or default? No shadow in Figma properties usually means flat. */
    box-shadow: none; 
}

/* Left side (Blue) */
.detail-left {
    background-color: #0068B7;
    width: 272px;
    padding: 32px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Top aligned */
    gap: 16px;
    box-sizing: border-box;
}

.detail-num {
    font-family: 'SF Pro', sans-serif; /* Fallback to system font if SF Pro not loaded, or use custom font */
    font-weight: 700;
    font-size: 24px;
    color: #3D9DE4;
    line-height: 1.25; /* 30px / 24px */
    letter-spacing: 0;
}

.detail-title {
    font-size: 28px;
    font-weight: 700;
    color: #FFF;
    line-height: 1.25; /* 35px / 28px */
    margin: 0;
}

/* Right side (White) */
.detail-right {
    padding: 32px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Top aligned, content fills height */
    gap: 0; /* Changed from 16px to 0 to remove extra spacing */
}

/* Add margin-bottom to elements inside detail-right to control spacing individually */
.detail-right > *:not(:last-child) {
    margin-bottom: 16px;
}

.detail-text {
    font-size: 16px;
    line-height: inherit; /* Use inherited line-height */
    color: #002D6F;
    margin: 0;
}

.detail-list {
    margin: 0;
    padding-left: 21px; /* ms-[21px] */
    font-size: 14px;
    line-height: inherit; /* Use inherited line-height (1.6) instead of 1.65 */
    color: #002D6F;
    display: flex;
    flex-direction: column;
    gap: 0; /* ギャップなし */
}
.detail-list li { margin-bottom: 0px; } /* Figma doesn't explicitly show margin bottom on li itself, spacing handled by line-height or gap in flex container if used */

/* リストと注釈の間隔を詰めるためのラッパー調整が必要だが、
   現状は兄弟要素なので、detail-noteにネガティブマージンを適用するか、
   detail-rightのgapを上書きする。 */
.detail-note, .detail-note-inline {
    font-size: 14px; /* Figma: 14px or 16px depending on node? */
    /* Node I378:6042;126:2403 is 14px */
    color: #002D6F;
    margin: 0; /* Reset margin since gap is removed */
    line-height: inherit; /* Use inherited line-height */
}

/* Down Arrow between cards */
.detail-arrow-down {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
    height: 45px;
}
.detail-arrow-down img {
    width: 25px;
    height: 25px; /* Assuming square or similar aspect ratio for png icon, adjust if needed */
    object-fit: contain;
}

/* Attention List (Bottom of section) */
.flow-attention {
    margin-top: 32px; /* Gap between last card and list */
}
.flow-attention ul {
    margin: 0;
    padding-left: 21px;
}
.flow-attention li {
    font-size: 14px;
    line-height: 1.7; /* 24px / 14px */
    color: #002D6F;
    margin-bottom: 8px;
}

/* --------------------------------------------------------------------------
   Sitemap (Bottom Nav)
   -------------------------------------------------------------------------- */
/* Handled in common.css */

/* --------------------------------------------------------------------------
   Contact CTA
   -------------------------------------------------------------------------- */
.section-recruit-cta {
    background-color: #002D6F;
    padding: 64px 0 80px;
    text-align: center;
}

.cta-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

.cta-content {
    color: #FFF;
    opacity: 0.9;
}

.cta-copy, .cta-sub {
    font-size: 16px;
    line-height: 1.7;
    margin: 0;
}

.btn-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: #FFF;
    color: #002D6F;
    font-size: 20px;
    font-weight: 700;
    padding: 16px 32px;
    border-radius: 70px;
    text-decoration: none;
    height: 80px;
    box-sizing: border-box;
    width: 480px;
}

.icon-arrow-circle {
    width: 24px;
    height: 24px;
    background: url('../../../images/arrow_right_blue.svg') no-repeat center center / contain;
}