@charset "UTF-8";

@import url(basemod.css);
@import url(content.css);
@import url(my_styles.css);
@import url(../yaml/navigation/nav_vlist.css);
@import url(show_hide.css);
@import url(lightbox.css);
@import url(hamburger.css);
:root {
    font-size: calc(12px + (26 - 14) * ((100vw - 300px) / (3840 - 300)));
	--jr-body-backcolor: rgb(130,130,130);
	--jr-main-backcolor: rgb(256,256,256);
	--jr-news-backcolor: rgb(220,256,256);
}

html {
  line-height: 1.5; 
  height:100%;
}

body {
  height:100%;
  margin: 0;
  padding: 0;
  text-align: left;
  background-color: var(--jr-body-backcolor);
  font-size: 1rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.main-pane {
  background-color: var(--jr-main-backcolor);
  text-align: left;
}
.news-pane {
  background-color: var(--jr-news-backcolor);
  text-align: left;
}
.newsdate {
	margin-top:0.5rem;
	margin-left: 1rem;
	margin-right: 1rem;
	padding-top:0.5rem;
	border-top: 1px solid #161616;
	font-size:1.2rem;
}
.newstext {
	padding-top:0.5rem;
	font-size:1.0rem;
	overflow: hidden;
}
div.newstext img {
	float:left;
	margin-right:1rem;
}
@media screen and (min-width: 180px) and (max-width: 360px) {
.main-pane {
    margin-right: 3%;
    margin-left: 3%;
	}
.news-pane {
    margin-right: 1%;
    margin-left: 1%;
	}
}

@media screen and (min-width: 361px) and (max-width: 480px) {
.main-pane {
    margin-right: 6%;
    margin-left: 6%;
	}
.news-pane {
    margin-right: 1%;
    margin-left: 1%;
	}
}

@media screen and (min-width: 481px) and (max-width: 600px) {
.main-pane {
    margin-right: 9%;
    margin-left: 9%;
	}
.news-pane {
    margin-right: 1%;
    margin-left: 1%;
	}
}

@media screen and (min-width: 601px) and (max-width: 959px) {
.main-pane {
    margin-right: 12%;
    margin-left: 12%;
	}
.news-pane {
    margin-right: 6%;
    margin-left: 6%;
	}
}

@media screen and (min-width: 960px) {
.main-pane {
    margin-right: 12%;
    margin-left: 12%;
	}
.news-pane {
    margin-right: 10%;
    margin-left: 10%;
	}
}
/**
	Banner 
*/
.banner-container {
  width: 100%;
  height: 10.0rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: linear-gradient(135deg, #00BFFF 0%, #FFFFFF 100%);
  color: #ffffff;
  padding: 0.2rem 0.5rem;
  box-sizing: border-box;
  border-radius: 8px;
}

.banner-content h1 {
  font-size: 1.5rem;
  margin: 0.2rem 0 0.2rem 0;
}

.banner-content p {
  font-size: 1.1rem;
  margin: 0.3rem 0 0.3rem 0;
  color: #161616;
  text-align:center;
}

.banner-btn {
  display: inline-block;
  background-color: #ffffff;
  color: #134285;
  padding: 10px 25px;
  text-decoration: none;
  font-weight: bold;
  border-radius: 1.0rem;
  transition: background-color 0.5s ease;
}

.banner-btn:hover {
  background-color: LightSkyBlue;
}