@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://example.com/MaterialIcons-Regular.eot);
  /* For IE6-8 */
  src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
    url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
    url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
}


.slider-container {
    position: relative;
    /* ドットの位置決めのために必要 */
    width: 100%;
    /* 親要素に合わせて幅を調整 */
    max-width: 1200px;
    /* スライドショーの最大幅（適宜調整） */
    margin: 20px auto;
    /* 中央寄せと上下の余白 */
    overflow: hidden;
    /* ラッパーから画像がはみ出さないように隠す */
    border-radius: 8px;
    /* 角を丸める（任意） */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* 影をつける（任意） */
}

.slider-wrapper {
    display: flex;
    transition: transform 0.5s ease-in-out;
    /* スライドのアニメーション */
}

.slide-item {
    min-width: 100%;
    /* 各スライドはコンテナの幅いっぱいに表示 */
    display: block;
    /* img要素の余白をなくす */
    width: 100%;
    /* レスポンシブ対応 */
    height: auto;
    /* アスペクト比を維持 */
    object-fit: cover;
    /* 画像がコンテナに収まるように調整（トリミングされる可能性あり） */
}

/* 非アクティブなスライドは非表示にする */
.slide-item:not(.active) {
    display: none;
    /* JSでアクティブクラスを切り替えるため、最初はactive以外を非表示 */
}

/* JSで active クラスを切り替えることで表示を制御する */
.slide-item.active {
    display: block;
}

/* ドットナビゲーションのスタイル */
.slider-dots {
    position: absolute;
    bottom: 15px;
    /* 下からの位置 */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    /* ドット間のスペース */
}

.dot {
    width: 12px;
    height: 12px;
    background-color: rgba(255, 255, 255, 0.7);
    /* 非アクティブなドットの色 */
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.dot.active {
    background-color: #007bff;
    /* アクティブなドットの色（自衛隊らしい色に調整しても良いでしょう） */
    border: 2px solid #fff;
    /* アクティブなドットの枠線 */
}

/* バナーナビゲーションのスタイル */

.banner {
    background-color: #f0f0f0;
    padding: 20px;
    border-bottom: 1px solid #ccc;

    /* ここを変更！Flexboxの親要素 */
    display: flex;
    /* Flexboxコンテナに設定 */
    flex-direction: column;
    /* 縦方向にアイテムを並べる */
    align-items: center;
    /* 縦方向の中央寄せ */
    position: relative;
    /* 検索窓を絶対配置する場合の基準 */
}

.banner-content {
    text-align: center;
    width: 100%;
    /* コンテンツの幅を確保 */
}

.search-sns-container {
    display: flex; /* 子要素を横並びにする */
    align-items: center; /* 子要素を垂直方向の中央に配置 */
    justify-content: space-between; /* 検索窓とSNSアイコンを両端に配置 */
    padding: 10px; /* 余白 */
    max-width: 400px; /* コンテナの最大幅 */
    margin: 0 auto; /* 中央寄せ */
    flex-wrap: wrap; /* 画面が狭くなったら折り返す */
  }
  
  .search-box {
    display: flex;
    flex-grow: 1; /* 利用可能なスペースを埋めるように拡張 */
    margin-right: 40px; /* SNSアイコンとの間にスペースを設ける */
  }
  
  .search-box input[type="search"] {
    flex-grow: 1; /* 入力フィールドを可能な限り広げる */
    padding: auto;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
  
  .search-box button {
    padding: auto;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-left: 5px; /* 入力フィールドとの間にスペース */
      }
  
    .sns-icons img{
    display: block;
    width: 50px;
    height: 50px;
    gap: 50px; /* アイコン間のスペース */
  }

  .sns-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    border-radius: 50%; /* 円形にする */
  }
  
  /* スマートフォン向けの調整 */
  @media (max-width: 768px) {
    .search-sns-container {
      flex-direction: column; /* 垂直方向に並べる */
      align-items: stretch; /* 幅いっぱいに広げる */
    }
  
    .search-box {
      width: 100%; /* 検索窓を幅いっぱいに */
      justify-content: center;
      margin-right: 0;
      margin-bottom: 10px; /* 検索窓とSNSアイコンの間にスペース */
    }
  
    .sns-icons {
      display: flex; 
      width: 100%; /* SNSアイコンを幅いっぱいに */
      justify-content: center; /* アイコンを中央寄せ */
    }
  }
  

/* ... （inputなどのスタイルは前と同じ） ... */

/* --- パターンA: 控えめなハイライト風ライン --- */
.heading-background-line-a {
    color: #222; /* 文字色 */
    position: relative; /* 疑似要素の基準位置とする */
    display: inline-block; /* 背景が文字幅に合わせるため */
    padding: 0 5px; /* 上下の背景ラインとの間に少し余白 */
    overflow: hidden; /* 疑似要素がはみ出さないように */
}

.heading-background-line-a::before {
    content: '';
    position: absolute;
    bottom: 10%; /* 文字の下からの位置 */
    left: 0;
    width: 100%;
    height: 12px; /* ラインの太さ */
    background-color: rgba(173, 216, 230, 0.5); /* 薄い水色（透過） */
    z-index: -1; /* 文字の背面に配置 */
    border-radius: 3px; /* 少し角丸にする */
}

/* --- パターンB: グラデーションのハイライト風ライン --- */
.heading-background-line-b {
    color: #333;
    position: relative;
    display: inline-block;
    padding: 0 8px; /* 左右の余白 */
    font-weight: 800; /* より太く */
}

.heading-background-line-b::before {
    content: '';
    position: absolute;
    bottom: 5%; /* 文字の下からの位置 */
    left: 0;
    width: 100%;
    height: 15px; /* ラインの太さ */
    /* 左右に向かって薄くなるグラデーション */
    background: linear-gradient(to right, rgba(0, 123, 255, 0), rgba(0, 123, 255, 0.6), rgba(0, 123, 255, 0));
    z-index: -1;
    border-radius: 5px;
    filter: blur(2px); /* 少しぼかして柔らかい印象に */
}

/* --- パターンC: 角丸の背景ブロックライン --- */
.heading-background-line-c {
    color: #fff; /* 背景が濃いので文字は白に */
    background-color: #555; /* ベースの背景色 */
    padding: 15px 30px; /* 内側の余白 */
    border-radius: 10px; /* 角丸 */
    letter-spacing: 0.05em;
    display: inline-block; /* コンテンツの幅に合わせる */
    position: relative;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* 影で立体感を */
}

.heading-background-line-c::before {
    content: '';
    position: absolute;
    top: -10px; /* 上にはみ出す */
    left: 50%;
    transform: translateX(-50%);
    width: 80%; /* 幅を調整 */
    height: 5px; /* 細いライン */
    background-color: #007bff; /* 上部のアクセントライン色 */
    border-radius: 3px;
    z-index: 1; /* 手前に表示 */
}

.heading-background-line-c::after {
    content: '';
    position: absolute;
    bottom: -10px; /* 下にはみ出す */
    left: 50%;
    transform: translateX(-50%);
    width: 80%; /* 幅を調整 */
    height: 5px; /* 細いライン */
    background-color: #007bff; /* 下部のアクセントライン色 */
    border-radius: 3px;
    z-index: 1; /* 手前に表示 */
}


.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  /* Preferred icon size */
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  display: inline-flex;
  vertical-align: middle;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

/* Rules for sizing the icon. */

.material-icons.md-36 {
  font-size: 36px;
}

.table > :not(caption) > * > * {
  vertical-align: middle;
}

/* フローティングメニュー */

.floating-nav {
  position: fixed;
  width: auto; /* アイコンのサイズに合わせて自動調整 */
  right: 20px;
  bottom: 20px;
  top: auto;
  cursor: pointer;
  display: flex; /* 子要素を横並びにする */
  flex-direction: column; /* 子要素を縦に並べる */
  gap: 5px; /* アイコン間の間隔 */
}

.floating-nav a {
  color: white;
  text-decoration: none;
  display: flex; /* アイコンを中央に配置 */
  justify-content: center; /* 水平方向中央揃え */
  align-items: center; /* 垂直方向中央揃え */
}

.floating-nav img {
  display: block;
  width: 20px; /* アイコンのサイズ */
  height: 20px; /* アイコンのサイズ */
}

/* TOTOPアイコン */
.totop {
  position: absolute;
  top: -60px;
  right: 40px;
}

@media (max-width: 991.98px) { /* Bootstrapのlgブレイクポイントより小さい画面 */
  .navbar-collapse {
    background-color: #f8f9fa; /* 薄いグレーの例。お好みの色に変更してください */
    /* その他のスタイル調整（必要であれば） */
    padding: 15px; /* メニュー内の余白 */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); /* 影をつけて浮き上がらせる */
  }
}

.back-to-top-button {
  position: fixed; /* 画面に固定表示 */
  bottom: 20px;    /* 下から20pxの位置 */
  right: 90px;     /* 右から90pxの位置 */
  z-index: 999;    /* 他の要素の上に表示 */
  display: block;  /* リンクとしてブロック要素にする */
  text-decoration: none; /* もしテキストが含まれる場合の下線消去 */
}

/* 画像自体のサイズ調整（HTMLで指定しない場合） */
.back-to-top-button img {
  width: 30px; /* 画像の幅 */
  height: auto; /* 高さは自動調整 */
  opacity: 0.8;
  
}

/* ホバー時の効果（任意） */
.back-to-top-button:hover {
  opacity: 0.8; /* 透明度を少し下げて、ホバーしていることを示す */
  transition: opacity 0.3s ease; /* ホバー効果を滑らかにする */
}

/* フッターナビゲーションの基本的なスタイル */
.footer-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    /* display: flex; /* メインメニューを横並びにする場合は残す */
    /* justify-content: center; /* 中央揃えにする場合は残す */
    flex-wrap: wrap;
}

.footer-nav ul li {
    /* position: relative; /* サブメニューが常に表示される場合は不要になることもありますが、レイアウトによっては残す */
    margin: 0 15px;
    /* 常に表示する場合は、メインメニューとサブメニューを包含する形でレイアウトを考慮する */
    /* 例: メインメニュー項目ごとに縦に並べる場合 */
    display: block; /* 縦並びにする場合はこれを指定 */
    margin-bottom: 20px; /* メインメニュー間の縦方向のスペース */
}

.footer-nav ul li a {
    display: block;
    padding: 10px 0;
    text-decoration: none;
    color: #fff;
    white-space: nowrap;
}

/* サブメニューの初期状態（常に表示） */
.footer-nav .submenu {
    display: block;     /* ★ここを変更：常に表示するためblockに */
    position: static;   /* ★ここを変更：親要素からの絶対配置を解除 */
    left: auto;         /* 不要 */
    top: auto;          /* 不要 */
    background-color: transparent; /* サブメニューの背景色を透明に（フッターに馴染ませるため） */
    min-width: auto;    /* 最小幅を自動に */
    box-shadow: none;   /* 影を削除 */
    z-index: auto;      /* z-indexも不要に */
    padding: 0;         /* パディングを調整 */
    border-radius: 0;   /* 角丸も不要に */
    margin-top: 5px;    /* メインメニューからの上部のマージン */
}

/* サブメニュー内のリスト項目 */
.footer-nav .submenu li {
    margin: 0;
    display: block;
}

/* サブメニュー内のリンク */
.footer-nav .submenu li a {
    padding: 5px 0 5px 15px; /* 左にインデント（調整してください） */
    color: #ccc;            /* サブメニューリンクの色を調整 */
}

/* サブメニュー内のリンクにホバー時のスタイル（任意） */
.footer-nav .submenu li a:hover {
    color: #fff; /* ホバー時の文字色 */
}

/* フッター全体のスタイル（例） */
.site-footer {
    background-color: #003d4d;
    color: #fff;
    padding: 30px 20px;
    text-align: center;
}


/* ==================================== */
/* 各お知らせ項目のスタイル           */
/* ==================================== */

.news-section {
    padding: 20px 0;
    overflow: auto;
    height: 500px;
}

.news-list {
    max-width: 1280px; /* リストの最大幅 */
    margin: 0 auto; /* 中央寄せ */
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    padding: 20px;
}

.news-list-title {
    text-align: center;
    font-size: 2.0em;
    color: #2c3e50;
    margin-bottom: 30px;
    border-bottom: 2px solid #e0e0e0;
    padding-bottom: 15px;
    font-weight: 600;
}

.news-item {
    display: flex; /* 横並びにする */
    align-items: flex-start; /* アイテムの先頭を揃える */
    padding: 15px 0;
    border-bottom: 1px dashed #e0e0e0; /* 破線の下線 */
    gap: 15px; /* アイテム間の隙間 */
}

.news-item:last-child {
    border-bottom: none; /* 最後の子要素には下線をつけない */
}

.news-item p {

    /* 固定の高さ */
   
    max-height: 3.0em; /* 例: 約3行分の高さに設定 (font-sizeによって調整) */
   
    /* スクロールを可能にする */
   
    overflow-y: auto;
   
    /* スクロールバーのスタイル (任意、ブラウザによって見え方が異なる) */
   
    scrollbar-width: thin; /* Firefox用 */
   
    scrollbar-color: #888 #f1f1f1; /* Firefox用 */
   
    /* はみ出たテキストの折り返しを維持 */
   
    word-wrap: break-word;
   
   }
   
   
   
   
   /* Webkit系ブラウザ (Chrome, Safariなど) 用のスクロールバーのスタイル */
   
   .news-item p::-webkit-scrollbar {
   
    width: 8px; /* スクロールバーの幅 */
   
   }
   
   
   
   
   .news-item p::-webkit-scrollbar-track {
   
    background: #f1f1f1; /* トラックの背景色 */
   
    border-radius: 4px;
   
   }
   
   
   
   
   .news-item p::-webkit-scrollbar-thumb {
   
    background: #888; /* スクロールバーの色 */
   
    border-radius: 4px;
   
   }
   
   
   
   
   .news-item p::-webkit-scrollbar-thumb:hover {
   
    background: #555; /* ホバー時の色 */
   
   }
   

.date {
    flex-shrink: 0; /* 縮まないようにする */
    width: 100px; /* 日付の固定幅 */
    color: #7f8c8d;
    font-size: 0.9em;
    font-weight: 500;
}

.category {
    display: inline-flex; /* Flexboxで内側のコンテンツを中央寄せ */
    align-items: center;
    justify-content: center;
    padding: 5px 12px;
    border-radius: 20px; /* 角丸を大きくしてピル型にする */
    color: white;
    font-size: 0.8em;
    font-weight: bold;
    min-width: 60px; /* カテゴリーの最小幅 */
    text-align: center; /* テキストを中央寄せ */
    white-space: nowrap; /* テキストが改行されないようにする */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 軽い影 */
}

/* ==================================== */
/* カテゴリーごとの色分け               */
/* ==================================== */

.category.notice {
    background-color: #007bff; /* 青 */
    color: #ffffff;
}

.category.briefing {
    background-color: #28a745; /* 緑 */
    color: #ffffff;
}

.category.recruitment {
    background-color: #dc3545; /* 赤 */
    color: #ffffff;
}

.category.event {
    background-color: #ffc107; /* 黄色 */
    color: #333; /* 黄色背景の場合、文字色を濃くすると見やすい */
}

.category {
    background-color: #ff07eaa6; /*ピンク色 */
    color: #ffffff;
}

.news-item p {
    margin: 0; /* 段落のデフォルトマージンをリセット */
    flex-grow: 1; /* 残りのスペースを埋める */
    color: #444;
}

/* ==================================== */
/* レスポンシブ対応                     */
/* ==================================== */

@media (max-width: 768px) {
    .news-list {
        padding: 20px;
        width: 95%; /* 小さい画面での幅調整 */
    }

    .news-list-title {
        font-size: 1.8em;
        margin-bottom: 20px;
    }

    .news-item {
        flex-direction: column; /* 縦並びにする */
        align-items: flex-start; /* 左寄せ */
        gap: 5px; /* 縦並びになった時の隙間 */
        padding: 10px 0;
    }

    .date {
        width: auto; /* 幅を自動調整 */
        margin-bottom: 5px; /* 日付の下に余白 */
    }

    .category {
        margin-right: 0; /* 右マージンをリセット */
        margin-bottom: 5px; /* 下に余白 */
    }

    .news-item p {
        width: 100%; /* 幅を100%に */
        font-size: 0.95em;
    }
}

@media (max-width: 480px) {
    .news-list {
        padding: 15px;
    }

    .news-list-title {
        font-size: 1.5em;
    }

    .date, .category {
        font-size: 0.75em;
    }

    .category {
        padding: 4px 10px;
    }
}

.recruitment-selection-section {
    padding: 60px 0;
    background-color: #f0f2f5;
}

.section-title {
    text-align: center;
    font-size: 2.8em; /* タイトルを大きく */
    color: #1a2b4a; /* 少し濃い青系 */
    margin-bottom: 50px;
    font-weight: 700;
    letter-spacing: 0.05em; /* 文字間隔 */
}

/* ==================================== */
/* 採用コースリストのレイアウト         */
/* ==================================== */

.recruitment-course-list {
    max-width: 1200px; /* 全体の幅 */
    margin: 0 auto;
    display: flex; /* Flexboxで横並び */
    flex-wrap: wrap; /* アイテムが収まらない場合に折り返す */
    justify-content: center; /* アイテムを中央揃え */
    gap: 30px; /* アイテム間の隙間 */
    padding: 0 20px; /* 左右の余白 */
}

.course-item {
    display: flex;
    flex-direction: column; /* アイコン、タイトル、説明、ボタンを縦並び */
    align-items: center; /* 中央揃え */
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
    text-decoration: none; /* リンクの下線をなくす */
    color: #333;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* ホバー時のアニメーション */
    padding: 25px; /* 内側の余白 */
    box-sizing: border-box;
    width: calc(33.333% - 20px); /* PCで3列表示 (gap 30pxを考慮) */
    max-width: 380px; /* 個々のカードの最大幅 */
}

.course-item:hover {
    transform: translateY(-8px); /* 少し上に浮き上がる */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); /* 影を濃くする */
}



.course-icon img {
    width: 100px; /* アイコンのコンテナサイズ */
    height: 100px;
    margin-bottom: 20px;
    border-radius: 50%; /* 円形にする場合 */
    background-color: #e3f2fd; /* アイコン背景色 */
    display: flex;
    justify-content: center;
    align-items: center;
}

.course-item h3 {
    font-size: 1.4em;
    margin: 10px 0 10px 0;
    color: #EC6300;
    font-weight: 600;
    text-align: center;
}

.course-item h6 {
    font-size: 1em;
    margin: 20px 0 0 0;
    color: #4B5A6B;
    font-weight: 600;
    text-align: center;
}

.course-item p {
    font-size: 0.95em;
    color: #555;
    margin-bottom: 25px;
    flex-grow: 1; /* 内容が長い場合でもカードの高さを合わせる */
    text-align: center;
}

.learn-more {
    display: inline-block;
    color: #007bff; /* 青色のリンク */
    font-weight: 600;
    font-size: 0.95em;
    border-bottom: 2px solid transparent; /* 初期状態は透明な下線 */
    transition: border-color 0.3s ease;
}

.course-item:hover .learn-more {
    border-color: #007bff; /* ホバー時に下線を強調 */
}

/* ==================================== */
/* 全採用コースを見るボタン             */
/* ==================================== */

.all-courses-link-container {
    text-align: center;
    margin-top: 60px;
}

.all-courses-button {
    display: inline-block;
    padding: 15px 30px;
    background-color: #1abc9c; /* 緑系のボタン */
    color: #ffffff;
    text-decoration: none;
    border-radius: 30px; /* 大きな角丸 */
    font-size: 1.1em;
    font-weight: 600;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.all-courses-button:hover {
    background-color: #16a085; /* ホバー時の色 */
    transform: translateY(-3px); /* 少し浮き上がる */
}

/* ==================================== */
/* レスポンシブ対応                     */
/* ==================================== */

@media (max-width: 992px) {
    .section-title {
        font-size: 2.2em;
    }
    .course-item {
        width: calc(50% - 22.5px); /* タブレットで2列表示 (gap 30pxを考慮) */
    }
}

@media (max-width: 768px) {
    .section-title {
        font-size: 2em;
        margin-bottom: 40px;
    }
    .recruitment-course-list {
        padding: 0 15px;
        gap: 20px; /* 隙間を少し狭める */
    }
    .course-item {
        width: 100%; /* スマートフォンで1列表示 */
        max-width: 400px; /* カードの最大幅を維持 */
        padding: 20px;
    }
    .course-icon {
        width: 80px;
        height: 80px;
    }
    .course-item h3 {
        font-size: 1.3em;
    }
    .course-item p {
        font-size: 0.9em;
    }
    .all-courses-button {
        padding: 12px 25px;
        font-size: 1em;
    }
}

@media (max-width: 480px) {
    .section-title {
        font-size: 1.8em;
    }
    .recruitment-selection-section {
        padding: 40px 0;
    }
    .course-item {
        padding: 15px;
    }
    .course-item h3 {
        font-size: 1.1em;
    }
    .course-item p {
        font-size: 0.85em;
    }
}

/* ==================================== */
/* メインレイアウト       */
/* ==================================== */

main {
    margin-top: 100px;
}

.main-container {
    display: flex; /* Flexboxを有効にして左右に配置 */
}

/* 左側のセクション */
.left-section {
    flex: 1; /* 利用可能なスペースを均等に占める */
    background: linear-gradient(to bottom, #009B85, #CEE8E2); /* グラデーション */
    color: white;
    padding: 40px 30px; /* 上下のパディングを多めに */
    display: flex;
    flex-direction: column; /* 中の要素を縦方向に並べる */
    justify-content: space-between; /* コンテンツとメニューを上下に配置 */
}

/* 右側のセクション（画像） */
.right-section {
    flex: 1.5; /* 左側より少し広くする（必要であれば調整） */
    background-color: #eee; /* 画像読み込み中の代替色 */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* 画像がはみ出さないように */
}

.right-section img {
    display: block; /* imgの下の余白をなくす */
    width: 100%;
    height: 100%;
    object-fit: cover; /* コンテナに合わせて画像をトリミングして表示 */
}


/* ==================================== */
/* テキストスタイル           */
/* ==================================== */

.text-content p {
    margin-bottom: 1.5em; /* 段落間のスペース */
    font-size: 1.1em; /* 文字サイズを少し大きく */
    font-weight: 400; /* 通常のフォントウェイト */
}

.text-content .highlight-text {
    font-weight: 700; /* 太字 */
    font-size: 1.2em; /* さらに文字を大きく */
    margin-top: 30px; /* 上部のスペース */
    margin-bottom: 0; /* 下部のスペースをなくす */
}


/* ==================================== */
/* 横並びのナビゲーション           */
/* ==================================== */

.navigation-menu-horizontal {
    margin-top: 40px; /* テキストコンテンツとの間隔 */
    width: 100%;
    text-align: center; /* メニュー全体を中央寄せに */
}

.navigation-menu-horizontal ul {
    display: flex; /* Flexboxで項目を横並びに */
    justify-content: center; /* 項目を中央寄せに */
    flex-wrap: wrap; /* 画面が狭くなったら折り返す */
}

.navigation-menu-horizontal li {
    background-color: #009B85; /* 各リスト項目の背景色 */
    margin: 5px; /* 各項目の間に少し隙間を作る */
    border-radius: 5px; /* 角を丸くする (画像に合わせて調整) */
    overflow: hidden; /* 角丸にするために必要 */
}

.navigation-menu-horizontal a {
    display: block; /* リンクエリア全体をクリック可能に */
    color: white; /* リンクの色を白に */
    padding: 10px 20px; /* 上下のパディングを調整 */
    font-size: 1em; /* 文字サイズ */
    transition: background-color 0.3s ease; /* ホバー時のアニメーション */
    white-space: nowrap; /* 文字が途中で改行されないように */
    text-decoration: none;
}

.navigation-menu-horizontal a:hover {
    background-color: rgba(255, 255, 255, 0.1); /* ホバー時の背景色 */
}


/* ==================================== */
/* 写真ギャラリーセクション        */
/* ==================================== */

.section-title {
    font-size: 2.5em;
    margin-bottom: 40px;
    color: #333;
}

/* Swiperコンテナの基本設定 */
.swiper-container {
    width: 90%; /* コンテナの幅を調整 */
    max-width: 1200px; /* 最大幅 */
    margin: 0 auto;
    padding-bottom: 50px; /* ページネーションのスペース */
}

.swiper-slide {
    position: relative; /* 子要素のitem-contentを配置するために必要 */
    overflow: hidden; /* ホバー時のズームなどで画像がはみ出さないように */
    cursor: pointer;
    border-radius: 8px; /* 角を丸くする */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* 影を追加 */
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 250px; /* 画像の高さを固定（調整してください） */
    object-fit: cover; /* 画像がコンテナに収まるように調整 */
    transition: transform 0.3s ease; /* ホバー時のズームアニメーション */
}

/* ホバー時の画像ズーム */
.swiper-slide:hover img {
    transform: scale(1.05); /* わずかに拡大 */
}

/* item-content (浮き出る部分) のスタイル */
.item-content {
    position: absolute;
    bottom: 0; /* 下から浮き出るように設定 */
    left: 0;
    width: 100%;
    background-color: rgba(44, 223, 187, 0.7); /* 半透明の黒背景 */
    color: white;
    padding: 15px 20px;
    box-sizing: border-box;
    transform: translateY(100%); /* 初期状態では完全に下に隠す */
    opacity: 0; /* 初期状態では透明 */
    transition: transform 0.3s ease, opacity 0.3s ease; /* アニメーション */
    display: flex; /* h3とaを横並びに */
    justify-content: space-between; /* 両端に配置 */
    align-items: center; /* 垂直方向中央寄せ */
}

/* ホバー時にitem-contentを表示 */
.swiper-slide:hover .item-content {
    transform: translateY(0); /* 通常の位置に戻す */
    opacity: 1; /* 不透明にする */
}

.item-content h3 {
    margin: 0;
    font-size: 1.0em;
    white-space: nowrap; /* タイトルが途中で改行されないように */
    overflow: hidden; /* はみ出したテキストを隠す */
    text-overflow: ellipsis; /* はみ出したテキストを...で表示 */
}

.item-content .arrow-link {
    font-size: 1.5em;
    font-weight: bold;
    color: white;
    margin-left: 10px; /* タイトルとの間隔 */
    flex-shrink: 0; /* 縮小させない */
}

/*
 * レスポンシブデザインの調整
 * -------------------------------------------------------------
 */
@media (max-width: 768px) {
    .main-container {
        flex-direction: column; /* 画面が狭い場合、縦に並べる */
        min-height: auto; /* 高さを自動調整 */
    }

    .left-section {
        width: 100%; /* 幅を100%に */
        padding: 30px 20px; /* パディングを調整 */
    }

    .right-section {
        width: 100%; /* 幅を100%に */
        height: 300px; /* スマホでの画像の高さを固定（必要であれば調整） */
    }

    .navigation-menu-horizontal ul {
        flex-direction: column; /* スマホでは縦並びにする */
        align-items: center; /* 中央寄せ */
    }

    .navigation-menu-horizontal li {
        margin: 5px 0; /* 縦方向の余白 */
        width: 90%; /* 幅を調整 */
        max-width: 300px; /* 最大幅 */
    }

    .footer-nav ul {
        flex-direction: column; /* フッターメニューも縦並びに */
        align-items: center;
    }

    .footer-nav li {
        margin: 5px 0; /* 縦方向の余白 */
    }
}

@media (max-width: 480px) {
    .left-section .text-content p {
        font-size: 1em;
    }
    .left-section .text-content .highlight-text {
        font-size: 1.1em;
    }
    .navigation-menu-horizontal a {
        font-size: 0.9em;
        padding: 8px 15px;
    }
    .footer-nav a {
        font-size: 0.8em;
    }
}

/* 「About Us」セクションの全体的なスタイル */
#topAbout {
    padding: 60px 0; /* 必要に応じてパディングを調整 */
    background-color: #ffffff; /* セクションの背景色 */
    
}

#topAbout .inner {
    max-width: 1280px; /* コンテンツの最大幅 */
    margin: 0 auto; /* コンテンツを中央寄せ */
    padding: 0 20px; /* 内側のパディング */
}

/* メニューのレイアウト */
.topAboutMenu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex; /* Flexboxでレイアウト */
    flex-wrap: wrap; /* アイテムの折り返しを許可 */
    gap: 20px; /* アイテム間のスペース */
    justify-content: center; /* 行が埋まらない場合にアイテムを中央寄せ */
}

.topAboutMenu li {
    flex: 0 0 calc(25% - 15px); /* 4列表示の基本設定 (gap 20px / 4 = 5px * 3 = 15px を引く) */
    max-width: 280px; /* 各アイテムの最大幅（デザインに応じて調整） */
    min-width: 200px; /* 小さい画面での最小幅 */
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    overflow: hidden; /* 画像の角が丸くなるように */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex; /* li の中身も flex で制御 */
    flex-direction: column; /* 縦方向に配置 */
    position: relative; /* スライドショーのために必要 */
}

.topAboutMenu li:hover {
    transform: translateY(-5px); /* ホバー時にわずかに持ち上げる */
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}

.topAboutMenu a {
    text-decoration: none;
    color: #333;
    display: flex; /* a の中身も flex で制御 */
    flex-direction: column; /* 縦方向に配置 */
    height: 100%; /* カード全体をクリック可能にする */
    justify-content: space-between; /* 画像とテキストを上下に配置し、間にスペースを確保 */
}

/* 画像のスタイル */
.topAboutMenu figure {
    margin: 0;
    width: 100%;
    /* 理想のデザインに合わせるため、画像の高さを調整 */
    height: 150px; /* ある程度の固定高さ。アスペクト比を保ちたい場合はpadding-topトリックなど検討 */
    overflow: hidden;
    display: flex; /* 画像を中央寄せするため */
    justify-content: center;
    align-items: center;
    background-color: #e0e0e0; /* プレースホルダーの背景色 */
    border-top-left-radius: 8px; /* カードの角と合わせる */
    border-top-right-radius: 8px;
}

.topAboutMenu figure img {
    width: 100%; /* 画像を幅いっぱいに表示 */
    height: 100%; /* 画像を高さっぱいに表示 */
    object-fit: cover; /* 領域をカバーし、必要に応じてトリミング */
    display: block;
    transition: transform 0.3s ease;
}

.topAboutMenu li:hover figure img {
    transform: scale(1.05); /* 画像ホバー時にわずかにズーム */
}

/* テキストと矢印 */
.topAboutMenu span {
    display: block;
    text-align: center;
    padding: 15px 10px;
    font-size: 1.1em;
    font-weight: bold;
    color: rgba(82, 81, 81, 0.918); /* テキストのアクセントカラー */
    flex-grow: 1; /* 残りのスペースを埋める */
    display: flex; /* テキストと矢印を中央揃えにするため */
    align-items: center;
    justify-content: center;
    position: relative; /* 矢印のためにpositionを設定 */
    padding-right: 30px; /* 矢印分のスペースを確保 */
}

/* 矢印のスタイル（理想のデザインに合わせて追加） */
.topAboutMenu span::after {
    content: '▶'; /* 矢印の記号 */
    position: absolute;
    right: 15px; /* 右端からの位置 */
    color: #999; /* 矢印の色 */
    font-size: 0.9em;
    transition: color 0.3s ease;
}

.topAboutMenu li:hover span::after {
    color: #0056b3; /* ホバー時に矢印の色を変更 */
}

/* スライドショー固有のスタイル（本部長メッセージ用） */
/* このスライドショーはfigureの代わりに来るので、figureと同じ高さにする */
.topAboutMenu li .slideshow {
    position: relative;
    width: 100%;
    height: 150px; /* 他の figure と同じ高さに設定 */
    overflow: hidden;
    list-style: none; /* リストの箇条書きを削除 */
    padding: 0;
    margin: 0;
    border-top-left-radius: 8px; /* カードの角と合わせる */
    border-top-right-radius: 8px;
}

.topAboutMenu li .slideshow li {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out; /* スムーズなフェード効果 */
    box-shadow: none; /* 親のliがbox-shadowを持つので、ここでは不要 */
    border-radius: 0; /* 親のliがborder-radiusを持つので、ここでは不要 */
    flex: none; /* スライドショーのliはflexアイテムではない */
    min-width: unset;
    max-width: unset;
    /* ホバー時の translateY(-5px) が適用されないように */
    transform: none;
}

.topAboutMenu li .slideshow li.active {
    opacity: 1; /* アクティブなスライドを表示 */
}

.slideshow .image-box {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.slideshow .image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* レスポンシブ調整 */
@media (max-width: 1024px) {
    .topAboutMenu li {
        flex: 0 0 calc(33.333% - 13.333px); /* 3列表示 (gap 20px / 3 = 6.666px * 2 = 13.333px を引く) */
        max-width: 350px; /* アイテムの最大幅を調整 */
    }
}

@media (max-width: 768px) {
    .topAboutMenu ul {
        flex-direction: column; /* 小さい画面ではアイテムを縦に並べる */
        align-items: center;
    }

    .topAboutMenu li {
        width: 90%; /* 小さい画面ではアイテムを広く */
        max-width: 400px; /* 最大幅を制限 */
        flex: none; /* flex設定を解除 */
    }

    
}

@media (max-width: 480px) {
    #topAbout {
        padding: 40px 0;
    }

     .topAboutMenu span {
        font-size: 1em;
        padding: 12px 8px;
    }

    .topAboutMenu figure,
    .topAboutMenu li .slideshow {
        height: 120px; /* 画像の高さも小さくする */
    }
}