@charset "UTF-8";
/* CSS Document */
@media only screen and (min-width: 600px)
and (max-width: 950px) {
#topleft {
	width:40%;
	margin-top:20px;
	margin-left:50px;
}
#topleft h1 { 
	z-index:1000;
	font-size:2.5vw;
}
}
@media only screen and (min-width: 320px)
and (max-width: 600px) {
#topleft {
	width:60%;
	margin-top:20px;
	margin-left:50px;
}
#topleft h1{
	font-size:4vw;
}

#topleft p {
	font-size:8px;
}
}
@media only screen and (min-width: 320px)
and (max-width: 800px) {
body {
	background:none;
	margin-top:0px;
}
#bg {
	display:none;
}
#bg_s {
	display:block;
	width:100%;
	position:fixed;
	top:0;
	left:0;
	opacity:1;
	z-index:-2;
}
header h1 {
	z-index:1000;
	width:240px;
}
header {
	z-index:1000;
}

.backtotop {
	top:8vw;
	width:15%;
}
.anchor {
	top:7vw;
	font-size:6vw;
}
#boxR h1 {
	font-size:8vw;
}
}

@media only screen and (min-width: 320px)
and (max-width:639px){
.con_p {
	position:fixed;
	top:30vw;
	width:50%;
	margin-left:25%;
}
.boxL {
	width:100%;
	float:left;
}
.boxL dl {
	width:80%;
	margin:5% 0 0 10%;
	
}
.boxL dt {
	width:80%;
	height:auto;
	margin:0 0 8% 8%;
}
.boxL dd {
	font-family:"Osaka, ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:2.6vw;
	margin:2% 0 0 4%;
}
#boxR {
	width:100%;
	float:right;
}
#sample {
	background:#F7F7F3;
	width:70%;
	margin:8% 0 0 15%;
	border:dashed 4px #BFBFBE;
}
.maps h2 {
	width:20vw;
	margin:8vw 0 4vw 38vw;
}
#map {
	width:100%;
	height:60vw;
	margin:0;
	border:none;
}

#welcom h2 {
	font-size:10vw;
	font-family: 'Amatic SC', cursive;
	text-align:center;
	margin-top:6vw;
	letter-spacing:0.1em;
	font-weight:700;
}
#welcom p {
	text-align:center;
	margin:4% 19%;
	font-size:12px;
	font-family:"Meiryo,ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ",  Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif
}
#welcom ul {
	width:90%;
	margin:0 0 0 8.5%;
}
#welcom li {
	width:45%;
	display:inline-block;
	height:25vw;
	overflow:hidden;
	border:solid 1px #9A9797;
}
#welcom li:nth-of-type(1) {
	margin:0 0.5% 0 0;
}
#welcom li:nth-of-type(2) {
	margin:0	
}
#welcom li:nth-of-type(3) {
	margin:0 0.5% 0 0;
}
#welcom li:nth-of-type(5) {
	margin:0 0.5% 0 0;
}
}

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

/*----------menu--------------*/
header .menu {
	display:none;
}
.d_menu {
	position:absolute;
	visibility:visible;
	opacity:1;
	transition:all 0.2s ease;
	top:20px;
	right:140px;
	z-index:9999;
	height:auto;
}
.mainbtn {
	position:absolute;
	top:-20px;
	width:100px;
	padding:0 20px;
	height:60px;
	transition:all 0.2s ease;
	z-index:9999;
}

.mainbtn img {
	position:absolute;
	top:12px;
	right:10px;
	width:50px;
	z-index:9999;
}
.second {
	font-family: 'Amatic SC', cursive;
	font-size:30px;
	position:absolute;
	width:100%;
	top:40px;
	transition:all 0.2s ease;
	visibility:hidden;
	opacity:0;
	z-index:9999;
}
.second li {
	background:rgba(0,0,0,0.47);
	width:100px;
	text-align:center;
	margin:5px 0;
	padding:10px 20px;
	letter-spacing:0.2em;
	transition:all 0.2s ease;
	z-index:9999;
}
.second li a {
	width:100%;
	position:relative;
	transition:all 0.2s ease;
	z-index:9999;
	
}
.second li a::before {
	position:absolute;
	top:-24px;
	left:0;
	transition:all 0.2s ease;
	z-index:9999;
}
.single:hover >.second {
	visibility:visible;
	opacity:1;
}
.second li:hover {
	letter-spacing:0.1em;
}
.menu_t::before {
}
.menu_a::before {
}
.menu_i::before {
}
.menu_s::before {
}
.menu_c::before {
	margin-left:1vw;
}
.second a::before {
	opacity:0;
}
.second a:hover .second a::before {
	opacity:1;
}







}