@charset "UTF-8";
@import url(reset.css);


/* ----------------------------------------------------
　  共通スタイル
----------------------------------------------------- */
body{
	color:#555;
	font-family: 'Noto Sans JP', sans-serif;
	padding:0 0 0 0;
	-webkit-text-size-adjust:100%;/*chromeフォントサイズバグ*/
	}
#wrap{
	height:100%;width:auto;
	max-height:999999px;/*　android chrome　バグ対策　*/
	overflow:hidden;
	min-width:100%;/*スマホ横画面表示切れ対策*/
	min-height:100%;
	}
#main-contents{
	font-size:97%;
	letter-spacing: 0.15em;
	}
article{
	overflow:hidden;
	padding:100px 10%;	
	}
	@media screen and (max-width:700px){
		article{
			overflow:hidden;
			padding:100px 5%;	
			}
		}
article p{
	margin-bottom:20px;
	}
article a{
	text-decoration: underline;
	color:#777;
	}
/* ----------------------------------------------------
　  見出し
----------------------------------------------------- */
/***********h1***********/
h1 {
	font-family: 'Josefin Slab', serif;
	font-size:3em;
	font-weight: 600;
	letter-spacing: 0px;
	text-align: center;
	display: inline-block;
	background: linear-gradient(90deg, #4158D0, #C850C0 30%, #FFCC70, #7ac850);
	background: -webkit-linear-gradient(0deg, #4158D0, #C850C0 30%, #FFCC70, #7ac850);
	background-clip: text;
 	 -webkit-background-clip: text;
 	 -webkit-text-fill-color: transparent;
	}
/***********h2***********/
h2{
	font-size:1.5em;
	margin-bottom:20px;
	text-align:center;
	}
/* ----------------------------------------------------
　  ボタン
----------------------------------------------------- */
.btn-wrap{
	display: inline-block;
	clear: both;
	}
.btn a {
	position: relative;
	display: flex;
	z-index: 0;
	overflow: hidden;
	width: 400px;
	height: 60px;
	justify-content: center;
	align-items: center;
	border-radius: 10px;
	transition: 0.5s;
	margin-top:20px;
	border:5px solid #fff;
	color: #777;
	font-weight: bold;
	text-decoration: none;
	text-shadow:1px 1.5px 0 #FFF, -1.5px -1.5px 0 #FFF,
              -1.5px 1.5px 0 #FFF, 1.5px -1.5px 0 #FFF,
              0px 1.5px 0 #FFF,  0 -1.5px 0 #FFF,
              -1.5px 0 0 #FFF, 1.5px 0 0 #FFF;
	}
.btn3 a:before {
	content: "";
	 width: 100%;
	 height: 100%;
	position: absolute;
	 z-index: -1;
	 left: 0;
	transition: 0.5s;
	background: rgb(225, 190, 231) 0%;
	background: linear-gradient(90deg, rgb(225, 190, 231) 0%, rgb(178, 235, 242) 100%);
	}
.btn3 a:after {
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	 z-index: -2;
	left: 0;
	background: rgb(225, 190, 231) 0%;
	background: linear-gradient(90deg,rgb(123, 231, 247) 0%, rgb(243, 187, 253) 100%);
	}
.btn3 a:hover:before {
	opacity: 0;
	}
/* ----------------------------------------------------
　  HEADER
----------------------------------------------------- */
header{
	position:relative;
	padding:0px 5% 0px 5%;
	overflow:hidden;
	height:100px;
	z-index: 100;
	}
#header-wrap{
	position:absolute;
	top:30px;
	right:70px;
	display:inline-block;
	} 
#header-wrap ul li{
	display:inline-block;
	font-size:2em;
	text-align: center;
	margin:0 10px;
	}
#header-wrap ul li a{
	width: 60px;
	height:60px;
	line-height:54px;
	display:inline-block;
	border-radius: 50%;
	border:3px solid #332b26;
	background: rgba(255,255,255,0.7);
	color:#332b26;
	}
#header-wrap ul li a:hover{
	border:3px solid #fff;
	background: #332b26;
	color:#fff;
	transition:0.3s;
	}
	@media screen and (max-width:1000px){
		#header-wrap{
			top:20px;
			right:20px;
			} 
		#header-wrap ul li{
			font-size:1.8em;
			margin:0 5px;
			}
		}
/* ----------------------------------------------------
　  トップへ戻る
----------------------------------------------------- */
.go-top{
	display:inline-block;
	position:fixed;
	right:0px;
	bottom:50px;
	z-index: 10;
	font-size:40px;
	color:#fff;
	padding:5px;
	background-color: #332b26;
	border:2px solid #fff;
	}
	.go-top:hover{
	transition:1s;
	opacity:0.7;
	}
/* ----------------------------------------------------
　  FOOTER
----------------------------------------------------- */
footer{
	position:relative;
	overflow:hidden;
	background-color:#3e3a39;
	color:#fff;
	background-image:url(../images/footer.jpg);
	background-size: cover;
	}
	@media screen and (max-width:1000px){
		footer{
			font-size:90%;
			}
		}
#f-wrap .flex60{
	flex-basis: 60%;
	padding:3% 0% 3% 3%;
	}
#f-wrap .flex40{
	flex-basis: 40%;
	padding:3% 3% 3% 0;
	text-align: right;
	}
	@media screen and (max-width:1000px){
		#f-wrap .flex60{
			flex-basis: 100%;
			padding:3% 3% 3% 3%;
			order:2;
			}
		#f-wrap .flex40{
			flex-basis: 100%;
			padding:3% 3% 3% 3%;
			order:1;
			}
		}
footer a:hover{
	color: #bbe2b1;
	transition:0.3s;
	}
footer img.logo{
	width:300px;
	max-width:80%;
	}
#f-wrap .f-address{
	padding:50px 10px;
	text-align: center;
	}
div.sns{
	margin:20px 0 0 0;
	}
div.sns p{
	margin-bottom:10px;
	}
#f-wrap ul{
	display:block;
	margin-top:10px;
	}
#f-wrap ul li{
	padding:0px 10px;
	display:inline-block;
	font-size:2em;
	}
#f-wrap div.button .arrow_btn {
	margin-top:0;
	color: #212121!important;
	}
#f-wrap iframe{
	width:100%;
	border:none;
	height:100%;
	}
	@media screen and (max-width:1000px){
		#f-wrap iframe{
			height:400px;
			}
		}
p.copy{
	font-size:85%;
	letter-spacing: 0.1em;
	margin-top:10px;
}
/* ----------------------------------------------------
　  CONTENTS共通設定
----------------------------------------------------- */
/* ----------------------------------------------------
　  Background
----------------------------------------------------- */
.wrap01{
	overflow:hidden;
	background-color:#F4F2EF;	
	}
.wrap03{
	overflow:hidden;
	background-color:#F4F2EF;
	background-image:url(../images/about.jpg);
	background-repeat:no-repeat;
	background-size:cover;
	background-attachment:fixed;
	background-position:center;
	color:#fff;
	}
.wrap03-inner{
	background-color:rgba(0,0,0,0.6); 
	}
#bgchange{
	background-color:#F4F2EF;
	transition: 1.5s;
	padding:100px 0;
	}
/* ----------------------------------------------------
　  SLIDESHOW
----------------------------------------------------- */
/*Swiper*/
@-webkit-keyframes zoomUp {
	0% {
		-webkit-transform: scale(1);
		transform: scale(1);
	}
	100% {
		-webkit-transform: scale(1.1);
		transform: scale(1.1);
	}
}
	@keyframes zoomUp { /* 1.15倍させる指定 */
		0% {
			-webkit-transform: scale(1);
			transform: scale(1);
		}
		100% {
			-webkit-transform: scale(1.1);
			transform: scale(1.1);
		}
	}
.swiper-container{
	margin-top: -100px;
	}
.swiper-slide {
	overflow: hidden;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	}
.swiper-slide-active .slide-img,
.swiper-slide-duplicate-active .slide-img,
.swiper-slide-prev .slide-img { /* 10秒かけて拡大させる */
	-webkit-animation: zoomUp 10s linear 0s;
	animation: zoomUp 10s linear 0s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	}
.slide-img {
	background-size: cover; 
	background-position: center center; /* 背景画像は中央を軸に表示させる */
	min-height: 700px; /* 600pxの高さで表示させる */
	}
.txt_area{
	position: absolute;
	width: 100%;
	padding: 8%;
	text-align: center;
	color: white;
	top: 45%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	}
.txt_area p{
	font-size: 1.2em;
	text-shadow:0 0 10px #191919;
	line-height:2em;
	padding:0 10px;
	font-weight:bold;
	margin-top:20px;
	}
.txt_area img{
	width:400px;
	max-width:70%;
	}
.swiper-pagination-white {
	width: 20px;
	height: 20px;
	}
	@media screen and (max-width: 800px){
	.slide-img {
		height: 400px; /* 600pxの高さで表示させる */
		}
	}
	@media screen and (max-width: 600px){
		.txt_area p{
			font-size: 1em;
		}
	}
/* ---------------------------------------------------
　  FLEX
----------------------------------------------------- */
/*Flex親*/
.flex_parent{
	display: flex;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	flex-flow: wrap;
	flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	justify-content: center;
	 -webkit-justify-content: center; /** 真ん中寄せ **/
	}
.flex_parent img{
	max-width:100%;
	}
/*Flex子*/
/*#NEWS*/
.flex30{flex-basis: 30%;padding:0 10px;}
.flex70{flex-basis: 70%;padding:0 10px;}
	@media screen and (max-width:480px){
		.flex30{flex-basis: 100%;padding:0 10px;}
		.flex70{flex-basis: 100%;padding:0 10px;}
	}
/*#PLAN*/
.flex33{
	flex-basis: 33%;
	display: flex; /* 高さ揃えるため */
	flex-direction: column;/* 高さ揃えるため */
	margin-bottom:0px;
	margin-top: 30px;
}
	@media screen and (max-width:700px){
		.flex33{flex-basis: 100%;padding:0 10px;}
	}
.flex50{
	flex-basis: 50%;padding:0 0px;
	display: flex; /* 高さ揃えるため */
	flex-direction: column;/* 高さ揃えるため */ 
	justify-content: center;/** 以下中央揃え**/
	}
.flex50 img{
	margin-bottom:0px;
	}
.flex02{
	align-items: center;
	justify-content: center;
	box-sizing:border-box;
	padding:20px 20px;
	}
	@media screen and (max-width:900px){
		.flex50{flex-basis: 100%;}
		.flex01{order:1;}
		.flex02{order:2;margin-bottom:50px;}
	}
.flex02 p{
	font-size: 1em;
	margin-bottom:10px;
	}
/* ----------------------------------------------------
　キャッチコピー
----------------------------------------------------- */
#about{
	overflow:hidden;
	background-color:#fff;
	padding:100px 0;
	color:#fff;
	}
#about-inner{
	width:70%;
	margin:0 auto 0px auto;
	padding:10%;
	background-color:#fff;
	background-image:url(../images/about.jpg);
	background-size: cover;
	background-repeat:no-repeat;
	background-position:center;
	}
#about h1 img{
	width:400px;
	max-width:80%;
	margin-bottom:30px;
	}
#about p{
	line-height: 2em;
	margin-bottom:20px;
	font-size:115%;
	font-weight: bold;
	text-shadow:0 0 10px #000;
	}
#about p:last-child{
	margin-bottom:0px;
	}
	@media screen and (max-width:1000px){
		#about-inner{
			width:90%;
			}
		}
	@media screen and (max-width:700px){
	#about{
		padding:0 0;
		}
	#about-inner{
		width:100%;
		padding:10% 5%;
		}
	#about p{
		line-height: 1.6em;
		}
	}
/* ----------------------------------------------------
　  花束各種プラン
----------------------------------------------------- */
/*花束*/
.flower_gift{
	text-align: center;
	padding-bottom:60px;
	}
.flower_gift p{
	font-size: 1em;
	margin-bottom:10px;
	}

/*花束色枠*/
.box{
	position: relative;
	width: 100%;
	}
div.textbox{
	position: absolute;
	top: 0;
	left: 0;
	padding:30px;
	top: 50%; 
	left: 50%; 
	-ms-transform: translate(-50%, -50%); 
	-webkit-transform: translate(-50%, -50%); 
	transform: translate(-50%, -50%);
	border:3px solid rgb(255, 255, 255);
	background-color:rgba(0,0,0,0.6);
	color:#fff;
	}
	@media screen and (max-width:1200px){
		div.textbox{
			padding:10px;
			}
		}
	@media screen and (max-width:700px){
		div.textbox{
			padding:20px 10px;
			}
		}
		
/*店舗概要*/
table.shop{
	margin-bottom:40px;
	border-top:2px ridge #fff;
	border-bottom:2px ridge #fff;
	padding:10px;
	border-collapse: separate;
	}
table.shop th,
table.shop td{
	padding:10px 20px;
	font-weight: normal;
	}
table.shop .caution{
	display:inline-block;
	padding-top:10px;
	font-size:80%;
	}
/*ＳＮＳ*/
#sns .flex50 iframe,
#sns .flex50 #insta{
	margin:0 auto;
	padding:0 10px;
	max-width: 100%;
}
	@media screen and (max-width:900px){
	#facebook{
			margin-top:50px;
			}
		}
	#sns .flex50 #insta{
		max-width:500px;
	}