header {
  display: flex;
  background: #ffffff;
}
.main-menu {
  margin: 0 auto;
  display: flex;
  width: 100%;
}

.pc-menu {
  width: 100%;
}

.news-menu {
  width: 60%;
  display: inline-block;
}

@media screen and (max-width: 767px) {
.news-menu {
  width: 90%;
  display: inline-block;
}
}

/* 画面サイズが767px以下の時はPC用メニューは非表示 */
@media screen and (max-width: 767px) {
  .pc-menu {
    display: none;
  }
}

.pc-menu > ul {
  margin:0;
  padding:0;
}
.pc-menu > ul > li {
  list-style: none;
  border-right: 1px solid #fff;
  margin:0;
  padding:0;
  font-size:16px;
  float: left;
  position: relative;
  width: 14%;/*親メニューの幅*/
  height: 50px;/*親メニューの高さ*/
  line-height: 50px;
  background:#bdde76; /*親メニューの背景色*/
  color: #4D4D4D;/*親メニューの文字色*/
  text-align:center;
}
.pc-menu > ul > li > a {
  color: #4D4D4D;
  display: block;
  text-decoration: none;
}
.pc-menu > ul > li > a:hover {
  background:#d2de2a;/*ホバー時の親メニューの背景色*/
  color:#fff;/*ホバー時の親メニューの文字色*/
}

.pc-menu > ul > li > ul {
  position: absolute;
  top: 50px;/*親メニューの高さと同じにする*/
  width: 199px;
  z-index: 100;
}
.pc-menu > ul > li > ul > li {
  visibility: hidden;
  overflow: hidden;
  width: 200px;/*サブメニューの幅*/
  height: 0;
  background:#f9db9b;/*サブメニューの背景色*/
}
.pc-menu > ul > li > ul > li :hover, .pc-menu > ul > li > ul > li  a:hover {
  background:#ffad2a;/*ホバー時のサブメニューの背景色*/
}
.pc-menu > ul > li :hover > ul > li , .pc-menu > ul > li a:hover > ul > li {
  visibility: visible;
  overflow: visible;
  height:50px;/*サブメニューの高さ*/
  z-index: 10;
}
/* 画面サイズが767px以上の時はスマホ用メニューは非表示 */
@media screen and (min-width: 767px) {
  .sp-menu {
    display: none;
  }
}
/* ハンバーガーメニューのボタン */
.sp-menu__box {
  position: fixed;  /* 位置を固定 */
  top: 0;  /* 最上部 */
  right: 0;  /* 右端 */
  /* 中の要素を上下中央寄せ */
  display: flex;
  justify-content: center;
  align-items: center;
  /* サイズ指定 */
  height: 60px;
  width: 60px;
  /* 最前面にする */
  z-index: 100;
  background-color: #E37000;
}
/* メニューの白線を疑似要素を使って3本作成 */
.sp-menu__box span,         /* 真ん中の線 */
.sp-menu__box span:before,  /* 上の線 */
.sp-menu__box span:after {  /* 下の線 */
  /* contentの値を指定しないと疑似要素が生成されない */
  content: "";
  /* ３本線のサイズと色を指定 */
  display: block;
  height: 3px;
  width: 25px;
  border-radius: 3px;
  background-color: #ffffff;
  /* 3本線の位置は絶対位置で指定 */
  position: absolute;
}
/* 上の線の位置 */
.sp-menu__box span:before {
  /* 真ん中の線と離す距離 */
  bottom: 8px;
}
/* 下の線の位置 */
.sp-menu__box span:after {
  /* 真ん中の線と離す距離 */
  top: 8px;
}

/* チェックボックスは常に非表示 */
#sp-menu__check {
  display: none;
}
/* チェックボックスのチェックがON（スマホ用メニューを開いた状態） */
/* 真ん中の線 */
#sp-menu__check:checked ~ .sp-menu__box span {
  /* 透明にして見えなくする */
  background: rgba(255, 255, 255, 0);
}
/* 上の線 */
#sp-menu__check:checked ~ .sp-menu__box span::before {
  /* 真ん中の線との距離を無くす（真ん中の線と同じ位置にする） */
  bottom: 0;
  /* 右に45度傾けてバツの片側の線にする */
  transform: rotate(45deg);
}
/* 下の線 */
#sp-menu__check:checked ~ .sp-menu__box span::after {
  /* 真ん中の線との距離を無くす（真ん中の線と同じ位置にする） */
  top: 0;
  /* 左に45度傾けてバツの片側の線にする */
  transform: rotate(-45deg);
}
/* ハンバーガーボタンを押してチェックがONの時だけ
   スマホ用メニューを画面左端に移動する */
#sp-menu__check:checked ~ .sp-menu__content {
  left: 0;
}
.sp-menu__content {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
 /* 普段は画面外にするために左端を画面右端の位置にする */
  left: 100%;
  z-index: 80;
  background-color: #ffffe0;/* 項目の背景色 */
  width: 90%;
  height: 50vh; /* 画面の高さいっぱいに広げる */
  overflow-y: auto; /* 項目が多い場合にスクロール可能に */
 /* 右端からゆっくり移動するように表示 */
  transition: all 0.5s;
}

.sp-menu__list {
  padding: 70px 10px 0;
}
.sp-menu__item {
  border-bottom: solid 1px #E37000;/* 項目のラインの色 */
  list-style: none;
}
.sp-menu__link {
  display: block;
  width: 100%;
  font-size: 15px;
  box-sizing: border-box;
  color: #ffffff;
  text-decoration: none;
  padding: 9px 15px 10px 0;
}