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

body {
	font-family: "Zen Kurenaido", sans-serif;
    font-weight: bold;
    font-style: normal;
    color: #161616;
    box-sizing: border-box;
    line-height: 1.5;
    margin: 0 auto; 
	
	background-image: url("../images/dairiseki.jpg");
    background-repeat: repeat repeat;
    background-size: auto auto;
	text-align: center;
    /*background-color: #d8d0c5;*/
    
	}
header h1{
	margin-top: 20px;
    margin-bottom: 20px;
}
#wrap{
	background-color: #ffffff;
    width: 960px;
	margin: auto;
 }
header{
    width: 960px;
    height: 300px;
    background-color: #e4c6bd;
	padding-top: 20px;
	padding-bottom: 50px;
	text-align: center;
}

nav ul{
    display: flex;
}
nav ul li{
    margin: 25px 13px 40px 13px;
}
nav ul li:hover img {
     transform: scale(1.1); /* ホバー時に画像を拡大する */
        }
main{
    background-color: #ffffff;
    width: 960px;
    margin: 0 auto;
}
section{
    height: 630px;
	margin-bottom: 100px;
}
.container{
    display: flex;
    align-items: center;
	padding-top: 50px;
}
.text{
    flex: 1;
    text-align: left;
    padding: 45px;
/*     padding: 5%;*/
    font-size: 16px;
 /*   font-size: 1vw;*/
}
.image{
    flex: 1;
    text-align: right;
    margin-right: 45px;
}
.about h2{
    font-size: 25px;
	margin-left: 30px;
    font-family: 'VDL PenLetter M',sans-serif;
}
.main_1{
    display: flex;
}
.about{
    text-align: left;
    margin-left: 110px;
	padding-top: 80px;
}
#bouquet{
    margin-top: 220px;
	width: 960px;
	height: 554px;
	background-image: url("../images/main_13-80.jpg");
	position: relative;
}
.sns{
    display: flex;
    overflow: hidden;
    margin-top: 200px;
	padding-bottom: 200px;
	
}
.sns_2{
	padding-left: 30px;
}
.blog{
	background-image: url("../images/biog_17-80.jpg");
	height: 516px;
	width: 960px;
	position: relative;
}
footer{
	background-color: #e4c6bd;
	width: 960px;
	height: 0 auto;
	padding-top: 50px;
	padding-bottom: 20px;
}
.footer{
	display: flex;
	margin-top: 50px;
	margin-left: 180px;
	margin-right: 100px;
	
}
.footer p{
	text-align: left;
    font-size: 16px;
	margin-left: 150px;
	margin-top: 50px;
}
.copy{
	margin-top: 85px;
	text-align: center;
}
.bouq_text{
	position: absolute;
	margin-left: -420px;
	margin-top: 55px;

}
.more img {
     transition: transform 0.3s;
        }
.more:hover img {
     transform: scale(1.1); /* ホバー時に画像を拡大する */
        }
.more{
	position: absolute;
	margin-top: 500px;
	margin-left: 300px;
}

.blog_text{
	position: absolute;
	margin-top: 150px;
	margin-left: -400px;
}
/*.icon_top{
	position: absolute;
	margin-top: 450px;
	margin-left: 300px;
}
.icon_top img:hover {
    opacity: 0.7; /* 画像の透明度を変更 
	}*/

.icon_blog{
	position: absolute;
	margin-top: 450px;
	margin-left: 300px;
}
.icon_blog img:hover {
    opacity: 0.7; /* 画像の透明度を変更 */
	}
.sns img:hover {
    opacity: 0.7; /* 画像の透明度を変更 */
	}

/*　↓　galleryについてのcss　ここから　↓　*/

#gallery_about{
    background-image: url("../images/about_5-80.jpg");
    width: 960px;
    height: 516px;
    padding-top: 100px;
    background-repeat: no-repeat;
}
.box{
    width: 960px;
    height: 300px;
    display: flex;
    background-color: rgba(153,154,134,0.5);
    /*overflow: hidden;*/
}

.gallery_1{
    width: 460px;
    height: 300px;
    background-color: rgba(153,154,134,0.5);
}

.gallery_1_r{
    width: 500px;
    height: 300px;
    background-color: rgba(153,154,134,0.5);
}
  
.gallery_1_r_1{
    padding-top: 10px;
}
.gallery_1_r p{
   text-align:left;
    padding: 30px 50px 0 50px;
    font-size: 15px;
}
.gall_photo_1{
    display: flex;
    padding-top: 200px;
    margin-bottom: 200px;
}
.gall_photo_1 img{
    margin-left: 75px;
}
#gallery_1{
	margin-top: 150px;
}

.more2{
    padding-left: 600px;
    margin-bottom: 50px;
}
.more2 img:hover {
    opacity: 0.7; /* 画像の透明度を変更 */
	}
.box2{
    width: 960px;
    height: 300px;
    display: flex;
    background-color: rgba(172,189,132,0.5);
    /*overflow: hidden;*/
}
.gallery_2{
    width: 460px;
    height: 300px;
    background-color: rgba(172,189,132,0.5);
    padding-left: 0;
}

.gallery_2_lefght{
    width: 500px;
    height: 300px;
    background-color: rgba(172,189,132,0.5);
    padding-right: 0;
}
.gallery_2_l_1{
    padding-top: 10px;
}
.gallery_2_lefght p{
    text-align: left;
    padding: 30px 50px 0 50px;
    font-size: 15px;
}
.gall_photo_2{
    display: flex;
    padding-top: 200px;
    margin-bottom: 200px;
}
.gall_photo_2 img{
    margin-left: 75px;
}
/*.more2{
    margin-right: -600px;
    margin-bottom: 50px;
}*/
.gallery_3{
    width: 460px;
    height: 300px;
    background-color: rgba(153,154,134,0.5);
}

.gallery_3_r{
    width: 500px;
    height: 300px;
    background-color: rgba(153,154,134,0.5);
}

.gallery_3_r_1{
    padding-top: 10px;
}
.gallery_3_r p{
   text-align:left;
    padding: 30px 50px 0 50px;
    font-size: 15px;
}
.gall_photo_3{
    display: flex;
    padding-top: 200px;
    margin-bottom: 200px;
}
.gall_photo_3 img{
    margin-left: 75px;
}
.gall_photo_1{
    margin-top: 100px;
}
.gall_photo_2{
    margin-top: 100px;
}
.gall_photo_3{
    margin-top: 100px;
}


/*　↑　galleryについてのcss　ここまで　↑　*/

/*======回転ｙ=======*/
.gall_photo_1 img{
  animation-name:rotateYAnime;
  animation-duration:3s;
  animation-fill-mode:forwards;	
}

@keyframes rotateYAnime{
  from{
    transform: rotateY(0);
    }
  to{
    transform: rotateY(-360deg);
    }
}

/*======回転ｘ=======*/
.gall_photo_2 img{
  animation-name:rotateYAnime;
  animation-duration:3s;
  animation-fill-mode:forwards;	
}

@keyframes rotateYAnime{
  from{
    transform: rotateY(0);
    }
  to{
    transform: rotateY(-360deg);
    }
}
.gall_photo_3 img{
  animation-name:rotateYAnime;
  animation-duration:3s;
  animation-fill-mode:forwards;	
}
@keyframes rotateYAnime{
  from{
    transform: rotateY(0);
    }
  to{
    transform: rotateY(-360deg);
    }
}


slider {
  position:relative;
	z-index: 1;
	/*↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/
	height: 100vh;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
}
/*　背景画像設定　*/

/*.slider-item01 {
    background:url(../img/img_01.jpg);
}

.slider-item02 {
    background:url(../img/img_02.jpg);
}

.slider-item03 {
    background:url(../img/img_03.jpg);
}
*/
.slider-item {
    width: 100%;/*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
    height:100vh;/*各スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
    background-repeat: no-repeat;/*背景画像をリピートしない*/
    background-position: center;/*背景画像の位置を中央に*/
    background-size: cover;/*背景画像が.slider-item全体を覆い表示*/
}

#top_slider{
    position: relative;
}

.top_slider_text{
    position: absolute;
    top:40%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.top_slider_text img{
    width: 800px;
    height: 240px;
}

/*矢印の設定*/

.slick-prev, 
.slick-next {
    position: absolute;
	z-index: 3;
    top: 42%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    border-top: 2px solid #fff;/*矢印の色*/
    border-right: 2px solid #fff;/*矢印の色*/
    height: 25px;
    width: 25px;
}

.slick-prev {
    left:2.5%;
    transform: rotate(-135deg);/*戻る矢印の位置と形状*/
}

.slick-next {
    right:2.5%;
    transform: rotate(45deg);/*次へ矢印の位置と形状*/
}

/*ドットナビゲーションの設定*/

.slick-dots {
	position: relative;
	z-index: 3;
    text-align:center;
	margin:-50px 0 0 0;/*ドットの位置*/
}

.slick-dots li {
    display:inline-block;
	margin:0 5px;
}

.slick-dots button {
    color: transparent;
    outline: none;
    width:8px;/*ドットボタンのサイズ*/
    height:8px;/*ドットボタンのサイズ*/
    display:block;
    border-radius:50%;
    background:#fff;/*ドットボタンの色*/
}

.slick-dots .slick-active button{
    background:#333;/*ドットボタンの現在地表示の色*/
}

@keyframes flying {
  0% { transform: translateY(0); }
  50% { transform: translateY(-50px); }
  100% { transform: translateY(0); }
}

.bouquet img {
  width: 200px;
  height: auto;
  animation: flying 5s ease-in-out infinite; /* アニメーションの名前、時間、タイミング関数、繰り返し回数を設定 */
    z-index: 3;
}
.bouquet img {
  width: 200px; /* 画像の幅を適宜調整してください */
  height: auto; /* アスペクト比を維持するために高さを自動調整 */
  right: 50px; /* 画像を右に配置 */
  top: 50px; /* 画像を上から50pxの位置に配置 */
  position: fixed; /* 画像を画面に固定 */
  animation: flying 5s ease-in-out infinite;
}
.top_ber{
    padding-top: 60px;
    z-index: 4;
}
.top_ber img{
    width: 80px;
    height: auto;
}