@charset "UTF-8";
@media screen and (max-width: 959px) {
	/* 959px以下に適用されるCSS（タブレット用） */
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
}
 body {
    margin: 20;
    padding: 10px 10px 30px 10px;
}
.header {
    height: 60px;
    min-height: 60px;
    background-color: aqua;
}
.img_resize {
    width: 50%; /* 親要素の幅の50% */
    height: auto; /* アスペクト比を維持 */
}
/*  */
.hyousi {
    position: relative;
    display: inline-block;
}

.hyousi img {
    width: 100%;
    height: auto;
    max-width: 1300px;
}

/* タイトルを中央寄せ */
.hyousi-title {
    position: absolute;
    top: 0vw;
    left:3vw;
    /*transform: translateX(-50%);*/
    color: blue;
    font-size: clamp(20px, 4vw, 38px); /* スマホ対応の可変フォント */
    text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
}

/* メニューのテキストも中央寄せ */
.hyousi-text {
    position: absolute;
    top: 11vw;
    left: 12vw;
    /*transform: translateX(-50%);*/
    font-weight: bold;
    color: blue;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: clamp(11px, 2vw, 16px);

    /*text-align: center;*/
}
.h-na{
    text-decoration: none; /* 下線を消す */
    color: blue; 
 
}
.update{
   position: absolute;
   top: 90%;  /* 縦位置（中央） */
   left: 10px; /* 横位置（中央） */
   color: white;
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
}
.navbar{
    display: flex;
    background-color:  #333;
    justify-content: space-around;
}
.na{
    text-decoration: none; /* 下線を消す */
    color: white; 
}
.nb{
   text-decoration: none; /* 下線を消す */
   color: yellow; 
}
.pre{
    margin : 1px 5px 1px 5px;
}
.float{
    float: left;
    margin-right: 10px;
}
.yoko {
  display: flex; /* これだけで横並びに! */
}
figure {
    margin: 0 0 0 0;
    text-align: center;
}
figcaption {
    font-size: 14px;
    color: #555;
}
/* 見出し */
.h_3_1{
  padding: 0.5em;/*文字周りの余白*/
  color: #010101;/*文字色*/
  background: #eaf3ff;/*背景色*/
  border-bottom: solid 3px #516ab6;/*下線*/
}
.h_3_a{
    font-size: 1.2em;/* フォントサイズ */
    font-weight: bold;/* フォント太さ */
    padding-left: .5em;
    padding-top: .2em;
    padding-bottom: .2em;
    margin-bottom: 1em;
    border-left: 5px solid #ff69b4;/* 線 */
    color: #ff69b4;/*フォント色 */
}
.h_3_b{
    font-size: 1.2em;/* フォントサイズ */
    font-weight: bold;/* フォント太さ */
    padding-left: .5em;
    padding-top: .2em;
    padding-bottom: .2em;
    margin-bottom: 1em;
    border-left: 5px solid #008000;/* 線 */
    color: #008000;/*フォント色 */
}
.h_3_2{
    font-size: 1.2em;/* フォントサイズ */
    font-weight: bold;/* フォント太さ */
    padding-left: .5em;
    padding-top: .2em;
    padding-bottom: .2em;
    margin-bottom: 1em;
    border-left: 5px solid #989a2a;/* 線 */
    color: #929415;/* フォント色 */
}
.h_3_3{
    font-size: 1.2em;/* フォントサイズ */
    font-weight: bold;/* フォント太さ */
    padding-left: .5em;
    padding-top: .2em;
    padding-bottom: .2em;
    margin-bottom: 1em;
    border-left: 5px solid blue;/* 線 */
    color: blue;/* フォント色 */
}
.h_3_4{
    font-size: 1.2em;/* フォントサイズ */
    font-weight: bold;/* フォント太さ */
    padding-left: .5em;
    padding-top: .2em;
    padding-bottom: .2em;
    margin-bottom: 1em;
    border-left: 5px solid lime;/* 線 */
    color: lime;/* フォント色 */
}
.h_3_5{
  color: #505050;/*文字色*/
  padding: 0.5em;/*文字周りの余白*/
  display: inline-block;/*おまじない*/
  line-height: 1.3;/*行高*/
  background: #dbebf8;/*背景色*/
  vertical-align: middle;
  border-radius: 25px 0px 0px 25px;/*左側の角を丸く*/
}
.h_3_5:before {
  content: '●';
  color: white;
  margin-right: 8px;
}
h4 {
 position: relative;
  margin: 30px;
  text-align: center;
}
h4:before,
h4:after {
  position: absolute;
  z-index: 0;
  bottom: -10px;
  display: block;
  content: '';
  border: 1em solid #d90606;
}
h4:before {
  left: -30px;
  border-left-width: 15px;
  border-left-color: transparent;
}

h4:after {
  right: -30px;
  border-right-width: 15px;
  border-right-color: transparent;
}

h4 span {
  position: relative;
  z-index: 1;
  display: block;
  padding: 1rem 2rem;
  color: #fff;
  background: #fa4141;
}
h4 span:before,
h4 span:after {
  position: absolute;
  bottom: -10px;
  display: block;
  width: 10px;
  height: 10px;
  content: '';
  border-style: solid;
  border-color: #b70505 transparent transparent transparent;
}
h4 span:before {
  left: 0;
  border-width: 10px 0 0 10px;
}

h2 span:after {
  right: 0;
  border-width: 10px 10px 0 0;
}
.heading-icon-squares {
  position: relative;
  padding-left: 1.5em;
  color: #333333;
}
.heading-icon-squares::before,
.heading-icon-squares::after {
  content: '';
  position: absolute;
  width: 0.8em;
  height:0.8em;
  border: 2px solid #2589d0;
  top: 50%;
  transform: translateY(-50%);
}
.heading-icon-squares::before {
  left: 0;
}
.heading-icon-squares::after {
  left: 0.3em;
  margin-top: -0.1em;
  margin-left: -0.1em;
}
.image-container {
    position: relative;
    display: inline-block;
    width: 800px; /* 必要に応じて変更 */
}
/* 画像は幅100%で表示 */
.image-container img {
    display: block;
    width: 100%;
    height: 100%;
}

/* オーバーレイ全体 */
.overlay {
    position: absolute;
    top: 20%;  /* 縦位置（中央） */
    left: 20%; /* 横位置（中央） */
    transform: translate(-50%, -50%); /* 中央寄せ補正 */
    color: white;
    display: flex;
    flex-direction: column;
    padding-top:50px;
    padding-left: 60px;
    box-sizing: border-box;
}
.overlay-text {
    position: absolute;
    top: 95%;  /* 縦位置（中央） */
    left:30%; /* 横位置（中央） */
    /*transform: translate(-50%, -50%);*/ /* 中央寄せ補正 */
    color: white;
    font-size: 12px;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.7); /* 読みやすくする影 */
    pointer-events: none; /* クリックを透過 */
}

/* 改行
.large-space2 {
    margin-bottom: 4em;
}
/* タイトル */
.overlay h2 {
    margin: 0 0 10px;
    font-size: 1.5rem;
}

.img_m {
    display:block;
    float: left;
    margin: 0 15px 5px 0; /* 右と下に余白を設定 */
}

/* リンクボタン風 */
.overlay a {
    display: inline-block;
}
.box {
  position: relative;
  border: 2px solid #C1AA9F;
  padding: 20px 15px 15px 15px;
  width:auto;
}
.box-title {
  position: absolute;
  top: 15px;
  left: 15px;
  background: #C1AA9F;
  color: #FFFFFF;
  padding: 0 8px;
}
.box-content {
  color: #000000;
  padding-top: 30px;
}
.footer {
  background-color: #333;
  color: white;
  align-items: center;
}
.footer-container {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.footer-nav {
  list-style: none;
  display: flex;
  gap: 16px;
  padding: 0;
  margin: 0;
}