@charset "UTF-8";
html {
	font-size: 100%;
}
body {
	font-family: "Hiragino Kaku Gothic PronN", "Hiragino Sans", "BIZ UDPGothic", sans-serif;
	line-height: 1.4;
	color: #432;
}
header {
	color: #FFF;
	position: relative;
	padding: 0px 0px 10px 0px;
	background-repeat: repeat-x;
	background-position: bottom;
}
.mainnav {
	display: flex;
	justify-content: center;
	list-style: none;
}
.page-title {
	font-size: 1.5rem;
	text-align: center;
	margin: 2rem 0 2rem;
	line-height: 1.4;
	background-color: #6e1e52;
	color: #fff;
	border-radius: 5px;
	padding: .5rem;
}
.jqplot-y2axis-label {
	white-space: nowrap; /* 改行を防ぐ */
}
/* ----------------------↑↑　共通の設定　↑↑----------------------- */
a:active {
	color: inherit; /* 親要素の色を継承する */
}
h2 {
	margin: 1rem 0 0;
	line-height: 2;
	text-align: center;
	color: #fff;
	background-color: rgb(53, 120, 128, .9);
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	font-size: 1.3rem;
}
select {
	font-size: 1em;
	padding: 10px;
}
form {
	line-height: 3;
}
form input[type=password],
form input[type=text],
form input[type=submit],
form input[type=reset],
form input[type=button],
form textarea {
	width: 95%;
	font-size: 1em;
	padding: 10px;
}
/* ------------------------------------------ */
nav#global {
	width: 95%;
	margin: 1em auto 20px auto;
}
nav#global ul {
	margin: 2px 0px;
}
nav#global li {
	margin: 2px 0px;
	display: block;
	text-align: left;
	text-indent: 1em;
	font-weight: bold;
	border-left: 1px solid #fff;
	border-radius: 8px;
	-webkit-border-radius: 8px;
	color: #6e1e52;
	background-color: #6e1e52;
	background-image: url(../img/shiro_ico.png);
	background-repeat: no-repeat;
	background-position: right center;
}
nav#global li a {
	display: block;
	padding: 8px 0;
}
nav#global a {
	color: #fff;
	text-decoration: none;
}
/* ----------↓ 自分設定 ↓---------- */
.graph-form {
	background-color: rgb(225, 230, 240);
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	padding: 1rem;
}
.hyojibtn {
	color: #fff;
	font-weight: bold;
	display: block;
	margin-bottom: 1rem;
	padding: 0 1rem;
	font-size: 1em;
	border: solid #999 1px;
	background: rgb(230, 160, 120);
	border-radius: 5px;
	width:20rem; 
	height:2.3rem;
	line-height:2.3rem;
}
/* ----------- */
.hyojibtn {
	position: relative;
	display: flex;
	justify-content: space-around;
	align-items: center;
	margin: 0 auto;
	max-width: 240px;
	padding: 10px 25px;
	color: #543618;
	transition: 0.3s ease-in-out;
	font-weight: 600;
	background: #eeee;
	border-radius: 50px;
	border: 0.2rem solid #543618;
	box-shadow: 0.2rem 0.2rem 0px 0.1rem #cccccc;
}
.hyojibtn:hover {
	transform: translate3d(0.05rem, 0.05rem, 0);
	box-shadow: none;
	opacity: 1;
	transition: all 0.2s;
}
/* ----------- */
.nowbtn {
	padding: 0 .5rem;
	border: #999 solid 1px;
	background:#fff;
	line-height: 2rem;
	border-radius: 3px;
	font-size: .8rem;
}
.bkbtn {
	color: #432;
	display: block;
	padding: .5rem;
	font-size: 1em;
	border: solid #444 1px;
	border-radius: 5px;
	display:block;
	width:10rem; 
	height:2.3rem;
	margin:2rem auto;
	text-align:center;
}
.location, .date {
	background-color: #fff;
	border: solid #999 1px;
	border-radius: 5px;
	padding: 0 1rem;
}
.location, .date, .hyojibtn {
	margin: .5rem;
}
.table {
	display: flex;
	justify-content: center; /* 横方向に中央配置 */
	overflow: auto; /* 必要に応じてスクロールバーを表示 */
}
table {
	border-collapse: collapse;
}
.datatable th {
	background-color: #eee;
	padding: .5rem .2rem;
	font-size: .8rem;
}
.datatable td {
	padding: .35rem ;
	font-size: .8rem;
	text-align: center;
}
.datatable th, .datatable td {
	border: solid 1px #E3E3E3;
}
/* ----------------------------- */
table.point {
	border: 1px #E3E3E3 solid;
	border-collapse: collapse;
	border-spacing: 0;
	margin: 0.5rem auto;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
	border-radius: 3px;
	overflow: hidden;
}
table.point th {
	padding: .5rem;
	border: #ccc solid;
	border-width: 0 0 1px 1px;
	background-color: #e9e4d4;
	font-weight: bold;
	text-align: center;
}
table.point td {
	padding: 5px;
	border: 1px #E3E3E3 solid;
	border-width: 0 0 1px 1px;
	text-align: center;
}
table.point th a {
	color: #066;
}
table.point th a:visited {
	color: #066;
}
table.point th a:hover {
	color: #ff3300;
}
/*------------------スマホ版の設定------------------*/
.navbar ul {
	display: none;
	width: 100%;
	flex-direction: column;
	background-color: #6e1e52;
	position: absolute;
	top: 80px;
	left: 0;
	padding: 20px;
	list-style: none;
}
.navbar a {
	color: #fff;
	text-decoration: none;
}
.navbar li::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 2px;
	background-color: #e9e4d4; /* アンダーラインの色 */
	transition: width 0.3s ease;
}
.navbar a:hover {
color: #e9e4d4;
}
.navbar li:hover::after {
	width: 100%; /* ホバー時にアンダーラインが広がる */
}
.navbar ul.show {
display: flex;
position: absolute; /* 絶対位置に変更 */
top: 70px; /* ヘッダーの下に表示 */
left: 0;
width: 100%;
background-color: #6e1e52;
z-index: 1000; /* メニューが他の要素より前面に表示されるように */
}
.navbar li {
	margin: 10px 0;
	position: relative;
	font-size: 1.3rem;
}
/* ------nabver---- */
.page-header {
	background-color: #6e1e52;
}
.menu-toggle {
	display: block;
}
/* ハンバーガーアイコンと×アイコンの切り替え */
.menu-toggle.open #menuIcon {
	content: "×";
	font-size: 36px;
}
.menu-toggle {
	display: none;
	font-size: 30px;
	cursor: pointer;
}
.header-container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	max-width: 950px; /* 最大幅 */
	margin: 0 auto;
	padding: .5rem .5rem .5rem 0;
}
.logo a{
	display: flex;
	align-items: center;
	text-decoration: none;
	font-size: 1.5rem;
	font-weight: bold;
	color: #fff;
}
.icon {
	width: 40px;
	height: 40px;
}
.menu-toggle {
	display: block;
}
/* コンテナ設定 */
.container {
	display: grid;
	grid-template-columns: repeat(2, 1fr);  /* 横に2列 */
	gap: 12px;  /* アイテム間の隙間 */
	padding: 10px;
	max-width: 600px;  /* 最大幅設定（任意） */
	margin: 0 auto;
  }
/* 各アイテムのスタイル */
.item {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative; /* 相対位置でimgを絶対配置 */
	width: 100%;
	height: 70px;
	background-color: #e9e4d4;
	color: black;
	text-decoration: none;
	border-radius: 8px;
	text-align: center;
	font-size: 1.2rem;
	/* font-size: 5vw; */
	transition: background-color 0.3s ease, box-shadow 0.3s ease;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
	size: 2rem;
}
  /* ホバー時の効果 */
  .item:hover {
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);  /* ホバー時に影を強調 */
	filter: brightness(0.8);
  }
/* テキストを中央に */
.item .label {
	position: relative;
	z-index: 1;
}
/* 画像右下寄せ */
.item img {
	position: absolute;
	right: 5px;
	width: 50px;
	height: 50px;
	z-index: -1;
}
.panel {
	border-radius: 12px;
	padding: 10px 20px;
	margin: .8rem 0;
	box-shadow: 8px 8px 10px rgba(0, 0, 0, 0.2);
	transition: box-shadow 0.3s ease, transform 0.3s ease;
}
h2 {
	all: unset;
	display: block;
	font-size: 1.3rem;
	font-weight: bold;
	border-bottom: 4px double #432;
	padding: 5px 10px;
	padding-top: 10px;
	padding-bottom: 10px;
	margin-bottom: 1em;
}
.tem1 {
	background-color: rgb(220, 20, 60, .3);
}
.sola {
	background-color: rgb(255, 215, 0, .3);
}
.humi {
	background-color: rgb(30, 144, 255, .3);
}
.rain {
	background-color: rgb(75, 178, 197, .3);
}
.wspe {
	background-color: rgb(180, 200, 210, 0.3);
}
.tem2 {
	background-color: rgb(0, 128, 0, .3);
}
.wdir {
	background-color: rgb(189, 210, 220, 0.3);
}
.soil {
	background-color: rgb(139, 69, 19, .3);
}
.leaf {
	background-color:	rgb(0, 121, 107, .3);
}
.graphbtn {
	background: rgba(140, 58, 76, 0.3);
}
.tablebtn {
	background-color: rgb(112, 130, 56, .3);
}
/* elements.phpの表の色 */
table.rain th {
	background: rgb(75, 178, 197, 0.3);
	border-color: #eee;
}
table.tem1 th {
	background: rgb(220, 20, 60, 0.3);
	border-color: #eee;
}
table.humi th {
	background: rgb(30, 144, 255, 0.3);
	border-color: #eee;
}
table.wspe th {
	background: rgb(180, 200, 210, 0.3);
}
table.sola th {
	background: rgb(255, 215, 0, 0.3);
	border-color: #ddd;
}
table.tem2 th {
	background: rgb(0, 128, 0, 0.3);
	border-color: #eee;
}
table.wdir th {
	background-color: rgb(189, 210, 220, 0.3);
}
table.soil th {
	background-color: rgb(139, 69, 19, .3);
	border-color: #eee;
}
table.leaf th {
	background-color:	rgb(0, 121, 107, .3);
	border-color: #eee;
}
table.point td {
	background-color: white; /* または透明にしたいなら transparent */
}
table.rain,
table.tem1,
table.humi,
table.wspe,
table.sola,
table.tem2,
table.wdir,
table.soil,
table.leaf {
  background-color: transparent; /* または white */
}
.footerbtn {
	text-align: center;
	padding: 20px;
	/* スクロールが足りない時も下部に押し出される */
	margin-top: 1rem;
}
.footerbtn button {
	background-color: #6e1e52;
	padding: 10px 20px;
	/* font-size: 1.2rem; */
	color: #fff;
	width: 350px;
	border-radius: 5px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
.footerbtn button:hover {
	background-color: #708238;
}
.back-button {
  display: inline-flex; /* 横並びに */
  align-items: center;  /* 縦位置を中央揃え */
  gap: 4px;             /* アイコンと文字の間にスペース */
  padding: 6px 12px;
  font-size: 1.3rem;
  color: #333;
  background-color: #f0f0f0;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}
.back-button svg {
  width: 16px;
  height: 16px;
}