html {
		scroll-behavior:smooth; 
		caret-color: transparent;
	}
	body {
		font-family: "Noto Serif JP", serif;
		font-optical-sizing: auto;
		font-weight: normal;
		font-style: normal;
		height:100%;
	}
	#wrap{ 
		background-color:#e9e9e9;
		background-color:#f1ebe1;
		width:100%; 
		max-width:1000px; 
		margin: 0 auto;
		}
	#menu{ 
		width:90%; 
		max-width:900px; 
		margin:2% 5%; 
		text-align:right; 
		position:fixed; 
		top:2%; 
		z-index: 100;
		}
	#menu img {
		width:14%; 
		max-width: 75px; 
		}
	#menubox{
		display:block;
		display:none;
		position:fixed;
		top:0;
		width:100%;
		text-align:center;
		--padding: 6%;
		padding: clamp(20px, 6%, 20px);
		height: 100%;
		background-color: #e3dbd0f5;
		--opacity: 0.7;
		z-index: 150;
		}
	#menubox .wrap{
		display: block;
		margin: 0 auto;
		width: 90%;
		max-width: 900px;
	}
	#menubox  a:hover{
		color:teal;
	}
	#menubox #mclose{
		text-align:right;
	}
	#menubox img {
		width:12%; 
		max-width: 48px; 
		}
	#menubox .bmenu {
		margin: clamp(30px, 11%, 43px);
		font-size: clamp(22px, 3vw, 36px);
		font-weight: 600;
	}
	#menubox .bmenu span {
		font-size: clamp(14px, 2vw, 14px);
		display: block;
	}
		
	#header { 
		width:90%; 
		margin:2% 5%; 
		}
	#H-left, #H-right { 
		display:inline-block; 
		width:49%; 
		vertical-align: middle;
		}
	#H-right { 
		--position:absolute; 
		margin-top:15%; 
		test-align:center; 
		margin-left: -6%; 
		text-align: center;
		}
	#H-left img, #H-right img { width:100%; } 
	#H-right .SNSicons { margin-top: 5px;}
	#H-right .SNSicons div{
		display:inline-block; 
		width:15%; 
		margin: 1% 2%;
		}
	#H-right .title { 
		--font-size: 6vw; 
		font-size: 
		clamp(22px, 6vw, 64px);
		}
	#H-right .subtitle { 
		--font-size: 3vw; 
		font-size: clamp(12px, 3vw, 32px); 
		margin: 5px 0 0 0 ;
		}
	section {
		padding-top:13%; 
		text-align:center; 
		padding-bottom:50px;
		}
	section #topImage{ text-align:right; }
	section #topImage img{ 
		width:100%; 
		text-align:right; 
		}
	section#top{ 
		margin-top:13%; 
		text-align:center;
		}
	section#top #scroll{ 
		display:inline-block; 
		width:10%; 
		max-width:50px; 
		margin:0 auto;
		 margin: 33% 0  0 0;
		 }
	section#top #scroll img{ width:100%;}
	section#top #telopbox { position:relative; }
	section#top .telop {
		width: 8vw;
		display: block;
		/* position: absolute; */
		writing-mode: vertical-rl;
		text-align: center;
		background-color: #fff;
		padding: 2vw 1.7vw 3vw 0vw;
		padding: 2% 1.7% 3% 0;
		white-space: nowrap;
		font-size: 4vw;
		font-size: clamp(12px, 4vw, 42px);
		max-width: 78px;
		
		/*width: 8vw;
		display: block;
		position: absolute;
		writing-mode: vertical-rl;
		text-align: center;
		background-color: #fff;
		padding: 2vw 1.7vw 3vw 0vw;
		white-space: nowrap;
		font-size: 4vw;			*/
	}			
	section#top .telop1 { 
		margin-top: -68%; 
		margin-left: 84%;  
		/* margin-top:-68%; right:8%; */ 
		}
	section#top .telop2 { 
		margin-top: -33%; 
		margin-left: 73%; 
		/* margin-top:-54%; right:19%; */
		}
	.foto{
		width:100%;
		margin: 6% 0;
	}
	.foto img {
		width:100%;
	}
	.ptitle { 
	 
		font-size:clamp(26px, 5vw, 64px);
		color: #5f4539;
		font-weight: 500;
		line-height: 0.8em;
	}
	.ptitle span{ font-size: clamp(14px, 3.5vw, 28px); }
	.ptext {
		margin: 7vw 0;
		padding: 0 5vw;
		line-height: 2em;
		--color: dimgray;
		--font-size: 94%;
		color: #4e4a47;
		text-align: left;
	}
	.button{
		width: 60%;
		max-width: 300px;
		margin: 0 auto;
		background-color: #fff;
		border: 2px solid #111;
		padding: 20px;
		--font-size: 1.1em;
		font-weight: 600;
		margin-bottom: 7vw;
		font-size: 90%;
	}
	.button:hover{
		color: #fff;
		background-color: #111;
	}
	#reports{
		padding: 5%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-content: center;
		justify-content: center;
		align-items: flex-start;
	}
	.events { width: 45%; margin:2%; line-height: 1.5em;}
	.events .thumb{ width: 100%; margin: 10px 0;}
	.events .thumb img{ width: 100%; }
	.events .hizuke{font-weight:bold; font-family:sans-serif;}
	.events .evtext{}
	
	#osirase{ 
		margin: 8% 5%;
		text-align: left;
		line-height: 2em;
		}
	.news{
		border-top: 1px dotted #333;
		padding: 7px 0;
		color: #4e4a47;
		}
	.news .hizuke{ font-family:sans-serif;}
	
	#contact{
		background-color: #e3dbd0;
	}
	
	footer{
		background-color: #d5c1a3;
		text-align: center;
		padding: 11%;
		color: #4e4a47;
		padding-bottom: 1px;
	}
	footer .logo{ 
		width:45%; 
		max-width:300px; 
		margin-bottom: 20px;
		}
	footer .title {
		--font-size: 6vw; 
		font-size: clamp(30px, 6vw, 85px);
		color:#3b3a3a;     
		font-weight: 600;
		margin-bottom: 10px;
	}
	footer .subtitle { 
		--font-size: 4vw; 
		font-size: clamp(12px, 4vw, 32px); 
		margin: 5px 0 0 0 ;
		}
	footer .producedby { 
		margin-top: 20px;
		--font-size: 6vw;
		font-size: clamp(12px, 4vw, 52px);
		color: #3b3a3a;
		/* font-weight: 600; */
		margin-bottom: 20px;	
	}
	footer .SNSicons { 
		margin-top: 24px;  
		margin-bottom: 30px;
		}
	footer .SNSicons div{
		display:inline-block; 
		margin: 1% 2%;
		}
	hr {
		width: 77%;
		margin: 20px auto;	
	}
	.hr2 {
		max-width: 1000px;
		position: relative;
		}
	.hr2 img {
		width: 12vw;
		display: inline-block;
		position: absolute;
		max-width: 50px;
		right: 9%;
		margin-top: -47px;
		cursor:pointer;
	}
	.hr2 #goTop:hover {
		display:inline-block;
		cursor:pointer;
	}
	
	footer .bmenu {
		margin: 7%;
		font-size: clamp(14px, 2vw, 32px);
		font-weight: 600;
	}
	footer  a:hover{
		color:teal;
	}
	footer .bmenu span {
		font-size: clamp(9px, 2vw, 14px);
		display: block;
	}
	footer #copyright{
		margin: 40px 0;
	}
	footer .addr{
		font-size: clamp(12px, 2vw, 24px);
		line-height:1.2em;
	}
	footer .addr2{
		font-size: clamp(11px, 2vw, 20px);
		margin-top: 5px;
		}
		
	.fadein {
	  animation-name: fadein;
	  animation-duration: 0.5s;
	  animation-timing-function: ease-out;
	  animation-fill-mode: forwards;
	}
	@keyframes fadein {
		0% {
			opacity: 0;
		}
		100% {
			opacity: 0.99;
		}
	}    			
	.fadeout {
	  animation-name: fadeout;
	  animation-duration: 0.5s;
	  animation-timing-function: ease-out;
	  animation-fill-mode: forwards;
	}
	@keyframes fadeout {
		0% {
			opacity: 0.99;
		}
		100% {
			opacity: 0;
			display:none;
		}
	}