/*-----------------------------------------------------
 ヘッダー
 ------------------------------------------------------*/

/* ヘッダー枠 */
.header {
  background-color: white;
}

/* ヘッダーのインナー */
.header-inner {
  display: flex;
}

/*-----------------------------------------------------
 ロゴ（画像サイズ 180px * 60px）
 ------------------------------------------------------*/

/* ロゴ */
.logo {
  flex-basis: 200px;
  padding: 0;
}

/* ロゴ画像 */
.logo img {
  height: 70px;
  width: auto;
  vertical-align: bottom;
}

/*-----------------------------------------------------
 ナビゲーション
 ------------------------------------------------------*/

/* ナビゲーション */
.p-nav {
  flex-grow: 1;
}

/* ナビゲーションの各項目 */
.p-nav-item {
  height: 70px;
  color: #333333;
}

/* ナビゲーションの各項目ホバー時 */
.p-nav-item a:hover {
  color: #aaaaaa;
}

/* 項目（日本語） */
.nav-ja {
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.3;
}

/* 項目（英語） */
.nav-en {
  font-size: .75rem;
  font-weight: 600;
}

/* 訪問中のナビゲーション */
.nav-visiting {
  color: #aaaaaa;
}

/* ハンバーガーメニュー */
.humberger {
  display: none;
}

/*-----------------------------------------------------
 1280pxより大きいウィンドウ幅
 ------------------------------------------------------*/

@media only screen and (min-width: 1281px) {
  /* 標準のスタイル */
}

/*-----------------------------------------------------
 1280px以下、768px以上のウィンドウ幅
 ------------------------------------------------------*/

@media only screen and (max-width: 1279px) and (min-width: 768px) {

  /* 標準のスタイル */
}

/*-----------------------------------------------------
 768px未満のウィンドウ幅
 ------------------------------------------------------*/

@media only screen and (max-width: 767px) {

  /*-----------------------------------------------------
    ヘッダー
    -----------------------------------------------------*/

  /* ヘッダーのインナー */
  .header-inner {
    height: 70px;
    width: 100%;
  }

  /*-----------------------------------------------------
    ロゴ（画像サイズ 180px * 60px）
    -----------------------------------------------------*/

  /* ロゴ */
  .logo {
    min-width: none;
    width: 98%;
    margin: 0 auto;
    flex: auto;
  }

  /* ロゴのコンテンツ */
  .logo .content {
    width: 100%;
    text-align: center;
  }

  /* ロゴ画像 */
  .logo img {
    height: 56px;
    width: auto;
    margin-left: -3%;
    vertical-align: bottom;
  }

  /* ナビゲーション */
  .p-nav {
    width: 67.08%;
    position: fixed;
    left: -67.08%;
    padding-top: 115px;
    background-color: #333333;
    opacity: .9;
    height: 100%;
    z-index: 1;
    -webkit-transition-property: left;
    transition-property: left;
    -webkit-transition-duration: .4s;
    transition-duration: .4s;
  }

  /* ナビゲーションのリスト */
  .p-nav ul {
    display: block;
  }

  /* ナビゲーションの先頭の項目 */
  .p-nav ul:first-child {
    border-top: 1px solid #cccccc;
  }

  /* ナビゲーションの各項目 */
  .p-nav-item {
    color: #ffffff;
    border-bottom: 1px solid #cccccc;
  }

  /* サークルハンバーガー枠 */
  .humberger {
    display: block;
    height: 0;
  }

  /* サークルハンバーガー */
  .humberger img.element {
    background-color: #ffffff;
    border-radius: 50%;
    cursor: pointer;
    position: fixed;
    width: 50px;
    height: 50px;
    right: 14px;
    top: 12px;
    z-index: 10000;
    opacity: .9;
  }

  .message-title .origin {
    color: white;
  }
  
}