@import url('https://fonts.googleapis.com/css2?family=Mochiy+Pop+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rampart+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Stack+Sans+Headline:wght@200..700&display=swap');

@media screen and (max-width: 768px) {
  .setumei-text {
    font-size: 1.5em;
  }
}

#setumei {
    text-align: left;
    font-size: 3em;
    font-family: "Rampart One", sans-serif;
    color: white;
}

#logo-nav {
 width: 6em;
 height: 2em   
}

#iframe-osirase {
  width: 500px;
  height: 250px;
}

.site-header {
  display: flex;                /* 横並びにする */
  align-items: center;          /* 上下の真ん中にそろえる */
  justify-content: space-between; /* 左にロゴ / 右にメニュー */
  background: #000;
  padding: 5px 10px;
}

.nav-text {
  display: inline-block;
  padding: 5px 20px;
  background: yellow;
  color: black;
  font-weight: bold;
  text-decoration: none;
  display: none; /*今は使わない*/
}

/* 文字と背景をまとめる箱 */
.hero-back {
  position: relative;
  overflow: hidden;      /* はみ出し防止 */
  padding: 60px 20px;    /* 高さの調整（お好みで） */
}

/* 後ろに置くぼかし背景 */
.code-back {
  position: absolute;
  inset: 0;              /* top:0; right:0; bottom:0; left:0 と同じ */
  z-index: -1;           /* ← 文字の後ろに行く */
  filter: blur(2px);
  background-image: url("../コード - back\(一番上にある\).png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.setumei-text {
    color: white;
    font-size: 23px;
}

.nav {
    background-color: black;
    color: white;
    height: 3em
}

.copyright {
  background-color: rgb(148, 112, 45);
  height: 50px;
  text-align: center;
  font-size: 2.25em;
  font-family: Stack Sans Headline;
  color: white;
}