/* =========================================================
   共通サイドバー（全ページ共通部品）
   Illustrator「sidebar-pc/sidebar-pc.svg」（276px幅）の実寸をそのまま再現
   各ボタンはデザインPNGから切り出した画像（2倍解像度）＋alt
   ========================================================= */

.aasb{
  width:276px;
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  /* ★2026/09/01 和田さん指示：サイドバーを1つの独立した部品にする。
     本文の絵（sec8-troubles.png など）がサイドバーの下まで広がっているため、
     白い下地を敷いて、絵が透けないようにする。
     これでサイドバーは本文に引っ張られない。 */
  /* ★2026/09/03：!important が要る理由（実測で判明）
     company.css の「.cmp *{box-sizing:border-box}」が、この .aasb より後に読まれるため、
     詳細度が同じで後勝ちになり、サイドバーが border-box に変わってしまっていた。
     その結果、中身が276→248pxに縮み、ボタン画像（276px固定）が右に14pxはみ出していた。
     company.css は他ページの本文で使うので触らず、こちらで固定する。 */
  box-sizing:content-box !important;  /* padding のぶんは外側へ広げる（中身の276pxは変えない） */
  position:relative;
  z-index:5;
  background:#fff;
  padding:0 14px 16px;    /* 実測：本文の絵が左に8px・下に10px はみ出すので、その分を白で覆う */
  margin:0 -14px -16px;   /* 覆ったぶんを打ち消して、見た目の位置は変えない */
}
.aasb *{box-sizing:border-box;}
.aasb a{
  display:block;
  line-height:0;
  transition:opacity .2s;
}
.aasb a:hover{opacity:.85;}
.aasb img{
  display:block;
  width:276px;
  height:auto;
}
/* ブロックの間隔（デザイン実測 約5px） */
.aasb a + a{margin-top:5px;}
/* 「よくある質問」の前だけ少し広い */
.aasb .aasb__faq{margin-top:10px;}

/* スマホでは出さない（フッターの中に入るため・全ページ共通ルール） */
@media (max-width:768px){
  .aasb{display:none;}
}