@charset "utf-8";
/* CSS Document */

#backgroundBrand {
	background-repeat:no-repeat !important;
	background-size:90% !important;
	background-position:top 0px right -50px !important;
	/*background: url("../img/brand/hasu-bg.png");*/
	}

#backgroundRestaurant {
	background-repeat:no-repeat !important;
	background-size:50% !important;
	background-position:top 0px right -10px !important;
	background: url("../img/brand/restaurant-bg.png");
	}

#backgroundWedding {
	background-repeat:no-repeat !important;
	background-size:100% !important;
	background-position:top 20px right 0px !important;
	background: url("../img/brand/wedding-bg.png");
	}
	
.brand .bx-wrapper .bxslider img , .brand .bx-wrapper .bxslider source { width: 100%; height:auto; }
	
.brand-list {
	margin: 60px 0 0;
	padding: 0 0 30px;
	} 	
	
.brand-box {
	display:flex;
	flex-wrap :wrap;
	width: 100%;
	margin: 100px 0 0;
	text-align:center;
	}
	
.brand-box li {
	flex:0 0 50%;
	padding:2%;
	}

.brand-box li div a{
	display: flex;
	flex-direction: column;
	}
	
.brand-box li a {
	padding-bottom:3px;
	font-size:90%;
	line-height: 120%;
	color:#666;
	}
	
.brand-box a{
  position: relative;
  display: inline-block;
  transition: .3s;
}

.brand-box a::after {
  position: absolute;
  bottom: 0;
  left: 50%;
  content: '';
  width: 0;
  height: 2px;
  background-color: #17bafa;
  transition: .3s;
  transform: translateX(-50%);
}

.brand-box a:hover::after{
  width: 100%;
}

/*restaurant*/
.restaurant-list{
	display:flex;
	flex-direction: column-reverse;
	width: 100%;
	margin: 100px 0 0;
	padding: 0 0 0;
}
	
.restaurant-list-text{
	flex:100%;
}

.restaurant-list-images{
	flex:100%;
	margin:10px 0 0 0;
}

.restaurant-list-images img{
	width: 100%;
}

/*wedding*/

#weddingCont{
	margin: 250px 0 0;
}

.wedding-list{
	width: 100%;
	margin: 100px 0 0;
	padding: 0 0 0;
}
	
.wedding-list-text{
	width: 100%;	
}

.wedding-list-images{
	display:flex;
	justify-content:space-between;
	width: 100%;	
	margin:20px 0 0 0;
}

.wedding-list-images img{
	width: 100%;
}

.wedding-list-images li{
	flex:1;
}

.weddingBnr { width: 100%; margin-top: 20px;}
.weddingBnr img { width: 100%;}
.weddingBnr:hover { opacity:0.8;}

/*promise*/

.promise-list dl.listCont {
	margin: 100px auto 50px;}

.promise-list dl dt.circle {
	width: 300px;
	height: 300px;
	border-radius: 50%;
	background: #ddd;/*背景色*/
	margin: 50px auto 50px;
	text-align:center;
	font-size:150%;
	color: #fff;
	line-height: 40px;
	font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
	}
	
.promise-list dl dt.circle p { margin-bottom: 10px;}

.circleA {
	padding-top: 100px;
	animation: bg-color01 10 ease-in-out infinite;
	-webkit-animation: bg-color01 10s ease-in-out infinite;}
.circleB { 
	padding-top: 70px;
	animation: bg-color02 10 ease-in-out infinite;
	-webkit-animation: bg-color02 10s ease-in-out infinite;}
.circleC { padding-top: 100px;
	padding-top: 100px;
	animation: bg-color03 10 ease-in-out infinite;
	-webkit-animation: bg-color03 10s ease-in-out infinite;}

.promise-list dl dd .sub-title {
	margin: 30px 0 10px;
	font-size:120%;
	}
	
.page-promise .basicCont {
	position:relative;
	}
	
/*タイトル*/
.underline {
  display: inline-block;
  padding-bottom: 4px;
  position: relative;
  color: #666;
  border-bottom: #CCC 2px solid;
}

.underline02 {
  display: inline-block;
  padding-bottom: 10px;
  position: relative;
  color: #555;
  border-bottom: #ccc 2px solid;
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}

.underline-blue::after {
  background-color: #0071be;
  bottom: 0;
  content: '';
  display: block;
  height: 2px;
  left: 0;
  position: absolute;
  transition: .5s all;
  width: 0;
}

.underline-white::after {
  background-color: #fff;
  bottom: 0;
  content: '';
  display: block;
  height: 3px;
  left: 0;
  position: absolute;
  transition: .5s all;
  width: 0;
}

.underline:hover::after , .underline02:hover::after{
  width: 100%;
}


@keyframes animate {

    0%{
        transform: translateY(0) rotate(0deg);
        opacity: 1;
        border-radius: 50%;
    }

    100%{
        transform: translateY(-4000px) rotate(720deg);
        opacity: 0;
        border-radius: 50%;
    }

}


@-webkit-keyframes bg-color01 {
  0% { background-color: #e74c3c; }
  50% { background-color: #f1940f; }
  100% { background-color: #e74c3c; }
}
@keyframes bg-color01 {
  0% { background-color: #e74c3c; }
  50% { background-color: #f1c40f; }
  100% { background-color: #e74c3c; }
}

@-webkit-keyframes bg-color02 {
  0% { background-color: #1abc9c; }
  50% { background-color: #3498db; }
  100% { background-color: #1abc9c; }
}
@keyframes bg-color02 {
  0% { background-color: #1abc9c; }
  50% { background-color: #3498db; }
  100% { background-color: #1abc9c; }
}

@-webkit-keyframes bg-color03 {
  0% { background-color: #9b59b6; }
  50% { background-color: #e74c3c; }
  100% { background-color: #9b59b6; }
}
@keyframes bg-color03 {
  0% { background-color: #9b59b6; }
  50% { background-color: #c72d93; }
  100% { background-color: #9b59b6; }
}

#catchphrase {
	margin: 100px auto 0;
	padding: 50px 0;
	background-color:#fff;
	 margin: 0 calc(50% - 50vw);
  width: 100vw;
}

#catchphrase dl {
	margin: 0 auto;
	width: 87%;
}

#catchphrase dl dt {
	margin: 0 0 20px;
	font-size:160%;
	line-height: 170%;
}


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

.brand-box li {
	flex:0 0 33.3%;
	}
	
.brand-list {
	padding: 0 0 100px;
	} 	
	
#backgroundWedding {
	background-repeat:no-repeat !important;
	background-size:40% !important;
	background-position:top 30px right 0px !important;
	}
		
#backgroundBrand {
	background-repeat:no-repeat !important;
	background-size:90% !important;
	background-position:top 0px right -100px !important;
	}
	
#backgroundRestaurant {
	background-repeat:no-repeat !important;
	background-size:50% !important;
	background-position:top 0px right -30px !important;
	}

/*restaurant*/

.restaurant-list{
	display:flex;
	flex-direction: row;
	width: 100%;
	margin: 100px 0 0;
	padding: 0 0 0;
}	
.restaurant-list-text{
	flex:60%;
}

.restaurant-list-images{
	flex:30%;
	margin:60px 0 0 10%;
}

/*wedding*/

#weddingCont{
	margin: 0 0 0;
}
	
#catchphrase dl dt {
	margin: 0 0 20px;
	font-size:180%;
}

}

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

#backgroundSlide {
	background-size:70%;
	}

.brand-box li {
	flex:0 0 25%;
	}
	
#backgroundWedding {
	background-position:top 90px right 0px !important;
	}
	
#backgroundRestaurant {
	background-position:top 0px right -40px !important;
	}
#catchphrase dl {
	margin: 0 auto;
	width: 90%;
}
}

@media screen and (min-width: 1000px)  {
	
#backgroundRestaurant {
	background-position:top 0px right -50px !important;
	}

#catchphrase dl {
	margin: 0 auto;
	width:100%;
	max-width:1000px;
}


#catchphrase dl {
	margin: 0 auto;
	width: 90%;
}

	
}