/* =========================================================
   広島朝日広告社 HP レスポンシブ化 共通スタイル
   旧テーブルレイアウト(<table>)を <div class="tbl/tr/td"> に
   変換した上で、Flexboxで元の見た目を保ちながら
   画面幅に応じて自動的に折り返す構成にしています。
   ========================================================= */

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0;
  line-height: 1.7;
  word-break: break-word;
  overflow-x: hidden;
}

/* ページ全体を画面幅に合わせて中央寄せ。900pxまでは元デザイン通り */
body > .tbl:first-of-type,
body > .tbl {
  padding: 0 14px;
}

img { max-width: 100%; height: auto; vertical-align: middle; }

/* 画像に元々widthしか無く height が auto になっても崩れないように */
img[width][height] { height: auto; }

a { cursor: pointer; }

/* ---- 旧 table を置き換えた基本コンポーネント ---- */
.tbl {
  display: block;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.tr {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.td {
  min-width: 0;
  flex: 1 1 auto;
}

.td.align-center { text-align: center; }
.td.align-right   { text-align: right; }
.td.align-left    { text-align: left; }

.td.align-center > img,
.td.align-center > a > img { margin-left: auto; margin-right: auto; }
.td.align-right  > img,
.td.align-right  > a > img { margin-left: auto; }

.valign-top    { align-self: flex-start; }
.valign-bottom { align-self: flex-end; }

blockquote { margin: 0 0 0 1em; }

/* map(画像マップ)は最新ブラウザで座標が画像の表示サイズに合わせて
   自動的にスケーリングされるため、画像を可変にするだけでリンク領域も追従します */
img[usemap] { max-width: 100%; height: auto; }

/* ---- ナビゲーション(ヘッダー / フッター)の折り返し調整 ---- */
.nav-top-table { overflow: visible; }

/* youtube / Googleマップなどの固定サイズiframeをレスポンシブ化 */
.responsive-embed {
  position: relative;
  width: 100%;
  max-width: 853px;
  margin: 0 auto;
  padding-top: var(--ratio, 56.25%);
  height: 0;
  overflow: hidden;
}
.responsive-embed iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: 0;
}

/* 画像だけで構成された行(業務内容/お問い合わせのブロックや
   アイコン一覧)は、PC表示では左右の端をコンテナの両端に揃え、
   均等な間隔で並べる(ナビのボタン行は対象外) */
.img-row:not(.button-row) {
  justify-content: space-between;
}
.img-row:not(.button-row) > .td {
  flex: 0 0 auto;
  width: auto;
}

/* トップページのメイン写真：下のブロック(3枚横並び)と同じ幅まで
   拡大して、左右の端をぴったり揃える(やや余白を持たせて少し小さめに) */
img[src*="HP_TOP_2026.png"] {
  width: 92%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* トップページの3枚ブロック(会社理念/会社案内/業務内容、
   実績紹介/採用情報/お問合せ)：横幅いっぱいまで拡大し、
   ブロック間・写真との間は細い余白だけにする */
.tr.block-row {
  gap: 8px;
  margin: 8px auto;
  justify-content: flex-start;
  width: 92%;
}
.tr.block-row > .td {
  flex: 1 1 0 !important;
  width: auto !important;
}
.block-row img {
  width: 100%;
  height: auto;
  display: block;
}

/* スマホ表示：6つのブロックを2列×3段のグリッドに並べる。
   各ブロックは入れ子のtr/tbl/tdでラップされているため、
   グリッドの子要素として直接並ぶよう中間層をdisplay:contentsで無効化する */
@media (max-width: 760px) {
  .block-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 96%;
    margin: 8px auto;
  }
  .block-grid .tr,
  .block-grid .tbl,
  .block-grid .td:has(.tbl) {
    display: contents;
  }
  .block-grid .td:not(:has(.tbl)) {
    width: auto !important;
    flex-basis: auto !important;
    margin: 0 !important;
  }

  /* 会社理念ページ「考告彩新」：アイコンとコピーを横並びペアにする */
  .koukoku-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 14px;
    row-gap: 10px;
    align-items: center;
  }
  .koukoku-grid .tr {
    display: contents;
  }
  .koukoku-grid .td {
    width: auto !important;
    flex-basis: auto !important;
    margin: 0 !important;
    text-align: left !important;
  }
  .koukoku-grid .td:has(img):nth-child(1) { grid-row: 1; grid-column: 1; }
  .koukoku-grid .td:has(img):nth-child(2) { grid-row: 2; grid-column: 1; }
  .koukoku-grid .td:has(img):nth-child(3) { grid-row: 3; grid-column: 1; }
  .koukoku-grid .td:has(img):nth-child(4) { grid-row: 4; grid-column: 1; }
  .koukoku-grid .td:not(:has(img)):nth-child(1) { grid-row: 1; grid-column: 2; }
  .koukoku-grid .td:not(:has(img)):nth-child(2) { grid-row: 2; grid-column: 2; }
  .koukoku-grid .td:not(:has(img)):nth-child(3) { grid-row: 3; grid-column: 2; }
  .koukoku-grid .td:not(:has(img)):nth-child(4) { grid-row: 4; grid-column: 2; }
  .koukoku-grid .td img { width: 90px; height: auto; }
}

/* 会社理念ページ「考告彩新」：コピーは各ブロックの左に揃える */
/* 会社理念ページ「考告彩新」：アイコン行・コピー行の4列を常に均等幅にし、
   文章量の違いで列がズレたり、はみ出したりしないようにする */
.koukoku-grid .tr > .td {
  flex: 1 1 0;
  min-width: 0;
}

.koukoku-caption-inner {
  display: inline-block;
  text-align: left;
}

/* 会社理念ページ：考告彩新セクションと軌跡セクションの間の細い仕切り線 */
.thin-divider {
  border-top: 1px solid #ccc;
  margin: 28px auto;
  max-width: 700px;
}

/* 会社理念ページ「広島朝日広告社の軌跡」：文章の幅を写真(600px)に揃える */
.kiseki-content .td.align-left > blockquote {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.inlined-embed { width: 100%; }
/* 実績紹介ページ：PCでは写真を2列のバランス組みで流し込む */
.jisseki-flow {
  column-count: 2;
  column-gap: 24px;
}
.jisseki-item {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  padding-bottom: 14px;
}
.jisseki-item img {
  margin: 0 auto;
}

/* 会社理念・業務内容ページ：グレーの角カッコ画像だった枠を
   グレーの太い上下線に変更(文章の上下を挟むデザイン) */
.bracket-frame {
  border-top: 4px solid #818284;
  border-bottom: 4px solid #818284;
  padding: 22px 0;
  margin-top: 6px;
  margin-bottom: 6px;
  margin-left: auto;
  margin-right: auto;
}
/* 会社理念のあいさつ文・業務内容冒頭のコピー：ブロック全体はセンターに
   揃えつつ、各行は左揃え(改行位置はそのまま)にする */
.bracket-frame > .tr > .td.align-left {
  text-align: center;
}
.bracket-frame > .tr > .td.align-left > blockquote {
  display: inline-block;
  text-align: left;
}

/* ヘッダー：ロゴ＋上部ナビ行はロゴの下端に揃える。上下に余白を追加 */
.site-header-row {
  align-items: flex-end;
  padding-top: 18px;
  padding-bottom: 18px;
}
.site-header-row p {
  margin: 0;
}
/* 「採用情報」「お問合せ」ボタン画像は他のボタン(80px幅)より
   幅が狭く文字が小さく見えるため、PC表示では幅を揃える
   (モバイル表示は button-row 側の縮小ルールで既に統一されている) */
@media (min-width: 761px) {
  .site-header-row img[src*="saiyou-jyouhou"],
  .site-header-row img[src*="otoiawase"] {
    width: 80px;
    height: 34px;
  }
}

/* ---- レスポンシブブレークポイント ----
   タブレット・スマホ幅では、すべての「行(.tr)」を縦積みにして
   1カラムの読みやすいレイアウトへ自動的に組み替えます。
   画像・ボタン・地図画像などのデザイン要素はそのまま、
   並び順だけがモバイル向けに最適化されます。               */
@media (max-width: 760px) {
  .tr:not(.button-row) { flex-direction: column; }
  .tr:not(.button-row) > .td { width: 100% !important; flex-basis: auto !important; }
  .td.align-right { text-align: center; }

  /* 画像だけで構成された行(業務内容/お問い合わせ等のリンクブロックや
     アイコン一覧)は、元テーブルのalign-right/center/leftに関わらず
     1カラム表示時は中央揃えに統一する */
  .img-row > .td.align-left,
  .img-row > .td.align-right,
  .img-row > .td.align-center,
  .img-row > .td {
    text-align: center !important;
  }

  /* ナビ／メニューのボタン画像行は横並びのまま折り返す */
  .button-row {
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px;
  }
  .button-row > .td {
    flex: 0 0 auto !important;
    width: auto !important;
  }
  .button-row img { height: 30px; width: auto; }

  .jisseki-flow { column-count: 1; }
}

@media (max-width: 420px) {
  .button-row img { height: 24px; }
}

/* iframe(お問い合わせフォーム等)は最大幅を保ちつつ可変に */
iframe { max-width: 100%; }