@import url("https://clayton-bay.jp/bridal/css/reset.css");
main{
	font-family: 游明朝, YuMincho, 游明朝体, YuMincho, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", HGS明朝E, "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
#main-image{
	width: 100%;
	height: 80vh;
	position: relative;
	
	margin: 0 0 100px 0;
}
.main-pic{
	width: 100%;
	height: 100%;
	background-image: url(../image/bg1.jpg);
	background-position: center;
	background-size: cover;
}
.photo-pic{
width: 100%;
	height: 100%;
	background-image: url(../image/bg_photo.jpg);
	background-position: center;
	background-size: cover;
}
.hirouen-pic{
width: 100%;
	height: 100%;
	background-image: url(../image/bg_hirouen.jpg);
	background-position: center;
	background-size: cover;
}
.logo{
	width: 200px;
	position: absolute;
	top: 20px;
	left:20px;
}
strong{
	font-weight: bold;
}
.playfair {
  font-family: "Playfair Display", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
.title{
	font-size: 40px;
	text-align: center;
	color: #f39800;
	margin: 0 0 16px;
}
.subtitle{
	text-align: center;
	font-size: 16px;
	color: #f39800;
}
p{
	line-height: 1.8;
}
.bridal-fair,#insta{
	width: 1000px;
	margin: 0 auto 50px;
}
.fair-btn{
margin: 50px 0 10px;
}
.fair-flex{
	display: flex;
	justify-content: space-between;
	margin: 50px 0 0;
}
.fair-flex .style{
	width: 49%;
	text-align: center;
	position: relative;
}
.fair-flex .style img{
	width: 100%;
}
.fair-flex .style a{
	width: 100%;
	height: 100%;
	position: absolute;
	top:0;
	left:0;
	z-index: 1;
}
.fair-flex .style a:hover ~ img{
	opacity: 0.7;

}
.style-text{
position: absolute;
    bottom: 20%;
    width: 100%;
    color: #fff;
    text-shadow: 1px 1px black;
}

.style-text h3{
	
	letter-spacing: 1px;
	    font-size: 20px;
}
#fair-gallery,#reservation{
	background-color: #f6f2e8;
	padding: 100px 0;
}
.slick{
	width: 1000px;
	height: 600px;
	margin: 60px auto;

}
.slick__bg {
	height: 400px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  
    border-radius: 10px;
  
}
.slick-list,.slick-track{
height: 100%;
    border-radius: 10px;

}
.slick__bg01 {
    background-image: url(../image/ga1.jpg);
}
.slick__bg02 {
    background-image: url(../image/ga2.jpg);
}
.slick__bg03 {
    background-image: url(../image/ga3.jpg);
}
.slick__bg04 {
    background-image: url(../image/ga4.jpg);
}
.slick__bg05 {
    background-image: url(../image/ga5.jpg);
}
.slick__bg06 {
    background-image: url(../image/ga6.jpg);
}
.slick__bg07 {
    background-image: url(../image/ga7.jpg);
}
.slick__bg08 {
    background-image: url(../image/ga8.jpg);
}
.slick__bg09 {
    background-image: url(../image/ga9.jpg);
}
.slick__bg10 {
    background-image: url(../image/ga10.jpg);
}
.slick__bg11 {
    background-image: url(../image/ga11.jpg);
}

.add-animation {
  /* アニメーション名 アニメーションにかかる時間 アニメーションの実行前後の状態 */
  /* zoom-fade 10秒 [実行前]最初のキーフレーム（0%） → [実行後]最後のキーフレーム（100%） */
  animation: zoom-fade 10s both;
}

@keyframes zoom-fade {

  0% {
    /*transform: scale(1.05);*/
    transform: scale(1);
  }

  100% {
    /*transform: scale(1);*/
    transform: scale(1.05);
  }

}

#insta{

}
.insta-logo{
	width: 100px;
}
.insta-text{
	width: 100px;
}
.insta-div{
	width: 49%;
	border:solid #ccc 1px;
	text-align: center;
	padding: 30px 0;
	position: relative;
	background-position: center;
	background-size: cover;
}
.insta-div h3{
	font-size: 25px;
    margin: 10px 0 0 0;
}
.insta-div a{
	width: 100%;
	height: 100%;
	position: absolute;
	top:0;
	left: 0;

}
.insta-div{
	transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
background-image: url(../image/hotel.jpg);
	background-color:rgba(255,255,255,0.8);
background-blend-mode:lighten;
}
.insta-div:hover{
	background-color:rgba(255,255,255,0);
}
.w1{
	background-image: url(../image/w1_bg.jpg);
	background-color:rgba(255,255,255,0.8);
background-blend-mode:lighten;
	

}
#reservation{
	text-align: center;
}
#reservation .subtext{
	margin: 50px 0 30px;
}
.res{
	width: 1000px;
	margin: 0 auto;
}
.reserve-flex{
	
	margin: 0 auto 50px;
	display: flex;
	justify-content: space-between;
}
.re-btn{
	border:solid 1px #f39800;
	width: 32%;
	padding: 20px 0;
	background-color: #fff;
	position: relative;
	transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
}
.re-btn:hover{
	background-color: #f39800;
	color: #fff;
}
.re-btn a{
	width: 100%;
	height: 100%;
	position: absolute;
	top:0;
	left:0;
}
hr{
margin: 0 0 30px;
}
.contact h2{
	color:#f39800 ;
	    font-size: 48px;
    font-family: times;
    margin: 20px 0;
}
footer{

}
footer img{
	width: 360px;
}
.footer-contents{
	display: flex;
	width: 1000px;
	margin: 100px auto;
	justify-content: center;
}
.footer-right{
	    display: flex;
    align-items: center;
    margin: 0 0 0 30px;
}
.footer-text{

}
.footer-text h3{
font-size: 20px;
    margin: 0 0 20px 0;
    color: #f39800;
}
.footer-text p{
margin: 0 0 20px;
font-size: 14px;
}
.copyright{
font-size: 10px;
color: #999;
text-align: center;
margin: 0 0 10px;
}

.price{
margin: 100px auto 50px;
width: 800px;
}
.price dl{
display: flex;
flex-wrap: wrap;
font-size: 18px;
}
.price dt{
	border: solid 1px orange;
	width: 30%;
	text-align: center;
	padding: 20px;
	box-sizing: border-box;
	margin: 0 0 20px;
}
.price dd{
width: 64%;
padding: 20px;
}
.price dd strong{

}
.text18{
	width: 800px;
	margin: 0 auto;
	font-size: 18px;
}
.red{
	color: red;
}
.price dd em{
font-size: 12px;
}
.price p{
	color: #555;
	font-size: 14px;
}
.plan{
background-color: #f0fff0;
border: solid 1px orange;
padding: 50px;
box-sizing: border-box;
}
.plan h3{
color: #f39800;
font-size: 18px;
margin: 0 0 30px;
}
.plan ul{
list-style: disc;
line-height: 2;
margin: 0 0 20px 30px;
}
.plan ol{
line-height: 2;
margin: 0 0 20px 14px;	
counter-reset: listnum; /* カウンターをリセット */
	list-style: none;
}
ol li::before{
	counter-increment: listnum;
	content: counter(listnum) "."; /* 半角スペースを入れて""の中にピリオドを追加 */
	padding-right: 15px;
	color: #f39800;
	vertical-align: middle;
	font-size: 20px;
	
}
.plan li{

}
.w800{
	width: 800px;
	margin: 0 auto;

}
.fair18000{
	width: 1000px;
    margin: 0 auto 50px;
    display: flex;
    align-items: center;
}
.fair18000 img{
	margin: 0 30px 0 0;
}
@media screen and (max-width: 768px) {
.bridal-fair, #insta,.res,.footer-contents,.fair18000{
	width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}
#fair-gallery{
	width: 100%;
    padding: 100px 20px;
    box-sizing: border-box;
}
.slick{
	width: 100%;
}
.fair-btn img{
	width: 100%;
}
}
@media screen and (max-width: 479px) {
.fair-flex,.reserve-flex,.footer-contents{
	display: block;
}
.fair-flex .style,footer img {
	width: 100%;
}
.slick{
	height: 300px;
}
.insta-div ,.re-btn{
	width: 100%;
	margin-bottom: 10px;
}
.footer-right {
    display: block;
    margin: 20px 0 0 0;
}
.title{
	font-size: 30px;
}
.price{
	width: 100%;
}
.price dl{
	display: block;
	font-size: 16px;
	line-height: 1.6;
}
.price dt{
	width: 100%;
}
.price dd{
	width: 100%;
	padding: 10px 0 30px;
}
.w800{
	width: 100%;
	padding: 30px 20px;
	box-sizing: border-box;
}
.text18{
	width: 100%;
}
.plan ul{
	font-size: 14px;
	margin: 0 0 20px 20px;
}
.plan p{
	font-size: 14px;
}
.plan ol{
	font-size: 14px;
    margin-left: 0px;
}
ol li::before{
	counter-increment: listnum;
	content: counter(listnum) "."; /* 半角スペースを入れて""の中にピリオドを追加 */
	padding-right: 5px;
	color: #f39800;
	vertical-align: middle;
	font-size: 14px;
	
}
.fair18000{
	display: block;
}
.fair18000 img {
    margin: 0;
    width: 100%;
}
}