@charset "utf-8";

header {
  margin: 0;
  padding: 0;
  text-align: center;
  font-size: 32px;
  line-height: 120px;
  height: 120px;
  background: #407F82;
  color: #f9f9f9;
  font-family:Arial;

  /*animação*/
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

header.sticky {
  position: fixed;
  font-size: 24px;
  line-height: 48px;
  height: 48px; 
  width: 100%;
  background: #407F82;
  text-align: left;
  padding-left: 20px;
}





.bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #7DB2B5;
  opacity: 0.4;
  z-index: -1;
  
  /* 方眼紙模様に必須のスタイル */
  background-image: linear-gradient(0deg, transparent calc(100% - 1px), #174C4F calc(100% - 1px)),
                    linear-gradient(90deg, transparent calc(100% - 1px), #174C4F calc(100% - 1px));
  background-size: 16px 16px;
  background-repeat: repeat;
  background-position: center center;

  /* 以下任意のスタイル */
  padding: 20px;
}

body {
   margin: 0;
   padding: 0;
}