@charset "utf-8";

* {
	/*margin: 0;*/
}

body {
	/*margin-top: 0px;*/
	font-family: "sans-serif";
	line-height: 1.5;
	width: 100%;
	background-color: #B6D0DD;
	background-color: #E7DFCF;
	/*background: linear-gradient(160deg, #CEDEE7 30%, #F4F1E8 30%);*/
	/*background: linear-gradient(177deg, #BED4D8, #E8C4C1);*/
	/*background-size: 100% 100%;*/
	/*background-image: url(images/back.png);*/
}

/*#back-001 {
	position: absolute;
	width: 200%;
	height: 200px;
	background-color: #F4F1E8;
	transform: rotate(20deg);
	z-index: -10;
}*/

/*#back-002 {
	position: absolute;
	bottom: 0px;
	left: -100px;
	width: 200px;
	height: 300px;
	background-color: #79BBD7;
	opacity: 0.7;
	transform: rotate(20deg);
	z-index: -10;
	border-radius: 80px 80px 80px 80px;
}*/

#boss {
	margin: 70px auto;
	width: 800px;
	/*border: 10px solid #FFFFFF;*/
	background-color: #F4F1E8;
	/*box-shadow: 3px 2px 5px;*/
	color: #333;
}

#ura-pic {
	position: fixed;
	top: 10px;
	/*bottom: 10%;*/
}

#momo-top {
	/*top: 70px;*/
	padding: 0 0 70px 0;
	position: relative; 
	background-color: #F4F1E8;
	/*opacity: 0.6;*/
}

#momo-bottom {
	margin: 450px 0 0 0;
	padding: 50px 0 20px 0;
	position: relative;
	background-color: #F4F1E8;
}

/*#test {
	margin: auto;
	width: 95%;
	height: 50px;
	background: linear-gradient(177deg, #E3E7A7 50%, #F4F1E8 50%);
	background-size: 20% 50px;
	border-radius: 20px 20px 20px 20px;
}*/

/*#test {
	margin: auto;
	width: 85%;
	height: 20px;
	border-top: 20px dotted #EFC252;
	border-left: 20px dotted #D35F5F;
}*/

/*============================== link ===*/

a:link{
	color: #284276;
	font-weight: bold;
} 
a:visited{
	color: #232A63;
} 
a:hover{
	color: #c6160d;
} 
a:active{
	color: #c6160d;
} 

/*============================== header ===*/

header h1 {
	margin: 0px;
	/*height: 100px;
	background-image: url(images/title.png);
	background-repeat: no-repeat;*/
	/*text-indent: -1000px;*/
}

#titlebox {
	/*position: absolute;
	top: -70px;*/
	width: 100%;
	height: 100px;
	/*background-color: #F4F1E8;*/
	/*color: #FCFCFC;*/
}

.titleimg {
	padding: 10px;
}

/*============================== nav ===*/

nav {
	padding: 50px 0 0 0;
	/*background-image: url(images/top-hakusan.jpg);
	background-repeat: no-repeat;*/
	color: #fff;
}

nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	color: #333;
}

nav h1, nav h2 {
	margin: 0;
	font-size: 18px;
}

/*nav h2 {
	height: 35px;
	line-height: 35px;
	background-image: url(images/icon-ie.png);
	background-repeat: no-repeat;
}*/

nav ul li a {
	display: block;
	width: 200px;
	text-decoration: none;
}

nav a:hover{
	width: 200px;
    background: #f4f1e8;
    border-radius: 20px 20px 20px 20px;
}

#navbox-link a {
	display: block;
	width: 100px;
	text-decoration: none;
}

#navbox-link a:hover{
	width: 100px;
    background: #f4f1e8;
    border-radius: 70px 5px 70px 50px;
}

#navbox000, #navbox001, #navbox002, #navbox003, #navbox004, #navbox005, #navbox006, #navbox-link {
	width: 200px;
	margin: 20px;
	padding: 20px;
	text-align: center;
	background-color: #8596A3;
	background-color: #99CAD0;
	background-color: #8BC35F;
	background-image: url(images/backsuisai.jpg);
	/*background-repeat: repeat;*/
	/*background: linear-gradient(120deg, #DCDFDF, #B7D5D3);
	background: linear-gradient(120deg, #B0CD99, #B7D5D3);*/
	/*opacity: 0.95;*/
}

.nav-h2 {
	margin: 0 0 0 -10px;
}

/*#icon-shadow {
	box-shadow: 2px 2px 10px #000;
}*/

/*============================== media-L ===*/
@media screen and (min-width: 481px) {

#navbox000 {
	margin: auto;
	width: 270px;
	border-radius: 30px 30px 10px 10px;
}

#navbox001 {
	margin: 0 0 0 100px;
	border-radius: 50px 10px 50px 10px;
}

#navbox002 {
	margin: 0 0 0 50px;
	border-radius: 50px 10px 10px 50px;
}

#navbox003 {
	margin: 0 0 0 100px;
	border-radius: 10px 50px 10px 50px;
}

#navbox004 {
	margin: auto;
	width: 300px;
	height: 30px;
	border-radius: 0px 0px 50px 50px;
}

#navbox005 {
	margin: 15px 100px 0 0;
	height: 100px;
	float: right;
	border-radius: 30px 10px 50px 10px;
}

#navbox006 {
	margin: 0 100px 0 0;
	height: 100px;
	float: right;
	border-radius: 10px 70px 30px 70px;
}
	
#navbox006baby {
	margin: 0 0 0 10px;
	width: 70px;
	height: 60px;
	float: right;
	background: linear-gradient(120deg, #B7D5D3, #f4f1e8);
	/*background-image: url(images/backsuikuro.png);*/
	border-radius: 10px 70px 30px 70px;
}


#navbox-link {
	margin: 80px 0 0 330px;
	width: 100px;
	height: 80px;
	line-height: 80px;
	border-radius: 70px 5px 70px 50px;
}

img#go-home {
	position: fixed;
	top: -15px;
	margin: 0 0 0 630px;
	padding: 25px 10px 8px 10px;
	background-color: #DDA415;
	box-shadow: 2px 2px 3px #333;
	background-image: url(images/backsuikuro.png);
	border-radius: 0px 0px 10px 10px;
	/*display: none;*/
}

img#go-office {
	position: fixed;
	top: -15px;
	margin: 0 0 0 700px;
	padding: 35px 5px 8px 5px;
	background-color: #DDA415;
	box-shadow: 2px 2px 3px #333;
	background-image: url(images/backsuikuro.png);
	border-radius: 0px 0px 15px 15px;
}
	
img#go-home:hover {
	top: -13px;
	margin: 0 0 0 632px;
	box-shadow: 1px 1px 1px #333;
}
	
img#go-office:hover {
	top: -13px;
	margin: 0 0 0 702px;
	box-shadow: 1px 1px 1px #333;
}
	
/*==================== piyo ===*/
	
#piyo001, #piyo002, #piyo003, #piyo004, #coro001 {
	/*opacity: 0.8;*/
}
	
#piyo001 {
	float: left;
	position: relative;
	top: -4px;
	left: -110px;
}
	
#piyo002 {
	float: left;
	position: relative;
	top: -4px;
	left: -95px;
}
	
#piyo003 {
	float: left;
	position: relative;
	top: -24px;
	left: 300px;
}

#piyo004 {
	float: left;
	position: relative;
	top: -9px;
	left: 450px;
}	

#coro001 {
	float: left;
	position: relative;
	top: -73px;
	left: 590px;
}

#nazo001 {
	float: left;
	position: relative;
	top: -58px;
	left: 90px;
}

#nazobox {
	width: 100px;
	height: 50px;
	position: relative;
	top: -20px;
	left: 50px;
	background-color: #8BC35F;
	background-image: url(images/backsuisai.jpg);
	opacity: 0.9;
}




} /*media-L*/

/*============================== media-M ===*/
@media screen and (min-width: 481px) and (max-width: 800px) {

/*	#boss {
		width: 100%;
	}*/
	
	img#go-home {
		right: 120px;
	}
	
	img#go-office {
		right: 15px;
	}
	
	img#go-home:hover {
		right: 118px;
		box-shadow: 1px 1px 1px #333;
	}

	img#go-office:hover {
		right: 13px;
		box-shadow: 1px 1px 1px #333;
	}
	
/*	#navbox004 {
		width: 0;
		height: 0;
		margin: 0;
		padding: 0;
	}*/
	
/*	#navbox005 {
		margin: auto;
		height: 100px;
		float: right;
		border-radius: 30px 10px 50px 10px;
	}*/
	
/*	img.ura-pic-s {
		width: 90%;
	}*/
	

}/*media-M*/

/*============================== media-S ===*/
@media screen and (max-width: 480px) {
	
	#boss {
		margin: auto;
		width: 90%;
	}

	img.titleimg {
		margin: 40px 0 0 0;
		width: 90%;
		height: auto;
	}

	img.ura-pic-s {
		visibility: hidden;
		/*width: 97%;
		height: auto;*/
	}

	#momo-bottom {
		margin: 0;
	}

	#navbox000 {
		margin: auto;
		width: 200px;
		border-radius: 50px 50px 20px 20px;
	}

	#navbox001 {
		margin: auto;
		border-radius: 30px 30px 30px 30px;
	}

	#navbox002 {
		margin: auto;
		border-radius: 30px 30px 30px 30px;
	}

	#navbox003 {
		margin: auto;
		border-radius: 30px 30px 50px 50px;
	}

	#navbox004 {
		width: 0;
		height: 0;
		margin: 0;
		padding: 0;
	}

	#navbox005 {
		margin: auto;
		border-radius: 30px 30px 30px 30px;
	}

	#navbox006 {
		width: 0;
		height: 0;
		margin: 0;
		padding: 0;
	}

	#navbox-link {
		margin: auto;
		width: 100px;
		height: 80px;
		line-height: 80px;
		border-radius: 70px 5px 70px 50px;
	}

	img#go-home {
		position: fixed;
		top: -15px;
		right: 120px;
		/*margin: 0 0 0 20px;*/
		padding: 25px 10px 8px 10px;
		background-color: #DDA415;
		box-shadow: 2px 2px 3px #333;
		background-image: url(images/backsuikuro.png);
		border-radius: 0px 0px 10px 10px;
	}

	img#go-office {
		position: fixed;
		top: -15px;
		right: 15px;
		/*margin: 0 0 0 90px;*/
		padding: 35px 5px 8px 5px;
		background-color: #DDA415;
		box-shadow: 2px 2px 3px #333;
		background-image: url(images/backsuikuro.png);
		border-radius: 0px 0px 15px 15px;
	}
	
	img#go-home:hover {
		top: -13px;
		right: 118px;
		/*margin: 0 0 0 22px;*/
		box-shadow: 1px 1px 1px #333;
	}

	img#go-office:hover {
		top: -13px;
		right: 13px;
		/*margin: 0 0 0 92px;*/
		box-shadow: 1px 1px 1px #333;
	}
	
/*==================== piyo ===*/
	
#piyo001, #piyo002, #piyo003, #piyo004, #coro001, #nazo001, #nazobox {
	display: none;
}
	
} /*media-S*/


/*============================== animation-piyo ===*/

#piyo003:hover {
    animation-duration: 0.5s;
    animation-name: piyo-move01;
    animation-iteration-count: 2;
}

@keyframes piyo-move01 {
      0% {top: -24px;}
     50% {top: -28px;}
    100% {top: -24px;}
}

#piyo001:hover, #piyo002:hover {
    animation-duration: 0.5s;
    animation-name: piyo-move02;
    animation-iteration-count: 2;
}

@keyframes piyo-move02 {
      0% {top: -4px;}
     50% {top: -8px;}
    100% {top: -4px;}
}

#coro001:hover + #piyo004 {
    animation-duration: 5s;
    animation-name: piyo-move03;
    animation-iteration-count: 2;
}

@keyframes piyo-move03 {
     35% {top: -34px;}
	 40% {top: -30px;}
	 70% {top: -58px;}
     80% {top: -54px;}
     85% {top: -58px;}
	 90% {top: -54px;}
     95% {top: -58px;}
    100% {top: -9px;}
}

#nazo001:hover {
    animation-duration: 1s;
    animation-name: nazo-move01;
    animation-iteration-count: 3;
}

@keyframes nazo-move01 {
      0% {top: -56px;}
     30% {top: -53px;}
     70% {left: 88px;}
    100% {top: -58px;}
}

/*============================== nazo-js ===*/

/*.nazo_style0 {
	filter: saturate(0%);
}*/

.nazo_style {
	filter: saturate(150%);
	animation-duration: 5s;
    animation-name: nazo-move02;
    animation-iteration-count: 1;
}

@keyframes nazo-move02 {
      0% {top: -58px;}
     10% {top: -53px;}
     20% {top: -63px;}
	 50% {top: -53px;}
     70% {top: -70px;}
	 80% {top: -53px;}
	 90% {top: -78px;}
    100% {top: -56px;}
}

/*============================== top-picture ===*/
/*#top-picture {
	position: fixed;
	top: 50px;
	z-index: 0;
	margin: 100px 0 0 0;
}*/

/*============================== footer ===*/

footer h2 {
	font-size: 16px;
}

footer small {
	font-size: 100%;
}

#footbox001 {
	margin: auto;
	width: 90%;
	height: 30px;
	background-color: #8BC35F;
	background-image: url(images/backsuisai.jpg);
	border-radius: 30px 30px 5px 5px;
}

#footbox002 {
	margin: auto;
	padding: 1px 20px 1px 20px;
	width: 200px;
	background-color: #B4CF46;
	background-color: #8BC35F;
	background-image: url(images/backsuisai.jpg);
	color: #fff;
	text-align: center;
	border-radius: 0px 0px 50px 50px;
}

#footbox-add {
	margin: auto;
	padding: 30px 0px 10px 0px;
	/*width: 250px;*/
	/*background-color: #517C9F;*/
	text-align: center;
	color: #333;
}

#footbox-c {
	margin: auto;
	padding: 10px;
	width: 90%;
	background-color: #A2453B;
	background-image: url(images/backsuicha.png);
	color: #fff;
	border-radius: 10px 10px 50px 50px;
}

#footbox-c p {
	margin: 0px;
	text-align: center;
}

img#icon-mail:hover {
	opacity: 0.7;
}