/* styles.css */

body, html {
  height: 100%;
  margin: 0;
  font-family: Arial, sans-serif;
  padding: 0;
  display: flex;
  flex-direction: column;
  font-size:16px;
}

button {
  border-radius:8px;
  cursor: pointer;
}

button, input, textarea {
 	font-family : inherit;
 	font-size : inherit;
}
button.top10{margin-top:10px}


.background-image {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url('../Images/トレインパーク白山2.JPG');
	background-size: contain;
  background-position: center;
  /*background-repeat:no-repeat;*/
}

.iro_ylw{color:yellow}

.font14{font-size:1.4em}
.font12{font-size:1.2em}
.font09{font-size:0.9em}
.font08{font-size:0.8em}

.mrgntop-16{margin-top:-16px}

span.undrWave{
  text-underline-offset:3px;
  text-decoration: underline;
  text-decoration-style: wavy;
}

li.mrgnTop10 {margin-top:10px;}


.transparent-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  background-color: rgba(0, 0, 0, 0.5); /* 背景色と透明度の設定 */
  padding: 20px;
  border-radius: 10px;
  text-align: left;
}
.site-footer {
	background-color: #333; color: #fff;
	text-align: center;
	padding: 10px 0;
	position: relative;
	bottom: 0;
	width: 100%;
}

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  /*padding: 20px;*/
  transform: translate(-50%, -50%);
  width:100%;
  display: flex;
  height: 100%; /* コンテナの高さを全体に合わせる */
  background-color: rgba(0, 0, 0, 0.3); /* 背景色と透明度の設定 */
  color: white;

.left-div, .right-div {
    padding: 20px;
    box-sizing: border-box; /* パディングを含めてボックスのサイズを計算 */
    height:100%;overflow: auto;
}

.left-div {
    flex: 1; /* 左側のDIVの幅を設定 */
    /*background-color: #f8b400;*/ /* 左側の背景色を設定 */
    /*background-color:navy;*/
  background-color: rgba(0, 0, 128, 0.3); /* 背景色と透明度の設定 */
}

.right-div {
    flex: 4; /* 右側のDIVの幅を設定 */
   /* background-color: #00aaff;*/ /* 右側の背景色を設定 */
   /*background-color:#003399;*/
  background-color: rgba(0, 0, 255, 0.3); /* 背景色と透明度の設定 */
}