@charset "UTF-8";
/* ============================================================
   d2j.com — スマートフォン対応 追加スタイル
   ============================================================
   既存の /styles.css はそのままに、このファイルを後ろから
   読み込むことで PC表示は維持したまま スマホ表示のみ整います。

   読み込み方:
     <link rel="stylesheet" href="/css/responsive.css">
     を既存の /styles.css の「あと」に置く。

   想定セレクタ (現サイトHTMLに合わせ込み済み):
     #wrap      … 外側コンテナ
     #head      … ヘッダー (.logo / .right-icon)
     #navi      … 横ナビゲーション
     .banner    … トップバナー
     #contents  … 本文 (.left-c の中に .space + dl.date)
     #footer    … フッター (.copyright)
   ============================================================ */


/* ─── 共通: スマホでも画像がはみ出ないように ─────────────── */
img {
  max-width: 100%;
}
/* ※ height:auto を全 img に付けると HTML の width/height
   属性でサイズ指定されているロゴ等が原寸表示に
   なるため、幅可変にしたい画像だけに限定して適用。 */
.banner img,
.left-c img,
img.space {
  max-width: 100%;
  height: auto;
}


/* ─── ハンバーガーボタン (PCでは非表示) ─────────────────── */
.sp-burger {
  display: none;
  width: 44px;
  height: 44px;
  background: #fff;
  border: 1px solid #ccc;
  cursor: pointer;
  padding: 0;
  position: relative;
  border-radius: 2px;
}
.sp-burger span,
.sp-burger span::before,
.sp-burger span::after {
  content: "";
  display: block;
  width: 22px;
  height: 2px;
  background: #333;
  position: absolute;
  left: 50%;
  margin-left: -11px;
}
.sp-burger span        { top: 21px; }
.sp-burger span::before { top: -7px; }
.sp-burger span::after  { top:  7px; }


/* ─── スマホ用ドロワー本体 (デフォルト非表示) ───────────── */
.sp-drawer {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  z-index: 9999;
}
.sp-drawer.open {
  opacity: 1;
  pointer-events: auto;
}
.sp-drawer-panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 86%;
  max-width: 320px;
  background: #fff;
  transform: translateX(100%);
  transition: transform 0.25s ease;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.sp-drawer.open .sp-drawer-panel { transform: translateX(0); }

.sp-drawer-head {
  padding: 14px 16px;
  border-bottom: 1px solid #e3e3e3;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sp-drawer-head img { height: 28px; width: auto; }
.sp-drawer-close {
  width: 38px; height: 38px;
  border: 1px solid #ccc;
  background: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  border-radius: 2px;
}

.sp-drawer-nav { padding: 8px 0; }
.sp-drawer-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  color: #333;
  border-bottom: 1px solid #eee;
  font-size: 15px;
  text-decoration: none;
}
.sp-drawer-nav a::after {
  content: "›";
  color: #999;
  font-size: 18px;
}
.sp-drawer-nav a:hover { background: #f4f5f7; }


/* ============================================================
   ▼▼▼ スマートフォン (768px 以下) のみ適用 ▼▼▼
   ============================================================ */
@media screen and (max-width: 768px) {

  /* ── 全体 ────────────────────────────────────── */
  /* html / body ともに overflow:visible にして、スクロールを
     ブラウザのビューポートだけに任せる (= スクロールバー1本)
     ※ overflow-x: hidden + overflow-y: visible の組み合わせは
       仕様上 visible が auto 扱いになり、別途スクロールバーが
       発生してしまうため、overflow-x には clip を使用する。 */
  html,
  html body,
  body {
    overflow-x: clip !important;
    overflow-y: visible !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    min-width: 0 !important;
  }
  html body { position: relative; }   /* sp-burger の絶対配置基準 */

  /* 主要コンテナはすべて overflow:visible を強制
     (どこかのコンテナが自前のスクロールバーを出さないように) */
  #wrap,
  #wrap > *,
  #contents,
  #contents > *,
  #sub-contents,
  #sub-contents > *,
  #head,
  #navi,
  #footer,
  .banner,
  .left-c,
  .right-contents,
  .left-menu,
  .entry,
  .entry > * {
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  /* 例外: ドロワーパネルは内部スクロール OK */
  .sp-drawer-panel {
    overflow-y: auto !important;
  }
  body {
    position: relative;        /* sp-burger の絶対配置基準 */
    min-width: 0 !important;   /* 既存 styles.css の min-width を無効化 */
  }

  /* ── 外側コンテナ (#wrap) を画面幅にフィット ───── */
  #wrap {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 12px !important;
    box-sizing: border-box;
    overflow: visible !important;
  }

  /* ── ハンバーガー: 画面右上に固定配置 ───────────── */
  .sp-burger {
    display: block;
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 100;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  }

  /* ── ヘッダー (#head) ─────────────────────────── */
  #head {
    padding: 8px 56px 8px 0 !important; /* 右はハンバーガー分の余白 */
    min-height: 0 !important;
  }
  #head .logo { float: none !important; }
  #head .logo h1 {
    margin: 0 !important;
    padding: 0 !important;
  }
  /* ロゴ画像は HTML の width="53" height="25" をそのまま生かす */
  #head .logo img {
    max-width: 100%;
    /* width/height は制御しない */
  }
  /* PC用「Home / サイトマップ」画像ナビは非表示 */
  #head .right-icon {
    display: none !important;
  }

  /* ── グローバルナビ (#navi) を非表示 ─────────── */
  #navi {
    display: none !important;
  }

  /* ── バナー画像 ──────────────────────────────── */
  /* 左右対称になるように、#wrap の余白の内側にそのまま収める */
  .banner,
  #wrap .banner {
    width: 100% !important;
    max-width: 100% !important;
    margin: 6px 0 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
    text-align: center;
  }
  .banner img {
    width: 100% !important;
    height: auto !important;
    max-width: 100%;
    display: block;
  }

  /* ── 本文 (#contents / #sub-contents) ────────── */
  /* 親コンテナの float / width をリセット */
  #contents,
  #sub-contents {
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    overflow: visible !important;
  }
  /* 中の左サイドナビ + 右コンテンツ等、float で並んでいる
     要素を全て縦積みにする (会社案内など下層ページ用) */
  #contents > div,
  #sub-contents > div,
  #contents > .left-c,
  #contents > .right-c,
  #contents > .center-c,
  #sub-contents > .left-menu,
  #sub-contents > .right-contents {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    float: none !important;
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
    overflow: visible !important;
  }
  /* テーブルが画面幅を超えないように (table.companyt 等) */
  #contents table,
  #sub-contents table,
  table.companyt {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed;
    word-wrap: break-word;
    word-break: break-word;
  }
  #contents table th,
  #contents table td,
  #sub-contents table th,
  #sub-contents table td,
  table.companyt th,
  table.companyt td {
    padding: 8px !important;
    font-size: 13px;
    word-wrap: break-word;
    word-break: break-word;
  }
  /* 「社名」「設立」等の左ラベル列の幅を制御 */
  table.companyt th {
    width: 30% !important;
    min-width: 0 !important;
  }
  /* 本文内の画像もはみ出させない */
  #contents img,
  #sub-contents img {
    max-width: 100% !important;
    height: auto !important;
  }
  /* Google Maps 等の iframe も画面幅にフィット + 中央寄せ */
  #contents iframe,
  #sub-contents iframe,
  .right-contents iframe {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    box-sizing: border-box;
  }
  /* ── 個人情報保護に関するお問い合わせ枠 (.contactarea) ── */
  /* PC では電話番号 + FAX が1行に収まるが、スマホでは
     全角スペース込みで折り返せず枠を押し広げてしまう。
     枠を画面幅に収め、内側のテキストも折り返し可にする。 */
  .contactarea {
    width: auto !important;
    max-width: 100% !important;
    margin: 16px 0 !important;
    padding: 14px 12px !important;
    box-sizing: border-box !important;
    word-wrap: break-word;
    word-break: break-word;
    overflow: visible !important;
  }
  .contactarea p,
  .contactarea div {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    word-wrap: break-word;
    word-break: break-word;
    white-space: normal !important;
  }
  /* 電話番号の右寄せをやめて左寄せに */
  .contactarea > div[style*="right"] {
    text-align: left !important;
    margin-top: 8px !important;
    line-height: 1.8;
  }

  /* iframe を囲む div (Google Maps の埋め込みコード等) も
     はみ出ないように制御 */
  #contents iframe + *,
  .right-contents > div,
  .right-contents .entry > div {
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* ── お問い合わせフォームの送信/修正ボタン ─────── */
  /* HTML 例:
       <div class="submitspace">
         <input type="image" src=".../submit.gif">
         <a href="..."><img src=".../revision.gif"></a>
       </div>
     スマホでも 2 つのボタンを横並び+中央寄せに揃える。 */
  .submitspace {
    text-align: center !important;
    margin: 20px 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    width: 100% !important;
    box-sizing: border-box;
    display: block !important;
    /* 念のため Flex でも中央寄せ */
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center !important;
    align-items: center;
    gap: 10px;
  }
  .submitspace input[type="image"],
  .submitspace a,
  .submitspace a img,
  .submitspace .btnspace {
    float: none !important;
    display: inline-block !important;
    vertical-align: middle !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: 45% !important;   /* 2つ並べるので半分以下に */
    height: auto !important;
    width: auto !important;
  }
  .submitspace a { line-height: 0; }
  /* 通常の input/button ボタンへの一般対応 (画像ボタンでない場合) */
  #sub-contents input[type="submit"],
  #sub-contents input[type="button"],
  #sub-contents button,
  .right-contents input[type="submit"],
  .right-contents input[type="button"],
  .right-contents button {
    float: none !important;
    display: inline-block !important;
    margin: 6px !important;
    min-width: 100px;
    padding: 12px 24px !important;
    font-size: 14px !important;
    box-sizing: border-box;
    vertical-align: middle;
  }
  /* 「お知らせ」等の見出し画像 (img.space) を画面幅に */
  .left-c img.space,
  .left-c .space {
    width: 100% !important;
    height: auto !important;
    margin: 8px 0 !important;
  }

  /* ── サイドメニュー (.left-menu) ─────────── */
  /* 見出し画像 (sub-company.jpg 等) は画面幅にフィット */
  #sub-contents .left-menu > a > img,
  #sub-contents .left-menu img {
    max-width: 100% !important;
    height: auto !important;
    width: auto !important;
  }
  #sub-contents .left-menu {
    border-bottom: 1px solid #e3e3e3;
    padding-bottom: 8px !important;
  }
  /* スマホでは「会社案内」等の親見出し (画像 / 単独項目) を非表示
     ─ サブメニューだけで十分に意味が伝わるため、画面上部を簡潔に */
  #sub-contents .left-menu > a:first-child,
  #sub-contents .left-menu > a:first-child img,
  #sub-contents .left-menu > p:first-child,
  #sub-contents .left-menu > img:first-child,
  #sub-contents .left-menu > h1:first-child,
  #sub-contents .left-menu > h2:first-child,
  #sub-contents .left-menu > h3:first-child {
    display: none !important;
  }
  /* 単独項目用ulが先頭にある場合 (項目1個だけのul) も非表示
     ─ サブメニュー本体は 子項目を複数持つ ul なので残る */
  #sub-contents .left-menu > ul:first-of-type:has(> li:only-child) {
    display: none !important;
  }
  /* メニュー (親・子とも) は全て縦積み・幅100% にして読みやすくする。
     既存CSSのマーカー画像やスタイルはそのまま生かすため、
     background は上書きしない。 */
  #sub-contents .left-menu ul,
  #sub-contents .left-menu ul ul {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    border: 0 !important;
    background: none !important;
    width: 100% !important;
  }
  #sub-contents .left-menu li {
    display: block !important;
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    box-sizing: border-box;
    border-bottom: 1px solid #eee;
    min-width: 0 !important;
  }
  #sub-contents .left-menu li:last-child {
    border-bottom: 0;
  }
  /* リンク自体のタップ領域を広く取る。
     padding-left は既存CSSがマーカー画像を退けるために
     使っている可能性があるので上書きしない。 */
  #sub-contents .left-menu li a {
    display: block !important;
    padding-top: 12px !important;
    padding-right: 12px !important;
    padding-bottom: 12px !important;
    font-size: 14px;
    text-decoration: none;
    color: #333;
    white-space: normal !important;
    width: auto !important;
    height: auto !important;
    line-height: 1.4;
  }

  /* ── 右コンテンツ (.right-contents) ──────────── */
  #sub-contents .right-contents {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  /* 見出し: 「経営理念」スタイルに揃える
     ─ 白背景 + 1px枠 + 内側に短いグレーのアクセント縦バー
     ─ h2.entry-title のみ対象。h3 は既存スタイルそのまま */
  .entry-title,
  h1.entry-title,
  h2.entry-title,
  .right-contents h2,
  .right-contents .entry-title,
  #sub-contents .entry-title,
  #sub-contents .right-contents h2.entry-title,
  #sub-contents .right-contents h2 {
    position: relative !important;
    margin: 14px 0 10px !important;
    padding: 12px 12px 12px 22px !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    background: #fff !important;
    background-image: none !important;
    border: 1px solid #e3e3e3 !important;
    border-left: 1px solid #e3e3e3 !important;
    color: #333 !important;
    font-weight: 400 !important;
    text-indent: 0 !important;
    text-align: left !important;
    letter-spacing: 0 !important;
  }
  /* 内側の縦バーアクセント (中央寄せ・固定高さで「経営理念」画像に寄せる) */
  .entry-title::before,
  h1.entry-title::before,
  h2.entry-title::before,
  .right-contents h2::before,
  .right-contents .entry-title::before,
  #sub-contents .entry-title::before,
  #sub-contents .right-contents h2.entry-title::before,
  #sub-contents .right-contents h2::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    bottom: auto !important;
    right: auto !important;
    width: 3px !important;
    height: 16px !important;
    background: #c8c8c8 !important;
    background-image: none !important;
    border: 0 !important;
  }
  .entry-title::after,
  h1.entry-title::after,
  h2.entry-title::after,
  .right-contents h2::after,
  .right-contents .entry-title::after,
  #sub-contents .entry-title::after,
  #sub-contents .right-contents h2.entry-title::after,
  #sub-contents .right-contents h2::after {
    display: none !important;
    content: none !important;
  }
  #sub-contents .right-contents .entry {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  /* テーブルも見出しと左端を揃える */
  #sub-contents .right-contents table {
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* ── お知らせ一覧 (dl.date) ──────────────────── */
  /* ※ 既存 styles.css が dl.date にマーカー画像(▶アイコン)を
     background で出して padding-left で退けているので
     padding-left は上書きしない。 */
  dl.date {
    display: block !important;
    margin: 0 !important;
    padding-top: 10px !important;
    padding-right: 4px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px dashed #d8d8d8;
    overflow: hidden;
    background-position: left 14px !important;
  }
  dl.date dt {
    display: block !important;
    float: none !important;
    width: auto !important;
    margin: 0 0 4px !important;
    padding: 0 !important;
    color: #888;
    font-size: 12px;
    background: none !important;
  }
  dl.date dd {
    display: block !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 14px;
    line-height: 1.6;
  }
  dl.date dd a {
    display: inline-block;
    padding: 2px 0;
  }

  /* ── フッター (#footer) ──────────────────────── */
  /* 子要素の float / position をリセットしつつ、左寄せに揃える */
  #footer,
  #footer * {
    float: none !important;
    text-align: left !important;
  }
  #footer {
    position: relative !important;
    margin: 32px 0 0 !important;
    padding: 18px 12px !important;
    width: auto !important;
    background-position: left top !important;
  }
  #footer .copyright,
  #footer .copyright * {
    display: inline-block;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 12px;
    line-height: 1.8;
    color: #666;
  }
  #footer .copyright {
    display: block !important;
    margin: 0 !important;
    text-align: left !important;
  }
  #footer .copyright .privacy {
    margin-right: 12px !important;
  }

  /* JPRS サイトシール — インラインstyleで
     position:absolute; margin:-20px 0 0 800px のように
     画面外に飛ばされているのを打ち消して、左下に小さく表示 */
  #footer > div[style],
  #footer div[style*="absolute"],
  #footer div[style*="margin"] {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin: 12px 0 0 !important;
    padding: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    text-align: left !important;
    display: block !important;
  }
  #footer > div[style] a,
  #footer > div[style] img,
  #footer div[style*="absolute"] a,
  #footer div[style*="absolute"] img {
    display: inline-block !important;
    margin: 0 !important;
    float: none !important;
    max-width: 100px;
    height: auto;
  }

  /* ── 文字サイズ全般 ──────────────────────────── */
  body {
    font-size: 14px;
    line-height: 1.7;
    -webkit-text-size-adjust: 100%;
  }
  h1, h2, h3 {
    font-size: 1.15em;
    line-height: 1.4;
  }

  /* ── タッチターゲット ────────────────────────── */
  a, button { min-height: 32px; }
}


/* ============================================================
   ▼▼▼ 小型スマホ (420px 以下) の微調整 ▼▼▼
   ============================================================ */
@media screen and (max-width: 420px) {
  #head .logo img { max-height: 28px; }
  body { font-size: 13.5px; }
  dl.date { padding: 9px 2px !important; }
}