@charset "UTF-8";

/*=========================================================
    ※テーブル スタイル情報
=========================================================*/

/* 1. コンテナ設定（サイズ固定とスクロール）  overflow: auto; */
.table-container {
  width: 98%;
  padding: 0px 0px;
/*  height: 700px;*/
  margin: 0px auto;
  overflow-x: scroll;
  overflow-y: scroll;
  border: 0px solid #2891F6;
}

@media (max-width: 500px) {
	.table-container {
		height: 400px;
	}
}


table {
  border-collapse: collapse;
  width: max-content; /* 横幅が狭くならないよう保持 */
  margin: 0px auto;
  font-size: 100%;
/*  font-family: sans-serif;*/
}

/* 2. ヘッダー固定の設定 */
thead th {
  position: sticky;
  z-index: 10;
  background-color: #f2e6d9; /* ヘッダーの背景色 */
  border: 1px solid #666;
  padding: 8px;
  text-align: center;
}

/* 1行目と2行目の固定位置調整 */
thead tr:nth-child(1) th {
  top: 0;
}
thead tr:nth-child(2) th {
  top: 35px; /* 1行目の高さに合わせて調整 */
}

/* 3. セルの基本スタイル */
td {
  width: 84px;
  border: 1px solid #ccc;
  padding: 6px 0.3em;
  text-align: right;
}
td:first-child { text-align: center; } /* 年月列 */

/* 2011年以降の結合セル：枠線なしに見せる設定 */
.merged-row td.no-border-inside {
  text-align: center;
  color: #888;
}

/* 4. 【重要】最終行のみに適用されるスタイル */
tbody tr:last-child td {
  background-color: #e9f5e9 !important; /* 画像に近い薄緑色 */
  border-top: 2px solid #666;    /* 上の太枠 */
  border-bottom: 2px solid #666; /* 下の太枠 */
}


/* 左端1列目(年月)：左に固定 */
th:first-child, td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background-color: #f9f9f9;
    text-align: center;
}

/* 左上の角：最前面に固定 (上にも左にも固定) */
thead tr:nth-child(1) th:first-child,
thead tr:nth-child(2) th:first-child {
    z-index: 13;
    background-color: #f2f2f2;
}



/*=========================================================
    ※タイトル レイアウト
=========================================================*/
/*.title-area {
	width: 100%;
	padding: 1.5em 0px;
	margin: 0px auto;
	text-align: center;
	border-top: 5px solid #2891F6;
	border-bottom: 5px solid #2891F6;
}

h1 {
	font-size: 50px;
	text-align: center;
	letter-spacing: 0.03em;
	line-height: 1.0em;
	color: #1C97C3;
	text-shadow: 5px 3px 5px #808080;
}

/* スマホ対応画面 *　　　　　/
@media (max-width: 768px) {
	 h1 {
		font-size: 30px;
	}
}*/



/*=========================================================
    ※テキスト入力エリア
=========================================================*/
.text-inner { 
	max-width: 1100px;
	margin: 0 auto;
	border: 0px solid #2891F6;
}

.statistical { 
	width: 100%;
	margin: 0 auto;
	padding: 0.5em 5em;
	text-align: left;
	font-size: 120%;
	border: 0px solid #2891F6;
}

@media (max-width: 1100px) {
	.statistical {
		padding: 0.5em 3em;
	}
}

.statistical-text1 { 
	width: 90px;
	margin-left: 2em;
	padding: 0em;
	text-align: left;
	border: 0px solid #2891F6;
}

.statistical-text2 { 
	padding: 0em;
	margin-left: 0em;
	text-align: left;
	line-height: 1.3em;
	border: 0px solid #2891F6;
}

@media (max-width: 1100px) {
	.statistical-text2 {
		margin-left: 4em;
	}
}

.text-center { 
	text-align: center;
}

/*=========================================================
    横並び/縦表示変更
=========================================================*/
.yoko-tate {
	text-align: left;
	display: flex;
	flex-direction: row;
}

@media (max-width: 1100px) {
	.yoko-tate {
		flex-direction: column;
	}
}



.title-text-inner { 
	width: 100%;
	margin: 0 auto;
	text-align: center;
	font-size: 100%;
	border: 0px solid #2891F6;
}

.nengetu-text-inner { 
	width: 100%;
	margin: 0 auto;
	padding-right: 5em;
	font-size: 100%;
	text-align: right;
	border: 0px solid #2891F6;
}

@media (max-width: 500px) {
	.nengetu-text-inner {
		padding-right: 0.5em;
	}
}


.advice-text { 
	width: 100%;
	margin: 0 auto;
	text-align: right;
	font-size: 100%;
	padding-right: 3em;
	border: 0px solid #2891F6;
}

@media (max-width: 500px) {
	.advice-text {
		padding-right: 1.5em;
	}
}

.advice-text-left { 
	width: 100%;
	margin: 0 auto;
	text-align: left;
	font-size: 100%;
	padding-left: 5em;
	border: 0px solid #2891F6;
}

@media (max-width: 500px) {
	.advice-text-left {
		padding-left: 1em;
	}
}

.nengo {
	width: 82px;
	margin: 0 auto;
	padding: 0em;
}

/*=========================================================
    グラフ横幅　width: 870px;
=========================================================*/
.gurafu {
	width: 820px;
	margin: 0 auto;
	padding: 0em;
}



/*=========================================================
    化学工業統計品目
=========================================================*/
.attention {
	margin: 0px auto;
	padding: 0px;
	width: 100%;
	text-align: center;
	display: flex;
	flex-direction: row;
}

@media (max-width: 1100px) {
	.attention {
		flex-direction: column;
	}
}

.attention-article {
	margin: 0em auto 1em auto;
	padding: 0.5em 0.3em;
	width: 250px;
	text-align: left;
	color: #FFF;
	background-color: #F5F5F5;
	border-radius: 20px;
	border: 3px solid #2891F6;
	box-shadow: 3px 7px 5px 0.15rem #808080;
}

@media (max-width: 1100px) {
	.attention-article {
		margin: 0em auto 1.7em auto;
	}
}

.attention-article p {
	margin: auto;
	padding: 0px;
	color: #FFF;
	text-align: center;
	font-size: 110%;
	line-height: 1.5em;
}

/*.attention-article p a {
	color: #FFF;
	font-weight:900;
}*/



/*=========================================================
    スマホ時のグラフをスライド出来るアイコン表示
=========================================================*/
/* デフォルト（PC含む全画面）では非表示にする */
.sp-only {
  display: none;
}

/* 画面幅が767px以下のデバイス（スマホなど）でのみ表示する */
@media screen and (max-width: 500px) {
  .sp-only {
    display: block;
  }
}