@charset "utf-8";

/* ===================================================================
   フッターの4列（2026-10-22 あいだDESIGN）

   列の幅を決めていなかったため、ブラウザが文章量に応じて配分し、
   右の2列（Information・アクセス）が140px前後まで潰れていた。
   Information の写真は 200px → 110px、地図は 360px → 121px に
   縮んでいた。4列を同じ幅にそろえる。
   =================================================================== */
#footer-table{
  table-layout:fixed;
  width:100%;
}
#footer-table td{
  width:25%;
}
#footer-table img{
  max-width:100%;
  height:auto;
}
#footer-table iframe{
  display:block;
  width:100%;
  max-width:100%;
  height:180px;
  border:0;
}

/* ===================================================================
   レスポンシブ対応（2026-10-22 あいだDESIGN）  clean-pair.com 用

   このサイトは、ヘッダー・ヒーロー・事業カードを 2026-09〜10 に
   作り直してあり、その範囲はすでに画面幅に追従する。
   そこには一切触れない。

   手つかずで残っていたのは、本文・お知らせ・フッターの
   width:1040px 固定の部分。ここだけを画面に収める。

   既存の style.css / base.css は書き換えていない。
   読み込みを外せば元の見た目に戻る。
   =================================================================== */

/* ---- 共通：はみ出しを止める ---- */
html, body{ max-width:100%; overflow-x:hidden; }
img, video, iframe, embed, object{ max-width:100%; height:auto; }
table{ max-width:100%; }

/* ===================================================================
   1240px以下：本文まわりの固定幅を外す
   （#header / #header-block / .hero は新しい作りなので触らない）
   =================================================================== */
@media screen and (max-width:1240px){
  #rap, #content, .section, #footer,
  .top-voice-list ul, .top-about, ul.top-result-list,
  #content-one, #casestudy-content, .voice-detail,
  .top-news, #pankuzu p, #footer-block, #footer-contact-box{
    width:auto !important;
    max-width:1040px;
    margin-left:auto !important;
    margin-right:auto !important;
    padding-left:16px;
    padding-right:16px;
    box-sizing:border-box;
  }
  #casestudy-content, .voice-detail{ float:none !important; }
}

/* ===================================================================
   900px以下：段組みをやめる
   =================================================================== */
@media screen and (max-width:900px){

  /* 左右に分けていたものを縦に積む */
  .top-left, .top-right,
  .top-concept-mes .section-left, .top-concept-mes .section-right,
  .top-service .section-left, .top-service .section-right,
  #main, #sidebar, #content-left, #content-right{
    float:none !important;
    width:auto !important;
    max-width:none !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }

  /* 一覧もの（事例・お客様の声）を2列に */
  ul.top-result-list li, .top-voice-list ul li,
  li.service-navi, .resultmenu li{
    float:none !important; width:auto !important; margin:0 0 14px !important;
  }
  ul.top-result-list, .top-voice-list ul, .resultmenu{
    display:grid; grid-template-columns:repeat(2,1fr); gap:14px;
    width:auto !important; padding:0 !important;
  }

  /* お知らせ：日付と本文を縦に */
  .newslist dt{ float:none !important; width:auto !important; padding:10px 0 0 !important; }
  .newslist dd{ padding:2px 0 10px !important; }

  /* 回り込み画像 */
  .alignleft, .alignright{
    float:none !important; display:block; margin:0 auto 1em !important;
  }

  /* 事例の見出し。PC版は右に550pxの余白を取っていた */
  .section-casestudy-header, .section-header, .section-title{
    width:auto !important; max-width:100% !important;
    padding-left:0 !important; padding-right:0 !important;
    box-sizing:border-box; text-align:center;
  }

  /* 本文中のボタン（ヘッダーのボタンは新しい作りなので触らない） */
  .section .bt-link, .top-bt{
    position:static !important;
    top:auto !important; left:auto !important; right:auto !important;
    width:auto !important; max-width:100% !important;
    margin:14px auto !important;
    text-align:center !important;
  }
  .section .bt-link a, .top-bt a{
    display:inline-block !important;
    width:auto !important; max-width:100% !important;
    box-sizing:border-box;
    text-indent:0 !important;
    white-space:normal;
  }

  /* フッター */
  #footer td, #footer-block td{ display:block; width:auto !important; }
  #footer-info, #footer-info table, #footer-info td{
    width:auto !important; max-width:100% !important;
    display:block; box-sizing:border-box;
  }
  #footer-info td{ padding:8px 0 !important; }

  #footer-table{ display:block; }
  #footer-table td{ display:block; width:auto !important; }

  #footer-bottom, #footer-bottom *{
    width:auto !important; max-width:100% !important; box-sizing:border-box;
  }
  #bottom-navi{
    display:flex; flex-wrap:wrap; justify-content:center;
    gap:4px 14px; padding:0 16px !important; margin:0 !important;
  }
  #bottom-navi li{
    float:none !important; background-image:none !important;
    padding:0 !important; margin:0 !important; white-space:nowrap;
  }
  #copyright{ flex:1 1 100%; text-align:center; }

  /* 中身が固定幅の入れ物すべてに効かせる保険 */
  #contents *, #rap *, .section *{ max-width:100%; }
  table, table *{ max-width:none; }
}

/* ===================================================================
   620px以下：1列にする
   =================================================================== */
@media screen and (max-width:620px){
  body{ font-size:15px; line-height:1.85; }

  ul.top-result-list, .top-voice-list ul, .resultmenu{
    grid-template-columns:1fr;
  }

  h1, h2{ font-size:20px !important; line-height:1.55 !important; }
  h3{ font-size:17px !important; }

  /* 表は横スクロール */
  .basic-table, table.basic-table,
  .company-table, table.company-table{
    display:block;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    /* 住所などが1行に伸びて横スクロールが長くなるため、折り返して読ませる */
    white-space:normal;
  }

  .contact-info a{ font-size:19px; }

  #rap, #content, .section{ padding-left:14px; padding-right:14px; }
}

/* ===================================================================
   印刷
   =================================================================== */
@media print{
  #global-menu, #pankuzu, .pagetop{ display:none; }
  #rap, #content, .section{ width:auto !important; }
}

/* ===================================================================
   フッターのお問い合わせボタン（2026-10-22）

   #footer-contact-box の中のボタンが width:400px 固定で、
   さらに margin-right:-57px（中央寄せのための負の余白）が
   入っていたため、狭い画面で右にはみ出していた。
   ヘッダーのボタンは新しい作りなので触らない。
   =================================================================== */
@media screen and (max-width:900px){
  #footer-contact-box .bt-link{
    width:auto !important;
    max-width:100% !important;
    margin:30px auto !important;
    text-align:center;
    box-sizing:border-box;
  }
  #footer-contact-box .bt-link a{
    display:inline-block;
    max-width:100%;
    box-sizing:border-box;
    white-space:normal;
  }
}

/* ===================================================================
   ページ送り（2026-10-22 あいだDESIGN）

   見た目を付けていた wp-pagenavi-style は eregi を使っていて
   PHP8で動かず、公式からも消えている。プラグインを足さずに
   CSSで同じことをする。狭い画面では折り返す。
   =================================================================== */
.wp-pagenavi{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:6px;
  clear:both;
  margin:28px 0;
  padding:0;
  border:0;
}
.wp-pagenavi a,
.wp-pagenavi span{
  display:inline-block;
  min-width:38px;
  padding:9px 11px;
  box-sizing:border-box;
  border:1px solid #dfe5e9;
  border-radius:4px;
  background:#fff;
  color:#44525e;
  font-size:14px;
  line-height:1.2;
  text-align:center;
  text-decoration:none;
  transition:background-color .15s, border-color .15s;
}
.wp-pagenavi a:hover{
  background:#f2f7f8;
  border-color:#bccad2;
  color:#1f2b33;
}
.wp-pagenavi span.current{
  background:#44525e;
  border-color:#44525e;
  color:#fff;
  font-weight:bold;
}
/* 「1 / 6」や「…」は枠を付けない */
.wp-pagenavi span.pages,
.wp-pagenavi span.extend{
  border:0;
  background:none;
  color:#8a97a0;
  min-width:0;
  padding:9px 4px;
}

@media screen and (max-width:620px){
  .wp-pagenavi{ gap:5px; margin:22px 0; }
  .wp-pagenavi a,
  .wp-pagenavi span{ min-width:34px; padding:8px 9px; font-size:13px; }
  /* 狭い画面では「1 / 6」を畳んで、数字だけ見せる */
  .wp-pagenavi span.pages{ flex:1 1 100%; padding:0 0 4px; }
}