/* ========================================
   事業内容ページ統合CSS
   ======================================== */

/* ページ全体のoverflow制御 */
html, body {
    overflow-x: hidden;
    max-width: 100%;
    position: relative;
}

/* モバイルでmainの白背景を透明に（パララクス背景表示のため） */
@media (max-width: 767px) {
    main {
        background: transparent;
    }
}

/*
 * .nowrap-line / .intro-description-nowrap / .intro-description のスタイルは common.css で定義済み
 */

/* ================================================
   固定背景画像
   ================================================ */

/* Fixed Background - レスポンシブ対応 */
.fixed-bg-layer.business-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-image: url('../img/mix_img.jpg');
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: #002147; /* 余白部分の色 */
  overflow: hidden;
  max-width: 100vw;
}

/* デスクトップのみfixed attachment + contain */
@media (min-width: 1024px) {
  .fixed-bg-layer.business-bg {
    background-attachment: fixed;
    background-size: contain;
  }
}

/* モバイル用背景画像 */
@media (max-width: 767px) {
  .fixed-bg-layer.business-bg {
    background-image: url('../img/mix_img_sp.jpg');
  }
}

.overlay-white {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(243, 255, 246, 0.45);
  background-blend-mode: multiply;
  pointer-events: none;
  z-index: 1;
}

/* モバイル用オーバーレイ強化 */
@media (max-width: 767px) {
  .overlay-white {
    background: rgba(243, 255, 246, 0.65);
  }
}

.bg-grid-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: linear-gradient(to right, rgba(0, 168, 255, 0.05) 1px, transparent 1px), 
                    linear-gradient(to bottom, rgba(0, 168, 255, 0.05) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 2;
}

/* ================================================
   イントロ説明文
   ※ 共通スタイルは common.css に定義済み
   ================================================ */

/* ================================================
   ① 募集メッセージ・魅力ポイントセクション
   ================================================ */

.appeal-section {
    padding: 5rem 0;
    background: transparent;
}

.appeal-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.appeal-cards-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

.appeal-card {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 12px;
    padding: 2.5rem 2rem;
    text-align: center;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    backdrop-filter: blur(10px);
}

.appeal-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
    border-color: #002147;
}

.appeal-card-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #002147 0%, #003d82 100%);
    border-radius: 50%;
    color: #ffffff;
    font-size: 2.5rem;
}

.appeal-card-title {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-size: 1.5rem;
    color: #002147;
    margin-bottom: 0.75rem;
    font-weight: 700;
}

.appeal-card-subtitle {
    font-size: 1rem;
    color: #555555;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.appeal-card-list {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

.appeal-card-list li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
    color: #333333;
    line-height: 1.6;
}

.appeal-card-list li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #002147;
    font-weight: bold;
}

@media (min-width: 768px) {
    .appeal-cards-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2.5rem;
    }
}

/* ================================================
   ② 仕事内容セクション（カードデザイン）
   ================================================ */

.jobs-section {
    padding: 5rem 0;
    background-image: url('../img/bgstyle.jpeg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    position: relative;
}

@media (max-width: 768px) {
    .jobs-section {
        background-attachment: scroll;
    }
}

.jobs-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* background: rgba(248, 249, 250, 0.9); */
    z-index: 0;
}

.jobs-container {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.section-header {
    position: relative;
    text-align: center;
    margin-bottom: 4rem;
    padding: 4rem 2rem;
    border-radius: 12px;
    overflow: hidden;
}

.section-header-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../img/recruit-work-section.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    z-index: 0;
}

/* モバイルでfixed attachmentを無効化 */
@media (max-width: 768px) {
    .section-header-bg {
        background-attachment: scroll;
    }
}

.section-header-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: rgba(255, 255, 255, 0.85); */
    z-index: 1;
}

.section-header-content {
    position: relative;
    z-index: 2;
}

.section-subtitle {
    font-family: serif;
    /* color: #1e40af; */
    color: #ffffff;
    letter-spacing: 0.2em;
    font-size: 0.875rem;
    display: block;
}
/* 
.section-title {
    font-family: 'Hannari', serif;
    font-size: 2.25rem;
    font-weight: bold;
    margin-top: 0.5rem;
    color: #002147;
    color: #ffffff;
} */

.job-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-top: 3rem;
}

@media (min-width: 768px) {
    .job-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 2.5rem;
    }
}

@media (min-width: 1024px) {
    .job-cards {
        grid-template-columns: repeat(3, 1fr);
        gap: 3rem;
    }
}

/* .job-card 基本スタイル - recruit_v2.cssで定義 */

/* job-iconスタイル（HTMLでは.job-iconを使用） */
.job-card .job-icon {
    font-size: 2.5rem;
    color: #0068b7;
    text-align: center;
    margin: 0 auto 1rem auto;
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
}

.job-description h4 {
    font-size: 1rem;
    font-weight: bold;
    color: #0068b7;
    margin-bottom: 0.75rem;
    border-bottom: 2px solid #0068b7;
    padding-bottom: 0.5rem;
}

.job-description .job-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem 0;
}

.job-description .job-list li {
    padding-left: 1.5rem;
    margin-bottom: 0.5rem;
    position: relative;
    line-height: 1.6;
    color: #333;
}

.job-description .job-list li::before {
    content: '●';
    position: absolute;
    left: 0;
    color: #0068b7;
    font-size: 0.75rem;
}

.job-note {
    font-size: 0.875rem;
    color: #0068b7;
    font-weight: 500;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e5e7eb;
}

.jobs-header {
    text-align: center;
    margin-bottom: 4rem;
}

.jobs-header .subtitle {
    font-family: serif;
    color: #1e40af;
    letter-spacing: 0.2em;
    font-size: 0.875rem;
    display: block;
}

.jobs-header h2 {
    font-family: 'Hannari', serif;
    font-size: 2.25rem;
    font-weight: bold;
    margin-top: 0.5rem;
    color: #002147;
}

/* ================================================
   ② 仕事内容セクション v2 (60:40レイアウト)
   ================================================ */

.jobs-section-v2 {
    padding: 5rem 0;
    background: #f8f9fa;
}

.jobs-container-v2 {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* 職種アイテム */
.job-item {
    margin-bottom: 3rem;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.job-item.animate-in {
    opacity: 1;
}

/* 画像エリア（テキストの背景として機能） */
.job-image-wrapper {
    position: relative;
    width: 100%;
    min-height: 500px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 33, 71, 0.2);
}

@media (min-width: 768px) {
    .job-image-wrapper {
        min-height: 450px;
    }
}

@media (min-width: 1024px) {
    .job-image-wrapper {
        min-height: 400px;
    }
}

.job-image-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.job-item:hover .job-image-wrapper img {
    transform: scale(1.05);
}

.job-image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        135deg, 
        rgba(0, 33, 71, 0.85) 0%, 
        rgba(0, 104, 183, 0.75) 100%
    );
    pointer-events: none;
}

/* コンテンツエリア（画像の上に配置） */
.job-content {
    position: relative;
    z-index: 2;
    padding: 3rem 2rem;
    color: #ffffff;
}

@media (min-width: 768px) {
    .job-content {
        padding: 3.5rem 3rem;
    }
    
    /* 左寄せレイアウト */
    .job-item-left .job-content {
        max-width: 650px;
    }
    
    /* 右寄せレイアウト */
    .job-item-right .job-content {
        max-width: 650px;
        margin-left: auto;
    }
}

@media (min-width: 1024px) {
    .job-content {
        padding: 4rem 4rem;
    }
}

.job-icon {
    width: 64px;
    height: 64px;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: #ffffff;
    font-size: 1.875rem;
    transition: all 0.3s ease;
}

.job-item:hover .job-icon {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1) rotate(5deg);
}

.job-title {
    margin-bottom: 0.75rem;
}

.job-title-main {
    display: block;
    font-size: 2rem;
    font-weight: bold;
    color: #ffffff;
    font-family: 'Hannari', serif;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.job-subtitle {
    font-size: 1rem;
    color: #e0f2ff;
    margin-bottom: 1.5rem;
    font-weight: 500;
    letter-spacing: 0.05em;
}

.job-duties {
    margin-top: 2rem;
}

.job-duties h4 {
    font-size: 1.1rem;
    font-weight: bold;
    color: #ffffff;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid rgba(255, 255, 255, 0.3);
}

.job-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.job-list li {
    padding: 0.6rem 0;
    color: #ffffff;
    font-size: 1rem;
    line-height: 1.7;
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
}

.job-list li i {
    color: #60d5ff;
    font-size: 1rem;
    margin-top: 0.3rem;
    flex-shrink: 0;
}

/* ================================================
   ③ 募集要項セクション
   ================================================ */

.requirements-section {
    padding: 5rem 0;
    background: #ffffff;
    position: relative;
}

.requirements-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        linear-gradient(to right, rgba(0, 104, 183, 0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 104, 183, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
    z-index: 0;
}

.requirements-section > * {
    position: relative;
    z-index: 1;
}

.requirements-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.requirements-header {
    position: relative;
    text-align: center;
    margin-bottom: 4rem;
    padding: 4rem 2rem;
    border-radius: 12px;
    overflow: hidden;
}

.requirements-header-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../img/recruit-bosyu-section.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    z-index: 0;
}

/* モバイルではfixed attachmentを無効化 */
@media (max-width: 768px) {
    .requirements-header-bg {
        background-attachment: scroll;
    }
}

.requirements-header-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: rgba(255, 255, 255, 0.85); */
    z-index: 1;
}

.requirements-header-content {
    position: relative;
    z-index: 2;
}

.requirements-header .subtitle {
    font-family: serif;
    /* color: #1e40af; */
    color: #ffffff;
    letter-spacing: 0.2em;
    font-size: 0.875rem;
    display: block;
}

.requirements-header h2 {
    font-family: 'Hannari', serif;
    font-size: 2.25rem;
    font-weight: bold;
    margin-top: 0.5rem;
    /* color: #002147; */
    color: #ffffff;
}

.requirements-table {
    max-width: 900px;
    margin: 0 auto;
}

/* ================================================
   ④ 福利厚生セクション
   ================================================ */

.benefits-section {
    padding: 5rem 0;
    background: #f8f9fa;
    position: relative;
}

.benefits-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        linear-gradient(to right, rgba(0, 104, 183, 0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 104, 183, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
    z-index: 0;
}

.benefits-section > * {
    position: relative;
    z-index: 1;
}

.benefits-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.benefits-header {
    position: relative;
    text-align: center;
    margin-bottom: 4rem;
    padding: 4rem 2rem;
    border-radius: 12px;
    overflow: hidden;
}

.benefits-header-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../img/recruit-hukuri-bg-01.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    z-index: 0;
}

/* モバイルではfixed attachmentを無効化 */
@media (max-width: 768px) {
    .benefits-header-bg {
        background-attachment: scroll;
    }
}

.benefits-header-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: rgba(255, 255, 255, 0.85); */
    z-index: 1;
}

.benefits-header-content {
    position: relative;
    z-index: 2;
}

.benefits-header .subtitle {
    font-family: serif;
    /* color: #1e40af; */
    color: #ffffff;
    letter-spacing: 0.2em;
    font-size: 0.875rem;
    display: block;
}

.benefits-header h2 {
    font-family: 'Hannari', serif;
    font-size: 2.25rem;
    font-weight: bold;
    margin-top: 0.5rem;
    /* color: #002147; */
    color: #ffffff;
}

/* シンプルヘッダー（背景なし） */
.benefits-header-simple {
    background: none;
    padding: 2rem;
}

.benefits-header-simple .subtitle {
    color: #1e40af;
}

.benefits-header-simple h2 {
    color: #002147;
}

.benefits-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-bottom: 3rem;
}

@media (min-width: 768px) {
    .benefits-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 3rem;
    }
}

/* .benefits-column - recruit_v2.cssで定義 */

.benefits-qualification {
    background: #ffffff;
    padding: 2rem;
    border-radius: 8px;
    text-align: center;
}

/* 職場環境スライダー */
.benefits-workplace-slider {
    margin-top: 3rem;
    padding: 0;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    width: 100vw;
}

.workplace-slider {
    width: 100%;
    overflow: hidden;
}

.workplace-slide {
    position: relative;
    height: 200px;
    outline: none;
}

@media (min-width: 768px) {
    .workplace-slide {
        height: 250px;
    }
}

@media (min-width: 1024px) {
    .workplace-slide {
        height: 300px;
    }
}

.workplace-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Slick Slider調整 */
.workplace-slider .slick-slide {
    padding: 0 4px;
}

@media (min-width: 768px) {
    .workplace-slider .slick-slide {
        padding: 0 6px;
    }
}

.workplace-slider .slick-list {
    margin: 0 -4px;
}

@media (min-width: 768px) {
    .workplace-slider .slick-list {
        margin: 0 -6px;
    }
}


/* ================================================
   ⑤ 応募方法セクション
   ================================================ */

.application-section {
    padding: 5rem 0;
    background: #ffffff;
}

.application-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.application-header {
    position: relative;
    text-align: center;
    margin-bottom: 2rem;
    padding: 4rem 2rem;
    border-radius: 12px;
    overflow: hidden;
}

.application-header-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../img/recruit-oubo-section.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    z-index: 0;
}

/* モバイルではfixed attachmentを無効化 */
@media (max-width: 768px) {
    .application-header-bg {
        background-attachment: scroll;
    }
}

.application-header-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: rgba(255, 255, 255, 0.85); */
    z-index: 1;
}

.application-header-content {
    position: relative;
    z-index: 2;
}

.application-header .subtitle {
    font-family: serif;
    /* color: #1e40af; */
    color: #ffffff;
    letter-spacing: 0.2em;
    font-size: 0.875rem;
    display: block;
}

.application-header h2 {
    font-family: 'Hannari', serif;
    font-size: 2.25rem;
    font-weight: bold;
    margin-top: 0.5rem;
    /* color: #002147; */
    color: #ffffff;
}

.application-intro {
    text-align: center;
    font-size: 1.1rem;
    color: #555555;
    line-height: 1.8;
    margin-bottom: 3rem;
}

.application-methods {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-bottom: 3rem;
}

@media (min-width: 768px) {
    .application-methods {
        grid-template-columns: repeat(3, 1fr);
    }
}

.application-note {
    text-align: center;
    font-size: 0.875rem;
    color: #777777;
    line-height: 1.8;
    margin-top: 3rem;
}

/* ================================================
   CTAセクション
   ================================================ */

.cta-section {
    padding: 6rem 0;
    background-color: #002147;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.cta-grid-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.2;
    background-image: linear-gradient(to right, rgba(0, 168, 255, 0.05) 1px, transparent 1px), 
                      linear-gradient(to bottom, rgba(0, 168, 255, 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
}

.cta-container {
    width: 100%;
    max-width: 80rem;
    margin: 0 auto;
    padding: 0 1.5rem;
    position: relative;
    z-index: 10;
}

.cta-title {
    font-size: 1.875rem;
    font-family: 'Hannari', serif;
    font-weight: bold;
    color: white;
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    .cta-title {
        font-size: 2.25rem;
    }
}

.cta-description {
    color: #e6f0ff;
    margin-bottom: 2.5rem;
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
    opacity: 0.8;
}

.cta-button-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 0;
    max-width: 42rem;
    margin: 0 auto;
}

@media (min-width: 640px) {
    .cta-button-container {
        flex-direction: row;
    }
}

.cta-button {
    flex: 1 1 0%;
    padding: 1.5rem 2.5rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    text-decoration: none;
}

.cta-button-primary {
    background-color: #0056b3;
    color: white;
    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.cta-button-primary:hover {
    background-color: white;
    color: #0056b3;
}

.cta-button-primary .cta-button-icon-chevron {
    opacity: 0;
    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.cta-button-primary:hover .cta-button-icon-chevron {
    opacity: 1;
    transform: translateX(0.25rem);
}

.cta-button-secondary {
    background-color: #003366;
    color: white;
    font-family: 'Oswald', sans-serif;
    font-weight: bold;
    font-size: 1.25rem;
    transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.cta-button-secondary:hover {
    background-color: #00a8ff;
}

.cta-button-icon {
    font-size: 1.25rem;
}

.cta-button-icon-sm {
    font-size: 0.875rem;
}

.cta-button-icon-chevron {
    font-size: 0.75rem;
}

/* ================================================
   採用メニューセクション (recruitment_menu)
   ================================================ */

.recruitment-menu-section {
    padding: 4rem 0 6rem;
    position: relative;
}

.recruitment-menu-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1rem;
}

@media (min-width: 768px) {
    .recruitment-menu-container {
        padding: 0 2rem;
    }
}

.recruitment-menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.recruitment-menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 4rem;
    gap: 2rem;
}

@media (min-width: 1024px) {
    .recruitment-menu-item {
        flex-direction: row;
        gap: 3rem;
        margin-bottom: 5rem;
    }
    
    /* 偶数番目のアイテムは画像を右に */
    .recruitment-menu-item:nth-child(even) {
        flex-direction: row-reverse;
    }
}

/* 画像セクション */
.recruitment-img-sec {
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

@media (min-width: 1024px) {
    .recruitment-img-sec {
        width: 60%;
        flex-shrink: 0;
    }
}

/* 画像アニメーション用 */
.recruitment-img-sec.fx_box {
    position: relative;
    overflow: hidden;
}

.recruitment-img-sec.fx_box img {
    position: relative;
    width: 100%;
    height: auto;
    display: block;
    left: -100%;
    z-index: 10;
    will-change: left;
    transition: all 1.25s 0.5s ease-in-out;
}

.recruitment-img-sec.fx_box::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    z-index: 1;
    position: absolute;
    top: 50%;
    left: -50%;
    transform: translate(-50%, -50%);
    background-color: #f7f7f4;
    will-change: left;
    transition: left 1s ease-in-out;
}

.recruitment-img-sec.fx_box.fx_gold::after {
    background-color: #ac9874;
}

/* トリガー時のアニメーション */
.recruitment-img-sec.fx_box.trigger::after {
    left: 50%;
}

.recruitment-img-sec.fx_box.trigger img {
    left: 0;
}

/* 逆方向アニメーション */
.recruitment-img-sec.fx_box.fx_rev img {
    left: 100%;
}

.recruitment-img-sec.fx_box.fx_rev::after {
    left: 150%;
}

.recruitment-img-sec.fx_box.fx_rev.trigger::after {
    left: 50%;
}

.recruitment-img-sec.fx_box.fx_rev.trigger img {
    left: 0;
}

/* テキストセクション */
.recruitment-text-sec {
    width: 100%;
    padding: 0 1rem;
}

@media (min-width: 1024px) {
    .recruitment-text-sec {
        width: 40%;
        padding: 0;
    }
}

/* フェードアップアニメーション */
.recruitment-text-sec.fadeUp {
    opacity: 0;
    will-change: transform, opacity;
}

.recruitment-text-sec.fadeUp.trigger {
    animation-name: fadeUp;
    animation-duration: 0.75s;
    animation-delay: 0.25s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out;
}

@keyframes fadeUp {
    0% {
        opacity: 0;
        transform: translateY(25%);
    }
    100% {
        opacity: 1;
        transform: translateY(0%);
    }
}

/* セクションタイトル */
.recruitment-sec-ttl {
    margin-bottom: 1.5rem;
}

.recruitment-sec-ttl .big {
    display: block;
    font-size: 2.5rem;
    color: #ac9874;
    font-weight: 500;
    letter-spacing: 0.15em;
    line-height: 1;
    font-family: 'Oswald', sans-serif;
}

.recruitment-sec-ttl .small {
    display: block;
    font-size: 1.125rem;
    font-weight: 500;
    margin-top: 0.5rem;
    color: #333;
}

@media (min-width: 1024px) {
    .recruitment-sec-ttl .big {
        font-size: 3.25rem;
    }
}

/* サブタイトル */
.recruitment-sub-ttl {
    font-size: 1.125rem;
    font-weight: 500;
    color: #333;
    margin-bottom: 1.25rem;
}

.recruitment-sub-ttl .small {
    font-size: 0.875rem;
    font-weight: 400;
}

/* 本文テキスト */
.recruitment-text-normal {
    letter-spacing: 0.05em;
    line-height: 1.75;
    color: #333;
    margin-bottom: 2rem;
}

@media (max-width: 1023px) {
    .recruitment-text-normal {
        letter-spacing: 0;
        line-height: 1.6;
    }
}

/* ボタン */
.recruitment-btn {
    display: inline-block;
    text-align: center;
    background-color: #ac9874;
    border: 1px solid #ac9874;
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.08em;
    min-width: 240px;
    padding: 0 2em;
    height: 50px;
    line-height: 50px;
    border-radius: 25px;
    transition: background-color 0.3s, color 0.3s;
    text-decoration: none;
}

.recruitment-btn:hover {
    background-color: #fff;
    color: #ac9874;
}

@media (min-width: 768px) {
    .recruitment-btn {
        min-width: 280px;
        height: 60px;
        line-height: 60px;
        border-radius: 30px;
    }
}

/* ================================================
   共通セクションタイトル
   ================================================ */

.section-title {
    font-family: 'Hannari', serif;
    font-size: 2rem;
    /* color: #002147; */
    color: #fff;
    text-align: center;
    margin-bottom: 3rem;
    position: relative;
    padding-bottom: 1rem;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: #0056b3;
}

@media (min-width: 768px) {
    .section-title {
        font-size: 2.5rem;
        margin-bottom: 4rem;
    }
}

/* ================================================
   仕事内容セクション
   ================================================ */

.job-content-section {
    padding: 4rem 0;
    background-color: #f8f9fa;
}

.job-cards-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .job-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .job-cards-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* .job-card (仕事内容セクション) - recruit_v2.cssで定義 */

/* .job-card-icon - recruit_v2.cssで定義 */

/* .job-card-title - recruit_v2.cssで定義 */

.job-card-content h4 {
    font-size: 1rem;
    font-weight: bold;
    color: #0056b3;
    margin-bottom: 0.75rem;
}

.job-card-content ul {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem 0;
}

.job-card-content ul li {
    padding-left: 1.5rem;
    margin-bottom: 0.5rem;
    position: relative;
    line-height: 1.6;
}

.job-card-content ul li::before {
    content: '●';
    position: absolute;
    left: 0;
    color: #0056b3;
    font-size: 0.75rem;
}

.job-card-note {
    font-size: 0.875rem;
    color: #0056b3;
    font-weight: 500;
    margin-top: 1rem;
}

/* ================================================
   募集要項セクション
   ================================================ */

.requirements-section {
    padding: 4rem 0;
    background: white;
}

.requirements-table-wrapper {
    max-width: 900px;
    margin: 0 auto;
    overflow-x: auto;
}

.requirements-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    box-shadow: 0 2px 8px rgba(0, 33, 71, 0.08);
    border-radius: 12px;
    overflow: hidden;
}

.requirements-table th,
.requirements-table td {
    padding: 1.5rem;
    text-align: left;
    border-bottom: 1px solid #e6f0ff;
}

.requirements-table th {
    background: #002147;
    color: white;
    font-weight: bold;
    width: 150px;
    vertical-align: top;
}

.requirements-table td {
    background: white;
    line-height: 1.8;
}

.requirements-table tr:last-child th,
.requirements-table tr:last-child td {
    border-bottom: none;
}

.requirements-table h4 {
    font-size: 1rem;
    font-weight: bold;
    color: #0056b3;
    margin: 1rem 0 0.5rem 0;
}

.requirements-table ul {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0;
}

.requirements-table ul li {
    padding-left: 1.5rem;
    margin-bottom: 0.5rem;
    position: relative;
}

.requirements-table ul li::before {
    content: '●';
    position: absolute;
    left: 0;
    color: #0056b3;
    font-size: 0.75rem;
}

.requirements-table .note {
    font-size: 0.875rem;
    color: #666;
}

@media (max-width: 767px) {
    .requirements-table th,
    .requirements-table td {
        display: block;
        width: 100%;
        padding: 1rem;
    }
    
    .requirements-table th {
        border-bottom: none;
        padding-bottom: 0.5rem;
    }
    
    .requirements-table td {
        padding-top: 0.5rem;
    }
}

/* ================================================
   福利厚生セクション
   ================================================ */

.benefits-section {
    padding: 4rem 0;
    background-color: #f8f9fa;
}

.benefits-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    max-width: 1000px;
    margin: 0 auto 3rem;
}

@media (min-width: 768px) {
    .benefits-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.benefits-card {
    background: white;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 2px 8px rgba(0, 33, 71, 0.08);
}

.benefits-card-title {
    font-size: 1.5rem;
    font-weight: bold;
    color: #002147;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #e6f0ff;
}

/* .benefits-highlight - recruit_v2.cssで定義 */

.benefits-card-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.benefits-card-content ul li {
    padding-left: 1.5rem;
    margin-bottom: 0.75rem;
    position: relative;
    line-height: 1.8;
}

.benefits-card-content ul li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #0056b3;
    font-weight: bold;
}

.benefits-card-content .note {
    font-size: 0.875rem;
    color: #666;
    display: block;
}

/* 資格取得支援制度 */
.qualification-support {
    max-width: 1000px;
    margin: 0 auto;
    background: linear-gradient(135deg, #002147 0%, #003d7a 100%);
    border-radius: 12px;
    padding: 2.5rem;
    color: white;
}

.qualification-support-title {
    font-size: 1.75rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: 0.5rem;
}

.qualification-support-subtitle {
    text-align: center;
    font-size: 1.125rem;
    margin-bottom: 2rem;
    opacity: 0.9;
}

.qualification-features {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    .qualification-features {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .qualification-features {
        grid-template-columns: repeat(4, 1fr);
    }
}

.qualification-feature {
    background: rgba(255, 255, 255, 0.1);
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
    font-weight: 500;
}

.qualification-examples {
    background: rgba(255, 255, 255, 0.05);
    padding: 1.5rem;
    border-radius: 8px;
}

.qualification-examples h4 {
    font-size: 1.125rem;
    margin-bottom: 1rem;
    color: white;
}

.qualification-examples ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
}

@media (min-width: 768px) {
    .qualification-examples ul {
        grid-template-columns: repeat(2, 1fr);
    }
}

.qualification-examples ul li {
    padding-left: 1.5rem;
    position: relative;
}

.qualification-examples ul li::before {
    content: '●';
    position: absolute;
    left: 0;
    color: #00a8ff;
}

/* ================================================
   応募方法セクション
   ================================================ */

.application-section {
    padding: 4rem 0;
    background: white;
}

.application-intro {
    text-align: center;
    font-size: 1.125rem;
    margin-bottom: 3rem;
    color: #002147;
}

.application-methods {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    max-width: 900px;
    margin: 0 auto 2rem;
}

@media (min-width: 768px) {
    .application-methods {
        grid-template-columns: repeat(2, 1fr);
        gap: 3rem;
    }
}

/* .application-card - recruit_v2.cssで定義 */

.application-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

/* .application-card-title - recruit_v2.cssで定義 */

.application-phone {
    font-family: 'Oswald', sans-serif;
    font-size: 1.5rem;
    font-weight: bold;
    color: #0056b3;
    margin: 1rem 0;
}

.application-card-desc {
    font-size: 0.875rem;
    color: #666;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.application-btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background: #0056b3;
    color: white;
    text-decoration: none;
    border-radius: 25px;
    font-weight: bold;
    transition: all 0.3s ease;
}

.application-btn:hover {
    background: #003d7a;
    transform: translateY(-2px);
}

.application-btn-phone {
    background: #00a8ff;
}

.application-btn-phone:hover {
    background: #0088cc;
}

.application-btn-indeed {
    background: #2164f3;
}

.application-btn-indeed:hover {
    background: #1a4dbf;
}

.application-note {
    text-align: center;
    font-size: 0.875rem;
    color: #666;
    line-height: 1.8;
    max-width: 800px;
    margin: 2rem auto 0;
}

/* ================================================
   魅力ポイント カード型セクション（背景グリッド付き）
   ※ 福利厚生・仕事内容セクションとデザイン統一
   ================================================ */

.appeal-section-cards {
    padding: 5rem 0;
    background: #ffffff;
    position: relative;
}

@media (min-width: 768px) {
    .appeal-section-cards {
        padding: 7rem 0;
    }
}

.appeal-section-cards::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        linear-gradient(to right, rgba(0, 104, 183, 0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 104, 183, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
}

.appeal-section-cards > * {
    position: relative;
    z-index: 1;
}

.appeal-cards-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* カードグリッド - 仕事内容セクションと統一 */
.appeal-section-cards .appeal-cards-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 768px) {
    .appeal-section-cards .appeal-cards-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }
}

/* カード本体 - 福利厚生カードと統一 */
.appeal-section-cards .appeal-card {
    background: #ffffff;
    padding: 2.5rem;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    transition: all 0.4s ease;
    text-align: center;
    border: none;
}

.appeal-section-cards .appeal-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(0, 33, 71, 0.12);
}

/* アイコン - 福利厚生・応募方法と統一 */
.appeal-section-cards .appeal-card-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0068b7 0%, #00a8ff 100%);
    border-radius: 50%;
    color: #ffffff;
    font-size: 2rem;
    transition: all 0.3s ease;
}

.appeal-section-cards .appeal-card:hover .appeal-card-icon {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 6px 20px rgba(0, 104, 183, 0.4);
}

/* ヘッダー */
.appeal-section-cards .appeal-card-header {
    margin-bottom: 1rem;
}

/* 英語タイトル - recruit_v2.cssと統一 */
.appeal-section-cards .appeal-card-en {
    display: block;
    font-family: 'Hannari', serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: #0068b7;
    letter-spacing: 0.15em;
    margin-bottom: 0.5rem;
}

/* 日本語タイトル - 福利厚生と統一 */
.appeal-section-cards .appeal-card-title {
    font-family: 'Hannari', serif;
    font-size: 1.5rem;
    color: #002147;
    margin: 0;
    font-weight: 700;
    text-align: center;
    padding: 0; /* common.cssの main h3 を上書き */
}

/* サブタイトル */
.appeal-section-cards .appeal-card-subtitle {
    font-size: 1rem;
    color: #666666;
    line-height: 1.8;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid #e5e7eb;
}

/* リスト - 福利厚生リストと統一 */
.appeal-section-cards .appeal-card-list {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

.appeal-section-cards .appeal-card-list li {
    padding: 0.75rem 0;
    padding-left: 2rem;
    position: relative;
    font-size: 1rem;
    color: #333333;
    line-height: 1.6;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 0;
}

.appeal-section-cards .appeal-card-list li:last-child {
    border-bottom: none;
}

.appeal-section-cards .appeal-card-list li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #0068b7;
    font-weight: bold;
    font-size: 1.1rem;
}

.appeal-section-cards .appeal-card-list li i {
    display: none;
}

.appeal-section-cards .appeal-card-list li span {
    display: inline;
}

/* レスポンシブ調整 */
@media (max-width: 767px) {
    .appeal-section-cards {
        padding: 4rem 0;
    }

    .appeal-section-cards .appeal-card {
        padding: 2rem 1.5rem;
    }

    .appeal-section-cards .appeal-card-icon {
        width: 60px;
        height: 60px;
        font-size: 1.75rem;
    }

    .appeal-section-cards .appeal-card-title {
        font-size: 1.35rem;
    }

    .appeal-section-cards .appeal-card-subtitle {
        font-size: 0.95rem;
        margin-bottom: 1rem;
        padding-bottom: 1rem;
    }

    .appeal-section-cards .appeal-card-list li {
        font-size: 0.95rem;
        padding: 0.6rem 0;
        padding-left: 1.75rem;
    }
}

/* ========================================
   採用ページ専用CSS v2（統合）
   写真を活用したインパクトのあるデザイン
   ======================================== */

/* ================================================
   ① 募集メッセージ・魅力ポイントセクション v2
   60:40レイアウト + スライドインアニメーション
   ================================================ */

.appeal-section-v2 {
    padding: 5rem 0;
    /* background: #ffffff; */
    position: relative;
    z-index: 1;
    overflow: hidden;
}

@media (min-width: 768px) {
    .appeal-section-v2 {
        padding: 7rem 0;
    }
}

.appeal-container-v2 {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0;
}

/* アピールアイテム */
.appeal-item {
    display: flex;
    flex-direction: column;
    margin-bottom: 4rem;
    position: relative;
}

@media (min-width: 768px) {
    .appeal-item {
        position: relative;
        margin-bottom: 8rem;
        min-height: 500px;
    }
}

@media (min-width: 1024px) {
    .appeal-item {
        min-height: 550px;
        margin-bottom: 10rem;
    }
}

/* 左配置（画像左、テキスト右） */
.appeal-item-left {
    /* デフォルトは左配置 */
}

@media (min-width: 768px) {
    .appeal-item-left {
        display: block;
    }

    .appeal-item-left .appeal-image-wrapper {
        position: relative;
        width: 70%;
    }

    .appeal-item-left .appeal-content {
        position: absolute;
        right: 0;
        bottom: -60px;
        width: 50%;
        z-index: 2;
    }
}

/* 右配置（画像右、テキスト左） */
@media (min-width: 768px) {
    .appeal-item-right {
        display: block;
    }

    .appeal-item-right .appeal-image-wrapper {
        position: relative;
        width: 70%;
        margin-left: auto;
    }

    .appeal-item-right .appeal-content {
        position: absolute;
        left: 0;
        bottom: -60px;
        width: 50%;
        z-index: 2;
    }
}

/* 画像ラッパー */
.appeal-image-wrapper {
    width: 100%;
    position: relative;
}

.appeal-image-box {
    position: relative;
    width: 100%;
    height: 350px;
    overflow: hidden;
    border-radius: 0;
}

@media (min-width: 768px) {
    .appeal-image-box {
        height: 100%;
        min-height: 500px;
        border-radius: 0 16px 16px 0;
    }

    .appeal-item-right .appeal-image-box {
        border-radius: 16px 0 0 16px;
    }
}

@media (min-width: 1024px) {
    .appeal-image-box {
        min-height: 550px;
    }
}

/* 画像 */
.appeal-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.appeal-item:hover .appeal-image {
    transform: scale(1.08);
}

/* 画像オーバーレイ */
.appeal-image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0, 33, 71, 0.3) 0%, rgba(0, 104, 183, 0.2) 100%);
    opacity: 0.6;
    transition: opacity 0.5s ease;
}

.appeal-item:hover .appeal-image-overlay {
    opacity: 0.3;
}

/* ゴールドアクセントライン */
.appeal-image-box::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(135deg, rgba(0, 33, 71, 0.3) 0%, rgba(0, 104, 183, 0.2) 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.appeal-item.animate-in .appeal-image-box::after {
    transform: scaleX(1);
}

@media (min-width: 768px) {
    .appeal-item-right .appeal-image-box::after {
        transform-origin: right;
    }
}

/* コンテンツエリア */
.appeal-content {
    padding: 2.5rem 1.5rem;
    background: #ffffff;
    box-shadow: 0 10px 40px rgba(0, 33, 71, 0.15);
    border-radius: 12px;
}

@media (min-width: 768px) {
    .appeal-content {
        padding: 3rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

@media (min-width: 1024px) {
    .appeal-content {
        padding: 4rem;
    }
}

/* アイコン */
.appeal-icon {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0068b7 0%, #00a8ff 100%);
    border-radius: 50%;
    color: #ffffff;
    font-size: 2rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 15px rgba(0, 104, 183, 0.3);
    transition: all 0.4s ease;
}

.appeal-item:hover .appeal-icon {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 6px 20px rgba(0, 104, 183, 0.4);
}

/* タイトル */
.appeal-title {
    margin-bottom: 1rem;
}

.appeal-title-en {
    display: block;
    font-family: 'Hannari', serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: #0068b7;
    letter-spacing: 0.15em;
    margin-bottom: 0.5rem;
}

.appeal-title-ja {
    display: block;
    font-family: 'Hannari', serif;
    font-size: 1.75rem;
    font-weight: 700;
    color: #002147;
    line-height: 1.3;
}

@media (min-width: 768px) {
    .appeal-title-ja {
        font-size: 2rem;
    }
}

/* サブタイトル */
.appeal-subtitle {
    font-size: 1rem;
    color: #666666;
    line-height: 1.8;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid #e5e7eb;
}

/* リスト */
.appeal-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.appeal-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 1rem;
    color: #333333;
    line-height: 1.8;
    margin-bottom: 1rem;
    padding-left: 0.5rem;
}

.appeal-list li i {
    color: #0068b7;
    font-size: 1.1rem;
    margin-top: 0.25rem;
    flex-shrink: 0;
}

/* アニメーション初期状態 */
.appeal-item:not(.animate-in) {
    opacity: 0;
}

.appeal-item-left:not(.animate-in) .appeal-image-wrapper {
    transform: translateX(-100%);
    opacity: 0;
}

.appeal-item-left:not(.animate-in) .appeal-content {
    transform: translateY(50px);
    opacity: 0;
}

.appeal-item-right:not(.animate-in) .appeal-image-wrapper {
    transform: translateX(100%);
    opacity: 0;
}

.appeal-item-right:not(.animate-in) .appeal-content {
    transform: translateY(50px);
    opacity: 0;
}

/* アニメーション実行後 */
.appeal-item.animate-in {
    opacity: 1;
}

.appeal-item.animate-in .appeal-image-wrapper {
    transform: translateX(0);
    opacity: 1;
    transition: all 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.appeal-item.animate-in .appeal-content {
    transform: translateY(0);
    opacity: 1;
    transition: all 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    transition-delay: 0.3s;
}

/* レスポンシブ調整 */
@media (max-width: 767px) {
    .appeal-item {
        margin-bottom: 3rem;
    }

    .appeal-image-box {
        border-radius: 16px;
    }

    .appeal-item-left .appeal-image-wrapper,
    .appeal-item-right .appeal-image-wrapper {
        transform: translateY(30px);
    }

    .appeal-item-left .appeal-content,
    .appeal-item-right .appeal-content {
        transform: translateY(30px);
    }

    .appeal-item.animate-in .appeal-image-wrapper,
    .appeal-item.animate-in .appeal-content {
        transform: translateY(0);
    }
}

/* ================================================
   ② 仕事内容セクション - 写真活用デザイン
   ================================================ */

.job-card {
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    transform: translateY(30px);
}

.job-card.animate-in {
    opacity: 1;
    transform: translateY(0);
}

.job-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 20px 40px rgba(0, 33, 71, 0.15);
}

.job-card-image {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 1rem; /* PC表示時のpadding */
    box-sizing: border-box;
}

.job-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.job-card:hover .job-card-image img {
    transform: scale(1.1);
}

.job-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 0%, rgba(0, 33, 71, 0.8) 100%);
    transition: background 0.4s ease;
}

.job-card:hover .job-card-overlay {
    background: linear-gradient(to bottom, transparent 0%, rgba(0, 33, 71, 0.6) 100%);
}

.job-card-content {
    padding: 2rem;
}

.job-card-icon {
    width: 60px;
    height: 60px;
    margin: -50px auto 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #002147 0%, #0068b7 100%);
    border-radius: 16px;
    color: #ffffff;
    font-size: 1.75rem;
    box-shadow: 0 8px 24px rgba(0, 33, 71, 0.25);
    position: relative;
    z-index: 1;
}

.job-card-title {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-size: 1.5rem;
    color: #002147;
    margin-bottom: 1.5rem;
    font-weight: 700;
    text-align: center;
    padding: 0; /* common.cssの main h3 を上書き */
}

.job-card-duties h4 {
    font-size: 1rem;
    color: #002147;
    margin-bottom: 1rem;
    font-weight: 600;
}

.job-card-duties ul {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem 0;
}

.job-card-duties li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
    color: #555555;
    line-height: 1.6;
}

.job-card-duties li:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5rem;
    width: 6px;
    height: 6px;
    background: #0068b7;
    border-radius: 50%;
}

.job-card-badge {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

.job-card-badge span {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    color: #0068b7;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 20px;
}

/* ================================================
   ③ 募集要項セクション - テーブルデザイン
   ================================================ */

.requirements-row {
    display: grid;
    grid-template-columns: 200px 1fr;
    border-bottom: 1px solid #e5e7eb;
    transition: background 0.3s ease;
    opacity: 0;
    transform: translateX(-20px);
}

.requirements-row.animate-in {
    opacity: 1;
    transform: translateX(0);
}

.requirements-row:hover {
    background: #f8f9fa;
}

.requirements-row:last-child {
    border-bottom: none;
}

.requirements-label {
    padding: 2rem 1.5rem;
    background: #f8f9fa;
    font-weight: 700;
    color: #002147;
    font-size: 1.1rem;
    border-right: 3px solid #0068b7;
    display: flex;
    align-items: center;
}

.requirements-value {
    padding: 2rem 2rem;
}

.requirements-main {
    font-size: 1.1rem;
    color: #002147;
    font-weight: 600;
    margin-bottom: 1rem;
}

.requirements-sub {
    font-size: 0.95rem;
    color: #666666;
    margin-top: 0.5rem;
}

.requirements-list {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0;
}

.requirements-list li {
    padding: 0.5rem 0;
    font-size: 0.95rem;
    color: #555555;
    line-height: 1.8;
}

.requirements-list strong {
    color: #002147;
    font-weight: 600;
}

.requirements-allowances,
.requirements-welcome {
    margin-top: 1.5rem;
    padding: 1.5rem;
    background: #f0f7ff;
    border-left: 4px solid #0068b7;
    border-radius: 8px;
}

.requirements-allowances h4,
.requirements-welcome h4 {
    font-size: 1rem;
    color: #002147;
    margin-bottom: 1rem;
    font-weight: 600;
}

.requirements-allowances ul,
.requirements-welcome ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.requirements-allowances li,
.requirements-welcome li {
    padding: 0.5rem 0;
    padding-left: 1.5rem;
    position: relative;
    font-size: 0.95rem;
    color: #555555;
}

.requirements-allowances li:before,
.requirements-welcome li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #0068b7;
    font-weight: bold;
}

/* モバイル対応 */
@media (max-width: 767px) {
    .requirements-row {
        grid-template-columns: 1fr;
    }

    .requirements-label {
        border-right: none;
        border-bottom: 3px solid #0068b7;
    }
}

/* ================================================
   ④ 福利厚生セクション
   ================================================ */

.benefits-column {
    background: #ffffff;
    padding: 2.5rem;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    transition: all 0.4s ease;
    opacity: 0;
    transform: scale(0.95);
}

.benefits-column.animate-in {
    opacity: 1;
    transform: scale(1);
}

.benefits-column:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(0, 33, 71, 0.12);
}

.benefits-column-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0068b7 0%, #00a8ff 100%);
    border-radius: 50%;
    color: #ffffff;
    font-size: 2rem;
}

.benefits-column-title {
    font-family: 'Hannari', serif;
    font-size: 1.5rem;
    color: #002147;
    margin-bottom: 1.5rem;
    font-weight: 700;
    text-align: center;
    padding: 0; /* common.cssの main h3 を上書き */
}

.benefits-highlight {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    padding: 1rem;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    text-align: center;
}

.benefits-year-days {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0068b7;
    margin: 0;
    padding-bottom: 0;
}

.benefits-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.benefits-list li {
    padding: 1rem 0;
    padding-left: 2rem;
    position: relative;
    font-size: 1rem;
    color: #333333;
    line-height: 1.8;
    border-bottom: 1px solid #f0f0f0;
}

.benefits-list li:last-child {
    border-bottom: none;
}

.benefits-list li:before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 1rem;
    color: #0068b7;
    font-weight: bold;
    font-size: 1.2rem;
}

.benefits-note {
    display: block;
    font-size: 0.875rem;
    color: #777777;
    margin-top: 0.25rem;
}

/* 資格取得支援 */
.benefits-qualification {
    background: linear-gradient(135deg, #002147 0%, #0068b7 100%);
    padding: 3rem;
    border-radius: 20px;
    color: #ffffff;
    box-shadow: 0 12px 40px rgba(0, 33, 71, 0.2);
    opacity: 0;
    transform: translateY(30px);
}

.benefits-qualification.animate-in {
    opacity: 1;
    transform: translateY(0);
}

.benefits-qualification-header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.benefits-qualification-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    font-size: 2.5rem;
    backdrop-filter: blur(10px);
}

.benefits-qualification-header h3 {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.benefits-qualification-subtitle {
    font-size: 1.1rem;
    opacity: 0.9;
}

.benefits-qualification-content {
    display: grid;
    gap: 2.5rem;
}

.benefits-qualification-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.benefit-feature {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.benefit-feature:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateX(5px);
}

.benefit-feature i {
    font-size: 1.5rem;
    color: #4fc3f7;
}

.benefit-feature span {
    font-size: 1rem;
    font-weight: 600;
}

.benefits-qualification-certifications h4 {
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
    text-align: center;
}

.certification-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}

.certification-tag {
    padding: 0.75rem 1.5rem;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 25px;
    font-size: 0.95rem;
    font-weight: 600;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.certification-tag:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-3px);
}

@media (max-width: 767px) {
    .benefits-qualification-features {
        grid-template-columns: 1fr;
    }
}

/* ================================================
   ⑤ 応募方法セクション
   ================================================ */

.application-card {
    background: #ffffff;
    padding: 2.5rem 2rem;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    text-align: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    transform: scale(0.95);
}

.application-card.animate-in {
    opacity: 1;
    transform: scale(1);
}

.application-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 33, 71, 0.15);
}

.application-card-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f0f7ff 0%, #e3f2fd 100%);
    border-radius: 50%;
    color: #0068b7;
    font-size: 2rem;
    transition: all 0.3s ease;
}

.application-card:hover .application-card-icon {
    background: linear-gradient(135deg, #0068b7 0%, #00a8ff 100%);
    color: #ffffff;
    transform: rotate(10deg) scale(1.1);
}

.application-card-title {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-size: 1.25rem;
    color: #002147;
    margin-bottom: 1rem;
    font-weight: 700;
    text-align: center;
    padding: 0; /* common.cssの main h3 を上書き */
}

.application-card-description {
    font-size: 1rem;
    color: #666666;
    line-height: 1.8;
    margin-bottom: 1.5rem;
}

.application-card-phone {
    margin: 1.5rem 0;
}

.application-card-phone a {
    font-size: 1.75rem;
    font-weight: 700;
    color: #0068b7;
    text-decoration: none;
    transition: color 0.3s ease;
}

.application-card-phone a:hover {
    color: #002147;
}

.application-card-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    background: linear-gradient(135deg, #002147 0%, #0068b7 100%);
    color: #ffffff;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 33, 71, 0.2);
    text-align: center;
}

.application-card-button:hover {
    transform: translateX(5px);
    box-shadow: 0 6px 20px rgba(0, 33, 71, 0.3);
}

.application-card-button i {
    transition: transform 0.3s ease;
}

.application-card-button:hover i {
    transform: translateX(5px);
}

/* ================================================
   アニメーション用のユーティリティクラス
   ================================================ */

.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in-up.active {
    opacity: 1;
    transform: translateY(0);
}

.slide-in-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.slide-in-left.active {
    opacity: 1;
    transform: translateX(0);
}

.slide-in-right {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.slide-in-right.active {
    opacity: 1;
    transform: translateX(0);
}

.scale-in {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.scale-in.active {
    opacity: 1;
    transform: scale(1);
}

/* ================================================
   モバイル対応（767px以下）- v2統合
   ================================================ */

@media (max-width: 767px) {
    /* ① 魅力ポイントセクション - タイトル中央揃え */
    /* common.cssの main h3 スタイルを上書き */
    .appeal-section-cards .appeal-card-title,
    .appeal-section-cards h3.appeal-card-title {
        padding: 0 !important;
        text-align: center !important;
    }

    /* ② 仕事内容セクション */
    /* ジョブカード全体のパディング調整 */
    .job-card {
        border-radius: 12px;
    }

    /* ジョブタイトルのフォントサイズ縮小・中央揃え */
    /* common.cssの main h3 スタイルを上書き */
    .job-card-title,
    h3.job-card-title,
    .job-card h3.job-title {
        font-size: 1.1rem !important;
        padding: 0 !important;
        text-align: center !important;
    }

    /* ジョブカードコンテンツのパディングを半分に */
    .job-card-content {
        padding: 1rem;
    }

    /* ジョブカード画像の高さ調整 */
    .job-card-image {
        height: 200px;
    }

    /* アイコンのマージン調整 */
    .job-card-icon {
        margin: -40px auto 1rem;
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
    }

    /* 業務内容のマージン調整 */
    .job-card-duties h4 {
        margin-bottom: 0.75rem;
    }

    .job-card-duties ul {
        margin: 0 0 1rem 0;
    }

    .job-card-duties li {
        margin-bottom: 0.5rem;
        font-size: 0.9rem;
    }

    /* ④ 福利厚生セクション - タイトル中央揃え */
    /* common.cssの main h3 スタイルを上書き */
    .benefits-column-title,
    h3.benefits-column-title {
        padding: 0 !important;
        text-align: center !important;
    }

    /* ⑤ 応募方法セクション */
    /* ボタンのフォントサイズ縮小（改行防止） */
    .application-card-button {
        font-size: 0.85rem;
        padding: 0.75rem 1.25rem;
        gap: 0.5rem;
    }

    /* タイトル中央揃え */
    /* common.cssの main h3 スタイルを上書き */
    .application-card-title,
    h3.application-card-title {
        padding: 0 !important;
        text-align: center !important;
    }

    /* カード全体のパディング調整 */
    .application-card {
        padding: 2rem 1.5rem;
    }

    /* 電話番号サイズ調整 */
    .application-card-phone a {
        font-size: 1.5rem;
    }
}