@charset "Shift_JIS";

/*header.inc装飾用CSS*/
  header {
    width:100%; height:calc(6vw + 40px);
  }
  /* モバイル端末の場合 */
  @media only screen and (min-width: 640px) {
    header { height:78px; }
  }
  @media only screen and (max-width: 320px) {
    header { height:59px; }
  } 

  #header-top {
    position:relative;
    width:100%; height:6vw;
 }
  #header-logo {
    position:absolute; left:1%; bottom:8%;
    width:25%;
  }
  #header-name {
    position:absolute; right:1%; bottom:8%;
    width:calc(25% + 60px);
  }
  @media only screen and (min-width: 640px) {
    #header-top  { height:38px; }
    #header-logo { width:160px; }
    #header-name { width:220px; }
  }
  @media only screen and (max-width: 320px) {
    #header-top  { height:19px; }
    #header-logo { width: 80px; }
    #header-name { width:140px; }
  } 

/*スクロールメニュー*/
  header .scroll-menu {
    height: 40px;           /*メニューの縦幅*/
    overflow-x: scroll;
    overflow-y: hidden;
    background-color: #444; /*メニューの背景色*/

    -webkit-overflow-scrolling: touch;

    -ms-overflow-style: none;    /* IE, Edge 対応 */
    scrollbar-width: none;       /* Firefox 対応  */
  }
  header .scroll-menu::-webkit-scrollbar {display:none;}

  header .scroll-menu ul {
    width: 900px;
    margin: 0 auto;
    padding: 0;
    list-style-type: none;
    text-align: center;
  }
  header .scroll-menu li {
    float: left;
    margin:0px 18px;
  }
  header .scroll-menu a {
    display: block;
    line-height: 40px;
    padding: 0px 15px;
    font-size: 12px;
    color: #FFF;
    text-decoration: none;
  }
  header .scroll-menu a:hover {
    background-color: #555; /*マウスホバー時の背景色*/
  }

  @media only screen and (max-width: 899px) {
    header .scroll-menu li { margin:0px 0px; }
  }