@charset "utf-8";
/* 共通設定 */
a {
  color: #000;
  text-decoration: none;
}

html{
  font-family: 'Roboto',"遊ゴシック",sans-serif,Arial,Helvetica,"lucida grande",tahoma,verdana,arial,"hiragino kaku gothic pro",meiryo,"ms pgothic";
}

body {
  padding: 0;
  margin: 0;
  background-color: #f0f0f0;
}

/* ヘッダー部 */
.container {
  max-width: auto;
  padding: 0 20px;
  margin: 0 auto;
  border-bottom: solid 1px #d2d2d2;
}

header {
  background: #fff;
}

header > .container {
  height: 60px;
  display: flex;
  align-items: center;
  max-width: none;
}
/* ヘッダーロゴエリア */
.area_logo_header .logo {
  display: block;
}
/* ヘッダーロゴイメージ */
.area_logo_header .logo img {
  width: 200px;
  height: 50px;
  vertical-align: bottom;
}
/* ナビゲーションエリア */
.area_nav_header {
  margin-left: auto;
}
/* リストエリア */
.list_nav_header {
  display: flex;
  align-items: center;
  margin-top: 15px;
  list-style: none;
}

.list_nav_header > li + li {
  margin-left: 40px
}
/* リストリンク */
.list_nav_header a {
  font-family: "游ゴシック",sans-serif;
  color: #d2d2d2;
  font-size:15px;
}
/* リストアクティブ時 */
.list_nav_header .active {
  color: #000 !important;
}
/* お知らせボタン */
.list_nav_header .btn_nav {
  color: #d2d2d2;
  display: flex;
  align-items: center;
  height: 36px;
  padding: 0;
  background: #fff;
  border-radius: 2px;
  position: relative;
}
/* ログアウトリンク */
.list_nav_header .btn_logout {
  color: #d2d2d2;
  display: flex;
  align-items: center;
  height: 36px;
  padding: 0 24px 0 48px;
  background: #fff;
  border-radius: 2px;
  position: relative;
}

.list_nav_header .btn_logout:before {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  background: url('data:image/svg+xml;charset=UTF-8,<svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="user" class="svg-inline--fa fa-user fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="%23d2d2d2" d="M313.6 304c-28.7 0-42.5 16-89.6 16-47.1 0-60.8-16-89.6-16C60.2 304 0 364.2 0 438.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-25.6c0-74.2-60.2-134.4-134.4-134.4zM400 464H48v-25.6c0-47.6 38.8-86.4 86.4-86.4 14.6 0 38.3 16 89.6 16 51.7 0 74.9-16 89.6-16 47.6 0 86.4 38.8 86.4 86.4V464zM224 288c79.5 0 144-64.5 144-144S303.5 0 224 0 80 64.5 80 144s64.5 144 144 144zm0-240c52.9 0 96 43.1 96 96s-43.1 96-96 96-96-43.1-96-96 43.1-96 96-96z"></path></svg>') no-repeat center center ;
  background-size: contain;
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translate(0,-50%);
}
/* リストマウスオーバ時 */
.list_nav_header a:hover {
  color: #000;
}
/* お知らせSVG画像 */
.list_nav_header .bell{
  fill: #d2d2d2;
  width:21px;
}
/* リンク下線 */
.list_nav_header a::after {
  position: absolute;
  bottom: -4px;
  left: 0;
  content: '';
  width: 100%;
  height: 2px;
  background: #333;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform .3s;
}
/* リンクマウスオーバ時アニメーション */
.list_nav_header a:hover::after {
  transform: scale(1, 1);
}
/* スマホ用ナビゲーション */
.navbar{
  display: none;
}
/* フッター */
footer{
  background-color: #fff;
  height: 40px;
  border-top: solid 1px #d2d2d2;
}
/* コピーライト */
small{
  font-family: 'Roboto', sans-serif;
}

/* --------------------------------------------------
  幅768px以下のスタイル指定
-------------------------------------------------- */
@media screen and (max-width: 768px) {

  header{
    overflow: hidden;
  }
  /* PC用ヘッダー */
  header > .container{
    display: none;
  }
  /* ナビゲーション */
  .navbar{
    display: flex;
    margin:10px;
  }

  /* ハンバーガーメニューリストエリア */
  .collapse{
    margin-top: 10px;
  }

    /* ハンバーガーメニュー */
  .navbar-light .navbar-toggler {
    color: rgba(0, 0, 0, 0.5);
    border: none;
    padding: 0px;
    width: 30px;
    height: 30px;
    box-sizing: border-box;
    position: relative;
  }

  /* ハンバーガーメニューアイコン */
  .navbar-light .navbar-toggler-icon {
    background-color: #fff;
    width: 30px;
    height: 2px;
    display: block;
    position: absolute;
    transition: ease .5s;
  }

  /* 3本のバーそれぞれの座標を設定 */
  .navbar-toggler-icon:nth-of-type(1) {top:7px;}
  .navbar-toggler-icon:nth-of-type(2) {top:14px;}
  .navbar-toggler-icon:nth-of-type(3) {top:21px;}

  /* メニューが開いている時の　3本のバーそれぞれの座標および角度を設定 */
  .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:nth-of-type(1) {
  top:13px;
  transform: rotate(45deg);
  }
  .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:nth-of-type(2) {
  opacity: 0;
  }
  .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:nth-of-type(3) {
  top:13px;
  transform: rotate(-45deg);
  }

  /* ナビゲーションリスト */
  ul .nav-item{
    border-bottom: solid 1px #d2d2d2;
    display: flex;
  }
  /* ナビゲーションリンク */
  .nav-item a{
    background-color:#fff;
    font-size: 14px;
    font-family: "遊ゴシック",sans-serif, Arial,Helvetica,"lucida grande",tahoma,verdana,arial,"hiragino kaku gothic pro",meiryo,"ms pgothic";
    padding-left: 10px !important;
  }

  /* フッター文字サイズ */
  footer small{
    font-size: 70%;
  }
  /* お知らせSVG画像 */
  .bell{
    width:17px;
	margin: 3px;
  }
}