* {
  /* デフォルトをリセット */
  margin: 0px;
  padding: 0px;
}

body {
  margin: 0.2em 0.2em 0.2em 0.5em;
  min-height: 100vh;
  /*   */
  display: grid;
  grid-template:
    "header"
    "main" 1fr
    "footer";
}

/* 見出しタグ */
h1 {
  margin-top: 0.2em; /*トップ余白*/
  text-align: center; /*テキストの位置*/
  border: solid 3px #333333; /*線の形状、太さ、色*/
  padding: 0.1em; /*文字周りの余白*/
  border-radius: 0.5em; /*角の丸み*/
}

/* 記事や文章のタグ */
article {
  padding: 0.5em; /*余白*/
  background-color: #ffc; /*背景色*/
  border: solid 1px #333333; /*境界線 太さ 色*/
  border-radius: 0.5em; /*角の丸み*/
}

/* 小見出しタグ */
main h2,
h3 {
  border-bottom: solid 1px black; /*底の線、太さ、色*/
  padding-left: 1em; /*左の余白*/
}

main p {
  margin-top: 1em; /*トップ余白*/
  margin-bottom: 0.5em; /*ボトム余白*/
}

strong.red {
  color: red;
}

strong.blue {
  color: blue;
}

section.p1 {
  margin-top: 1em; /*トップ余白*/
  padding: 0.5em; /*余白*/
  background-color: #e6e6e6; /*背景色*/
  border: solid 1px #333333; /*境界線 太さ 色*/
  border-radius: 0.5em; /*角の丸み*/
}

strong.yellow {
  background: linear-gradient(transparent 0%, #f6ff5f 0%);
}

img {
  /*画像の大きさ指定*/
  margin: 0;
  padding: 0;
  max-width: 80%;
}

main p.bottom {
  /*ボトムを詰める時*/
  margin-bottom: 0;
  padding-bottom: 0;
}

/* --------------------ヘッダーのタグ-------------------- */
header {
  background-color: #e6e6e6; /* 背景色 */
}

/* headerA,B,Cを横並びにする */
.headerFront {
  display: flex;
  justify-content: space-between;
}

header p.logo {
  font-family: "Pacifico", cursive;
  font-size: 2em; /*文字の大きさ */
  padding-top: 10px; /*トップの余白 */
  text-decoration: underline; /*アンダーライン */
  color: #0000cc; /* 文字色 */
}

header p.descA {
  color: #0000cc; /* 文字色 */
  font-size: 11px; /* 文字の大きさ */
}

/* headerB */
.headerB {
  margin-top: 30px;
}

#headerBmenu li {
  display: inline-block; /*インラインブロック要素*/
  padding: 0.3em; /*ボタンの間隔をあける*/
}

/* headerB menuボタン表示 */
.btn-square-pop {
  position: relative;
  display: inline-block;
  padding: 0.25em 0.5em;
  text-decoration: none;
  color: #fff;
  background: #fd9535; /*背景色*/
  border-bottom: solid 2px #d27d00; /*少し濃い目の色に*/
  border-radius: 4px; /*角の丸み*/
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.2),
    0 2px 2px rgba(0, 0, 0, 0.19);
  font-weight: bold;
}

/* headerC ハンバーガーのアイコン*/
.humbergerC {
  position: relative; /* 子要素に対する起点 */
  margin-top: 3px;
  margin-right: 10px;
  height: 36px;
  width: 36px;
  background-color: #fff;
  border: 2px solid #444;
  border-radius: 4px;
  display:none;
}

.humbergerC span {
  position: absolute; /* 親要素に対して固定表示 */
  left: 4px;
  height: 4px;
  width: 24px;
  background-color: #444;
  border-radius: 2px;
}

.humbergerC span:nth-of-type(1) {
  top: 4px;
}
.humbergerC span:nth-of-type(2) {
  top: 14px;
}
.humbergerC span:nth-of-type(3) {
  bottom: 4px;
}

/* ヘッダーのハンバーガメニューは、最初隠す */
.headerBack {
  display: none;
  background-color: #00cbd2;
}

.headerBack ul {
  display: flex;
  justify-content: space-evenly; /* 等間隔 */
  padding-bottom: 1em; /* 底に余白 */
}

.headerBack li {
  display: inline-flex; /* ポッチを消去 */
}

.copy {
  /* コピーライトの指定 */
  margin-top: 0.5em;
  font-size: 25px;
  text-align: center;
  color: grey;
}


/* 下段メニュー */
#bottomnavi {
  margin-top: 0.2em; /* 上空白 */
  margin-bottom: 0.5em; /* 上空白 */
  width: 100%;
  position: absolute;/*←絶対位置*/
  bottom: 0; /*下に固定*/
}

#bottomnavi ul {
  display: flex;
  flex-direction: row; /* 横並び指定 */
  justify-content: space-between; /* 左右にわける */
  list-style: none; /* ポッチ消去 */
  padding: 1em 0.5em; /* 上と右の余白 */
  background-color: black; /* 背景色 */
}

#bottomnavi li a {
  text-decoration: none; /* リンクのアンダーライン消去 */
  color: #ffffff; /* 文字色 */
  font-size: 18px; /* 文字の大きさ */
}

#bottomnavi li a:hover {
  color: orange; /* カーソルあてた時の色 */
}



/* レスポンシブ対応 */
@media screen and (max-width: 767px) {
  .headerB {
    display: none;
  }

  .copy {
    /* コピーライトの指定 */
    margin-top: 0.5em;
    font-size: 12px;
    text-align: center;
    color: grey;
  }

  .humbergerC {
    display: block;
  }

  .humbergerC span {
    display: block;
  }

}