@charset "UTF-8";

*{box-sizing: border-box;	margin: 0;
	padding: 0;}
body,html {
  width: 100%;
	  cursor: url("point.png"), auto;
}

	
#footer,#footer06 {margin: 0;
	padding: 0;}

#footer {margin: 200px 0 0;}


.info img {max-width:300px; }

.cont-wrap{width: 40%;}
.map{width: 60%;}
.pin1 {
  animation-name: huwa;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: 1s;
}
@keyframes huwa {
  0% {
    transform: translate(0, -90px);
  }
  100% {
    transform: translate(0, -50px)
  }
}
#sample {
  font-weight: 900px;
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
}
/*ナビゲーションのスタイル*/
.header-nav {
  padding: 10px;
 postion: -webkit-sticky;
    position: sticky;
    top: 0;
	right: 0;
	z-index: 999;
	background:rgba(255,255,255,0.8);
	width: 100%;
}
.header-nav ul {
	width: 40%;
	margin-right: 0;
 margin-left: auto;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.header-nav ul li {
  font-size: 14px;
  list-style: none;
  text-decoration: none;
  width: 25%;
	text-align: center;

}
.header-nav ul li a {
  position: relative;
  text-decoration: none;
  color: black;
  font-weight: 900px;
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
	  list-style: none;
}

/*ホバーエフェクト*/
.header-nav ul li a::after {
  /*アンダーラインのスタイル*/
  position: absolute;
  content: "";
  display: block;
  height: 2px;
  background-color: #E42C31;
  bottom: -15px;
  left: 0;
  /*幅を0に設定*/
  width: 0;
  /*アニメーションの速度設定*/
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
		  list-style: none;
}
.nav_item{
	list-style:none;
}
.header-nav ul li a:hover::after {
  /*幅を100%に設定*/
  width: 100%;
}

.top_image{
	background-image: url("map.jpg");
	background-position: bottom;
	background-size: 100% 55%;
	background-repeat: no-repeat;
}
.top_image h1 {margin: 5px 10px 0 20px;}
.top_image h2{margin: 0 0 0 20px;}

.top_image h3 {margin: 15px 0 0 20px;}
.top_image h3 img {width: 40%;}
h1 {
  font-size: 25px;
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
}
h3 {
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
}
.pin1 {
  width: 100%;
	margin: 100px 0 0;
}
.pin1 img{width: 20%;
min-width: 150px;
	margin-left: 37%;
}
/*.hd {}
.hd img {
  width: 100%;
}*/
.map img {
  height: 10%;
  width: 10%;
  background-size: cover;
  background-repeat: no-repeat;
}
.nitiji {
	  letter-spacing: 0;
	padding: 0 0 20px 0
}
.nitiji h1 {
  text-shadow: 5px 5px 1px #ffffff;
  text-align: right;
  margin: -100px 30px 0 0;
  font-size: 90px;
  font-weight: 900px;
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
}
.nitiji h2 {
  text-shadow: 5px 5px 1px #ffffff;
  text-align: right;
	margin: -30px 30px 0 0;
  font-size: 110px;
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
}
.nitiji h3 {
  text-shadow: 5px 5px 1px #ffffff;
  text-align: right;
	margin: -30px 30px 0 0;
  font-size: 73px;
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
}
.fade {
  opacity: 0;
  transform: translateY(100px);
  transition: opacity 2.5s, transform 1s;
}
.fade.active {
  opacity: 1;
  transform: translateY(0px);
}

.dezaintentoha {
  margin-top: 200px;
  margin-left: 100px;
	width:350px;
}

.dezaintentoha img{width: 100%;}
.dezaintenbun {
  text-align: center;
  font-size: 15px;
  margin-top: 20%;
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
  font-weight: 600;
}
.maru1 {
  text-align: center;
  margin-top: -30%;
}
.maru1 {
  animation-name: huwa2;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: 5s;
}

	.maru1 img{width: 50%;
		min-width:400px; 
opacity: 0.2;}
@keyframes huwa2 {
  0% {
    transform: translate(0, -10px);
  }
  100% {
    transform: translate(0, 10px)
  }
}
.charm {
  text-align: right;
  margin-right: 300px;
  margin-top: -700px;
  animation-name: huwacharm;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: 5s;
}
@keyframes huwacharm {
  0% {
    transform: translate(0, -10px);
  }
  100% {
    transform: translate(0, 10px)
  }
}

		.charm img {width: 20%;
max-width: 300px;
min-width: 150px;}

		.point img {width: 20%;
max-width: 300px;
min-width: 150px;}

.turning img {width: 30%;
max-width: 400px;
min-width: 200px;}
.point {
  margin-left: 200px;
  animation-name: huwapoint;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: 2s;
}
@keyframes huwapoint {
  0% {
    transform: translate(0, -10px);
  }
  100% {
    transform: translate(0, 20px)
  }
}
.turning {
  margin-top: 50px;
  text-align: right;
  margin-right: 200px;
  animation-name: huwaturning;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: 3s;
}
@keyframes huwaturning {
  0% {
    transform: translate(0, -10px);
  }
  100% {
    transform: translate(0, 20px)
  }
}
.gakkasyoukai {
		width: 30%;
	min-width: 350px;
  margin:100px auto 0;
		text-align: center;
}
.gakkasyoukai img {width: 70%;}
.gakkapin {
	width: 80%;
  margin: 0 auto;
	display: flex;
	justify-content: space-around;
	align-items: center;
	flex-wrap: wrap;
	color: #000;text-align: center;
}
.gakkapin h3{color: #000;
padding: 10px 0;
}
.gakkapin p {color: #000;
width: 90%;
margin: 0 auto;
text-align: left;}

.gakkapin div {width: 30%;
margin: 30px 0;}

.gakkapin img {width: 40%;}

.gd {
  /*コレ*/ margin: auto;
}
.gd {
  border-radius: 50%;
  transition: all 0.6s ease 0s;
}
.gd:hover {
  cursor: pointer;
  transform: scale(1.1, 1.1);
}
.gc {
  /*コレ*/ margin: auto;
}
.gc {
  border-radius: 50%;
  transition: all 0.6s ease 0s;
}
.gc:hover {
  cursor: pointer;
  transform: scale(1.1, 1.1);
}
.ma {
  /*コレ*/ margin: auto;
}
.ma {
  border-radius: 50%;
  transition: all 0.6s ease 0s;
}
.ma:hover {
  cursor: pointer;
  transform: scale(1.1, 1.1);
}
.nc {
  /*コレ*/ margin: auto;
}
.nc {
  border-radius: 50%;
  transition: all 0.6s ease 0s;
}
.nc:hover {
  cursor: pointer;
  transform: scale(1.1, 1.1);
}
.ti {
  /*コレ*/ margin: auto;
}
.ti {
  border-radius: 50%;
  transition: all 0.6s ease 0s;
}
.ti:hover {
  cursor: pointer;
  transform: scale(1.1, 1.1);
}
.gakuseisakuhinmaru {
  text-align: center;
  margin-top: 110px;
  margin-bottom: -380px;
}
p a img {
  filter: grayscale(100%);
}
p a img:hover {
  filter: grayscale(0);
  transition: 0.3s;
}
.gakuseisakuhin {
  margin-top: 200px;
  text-align: center;
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
  font-weight: 600;
  font-size: 20px;
}
.gakuseibotan {
  margin-top: 0px;
  text-align: center;
}
#dezaintentoha,#gakkasyoukai,#ibento {padding: 30px 0 0;}

#ibento {
		width: 20%;
	min-width: 350px;
  margin:100px 0 50px;
		text-align: center;
}
#ibento img {width: 70%;}
.guest {width:80%;
margin: 50px auto 0;
display: flex;}

.ibentonitiji {
	padding-bottom: 10px;width: 350px;
}

.ibentonitiji img {width: 100%;}
.tokubetukouen {
  letter-spacing: 10px;
  font-size: 50px;
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
  font-weight: 600;
	line-height: 1.2;
}
.kouenkaisetumei {
	max-width:550px; 
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
  font-weight: 600;
  line-height: 40px;
	margin: 30px 0 0;
}
.ibentosyasin {
  animation-name: huwasyasin;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: 1s;
}

.ibentosyasin img{width: 90%;}

.guest_text{padding: 0 0 0 20px;}

@keyframes huwasyasin {
  0% {
    transform: translate(0, -10px);
  }
  100% {
    transform: translate(0, 10px)
  }
}
#sample {
  cursor: url("point.png"), auto;
}
body {
  cursor: none;
}
@keyframes typinganime {
  from {
    opacity: 0
  }
  to {
    opacity: 1
  }
}
/*========= LoadingのためのCSS ===============*/
/* Loading背景画面設定　*/
#splash {
  /*fixedで全面に固定*/
  position: absolute;
  width: 1000%;
  height: 1000%;
  z-index: 2000;
  background: #fff;
  text-align: center;
  color: #fff;
	padding: 0;
	margin: 0;
}
/* Loading画像中央配置　*/
#splash_logo {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/* Loading アイコンの大きさ設定　*/
#splash_logo svg {
  width: 3000px;
  height: 3000px;
}
/*=============== SVGアニメーション内の指定 =================*/
/*アニメーション前の指定*/
#mask path {
  fill-opacity: 0; /*最初は透過0で見えない状態*/
  transition: fill-opacity .2s; /*カラーがつく際のアニメーション0.5秒で変化*/
  fill: #C8191D; /*塗りがない状態*/
  stroke: #C8191D; /*線の色*/
}
/*アニメーション後に.doneというクラス名がで付与された時の指定*/
#mask.done path {
  fill: #C8191D; /*塗りの色*/
  fill-opacity: 1; /*透過1で見える状態*/
  stroke: 3px; /*線の色なし*/
}
/*========= レイアウトのためのCSS ===============*/
#container {
  width: 100%;
  height: 100vh;
  background: #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
}
a {
  color: #00000;
}
a:hover {
  text-decoration: none;
}
html {
  scroll-behavior: smooth;
  font-weight: 900px;
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
}

.copyright{
color:#fff;}

@media only screen and (min-width: 641px) {

}
.pagetop {
  height: 50px;
  width: 50px;
  position: fixed;
  right: 30px;
  bottom: 30px;
  background: #fff;
  border: solid 2px #000;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
  font-weight: 900px;
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
}
.pagetop__arrow {
	
  height: 10px;
  width: 10px;
  border-top: 3px solid #000;
  border-right: 3px solid #000;
  transform: translateY(20%) rotate(-45deg);
  font-weight: 900px;
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
}
a {
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
  color: #FFFFFF;
  text-decoration: none;
  list-style: none;
}

.header-nav ul li a {
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
  font-weight: 700;
  font-size: 15px;
}
.address {
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
  font-weight: 700;
  font-size: 15px;
  color: #FFFFFF;
  text-align: left;
	margin-left: 400px;
}

.inner-block{display: flex;}
#footer06 {
  background: #C8191D;
			z-index:1;
  width: 100%;
padding: 100px 100px;
}

#footer06 .info .address {
  margin: 20px 0;
  font-size: 15px;
  padding-left: 20px;
  border-left: 1px solid #fff;
  color: #FFFFFF;
}

.map iframe{
  width: 100%;
	max-width:700px;
  height: 300px;
}





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

.header-nav ul{
	width: 50%;
}
	.nitiji h1 {
  margin: -110px 30px 0 0;
  font-size: 75px;
}
.nitiji h2 {
	margin: -30px 30px 0 0;
  font-size: 95px;
}
.nitiji h3 {
	margin: -30px 30px 0 0;
  font-size: 60px;
}	

	.maru1{
	width: 100%;
		text-align: center;
		 margin-top: -35%;
	}

.charm {
  margin-right: 200px;
  margin-top: -570px;
}

.point {
  margin-left: 130px;
}
	
.turning {
  margin-top: 50px;
  margin-right: 200px;
}
	.gakkasyoukai{
	
  margin: 0 auto;
		padding: 100px 0;
	}

.header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
  background: #fff;
  position: relative;
}

.logo {
  font-size: 24px;
}
	
	.gakuseisakuhinmaru {
  text-align: center;
  margin-top: 110px;
  margin-bottom: -380px;
}
p a img {
  filter: grayscale(100%);
}
p a img:hover {
  filter: grayscale(0);
  transition: 0.3s;
}

	#ibento{margin-top: 200px;}
	
	.itidanme td {
		
		display:flex;
		flex-direction:column;
		width: 80%;
		height: 80%;
}
	.nidanme td {
  
		display:flex;
		flex-direction:column;
  margin-top: 100px;
		margin: 0 auto;
		
}

	.drawer_hidden{
	opacity:100;
}
	
	.tokubetukouen {

  font-size: 40px;

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


.header-nav ul li{width: 25%;}
		.top_image h1{font-size:23px;}
		.top_image h1 span{display: block;}
		.top_image h2{font-size:23px;}
	.top_image h3 img {width: 60%;}
		
.nitiji h1 {
  font-size: 65px;
}
.nitiji h2 {
  font-size: 85px;
}
.nitiji h3 {
  font-size: 50px;
}	
			.dezaintentoha {
				margin-top: 100px;}
		
		.maru1{
	width: 100%;
		text-align: center;
		 margin-top: -35%;
	}

.charm {
  margin-right: 200px;
  margin-top: -370px;
}

.point {
  margin-left: 130px;
}
	
.turning {
  margin-top: 50px;
  margin-right: 200px;
}	
		.gakkapin div {width: 50%;
}

		#gakuseisakuhin {display: none;}
		
		.guest {width:90%;
			margin: auto;
flex-wrap: wrap;}
		
		.tokubetukouen {
font-size: 60px;
}
.kouenkaisetumei {
	max-width:800px; 

}
		.ibentosyasin {text-align: center;margin-bottom: 30px;}
.ibentosyasin img{width: 70%;}
		
		.inner-block
		{flex-wrap: wrap;}
		.info{width: 100%;}
		.map {display: none;}
		.cont-wrap{width: 100%;}
}
	
	
	@media screen and (max-width : 600px){
		.header-nav ul{width: 80%;}
		.top_image h1{margin: 10px 10px 0 20px;}
		.top_image h3 img {width: 90%;}
		.pin1 img{
	margin-left: 32%;
}
					.nitiji h1 {
						margin: -110px 30px 0 0;
  font-size: 50px;
}
.nitiji h2 {
		margin: -20px 30px 0 0;
  font-size: 65px;
}
.nitiji h3 {
		margin: -20px 30px 0 0;
  font-size: 35px;
}	
	.dezaintentoha {
		width: 100%;
  margin-left: 0;
		text-align: center;
}
		.dezaintentoha img {width: 70%;}
		
			.maru1{
	width: 100%;
		text-align: center;
		 margin-top: -60%;
	}
		
		.charm {opacity: 0.1;
  margin-right: 10px;
  margin-top: -370px;
}


.point {opacity: 0.1;
  margin-left: 10px;
}
	
.turning {opacity: 0.1;
  margin-top: 50px;
  margin-right: 10px;
}
		.gakkapin div {width: 80%;
}	
				.tokubetukouen {
font-size: 40px;
}

}