/* コンテナ（親要素）のスタイル設定 */
header {
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 9999;
}
.header-container {
  display: flex;
  flex-direction: row; /* 水平方向に子要素を配置 */
  height: 100%; /* コンテナの高さを設定 */
  font-family: "Meiryo", sans-serif;
  margin: 0 auto;
  padding: 1% 3%;
  flex-wrap: wrap;
}

/* 各セクションの基本スタイル */
.left, .center, .right {
  flex: 1; /* 各セクションを垂直に等しく分割 */
  display: flex;
  align-items: center; /* 中央揃え */
  justify-content: center; /* 中央揃え */
}

/* .right セクション内の配置 */
.right {
  display: flex; /* フレックスコンテナとして設定 */
  flex-direction: column; /* 垂直方向に要素を配置 */
  align-items: stretch; /* 子要素をセクションの高さいっぱいに広げる */
  justify-content: flex-start;
}

/* テキストサイズ変更ボタンとテキストイメージペアのエリアのスタイル */
.text-size-controls, .text-image-pairs {
  width: 100%;
  flex: 1; /* 水平方向に等しく分割 */
  display: flex;
  align-items: center; /* 中央揃え */
  justify-content: flex-end; /* 右揃え */
}

.text-image-pairs {
	padding-right: 24px;
}

.text-image-pairs .pair:nth-child(2) {
    padding: 0 0 0 32px;
}

.text-image-pairs .pair span,
.text-image-pairs .pair img {
	display: inline-block;
	vertical-align: middle;
}

.text-image-pairs .pair a {
    position: relative;
    color: #212529;
    text-decoration: none;
	white-space: nowrap;
}
.text-image-pairs .pair:nth-child(1) a::after {
    content: "";
    position: absolute;
    background: url(./images/icon_newwindow.png) no-repeat right 50%;
    background-size: 15px;
    width: 20px;
    height: 30px;
}
.text-image-pairs .pair:nth-child(2) a::after {
    content: "";
    position: absolute;
    background: url(./images/icon_arrow.png) no-repeat right 50%;
    background-size: 15px;
    width: 20px;
    height: 30px;
}
.text-image-pairs .pair a:hover {
	text-decoration: underline;
}

/* 画像やテキストのスタイル調整（必要に応じて） */
.left img, .center img, .pair img {
  max-width: 100%; /* 最大幅を100%に設定 */
  height: auto; /* 高さを自動調整 */
}

/* ボタンのスタイル */
button.btn {
  padding: 0 .3rem; /* パディングの追加 */
  font-size: 1rem; /* フォントサイズの設定 */
  margin: 0.2rem; /* 余白の追加 */
  background: #ddd;
  color: #aaa;
  border: 1px solid #ddd;
  border-radius: 5px;
}

button.btn:hover {
  background: #0D81EB;
  color: #fff;
}

/* アクティブなボタンのスタイル */
button.active {
  font-weight: bold; /* ボールドスタイル */
  text-decoration: none;
  background: #0D81EB;
  color: #fff;
}

/* レスポンシブ対応（小さい画面サイズ用） */
@media (max-width: 768px) {
  header {
	position: static;
  }
  .header-container {
    flex-direction: column; /* 垂直方向に要素を配置 */
  }

  .header-container .left {
	display: none;
  }

  .header-container .center {
    width: 80%;
    margin: 3% auto;
  }

  .right {
    flex-direction: column; /* 小さい画面では垂直方向に要素を配置 */
  }
}