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

/*-------------------------------------------

name: index.css（TOPページ）

-------------------------------------------*/



/*=========================================
	h2
=========================================*/
h2.mdTitle > span{ font-size:24px;}


/*=========================================
	mv
=========================================*/
#mvArea{ width:100%; height:800px; position:relative;}
#mvArea #mv{ position:absolute; top:0; left:0; width:100%; height:100%; z-index:-1; text-align:center;}
#mvArea .flexslider{}
#mvArea .flexslider li{ width:100%; height:800px;}
#mvArea .flexslider li.s01{ background:url(../../img/mv/mv01.jpg) center no-repeat; background-size:cover;}
#mvArea .flexslider li.s02{ background:url(../../img/mv/mv02.jpg) center no-repeat; background-size:cover;}
#mvArea .flexslider li.s03{ background:url(../../img/mv/mv03.jpg) center no-repeat; background-size:cover;}
#mvArea .flexslider li.s04{ background:url(../../img/mv/mv04.jpg) center no-repeat; background-size:cover;}
#mvArea .flexslider li.s05{ background:url(../../img/mv/mv05.jpg) center no-repeat; background-size:cover;}

#mvArea .copy{ position:absolute; left:0; right:0; top:0; bottom:0; width:100%; height:1%; margin:auto; z-index:10;}
#mvArea .copy > span{ display:block; color:#000; text-shadow:2px 2px 5px #fff;}
#mvArea .copy > span.en{ font-size:38px;}
#mvArea .copy > span.jp{ font-size:16px; font-family: "游明朝", YuMincho; letter-spacing:0.3em;}

#mvArea .award{ position:absolute; left:3%; bottom:3%; width:250px; z-index:10;}

/*=========================================
	Introduction
=========================================*/
#Introduction{ padding:40px 0; text-align:center; font-family: "游明朝", YuMincho;}
 /*特典バナー*/
#Introduction .bnr{ max-width:1500px; width:96%; margin:0 auto; padding:0 0 40px; text-align:center; overflow:hidden;}
#Introduction .bnr li{ float:left; width:49%; margin:0 0.5%;}

#Introduction .egg{ font-size:16px; color:#999; letter-spacing:0.2em;}
#Introduction .en{ font-family: 'Italiana', serif; color:#e3e3e3; font-size:45px; line-height:140%;}


/*=========================================
	point
=========================================*/
#pointArea{}
#pointArea .overlay{ width:220px; margin:0 auto; background:rgba(255,255,255,.8); text-align:center; padding:50px 0; font-family: "游明朝", YuMincho; color:#333; z-index:1; position: relative;}
#pointArea .overlay h2{ color:#333; font-size:21px; font-family: 'Italiana', serif; letter-spacing:0.1em; margin:0;}
#pointArea .overlay h2:after { content:''; display:block; height:1px; width:15px; margin:20px auto; background:#333;}
#pointArea a{ position:absolute; display:block; top:0; left:0; width:100%; height:100%; z-index:1;}

/*LOCATION*/
#point01{ padding:120px 0; position:relative; overflow:hidden;}
#point01:after{ background:url(../../img/bg_point01.jpg) center no-repeat;}
#point01:after,
#pointArea ul li:after{
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
	background-size:cover !important;
	-webkit-transition: all 1.5s ease-out;
	-moz-transition: all 1.5s ease-out;
	-ms-transition: all 1.5s ease-out;
	transition: all 1.5s ease-out;
}
#point01:hover:after,
#pointArea ul li:hover:after{ -moz-transform: scale(1.1); -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1);}
#point01 .overlay { width:280px; margin:0 auto 0 70%; padding:80px 0;}


/*CHAPEL BANQUET CUISINE DRESS*/
#pointArea ul{ overflow:hidden;}
#pointArea ul li{ width:25%; float:left; padding:60px 0; position:relative; overflow:hidden;}

#pointArea ul li#point02:after{ background:url(../../img/bg_point02.jpg) center no-repeat; background-size:cover;}
#pointArea ul li#point03:after{ background:url(../../img/bg_point03.jpg) center no-repeat; background-size:cover;}
#pointArea ul li#point04:after{ background:url(../../img/bg_point04.jpg) center no-repeat; background-size:cover;}
#pointArea ul li#point05:after{ background:url(../../img/bg_point05.jpg) center no-repeat; background-size:cover;}



/*=========================================
	ブライダルフェア
=========================================*/
#fairArea{ padding:70px 0;}
#fairArea ul.fairWrap{ max-width:1300px; width:95%; margin:0 auto 30px; border:1px solid #ccc; overflow:hidden;}
#fairArea ul.fairWrap > li{ float:left; width:33.333%; position:relative;}
#fairArea ul.fairWrap > li div{ border:1px solid #ccc; border-width:0 1px 0 0; padding:20px;}
#fairArea ul.fairWrap > li:last-child > div{ border-right-width:0;}
#fairArea ul.fairWrap > li div .ph{ height:auto; position:relative; overflow:hidden;}
#fairArea ul.fairWrap > li div .ph:after{ content:""; display:block; padding-top:65%;}
#fairArea ul.fairWrap > li div .ph img{ position:absolute; display:block; left:0; top:0; width:100%; height:100%; object-fit:cover;}
#fairArea ul.fairWrap > li div ul.info{ padding:10px 0;}
#fairArea ul.fairWrap > li div ul.info li.date{ font-size:16px; color:#000; line-height:130%; padding:5px 0; font-family: "游明朝", YuMincho; font-style:italic;}
#fairArea ul.fairWrap > li div ul.info li.title{ font-size:20px; color:#000; line-height:140%; margin:0 0 2%; font-family: "游明朝", YuMincho;}
#fairArea ul.fairWrap > li div ul.info li.icon{ line-height:100%; margin:0 0 2%; font-family: "游明朝", YuMincho;}
#fairArea ul.fairWrap > li div ul.info li.icon span{ display:inline-block; margin:0 1px 1px 0; background:#ccb58b; color:#fff; font-size:90%; padding:3px 6px;}
#fairArea ul.fairWrap > li div ul.info li.txt{ font-size:90%;}
#fairArea ul.fairWrap > li div ul.info li a{ position:absolute; top:0; left:0; width:100%; height:100%;}
#fairArea ul.fairWrap > li div:hover{ background:#fcfcfc;}
#fairArea ul.fairWrap > li div:hover img{ opacity:0.9;}

/*ピックアップ*/
#fairArea ul.fairWrap > li.pickup{ float:none; width:100%;}
#fairArea ul.fairWrap > li.pickup div{ padding:0; border-width:0 0 1px 0; overflow:hidden;}
#fairArea ul.fairWrap > li.pickup div .ph{ float:left; width:45%; overflow:hidden;}
#fairArea ul.fairWrap > li.pickup div .ph:after{ padding-top:80%;}
#fairArea ul.fairWrap > li.pickup div ul.info{ float:right; width:55%; padding:15px 2%; box-sizing:border-box;}


/*=========================================
	plan
=========================================*/
#planArea{ padding:60px 0;}
#planArea ul#planList{ margin:0 0 30px; overflow:hidden;}
#planArea ul#planList > li{ width:25%; float:left; background:#fff; position:relative;}
#planArea ul#planList > li > div{ border:1px solid #ccc; border-width:1px 1px 1px 0; text-align:center;}
#planArea ul#planList > li:last-child > div{ border-right-width:0;}
#planArea ul#planList > li > div .ph{ height:auto; position:relative; overflow:hidden;}
#planArea ul#planList > li > div .ph:after{ content:""; display:block; padding-top:80%;}
#planArea ul#planList > li > div .ph img{ position:absolute; display:block; left:0; top:0; width:100%; height:100%; object-fit:cover;}
#planArea ul#planList > li > div .info{ padding:20px 3%;}
#planArea ul#planList > li > div .title{ font-size:16px; color:#000; line-height:130%; font-family: "游明朝", YuMincho;}
#planArea ul#planList > li > div .price{ font-style:italic; color:#000; font-size:26px; padding:15px 0; line-height:1; font-family: "游明朝", YuMincho;}
#planArea ul#planList > li > div .txt{ font-size:90%; line-height:140%; text-align:left;}
#planArea ul#planList > li > div a{ position:absolute; top:0; left:0; width:100%; height:100%;}
#planArea ul#planList > li:hover img{ opacity:0.9;}
#planArea ul#planList > li:hover{ background:#fcfcfc;}





/*=========================================
	ウエディングレポート
=========================================*/
#reportArea{ padding:60px 0; /*background:#f3f2eb;*/ background:url(../../img/bg_report.jpg) center no-repeat; background-size:cover;}
#reportArea ul.reportList{ max-width:1300px; width:95%; margin:0 auto; font-family: "游明朝", YuMincho; text-align:center; overflow:hidden;}
#reportArea ul.reportList li{ width:31%; float:left; margin:0 1.16% 2.2%;}
#reportArea ul.reportList li .category{ font-size:20px; margin:0 0 20px;}
#reportArea ul.reportList li > div{ position:relative; background:#fff;}
#reportArea ul.reportList li > div .ph{ height:auto; position:relative; overflow:hidden;}
#reportArea ul.reportList li > div .ph:after{ content:""; display:block; padding-top:60%;}
#reportArea ul.reportList li > div .ph img{ position:absolute; display:block; left:0; top:0; width:100%; height:100%; object-fit:cover;}
#reportArea ul.reportList li > div .title{ color:#000; line-height:120%; letter-spacing:-0.01em; padding:20px 3% 0; font-size:14px;}
#reportArea ul.reportList li > div .name{ font-size:95%; color:#999; padding:3px 3% 20px;}
#reportArea ul.reportList li > div .movie{ position:absolute; top:10px; right:10px; width:70px;}
#reportArea ul.reportList li > div a{ display:block; position:absolute; width:100%; height:100%; left:0; top:0;}
#reportArea ul.reportList li > div:hover .ph img{ opacity:0.8;}
#reportArea ul.reportList li > div:hover{ background:#fcfcfc;}
/*btn*/
#reportArea ul.btnWrap{ width:1000px; margin:20px auto 0; overflow:hidden;}
#reportArea ul.btnWrap li{ width:49%; float:left; margin:0 0.5%; padding:0;}
#reportArea ul.btnWrap li.baseBtn a{ padding:22px 0;}
#reportArea ul.btnWrap li img:hover{ opacity:1;}
#reportArea ul.btnWrap li.voice{ clear:both; float:none; margin:0 auto; padding:15px 0 0;}
#reportArea ul.btnWrap li.voice:hover{ opacity:0.9;}




/*=========================================
	facebook / Instagram
=========================================*/
#otherArea{ padding:80px 0;}
#otherArea .inner{ max-width:1050px; width:95%; margin:0 auto; overflow:hidden;}

/*=================================
	facebook
=================================*/
#otherArea .facebook{ max-width:100%; float:left;}


/*=================================
	Instagram
=================================*/
#Instagram{ float:right; width:auto;}
#Instagram h2{ margin:0 0 40px; font-size:30px; text-align:center; letter-spacing:0.1em; line-height:1;}
#Instagram iframe{}
#Instagram .bnrInstagram{ text-align:center; margin:20px 0 0;}

/*タブレット用*/
@media only screen and (max-width: 1024px) {
#Instagram iframe{ width:100% !important; height:auto !important;}
}



/*=========================================
	NEWS / COLUMN
=========================================*/
#topicsArea{ max-width:1400px; width:95%; margin:0 auto; padding:80px 0; overflow:hidden;}
#topicsArea .topicsBlock{ width:48%; font-family: "游明朝", YuMincho;}
#topicsArea .topicsBlock h2{}
#topicsArea .topicsBlock .ph{ height:auto; position:relative; overflow:hidden;}
#topicsArea .topicsBlock .ph:after{ content:""; display:block; padding-top:75%;}
#topicsArea .topicsBlock .ph img{ position:absolute; display:block; left:0; top:0; width:100%; height:100%; object-fit:cover;}
#topicsArea .topicsBlock .date{ color:#000; margin:15px 0 5px 0;}
#topicsArea .topicsBlock .title{ line-height:130%;}
#topicsArea .topicsBlock a{ position:absolute; display:block; top:0; left:0; width:100%; height:100%;}

/*=================================
	NEWS
=================================*/
#news{ float:left;}
#news ul{ overflow:hidden;}
#news ul li{ float:left; width:48%; margin:0 1%; position:relative;}
#news ul li:hover .title{ text-decoration:underline;}
#news ul li:hover img{ opacity:0.8;}

/*=================================
	コラム＆トピックス
=================================*/
#blog{ float:right;}
#blog #feedBlog{}
#blog #feedBlog ul{ overflow:hidden;}
#blog #feedBlog ul li{ float:left; width:48%; margin:0 1%; position:relative;}
#blog #feedBlog ul li:hover .title{ text-decoration:underline;}
#blog #feedBlog ul li:hover img{ opacity:0.8;}



/*=========================================
	写真で見るエクセレントガーデン
=========================================*/
#gallery{ height:640px; position:relative;}
#gallery > div{ transition:all 0.5s ease;}
#gallery .overlay{ position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; width:380px; height:250px; background:rgba(255,255,255,.9); display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center;}
#gallery .overlay .mdTitle{ margin:0;}
#gallery .bgSwitcher{ position:absolute; display:block; top:0; left:0; width:100%; height:100%; background-repeat:repeat-x; background-position:center; opacity:0.1;}
#gallery a{ position:absolute; display:block; top:0; left:0; width:100%; height:100%; z-index:100;}
#gallery:hover > div{ opacity:0.7;}
#gallery:hover > .overlay{ opacity:1;}



/*=========================================
	その他のコンテンツ
=========================================*/
#otherContents{ display:none;}







/*===================================================

	スマホ

===================================================*/
@media only screen and (max-width: 739px) {
/*=========================================
	h2
=========================================*/
h2.mdTitle > span{ font-size:16px;}


/*=========================================
	mv
=========================================*/
#mvArea{ height:80vh;}
#mvArea #mv{}
#mvArea .flexslider{}
#mvArea .flexslider li{ height:80vh;}
#mvArea .flexslider li.s01{ background-position:43% center;}
#mvArea .flexslider li.s02{}
#mvArea .flexslider li.s03{ background-position:35% center;}
#mvArea .flexslider li.s04{ background-position:48% center;}
#mvArea .flexslider li.s05{ background-position:12% center;}

#mvArea .copy{}
#mvArea .copy > span{}
#mvArea .copy > span.en{ font-size:24px; padding:0 0 5px; letter-spacing:0.05em;}
#mvArea .copy > span.jp{ font-size:12px; letter-spacing:0.2em;}

#mvArea .award{ width:35%;}


/*=========================================
	Introduction
=========================================*/
#Introduction{ padding:30px 0;}
 /*特典バナー*/
#Introduction .bnr{ width:96%; padding:0 0 20px;}
#Introduction .bnr li{ float:none; width:auto; margin:0 0 10px;}

#Introduction .egg{ font-size:13px; letter-spacing:0.1em;}
#Introduction .en{ color:#e3e3e3; font-size:24px;}


/*=========================================
	point
=========================================*/
#pointArea{}
#pointArea .overlay{ width:80%; padding:30px 0;}
#pointArea .overlay h2{ font-size:21px;}
#pointArea .overlay h2:after { margin:10px auto 15px;}
#pointArea a{}

/*LOCATION*/
#point01{ padding:30px 0; position:relative; overflow:hidden;}
#point01:after{}
#point01:after,
#pointArea ul li:after{}
#point01:hover:after,
#pointArea ul li:hover:after{}
#point01 .overlay { margin:0 auto;}

/*CHAPEL BANQUET CUISINE DRESS*/
#pointArea ul{}
#pointArea ul li{ width:auto; float:none; padding:30px 0;}

#pointArea ul li#point02:after{}
#pointArea ul li#point03:after{}
#pointArea ul li#point04:after{}
#pointArea ul li#point05:after{}



/*=========================================
	ブライダルフェア
=========================================*/
#fairArea{ padding:40px 0;}
#fairArea ul.fairWrap{ width:92%; margin:0 auto 20px; border-width:1px 1px 0;}
#fairArea ul.fairWrap > li{ float:none; width:auto;}
#fairArea ul.fairWrap > li div{ border:1px solid #ccc; border-width:0 0 1px; padding:0;}
#fairArea ul.fairWrap > li:last-child > div{}
#fairArea ul.fairWrap > li div .ph{}
#fairArea ul.fairWrap > li div .ph:after{}
#fairArea ul.fairWrap > li div .ph img{}
#fairArea ul.fairWrap > li div ul.info{ padding:5px 5% 25px !important;}
#fairArea ul.fairWrap > li div ul.info li.date{ font-size:14px;}
#fairArea ul.fairWrap > li div ul.info li.title{ font-size:16px;}
#fairArea ul.fairWrap > li div ul.info li.icon{}
#fairArea ul.fairWrap > li div ul.info li.icon span{}
#fairArea ul.fairWrap > li div ul.info li.txt{}
#fairArea ul.fairWrap > li div ul.info li a{}
#fairArea ul.fairWrap > li div:hover{}
#fairArea ul.fairWrap > li div:hover img{}

/*ピックアップ*/
#fairArea ul.fairWrap > li.pickup{ float:none;}
#fairArea ul.fairWrap > li.pickup div{ border-width:0 0 1px 0;}
#fairArea ul.fairWrap > li.pickup div .ph{ float:none; width:auto;}
#fairArea ul.fairWrap > li.pickup div .ph:after{ padding-top:65%;}
#fairArea ul.fairWrap > li.pickup div ul.info{ float:none; width:auto;}


/*=========================================
	plan
=========================================*/
#planArea{ padding:40px 3%; background:#f5f5f5;}
#planArea ul#planList{ margin:0 0 20px;}
#planArea ul#planList > li{ width:auto; float:none;}
#planArea ul#planList > li > div{ border-width:1px 1px 0;}
#planArea ul#planList > li:last-child > div{ border-width:1px;}
#planArea ul#planList > li > div .ph{}
#planArea ul#planList > li > div .ph:after{ padding-top:70%;}
#planArea ul#planList > li > div .ph img{}
#planArea ul#planList > li > div .info{ padding:15px 4% 25px;}
#planArea ul#planList > li > div .title{ font-size:16px;}
#planArea ul#planList > li > div .price{ font-size:20px;}
#planArea ul#planList > li > div .txt{}
#planArea ul#planList > li > div a{}
#planArea ul#planList > li:hover img{}
#planArea ul#planList > li:hover{}



/*=========================================
	ウエディングレポート
=========================================*/
#reportArea{ padding:30px 0;}
#reportArea ul.reportList{ width:90%;}
#reportArea ul.reportList li{ width:auto; float:none; margin:0 0 20px;}
#reportArea ul.reportList li .category{ font-size:16px; margin:0 0 10px;}
#reportArea ul.reportList li div{}
#reportArea ul.reportList li div .ph{}
#reportArea ul.reportList li div .ph:after{}
#reportArea ul.reportList li div .ph img{}
#reportArea ul.reportList li div .title{ padding:15px 0 0 0; font-size:13px;}
#reportArea ul.reportList li div .name{ font-size:95%; padding:3px 0 15px;}
#reportArea ul.reportList li div .movie{ position:absolute; top:5px; right:5px; width:50px;}
#reportArea ul.reportList li div a{}
#reportArea ul.reportList li div:hover .ph img{}
#reportArea ul.reportList li div:hover{}
/*btn*/
#reportArea ul.btnWrap{ width:85%; padding:0; margin:10px auto 0;}
#reportArea ul.btnWrap li{ width:auto; max-width:inherit; float:none; margin:0; padding:0 0 15px;}
#reportArea ul.btnWrap li.baseBtn a{ padding:15px 0;}
#reportArea ul.btnWrap li.voice{ padding:0;}






/*=========================================
	facebook / Instagram
=========================================*/
#otherArea{ padding:0;}
#otherArea .inner{}

/*=================================
	facebook
=================================*/
#otherArea .facebook{ 
	margin: 30px auto;
    width: 90%;
	float: none;
}
#otherArea .facebook iframe{
	width: 100%;
}
/*=================================
	Instagram
=================================*/
#Instagram{ float:none; width:auto; padding:30px 0;}
#Instagram h2{ margin:0 0 20px; font-size:20px;}
#Instagram iframe{ width:100% !important; height:auto !important;}
#Instagram .bnrInstagram{ margin:15px 0 0;}


/*=========================================
	NEWS / COLUMN
=========================================*/
#topicsArea{ padding:30px 0;}
#topicsArea .topicsBlock{ width:auto; margin:0 0 40px;}
#topicsArea .topicsBlock h2{}
#topicsArea .topicsBlock .ph{}
#topicsArea .topicsBlock .ph:after{}
#topicsArea .topicsBlock .ph img{}
#topicsArea .topicsBlock .date{ color:#000; margin:5px 0 2px;}
#topicsArea .topicsBlock .title{}
#topicsArea .topicsBlock a{}

/*=================================
	NEWS
=================================*/
#news{ float:none;}
#news ul{}
#news ul li{}
#news ul li:hover .title{}
#news ul li:hover img{}

/*=================================
	コラム＆トピックス
=================================*/
#blog{ float:none;}
#blog #feedBlog{}
#blog #feedBlog ul{}
#blog #feedBlog ul li{}
#blog #feedBlog ul li:hover .title{}
#blog #feedBlog ul li:hover img{}




/*=========================================
	写真で見るエクセレントガーデン
=========================================*/
#gallery{ height:250px;}
#gallery > div{ background-size:auto 100%;}
#gallery .overlay{ width:75%; height:150px;}
#gallery .overlay .mdTitle{}
#gallery .bgSwitcher{}
#gallery a{}
#gallery:hover > div{ opacity:0.7;}
#gallery:hover > .overlay{ opacity:1;}



}