@import url('https://fonts.googleapis.com/css2?family=Comfortaa&display=swap');
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kosugi+Maru&family=M+PLUS+Rounded+1c:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zen+Kurenaido&display=swap|');
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1&display=swap');
@import url('https://use.fontawesome.com/releases/v5.2.0/css/all.css');

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, div, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video	{
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
a	{
	margin: 0;
	padding: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
abbr[title], dfn[title]	{
	text-decoration: none;
	border-bottom: 0;
	cursor: help;
}
address, cite	{
	font-style: normal;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section	{
	display: block;
}
blockquote, q	{
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after	{
	content: '';
	content: none;
}
del	{
	text-decoration: line-through;
}
hr	{
	display: block;
	height: 50px;
	border: 0;
	margin: 5px 0;
	padding: 0;
}
input, select	{
	vertical-align: middle;
}
nav ul	{
	list-style: none;
}
ol	{
	list-style: none;
	margin: 8px 6% 16px 6%;

}
table	{
	border-collapse: collapse;
	border-spacing: 0;
}
html	{
	scroll-behavior: smooth;
}
::-webkit-scrollbar	{
	width: auto;
}
::-webkit-scrollbar-track	{
	border-radius: 10px;
	box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
::-webkit-scrollbar-thumb	{
	border-radius: 10px;
	box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
body	{
	color: #333132;
	font-family: "Meiryo UI", 'M PLUS 1', sans-serif;
	line-height: 1.5;
	background: #f8f8ff;
}
h1, h2, h3, h4, h5, p,
.dl1 dt, .dl1 dd, .dl2 dt, .dl2 dd, li, caption, th,
address, summary, small,
.pagetop	{
	filter: drop-shadow(3px 4px 1px rgba(201,202,202,0.9));
}
header	{
	margin-top: 20px;
	padding: 10px;
	text-align: left;
}
footer	{
	padding-bottom: 10px;
	text-align: center;
}
nav	{
	margin: 40px 0 20px 0;
}
img	{
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	width: 100%;
	height: auto;
	box-sizing: border-box;
	vertical-align: bottom;
}
.base	{
	max-width: 900px;
	margin: 0 auto;
}
.box	{
	margin: 50px 5px 20px 5px;
	padding: 10px;
}
a:link	{
	color: #83988e;
	text-decoration: none;
	transition: 0.2s;
}
a:visited	{
	color: #83988e;
	text-decoration: none;
}
a:hover	{
	color: #c8f26c;
	text-decoration: underline;
	transition: 0.3s;
}
a:active	{
	color: #bcdea5;
	transition: 0.1s;
}
h1	{
	font-size: 180%;
	font-weight: normal;
	font-family: 'Comfortaa', cursive;
}
h1 a:link	{
	color: #515254;
	transition: 0s;
}
h1 a:visited	{
	color: #515254;
}
h2	{
	margin: 10px;
	font-size: 70%;
	font-weight: normal;
}
h3	{
	position: relative;
	margin: 47px 0 65px 0;
	color: #3a111c;
	font-size: 130%;
	font-weight: normal;
	font-family: 'M PLUS Rounded 1c', cursive;
	text-align: center;
	text-shadow: 0 0 2px #ffffff;
}
h3:before	{
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100px;
	height: 100px;
	background: #bcdea5;
	border-radius: 50%;
	border: dashed 1px #ffffff;
	transform: translate(-50%,-50%);
	box-shadow: 0 0 0 5px #bcdea5;
	z-index: -1;
}
h4	{
	margin: 15px 0 15px 3%;
	padding: 3px 10px;
	color: #ffffff;
	font-weight: normal;
	font-family: 'Kosugi Maru', cursive;
	background-color: #3a111c;
	background: linear-gradient(to left, transparent, #3a111c 55%);
	border-radius: 15px 5px 5px 15px;
}
h4:before	{
	content: '\f141';
	margin: 0 7px;
	color: #e6f9bc;
	font-weight: bold;
	font-family: 'Font Awesome 5 Free';
}
h4.col_1	{
	background-color: #113a2f;
	background: linear-gradient(to left, transparent, #113a2f 55%);
}
h4.col_1:before	{
	color: #cfbcf9;
}
h5	{
	display: inline-block;
	margin-left: 1%;
	padding: 3px 15px 3px 10px;
	color: #ffffff;
	font-size: 90%;
	font-weight: normal;
	background-color: #83988e;
	background: linear-gradient(to left, #83988e, #968398 80%);
	border-radius: 7px 14px 14px 3px;
}
h5.col_2	{
	background-color: #66b26e;
	background: linear-gradient(to left, #988e83, #838d98 80%);
}
h6	{
	display:flex;
	width: 100px;
	margin: 15px 40% 10px 3%;
	padding: 5px 15px;
	color: #666b6c;
	position: relative;
	background-color: #f5f5f5;
	font-size: 95%;
	font-family: 'Zen Kurenaido', sans-serif;
}
h6:before {
	position: absolute;
	bottom: 2px;
	right: -20px;
	z-index: -1;
	transform: rotate(5deg);
	width: 100%;
	height: 50%;
	background-color: #d0d0d0;
	content: "";
	filter: blur(4px);
}
.label_0	{
	border-right: 27px ridge #fee3aa;
}
.label_1	{
	border-right: 27px ridge #ffff7f;
}
.label_2	{
	border-right: 27px ridge #bfff7f;
}
.label_3	{
	border-right: 27px ridge #7fffbf;
}
.label_4	{
	border-right: 27px ridge #7fffff;
}
.label_5	{
	border-right: 27px ridge #7fbfff;
}
.label_6	{
	border-right: 27px ridge #bf7fff;
}
.label_7	{
	border-right: 27px ridge #ff7fff;
}
.label_8	{
	border-right: 27px ridge #ff7fbf;
}
.label_9	{
	border-right: 27px ridge #ff7f7f;
}
.label_10	{
	border-right: 27px ridge #ffdbed;
}
p, address, summary	{
	margin: 8px 6% 16px 6%;
}
small	{
	font-size: 10px;
	font-family: 'Comfortaa', cursive;
}
mark	{
	color: #83988e;
	background: -webkit-linear-gradient(top, #83988e 0%, #56635d 51%, #414a46);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.sp1	{
	color: #34919b;
	background: -webkit-linear-gradient(top, #34919b 0%, #2f777f 51%, #295f65);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.sp2	{
	color: #c4c4c4;
}
.sp3	{
	color: #8e98a0;
}
a.pagetop	{
	display: block;
	position: fixed;
	bottom: 2%;
	right: 20px;
	width: 45px;
	line-height: 45px;
	color: #f8fbf8;
	text-align: center;
	text-decoration: none;
	background: #228b22;
	background: rgba(34,139,34,0.6);
	border-radius: 50%;
	z-index: 1;
}
.pagetop:hover	{
	text-decoration: none;
	opacity: 0.6;
}
.h_side	{
	width: 100%;
	height: 10px;
	background-color: #bcdea5;
	border-top-width: 10px;
	border-top-style: solid;
	border-top-color: #83988e;
	border-bottom-width: 10px;
	border-bottom-style: solid;
	border-bottom-color: #e6f9bc;
}
.fin	{
	width: 100%;
	height: 10px;
	border-top-width: 10px;
	background-color: #bcdea5;
	border-top-style: solid;
	border-top-color: #e6f9bc;
	border-bottom-width: 10px;
	border-bottom-style: solid;
	border-bottom-color: #83988e;
}
.item	{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	text-align: center;
	font-family: 'Zen Kurenaido', sans-serif;
}
.item li	{
	margin: 1px 0;
	padding: 5px;
}
.item li a:link, .item li a:visited	{
	color: #574951;
}
.memo	{
	margin: 5px 6%;
	padding: 0 10px;
	height: 150px;
	overflow: auto;
	font-size: 80%;
	background-color: #ffffff;
	background: linear-gradient(to left, #e8f0f0, transparent);
	filter: drop-shadow(2px 2px 1px rgba(201,202,202,0.7));
	border-width: 1px;
	border-style: solid;
	border-color: #8eb0b1;
}
.hr1	{
	height: 100px;
}
.hr2	{
	height: 20px;
}
.bar	{
	display: block;
	border: 0;
	width: 100%;
	height: 295px;
	background: url("img/bar_green.gif") no-repeat center center;
	-webkit-background-size: 461px 10px;
}
.ct1:link	{
	color: #574951;
}
.dl1 dt, .dl1 dd	{
	margin: 8px 6% 16px 6%;
}
.dl2	{
	margin: 10px 20px;
}
.dl2 dt, .dl2 dd	{
	padding-bottom: 6px;
}
.dl2 dt	{
	float: left;
}
.dl2 dt:after	{
	content: '　……';
}
.dl2 dd:before	{
	content: '　';
}
.bn1	{
	content: url('img/bn_le.gif');
}
.bn2	{
	content: url('img/bn_ci.gif');
}
.bn1, .bn2	{
	max-width: 100%;
	width: 200px;
	height: auto;
}
.bn3	{
	margin-left: 12px;
	width: 59px;
	height: 15px;
	opacity: 0.9;
}
.bn4	{
	width: auto;
	height: 14px;
	border-radius: 50%;
}
.bn1, .bn2, .bn3, .bn4	{
	transition: 0.2s;
}
.bn1:hover, .bn2:hover, .bn3:hover, .bn4:hover	{
	opacity: 0.6;
	transition: 0.3s;
}
.banner_sz	{
	position: relative;
}
.banner_sz::before	{
	content: "";
	display: block;
	padding-top: calc(((350 / 1100) * 100%));
}
.banner	{
	position: absolute;
	top: 0;
	left: 0;
	max-width: 100%;
	width: 1100px;
	height: auto;
	border-radius: 1em;
	box-sizing: border-box;
}


.rs1_sz_1	{
	margin: 18px 10% 26px 10%;
	width: 360px;
	position: relative;
}
.rs1_sz_1::before	{
	content: "";
	display: block;
	padding-top: calc(((1023 / 703) * 100%));
}
.rs1_1	{
	position: absolute;
	top: 0;
	left: 0;
	max-width:100%;

	width: 360px;
	border: 0 solid;
	border-radius: 1em;
	transition: transform 0.3s;
	filter: drop-shadow(3px 4px 1px rgba(201,202,202,0.9));

}
.rs1_1:hover	{
	transform: scale(1.2);
}



.kyoka	{
	margin: 18px 10% 26px 10%;

	width: 360px;

	position: relative;
}
.kyoka::before	{
	content: "";
	display: block;

	padding-top: calc(((925 / 703) * 100%));
}



.kyoka_img	{
	position: absolute;
	top: 0;
	left: 0;
	width:100% ;

	width: 360px;
	border: 0 solid;
	border-radius: 1em;
	transition: transform 0.3s;
	filter: drop-shadow(3px 4px 1px rgba(201,202,202,0.9));

}

.kyoka_img:hover	{
	transform: scale(1.2);
}


.rs1:hover	{
	transform: scale(1.2);
}
.rs2_sz	{
	margin: 8px 6% 16px 6%;
	width: 480px;
	position: relative;
}
.rs2_sz::before	{
	content: "";
	display: block;

	padding-top: calc(((720 / 1280) * 100%));
}

.rs2	{
	position: absolute;
	top: 0;
	left: 0;
	width:100% ;
	max-width: 480px;

	height: auto;
	border: 0 solid;
	border-radius: 0.5em;
	filter: drop-shadow(3px 4px 1px rgba(201,202,202,0.9));

}
.rs3	{
	margin: 5px 0;
	width: 240px;
	height: 310px;
	border: 0 solid;
	border-radius: 0.5em;
}

.maracas	{
	margin: 18px 10% 26px 10%;
	width: 600px;
	position: relative;
}
.maracas::before	{
	content: "";
	display: block;
	padding-top: calc(((720 / 1280) * 100%));
}



.krg	{
	position: absolute;
	top: 0;
	left: 0;

	max-width: 100%;
	width: 600px;
	height: auto;
	border: 0 solid;
	border-radius: 1em;
	transition: transform 0.3s;
	filter: drop-shadow(3px 4px 1px rgba(201,202,202,0.9));

}
.krg:hover	{
	transform: scale(1.2);
}



@media screen and (max-width: 800px)	{

	.maracas	{
		margin: 8px 4% 16px 4%;
		width: auto;
	}
	.krg	{
		display: block;
		margin: 5px 0;
		width: 100%;
		border-radius: 0.5em;
	}
	.krg:hover	{
		transform: none;
	}
.rs1_sz_1, .kyoka	{		

text-align: center;

		margin: 8px auto 16px  auto;
}

}


@media screen and (max-width: 580px)	{
	header	{
		margin: 20px 5px 0 5px;
	}
	.base	{
		width: auto;
	}
	.box	{
		margin: 0;
		padding: 10px 0;
		width: auto;
		font-size: 95%;
		line-height: 1.4;
	}
	h1	{
		font-size: 150%;
	}
	h4	{
		margin: 15px 0 10px 2%;
	}
	h5	{
		margin-left: 0;
		padding-left: 5%;
		border-radius: 0 14px 14px 0;
	}
	h6	{
		margin-left: 10px;
	}
	p, address, summary,
	.dl1 dt, .dl1 dd	{
		margin: 8px 4% 16px 4%;
		font-size: 90%;
	}
	mark	{
		background: transparent;
		-webkit-text-fill-color: #56635d;
	}
	.item	{
		flex-direction: column;
		margin: 0;
		width: auto;
		font-size: 90%;
	}
	.item a	{
		display: block;
		margin: 1px 0;
		border-width: 1px 0;
		border-style: solid;
		transition: 0s;
	}
	.item a:hover	{
		background-color: #ffffff;
	}
	ol	{
		margin: 8px 4% 16px 4%;

		font-size: 90%;
}
	.memo	{
		margin: 8px 4% 16px 4%;
		padding: 0;
		font-size: 80%;
	}
	.p1	{
		margin: 0;
	}
	hr	{
		height: 10px;
	}
	.hr1	{
		height: 75px;
	}
	.hr2	{
		height: 10px;
	}
	.bar	{
		height: 207px;
		-webkit-background-size: 230px 5px;
	}
	.sp1	{
		background: transparent;
		-webkit-text-fill-color: #2f777f;
	}
	.bn1, .bn2	{
		width: 160px;
		height: auto;
	}
	.bn3	{
		height: 11px;
	}
	.bn4	{
		height: 10px;
	}
	.banner	{
		border-radius: 0.5em;
	}
	.rs1	{
		margin: auto;
		display: block;
		text-align: center;
		border-radius: 0.5em;
	}
	.rs1:hover	{
		transform: none;
	}
	 rs3	{
		height: auto;
		margin: 0;
	}

.rs1_sz_1, .kyoka	{		

		margin: 8px 4% 16px 4%;
	width: auto;

}


.rs2_sz	{
		margin: 8px 4% 16px 4%;

	width: auto;
}


.rs1_1, .kyoka_img	{
	display: block;


	width: 100%;

}
.rs1_1:hover	{
		transform: none;
	}
 .kyoka_img:hover	{
		transform: none;
	}


.rs1, .rs2	{
	max-width: 100%;
}





}