@charset "UTF-8";

/* ==========================================================================
   Recruit After Trial Page Styles (PC)
   ========================================================================== */

/* Header styles handled in common.css */

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

.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;
    box-sizing: border-box;
    overflow: hidden;
}

.hero-flow-inner {
    width: 100%;
    max-width: 100%; /* コンテナ幅制限解除 */
    margin: 0;
    padding: 40px 80px; /* 左右パディング80px */
    display: flex; /* height: 326px を削除して flow と合わせる */
    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;
    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; /* flowと同じgap調整 */
    line-height: 1.375;
    color: #FFF;
}

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

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

.flow-chart-image-wrapper {
    width: 100%;
    max-width: 1080px; /* Adjust if new image size differs */
    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;
    width: 100%;
    max-width: 1080px;
}

/* Detail Card */
.flow-detail-card {
    display: flex;
    background-color: #FFF;
    border-radius: 12px;
    overflow: hidden;
    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;
    gap: 8px; /* Slightly tighter gap for multi-line titles */
    box-sizing: border-box;
}

.detail-num {
    font-family: 'SF Pro', sans-serif;
    font-weight: 700;
    font-size: 24px;
    color: #3D9DE4;
    line-height: 1.25;
    letter-spacing: 0;
}

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

.detail-title-small {
    font-size: 15px;
    font-weight: 700;
    color: #FFF;
    line-height: 1;
    margin-top: 8px;
}

/* Right side (White) */
.detail-right {
    padding: 32px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0;
}

/* 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;
    color: #002D6F;
    margin: 0;
}

.detail-list {
    margin: 0;
    padding-left: 21px;
    font-size: 14px;
    line-height: inherit;
    color: #002D6F;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.detail-list li { margin-bottom: 0px; }

.detail-note, .detail-note-inline {
    font-size: 14px;
    color: #002D6F;
    margin: 0;
    line-height: inherit;
}

/* 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;
    object-fit: contain;
}

/* Attention List (Bottom of section) */
.flow-attention {
    margin-top: 32px;
}
.flow-attention ul {
    margin: 0;
    padding-left: 21px;
}
.flow-attention li {
    font-size: 14px;
    line-height: 1.7;
    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;
}