/* download_style.css */
/* ========= 共通: トークン / ベース ========= */
:root{
  --c-border:#c9c9c9;
  --c-text:#222;
  --c-muted:#777;
  --c-primary:#1677ff;
  --c-primary-fg:#ffffff;
  --c-primary-weak:#e6f0ff;
  --c-warn:#d9480f;
  --c-bg:#fff;
  --c-panel:#f6f6f6;
  --c-gray:#efefef;
  --container-max: 1200px;
  --gutter: 16px;
  --aside-w: 220px;
  --aside-gap: 24px;
}
*{ box-sizing:border-box; }
/*html,body{
  margin:0; padding:0; background:var(--c-bg); color:var(--c-text);
  font-family:system-ui,-apple-system,"Segoe UI","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
}*/
html {
	width: 100%;
	height:100%;
	margin : 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	overflow: scroll;

/*	overflow-y: scroll;
	overflow-x: hidden;*/
}

body{
  -webkit-text-size-adjust: 100%;
  min-width: 1000px;
/*  width: 100%; */
  font-size: 100%;
/*  font-size: 14px; */
  color: #313131;
  background-color: #e5e5e5; /* debug mode */
  background-color: #fff;
  margin: 0px auto;
  padding: 0px;
}
button, a{ font:inherit; color:inherit; }

/* ========= 共通: ヘッダ / ゲージ ========= */
/*.gauge{
  display:grid; 
  grid-template-columns:auto 500px auto;
  align-items:center; 
  gap:8px;
  margin-left: auto;
}*/

/*PC表示*/
.gauge {
  max-width: var(--container-max);      /* ←黄色帯と同じ幅に合わせる */
  margin: 0;         /* センター配置 */
  display: flex;
  align-items: center;
  justify-content: flex-end; /* 右端を基準に並べる */
  gap: 12px;                 /* バーとテキストの間隔 */
  flex: 1;
}

/* 進捗率ゲージの警告表示 */
.download-warning-alert{
  display: none;
  background: #d32f2f;
  color: #fff;
  padding: 8px 12px;
  font-size: 12px;
  line-height: 1.4;
}

.download-warning-alert p{
margin: 0;
}

.gauge__text{ color:#313131; white-space: nowrap; }
.gauge__track{ height:8px; width: 175px; background:#fff; border-radius:0; overflow:hidden; border:1px solid #000; }
.gauge__fill{ height:100%; width:0%; background:#ff6b6b; border-radius:0; }
.gauge__max{ color:#313131; white-space: nowrap;}

@media (max-width: 600px){
  .gauge{
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
  }
  /*.gauge__max{ justify-self: end; }*/
}

/* ========= 共通: タブ（ベースデザイン） ========= */
.tabs-panel{ margin-bottom: 12px; }
.tabs{ display:flex; gap:8px; margin-bottom:8px; flex-wrap:wrap; }
.tab{
  display:inline-flex; align-items:center; justify-content:center;
  padding:8px 12px; border:1px solid var(--c-border); border-radius:0px;
  background:#fff; text-decoration:none;
}
.tab.active{ background:var(--c-primary); color:var(--c-primary-fg); border-color:var(--c-primary); }
.tab[aria-disabled="true"]{ color:var(--c-muted); background:#fafafa; cursor:not-allowed; }

/* ========= 共通: カード / ボタン ========= */
.card{
  border:1px solid var(--c-border); 
  background:#fff; 
  border-radius:0px; 
  padding:12px;
}
.card__header{
  display:flex; 
  justify-content:space-between; 
  align-items:center; 
  margin-bottom:8px;
}
.card__title{ font-weight:600; }
.link-btn{ 
  background:none;
  border:none; 
  color:var(--c-primary); 
  text-decoration:underline; 
  cursor:pointer; 
  }

.card--download{ padding:0; }
.download-btn{
  width:100%; min-height:96px; border:1px solid #000; background:#ffe7da; color:#7a3b00;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:16px; border-radius:0px; cursor:pointer; font-weight:700;
}
.download-btn:hover{
  background:#f6bf99;
}
.card--actions{ padding:8px; display:flex; align-items:center; justify-content:center; }
.card--actions .link-btn{ width:100%; text-align:center; }
.card__body{ padding:8px 0; }
.download-btn .arrow{ font-size:1.2rem; }

/* ========= ユーティリティ: 非表示要素 ========= */
.is-hidden{ display:none !important; visibility:hidden; }

.status{ margin:4px 0 8px; font-size:0.95rem; }
.status--warn{ color:var(--c-warn); }
.summary{
  display:grid; grid-template-columns: 1fr auto; gap:4px 8px; align-items:center;
  margin-bottom:8px; color:#444;
}
.summary__title{ margin:8px 0 6px; font-weight:600; }
.selected-list{
  margin:0; padding-left:18px; max-height:220px; overflow:auto;
  border:1px dashed #ddd; border-radius:0px; background:#fafafa;
}

/* 小さいカード間隔、カード内部の余白を調整してモックに近づける */
.rightArea .card{
  padding:8px;
  background: var(--c-gray);
  border: none;
}
.rightArea .card + .card{ margin-top:15px; }

/* 指定2ボタンのカードはグレー背景を外す */
.rightArea .card--download,
.rightArea .card--actions{
  background: transparent;
}

.rightArea .card__title{
  font-size: .86rem;
  font-weight: 400;
}

.rightArea .card__body{
  padding: 4px 0;
}

.rightArea .status{
  margin: 2px 0 4px;
  font-size: .92rem;
}

.rightArea .selected-list{
  border: none;
  background: transparent;
  max-height: none;
  padding-left: 14px;
}

/* 選択された項目リストの全ての要素の太字を解除 */
.selected-list li{
  font-weight: normal !important;
}

/* 選択された項目リストの最初の要素の太字を解除 */
.selected-list li:first-child{
  font-weight: normal !important;
}

/* 右ペインの「選択された〜」見出しを枠の外（上）へ出す */
.rightArea .card:not(.card--download):not(.card--actions){
  position: relative;
  padding-top: 12px;
}

.rightArea .card:not(.card--download):not(.card--actions) .card__header{
  position: absolute;
  left: 0;
  top: -1.05em;
  margin: 0;
}

.rightArea .card:not(.card--download):not(.card--actions) .card__body{
  padding-top: 0;
}

/* グレー枠（選択された地点/項目/期間）同士の間隔を広げる */
.rightArea .card:not(.card--download):not(.card--actions)
  + .card:not(.card--download):not(.card--actions){
  margin-top: 25px;
}

/* 状態メッセージのスタイルを微調整 */
.status--warn {
  color: red;
}

/* 非表示状態のクラス */
.is-hidden {
  display: none !important;
}

/* 右ペインのダウンロードボタンと操作ボタンを分離した見た目を調整 */
.card--download{ padding:8px; }
.card--download .download-btn{
  min-height: 56px;
  padding: 8px 10px;
}

/* ダウンロードボタン幅をカード幅に合わせる*/
.rightArea .card--download{
  padding: 0;
}

.card--actions{
  justify-content: flex-start;
  padding: 0;
}

.card--actions .card__body{
  width: 100%;
  padding: 0;
  text-align: left;
}

.card--actions .link-btn{
  width: auto;
  text-align: left;
  padding: 0 5px;
  border: 1px solid #9a9a9a;
  background: #fff;
  color: #313131;
  font-size: .78rem;
  text-decoration: none;
  line-height: 1;
}

/* ===============================
   右パネルを右に出す枠組み（Grid レイアウト）
   =============================== */
.page--with-right-aside .content{
  display: grid;
  grid-template-columns: 1fr var(--aside-w);
  gap: var(--aside-gap);
  max-width: var(--container-max);
  margin-inline: auto; 
  padding: 16px var(--gutter);
}

.page--with-right-aside .leftArea{
  min-width: 0; /* Grid内でのテキストオーバーフロー対策 */
}

/* 右ペインはグレー背景のカードで囲む（モックに近づけるため） */
.page--with-right-aside .leftAreaBody{
  background: var(--c-gray);   /* #efefef */
  border: 1px solid var(--c-border);
  padding: 12px;
}

.page--with-right-aside .rightArea{
  display: flex;
  flex-direction: column;
  gap: 10x;
  margin-top: 0px;
  z-index: 10;
}

/* PC以上は右パネルを sticky にして、スクロール時に追従させる */
@media (min-width: 901px){
  /* 変更: 右ペインを sticky にしない（ページと一緒にスクロールさせる） */
  .page--with-right-aside .rightArea{
    position: static;
    top: auto;
    align-self: start;
    max-height: none;
    overflow-y: visible;
  }
}
/*.page--with-right-aside .leftArea{
  margin-right: 344px; 
  margin-right: calc(var(--aside-w) + var(--aside-gap));
}
.page--with-right-aside .rightArea{
  position: absolute;
  top: 16px; right: 16px;
  width: 320px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}*/

@media (max-width: 900px){
  body{ min-width: 0; }
  
  .page--with-right-aside .content{
    display: block;
  }
  
  .page--with-right-aside .rightArea{
    position: static;
    width: auto;
    right: auto;
    top: auto;
    margin-top: 12px;
    max-height: none;
    overflow-y: visible;
  }
  
  .page--with-right-aside .leftArea{
    margin-right: 0;
  }
}


/* ===============================
   タブの段階表現（hover / active / disabled / active維持）
   対象: .tab （地点・項目・期間）
   =============================== */

/* 1) 未選択 & 有効 のときだけ、hover で淡い青に */
.tab:not(.active):not([aria-disabled="true"]):hover{
  background: color-mix(in srgb, var(--c-primary) 10%, #fff);
  border-color: color-mix(in srgb, var(--c-primary) 40%, var(--c-border));
  /* 文字色は既定のまま（読みやすさを優先） */
}

/* 2) 未選択 & 有効 のときの active（押下中）は hover より少し濃く */
.tab:not(.active):not([aria-disabled="true"]):active{
  background: color-mix(in srgb, var(--c-primary) 25%, #fff);
  border-color: color-mix(in srgb, var(--c-primary) 60%, var(--c-border));
}

/* 3) アクティブタブは hover しても薄く戻らず、既存の濃い青を維持 */
.tab.active:hover,
.tab[aria-current="page"]:hover{
  background: var(--c-primary);
  color: var(--c-primary-fg);
  border-color: var(--c-primary);
}

/* 4) 無効タブは反応しない（色もカーソルもそのまま） */
.tab[aria-disabled="true"]{
  pointer-events: none;              /* クリック／hover 無効化 */
  filter: saturate(0.85);            /* （任意）少しトーンを落とす */
  /* 既存: color:var(--c-muted); background:#fafafa; cursor:not-allowed; があるなら併用OK */
}

/* 5) キーボード操作時の見やすさ（任意・推奨） */
.tab:focus-visible{
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}

h3{
	width: calc(98% - 40px);
	height: 35px;
	color: #0160b0;
	font-size:135%;
	font-weight: normal;
	text-align:center;
	line-height:190%;
	margin: 2em auto 0em auto;
	border: solid 1px #0160b0;
	border-width: 2px 20px;
	padding: 0.4em 0em 0.4em 0em;
}

h3.font_s{
  font-size: 120%;
}
h4{
	width: 95%;
	height: 36px;
	background:#fef9b7;
	font-size:130%;
	font-weight: normal;
	line-height:190%;
	text-indent: 2em;
	margin: 4em auto 2em auto;
	padding: 0.5em 0em 0.4em 0em;
}

h4.font_s{
  font-size: 120%;
}

h3 + h4 {
	margin-top:  2em;
}
/* 先頭ブロックの余白（お好みで 8/12/16px に調整） */
.search-panel-wrap {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 16px var(--gutter) 0;
}

.search-panel {
  width: 100%;
  margin: 0 0 12px;
  padding: .45em 1em;
  background: #efefef;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 16px;
}

.gauge__text,
.gauge__max {
  line-height: 1.4;
}

/* 狭い幅では縦方向に並べる（右寄せは維持） */
@media (max-width: 600px){
  #gaugeArea .gauge-row {
    justify-content: flex-end;
    gap: 4px 8px;
  }
  #gaugeArea #gauge { width: min(320px, 70vw); }
}

/* 警告ポップアップ画面のボタンの配置 */
.warningDialogActions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* 警告ポップアップ画面のボタンの配置（モバイル対応） */
@media (max-width: 600px) {
  .warningDialogActions {
    flex-direction: column;
    align-items: stretch;
  }
}

/* 警告ポップアップ画面のボタンのスタイル */
.warningDialogActions .link-btn {
  width: auto;
  padding: 8px 12px;
  border: 1px solid #9a9a9a;
  background: #AFD4ED;
  color: #313131;
  font-size: .78rem;
  text-decoration: none;
  line-height: 1;
}