/* ========================================
   レスポンシブ対応 - ディライフ
   ======================================== */

/* タブレット (768px〜1024px) */
@media screen and (max-width: 1024px) {
  #menu_div {
    margin: 15px 5vw;
  }
  #menu_div ul a.main_links {
    padding: 10px 25px;
    font-size: 14px;
  }
  .contents {
    margin: 0px 5vw;
  }
  h1 {
    font-size: 28px;
  }
  h2 {
    font-size: 22px;
  }
  .section_name {
    font-size: 4vw;
  }
  .section_name_medium {
    font-size: 3vw;
  }
  #hero_area h1 {
    font-size: 36px;
    left: 58%;
  }
  section.center_img img {
    width: 80vw;
    height: 45vw;
  }
  section.multiple_img div.container div h3 {
    font-size: 16px;
    padding: 6px;
  }
  footer div#main {
    margin: 0 5vw;
  }
}

/* スマホ (〜767px) */
@media screen and (max-width: 767px) {
  /* サブメニュー非表示 */
  #menu_sub_items {
    display: none !important;
  }

  /* ===== メニュー ===== */
  #menu_div {
    margin: 10px 4vw;
    flex-direction: column;
    align-items: center;
  }
  #main_logo {
    width: 120px;
    margin-bottom: 10px;
  }
  #menu_div nav {
    justify-content: center;
  }
  #menu_div ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    padding: 0;
    margin: 0;
  }
  #menu_div .menu_items {
    display: inline-block;
  }
  #menu_div ul a.main_links {
    padding: 8px 16px;
    font-size: 13px;
  }
  #menu_sub_items {
    position: static;
    margin-top: 5px;
  }
  #menu_div ul div#dropdown_menu li a {
    padding: 6px 8px;
    font-size: 13px;
  }

  /* ===== ヒーローエリア ===== */
  #hero_area {
    min-height: auto;
    overflow: hidden;
  }
  #hero_area video {
    display: block;
    width: 100%;
    height: auto;
  }
  #hero_area h1 {
    font-size: 24px;
    left: auto;
    right: 5%;
    top: 5%;
    text-shadow: 1px 1px 5px black;
  }

  /* ===== コンテンツ ===== */
  .contents {
    margin: 0px 4vw;
  }

  /* ===== スライダー（TOP） ===== */
  .swiper {
    width: 100%;
    height: auto;
  }
  .swiper-slide img {
    width: 100%;
    height: auto;
    max-height: 500px;
    object-fit: cover;
  }

  /* ===== 見出し ===== */
  h1 {
    font-size: 24px;
  }
  h2 {
    font-size: 18px;
  }
  p {
    font-size: 15px;
  }
  .section_name {
    font-size: 6vw;
    margin: 15px;
  }
  .section_name_medium {
    font-size: 4.5vw;
    margin: 15px;
  }

  /* ===== 画像＋テキスト（左/右） ===== */
  section.left_img,
  section.right_img {
    flex-direction: column !important;
  }
  section.left_img img,
  section.right_img img {
    height: auto !important;
    max-height: 300px;
    width: 100%;
    object-fit: cover;
  }
  section.left_img h2,
  section.right_img h2 {
    padding: 20px 10px;
    font-size: 16px;
  }
  section.left_img h2 br,
  section.right_img h2 br {
    display: inline;
  }

  /* ===== 4列画像グリッド ===== */
  section.multiple_img {
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px;
  }
  section.multiple_img div.container {
    width: 48%;
  }
  section.multiple_img div.container img {
    height: 200px;
    object-fit: cover;
  }
  section.multiple_img div.container div h3 {
    font-size: 14px;
    padding: 8px 4px;
  }

  /* ===== 中央画像 ===== */
  section.center_img img {
    width: 90vw;
    height: 50.6vw;
    max-width: 100%;
  }

  /* ===== 会社概要スワイパー矢印 ===== */
  .swiper-button-next,
  .swiper-button-prev {
    transform: scale(0.6);
  }
  .swiper-button-next:after,
  .swiper-button-prev:after {
    font-size: 24px !important;
  }

  /* ===== 会社概要テーブル ===== */
  div.contents table {
    margin: 30px auto !important;
    width: 100%;
  }

  /* ===== 事業内容ページの画像 ===== */
  div.contents#work section.center_img {
    overflow: hidden;
  }
  div.contents#work section.center_img img {
    width: 100%;
    height: 50vw;
    object-fit: cover;
  }
  section.center_img div {
    width: 90%;
    padding-top: 10px;
    padding-bottom: 20px;
  }

  /* ===== ボックス ===== */
  div.box {
    margin: 50px 0px;
    padding: 10px 5px;
    border-radius: 30px;
  }

  /* ===== ボタン ===== */
  .readmore_button {
    font-size: 16px;
    padding: 8px 20px;
  }
  .jump_link a {
    font-size: 14px;
    padding: 8px 12px;
    margin: 3px;
    display: inline-block;
  }

  /* ===== テーブル ===== */
  table {
    width: 100%;
    font-size: 14px;
    margin: 30px auto;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  th, td {
    padding: 10px 8px;
  }

  /* ===== アクセスマップ ===== */
  div#access_map {
    width: 100%;
    margin: 30px auto;
  }
  div#access_map iframe {
    width: 100%;
    height: 250px;
  }

  /* ===== YouTube ===== */
  div.recruit_youtube iframe {
    width: 92vw;
    height: 51.75vw;
  }

  /* ===== Greeting ===== */
  div.greeting {
    width: 95%;
    margin: 30px auto;
    font-size: 16px;
  }

  /* ===== 採用セクション（詳しく見るボタン） ===== */
  section.right_img:last-of-type {
    margin-bottom: 20px;
    padding-bottom: 30px;
  }
  section.right_img:last-of-type .readmore_button {
    margin-bottom: 15px;
    display: inline-block;
  }

  /* ===== フッター ===== */
  footer {
    padding: 40px 0px;
    background-position-y: center;
  }
  footer div#main {
    margin: 0 4vw;
    flex-direction: column;
    text-align: center;
  }
  footer div#main div#left {
    flex: 100%;
  }
  footer div#main div#right {
    flex: 100%;
    margin-top: 20px;
  }
  footer div#main div#right div {
    width: auto;
    display: flex;
    justify-content: center;
    gap: 20px;
  }
  footer div#main div#right a {
    margin: 0;
    font-size: 14px;
  }
  footer h2 {
    font-size: 18px;
  }
  footer p {
    font-size: 14px;
  }

  /* ===== スペーサー ===== */
  .spacer1 {
    height: 30px;
  }
}

/* 小さなスマホ (〜480px) */
@media screen and (max-width: 480px) {
  #menu_div ul a.main_links {
    padding: 6px 12px;
    font-size: 11px;
  }
  #hero_area h1 {
    font-size: 18px;
    left: 46%;
  }
  section.multiple_img div.container {
    width: 100%;
  }
  section.multiple_img div.container div h3 {
    font-size: 18px;
    padding: 12px;
  }
  #main_logo {
    width: 100px;
  }
  
  /* ===== リサイクルボタン ===== */
  div#recycle_buttons button {
    width: 40%;
    font-size: 14px;
    padding: 14px;
    margin: 4px;
  }
  table {
    font-size: 12px;
  }
  th, td {
    padding: 6px 4px;
  }
}