:root {
  --control-h: 40px;
  --control-fs: 0.95rem;
}
body {
  font-family: "Noto Sans JP", sans-serif;
  margin: 0;
  background: #ffffff;
  color: #333;
  line-height: 1.6;
}


/* =========================================
   既存スタイル
   ========================================= */
.container { width: 90%; max-width: 1400px; margin: 0 auto; }

header.page-header { 
  background: #009C89; 
  color: #fff; 
  padding: 2rem 0; 
  text-align: center; 
}
header.page-header h1 { 
  font-size: 1.6rem; 
  margin: 0; 
}
.page-header-kazari{ 
  background: #009C89; 
  min-height: 50px;
}

.filter-area { background: #328176/*#3FA294*/; padding: 1rem 0; }
.filter-container { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem; justify-content: flex-start; }
.filter-container span.count { color: #fff; font-weight: 600; font-size: 1rem; display: block; width: 100%; margin-bottom: 0.5rem; }

/* ★★★ selectのスタイル（multipleではないもののみ） ★★★ */
select:not([multiple]) {
  height: var(--control-h);
  line-height: var(--control-h);
  font-size: var(--control-fs);
  padding: 0 .75rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  background-color: #fff; 
  color: #333;
  box-sizing: border-box;
  flex: 0 1 240px;
  display: block;
  -webkit-appearance: none;
  appearance: none;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23333' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 16px;
}

/* 複数選択(multiple)が指定されたselectの基本スタイル */
select[multiple] {
  flex: 0 1 240px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: var(--control-fs);
  color: #333;
  background-color: #fff;
  min-height: 40px;
}

select option { font-size: var(--control-fs); }
.toggle-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  height: var(--control-h);
  padding: 0 .75rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fff;
  font-size: calc(var(--control-fs)*0.9);
  color: #333;
  box-sizing: border-box;
  flex: 0 1 240px;
}

.switch { position: relative; width: 44px; height: 22px; }
.switch input { display: none; }
.slider { position: absolute; inset: 0; cursor: pointer; background-color: #cfd2d4; transition: 0.2s; border-radius: 999px; }
.slider::before { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: 0.2s; }
input:checked + .slider { background-color: #3FA294; }
input:checked + .slider::before { transform: translateX(22px); }
.guide-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  height: var(--control-h);
  padding: 0 .9rem;
  background: #00584E;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 6px;
  font-size: var(--control-fs);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity .2s ease;
  flex: 0 1 240px;
  box-sizing: border-box;
}
.guide-button:hover { opacity: .9; }
.guide-button .q-badge { display: inline-flex; justify-content: center; align-items: center; width: 20px; height: 20px; border: 1px solid #fff; border-radius: 9999px; font-size: .9rem; line-height: 1; }
.modal { display: none; position: fixed; z-index: 100; inset: 0; background: rgba(0,0,0,0.5); place-items: center; }

.modal-content {
  background: #fff;
  border-radius: 8px;
  width: min(95%, 1200px);
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
  position: relative;
  margin: auto;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}

.close-btn {
  position: absolute;
  top: .5rem;
  right: .5rem;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #999;
  z-index: 10;
}

.modal-body {
  padding: 2rem;
  overflow-y: auto;
}
h2.section-title { background: #D5FFFA; padding: 1rem; margin-top: 2rem; font-size: 1.2rem; border-left: 5px solid #009C89; }
h2.section-title span{ font-size: 0.95rem; font-weight: normal; }
table { width: 100%; border-collapse: collapse; margin-top: 1rem; background: #fff; }
th, td { border: 1px solid #ccc; padding: .4rem; text-align: left; vertical-align: top; }
th { background: #D9D9D9; font-weight: bold; }
th.aomidori { background: #D5FFFA; font-weight: bold; }
td ul{
  padding-left: 16px;
  margin-left: 0;
}
td ul > li::marker {
  font-size: 0.6em;
}
td ul > li {
  padding-left: 0;
}
td p.kaiji_link{
  margin-left:16px;
}
tbody > tr > td:first-child > p:not(.btn_line){
  font-size:110%;
}

.link-icon {
  --icon-size: 6px;
  --icon-gap: 0.4em;
  --icon-color: currentColor;

  position: relative;
  padding-left: calc(var(--icon-size) + var(--icon-gap));
  line-height: 1.2;

  /* buttonのデフォルトを消す */
  background: none;
  border: none;
  font: inherit;
  cursor: pointer;
  text-align: left;

  /* ▼リンク見た目 */
  color: #0059d6;
  text-decoration: underline;
}

/* アイコン */
.link-icon::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 var(--icon-size) var(--icon-size) var(--icon-size);
  border-color: transparent transparent var(--icon-color) transparent;
  transform: translateY(-50%) rotate(90deg);
  transition: transform 0.2s ease;
  pointer-events: none;
}

/* hover */
.link-icon:hover {
  color: #003f99; /* 少し濃い青 */
  text-decoration: underline;
}

/* active（クリック時） */
.link-icon:active {
  color: #002a66;
}

/* visited風（任意） */
.link-icon.visited {
  color: #551A8B;
}

/* focus（アクセシビリティ） */
.link-icon:focus {
  outline: 2px solid #0059d6;
  outline-offset: 2px;
}
.btn_line {	line-height: 2.2;}
.btn {	border: 1px solid #aaa;	border-radius: 100vh;	padding: 1px 6px 2px;	text-decoration:none;	white-space:nowrap;}
.btn_blue  { background-color:#005F86; color:#fff; }
.btn_water { background-color:#007EB1; color:#fff; }
.btn_paleblue {	background-color: #caf0ff;	color: #000;}
.btn_green {	background-color: #00584e;	color: #fff;}
.btn_lightgreen {	background-color: #B6EFB8;	color: #000;}
.btn_gray {	background-color: #D9D9D9;	color: #000;}

.tag_sectorA_1,
.tag_sectorA_2,
.tag_sectorA_3,
.tag_sectorA_4,
.tag_sectorB_11,
.tag_sectorB_12,
.tag_sectorB_13,
.tag_sectorB_14,
.tag_sectorB_21,
.tag_sectorB_22,
.tag_sectorB_23,
.tag_sectorB_24,
.tag_risk,
.tag_chance,
.tag_risk_type_1,
.tag_risk_type_2,
.tag_risk_type_3,
.tag_risk_type_4,
.tag_risk_detail_1,
.tag_risk_detail_2,
.tag_risk_detail_3,
.tag_risk_detail_4,
.tag_risk_detail_5,
.tag_risk_detail_6,
.tag_risk_detail_7,
.tag_risk_detail_8,
.tag_risk_detail_9,
.tag_risk_detail_10,
.tag_risk_detail_11,
.tag_risk_detail_12,
.tag_risk_detail_13,
.tag_risk_detail_14,
.tag_risk_detail_15,
.tag_risk_detail_16,
.tag_risk_detail_17,
.tag_location_1,
.tag_location_2,
.tag_location_3,
.tag_location_4,
.tag_strategy_1,
.tag_strategy_2,
.tag_strategy_3,
.tag_strategy_4,
.tag_strategy_5{
  cursor:pointer;
}

/* 改行用のスタイル */
.flex-break {
  flex-basis: 100%;
  height: 0;
}

/* アコーディオン用のスタイル */
.toggle-details {
  display: none;
  padding-left: calc(var(--icon-size) + var(--icon-gap));
  margin-top: 0.25em;
  color: #333;
}
.toggle-item.active .link-icon::before {
  transform: translateY(-50%) rotate(180deg);
}
.toggle-item.active .toggle-details {
  display: block;
}
.toggle-item {
  margin-bottom: 0.5em;
}
.lisk_chance{
  font-weight: bold;
}
.red{
  color: #FF0004!important;
}
.midori{
  color: #075E70!important;
}
.hutoku_kasen{
  font-weight: bold;
  text-decoration: underline;
}

/* multiple-select 用のスタイル上書き */
.ms-parent {
  flex: 0 1 240px;
  width: 240px;
  font-size: var(--control-fs);
  color: #333;
}
.ms-choice {
  display: block;
  width: 100%;
  height: var(--control-h);
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid #ccc;
  border-radius: 6px;
  background-color: #fff;
  box-sizing: border-box;
}
.ms-choice > span {
  position: absolute;
  top: 0;
  left: 0;
  right: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  padding-left: .75rem;
  line-height: var(--control-h);
  color: #333;
}
.ms-choice > div {
  position: absolute;
  top: 0;
  right: 0;
  width: 20px;
  height: 100%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23333' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E") no-repeat center center;
  background-size: 16px 16px;
  right: 0.75rem;
}
.ms-drop {
  border-radius: 6px;
  border: 1px solid #ccc;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  z-index: 101;
}
.ms-drop input[type="checkbox"] {
  margin-right: 5px;
  vertical-align: middle;
}
.ms-drop label {
  vertical-align: middle;
}
.ms-select-all label {
  font-weight: bold;
  color: #00584E;
}
.ms-drop li.group {
  display: none;
}

/* 選択中フィルター表示エリア */
.current-filters-area {
  background: #f4f4f4;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 1rem 1.5rem;
  margin-top: 2rem;
}
.current-filters-area h3 {
  margin: 0 0 0.75rem 0;
  font-size: 1rem;
  font-weight: 600;
  border-bottom: 2px solid #3FA294;
  padding-bottom: 0.5rem;
}
.current-filters-area ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.current-filters-area li {
  margin-bottom: 0.25rem;
  font-size: 0.95rem; 
  display: flex;
  flex-wrap: wrap; 
  align-items: center;
  line-height: 2.2;
}
.current-filters-area li strong {
  display: inline-block;
  min-width: 130px;
  color: #00584E; 
  margin-right: 0.5em;
  font-weight: 600;
  line-height: 1.6;
  flex-shrink: 0;
}

.filter-tag {
  display: inline-flex;
  align-items: center;
  font-size: 0.9rem;
  background-color: #3FA294;
  color: #fff;
  border-radius: 4px;
  padding: 4px 8px;
  margin: 3px 6px 3px 0;
  white-space: nowrap;
}
.remove-filter-btn {
  background: none;
  border: none;
  color: #fff;
  font-weight: bold;
  font-size: 1rem;
  line-height: 1;
  padding: 0 0 0 8px;
  margin-left: 4px;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s;
}
.remove-filter-btn:hover {
  opacity: 1;
}

/* =========================================
   資料リスト用スタイル (.network_list など)
   ========================================= */
/* "飾り枠なし" テキスト */
.text_area_text {
  margin-bottom: 1em;
  font-weight: bold;
  color: #333;
}
.kazari_waku_nashi {
  border: none !important;
  background: none !important;
  padding: 0 !important;
}

/* リスト全体 */
.network_list {
  list-style: none;
  padding: 0;
  margin: 20px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* アイテム間の隙間 */
}

/* 3列レイアウト (.three) */
.network_list.three .item {
  /* 3列にする計算 (100% / 3 - gap調整) */
  width: calc(33.333% - 14px);
  box-sizing: border-box;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
  padding: 15px;
  display: flex;
  flex-direction: column;
}

/* カード内部 */
.network_list .top {
  width: 100%;
}

/* ロゴエリア */
.network_list .logo {
  text-align: center;
  margin-bottom: 15px;
  height: 160px; /* 高さを揃える */
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f9f9f9;
  border: 1px solid #eee;
  
  /* ▼▼▼ 画像はみ出し防止の修正 ▼▼▼ */
  padding: 5px; 
  box-sizing: border-box;
  overflow: hidden; 
  /* ▲▲▲ ここまで ▲▲▲ */
}

/* ▼▼▼ spanがある場合のサイズ調整 ▼▼▼ */
.network_list .logo span {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.network_list .logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto; /* アスペクト比維持 */
  height: auto; /* アスペクト比維持 */
  object-fit: contain;
}

/* リンクテキスト */
.network_list .name {
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 8px;
}

.network_list .name a {
  text-decoration: none;
  color: #00584E;
  font-weight: bold;
  display: inline-block;
  padding-left: 24px; /* アイコン分のスペース */
  position: relative;
}

.network_list .name a:hover {
  text-decoration: underline;
  opacity: 0.8;
}

.network_list .name ul {
  list-style-type:disc;
  margin-top:5px;
  margin-left:-16px;
}

/* PDF/動画アイコン/Excelアイコン (疑似要素で再現) */
.link_icon_pdf::before,
.link_icon_movie::before,
.link_icon_excel::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px; /* 位置微調整 */
  width: 18px;
  height: 18px;
  background-size: contain;
  background-repeat: no-repeat;
}

/* PDFアイコン (赤系) */
.link_icon_pdf::before {
  /* SVG Data URI */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23d32f2f'%3E%3Cpath d='M20 2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-8.5 7.5c0 .83-.67 1.5-1.5 1.5H9v2H7.5V7H10c.83 0 1.5.67 1.5 1.5v2.5zm2.5 0c0 .83-.67 1.5-1.5 1.5h-2.5V7H12c.83 0 1.5.67 1.5 1.5v2.5zm5 0c0 .83-.67 1.5-1.5 1.5H16v2h-1.5V7h2.5c.83 0 1.5.67 1.5 1.5v2.5z'/%3E%3C/svg%3E");
}

/* 動画アイコン (青系) */
.link_icon_movie::before {
  /* SVG Data URI */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231976d2'%3E%3Cpath d='M18 3v2h-2V3H8v2H6V3H4v18h2v-2h2v2h8v-2h2v2h2V3h-2zM8 17H6v-2h2v2zm0-4H6v-2h2v2zm0-4H6V7h2v2zm10 8h-2v-2h2v2zm0-4h-2v-2h2v2zm0-4h-2V7h2v2z'/%3E%3C/svg%3E");
}

/* Excelアイコン (緑系) */
.link_icon_excel::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2300803c'%3E%3Cpath d='M19 2H8c-1.1 0-2 .9-2 2v3H5c-.55 0-1 .45-1 1v8c0 .55.45 1 1 1h1v3c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7.75 14.5L9.5 13l1.75-3.5h1.5L11 13l2.75 3.5h-1.5z'/%3E%3C/svg%3E");
}

.pc_line{
  display: block;
}

.sp_line{
  display: inline;
}

.pc_sp_line{
  display: block;
}

/* =========================================
   スマホ用レスポンシブスタイル
   ========================================= */
@media (max-width: 768px) {

  /* モーダル */
  .modal-content { width: 85%; }
  .modal-body { padding: 1.5rem; }

  /* フィルターエリアの調整 */
  .filter-container { 
    flex-direction: column; 
    align-items: stretch; 
    
    /* .container (width: 90%) の指定を上書き */
    width: 100%;
    max-width: 100%;
    
    /* 左右の余白を追加 */
    padding-left: 1rem;
    padding-right: 1rem;
    box-sizing: border-box;
  }
  
  /* スマホ表示対応： .ms-parent をセレクタに追加 */
  select, .toggle-box, .guide-button, .ms-parent {
    width: 100%;
    flex-basis: auto; 
  }
  
  .toggle-box{
    font-size: var(--control-fs);
  }

  .js-scroll{
    width: 100%;
    overflow: scroll;
  }
  .js-scroll table{
    width: 1400px;
  }
  .btn_line {
    line-height: 2.5;
  }

  /* 資料リスト用スマホスタイル */
  .network_list {
    flex-direction: column; /* 縦並び */
    gap: 15px;
  }
  .network_list.three .item {
    width: 100%; /* 横幅いっぱい */
  }
  .network_list .logo {
    height: auto; /* 高さは自動 */
    min-height: 150px;
  }

  .pc_line{
    display: inline;
  }

  .sp_line{
    display: block;
  }
}


/* =========================================
   文字サイズ変更
   ========================================= */
.big_text .container{
	font-size: 1.1em;
}

.big_text h2.section-title {
  font-size: calc(1.2rem * 1.1);
}

.big_text h2.section-title span {
  font-size: calc(0.95rem * 1.1);
}

.big_text .network_list .name {
  font-size: calc(0.9rem * 1.1);
}

.big_text .filter-container span.count {
  font-size: calc(1rem * 1.1);
}

.big_text .ms-parent {
  font-size: calc(var(--control-fs) * 1.1);
}

.big_text .current-filters-area h3 {
  font-size: calc(1rem * 1.1);
}

.big_text .filter-tag {
  font-size: calc(0.9rem * 1.1);
}
.big_text .remove-filter-btn {
  font-size: calc(1rem * 1.1);
}

.big_text .network_list .name {
  font-size: calc(0.9rem * 1.1);
}