/* 
 * change.css - アクセシビリティのためのスタイル切り替え用CSS
 * 青、黒、黄色を基調とした色スキームを提供します
 */

/* 基本的なアクセシビリティ設定 */
:focus {
  outline: 3px solid #016935;
}

.accessibility-controls {
  display: flex;
  justify-content: flex-end;
  padding: 10px;
  background-color: #f4f3f0;
}

/* フォントサイズ切り替えボタンのスタイル */
.font-size-change {
  display: flex;
  align-items: center;
  margin-right: 20px;
}

.font-size-change span {
  margin-right: 10px;
  font-weight: bold;
}

.font-size-change button {
  margin: 0 5px;
  padding: 5px 10px;
  background-color: #fff;
  border: 2px solid #016935;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
}

.font-size-change button:hover,
.font-size-change button:focus {
  background-color: #016935;
  color: #fff;
}

/* 背景色切り替えボタンのスタイル */
.bg-color-change {
  display: flex;
  align-items: center;
}

.bg-color-change span {
  margin-right: 10px;
  font-weight: bold;
}

.bg-color-change button {
  margin: 0 5px;
  width: 30px;
  height: 30px;
  border: 2px solid #666;
  border-radius: 50%;
  cursor: pointer;
}

.bg-color-change .white-btn {
  background-color: #fff;
}

.bg-color-change .black-btn {
  background-color: #000;
}

.bg-color-change .blue-btn {
  background-color: #0f3a9b;
}

.bg-color-change .yellow-btn {
  background-color: #fcde00;
}

/* カラースキーム: 通常 (白背景) */
body {
  background-color: #fff;
  color: #000;
  transition: background-color 0.3s, color 0.3s;
}

/* カラースキーム: 黒背景 */
.color-change.black {
  background-color: #000;
  color: #fff;
}

.color-change.black a {
  color: #fcde00;
}

.color-change.black h1,
.color-change.black h2,
.color-change.black h3,
.color-change.black h4,
.color-change.black h5,
.color-change.black h6 {
  color: #fff;
}

.color-change.black .logo h1 {
  color: #fff;
}

.color-change.black header {
  background-color: #000;
  border-bottom: 2px solid #fcde00;
}

.color-change.black body {
  border-top: 20px solid #fcde00;
}

/* SVGアイコン画像に対応するセレクタ */
.color-change.black .tree-icon img,
.color-change.blue .tree-icon img {
  filter: brightness(0) invert(1); /* SVGを白に変換 */
}

.color-change.yellow .tree-icon img {
  filter: brightness(0); /* SVGを黒に変換 */
}

/* headerとfooterのロゴ画像 */
.color-change.black .logo img,
.color-change.blue .logo img,
.color-change.black #info img,
.color-change.blue #info img {
  filter: brightness(0) invert(1); /* 白色に変換 */
}

.color-change.yellow .logo img,
.color-change.yellow #info img {
  filter: brightness(0); /* 黒色に変換 */
}

/* ヘッダーのメニューアイコン */
.color-change.black .menu img,
.color-change.blue .menu img,
.color-change.black .open img,
.color-change.blue .open img {
  filter: brightness(0) invert(1); /* 白色に変換 */
}

.color-change.yellow .menu img,
.color-change.yellow .open img {
  filter: brightness(0); /* 黒色に変換 */
}

/* 検索アイコン */
.color-change.black img[src*="search.png"],
.color-change.blue img[src*="search.png"] {
  filter: brightness(0) invert(1); /* 白色に変換 */
}

.color-change.yellow img[src*="search.png"] {
  filter: brightness(0); /* 黒色に変換 */
}

/* アクセシビリティアイコン (Aa.png) */
.color-change.black img[src*="Aa.png"],
.color-change.blue img[src*="Aa.png"] {
  filter: brightness(0) invert(1); /* 白色に変換 */
}

.color-change.yellow img[src*="Aa.png"] {
  filter: brightness(0); /* 黒色に変換 */
}

/* SVGアイコンを白色に変更 - 黒背景用 */
.color-change.black h2.tree000::before {
  background-image: url('../images/tree000.svg');
  filter: brightness(0) invert(1);
}

.color-change.black h2.tree001::before {
  background-image: url('../images/tree001.svg');
  filter: brightness(0) invert(1);
}

.color-change.black h2.tree002::before {
  background-image: url('../images/tree002.svg');
  filter: brightness(0) invert(1);
}

.color-change.black h2.tree003::before {
  background-image: url('../images/tree003.svg');
  filter: brightness(0) invert(1);
}

.color-change.black h2.tree004::before {
  background-image: url('../images/tree004.svg');
  filter: brightness(0) invert(1);
}

.color-change.black .fff ul li:before {
  background-image: url('../images/tree000.svg');
  filter: brightness(0) invert(1);
}

.color-change.black p.alignleft.s-more a:before,
.color-change.black p.alignright.s-more a:before {
  background-image: url('../images/tree000.svg');
  filter: brightness(0) invert(1);
}

.color-change.black footer {
  background-color: #000;
  border-top: 2px solid #fcde00 !important;
}

/* カラースキーム: 青背景 */
.color-change.blue {
  background-color: #0f3a9b;
  color: #fff;
}

.color-change.blue a {
  color: #fcde00;
}

.color-change.blue h1,
.color-change.blue h2,
.color-change.blue h3,
.color-change.blue h4,
.color-change.blue h5,
.color-change.blue h6 {
  color: #fff;
}

.color-change.blue .logo h1 {
  color: #fff;
}

.color-change.blue header {
  background-color: #0f3a9b;
  border-bottom: 2px solid #fcde00;
}

.color-change.blue body {
  border-top: 20px solid #fcde00;
}

/* SVGアイコンを白色に変更 - 青背景用 */
.color-change.blue h2.tree000::before {
  background-image: url('../images/tree000.svg');
  filter: brightness(0) invert(1);
}

.color-change.blue h2.tree001::before {
  background-image: url('../images/tree001.svg');
  filter: brightness(0) invert(1);
}

.color-change.blue h2.tree002::before {
  background-image: url('../images/tree002.svg');
  filter: brightness(0) invert(1);
}

.color-change.blue h2.tree003::before {
  background-image: url('../images/tree003.svg');
  filter: brightness(0) invert(1);
}

.color-change.blue h2.tree004::before {
  background-image: url('../images/tree004.svg');
  filter: brightness(0) invert(1);
}

.color-change.blue .fff ul li:before {
  background-image: url('../images/tree000.svg');
  filter: brightness(0) invert(1);
}

.color-change.blue p.alignleft.s-more a:before,
.color-change.blue p.alignright.s-more a:before {
  background-image: url('../images/tree000.svg');
  filter: brightness(0) invert(1);
}

.color-change.blue footer {
  background-color: #0f3a9b;
  border-top: 2px solid #fcde00 !important;
}

/* カラースキーム: 黄色背景 */
.color-change.yellow {
  background-color: #fcde00;
  color: #000;
}

.color-change.yellow a {
  color: #0f3a9b;
  font-weight: bold;
}
.color-change.yellow .page-buttons a {
  color: #FFFFFF;
  font-weight: bold;
}
.color-change.yellow h1,
.color-change.yellow h2,
.color-change.yellow h3,
.color-change.yellow h4,
.color-change.yellow h5,
.color-change.yellow h6 {
  color: #000;
}

.color-change.yellow .logo h1 {
  color: #000;
}

.color-change.yellow header {
  background-color: #fcde00;
  border-bottom: 2px solid #016935;
}

.color-change.yellow body {
  border-top: 20px solid #016935;
}

/* SVGアイコンを黒色に変更 - 黄色背景用 */
.color-change.yellow h2.tree000::before {
  background-image: url('../images/tree000.svg');
  filter: brightness(0);
}

.color-change.yellow h2.tree001::before {
  background-image: url('../images/tree001.svg');
  filter: brightness(0);
}

.color-change.yellow h2.tree002::before {
  background-image: url('../images/tree002.svg');
  filter: brightness(0);
}

.color-change.yellow h2.tree003::before {
  background-image: url('../images/tree003.svg');
  filter: brightness(0);
}

.color-change.yellow h2.tree004::before {
  background-image: url('../images/tree004.svg');
  filter: brightness(0);
}

.color-change.yellow .fff ul li:before {
  background-image: url('../images/tree000.svg');
  filter: brightness(0);
}

.color-change.yellow p.alignleft.s-more a:before,
.color-change.yellow p.alignright.s-more a:before {
  background-image: url('../images/tree000.svg');
  filter: brightness(0);
}

.color-change.yellow footer {
  background-color: #fcde00;
  border-top: 2px solid #016935 !important;
}

/* テキスト色変更のためのクラス */
.color-change-text.black {
  color: #fff;
}

.color-change-text.blue {
  color: #0f3a9b;
}

.color-change-text.yellow {
  color: #fcde00;
}

/* コンテンツ要素のカラースキーム対応 */
/* 黒背景 */
.color-change.black h2.heading3 {
  border-bottom: 3px solid #fcde00;
}

.color-change.blue h2.heading3 {
  border-bottom: 3px solid #fcde00;
}

.color-change.yellow h2.heading3 {
  border-bottom: 3px solid #016935;
}

.color-change.black .box {
  border: 2px solid #fcde00;
  background-color: #000;
}

.color-change.black .box h4 {
  background: #fcde00;
  color: #000;
}

.color-change.black section.content {
  background: rgba(0, 0, 0, 0.9);
}

.color-change.black #wrapper-project {
  background-color: #000;
}

.color-change.black .tree-footer_top {
  background-color: #000;
}

.color-change.blue .tree-footer_top {
  background-color: #0f3a9b;
}

.color-change.yellow .tree-footer_top {
  background-color: #fcde00;
}

.color-change.black .wrapper-linkBanner {
  background-color: #000;
}

.color-change.blue .wrapper-linkBanner {
  background-color: #0f3a9b;
}

.color-change.yellow .wrapper-linkBanner {
  background-color: #fcde00;
}

.color-change.black #footer {
  background: #000;
}

.color-change.black h3.heading {
  border-top: 2px solid #fcde00;
  border-bottom: 2px solid #fcde00;
}

.color-change.black h2.heading2 {
  border-bottom: 3px solid #fcde00;
}

.color-change.black article.btn {
  border: 2px solid #fcde00;
}

/* 青背景 */
.color-change.blue .box {
  border: 2px solid #fcde00;
  background-color: #0f3a9b;
}

.color-change.blue .box h4 {
  background: #fcde00;
  color: #000;
}

.color-change.blue section.content {
  background: rgba(15, 58, 155, 0.9);
}

.color-change.blue #wrapper-project {
  background-color: #0f3a9b;
}

.color-change.blue #footer {
  background: #0f3a9b;
}

.color-change.blue h3.heading {
  border-top: 2px solid #fcde00;
  border-bottom: 2px solid #fcde00;
}

.color-change.blue h2.heading2 {
  border-bottom: 3px solid #fcde00;
}

.color-change.blue article.btn {
  border: 2px solid #fcde00;
}

/* 黄色背景 */
.color-change.yellow .box {
  border: 2px solid #016935;
  background-color: #fff4a3;
}

.color-change.yellow .box h4 {
  background: #016935;
  color: #fff;
}

.color-change.yellow section.content {
  background: rgba(252, 222, 0, 0.9);
}

.color-change.yellow #wrapper-project {
  background-color: #fcde00;
}

.color-change.yellow #footer {
  background: #fcde00;
}

.color-change.yellow h3.heading {
  border-top: 2px solid #016935;
  border-bottom: 2px solid #016935;
}

.color-change.yellow h2.heading2 {
  border-bottom: 3px solid #016935;
}

.color-change.yellow article.btn {
  border: 2px solid #016935;
}

/* ニュース/レポートリスト部分の配色修正 */

/* コンテナセクションの背景色設定 */
.color-change.black #wrapper-column,
.color-change.black #two_column,
.color-change.black section.content,
.color-change.black section.project {
  background-color: #000;
  color: #fff;
}

.color-change.blue #wrapper-column,
.color-change.blue #two_column,
.color-change.blue section.content,
.color-change.blue section.project {
  background-color: #0f3a9b;
  color: #fff;
}

.color-change.yellow #wrapper-column,
.color-change.yellow #two_column,
.color-change.yellow section.content,
.color-change.yellow section.project {
  background-color: #fcde00;
  color: #000;
}

/* 黒テーマの修正 */
.color-change.black .news article.kiji,
.color-change.black .report article.kiji,
.color-change.black .project article.kiji {
  background-color: transparent; /* 背景を透明に設定して親要素の背景色を表示 */
  color: #fff;
  border-bottom: 4px dotted #555;
}

.color-change.black .news article.kiji a,
.color-change.black .report article.kiji a,
.color-change.black .project article.kiji a {
  color: #fcde00;
}

.color-change.black .news article.kiji time,
.color-change.black .report article.kiji time,
.color-change.black .project article.kiji time {
  color: #ccc;
}

/* 青テーマの修正 */
.color-change.blue .news article.kiji,
.color-change.blue .report article.kiji,
.color-change.blue .project article.kiji {
  background-color: transparent; /* 背景を透明に設定して親要素の背景色を表示 */
  color: #fff;
  border-bottom: 4px dotted #555;
}

.color-change.blue .news article.kiji a,
.color-change.blue .report article.kiji a,
.color-change.blue .project article.kiji a {
  color: #fcde00;
}

.color-change.blue .news article.kiji time,
.color-change.blue .report article.kiji time,
.color-change.blue .project article.kiji time {
  color: #ccc;
}

/* 黄色テーマの修正 */
.color-change.yellow .news article.kiji,
.color-change.yellow .report article.kiji,
.color-change.yellow .project article.kiji {
  background-color: transparent; /* 背景を透明に設定して親要素の背景色を表示 */
  color: #000;
  border-bottom: 4px dotted #016935;
}

.color-change.yellow .news article.kiji a,
.color-change.yellow .report article.kiji a,
.color-change.yellow .project article.kiji a {
  color: #0f3a9b;
  font-weight: bold;
}

.color-change.yellow .news article.kiji time,
.color-change.yellow .report article.kiji time,
.color-change.yellow .project article.kiji time {
  color: #333;
}

/* トップページのレポート・お知らせ部分の修正 */

/* 黒テーマの修正 */
.color-change.black article.kiji_top {
  background-color: transparent;
  color: #fff;
}

.color-change.black article.kiji_top a {
  color: #fff !important;
}

.color-change.black article.kiji_top a span[style*="color:green"],
.color-change.black article.kiji_top a span[style*="font-size:1.1em"],
.color-change.black article.kiji_top a span[style*="font-size:1.3em"] {
  color: #fcde00 !important;
}

.color-change.black article.kiji_top span[style*="font-size:0.9em"] {
  color: #ccc !important;
}

.color-change.black .newsDotLine {
  border-bottom: 4px dotted #555;
}

/* 青テーマの修正 */
.color-change.blue article.kiji_top {
  background-color: transparent;
  color: #fff;
}

.color-change.blue article.kiji_top a {
  color: #fff !important;
}

.color-change.blue article.kiji_top a span[style*="color:green"],
.color-change.blue article.kiji_top a span[style*="font-size:1.1em"],
.color-change.blue article.kiji_top a span[style*="font-size:1.3em"] {
  color: #fcde00 !important;
}

.color-change.blue article.kiji_top span[style*="font-size:0.9em"] {
  color: #ccc !important;
}

.color-change.blue .newsDotLine {
  border-bottom: 4px dotted #555;
}

/* 黄色テーマの修正 */
.color-change.yellow article.kiji_top {
  background-color: transparent;
  color: #000;
}

.color-change.yellow article.kiji_top a {
  color: #000 !important;
}

.color-change.yellow article.kiji_top a span[style*="color:green"],
.color-change.yellow article.kiji_top a span[style*="font-size:1.1em"],
.color-change.yellow article.kiji_top a span[style*="font-size:1.3em"] {
  color: #016935 !important;
}

.color-change.yellow article.kiji_top span[style*="font-size:0.9em"] {
  color: #333 !important;
}

.color-change.yellow .newsDotLine {
  border-bottom: 4px dotted #016935;
}

/* 「もっと見る」ボタンの背景も修正 */
.color-change.black article.btn,
.color-change.blue article.btn {
  border: 2px solid #fcde00;
  background-color: transparent;
}

.color-change.yellow article.btn {
  border: 2px solid #016935;
  background-color: transparent;
}

.color-change.black article.btn a,
.color-change.blue article.btn a {
  color: #fff !important;
  text-decoration: none;
}

.color-change.yellow article.btn a {
  color: #000 !important;
  text-decoration: none;
}

/* インラインスタイル上書き用の強力なセレクタ */
.color-change.black #wrapper-column span[style*="color:green"],
.color-change.blue #wrapper-column span[style*="color:green"] {
  color: #fcde00 !important;
}

.color-change.yellow #wrapper-column span[style*="color:green"] {
  color: #016935 !important;
}

/* 画像コンテナの調整 */
.color-change.black .topReportImg,
.color-change.black .ProjectImg,
.color-change.blue .topReportImg,
.color-change.blue .ProjectImg {
  border: 1px solid #444;
  background-color: #333;
}

.color-change.yellow .topReportImg,
.color-change.yellow .ProjectImg {
  border: 1px solid #ccc;
  background-color: #fff;
}

/* スタイル要素の強制上書き */
.color-change.black span[style*="color:green"],
.color-change.blue span[style*="color:green"] {
  color: #fcde00 !important;
}

.color-change.yellow span[style*="color:green"] {
  color: #016935 !important;
}

.report-title {
  font-size: 1.1em;
  color: #016935;
}

.color-change.black .report-title {
  color: #fcde00;
}

.color-change.blue .report-title {
  color: #fcde00;
}

.color-change.yellow .report-title {
  color: #016935;
}

/* プロジェクトタイトルのスタイル調整 (インラインスタイルの上書き) */
.color-change.black section.project span[style*="font-size:1.3em"],
.color-change.blue section.project span[style*="font-size:1.3em"] {
  color: #fcde00 !important;
}

.color-change.yellow section.project span[style*="font-size:1.3em"] {
  color: #016935 !important;
}

/* 「さらに詳しくみる」リンクの色 */
.color-change.black section.project p.s-more a,
.color-change.blue section.project p.s-more a {
  color: #fcde00 !important;
}

.color-change.yellow section.project p.s-more a {
  color: #016935 !important;
}

/* 本文テキストの調整 */
.color-change.black section.project p,
.color-change.blue section.project p {
  color: #ccc;
}

.color-change.yellow section.project p {
  color: #333;
}

/* 黒背景テーマ */
.color-change.black .description,
.color-change.black .description p {
  color: #fff; /* 白色テキスト */
}

/* 青背景テーマ */
.color-change.blue .description,
.color-change.blue .description p {
  color: #fff; /* 白色テキスト */
}

/* 黄色背景テーマ */
.color-change.yellow .description,
.color-change.yellow .description p {
  color: #000; /* 黒色テキスト */
}

/* アクセシビリティ強化のための追加スタイル */

/* リンクの強調 */
.color-change.blue a:focus,
.color-change.blue a:hover, 
.color-change.black a:focus,
.color-change.black a:hover, 
.color-change.yellow a:focus,
.color-change.yellow a:hover
{
  text-decoration: underline;
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* ボタンやフォーム要素の強調 */
.color-change button:focus,
.color-change input:focus,
.color-change select:focus,
.color-change textarea:focus {
  outline: 3px solid #fcde00;
  outline-offset: 2px;
}

/* コントラスト強化のためのテキスト背景 */
.color-change.black .high-contrast,
.color-change.blue .high-contrast {
  background-color: rgba(255, 255, 255, 0.2);
  padding: 2px 4px;
  border-radius: 3px;
}

.color-change.yellow .high-contrast {
  background-color: rgba(0, 0, 0, 0.1);
  padding: 2px 4px;
  border-radius: 3px;
}

/* スキップナビゲーション */
.skip-to-content {
  position: absolute;
  top: -40px;
  left: 0;
  background: #fcde00;
  color: #000;
  padding: 8px;
  z-index: 100;
  transition: top 0.3s;
}

.skip-to-content:focus {
  top: 0;
}

/* フォームのアクセシビリティ強化 */
input, select, textarea {
  font-size: 16px; /* モバイルでのズームを防止 */
  padding: 8px;
  border: 2px solid #016935;
  border-radius: 4px;
}

/* ラベルとフォーム要素の関連付け視覚的に明確に */
label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

/* エラーメッセージの視覚的強調 */
.error-message {
  color: #ff0000;
  background-color: #ffeeee;
  border: 1px solid #ff0000;
  padding: 5px 10px;
  margin: 5px 0;
  border-radius: 4px;
}

/* 必須フィールドの視覚的なマーキング */
.required::after {
  content: "*";
  color: #ff0000;
  margin-left: 3px;
}

/* テーブルのアクセシビリティ向上 */
table.accessible {
  border-collapse: collapse;
  width: 100%;
}

table.accessible th,
table.accessible td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}

table.accessible th {
  background-color: #f2f2f2;
  font-weight: bold;
}

/* レスポンシブな表 */
@media screen and (max-width: 600px) {
  table.responsive {
    display: block;
    width: 100%;
  }
  
  table.responsive thead, 
  table.responsive tbody, 
  table.responsive th, 
  table.responsive td, 
  table.responsive tr {
    display: block;
  }
  
  table.responsive thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  
  table.responsive tr {
    border: 1px solid #ccc;
    margin-bottom: 15px;
  }
  
  table.responsive td {
    border: none;
    border-bottom: 1px solid #ccc;
    position: relative;
    padding-left: 50%;
  }
  
  table.responsive td:before {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
    content: attr(data-label);
    font-weight: bold;
  }
}

/* 印刷時のアクセシビリティスタイル */
@media print {
  body {
    background: #fff !important;
    color: #000 !important;
    font-size: 12pt;
  }
  
  a {
    color: #0000FF !important;
    text-decoration: underline;
  }
  
  a[href]:after {
    content: " (" attr(href) ")";
  }
  
  .accessibility-controls,
  .skip-to-content,
  nav#mainNav {
    display: none !important;
  }
}

/* アクセシビリティ設定ページのスタイル - サイトデザインとの整合性重視 */

/* 設定オプション全体のコンテナ */
.font-size-options,
.bg-color-options {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 20px 0 30px 0;
}

/* 各設定ボタン */
.setting-btn {
  flex: 1;
  min-width: 200px;
  background-color: #fff;
  border: 2px solid #e0e0e0;
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 15px;
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
}

.setting-btn:hover {
  border-color: #016935;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
}

/* マルク付きリストの上部スペース調整 */
.setting-btn ul.marui {
  margin-top: 0;
}

/* プレビュー画像のコンテナ */
.setting-preview {
  text-align: center;
  margin: 15px 0;
  background-color: #f8f8f8;
  padding: 10px;
  border-radius: 5px;
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.setting-preview img {
  max-width: 100%;
  max-height: 100px;
  object-fit: contain;
}

/* 設定の説明テキスト */
.setting-description {
  text-align: center;
  color: #666;
  font-size: 0.9em;
  margin-top: 10px;
}

/* アクティブな設定ボタン */
.setting-btn.active {
  border-color: #016935;
  border-width: 3px;
  background-color: #f0f7f3;
}

/* 選択マーク（チェックマーク）*/
.setting-btn.active::after {
  content: "✓";
  position: absolute;
  top: 10px;
  right: 10px;
  width: 24px;
  height: 24px;
  background-color: #016935;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 14px;
}

/* 配色設定のプレビュー調整 */
.bg-color-options .black-btn .setting-preview {
  background-color: #000;
}

.bg-color-options .blue-btn .setting-preview {
  background-color: #0f3a9b;
}

.bg-color-options .yellow-btn .setting-preview {
  background-color: #fcde00;
}

/* フォントサイズのプレビュー調整 */
.font-size-options .small-btn .setting-preview {
  font-size: 0.8em;
}

.font-size-options .big-btn .setting-preview {
  font-size: 1.2em;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .font-size-options,
  .bg-color-options {
    flex-direction: column;
  }
  
  .setting-btn {
    width: 100%;
    max-width: 100%;
  }
}

/* 色設定がテーマに反映されるようにするための追加スタイル */
.color-change.black .setting-btn {
  background-color: #222;
  color: #fff;
  border-color: #555;
}

.color-change.black .setting-btn:hover {
  border-color: #fcde00;
}

.color-change.black .setting-btn.active {
  border-color: #fcde00;
  background-color: #333;
}

.color-change.black .setting-btn .setting-description {
  color: #ccc;
}

.color-change.black .setting-btn.active::after {
  background-color: #fcde00;
  color: #000;
}

.color-change.blue .setting-btn {
  background-color: #0a2875;
  color: #fff;
  border-color: #2a4c9a;
}

.color-change.blue .setting-btn:hover {
  border-color: #fcde00;
}

.color-change.blue .setting-btn.active {
  border-color: #fcde00;
  background-color: #0d328c;
}

.color-change.blue .setting-btn .setting-description {
  color: #ccc;
}

.color-change.blue .setting-btn.active::after {
  background-color: #fcde00;
  color: #000;
}

.color-change.yellow .setting-btn {
  background-color: #fff4a3;
  color: #000;
  border-color: #e5c800;
}

.color-change.yellow .setting-btn:hover {
  border-color: #016935;
}

.color-change.yellow .setting-btn.active {
  border-color: #016935;
  background-color: #ffefac;
}

.color-change.yellow .setting-btn .setting-description {
  color: #333;
}

.color-change.yellow .setting-btn.active::after {
  background-color: #016935;
  color: #fff;
}

/* ナビゲーションメニューのアクセシビリティ対応 */
@media(max-width: 979px){
/* 黒背景テーマ */
.color-change.black .fff .menu span {
  color: #fff;
}

.color-change.black .panel {
  background-color: #222;
  border: 1px solid #444;
}

.color-change.black .panel p.spmenu a {
  color: #fcde00;
}

.color-change.black .panel .cp_navi {
  color: #ccc;
}

.color-change.black .panel .cp_navi .navMenu a {
  color: #fcde00;
}

.color-change.black .panel .cp_navi .navMenu a:hover,
.color-change.black .panel .cp_navi .navMenu a:focus {
  color: #fff;
  text-decoration: underline;
  outline: 2px solid #fcde00;
  outline-offset: 2px;
}

/* 青背景テーマ */
.color-change.blue .fff .menu span {
  color: #fff;
}

.color-change.blue .panel {
  background-color: #0a2875;
  border: 1px solid #2a4c9a;
}

.color-change.blue .panel p.spmenu a {
  color: #fcde00;
}

.color-change.blue .panel .cp_navi {
  color: #ccc;
}

.color-change.blue .panel .cp_navi .navMenu a {
  color: #fcde00;
}

.color-change.blue .panel .cp_navi .navMenu a:hover,
.color-change.blue .panel .cp_navi .navMenu a:focus {
  color: #fff;
  text-decoration: underline;
  outline: 2px solid #fcde00;
  outline-offset: 2px;
}

/* 黄色背景テーマ */
.color-change.yellow .fff .menu span {
  color: #000;
}

.color-change.yellow .panel {
  background-color: #fff4a3;
  border: 1px solid #e5c800;
}

.color-change.yellow .panel p.spmenu a {
  color: #016935;
}

.color-change.yellow .panel .cp_navi {
  color: #333;
}

.color-change.yellow .panel .cp_navi .navMenu a {
  color: #016935;
  font-weight: bold;
}

.color-change.yellow .panel .cp_navi .navMenu a:hover,
.color-change.yellow .panel .cp_navi .navMenu a:focus {
  color: #000;
  text-decoration: underline;
  outline: 2px solid #016935;
  outline-offset: 2px;
}

/* メニュー区切り文字の色調整 */
.color-change.black .panel .cp_navi,
.color-change.blue .panel .cp_navi {
  color: #666;
}

.color-change.yellow .panel .cp_navi {
  color: #333;
}

/* 検索アイコンとAaアイコンの調整 */
.color-change.black .panel p.spmenu img[src*="search_g.png"],
.color-change.blue .panel p.spmenu img[src*="search_g.png"] {
  filter: brightness(0) invert(1);
}

.color-change.yellow .panel p.spmenu img[src*="search_g.png"] {
  filter: brightness(0);
}

/* メニューアイコンの背景を透明に */
.color-change.black .fff .menu,
.color-change.blue .fff .menu,
.color-change.yellow .fff .menu {
  background-color: transparent;
}

.color-change.black .fff .menu.menuOpen,
.color-change.blue .fff .menu.menuOpen,
.color-change.yellow .fff .menu.menuOpen {
  background-color: transparent !important;
}


/* メニューパネルの表示時の背景とスタイル */
.color-change.blue .fff .menu.menuOpen + div.panel {
  background-color: #162d93 !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}

.color-change.black .fff .menu.menuOpen + div.panel {
  background-color: #333 !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}


.color-change.yellow .fff .menu.menuOpen + div.panel {
  background-color: #fff4a3 !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* メニューパネルの表示時の背景とスタイル */
.color-change.blue .fff .menu.menuOpen + div.panel p.spmenu {
  background-color: #162d93 !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}

.color-change.black .fff .menu.menuOpen + div.panel p.spmenu {
  background-color: #333 !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}
.color-change.yellow .fff .menu.menuOpen + div.panel p.spmenu {
  background-color: #fff4a3 !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* アクセシビリティ強化: フォーカス状態の視覚的フィードバック */
.color-change.black .panel a:focus,
.color-change.blue .panel a:focus {
  outline: 2px solid #fcde00;
  outline-offset: 2px;
}

.color-change.yellow .panel a:focus {
  outline: 2px solid #016935;
  outline-offset: 2px;
}
}

/* モバイル表示のための調整 */
@media only screen and (max-width: 768px) {
  .color-change.black .panel .cp_navi,
  .color-change.blue .panel .cp_navi,
  .color-change.yellow .panel .cp_navi {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .color-change.black .panel .cp_navi .navMenu,
  .color-change.blue .panel .cp_navi .navMenu,
  .color-change.yellow .panel .cp_navi .navMenu {
    margin: 5px 0;
  }

  /* モバイルでの区切り文字を非表示 */
  .color-change.black .panel .cp_navi .navMenu + .navMenu:before,
  .color-change.blue .panel .cp_navi .navMenu + .navMenu:before,
  .color-change.yellow .panel .cp_navi .navMenu + .navMenu:before {
    content: "";
    margin: 0;
  }
}

/* メニューボタンの強調表示 */
.fff .menu:focus,
.fff .menu:hover {
  outline: none;
}

.color-change.black .fff .menu:focus span,
.color-change.black .fff .menu:hover span,
.color-change.blue .fff .menu:focus span,
.color-change.blue .fff .menu:hover span {
  color: #fcde00;
}

.color-change.yellow .fff .menu:focus span,
.color-change.yellow .fff .menu:hover span {
  color: #016935;
}