/* =========================================================
   /css/responsive.css 〈完成版・安全復旧＋明示定義〉
   - レイアウト：本文を中央に（960px基準・はみ出し防止）
   - スライダー：左右幅揃え、画像のはみ出し防止
   - ナビ（青バー）：全幅で途切れない／文字は白
   - フッター：上段 #e5e5e5、下段 #127CB8、会社名20px太字
   ※ reset.css / common.css / common2.css / flexslider.css の前提は維持
   ========================================================= */

/* ----------------------------
   1) レイアウト（本文センター）
   ---------------------------- */
html, body {
  width: 100%;
}
#wrapper, #contents, #container, .container, #main {
  /* 960pxを基準に中央配置（ウィンドウが狭い時は100%内に収める） */
  max-width: 960px;
  width: 96%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}
/* 既存CSSで float が当たっている場合の保険 */
#wrapper, #contents, #container, .container, #main { float: none; }

/* ----------------------------
   2) スライダー（左右幅を揃える）
   ---------------------------- */
.flexslider,
.flexslider .slides,
.flexslider .slides > li {
  /* 本文と同じ幅・中央揃えに収める（画像がはみ出さない） */
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}
.flexslider .slides > li img {
  display: block;
  width: 100%;
  height: auto;
  /* 右だけ広く見えるのを防止（余白・枠のズレを抑える） */
  border: 0;
  vertical-align: bottom;
}

/* ----------------------------
   3) グローバルナビ（青バーを全幅で）
   ---------------------------- */
nav, #gnavi, #gNavi, #global_navi, #menu, .global-menu {
  width: 100%;
  background: #127CB8;   /* 既定の青 */
  color: #fff;
}
nav a, #gnavi a, #gNavi a, #global_navi a, #menu a, .global-menu a {
  color: #fff;
  text-decoration: none;
}
/* もし背景画像指定で帯が途切れる場合の保険 */
nav, #gnavi, #gNavi, #global_navi, #menu, .global-menu {
  background-image: none;
  background-repeat: repeat-x;
}

/* ----------------------------
   4) フッター（仕様へ統一）
   ---------------------------- */
/* 上段：少し濃いグレー */
footer, #footer_box {
  background: #e5e5e5;
  color: #000;
  text-align: left;
}
address div.company {
  font-size: 20px;       /* 会社名を既定どおりに */
  font-weight: bold;
  color: #000;
}
/* 下段コピーライト：青バー＋白文字 */
#copy_area {
  background: #127CB8;
  color: #fff;
  text-align: center;
  border-top: none;
  padding: 15px 0;
}
#copy_area *, #copy_box * {
  color: #fff;
}

/* ----------------------------
   5) 汎用（画像のはみ出し保護）
   ---------------------------- */
img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

/* ----------------------------
   6) スマホ調整
   ---------------------------- */
@media screen and (max-width: 768px) {
  .container, #wrapper, #contents, #container, #main {
    width: 94%;
    max-width: 100%;
  }
  .flexslider {
    width: 100%;
    max-width: 100%;
  }
}

/* =========================================================
   responsive_overrides.css  ? 2025-10-18
   目的：/index.html のPCデザインを完全維持したまま、
         狭幅時（タブレット/スマホ）だけ柔らかく伸縮。
   ※ 既存CSSは不変。これを外せば即元通り（安全弁）。
   ========================================================= */

/* ========== 1) PCは一切いじらない（メディアクエリ外は空） ========== */


/* ========== 2) タブレット（～1024px） ========== */
@media screen and (max-width: 1024px) {

  /* 中央カラムは“見た目そのまま”で少しだけ余白を確保 */
  #wrapper,
  #contents,
  #container,
  .container,
  #main {
    max-width: 960px;          /* PC基準は残す */
    width: 94%;                /* 端末幅に寄り添って少し縮む */
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    float: none;
  }

  /* グローバルナビ：帯は既存のまま、項目だけ折り返して中央へ */
  #gnavi ul,
  nav ul,
  .global-menu ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    justify-content: center;
    padding: 8px 0;
    margin: 0;
  }
  #gnavi li,
  nav li,
  .global-menu li {
    list-style: none;
  }
  #gnavi a,
  nav a,
  .global-menu a {
    display: block;
    padding: 8px 10px;
    line-height: 1.4;
    text-decoration: none;
  }

  /* スライダー：横幅だけ端末に合わせる（比率は保持） */
  .flexslider,
  .flexslider .slides,
  .flexslider .slides > li {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
  }
  .flexslider .slides > li img {
    width: 100%;
    height: auto;
    display: block;
  }

  /* フッター本文ブロック：読みやすい余白だけ追加（配色は既存のまま） */
  #footer_box {
    padding-left: 3%;
    padding-right: 3%;
    box-sizing: border-box;
  }
}

/* ========== 3) スマホ（～768px） ========== */
@media screen and (max-width: 768px) {

  /* ロゴ周り：縦積み＋中央配置（幅は自動縮小） */
  #header_box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px 0;
  }
  #header_box img {
    max-width: 92%;
    height: auto;
  }

  /* 見出しや本文の左右余白を少し広げる（読みやすさ重視） */
  #contents,
  #main,
  .container {
    width: 92%;
  }

  /* ナビは1行に収まらなければ自然に折り返し */
  #gnavi ul,
  nav ul,
  .global-menu ul {
    gap: 6px 10px;
  }
  #gnavi a,
  nav a,
  .global-menu a {
    padding: 10px 8px;
  }

  /* スライダーは画面幅いっぱい。高さは画像任せでOK */
  .flexslider {
    max-width: 100%;
  }
  .flexslider .slides > li img {
    width: 100%;
    height: auto;
  }

  /* フッター会社情報は縦積み想定の行間だけ */
  #footer_box address {
    line-height: 1.75;
  }

  /* コピーライト帯は中央寄せのまま */
  #copy_area {
    text-align: center;
    padding: 10px 0;
  }
}