@font-face{
  font-family: "Hui";
  src: url("../fonts/HuiFont29.ttf");
}

html {
  font-size:calc(100% * 0.625);
}

* {
  box-sizing: border-box;
}

body{
  margin:0;
  width:100%;
  background-image: url(./haioku.JPG);
  background-attachment: fixed;
  background-position: center; /* こうするとスマホでも真ん中に来る */
  display:grid;
  grid-template-rows: auto 6.6rem;
}

main{
  width:100%;
  height:calc(100dvh - 6.6rem);
  max-width:90rem;
  font-size:1.8rem;
  color:white;
  background:rgba(0,0,0,0.5);
  margin:0 auto;
  overflow:scroll;
  scrollbar-width: none; /* これを使うとバーを隔せる。スクロール自体は可能。 */
}

h1{
  font-family:"Hui";
  text-align:center;
  font-size:4rem;
  margin:0;
  padding: 2rem;
  font-weight: normal;
}

.outer-link{
  text-decoration:none;
  color:white;
}

.link-index{
  padding:0.2rem;
  font-size:3rem;
  font-family:"Hui";
  text-decoration:none;
  color:white;
}

.link-index:hover{
  background-color:rgba(0,128,128,0.6);
}

.line{
  border-top:0.1rem solid white;
  margin:1rem 0;
}

#footer{
  font-family:"Hui";
  font-style:italic;
  border-top: 1px solid white;

  width:100%;
  height:6.6rem;
  left:0px;
  bottom: 0px;
  background-color: rgba(0,0,0,0.75);
  /* 水平・垂直方向の中央揃え */
  display: flex;
  justify-content: center;
  align-items: center;
}

#link-back{
  color:white;
  font-size:3.6rem;
  text-decoration: none;
}