@media screen and (min-width: 768px) and (max-width: 1920px) {
html {
    font-size: 1vw;
}

body {
    background-color: #fff;
    margin: 0;
}


/* header */
/* ロゴとナビを両端横並び
上下中央寄せ
ヘッダー幅
ヘッダー固定 */
#header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 13vw;
    position: fixed;
    width: 100vw;
    top: 0;
    z-index: 10000;
    background-color: #fff;
  }
  
  /* ロゴ */
  /* ロゴ2つを横並び */
  #header-logo {
    display: flex;
  }
  
  /* ロゴ画像を上下中央寄せ */
  .logo1,
  .logo2 {
    display: flex;
    align-items: center;
  }
  
  /* ロゴ画像サイズ調整 */
  .logo1 a img {
    height: 9vw;
    margin-left: 1vw;
  }
  .logo2 a img {
    height: 4vw;
    margin-top: 2vw;
  }
  
  /* ロゴ1のaタグの大きさを画像と同じに */
  .logo1 > a {
    height: 9vw;
  }
  
  /* ロゴ2の余白 */
  #header-logo .logo2{
    margin: 0;
  }
  
  /* ナビ */
  /* ナビのテキスト装飾 */
  #nav-ul li a {
    text-decoration: none;
    color: #000;
    font-size: 1.5vw;
    margin-right: 5vw;
  }
  
  /* ナビを上下中央寄せ */
  #nav-ul li {
    display: flex;
    align-items: center;
  }
  
  /* ナビを横並び+余白+大きさ */
  #nav-ul {
    list-style: none;
    padding: 0;
    display: flex;
    height: 13vw;
    margin: 0;
  }
  
  /* スマホ用ナビを非表示 */
  #nav-sp,
  #menu-sp {
  display: none;
  }

/* News */
/* 全体 */
#all {
    width: 80%;
    margin: 5% auto;
}

#topic > p {
  margin: 0;
  color: #009D96;
  font-size: 2.5vw;
  font-weight: bold;
  letter-spacing: 0.1em;
  width: 12%;
  border: solid 2px #000;
  text-align: center;
}

/* News文字から下 */
#article-all {
    width: 80%;
    margin: 5% auto;  
  text-align: center;
}

/* 戻るボタンより上 */
#article {
  padding-bottom: 20%;
}

/* タイトル･日付･カテゴリエリア */
#head {
  text-align: left;
}

/* 件名 */
#news-title {
    padding-bottom: 1vh;
    border-bottom: solid #c0c0c0 1px;
    margin-top: 10%;
}

/* カテゴリ */
#category {
    background-color: #009D96;
    color: #fff;
    padding: 0.5vh 0.5vw;
    margin-left: 1vw;
}

/* 内容 */
#content {
    margin-top: 5%;
    text-align: left;
}
#content > p {
  margin-bottom: 0;
}

/* 戻るボタン */
#return {
  display: inline-block;
  padding: 0.8em 1.5em;
  text-decoration: none;
  color: #009D96;
  border: solid 2px #009D96;
  border-radius: 30px;
  transition: .4s;
  margin-top: 10%;
}

#return:hover {
  background-color: #009D96;
  color: #fff;
}


/* footer */
/* 全体の背景と余白 */
#footer {
    background-color: #f0f0f0;
    height: 16.5vw;
    padding: 1vw 1vw; 
    justify-content: center;
  }
  
  /* ロゴと文章と地図を横並び+余白 */
  #footer-div {
    display: flex;
    justify-content: center;
  }
  
  /* 各ブロックの幅 */
  #footer-left,
  #footer-center,
  #footer-right {
    width: 33vw;
    display: flex;
    align-items: center;
    justify-content: center;
    
  }
  
  /* ロゴ部分 */
  /* ロゴのサイズ調整 */
  .footer-img {
    height: 8.1vw;
    width: auto;
  }
  
  /* 会社情報部分 */
  /* 社名･営業時間･infoの余白 */
  .company-name,
  .time,
  .info {
    margin: 0 0 1.7vw 0;
  }
  
  /* アクセスの余白 */
  .access {
    margin: 0;
  }
  
  /* 地図部分 */
  /* 地図のサイズ調整 */
  #footer-right > iframe {
    height: 16vw;
    width: 16vw;
    margin: 15px;
  }
}

/* スマホ用表示 */
@media screen and (max-width: 767px) {

  html {
      font-size: 2.5vw;
      scroll-padding-top: 13vw;
  }
  
  body {
      width: 100vw;
  }
  
  /* ハンバーガーメニュー */
  /* スマホ表示の時はPC版ナビ非表示 */
  #nav {
      display: none;
  }
  
  /* ハンバーガーボタン位置+余白 */
  #menu-sp {
      display: block;
      background-color: transparent;
      float: right;
      padding: 0;
      border: none;
      margin-right: 3vw;   
  }
  
  /* スマホ用ナビ */
  #nav-sp {
      background-image: url(image/spbg.png);
      position: fixed;
      left: 0;
      top: 0;
      height: 100%;
      width: 100%;
      display: none;
      z-index: 100;
  }
  
  /* ×ボタン位置+余白 */
  #close {
      position: absolute;
      top: 20px;
      right: 20px;
      background-color: transparent;
      border: none;
  }
  
  #nav-sp nav ul {
      padding-left: 0;
  }
  #nav-sp nav li {
      list-style: none;
  }
  
  /* ロゴ余白 */
  #logo-sp {
      margin: 80px 0 30px 20px;
  } 
  
  /* リンクの装飾 */
  #nav-sp nav a {
      display: block;
      color: #ffffff;
  }
  #nav-sp nav a:hover {
      text-decoration: underline;
  }
   
  #nav-sp .menu {
      text-decoration: none;
      text-align: center;
      margin: 0 20px 30px 20px;
      height: 44px;
      font-size: 24px;
  }
  
  /* 画像サイズ */
  /* ハンバーガー */
  #menu-sp > img {
      width: auto;
      height: 7vh;
  }
  
  /* ロゴ */
  #logo-sp > img {
      height: auto;
      width: 50vw;
  }
  
  .logo1 > a > img {
      width: 50%;
  }
  
  /* ロゴ1の画像サイズにサイズを合わせる */
  .logo1 {
      width: fit-content;
  }
  
  #header-logo {
      width: fit-content;
  }
  
  /* ロゴとハンバーガーを横並び */
  #header {
      display: flex;
      justify-content: space-between;
  }
  
  /* ロゴ2を非表示 */
  .logo2 {
      display: none;
  }

  #all {
    width: 80%;
    margin: 5% auto;
}

#topic > p {
  margin: 0;
  color: #009D96;
  font-size: 150%;
  font-weight: bold;
  letter-spacing: 0.1em;
  width: 15%;
  border: solid 2px #000;
  text-align: center;
}

/* News文字から下 */
#article-all {
    width: 80%;
    margin: 5% auto;  
  text-align: center;
}

/* 戻るボタンより上 */
#article {
  padding-bottom: 20%;
}

/* タイトル･日付･カテゴリエリア */
#head {
  text-align: left;
}

/* 件名 */
#news-title {
    padding-bottom: 1vh;
    border-bottom: solid #c0c0c0 1px;
    margin-top: 10%;
}

/* カテゴリ */
#category {
    background-color: #009D96;
    color: #fff;
    padding: 0.5vh 0.5vw;
    margin-left: 1vw;
}

/* 内容 */
#content {
    margin-top: 5%;
    text-align: left;
}
#content > p {
  margin-bottom: 0;
}

/* 戻るボタン */
#return {
  display: inline-block;
  padding: 0.8em 1.5em;
  text-decoration: none;
  color: #009D96;
  border: solid 2px #009D96;
  border-radius: 30px;
  transition: .4s;
  margin-top: 10%;
}

#return:hover {
  background-color: #009D96;
  color: #fff;
}
}