@charset "Shift_JIS";

/* Reset */
* {
  box-sizing: border-box;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Company table */
.company-table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 16px;
}

.company-table th {
  background: #f0f0f0;
  padding: 12px;
  width: 30%;
  border: 1px solid #ccc;
  text-align: left;
}

.company-table td {
  background: #ffffff;
  padding: 12px;
  border: 1px solid #ccc;
}

/* Smartphone */
@media screen and (max-width: 768px) {
  body {
    font-size: 15px;
    line-height: 1.6;
  }

  .company-table th,
  .company-table td {
    font-size: 15px;
    padding: 10px;
  }

  img {
    max-width: 100%;
  }

  #hpb-nav {
    display: block !important;
  }

  #hpb-main,
  #hpb-inner,
  #hpb-wrapper {
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* Banner fix */
#banner a {
  display: block;
  padding: 6px 4px;
  text-align: center;
}

#banner ul {
  padding-left: 0 !important;
  margin: 0;
}

#banner li {
  list-style: none;
  margin-bottom: 6px;
}

/* Table force override */
.hpb-cnt-tb1 th,
.company-table th {
  background: #f0f0f0 !important;
  border: 1px solid #ccc !important;
  padding: 10px !important;
  text-align: left !important;
  vertical-align: top !important;
}

.hpb-cnt-tb1 td,
.company-table td {
  background: #ffffff !important;
  border: 1px solid #ccc !important;
  padding: 10px !important;
  vertical-align: top !important;
}
/* =============================
   ▼ 代表挨拶・企業理念・会社沿革の枠線
   ============================= */

/* 見出し（h3）の下のブロックごと囲む */
.section-box {
  border: 2px solid #333;     /* 枠線（黒） */
  padding: 20px;
  margin-bottom: 30px;
  background: #ffffff;        /* 白背景で見やすく */
  border-radius: 4px;         /* 少し角丸（不要なら削除OK） */
}

/* 見出しを強調（必要なら） */
.section-box h3 {
  margin-top: 0;
  padding-bottom: 8px;
  border-bottom: 1px solid #ccc;
}
/* ===============================
   スマートフォンでメニュー強制表示
   =============================== */
@media screen and (max-width: 768px) {

  /* ナビゲーションボックスを表示 */
  #hpb-nav {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    opacity: 1 !important;
  }

  /* タイトル（メニュー見出し） */
  #hpb-nav h3 {
    display: block !important;
    visibility: visible !important;
    font-size: 18px !important;
    padding: 10px 0 !important;
  }

  /* メニューボタン一覧（ul） */
  #hpb-nav ul {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #hpb-nav ul li {
    display: block !important;
    margin: 10px 0 !important;
    list-style: none !important;
  }

  #hpb-nav ul li a {
    display: block !important;
    padding: 12px 6px !important;
    font-size: 16px !important;
    text-decoration: none !important;
  }
}
/* =============================
   スマホで内見・引越しページのはみ出し防止
   ============================= */

/* ページ全体の横スクロール防止 */
body {
  overflow-x: hidden;
}

/* 画像をスマホ幅に合わせる */
#hpb-main img,
#hpb-mainimage img,
.hpb-mainbox img,
.hpb-image img {
  max-width: 100% !important;
  height: auto !important;
}

/* テーブルがはみ出すのを防ぐ */
#hpb-main table {
  width: 100% !important;
  display: block !important;
  overflow-x: auto !important;
  border-collapse: collapse;
}

#hpb-main table th,
#hpb-main table td {
  word-break: break-word;
  padding: 8px;
}
/* 内見・引越しページの強制スマホ対応 */
.element,
.element img {
  max-width: 100% !important;
  width: 100% !important;
  height: auto !important;
}

/* インラインstyleの width:660px; を打ち消す */
div[style*="width:660px"] {
  width: 100% !important;
}
/* ================================
   スマホ：写真と文字のバランス調整
   ================================ */
@media screen and (max-width: 768px) {

  /* 写真全体の見やすさを調整 */
  .element img,
  img {
    max-width: 90% !important; /* 少し余白を残して中央に */
    height: auto !important;
    display: block;
    margin: 12px auto;  /* 上下の余白＋中央寄せ */
  }

  /* 文章の行間と余白 */
  .element p,
  .element,
  #hpb-main p,
  #hpb-main {
    line-height: 1.8;
    margin-bottom: 14px;
    padding-left: 4px;
    padding-right: 4px;
  }

  /* 画像の前後にしっかり余白 */
  .element img {
    margin-top: 18px !important;
    margin-bottom: 18px !important;
  }

  /* テキストと写真が詰まらないように */
  .element {
    margin-bottom: 18px !important;
  }
}
/* ================================
   スマホ：テキストの下に画像を配置
   ================================ */
@media screen and (max-width: 768px) {

  /* floatを解除して縦並びに */
  .hpb-mainbox-text,
  .hpb-mainbox-image {
    float: none !important;
    width: 100% !important;
    display: block !important;
  }

  /* テキスト → 画像 の順に並べる */
  .hpb-mainbox-text {
    order: 1 !important;
  }

  .hpb-mainbox-image {
    order: 2 !important;
  }

  /* Flexboxで順番制御 */
  .hpb-mainbox,
  .hpb-mainbox-inbox {
    display: flex !important;
    flex-direction: column !important;
  }

  /* 画像と文字の余白調整 */
  .hpb-mainbox-image img {
    margin-top: 15px !important;
    margin-bottom: 15px !important;
  }
}
/* スマホでは画像を下に配置（内見ページ） */
@media screen and (max-width: 768px) {
  /* 右側画像を解除して縦並びにする */
  .element-img-right {
    float: none !important;
    display: block !important;
    margin: 10px auto !important;
    padding: 0 !important;
    text-align: center !important;
  }

  /* テキスト部分を上に、画像は下へ */
  .element {
    width: 100% !important;
  }

  /* 画像のサイズ調整（はみ出し防止） */
  .element-img-right img {
    max-width: 95% !important;
    height: auto !important;
  }
}