﻿<style>
	html{height:100%}
	.backgroundOn{
		margin-top:0px;
		padding:0px;
		width:100%;
	}
	body{
		background:linear-gradient(to bottom left,#fad0c4, #ffffff) fixed;
		background-position:0 30;
		background-repeat:repeat-x;  
		width:100%;
		font-size:16pt;
		padding:0px;
		margin:0px;
	}
	button{
		width:24px;
		height:24px;
		margin-top:140px;
		margin-left:  6px;
		border: none;
		outline: none;
		background: transparent;
		color: #FFF;
		text-shadow: 3px 3px 3px #000, -3px -3px 3px #000,
		-4px 4px 4px #000,  4px -4px 4px #000,
		4px 0 4px #000, -4px  0 4px #000,
		0 4px 4px #000,  0 -4px 4px #000;
	}
	.class1{
		margin:10px;
		margin-top:20px;
		padding:20px;
		background-color:#FFF;
	}
	.spacer{
		height:28px;width:50px;
	}
	.fadeIn{
		animation-name:fadeInAnime;
		animation-duration:2s;
		animation-fill-mode:forwards;
		opacity:0;
	}
	.fadeOut{
		animation-name:fadeOutAnime;
		animation-duration:2s;
		animation-fill-mode:forwards;
		opacity:0;
	}
	@keyframes fadeInAnime {
	  from { opacity: 0.3; }
	  to { opacity: 1; }
	}
	@keyframes fadeOutAnime {
	  from { opacity: 1; }
	  to { opacity: 0.3; }
	}
	.title{
		margin:10px;
		margin-top:50px;
		display: block;	
		text-align:left;
	}
	.innerTextBox {
		float:left;	
		margin-left:20px;
		border: 1px solid #FFF;
		border-radius: 5px;
		background-color:#FFF;
		opacity: 0.9;
		padding:10px 0px;
		width:300px;
	}
	h4{
		padding:0px;
		margin:0px;
	}
	.changeImage1{
		font-size:x-large;
	}
	.changeImage2{
		margin-top:30px;
		margin-left:320px;
		font-size:x-large;
	}
	.textBox {
		float:left;
		border: 1px solid #FCC;
		border-radius: 5px;
		position: relative;
		width:400px;
		margin:10px 10px;
		background-color:#FFF;
		padding:10px;
		line-height:1.2em;
	}
	.textBox2 {
		float:left;
		border: 1px solid #FCC;
		border-radius: 5px;
		position: relative;
		width:600px;
		margin:10px 10px;
		background-color:#FFF;
		padding:10px;
		line-height:1.2em;
	}
	.textBox3 {
		float:left;
		border: 1px solid #FCC;
		border-radius: 5px;
		position: relative;
		width:800px;
		margin:10px 10px;
		background-color:#FFF;
		padding:10px;
		line-height:1.2em;
	}
	.textBoxClear {
		clear:left;
	}
	.textBoxBgNone{
		color: #FFF;
		text-shadow: 3px 3px 3px #000, -3px -3px 3px #666,
		-4px 4px 4px #666,  4px -4px 4px #666,
		4px 0 4px #666, -4px  0 4px #666,
		0 4px 4px #666,  0 -4px 4px #666;
	}
	.globalNavi{
		background-color:#FCC;
		color:#333;
		position:fixed;
		z-index:1;
		width:100%;
		border-top:1px black solid;
		border-bottom:1px black solid;
		text-decoration:none;
	}
	a.navi{
		color:#966;
		text-decoration:none;
	}
	a:link.footer{
		color:#966;
		text-decoration:none;
	}
	a:visited.footer{
		color:#966;
		text-decoration:none;
	}
	a{
		color:#333;
		text-decoration:none;
	}
	.material-symbols-outlined {
	  font-variation-settings:
	  'FILL' 0,
	  'wght' 400,
	  'GRAD' 0,
	  'opsz' 24
	}
	.icons {	
	  display: inline-flex;
	  vertical-align: middle;
	  color:#966;
	  padding-bottom:3px;
	}
	.heading.tag {
	    text-decoration: none;
	    padding: 0.5rem;
	    background: #FFF;
	    border-left: solid 6px #58ad5a;
	    color: #58ad5a;
	    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.22);
		margin-bottom:20px;
		width:300px;
	}
	.heading.red{
	    border-left-color: #ff3c3c;
	    color: #ff3c3c;
	}
	.heading.yellow {
	    border-left-color: #efcc4c;
	    color: #efcc4c;
	}

	.heading.blue {
	    border-left-color: #5bb1fc;
	    color: #5bb1fc;
	}
	.footer{
		clear:both;
		background-color:#FCC;
		color:#966;
		width:100%;
		border-top:1px black solid;
		border-bottom:1px black solid;
	}
	.clearLeft{
		clear:left;
	}
	.lineHeight2{
		line-height:2em
	}
	.topArea{
		background-image:url('./img/topimg.jpg');
		margin:0px;
		padding:0px;
		width:100%;
		height:330px;
		background-repeat:repeat-x;
		background-position:center;
	}
	.floatLeft{
		float:left;
	}
	.clearLeft{
		clear:left;
	}
	.roomImage{
		background-image:url('./img/room_top.jpg');
		width:640px;
		height:480px;
		border-radius: 5px;
	}
	.portlate{
		background-image:url('./img/portlate.jpg');
		width:640px;
		height:480px;
		border-radius: 5px;
	}
	.storyImage{
		background-image:url('./img/stories/img_01.gif');
		width:500px;
		height:283px;
		border-radius: 5px;
	}
</style>
