@charset "utf-8";

/* =========================================
   基本レイアウト・共通設定
========================================= */
*, *::before, *::after { box-sizing: border-box; }

@media(min-width: 768px) {
	#wrapper { position: relative; }
	#header { position: relative !important; top: auto; left: auto; right: auto; z-index: 100; } 
}

img { max-width: 100%; height: auto; display: block; }
ul { list-style: none; padding: 0; margin: 0; }
a { text-decoration: none; color: inherit; }
.gothic { font-family: 'Noto Sans JP', sans-serif; }

/* 共通ボタン */
.c-btn {
    display: inline-block; padding: 12px 50px; 
    border: 1px solid #3182ce; 
    color: #3182ce; font-weight: normal; 
    border-radius: 40px; text-decoration: none; transition: all 0.3s; background: #fff;
    letter-spacing: 0.1em; font-size: 15px;
}
.c-btn:hover { background: #3182ce; color: #fff; }
.center-align { text-align: center; }

/* ページトップに戻るボタンが隠れないようにする */
.pageTop { z-index: 999999 !important; }

/* =========================================
   動画エリア
========================================= */
#mainVisual { 
    height: calc(100vh - 100px); 
    position: relative; 
    overflow: hidden; 
    width: 100%; 
    margin: 0; 
    padding: 0;
    line-height: 0;
    font-size: 0;
}
#mainVisual .video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover; }
#mainVisual .pc-video { display: block; }
#mainVisual .sp-video { display: none; }
@media (max-width: 767px) { 
    #mainVisual { height: auto; aspect-ratio: 16 / 9; }
    #mainVisual .video { position: relative; top: auto; left: auto; transform: none; width: 100%; height: 100%; object-fit: cover; background-color: #000; }
    #mainVisual .pc-video { display: none; } 
    #mainVisual .sp-video { display: block; } 
}
#simpleAudioBtn { position: absolute; bottom: 20px; right: 20px; z-index: 10; background: rgba(0,0,0,0.5); border: none; border-radius: 50%; padding: 10px; cursor: pointer; color: white; transition: transform 0.2s; }
#simpleAudioBtn:hover { transform: scale(1.1); }

/* =========================================
   流れるバナー
========================================= */
.fv-slide-wrap { width: 100%; background: #fff; padding: 5px 0 !important; margin: 0 !important; border-bottom: 1px solid #eee; line-height: 0 !important; font-size: 0 !important;}
.slideBanner { margin: 0 !important; padding: 0 !important; }
.slideBanner .slick-list, .slideBanner .slick-track, .slideBanner .slick-slide { margin: 0 !important; padding: 0 !important; line-height: 0 !important;}
.slideBanner li a { display: block !important; margin: 0 !important; padding: 0 !important; line-height: 0 !important;}
.slideBanner li img { 
    margin: 0 auto; 
    width: 85%; 
    height: 70px; object-fit: contain; transition: opacity 0.3s; 
}
.slideBanner:hover .slick-track { cursor: pointer; }
.slideBanner li img:hover { opacity: 0.8; }
@media (max-width: 767px) { 
    .fv-slide-wrap { padding: 5px 0 !important; } 
    .slideBanner li img { width: 90%; height: 50px; } 
}
/* =========================================
   ① NEWSエリア
========================================= */
#top-news { background: #fff; padding: 40px 20px 50px; margin: 60px 0 0 0; }
.news-inner { max-width: 1000px; margin: 0 auto; display: flex; gap: 40px; }
.news-heading { width: 150px; flex-shrink: 0; text-align: left; }
.news-heading .sub-en { display: block; font-size: 14px; color: #333; margin-bottom: 5px; font-weight: 300; }
.news-heading h2 { font-size: 32px; font-weight: 300; color: #232584; font-family: "Times New Roman", serif; }

.news-content { flex-grow: 1; }
.news-list li { border-bottom: 1px solid #e0e0e0; }
.news-list li a { display: flex; align-items: center; padding: 12px 0; transition: background 0.3s; position: relative; text-decoration: none; }
.news-list li a:hover { background: #f4faff; }
.news-list li a:hover .link-icon { color: #00aced; }

/* PC版：画像を以前の1/4サイズ（約65px）に縮小 */
.news-list .thumb { 
    width: 65px !important;  /* 130pxから半分（面積で1/4）に縮小 */
    height: 65px !important; 
    flex-shrink: 0; 
    margin-right: 20px; 
    border-radius: 6px; 
    overflow: hidden; 
}
.news-list .thumb img { 
    width: 100% !important; 
    height: 100% !important; 
    object-fit: cover; 
    object-position: center top; 
    display: block;
}

/* テキストエリア：ここを横に長く伸ばす */
.news-list .text-box { 
    flex-grow: 1; 
    display: flex; 
    align-items: center; 
    justify-content: flex-start;
}
.news-list .meta { 
    display: flex; 
    align-items: center; 
    gap: 15px; 
    margin-right: 30px; 
    white-space: nowrap; 
    flex-shrink: 0; 
}
.news-list .date { font-size: 14px; color: #333; font-weight: 500; }
.news-list .cat { font-size: 11px; color: #fff; padding: 3px 10px; text-align: center; font-weight: bold; border-radius: 2px; }


/* =========================================
   カテゴリ色（新設8カテゴリー対応）
========================================= */
.cat.bg-policy      { background: #005bab; } /* 方針発表会（アースブルー紺） */
.cat.bg-morningmtg  { background: #232584; } /* 全体朝礼（紺） */
.cat.bg-recruitnews { background: #26a2cb; } /* 採用・求人（青緑） */
.cat.bg-store       { background: #ef4444; } /* 新店・店舗情報（赤） */
.cat.bg-training    { background: #8476b5; } /* 研修（紫） */
.cat.bg-csr         { background: #007937; } /* CSR（緑） */
.cat.bg-media       { background: #f59e0b; } /* メディア関連（オレンジ） */
.cat.bg-other       { background: #6b7280; } /* その他（グレー） */  

/* タイトルを横いっぱいに広げる */
.news-list .title { font-size: 14px; color: #333; line-height: 1.5; margin: 0; flex-grow: 1; text-align: left; }

.news-list .link-icon { width: 16px; height: 16px; color: #3182ce; flex-shrink: 0; margin-left: 10px; }
.news-list .link-icon svg { width: 100%; height: 100%; display: block; }

.news-more { text-align: right; margin-top: 20px; }
.news-more a { font-size: 14px; color: #333; text-decoration: none; }

/* =========================================
   スマホ（横並びを維持しつつ調整）
========================================= */
@media (max-width: 767px) {
    #top-news { padding: 40px 10px; }
    .news-inner { flex-direction: column; gap: 20px; }
    
    .news-list li a { gap: 10px; padding: 10px 0; }

    /* スマホは以前の通り80px程度で見やすく */
    .news-list .thumb {
        width: 80px !important; 
        height: 80px !important;
    }

    .news-list .text-box { display: block; }
    .news-list .meta { margin-bottom: 5px; gap: 8px; }
    .news-list .date { font-size: 12px; }
    .news-list .title { font-size: 13px; padding-right: 20px; }

    .news-list .link-icon {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 16px !important;
        height: 16px !important;
    }
}
/* =========================================
   NEWSエリア（スマホ：見出しを中央揃え）
========================================= */
@media (max-width: 767px) {
    /* 1. 全体の外枠：縦並びにして中央へ */
    .news-inner {
        flex-direction: column; /* 縦に積む */
        align-items: center;    /* 子要素を左右中央に */
        gap: 30px;              /* 見出しとリストの間隔 */
    }

    /* 2. 見出し部分：幅をいっぱいにして文字をセンターへ */
    .news-heading {
        width: 100% !important;
        text-align: center !important; /* 文字を中央揃え */
        flex-shrink: 0;
    }

    .news-heading .sub-en {
        font-size: 16px; /* 少し見やすく調整 */
        margin-bottom: 2px;
    }

    .news-heading h2 {
        font-size: 48px; /* スマホでインパクトを出すためのサイズ */
        line-height: 1;
    }

    /* 3. ニュースリスト：幅を画面いっぱいに広げる */
    .news-content {
        width: 100%;
    }

    /* リスト内の横並びは以前の「スマホOK」の状態を維持 */
    .news-list li a {
        display: flex;
        align-items: center;
        gap: 12px;
    }
}
/* =========================================
   NEWSエリア 文字サイズ最終調整
========================================= */

/* --- PC版の設定 --- */
.news-list .date { 
    font-size: 14px;
    color: #333; 
    font-weight: 500; 
}

.news-list .cat { 
    font-size: 13px; /* 拡大を維持 */
    padding: 5px 18px;
    letter-spacing: 0.05em;
}

.news-list .title { 
    font-size: 17px; /* 拡大を維持 */
    color: #333; 
    font-weight: 500; 
    line-height: 1.6; 
}

/* --- スマホ版（767px以下）の設定 --- */
@media (max-width: 767px) {
    .news-list .date { 
        font-size: 14px; /* スマホも以前のバランスに合わせ、必要なら12pxに戻せます */
    }

    .news-list .cat { 
        font-size: 11px; 
        padding: 3px 10px;
    }

    .news-list .title { 
        font-size: 15px; 
        line-height: 1.5;
    }
}


/* =========================================
   ② エベレスト背景 
========================================= */
#top-hero-message { 
    /* ★NEWSエリアとの隙間（境界線）をなくして完全に密着させます */
    margin-top: 0; 
    
    /* ★【ここが魔法です】一番上を「白（#ffffff）」にしてNEWSの背景と溶け込ませ、
       そこからフワッと超薄い水色へグラデーションさせて境界線をぼかします */
    background: linear-gradient(to bottom, #ffffff 0%, #f0f8ff 15%, #dff0ff 30%, #8dd0ff 60%, #00aced 100%); 
    
    position: relative; 
    
    /* ★隙間（margin）をなくした分、空の高さ（padding-top）を少しだけ増やして息継ぎの空間を確保 */
    padding: 20vw 20px 28vw; 
    overflow: hidden; 
}

.everest-img { position: absolute; bottom: 0; left: 0; width: 100%; height: auto; z-index: 1; }
.message-inner { position: relative; z-index: 2; text-align: center; margin-bottom: 50px; }

/* 白い光彩を広く・濃くして視認性を最大化 */
.catchcopy { 
    font-size: 46px; font-weight: 900; line-height:1.4; letter-spacing: 0.1em; margin-bottom: 30px; 
    color: #1a237e; 
    text-shadow: 
        1px  1px 0 #fff, -1px -1px 0 #fff, -1px  1px 0 #fff,  1px -1px 0 #fff,
        0px  1px 0 #fff,  0px -1px 0 #fff, -1px  0px 0 #fff,  1px 0px 0 #fff,
        2px  2px 0 #fff, -2px -2px 0 #fff, -2px  2px 0 #fff,  2px -2px 0 #fff,
        0px  2px 0 #fff,  0px -2px 0 #fff, -2px  0px 0 #fff,  2px 0px 0 #fff,
        3px  3px 0 #fff, -3px -3px 0 #fff, -3px  3px 0 #fff,  3px -3px 0 #fff,
        0px  3px 0 #fff,  0px -3px 0 #fff, -3px  0px 0 #fff,  3px 0px 0 #fff,
        0 0 5px   #fff, 0 0 10px  #fff, 0 0 20px  #fff, 0 0 40px  #fff,
        0 0 60px  #fff, 0 0 80px  #fff, 0 0 100px #fff, 0 0 120px #fff,
        0 0 140px #fff, 0 0 0px  #fff,
        2px  4px  8px rgba(0, 0, 0, 0.4), 4px  8px 16px rgba(0, 0, 0, 0.3),
        6px 12px 24px rgba(0, 0, 0, 0.2);
}

.sub-catchcopy { 
    font-size: 24px; line-height: 1.8; letter-spacing: 0.05em; font-weight: 900; margin: 0; 
    color: #1a237e; 
    text-shadow: 
        1px  1px 0 #fff, -1px -1px 0 #fff, -1px  1px 0 #fff,  1px -1px 0 #fff,
        0px  1px 0 #fff,  0px -1px 0 #fff, -1px  0px 0 #fff,  1px 0px 0 #fff,
        2px  2px 0 #fff, -2px -2px 0 #fff, -2px  2px 0 #fff,  2px -2px 0 #fff,
        0px  2px 0 #fff,  0px -2px 0 #fff, -2px  0px 0 #fff,  2px 0px 0 #fff,
        0 0 5px   #fff, 0 0 10px  #fff, 0 0 20px  #fff, 0 0 30px  #fff,
        0 0 50px  #fff, 0 0 70px  #fff, 0 0 90px  #fff, 0 0 110px  #fff,
        0 0 0px  #fff,
        2px  3px  6px rgba(0, 0, 0, 0.4), 3px  6px 12px rgba(0, 0, 0, 0.3);
}

@media (max-width: 767px) {
    #top-hero-message { 
        /* ★スマホも同様に隙間をなくして溶け込ませる */
        margin-top: 0; 
        padding: 120px 20px 180px; 
    }
    .catchcopy { font-size: 23px; line-height: 1.6; margin-bottom: 20px; } 
    .sub-catchcopy { font-size: 16px; }
}

/* =========================================
   ③ 企業使命・百折不撓
========================================= */
#top-philosophy { position: relative; z-index: 10; margin-top: -50px; padding: 0 20px; }
.philosophy-container { max-width: 1000px; margin: 0 auto; display: flex; gap: 30px; }

/* 枠全体のアニメーション */
/* ▼ 枠全体のアニメーション（カクつきを抑えてスムーズに） ▼ */
.phi-box { 
    background: rgba(255, 255, 255, 0.95); 
    border: 1px solid #3182ce; 
    width: 50%; 
    padding: 40px 45px; 
    text-align: center; 
    position: relative;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05); 
    
    /* 初期状態 */
    opacity: 0;
    /* 移動量を少し減らす(40px→20px)ことで、視覚的なカクつきを抑えます */
    transform: translateY(20px); 

    /* transitionのタイミングを「cubic-bezier」に変更して、より高級感のある滑らかな動きにします */
    transition: 
        opacity 1.8s ease-out, 
        transform 1.8s cubic-bezier(0.22, 1, 0.36, 1), 
        box-shadow 1.8s ease-out;
}

/* 2つ目の枠は少しだけ遅らせる */
.phi-box:nth-child(2) {
    transition-delay: 0.3s;
}

/* 画面に入った時（is-animatedクラスがついた時） */
.phi-box.is-animated {
    opacity: 1;
    transform: translateY(0);
    /* 影もじわっと浮かび上がるようにします */
    box-shadow: 0 15px 35px rgba(0,0,0,0.12); 
}

/* ▼ 修正：タイトルの高さを固定して線を揃える ▼ */
.phi-box h3 { 
    display: flex; /* flexに変更 */
    flex-direction: row;
    justify-content: center;
    align-items: flex-end; /* 下揃えにすることで罫線の位置を統一 */
    height: 90px; /* ルビを含めた高さを確保 */
    
    white-space: nowrap; 
    font-size: 50px; 
    font-weight: 600; 
    color: #232584; 
    letter-spacing: 0.3em; 
    margin: 0 auto 50px; /* 下マージンでh4との間隔を確保 */
    font-family: "Noto Serif JP", serif; 
    

/* 文字の2px下に、より薄く設定したグラデーションの鏡面反射を作っています */
/* 透過度を 0.4(40%) → 0.2(20%) に下げ、透明開始位置を 20% → 40% に広げて薄くしました */
-webkit-box-reflect: below 2px linear-gradient(transparent 40%, rgba(255,255,255,0.2)); 
/* 表示領域の切り抜き（変更なし） */
clip-path: inset(-50px 100% -100px -50px);
/* アニメーションの最適化（変更なし） */
will-change: clip-path;
}

/* ルビの微調整 */
.phi-box h3 ruby {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
}

.phi-box h3 rt {
    font-size: 15px; 
    font-weight: bold;
    letter-spacing: 0; 
    color: #232584; 
    text-shadow: none;
    line-height: 1;
    margin-bottom: 10px; /* 漢字との距離 */
}

/* アニメーション発火 */
.phi-box:nth-child(1).is-animated h3 { animation: typingWithShadow 2.0s ease-in-out 0.5s forwards; }
.phi-box:nth-child(2).is-animated h3 { animation: typingWithShadow 2.0s ease-in-out 1.5s forwards; }

@keyframes typingWithShadow {
    0%   { clip-path: inset(-50px 100% -100px -50px); }
    100% { clip-path: inset(-50px -50px -100px -50px); }
}

/* その他のスタイル */
.phi-sub-title { font-size: 26px; font-weight: normal; color: #28A8E8; margin-bottom: 20px; letter-spacing: normal; font-family: "Noto Serif JP", serif;}
.phi-line { width: 100%; height: 1px; background: #3182ce; margin: 0 auto 20px; }

.phi-box p.phi-lead { font-size: 14px; font-weight: bold; color: #232584; line-height: 1.6; margin-bottom: 15px; font-family: "Noto Serif JP", serif;}
.phi-box p { font-size: 16px; line-height: 2; text-align: center; color: #000; font-family: "Noto Serif JP", serif; font-weight: 500; letter-spacing: normal;}

/* スマホ用調整 */
@media (max-width: 767px) {
    #top-philosophy { margin-top: -30px; } 
    .philosophy-container { flex-direction: column; gap: 20px; }
    .phi-box { width: 100%; padding: 25px 15px; }
    .phi-box h3 { font-size: 32px; height: 70px; margin-bottom: 30px; }
    .phi-box h3 rt { font-size: 12px; margin-bottom: 5px; }
    .phi-sub-title { font-size: 18px; font-weight: bold; } 
}


/* =========================================
   社長メッセージバナー全体
========================================= */
.message-banner {
    position: relative;
    max-width: 1000px; 
    width: 100%; 
    margin: 100px auto;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    min-height: 200px; /* PCでの安定感のため少しだけ高さ確保 */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    background-color: #095CA8; /* ★元コードの背景色に復元 */
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    z-index: 1;
}

.message-banner:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
}

/* 背景写真レイヤー */
.message-banner__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.message-banner__bg img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: 95% center; /* ★元の右寄せ設定 */
    opacity: 1; 
}

/* ★PC用グラデーション：いただいた元コードをそのまま使用！ */
.message-banner__gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background: linear-gradient(90deg, rgba(35, 37, 132, 0.95) 0%, rgba(40, 168, 232, 0.6) 50%, rgba(40, 168, 232, 0.2) 100%);
}

/* テキストエリア */
.message-banner__text {
    position: relative;
    z-index: 3;
    padding: 30px 50px;
    width: 70%; /* 写真と重なりすぎないよう幅を制限 */
    color: #FFF;
}

.message-banner__subtitle {
    display: inline-block;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0.1em;
    margin: 0 0 10px 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    border-bottom: 2px solid #FFF;
    padding-bottom: 5px;
}

.message-banner__title {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.05em;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
    white-space: nowrap;
}

/* =========================================
   スマホ用（767px以下）：写真被り防止のレイアウト
========================================= */
@media (max-width: 767px) {
    .message-banner {
        width: calc(100% - 30px);
        margin: 60px auto;
        min-height: 180px;
    }
    
    .message-banner__bg img {
        /* スマホは写真をさらに右へ追いやり、顔に被らせない */
        object-position: 135% center !important; 
    }

    /* ★スマホ専用：元の色設定を維持しつつ、文字が読めるように少しだけ中央を濃く */
    .message-banner__gradient {
        background: linear-gradient(90deg, 
            rgba(35, 37, 132, 0.95) 0%, 
            rgba(40, 168, 232, 0.8) 60%,  /* 0.6 -> 0.8 にして文字の読みやすさを確保 */
            rgba(40, 168, 232, 0.2) 100% 
        ) !important;
    }

    .message-banner__text {
        width: 100%;
        padding: 20px;
    }

    .message-banner__subtitle {
        font-size: 16px;
        margin-bottom: 8px;
    }

    .message-banner__title {
        font-size: 18px;
        white-space: normal; /* スマホでの改行を許可して潰れ防止 */
        line-height: 1.5;
    }
}

/* =========================================
   ④ 事業部一覧（リニューアル版）
========================================= */
#top-business { padding: 80px 20px; background: #fff; margin: 0;}
.business-inner { max-width: 1000px; margin: 0 auto; }
.biz-grid { display: flex; flex-wrap: wrap; gap: 40px 30px; }
.biz-column { width: calc(33.333% - 20px); }

/* カード全体の枠を水色に変更 */
.biz-card { 
    display: block; 
    border: 1px solid #28A8E8; /* ヘッダーと同じ水色 */
    text-align: center; 
    transition: all 0.4s ease; 
    background: #fff; 
    text-decoration: none; 
    color: inherit;
    overflow: hidden; /* 画像の拡大が枠からはみ出さないように */
}

/* ホバー時の挙動 */
.biz-card:hover { transform: translateY(-8px); box-shadow: 0 10px 20px rgba(40, 168, 232, 0.2); }
.biz-card:hover .img-wrap img { transform: scale(1.1); } /* 写真を少し拡大 */
.biz-card:hover .img-overlay { background: rgba(35, 37, 132, 0.2); } /* ホバーで色を少し濃く */

/* 写真の加工（フィルター） */
.biz-card .img-wrap { 
    width: 100%; 
    aspect-ratio: 16/9; 
    overflow: hidden; 
    position: relative;
    border-bottom: 1px solid #28A8E8;
}

.biz-card .img-wrap img { 
    width: 100%; height: 100%; object-fit: cover; 
    transition: transform 0.6s ease;
    filter: sepia(20%) contrast(110%) brightness(90%); /* セピアとコントラストで情緒的なイメージに加工 */
}

/* 画像に重ねるフィルター層 */
.img-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    /* 紺色のグラデーションを薄く重ねてイメージを統一 */
    background: linear-gradient(45deg, rgba(40, 168, 232, 0.3), rgba(35, 37, 132, 0.1));
    transition: background 0.4s ease;
}

/* テキストエリアの背景を水色に、文字を白に */
.biz-card .text-wrap { 
    padding: 15px 5px; 
    background-color: #28A8E8; /* ヘッダーと同じ水色 */
    transition: background-color 0.3s; 
}

.biz-card .title { 
    font-size: 28px; 
    color: #fff; /* 文字色を白に変更 */
    font-weight: bold; 
    letter-spacing: 0.2em; 
    font-family: "Noto Serif JP", serif; 
    padding: 0; margin: 0;
}

/* サービス名リンクの調整（必要に応じて） */
.biz-sub-links { text-align: left; margin-top: 15px; padding-left: 5px; }


.biz-sub-links { text-align: left; margin-top: 15px; padding-left: 5px; }
.biz-sub-links li { margin-bottom: 10px; }
.biz-sub-links a { display: inline-flex; align-items: center; font-size: 14px; color: #3182ce; font-weight: bold; transition: all 0.3s; }
.biz-sub-links a:hover { color: #00aced; transform: translateX(5px); text-decoration: underline; }
.biz-sub-links img { width: 24px; height: auto; margin-right: 10px; object-fit: contain; }

@media (max-width: 767px) {
    .biz-column { width: calc(50% - 15px); }
    .biz-card .title { font-size: 22px; }
    .biz-sub-links a { font-size: 12px; }
}


/* =========================================
   ⑤ マップ ＆ リンク表示
========================================= */
#top-map-links { padding: 40px 20px 80px; text-align: center; background: #fff; margin: 0;}
.map-inner { max-width: 450px; margin: 0 auto; } 
.map-img { margin-bottom: 40px; }
.dotted-links li { border-bottom: 1px dashed #232584; }
.dotted-links li:first-child { border-top: 1px dashed #232584; }
.dotted-links a { display: flex; justify-content: center; align-items: center; gap: 20px; padding: 15px 0; font-size: 20px; color: #333; transition: all 0.3s; }
.dotted-links a:hover { color: #3182ce; background-color: #f4faff; }
.dotted-links a:hover .link-icon { color: #00aced; } 
.dotted-links .link-icon { width: 20px; height: 20px; color: #3182ce; transition: color 0.3s;}
.dotted-links .link-icon svg { width: 100%; height: 100%; }

@media (max-width: 767px) {
    .dotted-links a { font-size: 16px; padding: 12px 0; gap: 10px;}
    .dotted-links .link-icon { width: 16px; height: 16px; }
}

/* =========================================
   ⑥ コラム2つ
========================================= */
#top-column2 { padding: 40px 20px; max-width: 1000px; margin: 0 auto; background: #fff;}
.col-inner { display: flex; gap: 40px; }
.col-box { width: 50%; }
.col-title { font-size: 24px; font-weight: bold; color: #3182ce; text-align: center; padding-bottom: 15px; border-bottom: 1px solid #3182ce; margin-bottom: 25px; letter-spacing: 0.1em; }
.col-list li { font-size: 15px; color: #333; margin-bottom: 15px; line-height: 1.6; }
.col-media { display: flex; gap: 20px; margin-bottom: 15px; }
.col-img { width: 140px; height: auto; object-fit: cover; flex-shrink: 0; }
@media (max-width: 767px) { .col-inner { flex-direction: column; } .col-box { width: 100%; } }

/* =========================================
   ⑦ 背景のあるコラム3つ
========================================= */
#top-column3 { padding: 40px 20px 80px; max-width: 1000px; margin: 0 auto; background: #fff; overflow-x: hidden; } 
#top-column3 .col-inner { display: flex; gap: 20px; }
.bg-col-box { background: #3eb0e9; padding: 30px 20px; width: 33.333%; color: #fff; text-align: center; }
.bg-col-title { font-size: 22px; font-weight: normal; padding-bottom: 15px; border-bottom: 1px solid #fff; margin-bottom: 20px; letter-spacing: 0.1em; font-family: "Noto Serif JP", serif; }
.bg-col-list li { font-size: 14px; margin-bottom: 12px; line-height: 1.5; text-align: left; }
@media (max-width: 767px) { #top-column3 .col-inner { flex-direction: column; } .bg-col-box { width: 100%; } }

/* =========================================
   企業ロゴ
========================================= */
#top-corporate-logos { padding: 60px 20px 40px; background: #fff; margin: 0;}
.logos-inner { max-width: 800px; margin: 0 auto; text-align: center; }

.logo-top { margin-bottom: 60px; display: flex; justify-content: center; }
.logo-top img { width: 300px; height: auto; } 

.logo-bottom { 
    max-width: 600px; margin: 0 auto; 
    display: flex; justify-content: space-between; align-items: center; 
}
.logo-bottom a { display: block; width: 18%; transition: all 0.3s; }
.logo-bottom a img { width: 100%; height: auto; object-fit: contain; }

.logo-top a:hover, .logo-bottom a:hover { opacity: 0.7; transform: translateY(-5px); }

@media (max-width: 767px) {
    .logo-top { margin-bottom: 40px; }
    .logo-top img { width: 220px; }
    .logo-bottom a { width: 20%; }
}

/* =========================================
   ダイナミックマップ（2カラム・横並び構成）
========================================= */
#top-dynamic-map {
    max-width: 1200px; 
    margin: 0 auto 80px;
    padding: 0 20px;
}

.map-grid {
    display: flex;
    flex-wrap: wrap; 
    justify-content: space-between; 
    align-items: stretch; 
    gap: 30px; 
}

.map-container {
    position: relative;
    width: calc(50% - 15px); 
    background-color: #fcfcfc;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    padding: 20px;
    box-sizing: border-box;
}

.map-title {
    position: absolute;
    top: 20px;
    left: 20px;
    font-size: 24px;
    font-weight: 900;
    color: #1a1c6a;
    z-index: 10;
    letter-spacing: 0.1em;
    line-height: 1.3;
}

/* 地図エリアをはみ出さないように overflow: hidden を追加 */
.map-wrapper {
    position: relative;
    width: 100%;
    margin-top: 40px; 
    overflow: hidden; /* 波紋が外に出ないようにカット */
    border-radius: 4px; /* 地図の角に合わせる */
}

.base-map-img {
    width: 100%;
    height: auto;
    display: block;
}

/* --- SVG 曲線の設定 --- */
.map-lines {
    position: absolute;
    top: 0;  
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

/* 共通の線スタイル */
.line-path {
    fill: none;
    stroke-linecap: round;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: drawLine 3.5s infinite ease-out;
}

/* ▼ メインの拠点間接続（太さ9、3倍の状態を維持） */
.main-lines .line-path {
    stroke: #00aced; 
    stroke-width: 9; 
}

@keyframes drawLine {
    0% { stroke-dashoffset: 1000; opacity: 1; }
    70% { stroke-dashoffset: 0; opacity: 1; }
    100% { stroke-dashoffset: 0; opacity: 0; } 
}

/* --- 拠点の光（波紋）共通 --- */
.map-point {
    position: absolute;
    z-index: 3;
    transform: translate(-50%, -50%); 
}

.ripple {
    border-radius: 50%;
    position: relative;
    width: 24px; height: 24px;
    /* 濃い丸（中心点）を透明にして見えなくする */
    background-color: transparent; 
}

/* 全体共通の波紋の基礎設定 (JAPAN & GLOBAL) */
.ripple::after,
.ripple::before {
    content: ""; 
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border-radius: 50%;
    /* 巨大波紋の色を #28A8E8 (透明度45%) に設定 */
    background-color: rgba(40, 168, 232, 0.45); 
}

/* ▼▼ JAPANの巨大同心円波紋（::beforeと::afterの両方を使用、scale(30)、OKの状態） ▼▼ */
/* 1つ目の円 (::after) - 日本専用のアニメーション */
.japan-map .ripple::after {
    animation: rippleEffectConcentric1 3.5s infinite ease-out; 
}

/* 2つ目の同心円 (::before) - 時間をずらして開始 */
.japan-map .ripple::before {
    animation: rippleEffectConcentric2 3.5s infinite ease-out 1.75s; 
}

/* 日本の巨大な同心円アニメーション。scale(30)に拡大 */
@keyframes rippleEffectConcentric1 {
    0% { transform: scale(1); opacity: 0.8; }
    95% { transform: scale(30); opacity: 0.1; } 
    100% { transform: scale(30); opacity: 0; }
}

@keyframes rippleEffectConcentric2 {
    0% { transform: scale(1); opacity: 0.8; }
    95% { transform: scale(30); opacity: 0.1; }
    100% { transform: scale(30); opacity: 0; }
}

/* ▼▼ GLOBAL（海外）の巨大波紋（::afterのみ使用、scale(30)、中心点なし） ▼▼ */
/* 海外マップ用の巨大波紋設定 */
.map-point.global-huge {
    /* 巨大な波紋のアニメーションを表示するために、少し大きめに設定 */
    width: 32px; height: 32px;
}

/* GLOBALの巨大波紋アニメーション（scale 30） */
@keyframes rippleEffectHuge {
    0% { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(30); opacity: 0; }
}

/* アニメーション時間を少し長く */
.map-point.global-huge .ripple::after {
    animation: rippleEffectHuge 3.0s infinite ease-out; 
}
/* GLOBALは::before（同心円）を使わないので、アニメーションを適用しない */
.map-point.global-huge .ripple::before {
    animation: none; 
}

/* =========================================
   拠点一覧ボタン
========================================= */
.network-btn-wrapper {
    text-align: center;
    /* ★近すぎた余白を適度な距離(30px)に修正しました */
    margin-top: 30px; 
}

.network-btn {
    display: inline-block;
    padding: 18px 80px;
    background-color: #005bab; /* ブランドブルー */
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.15em; 
    text-indent: 0.15em; 
    text-decoration: none;
    border-radius: 40px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 91, 171, 0.3);
    position: relative;
    overflow: hidden;
}

/* ホバー時のアクション */
.network-btn:hover {
    background-color: #004585; 
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 91, 171, 0.4);
    color: #ffffff;
}

/* ボタン内に薄く光が走るエフェクト */
.network-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: all 0.5s ease;
}

.network-btn:hover::before {
    left: 100%;
}

/* スマホ用調整 */
@media (max-width: 767px) {
    .map-grid {
        flex-direction: column;
    }
    .map-container {
        width: 100%; 
    }
    .ripple { width: 18px; height: 18px; }
    
    .network-btn-wrapper {
        /* スマホ版も適度な距離に修正 */
        margin-top: 20px; 
    }
    .network-btn {
        padding: 15px 60px;
        width: 80%; 
        box-sizing: border-box;
    }
}
/* =========================================
   拠点ネットワーク キャッチコピー
========================================= */
.network-catch-wrapper {
    text-align: center;
    margin-bottom: 60px; /* マップとの間のゆったりとした余白 */
    position: relative;
}

.network-catch {
    font-size: 36px; /* 印象に残る大きめサイズ */
    font-weight: 700;
    color: #232584; /* アースのネイビー */
    letter-spacing: 0.15em; /* 文字間隔を開けて堂々と */
    font-family: "Noto Serif JP", serif; /* 品格のある明朝体 */
    margin: 0;
    text-shadow: 0 4px 10px rgba(35, 37, 132, 0.1); /* ほんのりと上品な影 */
}

/* スマホ用（767px以下）の調整 */
@media (max-width: 767px) {
    .network-catch-wrapper {
        margin-bottom: 40px;
    }
    .network-catch {
        font-size: 24px;
        letter-spacing: 0.1em;
    }
}