@charset "utf-8";

/*================================
PC & SP
================================*/
li{
  list-style: none;
}
img{
  border:none;
  vertical-align:bottom;
}
.over{
  transition: -webkit-opacity .5s ease;
  transition: opacity .5s ease;
}
.over:hover{
  opacity: 0.4;
}


/*.futura {
	font-family: "futura-pt-bold";
}*/
.shippori {
  font-family: "Shippori Mincho B1", serif;
  font-weight: 400;
  font-style: normal;
}
.aoboshi {
  font-family: "Aoboshi One", serif;
  font-weight: 400;
  font-style: normal;
}
.la-belle {
  font-family: "La Belle Aurore", cursive;
  font-weight: 400;
  font-style: normal;
}


body{
  font-family: "Shippori Mincho B1", serif;
  font-style: normal;
  
	color: #4D4D4D;
	font-size: 16px;
	line-height: 1.6em;
}
.inner{
	max-width: 1200px;
	margin: 0 auto;
}
.m-inner{
	max-width: 980px;
	margin: 0 auto;
}
.section{
	margin: 0 0 100px;
}
.is-pc{
	display: block !important;
}
.is-sp{
	display: none !important;
}

a:hover {
    /*color: #5B4F3F;*/
   opacity: .6;
    transition : .5s;
  }

a[href^="tel:"] {
	cursor: default;
	text-decoration: none;
	color: #000 !important;
}
a.calendar {
}

.cf:after{
  content: ".";
  display: block;
  height: 0;
  font-size:0;
  clear: both;
  visibility:hidden;
}

.cf {display: inline-block;}

/* Hides from IE Mac \*/
* html .cf {height: 1%;}
.cf {display:block;}
/* End Hack */


.swiper-button-prev, .swiper-container-rtl .swiper-button-next{
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%234d3730'%2F%3E%3C%2Fsvg%3E")
}
.swiper-button-next, .swiper-container-rtl .swiper-button-prev{
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%234d3730'%2F%3E%3C%2Fsvg%3E");
}


/*================================
		for SP
================================*/
@media screen and (max-width: 960px) {
	.is-pc{
		display: none !important;
	}
	.is-sp{
		display: block !important;
	}
	.inner{
		/*max-width: 600px;*/
		padding: 0 0px;
	}

	body{
		padding: 0;
		min-width: auto;
		min-width: 0px;
    font-size: 14px;
	}

}

/*--------------------------------------
	 header 	
--------------------------------------*/
header {
	/*position: absolute;*/
	width: 100%;
	z-index: 1000;
  background-color: #fffa;
  position: fixed;
  top:0;
}
header .headerWrapper{
	overflow: hidden;
}
header .logo{
	display: inline-block;
	margin: 5px 20px 8px;
	width: 160px;
	/*max-width: 180px;*/
	float: left;
}
header .logo img{
	width: 100%;
}

header .headerbox{
	text-align: right;
	margin: 0 0 10px;
	vertical-align: top;
	padding: 20px 25px 0 0;
}
header .headerbox .header-btn{
	display: inline-block;
}
header .headerbox .header-btn nav{
	display: inline-block;
}
header .headerbox .header-btn ul{
	list-style-type: none;
	display: inline-block;
}
header .headerbox .header-btn ul li{
	display: inline-block;
}
header .headerbox .header-btn ul li a{
  font-size: 22px;
  letter-spacing: 1px;
	display: block;
	padding: 15px 18px;
	text-decoration: none;
  color: #4d4d4d;
	transition: background 0.5s ease;
    border-radius: 50px;
}
header .headerbox .header-btn ul li a:hover,
header .headerbox .header-btn ul li a.active{
	background: #8CC8F0;
	/*color: #fff;*/
}
header .headerbox .sns_tel{
	display: inline-block;
}
header .headerbox .sns_tel p{
	display: inline-block;
	margin: 0 0 0 5px;
	vertical-align: middle;
}
header .headerbox .sns_tel p.calendar{
	width: 80px;
	height: 80px;
	box-sizing: border-box;
	padding: 10px;
	background: #000;
	/*position: absolute;*/
	top: 0;
	right: 0;
	text-align: center;
}
header .headerbox .sns_tel p.calendar i{
	color: #fff;
	cursor: pointer;
	font-size: 32px;
}
header .headerbox .sns_tel p.calendar span{
	display: block;
	color: #fff;
	font-size: 12px;
}
header .headerbox .sns_tel p a{
	/*color: #000;*/
}
header .headerbox .sns_tel p i{
	font-size: 40px;
	color: #4D4D4D;
}

/*--------------------------------------
	 sp 	
--------------------------------------*/
/* SP用 */
@media screen and (max-width: 1200px) {
	header .headerbox{
		/*padding: 10px 100px 0 0;*/
	}
	header .headerbox .header-btn ul li a{
		/*padding: 5px 3px;*/
		font-size: 18px;
	}
	header .headerbox .sns_tel{
		/*display: block;
		margin: 5px 0 0;*/
	}
}
@media screen and (max-width: 960px) {
  header{
    background-color: #fff0;
  }
  
	header .logo{
		position: fixed;
		top: 10px;
		left: 10px;
		width: 80px;
		margin: 0px;
	}
	header .headerbox{
		padding: 0;
	}
	header .text{
		font-size: 15px;
	}
	header .headerbox > a.calendar{
		position: fixed;
		z-index: 1000;
		width: 60px;
		height: 60px;
		right: 62px;
		background: #000;
		text-align: center;
		text-decoration: none;
	}
	header .headerbox > .calendar i{
		color: #fff;
		font-size: 28px;
		position: relative;
		top: 10px;
	}
	header .headerbox > .calendar span{
		display: block;
		color: #fff;
		font-size: 10px;
	}
	header .headerbox .sns_tel p a[href^="tel:"] {
		cursor: default;
		color: #FFF !important;
	}
}

/*--------------------------------------
	 drawer 	
--------------------------------------*/
.drawer-overlay{
	background: #fff;
}
.drawer-nav{
	width: 100%;
	text-align: center;
}
.drawer--right .drawer-nav{
	right: -100%;
}
.drawer-hamburger{
	background: #8CC8F0 !important;
	width: 60px;
	height: 60px;
	top: 0;
	margin: 0;
	box-sizing: border-box;
}
.drawer-hamburger-icon, .drawer-hamburger-icon:before, .drawer-hamburger-icon:after{
	height: 2px;
	background: #fff;
}

.drawer-nav{
	background: #fff;
}
.drawer-nav .image{
	position: relative;
}
.drawer-nav .image p{
	position: absolute;
	top: 15px;
	left: 5%;
	width: 30%;
  max-width: 180px;
	text-align: left;
}
.drawer-nav .image p img{
	width: 100%;
}
.drawer-nav ul{
	list-style-type: none;
	overflow: hidden;
	margin-top: 30%;
	margin-bottom: 20px;
}
.drawer-nav ul li{
	width:calc(50% - 10px);
	float: left;
	margin: 5px;
}
.drawer-nav ul li a{
	display: block;
	text-decoration: none;
	color: #4d4d4d;
	padding: 15px 0 15px 0;
	/*border: 4px solid #fff;*/
	font-size: 20px;
	
}
.drawer-nav a.calendar{
	display: block;
	background: #fff;
	color: #efd104;
	margin: 0 5px 20px;
	padding: 10px 0 10px 0;
	border: 4px solid #fff;
	font-size: 20px;
	text-decoration: none;
}

.drawer-nav .sns_tel{
	margin-bottom: 30%;
}
.drawer-nav .sns_tel p i,
.drawer-nav .sns_tel p{
	color: #8CC8F0!important;
  padding: 0px 10px;
}

/*--------------------------------------
	 mv 	
--------------------------------------*/
.mv{
  margin-top: 105px;
	/*padding: 200px 0 0;*/
	box-sizing: border-box;
	/*height: calc(100vh + 100px);*/
  height: 80vh;
	min-height: 500px;
  max-height: 800px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mv .ttl{
  /*padding: 110px 0 0 ;*/
}
.mv h2{
	/*position: absolute;*/
	/*top: 30%;*/
	/*right: 10%;*/
  color: #fff;
	font-size: 54px;
  letter-spacing: 2px;
  text-align: center;
  width: 100%;
  line-height: 1.4em;
  margin: 0 0 10px;
}
.mv .leadWrapper{
	/*position: absolute;*/
	/*top: 40%;*/
	width: 100%;
	z-index: 2;
}
.mv .lead p{
	font-size: 18px;
	color: #808080;
	line-height: 1.2em;
	font-weight: 600;
    text-align: center;
}
.mv .lead p span{
	display: inline-block;
	background: #fffc;
	padding: 5px 10px;
	margin: 0 0 10px;
}
.mv .text{
	font-size: 20px;
	line-height: 1.5em;
	color: #1f365b;
	margin: 20px 0 0 5%;
}
/*--------------------------------------
	 sp 	
--------------------------------------*/
/* SP用 */
@media screen and (max-width: 960px) {
	.mv{
    margin-top: 0;
		background-attachment: scroll !important;
		/*background-size: auto 400px !important;*/
		/*padding: 100px 0 0;*/
		min-height: initial;
    height: 50vh;
	}
.mv .ttl {
  padding: 0;
}
 .mv h2{
		/*top: 100px;
		left: 0;
		right: 0;*/
		width: 100%;
		padding: 0px;
		font-size: 36px;
		margin: 0;
	}
	.mv .leadWrapper{
		/*top: 180px;*/
	}
	.mv .lead p{
		font-size: 15px;
	}
	.mv .text p{
		font-size: 15px;
		line-height: 1.4em;
	}
}


/*--------------------------------------
	 main 	
--------------------------------------*/
main .inner{
	background: rgba(255,255,255,0.7);
	padding: 100px 20px 20px;
  width: calc(100% - 40px);
	/*margin-top: -300px;*/
  letter-spacing: 0.05em;
}
main .inner img{
  max-width: 100%;
  /*width: 100%;*/
  height: auto;
}

main .info{
  display: flex;
  gap:4%;
}
main .info .ph{
  width: 40%;
}
main .info .ph img{
  width: 100%;
  height: auto;
}
main .info .infoWrapper{
  width: 60%;
}
main .info h4{
  font-size: 20px;
  line-height: 1.8;
  margin-bottom: 20px;
  letter-spacing: .6px;
}
main .info h4 span{
  display: block;
  font-size:46px;
}
main .info .infoWrapper .txt{
  line-height: 2.4;
}
main .info2.aR{
  text-align: right;
}
main .info2.aL{
  text-align: left;
}
main .info2 img{
  width: 70%;
  height: auto;
}

main section{
  margin: 0 auto 15%;
}
main h3{
  text-align: center;
  font-size: 40px;
  line-height: 150%;
  letter-spacing: 5%;
  margin-bottom: 24px;
}
main .ttl_txt{
  text-align: center;
  margin-bottom: 70px;
}



/*-----------	 sp 	-------------*/
/* SP用 */
@media screen and (max-width: 960px) {
	main .inner{
		/*margin-top: calc(-100vh + 300px);*/
		width: calc(100% - 40px);
    padding: 80px 0px 20px;
	}
  
  main .info{
    flex-wrap: wrap;
  }
  main .spRev {
    flex-wrap: wrap-reverse !important;
  }
main .info .ph{
  width: 100%;
  padding: 20px 0;
}
  main .info .ph img{
  width: 70%;
}
main .info .infoWrapper{
  width: 100%;
}
main .info2 img{
  width: 90%;
}
main .info h4{
  font-size: 20px;
}
main .info h4 span{
  font-size: 40px;
}
main h3{
  font-size: 30px;
  }
}



/* mask */
/*.mask_wrap{
	width: 60%;
	margin: 0 auto 50px;
}
.mask_wrap img{
	max-width: 100%;
}*/
/*-----------	 sp 	-------------*/
/* SP用 */
@media screen and (max-width: 960px) {
	/* mask */
/*	.mask_wrap{
		width: 100%;
		margin: 0 auto;
	}*/
}



/*--------------------------------------
	 footer 	
--------------------------------------*/
footer{
  /*margin-top: 80px;*/
	/*background: url(../images/common/bg_footer.png) no-repeat center 50vw;*/
	/*background-size: auto;*/
	/* background-size: contain; */
	/*padding: 50vw 0 0;
	margin: -45vw 0 0;*/
	/*position: relative;*/
	/*overflow: hidden;*/
}
footer.sp{
	/*padding: 5vw 0 0;
	margin: -5vw 0 0;*/
}
footer:before{
	/*content:"";
	background: url(../images/common/bg_dotted.png);
	width: 120%;
	height: 90%;
	transform:rotate(-10deg);
	transform-origin: left center;
	position: absolute;
	z-index: -1;
	top: 40vw;*/
}
footer .contac{
  text-align: center;
  padding: 40px 2% 0;
}
footer .contac h3{
  margin-bottom: 50px;
}
footer .contac h3 span{
  border-bottom: 10px solid #8CC8F0;
}
footer .staff{
  margin-top: 50px;
  text-align: right;
}
footer .staff img{
  width: 35%;
  height: auto;
}
footer .inner{
	/*overflow: hidden;*/
	/*margin: 120px auto 0;*/
	/*background: #000;*/
  padding: 70px 4% 30px;
  margin-top: -30px;
  background: url("../img/common/foot_wall.jpg") no-repeat center top;
	background-size:cover;
  max-width: 1600px;
}
footer .foot_flex{
  display: flex;
}
footer .inner .foot_logo{
  width: 25%;
}
footer .inner .foot_logo img{
  width: 80%;
  height: auto;
}
footer .inner .foot_link{
  width: 40%;
}

footer .inner .foot_link .tel{
  font-size: 2.2rem;
}

footer .inner .open_close{
	width: 35%;
	/*color: #fff;*/
}
footer .inner .open_close p{
	font-size: 14px;
	text-align: center;
	line-height: 1.7em;
	margin: 0 0 20px;
}
footer .inner .access{
	width: 33.3%;
  font-size: 12px;
	/*float: left;*/
	/*color: #fff;*/
}
footer .inner .access p{
	font-size: 14px;
	line-height: 1.7em;
	margin: 0 0 20px;
}
footer .inner .access .logo{
	/*font-size: 40px;*/
	margin: 0;
  padding: 8px 0 15px;
}
footer .inner .access .logo img{
  max-width: 150px;
}

footer p.copyright{
	clear: both;
	text-align: center;
	/*color: #fff;*/
	font-size: 14px;
	padding: 20px 0;
}
footer a{
  color: #4D4D4D;
}
footer a i{
  font-size: 36px;
  color: #8CC8F0;
}
footer a:link, footer a:visited{
}
footer a:hover, footer a:active{
}

/*--------------------------------------
	 sp 	
--------------------------------------*/
/* SP用 */
@media screen and (max-width: 960px) {
  footer .staff{
  text-align: center;
}
footer .staff img{
  width: 80%;
 max-width: 300px;
}
  
  footer .foot_flex{
  display: block;
}
  footer .inner .foot_logo{
  text-align: center;
  width: 100%;
    margin-bottom: 30px;
}
  footer .inner .foot_logo img{
    max-width: 300px;
  }
footer .inner .foot_link{
  width: 100%;
  text-align: center;
  margin-bottom: 30px;
}
footer .inner .foot_link .tel{
  font-size: 1.8rem;
}
footer .inner .open_close{
	width: 100%;
  margin-bottom:30px;
}
  
	footer .inner .open_close{
		width: 100%;
		float: none;
	}

	footer .inner .access{
		width: 100%;
		float: none;
	}
	
}
@media screen and (max-width: 640px) {
}



/*-----gallery----*/

.gallery{
   display: flex;
   flex-wrap: wrap;
  gap: 2%;
/*columns:3;*/
/*padding:0 15px;*/
/*width: 86%;*/
margin: 0 auto 20px;
}
.gallery li {
  width: calc(24.5% - 1%);
    margin-bottom: 30px;
}
.gallery img{
	width:100%;
	height: 100%;
  object-fit: cover;
	vertical-align: bottom;
}

/*-----------	 sp 	-------------*/
/* SP用 */
@media screen and (max-width: 960px) {
.gallery{
	/*columns: 2;*/
	/*width: 95%;*/
	}	
   .gallery li {
  width: calc(50% - 1%);
   }
}

/*========= レイアウトのためのCSS ===============*/

ul{
	margin:0;
	padding: 0;
	list-style: none;
}

/*画像を出現させるアニメーションCSS*/

.flipLeft{
animation-name: flipLeft;
animation-duration:0.5s;
animation-fill-mode:forwards;
perspective-origin: left center;
opacity: 0;
}

@keyframes flipLeft{
  from {
   transform: perspective(600px) translate3d(0, 0, 0) rotateY(30deg);
 	opacity: 0;
  }

  to {
  transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
  opacity: 1;
  }
}