/* --- Base Styles --- */
:root {
    --primary-color: #00489e;
    --midnight-color: #2c3e50;
    --smartblue-color:#4da2d8;
    --accentorange-color:#FFA41A;
    --text-color: #2b2b2b;
    --murata-color: #2b2b2b;
    --bg-color: #E2EBF0;
    --white: #ffffff;
    --dark-bg: #1a1a1a;
    --font-base: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
}

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

body {
    font-family: var(--font-base);
    color: var(--text-color);
    line-height: 1.6;
    font-size: clamp(16px, calc(100vw * 16 / 1440), 18px);
}
p {
    line-height: 1.8;
}

a {
    text-decoration: none;
    color: inherit;
    transition: opacity 0.3s;
}

a:hover {
    opacity: 0.7;
}

ul {
    list-style: none;
}

/* ロゴのサイズを明示的に指定 */
/* --- Header Logo Adjustment --- */

.logo {
    width: 230px; /* ロゴエリアの幅 */
    display: flex;
    align-items: center;
}

/* インラインSVGのサイズ調整 */
.site-logo-svg {
    width: 100%;
    height: auto;
    display: block;
}

.bg_skyblue{
    background-color: var(--bg-color);
}
.btn-color{
    background-color: var(--murata-color);    
}
.container {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 20px;
}

.section {
    padding: 80px 0;
}
.section-divider{
  border-top: 1px solid #ddd;
  max-width: 1040px;
  margin: 0 auto;
}
.no-sp{
    display:block;
}
.no-pc{
    display:none;
}
.pdt50{
    padding-top: 50px;
}
h2 {
    font-size: 3.5rem;
    margin-bottom: 20px;
    display: flex;
    align-items: baseline;
    gap: 15px;
}
.h2-sm {
  font-size: 2.5rem;
  font-weight: normal;
}

.subtitle {
    font-size: 1.5rem;
    font-weight: normal;
}


/* ボタン類 */
.btn-oval {
    display: inline-block;
    padding: 10px 30px;
    border-radius: 50px;
    background-color: var(--primary-color);
    color: var(--white);
    font-size: 0.9rem;
    font-weight: bold;
}

.btn-white {
    background-color: transparent;
    border: 2px solid var(--white);
}

/* --- Header --- */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    
    /* 初期状態：透明背景・白文字 */
    background-color: transparent;
    color: var(--white);
    
    transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100px;
    padding: 0 40px;
}

.nav-list {
    display: flex;
    gap: 55px;
    align-items: center;
}

.btn-contact {
    background: var(--dark-bg);
    color: var(--white);
    padding: 8px 20px;
    border-radius: 4px;
    transition: background-color 0.3s;
}

/* ヘッダーの状態変化クラス */

/* 白背景モード（上スクロール時） */
.header.is-white {
    background-color: rgba(255, 255, 255, 0.95);
    color: #333; /* 文字を黒に */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.site-logo-svg .is-black .st1 {
    fill: #000000 !important;
}


/* 白背景時のボタン調整 */
.header.is-white .btn-contact {
    background-color: var(--primary-color);
}

/* 隠すモード（下スクロール時） */
.header.is-hidden {
    transform: translateY(-100%);
}

/* Mobile Menu Toggle (Checkbox Hack) */
.menu-toggle, .menu-icon { display: none; }


/* --- Footer --- */
.footer {
    background-color: var(--murata-color);
    color: #fff;
    font-size: 0.9rem;
}

/* ============================
   1. Contact Area
   ============================ */
.contact-area {
    padding: 80px 0;
    border-bottom: 1px solid #333; /* 下のエリアとの区切り線 */
}

.contact-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    /* 枠線と背景 */
    border: 1px solid rgba(255, 255, 255, 0.4);
    background-color: #111; /* 初期は背景と同じ色 */
    padding: 50px 60px;
    
    text-decoration: none;
    color: #fff;
    transition: all 0.3s ease;
    position: relative;
}

/* ホバー時の挙動：青背景に変化 */
.contact-inner:hover {
    background-color: #002D5A; /* メインカラーの青 */
    border-color: #002D5A;     /* 枠線も青になじませる */
}

.contact-text h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
    display: flex;
    align-items: baseline;
    gap: 20px;
    font-family: sans-serif; /* 英字フォント調整 */
}

.contact-text h2 .subtitle {
    font-size: 1rem;
    font-weight: normal;
    color: #ccc;
}

.contact-text p {
    font-size: 0.85rem;
    line-height: 1.8;
    color: #ccc;
}

/* 矢印アイコン */
.arrow-circle {
    width: 60px;
    height: 60px;
    background: #fff;
    color: #111;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    font-weight: bold;
    flex-shrink: 0;
}

/* ============================
   2. Footer Bottom Area
   ============================ */
.footer-bottom {
    padding: 60px 0 20px;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 40px;
    margin-bottom: 60px;
}

/* --- Left Side (Logo & P-mark) --- */
.footer-left {
    flex: 0 0 250px; /* 幅固定 */
}

.footer-logo {
    margin-bottom: 30px;
}
.logo-text {
    font-size: 1.2rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 10px;
}
.logo-text::before {
    /* 簡易的なロゴマーク代わり */
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    background: #fff; 
    /* 画像がある場合は background: url(...) no-repeat center/contain; に変更 */
}
.logo-sub {
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    margin-top: 4px;
    color: #ccc;
    padding-left: 34px; /* アイコン分ずらす */
}

.p-mark-area {
    margin: 30px 0;
}
.p-mark-img {
    width: 80px;
    height: 80px;
    display: flex;
}

.privacy-link {
    font-size: 0.8rem;
    color: #ccc;
    display: block;
}

/* --- Right Side (Navigation Grid) --- */
.footer-nav {
    flex: 1;
    display: grid;
    /* 5列のカラムを作成 */
    grid-template-columns: repeat(6, 1fr); 
    gap: 20px;
}


.nav-head {
    display: block;
    font-weight: bold;
    color: #fff;
    margin-bottom: 20px;
    font-size: 0.9rem;
    text-decoration: none;
}
.nav-head:hover { opacity: 0.7; }

.external-icon {
    font-size: 0.8em;
    margin-left: 4px;
}

.mt-link {
    margin-top: 20px;
}

.nav-sub {
    list-style: none;
    padding: 0;
}

.nav-sub li {
    margin-bottom: 12px;
}

.nav-sub li a {
    color: #999;
    font-size: 0.85rem;
    text-decoration: none;
    transition: color 0.3s;
}

.nav-sub li a:hover {
    color: #fff;
}

/* --- Copyright --- */
.copyright {
    text-align: right;
    font-size: 0.75rem;
    color: #666;
    border-top: 1px solid #222; /* コピーライト上の薄い線（不要なら削除） */
    padding-top: 20px;
}

/* ============================
   Mobile Responsive
   ============================ */
@media (max-width: 900px) {
    .no-sp{
        display:none !important;
    }
    .no-pc{
        display:block;
    }
    .contact-text h2 {
        font-size: 1.8rem;
    }
    
/* Footer Contact スマホ調整 */
    .contact-inner {
        display: block;
        position: relative; /* 矢印を配置する基準点 */        
        padding: 40px 20px;
        text-align: left; /* テキストは左揃え */
    }

    /* テキストエリア */
    .contact-text {
        padding-right: 70px; 
    }
    .contact-text p {
        text-align: left;
    }

    .contact-text h2 {
        font-size: 1.8rem;
        justify-content: flex-start; /* 左寄せ */
        margin-bottom: 15px;
    }

    .arrow-circle {
        position: absolute;
        top: 40px;   /* 全体の余白(padding-top)と同じ位置に合わせる */
        right: 20px; /* 全体の余白(padding-right)と同じ位置に合わせる */
        
        /* サイズ調整（必要であれば） */
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
    }

    .footer-content {
        flex-direction: column;
    }

    .footer-nav {
        width: 100%;
        /* スマホでは2列にする */
        grid-template-columns: 1fr 1fr; 
        gap: 30px;
    }
    
    .copyright {
        text-align: center;
    }
}

/* ====================================
   Mobile Menu Styles
   ==================================== */

/* メニュー本体（初期状態は隠す） */
.mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    background-color: #fff;
    z-index: 9999;
    
    /* アニメーションで表示するための設定 */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-20px);
    transition: all 0.3s ease;
    
    display: flex;
    flex-direction: column;
}

/* 表示状態のクラス */
.mobile-menu.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* ====================================
   PC Mega Menu / Dropdown
   ==================================== */

/* 親リストの設定 */
.nav-list li.has-dropdown {
    position: relative; /* 子要素の基準点 */
}

/* トリガーとなるリンクの見た目 */
.nav-link-trigger {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    gap: 4px;
}

.caret {
    font-size: 0.6em;
    transition: transform 0.3s;
}

/* メニューが開いている時の矢印回転 */
.has-dropdown.is-active .caret {
    transform: rotate(180deg);
}

/* --- ドロップダウンパネル本体 --- */
.dropdown-menu {
    position: absolute;
    top: 100%; /* ヘッダーの真下 */
    left: 50%;
    transform: translateX(-50%) translateY(10px); /* 中央寄せ + 少し下に配置 */
    
    width: 600px; /* パネルの幅（お好みで調整） */
    background-color: #fff;
    
    /* デザイン装飾 */
    border-top: 3px solid var(--primary-color); /* 青いアクセントライン */
    box-shadow: 0 10px 30px rgba(0,0,0,0.1); /* ふんわりした影 */
    border-radius: 0 0 4px 4px;
    
    padding: 30px;
    
    /* アニメーション用初期状態（隠す） */
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    
    /* 文字色は常に黒（ヘッダーが透明な時もここは白背景なので） */
    color: #333;
    text-align: left;
}

/* 表示状態 */
.has-dropdown.is-active .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0); /* スッと上に上がる */
}

/* --- パネル内部のレイアウト --- */
.dropdown-inner {
    display: flex;
    gap: 40px; /* 左のタイトルと右のリンクの間隔 */
}

/* 左側：タイトルエリア */
.dropdown-info {
    flex: 0 0 150px; /* 幅固定 */
    border-right: 1px solid #eee; /* 区切り線 */
    padding-right: 20px;
    display: flex;
    flex-direction: column;
}

.dropdown-info .en {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--primary-color);
    line-height: 1;
}

.dropdown-info .ja {
    font-size: 0.8rem;
    color: #999;
    margin-top: 5px;
}

/* 右側：リンク一覧 */
.dropdown-links {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2列にする */
    gap: 15px 30px;
    list-style: none;
    padding: 0;
}

.dropdown-links li a {
    color: #333;
    transition: color 0.2s;
    display: block;
    position: relative;
    padding-left: 15px; /* アイコン用のスペース */
}

/* リンクの左に小さな矢印をつける */
.dropdown-links li a::before {
    content: '›';
    position: absolute;
    left: 0;
    color: #ccc;
    font-weight: bold;
    transition: color 0.2s;
}

.dropdown-links li a:hover {
    color: var(--primary-color);
}
.dropdown-links li a:hover::before {
    color: var(--primary-color);
}


/* --- Recruit Section (Diagonal Slider) --- */
.recruit-section-diagonal {
    position: relative;
    background-color: #003366; /* 濃いネイビー */
    color: #fff;
    overflow: hidden; /* はみ出した部分を隠す */
    padding: 0;
    min-height: 600px;
    display: flex;
    align-items: center;
}

.recruit-section-diagonal .container-fluid {
    display: flex;
    width: 100%;
    height: 100%;
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* 左側：テキスト */
.recruit-text-area {
    width: 40%;
    padding: 80px 40px;
    z-index: 10; /* 画像より手前に表示 */
    background: linear-gradient(to right, #003366 80%, transparent); /* 文字が読みやすいように背景を少しぼかす */
}

.recruit-title {
    font-size: 3.5rem;
    margin-bottom: 30px;
    font-weight: bold;
}

.recruit-title .ja {
    font-size: 1.2rem;
    font-weight: normal;
    margin-left: 15px;
    opacity: 0.8;
}

.recruit-desc {
    font-size: 1.1rem;
    line-height: 2;
    margin-bottom: 40px;
    opacity: 0.9;
}

.btn-recruit {
    display: inline-flex;
    align-items: center;
    background: #222;
    color: #fff;
    padding: 15px 40px;
    border-radius: 50px;
    font-weight: bold;
    border: 1px solid rgba(255,255,255,0.2);
    transition: all 0.3s;
}

.btn-recruit:hover {
    background: #fff;
    color: #003366;
}

.btn-recruit .icon-arrow {
    margin-left: 10px;
    font-size: 1.2rem;
}



/* --- Recruit Section (Urban Tech Stream) - Dark Version --- */
.recruit-section-urban {
    position: relative;
    padding: 100px 0;
    /* 背景色を濃いネイビーに変更 */
    background-color: #003366;
    color: #fff; /* 基本テキスト色を白に */
    overflow: hidden;
    min-height: 700px;
}

/* 背景の大胆な斜めライン（色を調整） */
.urban-bg-shape {
    position: absolute;
    top: 0;
    right: 0;
    width: 65%;
    height: 100%;
    /* 背景となじむ少し明るい青のグラデーションに変更 */
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.02) 100%);
    clip-path: polygon(20% 0, 100% 0, 100% 100%, 0% 100%);
    z-index: 1;
}

/* コンテンツコンテナ */
.container-urban {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    z-index: 2;
}

/* 左側：テキスト */
.urban-text {
    width: 35%;
    padding-right: 40px;
}

.urban-title {
    font-size: 3.5rem;
    font-weight: 800;
    color: #fff; /* 白に変更 */
    margin-bottom: 20px;
    line-height: 1;
}

.urban-title .ja {
    display: block;
    font-size: 1rem;
    font-weight: normal;
    color: rgba(255,255,255,0.7); /* 少し透明な白 */
    margin-top: 10px;
    letter-spacing: 2px;
}

.urban-desc {
    font-size: 1rem;
    line-height: 2;
    color: rgba(255,255,255,0.9); /* 白に変更 */
    margin-bottom: 40px;
}

/* ボタンの色を反転 */
.btn-urban-outline {
    display: inline-block;
    padding: 12px 40px;
    border: 1px solid #fff; /* 白枠 */
    color: #fff; /* 白文字 */
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 1px;
    transition: all 0.3s;
}

.btn-urban-outline:hover {
    background-color: #fff; /* 背景を白に */
    color: #003366; /* 文字をネイビーに */
    padding-right: 50px;
}

.btn-urban-outline .arrow {
    margin-left: 10px;
}



/* --- Recruit Section (Urban Tech Stream) - Final Version --- */
:root {
    /* HTMLに書いた「基本の1セットの枚数」に合わせてください。
       先ほどのHTML例では1列に4枚書いたので、ここは「4」にします。
    */
    --items-per-set: 4; 
    
    /* 他の設定は変更なし */
    --card-height: 220px;
    --stream-gap: 15px;
    --scroll-distance: calc((var(--card-height) + var(--stream-gap)) * var(--items-per-set) * -1);
}

.recruit-section-urban {
    position: relative;
    padding: 60px 0;
    background-color: #003366;
    color: #fff;
    overflow: hidden;
    min-height: 500px; 
}

/* 背景の斜めシェイプ */
.urban-bg-shape {
    position: absolute;
    top: 0;
    right: 0;
    width: 60%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.02) 100%);
    clip-path: polygon(20% 0, 100% 0, 100% 100%, 0% 100%);
    z-index: 1;
}

/* コンテンツコンテナ (幅1040px指定) */
.container-urban {
    position: relative;
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    z-index: 2;
}

/* 左側：テキストエリア */
.urban-text {
    width: 35%;
    padding-right: 20px;
}

.urban-title {
    font-size: 3rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 20px;
    line-height: 1;
}

.urban-title .ja {
    display: block;
    font-size: 1rem;
    font-weight: normal;
    color: rgba(255,255,255,0.7);
    margin-top: 10px;
    letter-spacing: 2px;
}

.urban-desc {
    font-size: 1rem;
    line-height: 2;
    color: rgba(255,255,255,0.9);
    margin-bottom: 40px;
}

/* ボタンデザイン */
.btn-urban-outline {
    display: inline-block;
    padding: 12px 35px;
    border: 1px solid #fff;
    color: #fff;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 1px;
    text-decoration: none;
    transition: all 0.3s;
}

.btn-urban-outline:hover {
    background-color: #fff;
    color: #003366;
    padding-right: 45px;
}

.btn-urban-outline .arrow {
    margin-left: 10px;
}

/* 右側：ストリームラッパー */
.urban-stream-wrapper {
    width: 60%;
    height: 400px;
    display: flex;
    justify-content: center;
    gap: var(--stream-gap); /* 変数を使用 */
    
    /* 全体を5度傾ける */
    transform: rotate(5deg) translateY(-30px);
    will-change: transform; /* 描画最適化 */
}

.stream-col {
    width: 32%;
    display: flex;
    flex-direction: column;
    gap: var(--stream-gap);
}

/* 画像カード */
.stream-item {
    width: 100%;
    height: var(--card-height); /* 変数を使用 */
    flex-shrink: 0;
}

.img-card {
    width: 100%;
    height: 100%;
    background-color: #fff;
    /*border-radius: 10px;*/
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    overflow: hidden;
    
    /* プレースホルダー中央揃え */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-weight: bold;
    
    /* 実際の画像を入れる際のプロパティ */
    background-size: cover;
    background-position: center;
}

/* ループアニメーション定義 */
@keyframes flowUp {
    0% { transform: translateY(0); }
    100% { transform: translateY(var(--scroll-distance)); }
}

@keyframes flowDown {
    0% { transform: translateY(var(--scroll-distance)); }
    100% { transform: translateY(0); }
}

/* 1列目：上へ移動 */
.col-1 {
    margin-top: 0;
    /* delayをマイナスにすることで、最初から「途中」の状態を表示させます */
    animation: flowUp 40s linear infinite;
    animation-delay: -10s; /* 10秒経過した位置からスタート */
}

/* 2列目：下へ移動（逆走） */
.col-2 {
    margin-top: 40px;
    animation: flowDown 35s linear infinite;
    animation-delay: -25s; /* 逆方向なので、たっぷり時間を進めておく */
}

/* 3列目：上へ移動 */
.col-3 {
    margin-top: 20px;
    animation: flowUp 30s linear infinite;
    animation-delay: -5s; /* 少しズレた位置からスタート */
}

/* スマホ用エリア（初期状態は非表示） */
.mobile-visual { display: none; }

/* --- Responsive (Mobile: 768px以下) --- */
@media (max-width: 768px) {
    .recruit-section-urban {
        padding: 60px 0;
    }

    .urban-bg-shape {
        width: 100%;
        height: 50%;
        clip-path: polygon(0 20%, 100% 0, 100% 100%, 0% 100%);
        bottom: 0; top: auto;
    }

    .container-urban {
        flex-direction: column;
        padding: 0 20px;
        max-width: 100%;
    }

    .urban-text {
        width: 100%;
        padding-right: 0;
        margin-bottom: 40px;
        text-align: center;
    }

    .urban-title {
        font-size: 2.5rem;
    }

    /* スマホではアニメーションストリームを非表示 */
    .urban-stream-wrapper {
        display: none;
    }

    /* スマホ用静止画を表示 */
    .mobile-visual {
        display: block;
        width: 100%;
        height: 250px;
        margin-top: 20px;
    }

    .img-card-static {
        width: 100%;
        height: 100%;
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #666;
        
        background-size: cover;
        background-position: center;
    }
}




/* --- Header --- */
.mobile-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #eee; /* 薄い区切り線 */
}

.mobile-logo {
    display: flex;
    flex-direction: column;
}
.logo-text-sp {
    font-weight: bold;
    font-size: 1.1rem;
    color: #333;
}
.logo-sub-sp {
    font-size: 0.7rem;
    color: #999;
    letter-spacing: 0.05em;
}

/* 閉じるボタン（丸い枠の中にX） */
.menu-close-btn {
    width: 40px;
    height: 40px;
    border: 1px solid #333;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #333;
    padding: 0;
}
.menu-close-btn span {
    margin-top: -2px; /* 位置微調整 */
}

/* --- Content --- */
.mobile-menu-content {
    flex: 1;
    overflow-y: auto; /* 縦スクロール許可 */
    padding-bottom: 40px;
}

.mobile-nav-list {
    list-style: none;
    padding: 0 20px;
}

/* リストアイテム共通 */
.mobile-nav-list > li {
    border-bottom: 1px solid #eee;
}

.mobile-nav-list a,
.accordion-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    text-decoration: none;
    color: #333;
    cursor: pointer;
}

/* ラベルテキスト */
.nav-label {
    display: flex;
    flex-direction: column;
}
.nav-label .en {
    font-size: 1.2rem;
    font-weight: bold;
    line-height: 1.2;
}
.nav-label .ja {
    font-size: 0.8rem;
    color: #666;
    margin-top: 4px;
}

/* アイコン */
.icon-arrow, .icon-external {
    font-size: 1.2rem;
    color: #333;
}
.icon-external {
    font-size: 1rem;
    border: 1px solid #333;
    border-radius: 4px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- Accordion Styles --- */
.icon-chevron {
    width: 12px;
    height: 12px;
    border-right: 2px solid #333;
    border-bottom: 2px solid #333;
    transform: rotate(45deg); /* 下向き矢印 */
    transition: transform 0.3s;
    margin-right: 5px;
}

/* 開いている時の矢印の向き */
.accordion-item.is-active .icon-chevron {
    transform: rotate(225deg); /* 上向き矢印 */
}

/* サブメニュー（初期は隠す） */
.accordion-body {
    display: none; /* JSでslideToggle的に制御 */
    list-style: none;
    padding-left: 0;
    padding-bottom: 20px;
}

.accordion-body li {
    padding: 8px 0 8px 15px; /* インデント */
    position: relative;
}

/* 画像にあるグレーの丸ポチ */
.accordion-body li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 18px;
    width: 6px;
    height: 6px;
    background-color: #ccc;
    border-radius: 50%;
}

.accordion-body li a {
    padding: 0;
    font-size: 0.9rem;
    color: #333;
    font-weight: bold;
}

/* 開いている時の表示 */
.accordion-item.is-active .accordion-body {
    display: block;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}


/* --- ハンバーガーボタンの修正（既存のcheckbox hackを無効化） --- */
/* 以前のCSSで .menu-toggle input などがあれば削除し、以下を使用 */
.menu-trigger {
    display: none; /* PCでは非表示 */
}

@media (max-width: 900px) {
    .menu-trigger {
        display: block;
        width: 30px;
        height: 24px;
        position: relative;
        cursor: pointer;
        z-index: 9990; /* メニューよりは下、ヘッダーより上 */
    }
    .menu-trigger span {
        display: block;
        width: 100%;
        height: 2px;
        background: #333; /* 初期色 */
        position: absolute;
        left: 0;
        transition: background 0.3s;
    }
    .menu-trigger span:nth-child(1) { top: 0; }
    .menu-trigger span:nth-child(2) { top: 11px; }
    .menu-trigger span:nth-child(3) { bottom: 0; }
    
    /* ヘッダーが白背景モードの時は黒、透明の時は白にするなどの制御が必要 */
    .header.is-white .menu-trigger span { background: #333; }
    /* 初期状態が透明なら白 */
    .header:not(.is-white) .menu-trigger span { background: #fff; }
}

/* --- Responsive (Mobile) --- */
@media (max-width: 768px) {
    .header-inner { padding: 0 20px; }
    .nav { display: none; }
    
    .menu-icon {
        display: block;
        width: 30px;
        height: 20px;
        position: relative;
        cursor: pointer;
    }
    .menu-icon span, .menu-icon::before, .menu-icon::after {
        content: ''; position: absolute; width: 100%; height: 2px; background: #fff; /* スマホ時のハンバーガーは白 */
        left: 0; transition: background 0.3s;
    }
    /* 白背景モード時はハンバーガーメニューも黒くする */
    .header.is-white .menu-icon span, 
    .header.is-white .menu-icon::before, 
    .header.is-white .menu-icon::after {
        background: #333;
    }

    .menu-icon::before { top: 0; }
    .menu-icon span { top: 9px; }
    .menu-icon::after { bottom: 0; }

    .hero { height: 400px; }
    .hero-content h1 { font-size: 2.5rem; }
    .news-list li { flex-direction: column; align-items: flex-start; gap: 5px; }
    .grid-2 { grid-template-columns: 1fr; }
    .recruit-content { flex-direction: column; }
    .recruit-text { padding: 60px 20px; }
    .recruit-img { height: 250px; min-height: auto; }
    .contact-inner { flex-direction: column; gap: 30px; text-align: center; }
    .footer-links { flex-direction: column; gap: 20px; }
}


/* --- Message Section (Final Refined Version) --- */

.section-message {
    position: relative;
    padding: 60px 0; /* 上下にたっぷりと余白を取る */
    background-color: #fff;
    color: #333;
    overflow: hidden; /* 背景文字のはみ出し防止 */
}

/* 背景の巨大文字（装飾） */
.message-bg-text {
    position: absolute;
    top: -20px;
    left: 50px;
    font-size: 15vw; /* 画面幅に合わせて巨大化 */
    font-weight: 900;
    font-family: "Helvetica Neue", Arial, sans-serif;
    color: #f9f9f9; /* 限りなく白に近いグレー */
    line-height: 1;
    z-index: 0;
    pointer-events: none;
    letter-spacing: -0.02em;
}

.container-message {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 40px;
    position: relative;
    z-index: 1; /* 文字より手前に */
}

/* 上下のボーダーライン（グリッド感） */
.message-border-top,
.message-border-bottom {
    width: 100%;
    height: 1px;
    background-color: #e0e0e0;
    display: block;
}

/* レイアウト：2カラム（コピー / 本文） */
.message-inner {
    display: flex;
    justify-content: space-between; /* 左右に配置 */
    align-items: flex-start; /* 上揃え */
    padding: 80px 0; /* 線との間の余白 */
}

/* --- 1. 左：キャッチコピーエリア --- */
.message-col-copy {
    width: 45%; /* 幅を確保 */
    padding-right: 40px;
}

.main-copy {
    font-size: 3rem; /* インパクトのあるサイズ */
    font-weight: 800;
    line-height: 1.5; /* 行間を広げて優雅に */
    color: #000; /* 濃紺 */
    letter-spacing: -0.02em;
    font-feature-settings: "palt"; /* 日本語の文字詰め */
    margin-bottom: 30px;
    
    /* 意図しない位置での改行を防ぐ */
    word-break: keep-all; 
    overflow-wrap: break-word;
}

.copy-line {
    width: 60px;
    height: 4px;
    background-color: #000; /* オレンジのアクセント */
    margin-top: 0;
}

/* --- 2. 右：本文エリア --- */
.message-col-text {
    width: 48%; /* 右側の幅 */
}

.text-body {
    font-size: 1rem;
    line-height: 2.2; /* 行間を広めに取って読みやすく（ここが重要） */
    letter-spacing: 0.05em; /* 文字間を少し開ける */
    margin-bottom: 35px;
    text-align: justify; /* 両端揃え */
}


/* リンクボタン */
.btn-message-link {
    display: inline-block;
    font-family: "Helvetica Neue", Arial, sans-serif;
    font-size: 0.85rem;
    font-weight: bold;
    color: #060336;
    text-decoration: none;
    letter-spacing: 1px;
    border-bottom: 2px solid #003366;
    padding-bottom: 3px;
    transition: all 0.3s;
}

.btn-message-link:hover {
    color: #ffa41a;
    border-bottom-color: #ffa41a;
    padding-right: 15px;
}

/* --- Responsive (Mobile) --- */
@media (max-width: 900px) {
    .section-message {
        padding: 60px 0;
    }
    
    .container-message {
        padding: 0 20px;
    }

    .message-bg-text {
        font-size: 25vw;
        top: 10px;
    }

    .message-inner {
        flex-direction: column; /* 縦積みに */
        padding: 40px 0;
    }

    /* キャッチコピー */
    .message-col-copy {
        width: 100%;
        padding-right: 0;
        margin-bottom: 40px;
    }

    .main-copy {
        font-size: 2rem; /* スマホサイズ */
    }
    
    .main-copy br {
        display: none; /* スマホでは画面幅に合わせて自然に改行 */
    }

    /* 本文 */
    .message-col-text {
        width: 100%;
    }
}

/* --- Pattern 1: Sharp Slide (王道シンプル) --- */
.btn-style-1 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #003366; /* 濃紺 */
    color: #fff;
    font-size: 0.9rem;
    font-weight: bold;
    text-decoration: none;
    padding: 12px 35px; /* 横幅に余裕を持たせる */
    border-radius: 50px; /* 丸い形状 */
    transition: all 0.3s ease;
    position: relative;
    padding-right: 50px; /* 矢印の動くスペースを確保 */
}

/* 矢印を作る（CSSの線で描画） */
.btn-style-1::after {
    content: '';
    position: absolute;
    right: 25px; /* 初期位置 */
    width: 6px;
    height: 6px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg); /* 45度回転させて「>」にする */
    transition: all 0.3s ease;
}

/* ホバー時の動き */
.btn-style-1:hover {
    background-color: #002244; /* 少し濃く */
    padding-right: 40px; /* 全体のバランス調整 */
}

.btn-style-1:hover::after {
    right: 20px; /* 右へ移動 */
}

/* --- Pattern 2: Long Arrow (先進的トレンド) --- */
.btn-style-2 {
    display: inline-flex;
    align-items: center;
    background-color: #003366;
    color: #fff;
    font-size: 0.9rem;
    font-weight: bold;
    text-decoration: none;
    padding: 12px 30px;
    border-radius: 50px;
    transition: all 0.3s ease;
    padding-right: 60px; /* 矢印エリアを広めに */
    position: relative;
    overflow: hidden; /* はみ出し防止 */
}

/* 矢印の「線」部分 */
.btn-style-2::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 25px;
    width: 15px; /* 線の長さ */
    height: 1px;
    background-color: #fff;
    transform: translateY(-50%);
    transition: all 0.3s ease;
}

/* 矢印の「頭」部分 */
.btn-style-2::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 25px;
    width: 6px;
    height: 6px;
    border-top: 1px solid #fff; /* 線を細くして上品に */
    border-right: 1px solid #fff;
    transform: translateY(-50%) rotate(45deg);
    transition: all 0.3s ease;
}

/* ホバー時の動き */
.btn-style-2:hover::before {
    width: 25px; /* 線が伸びる */
    right: 20px;
}

.btn-style-2:hover::after {
    right: 20px; /* 頭も一緒に移動 */
}

/* --- Pattern 3: Circle Icon (視認性重視) --- */
.btn-style-3 {
    display: inline-flex;
    align-items: center;
    justify-content: space-between; /* 文字と矢印を離す */
    background-color: #003366;
    color: #fff;
    font-size: 0.9rem;
    font-weight: bold;
    text-decoration: none;
    padding: 8px 10px 8px 30px; /* 右側の余白を減らす */
    border-radius: 50px;
    transition: background-color 0.3s;
    min-width: 180px; /* 最低幅を指定 */
}

/* 白い丸を作る */
.btn-style-3::after {
    content: '';
    display: inline-block;
    width: 32px;
    height: 32px;
    background-color: #fff;
    border-radius: 50%;
    /* 矢印の画像（CSSで描画も可能ですが背景画像が簡単） */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23003366' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
    background-size: 16px;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.3s ease;
    margin-left: 15px;
}

/* ホバー時の動き */
.btn-style-3:hover {
    background-color: #002244;
}

.btn-style-3:hover::after {
    transform: translateX(5px); /* 丸ごと右へ */
}