body{
 width:100%;
 text-align: center;
}
body HR{
 margin:  10px 1px;
}
header{
 width:100%;
}
header img{
 height: 100px;
}
header p{

}

header{
  position: relative; /* 子要素を重ねるための基準 */
  width: 100%;        /* 横幅は画面いっぱいに広げる場合 */
  height: 100px;      /* ★ここで縦のピクセル数を固定値にする */
  overflow: hidden;   /* 枠からはみ出た画像部分を隠す */
}

/* 下に敷く画像 */
.header_base {
  display: block;
  width: 100%; /* 必要に応じてサイズを調整 */
  height: auto;
}

/* 上に重ねる画像 */
.header_rogo {
  /* 重ねる画像のサイズ指定 */
  width: 320px; 
  height: auto;

  position: absolute; /* 絶対配置にする */
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%); /* 自身のサイズ分中央に戻す */
}
.header_rogo2 {
  /* 重ねる画像のサイズ指定 */
  width: 230px; 
  height: auto;

  position: absolute; /* 絶対配置にする */
  top: 12%;
  left: 50%;
  transform: translate(calc(-50% + 30px), -50%); /* 自身のサイズ分中央に戻す */
}


h1{
 font-size:16px;
 font-family:"ヒラギノ角ゴ","メイリオ",serif";
 padding: 6px 0;
 margin: 10px auto;
 width: 360px;
 text-align: center;
}

H2{
 font-size:20px;
 font-family:"ヒラギノ角ゴ","メイリオ",serif";
 padding: 0px;
 margin:  15px auto 15px 0px;
 text-align:center;
}

main img{
 width:100%;
 margin: 10px;
}

main UL{
 display: flex;
 flex-wrap:wrap;
 justify-content:center;
}

main UL img{
 height:55px;
 width:90%;
 margin: 10px 5px 10px;
}

.notice_yume UL{
 text-align:left;
 margin-left:10px;
}

.notice_yume img{
 height:60px;
 width:340
}


.blog_yume iframe{
 width:340px;
 height:750px;
 margin-bottom: 8px;
 font-siez: 12px;
 border: 3px solid #ccc;
}

footer{
 font-size: 12px;
 margin:  15px auto 15px 0px;
}

footer img{
 height: 60px;
 width: 100%;
}
footer H2{
 font-size : 12px;
 padding: 0px;
 margin: 10px auto 15px 0;  
}
footer UL{
 padding: 0px;
 margin:1px auto 1px 0;  
}

.footer_img{
  position: relative; /* 子要素を重ねるための基準 */
  width: 100%;        /* 横幅は画面いっぱいに広げる場合 */
  height:60px;      /* ★ここで縦のピクセル数を固定値にする */
  overflow: hidden;   /* 枠からはみ出た画像部分を隠す */
}

/* 下に敷く画像 */
.footer_base {
  display: block;
  width: 100%; /* 必要に応じてサイズを調整 */
  height: 60px;
}

/* 上に重ねる画像 */
.footer_over {
  /* 重ねる画像のサイズ指定 */
  width: 340px; 
  height: 60px;

  position: absolute; /* 絶対配置にする */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 自身のサイズ分中央に戻す */
  z-index: 1;
}
.overlay-text1 {
  position: absolute;
  
  /* 位置の指定（重ねる画像 top: 65% の少し上に配置する場合） */
  top: 50%;           /* 画像より上の位置に指定 */
  left:50%;           /* 左右はセンター */
  transform: translate(calc(-50% - 100px), calc(-50% - 15px)); /* 中央配置の補正 */
  
  /* 文字のデザイン（背景に負けないように調整） */
  color: #555555;     /* 文字色を白に */
  font-size: 14px;    /* 文字の大きさ */
  font-weight: bold;  /* 太字 */
  /* text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);*/  /*★文字の後ろに影をつけて読みやすくする */
  white-space: nowrap; /* 意図しない改行を防ぐ */
  z-index: 2;         /* 表示順 */
}
.overlay-text2 {
  position: absolute;
  
  /* 位置の指定（重ねる画像 top: 65% の少し上に配置する場合） */
  top: 50%;           /* 画像より上の位置に指定 */
  left: 50%;          /* 左右はセンター */
  transform: translate(calc(-50% + 15px), calc(-50% + 23px)); /* 中央配置の補正 */
  
  /* 文字のデザイン（背景に負けないように調整） */
  color: #000000;     /* 文字色を白に */
  font-size: 10px;    /* 文字の大きさ */
  font-weight: bold;  /* 太字 */

  white-space: nowrap; /* 意図しない改行を防ぐ */
  z-index: 3;         /* 表示順 */
}



.sensu_button img {
  transition: opacity 0.3s ease, transform 0.2s ease, box-shadow 0.8s ease; /* 変化をなめらかにする */
  border-radius: 8px; /* 角を丸くする場合 */
  transform: translateY(-2px); /* 少しだけ上に浮き上がらせる */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.8);
}