@charset "UTF-8";
/*
 * カスタム (custom.css)        2018/12/19
 */

/* ===========================================================
   ★ パソコン・タブレット表示サイズ
=========================================================== */
@media only screen and (min-width: 420px), print {

  /* ★ ヘッダー ★ */
  /* ■会社名画像のサイズ
      ●width: 横幅 (max: 340px)
      ●height:縦   (max: 109px)
      ●margin-top：画像の縦位置調整
  */
  #top_company a.company_logo {
    width:  120px;
    height: 100px;
    background-image: url(/image/header/company_logo.png); background-repeat: no-repeat;
    margin-top: 10px; margin-left: 40px;
  }
  /* ■電話番号 */
  #top_tel        { padding-top: 20px; }
  /* ■電話番号前の画像 */
  #top_tel:before { content: url(/image/header/top_tel.png); display: block; width: 101px; float:left }
  /* ■メニュー下画像背景
      (header02)
    　●height:画像の大きさ(縦)   (min: 126px)
      (header02_img)
      ●height:縦 header02の height - 6 を設定
  */
  #header.index #header02_img.normal  {
    background-image: url(/image/index/bg_header_img_1.png); background-repeat: no-repeat;
  }
  #header.index #header02_img         { top: 0; }
  #header.index #header02_content,
  #header02_img,
  #header02 .slider_area              { height: 335px; }
  #header.sub #header02_content       { height: 300px; }

  /*------ ★ 右サイド ★ ------*/
  /* TOP サイドメニューの縦の長さを指定 */
  #page.index #side_right > div { text-align: center; }
  #page.index #side_right #trouble .title {
    color: #FFFFFF; background-color: #888888; font-weight: bold;
    width:207px; margin: 0 auto 5px;
  }
  /* 共通 サイドメニュー */
  #side_right #trouble,
  #side_right #campaign,
  #side_right #contact  { text-align: center; }
  #side_right #trouble .title {
    color: #FFFFFF; background-color: #888888; font-weight: bold;
    width:207px; margin: 0 auto 5px;
  }
  /* バナー(電話番号)
    height: 画像の高さ */
  #banner_contact               { height: 117px; }
  /* 電話番号バナー画像に入れる文字の位置・文字装飾
     top: バナー画像の上端からの位置  left: バナー画像の左端からの位置
  */
  /* お問合せはお気軽に！ */
  #banner_contact span.title    { top: 11px; left:  9px; font-size: 16px; font-weight: bold; color: #666666; width: 175px; text-align:center;  border-bottom: solid 1px #EEEEEE; }
  /* 電話番号 */
  #banner_contact span.tel      { top: 37px; left: 46px; font-size: 17px; font-weight: bold; color: #0066CC; }
  /* 営業時間等 */
  #banner_contact span.comment1 { top: 57px; left: 40px; font-size: 10px; font-weight: bold; color: #000000; }
  /* (画像)電話 t:41 l:12 */
  #banner_contact span.img_tel  { top: 41px; left: 12px; }
  /* (画像)メールでのお問合せはこちら */
  #banner_contact span.img_btn  { top: 78px; left: 10px; font-size: 10px; font-weight: bold; color: #FFFFFF; height: 28px; width: 170px; background-image: url(/image/side_right/contact_banner_btn.png); background-repeat: no-repeat; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 6px 0 0 7px; }

  #side_menu .title     {
    background-image: url(/image/side_right/side_menu_title.png); background-repeat: no-repeat;
  }
  #side_menu .title .side_title       { color: #656464; }

  #side_menu01 .act     { background-color: #399CB9; } /* lightblue */
  #side_menu02 .act     { background-color: #87B828; } /* green     */
  #side_menu03 .act     { background-color: #E89112; } /* orange    */
  #side_menu04 .act     { background-color: #BF0008; } /* red       */
  #side_menu05 .act     { background-color: #0066CC; } /* blue      */
  #side_menu06 .act     { background-color: #8F0881; } /* purple    */

  #side_menu_title01    { border-color: #399CB9; }     /* lightblue */
  #side_menu_title02    { border-color: #87B828; }     /* green     */
  #side_menu_title03    { border-color: #E89112; }     /* orange    */
  #side_menu_title04    { border-color: #BF0008; }     /* red       */
  #side_menu_title05    { border-color: #0066CC; }     /* blue      */
  #side_menu_title06    { border-color: #8F0881; }     /* purple    */

  .side_title_mini01    { color: #399CB9; }            /* lightblue */
  .side_title_mini02    { color: #87B828; }            /* green     */
  .side_title_mini03    { color: #E89112; }            /* orange    */
  .side_title_mini04    { color: #BF0008; }            /* red       */
  .side_title_mini05    { color: #0066CC; }            /* blue      */
  .side_title_mini06    { color: #8F0881; }            /* purple    */

  #page.sub #side_menu .cont a    { color: #000000; }
  #page.sub #side_menu .cont .act { color: #FFFFFF; }

  #side_menu01 a:hover  { background-color: #BDEFFE; }
  #side_menu02 a:hover  { background-color: #E4FBB5; }
  #side_menu03 a:hover  { background-color: #FCDEB1; }
  #side_menu04 a:hover  { background-color: #FFC9CC; }
  #side_menu05 a:hover  { background-color: #BBDBFC; }
  #side_menu06 a:hover  { background-color: #FEBFF8; }

  #page.sub #side_menu .cont         {
    color: #000000; background-image: url(/image/side_right/side_menu_bk.png); background-repeat: repeat-y;
  }
  #page.sub #side_menu .cont .act    { color: #FFFFFF; }
  #page.sub #side_menu .cont a       { color: #000000; }
  #page.sub #side_menu .cont a:hover { color: #000000; }

}

/* ===========================================================
 　★ スマートフォン表示サイズ
=========================================================== */
@media only screen and (max-width: 419px) {

  /*------ ★ ヘッダー ★ ------*/
  #top_company a.company_logo    {
    width: 270px; height: 60px; padding: 0;
    background-image: url(/image/sp/header/company_logo_sp.png); background-repeat: no-repeat;
  }
  #header.index #header02_img_sp {
    max-width: 100%; height: 160px; margin: 0 auto;
    background-image: url(/image/sp/index/bg_header_img_1.png); background-repeat: no-repeat;
  }

  #page.sub .sp_width300 img    { max-width: 300px; }


  #global_bt01:before { content: "お知らせ"; }
  #global_bt02:before { content: "サービス案内"; }
  #global_bt03:before { content: "会社概要"; }
  #global_bt04:before { content: "よくあるご質問"; }
  #global_bt05:before { content: "お問合せ"; }

  /*------ ★コンテンツ★ ------*/
  #page.index #side_right > div       { text-align: center; }
  #page.index #side_right #trouble    { margin-bottom: 20px; }

  /* 地図の中の文字 */
  .map_area #company_map_sp .comment  { font-weight: bold; color: #A24242; }

}