@charset "UTF-8";

html{
	font-size: 62.5%;
}


body{
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	font-size:1.6rem;/* 16px*/
    line-height: 2;

}

a{
	text-decoration: none;
	display: block;
}


.hero-header{
	background-image: url("img/IMG_-3.png");
	background-size: cover;
	background-position: center;
	width: 100vw;
	height: 100vh;
	position: relative;
}

.hero-header h1{
	font-size: 100px;
	font-size: 8vw;
	color: #F5FF6D;
	text-shadow: #FC0 1px 0 10px; /*映えどうしようか悩む*/
	opacity: 0.77;
	position: absolute;
	top: 20%;
	left: 15%;
	
}

.hero-header h1 a{
		color: #F5FF6D;
		padding: 100px 0px ;

}

.hero-header p figure{ /*画像が大きくならない。大きいサイズのものを使用すると小さくならない*/
	width: 100%;
}

.hero-header p figure img{
	width: 100%;
}


.hero-header p{
	position: fixed;	
	top: 2%;
	left: 2%;

}

.hero-header h3{
	background-color: #C9D15F;
	color: white;
	padding: 20px 40px;
	border-radius: 100px;
	font-size: 40px;
	font-size: 3vw;
	position: absolute;
	top: 85%;
	left: 42%;
	display: none;
	
}

.hero-header h3 a{
	display: block;
	color: white;
}


/*画面いっぱい用のロゴ*/

body{
	display: none;
}

.start{
	
	background: #FFF;
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 9000;

}

.start p {
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: none;
	z-index: 9999;
	width: 280px;
}

.start p img{
	width: 70%;
}

/*------------------------ここからabout.html------------------------------*/



.about-header{
	background-image: url("img/IMG_-11.png");
	background-size: cover;
	background-position: center;
	width: 100vw;
	height: 100vh;
	position: relative;
}

.about-header h1{
	font-size: 100px;
	font-size: 6vw;
	/*font-weight: 400 ;*/
	color: #F5FF6D;
	text-shadow: #FC0 1px 0 10px; /*映えどうしようか悩む*/
	opacity: 0.77;
	position: absolute;
	top: 30%;
	left: 10%;
	-webkit-text-stroke: 1px #000;/*縁取りアウトライン*/
  	text-stroke: 1px #000;
	
}


.about-header p figure{ /*画像が大きくならない。大きいサイズのものを使用すると小さくならない*/
	width: 100%;
}

.about-header p figure img{
	width: 100%;
}


.about-header p{
	position: absolute;
	top: 2%;
	left: 2%;

}

.about-header h3{
	
	color: white;
	font-size: 40px;
	font-size: 2.4vw;
	position: absolute;
	top: 55%;
	left: 15%;
	-webkit-text-stroke: 0.5px #000;/*縁取りアウトライン*/
  	text-stroke: 0.5px #000;
	background-color: rgba(29,29,29,0.60);
	line-height: 1.5;
	padding: 20px;
	
}

.about-header ul{
	display: flex;
	justify-content: flex-end;
	list-style: none;
	background-color: rgba(168,174,78,0.7);
	/*padding: 28px 0;*/
	width:100vw;
}

.about-header ul li{
	margin-right: 80px;
	color: white;
	font-size: 18px;	

}

.about-header ul li a{
	display: block;
	padding: 28px 0;
	color: white;

}


/*-------------------------access------------------------------------*/

.access-header{
	background-image: url("img/IMG_-11.png");
	background-size: cover;
	background-position: center;
	width: 100vw;
	height: 100vh;
	position: relative;
}



.access-header p figure{ /*画像が大きくならない。大きいサイズのものを使用すると小さくならない*/
	width: 100%;
}

.access-header p figure img{
	width: 100%;
}


.access-header p{
	position: absolute;
	top: 2%;
	left: 2%;

}

.access-header .sircle-access{
	text-align: center;
	width: 60%;
	height: 40%;
	color: white;
	font-size: 40px;
	font-size: 2.4vw;
	position: absolute;
	top: 30%;
	left: 15%;
	-webkit-text-stroke: 0.5px #000;/*縁取りアウトライン*/
  	text-stroke: 0.5px #000;
	background-color: rgba(168,174,78,0.60);
	line-height: 1.5;
	padding: 20px;
	
}

.access-header .sircle-access h3{
	position: absolute;
	top: 40%;
	left: 15%;
	font-size: 40px;
	font-size: 2.4vw;

	
}


.access-header .sircle-access p{
	position: absolute;
	top: 0%;
	left: 20%;
	font-size: 40px;
	font-size: 3.5vw;

}

.access-header ul{
	display: flex;
	justify-content: flex-end;
	list-style: none;
	background-color: rgba(168,174,78,0.7);
	/*padding: 28px 0;*/
	width:100vw;
}

.access-header ul li{
	margin-right: 80px;
	color: white;
	font-size: 18px;	

}

.access-header ul li a{
	display: block;
	padding: 28px 0;
	color: white;

}


/*---------------------contact-----------------------------*/



.access-header .sircle-contact{
	text-align: center;
	width: 60%;
	height: 40%;
	color: white;
	font-size: 40px;
	font-size: 2.4vw;
	position: absolute;
	top: 30%;
	left: 15%;
	-webkit-text-stroke: 0.5px #000;/*縁取りアウトライン*/
  	text-stroke: 0.5px #000;
	background-color: rgba(168,174,78,0.60);
	line-height: 1.5;
	padding: 20px;
	
}

.access-header .sircle-contact h3{
	position: absolute;
	top: 40%;
	left: 15%;
	font-size: 40px;
	font-size: 2.4vw;

	
}


.access-header .sircle-contact p{
	position: absolute;
	top: 0%;
	left: 30%;
	font-size: 40px;
	font-size: 3.5vw;

}




@media (max-width: 900px){
	
	
.start p {
	position: fixed;
	left: 55%;
	top: 45%;
	transform: translate(-50%, -50%);
	display: none;
	z-index: 9999;
	width: 280px;
}

	
/*---------------------about.html-------------------------------------------------*/
	

.about-header h3{
	
	font-size: 40px;
	font-size: 3vw;
	position: absolute;
	top: 55%;
	left: 5%;
	
}

/*----------------------access--------------------------------------*/
	
.access-header .sircle-access h3{
	position: absolute;
	top: 40%;
	left: 5%;
	font-size: 40px;
	font-size: 3vw;

	
}


.access-header .sircle-access p{
	position: absolute;
	top: 0%;
	left: 17%;
	font-size: 40px;
	font-size: 4vw;

}
	
	
/*----------------------contact---------------------------*/
.access-header .sircle-contact h3{
	position: absolute;
	top: 40%;
	left: 10%;
	font-size: 40px;
	font-size: 3vw;

	
}


.access-header .sircle-contact p{
	position: absolute;
	top: 1%;
	left: 30%;
	font-size: 40px;
	font-size: 4vw;

}

	
	
}



@media (max-width : 780px ){ /*ipadサイズ*/ /*文字サイズを可変にしたのでiphoneサイズも兼用*/
	
	
.start p {
	position: fixed;
	left: 55%;
	top: 45%;
	transform: translate(-50%, -50%);
	display: none;
	z-index: 9999;
	width: 280px;
}

	
.hero-header h3{
	display: block;
	
}
	
.hero-header h3{
	position: absolute;
	top: 85%;
	left: 39%;

	
}


	
/*--------------------------------------------about.html-------------------------------------------------*/	
	
	
.about-header h3{
	
	font-size: 40px;
	font-size: 3.5vw;
	position: absolute;
	top: 55%;
	left: 0%;
	
}
	
	
	
/*-----------------access-------------------------------------------------------*/	
	
.access-header .sircle-access h3{
	position: absolute;
	top: 40%;
	left: 5%;
	font-size: 40px;
	font-size: 3.2vw;

	
}


.access-header .sircle-access p{
	position: absolute;
	top: 10%;
	left: 15%;
	font-size: 40px;
	font-size: 4.5vw;

}

/*----------------------------contact---------------------------*/
	
	
	
.access-header .sircle-contact h3{
	position: absolute;
	top: 40%;
	left: 10%;
	font-size: 40px;
	font-size: 3.2vw;

	
}


.access-header .sircle-contact p{
	position: absolute;
	top: 10%;
	left: 30%;
	font-size: 40px;
	font-size: 4.5vw;

}

	
}







@media (max-width: 680px){
	
.start p {
	position: fixed;
	left: 55%;
	top: 45%;
	transform: translate(-50%, -50%);
	display: none;
	z-index: 9999;
	width: 280px;
}

	
.hero-header h1{
	position: absolute;
	top: 20%;
	left: 10%;
	
}
	
	
/*-----------------------about----------------------------*/	
	
.about-header ul{
		display: block;
		text-align: center;
		background-color: rgba(168,174,78,0.0);
		position: absolute;
		top: 15%;
		left: 5%;
	}
	
	.about-header ul li{
		margin-bottom: 30px;
		background-color: rgba(168,174,78,0.7);

		
	}
	
.about-header h1{
	font-size: 100px;
	font-size: 6vw;
	position: absolute;
	top: 70%;
	left: 10%;
	z-index: 10;
	color: #C1C138;
	text-shadow: #FC0 1px 0 10px; /*映えどうしようか悩む*/
	opacity: 1.0;
	position: absolute;
	-webkit-text-stroke: 0px #000;/*縁取りアウトライン*/
  	text-stroke: 0px #000;
	/*background-color: rgba(77,74,74,0.50);*/
	
}
	


	
	
.about-header{
	background-image: url("img/IMG_-11.png");
	background-size: cover;
	background-position: center;
	width: 100vw;
	height: 1000px;
	position: relative;
}

	
/*.about-header2{
	background-image: url("img/IMG_-11.png");
	background-size: cover;
	background-position: center;
	width: 100vw;
	height: 100vh;
	position: relative;
	z-index: 1;
}*/
	
	
.about-header h3{
	
	font-size: 40px;
	font-size: 3vw;
	position: absolute;
	top: 80%;
	left: 3%;
	z-index: 10;
	-webkit-text-stroke: 0px #000;/*縁取りアウトライン*/
  	text-stroke: 0px #000;
	background-color: rgba(29,29,29,0.60);
	line-height: 2;
	
}
	

	
	
.about-header ul li{
	font-size: 14px;	

}

.about-header ul li a{
	display: block;
	padding: 15px 0;
	color: white;

}

/*-----------------------access--------------------------------*/
	
	
.access-header ul li a{
	display: block;
	padding: 15px 0;
	color: white;

}

.access-header ul{
		display: block;
		text-align: center;
		background-color: rgba(168,174,78,0.0);
		position: absolute;
		top: 15%;
		left: 5%;
	}
	
.access-header ul li{
		margin-bottom: 30px;
		background-color: rgba(168,174,78,0.7);

		
	}
	
	
.access-header .sircle-access{
	text-align: center;
	width: 60%;
	height: 20%;
	color: white;
	font-size: 40px;
	font-size: 2.4vw;
	position: absolute;
	top: 50%;
	left: 15%;
	z-index: 10;
	
}

.access-header .sircle-access h3{
	position: absolute;
	top: 40%;
	left: 7%;
	font-size: 40px;
	font-size: 3.3vw;

	
}


.access-header .sircle-access p{
	position: absolute;
	top: 10%;
	left: 10%;
	font-size: 40px;
	font-size: 5.0vw;

}

	
/*.access-header2{
	background-image: url("img/IMG_-11.png");
	background-size: cover;
	background-position: center;
	width: 100vw;
	height: 100vh;
	position: relative;
	z-index: 1;
}*/
	
/*------------------------------contact-------------------------------------*/
	
	
.access-header{
	height: 1200px;	
	}	
	
.access-header .sircle-contact{
	text-align: center;
	width: 60%;
	height: 20%;
	color: white;
	font-size: 40px;
	font-size: 2.4vw;
	position: absolute;
	top: 50%;
	left: 15%;
	z-index: 10;
	
}
	

	
	
	
	
}