@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）

   これまではスマートフォン用に別テーマ（aida-sp）を用意し、
   WordPressが機種を見て振り分けていた。静的化するとその判定ができない。
   そこで、1つのHTMLが画面幅に合わせて並び替わる形にした。

   既存のCSSは書き換えず、このファイルで上から当てている。
   外せば元の見た目に戻る。
   =================================================================== */

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

/* 横に長い表は、その枠の中だけで横スクロールさせる */
.scroll-x{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* ===================================================================
   1240px以下：外枠の固定幅を外す
   =================================================================== */
@media screen and (max-width:1240px){
  #rap, #content, .section, #top-navi, #header, #footer,
  .top-voice-list ul, .top-about, ul.top-result-list,
  #content-one, #casestudy-content, .voice-detail,
  .description p, #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;
  }
  #top-navi{ max-width:1140px; }
  #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;
  }
  #header-contact-text{ width:auto !important; }

  /* ヘッダー */
  #header{ height:auto !important; padding:12px 16px !important; text-align:center; }
  #header-tel{ float:none !important; margin:10px 0 0 !important; }
  #header-tel dt, #header-tel dd{ float:none !important; display:inline-block; }
  #logo{ float:none !important; margin:0 auto !important; }

  /* メニューを折り返す。
     サイトによって #global-menu に width:1080px と負のマージンが
     入っており（cp-home.jp）、そのままだと画面からはみ出す。 */
  #global-menu{
    height:auto !important;
    width:auto !important;
    max-width:100% !important;
    margin:0 !important;
    box-sizing:border-box;
  }
  #global-menu ul{
    display:flex; flex-wrap:wrap; width:auto !important;
    height:auto !important; margin:0 !important; padding:0 8px !important;
  }
  #global-menu li{
    float:none !important; display:flex; flex:1 1 33.333%;
    min-width:33.333%; background-image:none !important;
    width:auto !important; margin:0 !important;
  }
  #global-menu li a{
    display:flex; align-items:center; justify-content:center;
    width:100% !important; height:auto !important;
    padding:12px 4px !important; font-size:13px; line-height:1.4;
    text-indent:0 !important; background-image:none !important;
    color:#2c3540; text-decoration:none; border:1px solid #eef1f4;
  }

  /* 一覧もの（事例・お客様の声）を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;
  }

  /* フッター */
  #footer td, #footer-block td{ display:block; width:auto !important; }
}

/* ===================================================================
   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;
  }

  #global-menu li{ flex:1 1 50%; min-width:50%; }
  #global-menu li a{ font-size:12.5px; padding:11px 4px !important; }

  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;
  }

  /* 電話番号を押しやすく */
  #header-tel a, .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）
   画面より広い固定幅の部品を、画面に収める
   =================================================================== */
@media screen and (max-width:900px){

  /* ロゴ：背景画像＋text-indent で組まれているため、
     幅を縮めると画像も縮むよう background-size を指定する */
  #logo, #logo a{
    width:100% !important;
    max-width:300px !important;
    height:auto !important;
    aspect-ratio:429 / 111;
    background-size:contain !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;
    margin:0 auto !important;
    display:block !important;
  }

  /* ボタン類（400〜500px固定） */
  .top-bt, .bt-link, .bt-link a,
  #header-contact, #header-contact p, #header-contact a,
  .link-style, .contact-bt{
    width:auto !important;
    max-width:100% !important;
    box-sizing:border-box;
  }
  /* ボタンの見た目は末尾の「ボタン」節で一括指定する */

  /* 中身が固定幅の入れ物すべてに効かせる保険 */
  #contents *, #rap *, .section *{
    max-width:100%;
  }
  /* ただし表のセルは除く（横スクロールで見せるため） */
  table, table *{ max-width:none; }
}

@media screen and (max-width:620px){
  #logo, #logo a{ max-width:240px !important; }
}

/* ===================================================================
   追補2（2026-10-22）
   ヘッダーの中身が全て絶対配置で、親は overflow:hidden・高さ24px。
   そのままだとロゴも電話番号も隠れてしまうので、
   狭い画面では通常の流れに戻して縦に積む。
   =================================================================== */
@media screen and (max-width:900px){
  #header{
    position:static !important;
    height:auto !important;
    min-height:0 !important;
    overflow:visible !important;
    padding:16px !important;
    text-align:center;
    background-image:none !important;
  }
  #header > *{
    position:static !important;
    top:auto !important; left:auto !important; right:auto !important; bottom:auto !important;
    width:auto !important;
    margin:0 auto !important;
    float:none !important;
  }
  #logo{
    margin:0 auto 12px !important;
    text-indent:-9999px;          /* 画像で見せる仕組みは残す */
  }
  #header-contact-text{
    font-size:12.5px; line-height:1.7; color:#444;
    margin-bottom:10px !important;
  }
  #header-tel{ margin-bottom:10px !important; }
  #header-tel dt, #header-tel dd{
    display:inline-block; vertical-align:middle; margin:0 4px !important;
  }
  #header-contact{ display:block !important; }
}

/* ===================================================================
   追補3（2026-10-22）
   残っていた固定幅の部品を画面に収める
   =================================================================== */
@media screen and (max-width:900px){
  /* フッターの情報欄（1040px固定） */
  #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; }

  /* 事例の見出し。
     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;
  }
  .section-casestudy-header{ text-align:center; }

}

/* ===================================================================
   ボタン（2026-10-22）

   元のサイトは、親の枠（.bt-link）に色を敷き、中のリンクは文字だけ、
   という組み方。色は箇所ごとに3種類（#17B5B2 / #ff0066 / #185AA9）
   あった。そこへ別の指定が重なって見た目が揃わなくなっていたので、
   ボタンの指定はこの一節だけにまとめ、色も1つに統一する。

   色は、もともといちばん多く使われていた #17B5B2。
   角丸も元のまま 20px。
   =================================================================== */
@media screen and (max-width:900px){

  /* 枠：絶対配置をやめ、画面の中央に置く。色は中のリンク側で持つ */
  .top-bt, .bt-link, #header-contact{
    position:static !important;
    top:auto !important; left:auto !important; right:auto !important;
    width:auto !important; max-width:100% !important;
    margin:14px auto !important;
    padding:0 !important;
    text-align:center !important;
    background:none !important;
    border-radius:0 !important;
    box-shadow:none !important;
  }

  /* リンク本体：すべてのボタンがこれ1つで同じ見た目になる */
  .top-bt a, .bt-link a, #header-contact a{
    display:inline-block !important;
    width:auto !important; max-width:100% !important;
    box-sizing:border-box;
    padding:13px 30px !important;
    text-indent:0 !important;
    background-image:none !important;
    background-color:#17B5B2 !important;
    color:#fff !important;
    border-radius:20px;
    font-weight:bold;
    font-size:15px;
    text-decoration:none !important;
    white-space:normal;
    line-height:1.5;
    text-align:center !important;
  }
  .top-bt a:hover, .bt-link a:hover, #header-contact a:hover{
    background-color:#13a09d !important;
    color:#fff !important;
  }
}

/* ===================================================================
   追補4（2026-10-22）
   高さを固定していた箱を開ける

   PC版は、箱の高さを数値で決めて、中身を絶対配置で置く組み方だった。
   画面が狭いと中身のほうが高くなり、次の部品が上に重なる。
   ここで高さの固定を外し、中身の分だけ伸びるようにする。
   =================================================================== */
@media screen and (max-width:900px){

  /* 上部の説明帯。
     PC版は絶対配置でページ最上部に置いていた。流れの中に戻すと
     HTMLの順どおりヘッダーの下に出てしまうので、
     外枠を縦並びにして、帯だけ先頭に回す。 */
  #header-block{
    display:flex !important;
    flex-direction:column !important;
  }
  .description{
    order:-1;
    position:static !important;
    top:auto !important; left:auto !important;
    width:auto !important; max-width:none !important;
    height:auto !important;
    min-height:0 !important;
    overflow:visible !important;
    padding:8px 16px !important;
    box-sizing:border-box;
  }
  .description p{
    text-align:center !important;
    font-size:12px !important;
    line-height:1.5 !important;
    margin:0 !important;
  }

  /* ヘッダーの外枠（145px固定）。ボタンが下の画像に潜っていた原因 */
  #header-block{
    height:auto !important;
    min-height:0 !important;
    padding-top:0 !important;
    overflow:visible !important;
  }

  /* グローバルメニューの外枠（41px固定） */
  #global-menu, #global-menu ul, #global-menu li, #global-menu li a{
    height:auto !important;
    overflow:visible !important;
  }

  /* フッター（1040px固定） */
  #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; }
}


/* ===================================================================
   ヒーロー（2026-10-22）
   =================================================================== */
@media screen and (max-width:900px){
  /* トップの大きな帯。PC用の画像は2000×422の横長で、
     375pxに縮めると文字が読めない。スマートフォン用テーマの画像に差し替える。 */
  #top-img-back{
    /* スマートフォン用テーマ（aida-sp）が使っていた縦長の画像に差し替える。
       520×607。写真と説明カードが1枚に収まっていて、
       その上にボタンだけを重ねる作りだった。本番と同じ比率で置く。 */
    background-image:url('images/sp-top-back.png') !important;
    background-size:100% auto !important;
    background-position:50% 0 !important;
    background-repeat:no-repeat !important;
    background-color:#fff !important;
    padding:0 !important;
    margin:0 !important;
    overflow:visible !important;
    /* 元のCSSに height:422px があり、中身より低くて下端が切れていた。
       中身（#top-navi の余白）に合わせて伸びるようにする。 */
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    box-sizing:border-box;
  }
  #top-navi{
    position:static !important;
    width:auto !important;
    height:auto !important;
    text-indent:0 !important;
    /* 上の余白で、ボタンをカードの中に落とす（本番は 480/520 = 92.3%）。
       下の余白で、画像の残り（カードの下端）を見せる。 */
    padding:92.3% 0 11.5% !important;
    text-align:center;
  }
  /* 見出しと説明文は画像の中に入っているので、二重に出さない */
  #top-navi > h2, #top-navi > p{
    display:none !important;
  }
  #top-navi .top-bt{
    margin:0 auto !important;
  }



}
/* ===================================================================
   ヒーローの寸法合わせ（2026-10-22）
   ボタンの指定より後ろに置く必要があるため、ここにまとめた。
   本番のスマートフォン版（520px幅）と同じ比率にする。
   =================================================================== */
@media screen and (max-width:900px){
  /* 本番は幅400/520＝76.9%。これだけの幅があれば文字が1行に収まる */
  #top-navi .top-bt a{
    width:76.9% !important;
    max-width:400px !important;
  }
  /* 枠の余計な余白を消す。ボタンの位置が下にずれていた */
  #top-navi .top-bt, #top-navi .bt-link{
    margin:0 auto !important;
    padding:0 !important;
  }
}

/* ===================================================================
   ページ送り（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; }
}

/* ===================================================================
   事例セクションの写真（2026-10-22 あいだDESIGN）

   PC版は「右に写真・左に文字」という配置で、文字側に
   padding-right:550px を取って写真を避けていた。
   狭い画面ではその余白を外したため、文字が写真に重なって読めなくなった。

   スマートフォンでは、写真を画面いっぱいに上へ置き、
   文字はその下に出す。
   =================================================================== */
@media screen and (max-width:900px){
  .section-casestudy{
    background-size:100% auto !important;
    background-position:50% 0 !important;
    background-repeat:no-repeat !important;
    /* 写真の高さぶん（70.7%）の余白を上に取る */
    padding-top:70.7% !important;
  }
  .section-casestudy-header{
    padding-top:18px !important;
    padding-bottom:4px !important;
  }
}