@charset "utf-8";
/* Basic styling */
		html, body {
			margin: 0;
			padding: 0;
			background-color:black;
			font-family: Georgia, Sans-Serif;
			line-height: 1.6;
		}
		h1 {
			font-weight: normal;
			font-style: italic;
			font-family: Georgia, serif;
			line-height: 1.6;font-family: "Nosifer", sans-serif;
            color:#ccc;
            text-shadow:-1px -1px 0 #fff, 1px 1px 0 #aaa;
            }

		.body {
			max-width: 1000px;
			padding: 10px;
			margin: 0 auto;
		}


html{
	scroll-behavior: smooth;
}


.container {
	margin: 0 auto 0 auto;
	max-width: 1000px;
	padding: 0 10px;
}

.img-responsive {
	display: block;
	max-width: 100%;
	height: auto;
}

h2 {
padding-bottom: .5em;
border-bottom: 5px solid #ff4500;
color: #ff4500;
font-size: 180%;color: #fff;
text-shadow:
0 0 5px #0099ff,
0 0 13px #0066cc,
0 0 13px #0066cc,
0 0 13px #0066cc,
0 0 13px #0066cc;
}
.nlc{color:#fff;}

main {
	padding: 30px;
}

footer {
	background: #ff4500;
}
.footer-inner {
	padding: 20px 16px 10px 16px;

}

.copyright {
	margin: 0;
	text-align: center;
	color: #fff;
}

/* End Basic styling */


/* フレックスボックスレイアウトCSS */

/* Container for the image grid */
.item{
 display: grid;
 grid-template-columns: repeat(3, 1fr); /* Three equal-width columns */
 grid-gap: 16px; /* Space between items */
 max-width: 960px;
 margin: 0 auto;

}

/* Styling for each image item */
.item {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Styling for images */
.item img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.3s ease;
}

/* Hover effect for images */
.item:hover img {
  transform: scale(1.05);
}

/* Caption styling */
.caption {
  position: absolute;
  bottom: 8px;
  left: 8px;
  right: 8px;
  padding: 8px;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  font-size: 1rem;
  text-align: center;
  border-radius: 4px;
}

/* Responsive adjustments */
@media screen and(max-width: 768px) {
  .item img {
    grid-template-columns: repeat(2, 1fr); /* Two columns on medium screens */
  }
}

@media screen and(max-width: 480px) {
  .item img {
    grid-template-columns: 1fr; /* One column on small screens */
  }
}


.item-img {
  padding: 0;
}
.item-body {
  padding: 0;
}
.item-title {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: bold;
  color: #ff4500;color: #fff;
text-shadow:
0 0 5px #0099ff,
0 0 13px #0066cc,
0 0 13px #0066cc,
0 0 13px #0066cc,
0 0 13px #0066cc;
}
.item-body p {
  font-size: 14px;
  color: white;
}

.items {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.items .item {
  margin: 10px;
}

/* endフレックスボックスレイアウトCSS */

		
		#demo-1 {
			position: relative; /* can either be relative, absolute or fixed. If position is not set (i.e. static), it would be set to "relative" by script */
			overflow: hidden; /* to bound the empty top space created by inner element's top margin */
			width: 100%;
			min-height: 400px;
			background-color: #999;
		}
		.demo-inner-content {
			position: relative; /* if position is not set, the script will set it to 'relative'. */
			z-index: 2; /* if z-index is not set, the script will set it to '2'. */
			margin: 180px auto;
			padding: 40px;
			max-width: 600px;
			color: #fff;
			text-align: center;
			font-size: 1.5em;
		}
		.demo-inner-content h1 {
			font-size: 2.5em;
			margin: 0;
		}



/*js button */
.to-top{
	background: #ff4500;
	position: fixed;
	bottom: 16px;
	right: 32px;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 32px;
	color: #f0f8ff;
	text-decoration: none;
	opacity: 0;
	pointer-events: none;
	transition: all 0.4s;
}

.to-top.active {
	bottom: 32px;
	pointer-events: auto;
	opacity: 1;
}

/*js button*/