@import url(menu.css);
body{
	background-color: #c9c9c9;
}

#after{
	opacity: 0;
}
/*
#loader {
    position: fixed;
    top: 50%;
    width: 100%;
    margin-top: -10px;
    font-size: 22px;
    text-align: center;
    animation: blink 1.5s infinite linear;
    -webkit-animation: blink 1.5s infinite linear;
    -moz-animation: blink 1.5s infinite linear;
    font-family: 'Chivo', sans-serif;
    font-size: 16px;
    color: #3E3A39;
}
*/
.map{
	width: 100%;
	margin: 100px 0 0px;
}
#map_canvas {
    width: 100%;
    height: 500px;
}
.logo{
	font-family: 'Chivo', sans-serif;
	background-image: url(../image/common/logo.svg);
	background-size: 22px auto;
	background-repeat: no-repeat;
	font-size: 16px;
	padding-left: 32px;
	
}
.logo a{
	text-decoration: none;
	color: #fff;
}
.logo img{
	width: 22px;
}
.top-contents{
	background-color: #595758;
	width: 100%;
}
.top{
	width: 900px;
	margin: 0 auto;
padding: 100px 0;
    
}
.top h1{
	font-family: 'Chivo', sans-serif;
	font-size: 36px;
	color: #fff;
}
.top h2,.top p{
	font-size: 16px;
	color: #bbb;
	margin-top: 16px;
}
.top p{
line-height: 2.2;
margin-top: 60px;
}
div.parallax{
	height:600px;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	margin: 180px 0 100px;	
	}
.parallax_img_1{
	background:url(../image/top/main1.jpg);	
	}
.parallax_img_2{
	background:url(../image/top/main2.jpg);	
	}
.works,.top-blog{
width: 900px;
margin:0 auto;
padding: 100px 0 0;
	}
.works h2,.top-blog h2{
	font-size: 36px;
	font-family: 'Chivo', sans-serif;
	color: #fff;
	margin-bottom: 100px;
}
.flower{
	position: relative;
	margin-bottom: 100px;
}
.flower .flower-pic{
	float: left;
	width: 300px;
	text-align: right;
	font-size: 10px;
	color: #C8C9C9;
}
.flower .flower-pic img{
	margin-bottom: 4px;
	width: 100%;
}
.works .flower-detail{
	float: right;
	width: 510px;
	color: #727171;
	/*position: absolute;
	margin:0 0 0 380px;
top: 50%;
-webkit-transform: translateY(-50%); 
transform: translateY(-50%);*/
}
.works .flower-detail h3{
	font-size: 28px;
	margin-bottom: 40px;
	font-family: 'Chivo', sans-serif;
}
.works .flower-detail p{
	font-size: 14px;
	line-height: 2;
}
.insta{
	width: 900px;
	margin:180px auto;
}
.insta li{
	list-style: none;
	    width: 225px;
    height: 225px;
    float: left;
    background: #000;
}
.insta img{
	float: left;
	width: 225px;
}
.onlineshop{
	clear: both;
	background-color: #232c3d;
	color: #fff;
	margin: 240px 0 0 0;
	padding: 190px 0;
	text-align: center;
}
.onlineshop h2{
	font-size: 36px;
	font-family: 'Chivo', sans-serif;
	text-align: center;
}
.onlineshop p{
	width: 700px;
	margin: 60px auto;
	font-size: 16px;
	line-height: 2;
	text-align: center;
}
a.btn{
  display: inline-block;
  width: 430px;
  margin: 0 auto;
  padding: 30px 10px;
  border: 1px solid #fff;
  background: transparent;
  color: #fff;
  text-align: center;
  text-decoration: none;
  line-height: 1;
  transition: .3s;
}
a.btn:hover {
  background: #fff;
  color: #002A6E;
}
.order{
	width: 900px;
	margin: 100px auto;
}
.order h2,.about h2{
	font-size: 36px;
	font-family: 'Chivo', sans-serif;
	color: #fff;
	margin-bottom: 30px;
}
.order p{
	color: #727171;
	font-size: 14px;
	line-height: 2;
	margin-bottom: 6px;
}
.order p.order-text{
	margin-bottom: 54px;
}
.order-cat{
	border-top: solid #DBDCDC 1px;
	padding: 26px 0 10px 0;
}
.cat-left{
	float: left;
	color: #727171;
	width: 430px;
}
.cat-right{
	float: right;
	width: 460px;
	font-size: 12px;
	color: #727171;

}
.cat-right p{
	font-size: 12px;
}
.order h3{
	font-family: 'Chivo', sans-serif;
	font-size: 20px;
	margin-bottom: 2px;
}
.cat{
	width: 200px;
	font-size: 12px;
	color: #727171;
	float: left;
	margin-left: 30px;
	margin-bottom: 30px;
}
label, input[type='checkbox'] {
    cursor: pointer;
}
.cat img{
	width: 200px;
	margin: 0 0 6px;
}
.cat-right dl{
	margin-left: 30px;
}
.cat-right dl select{
	margin:0 6px 0 20px;
}
.cat-right dl dt{
	float: left;
	    margin: 3px 0 0 0;
	    width: 74px;
}
.cat-right dl dd{
	margin-bottom: 30px;
}
.cat-right input.txt{
	font-size: 16px;
	padding: 10px;
	background-color: #F6F7F7;
	border: none;
	margin:0 0 0 20px;
	width: 336px;
	box-sizing: border-box;
}
.order-form{}
.cat-right dl.order-form dt{
	margin-top: 12px;
}
.receive-check{
	margin-left: 30px;
}
.receive-form{
	margin-top: 30px;
}
.use-form select{
	width: 100px;
}
.message{
	margin-left: 30px;
}
.message p{
	font-size: 12px;
}
.message textarea{
	font-size: 16px;
	padding: 10px;
	width: 340px;
	box-sizing: border-box;
	background-color: #F6F7F7;
	border: none;
	    width: 430px;
    height: 132px;
}
.s-btn{
	text-align: center;
}
.s-btn a.btn{
    border: solid #9E9F9F 1px;
    color: #727171;
    margin: 60px 0;
}
.s-btn a.btn:hover{
	background: #9E9F9F;
	color: #fff;
}
.order-about{
	background-color: #F6F7F7;
	color: #727171;
	
	padding: 24px;
	box-sizing: border-box;
}
.order-about p{
	font-size: 10px;
	margin-bottom: 10px;
}
.order-about p:last-child{
	margin-bottom: 0;
}
.order-about-left{
	float: left;
	width: 48%;
}
.order-about-right{
	float: right;
	width: 48%;
}
.about{
	width: 900px;
	margin: 0 auto;
	color: #727171;
	font-size: 14px;
	font-family: 'Chivo', 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;;
}
.about h2{
	margin-bottom: 80px;
}
.about p{
	float: left;
}
.about-right{
	float: right;
	width: 50%;
}
.about p{
	line-height: 2;
	margin-bottom: 30px;
}
.about a:link,.about a:visited{
	text-decoration: none;
	color: #999;
}
.about a:hover{
	color: #727171;
}
footer{
	text-align: center;
	font-size: 10px;
	color: #C8C9C9;
	line-height: 3;
	padding: 60px 0 30px;
	    background-color: #595758;
}
footer img{
	width: 22px;
}
.img100{
	display: none;
}
.about-pic{
	display: none;
}
.sp-logo{
	display: none;
}
.not-link{
	pointer-events:none;
}
.blog-contents{
width: 900px;
display: flex;
-webkit-box-pack: justify;
     -ms-flex-pack: justify;
   justify-content: space-between;
}
.blog-parts{
	width: 280px;
	position: relative;
}
.blog-pic a{
	width: 280px;
	height: 280px;
	position: absolute;
	top:0;
	left:0;
}
.blog-parts p{
	color: #fff;
	font-size: 12px;
	font-family: 'Chivo', sans-serif;
}
.blog-parts h3{
	font-size: 14px;
	color: #666;
	margin: 14px 0 0 0;
}
.blog-parts h3 a{
	color: #666;
	text-decoration: none;
}
.blog-parts .blog-pic{
	margin: 0 0 24px 0;
	width: 280px;
	height: 280px;
}
.more-btn{
	
		border: 1px solid #888;
		color: #666;
		display: block;
		font-size: 16px;
		transition: all .3s;
		line-height: 1;
		margin: 80px auto 0;
		padding: 34px 0;
		text-align: center;
		text-decoration: none;
		width: 430px;
		box-sizing: border-box;
	  
}
.more-btn:hover{
	background-color: #595758;
	color: #bbb;
}
.thanks{
	width: 100%;
	height: 100vh;
	position: fixed;
	top:0;
	left:0;
	z-index: 30000;
	background-color: rgba(255, 255, 255, 0.8);
	color: #444;
}
.thanks .thanks-contents{
	width: 464px;
	height: 224px;
	position: absolute;
	top:50%;
	left:50%;
	margin: -112px 0 0 -232px;
}
.thanks .thanks-contents .close{
	text-align: center;
	margin: 76px 0 0 0;
}
.thanks .thanks-contents h3{
	font-size: 20px;
	margin: 0 0 30px;
	text-align: center;
}
.thanks .thanks-contents p{
	font-size: 14px;
	line-height: 2;
	text-align: center;
}
.thanks{
	display: none;
}

.ui-datepicker .ui-datepicker-title{
font-family: 'Chivo', sans-serif !important;
font-weight: normal !important;
color:#555 !important;
}
.ui-datepicker th{
font-weight:normal !important;
font-size: 14px !important;
}
.ui-widget-header{
background: transparent !important;
}
.ui-datepicker th{
color:#555 !important;
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active{
background: #e6e6e6 !important;
}
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus, .ui-button:hover, .ui-button:focus{
background: #dadada !important;
}
.ui-datepicker table{
font-family: 'Chivo', sans-serif !important;
}
@media screen and (max-width: 768px) {
	.top{
		width: 100%;
	}
	.top h1,.top h2,.top p{
	width: 100%;
		padding: 0 30px;
    box-sizing: border-box;	
	}
    .works,.insta,.order,.about{
		width: 100%;
		padding: 60px 30px 0;
    box-sizing: border-box;
	}
	div.parallax{
		/*height: 400px;
		margin:80px 0;*/
		display: none;
	}
	.works .flower-detail{
		width: 388px;
		
	}
	.works .flower-detail h3{
		margin-bottom: 16px;
	}
	.cat-left{
		width: 240px;
	}
	.insta{
		margin: 50px auto;
	}
	.insta img{
		width: 25%;
	}
	.onlineshop{
		padding: 90px 0;
		margin: 150px 0 0 0;
	}
	#instafeed li{
		width: 25%;

	}
	#instafeed li img{
		width: 100%;
	}
	.img100{
		width: 100%;
		margin: 30px 0;
		display: block;
	}
	.about-pic{
		display: block;
	}
	.top-blog{
		width: 100%;
		padding: 100px 20px 0;
		box-sizing: border-box;
	}
	.blog-contents{
		width: 100%;
	}
	.blog-parts{
		width: 220px;
	}
	.blog-pic a,.blog-parts .blog-pic{
		width: 220px;
		height: 220px;
	}
}
@media screen and (max-width: 640px) {
	
	.top{
		/*margin-top: 100px;*/
		padding: 60px 0;
	}
	.top h1{
		font-size: 24px;
	}
	.top h2, .top p{
		font-size: 12px;
	}
	.top p{
		margin-top: 34px;
	}
	.sp-logo{
display: block;
position: absolute;
    color: #fff;
    z-index: 1;
    width: 100%;
    text-align: center;
    font-family: 'Chivo', sans-serif;
    top:30%;
	}
	/*div.parallax{
		margin:40px 0;
		height: 220px;
	}*/
	.works h2{
		font-size: 20px;
		margin-bottom:40px;
	}
	.flower .flower-pic,.flower .flower-pic img{
		width: 100%;
	}
	.works .flower-detail{
		position: static;
		-webkit-transform: translateY(none);
    	transform: none;
    	margin:14px 0 0 0;
    	width: auto;
	}
	.works .flower-detail h3{
		font-size: 18px;
		margin-bottom: 20px;
	}
	.flower{
		margin-bottom: 50px;
	}
	.insta{
		margin: 0 0 60px;
	}
	.insta img{
		width: 50%;
	}
	#instafeed li{
		width: 50%;
	}
	#instafeed li img{
		width: 100%;
	}
	.onlineshop{
		margin: 0;
		padding: 60px 0;
	}
	.onlineshop h2{
		font-size: 20px;
	}
	.onlineshop p{
		width: 100%;
    padding: 0 30px;
    box-sizing: border-box;
    font-size: 12px;
    margin:36px auto;
	}
	a.btn{
		width: 220px;
	}
	.order{
		margin: 30px auto;
	}
	.order h2, .about h2{
		font-size: 20px;
		text-align: center;
	}
	.order p{
		font-size: 12px;
		    margin: 14px 0;
	}
	.cat-left,.cat-right{
		float: none;
		width: 100%;
	}
	.cat-right{
		width: 100%;
	}
	.cat{
		width: 150px;
		margin-left: 0;
		margin-right: 14px;
	}
	.cat img{
		width: 150px;
	}
	.cat-right .cat:nth-child(2n){
		margin-right: 0;
	}
	.cat-right dl{
		margin-left: 0;
	}
	.cat-right dl.order-form dt{
		width: auto;
		float: none;
		margin-bottom: 5px;
	}
	.cat-right input.txt{
		margin: 0;
		width: 100%;
	}
	.receive-check,.message{
		margin-left: 0;
	}
	.message textarea{
		width: 100%;
	}
	.order-about-left,.order-about-right{
		float: none;
		width: 100%;
	}
	.order-about-left{
		margin-bottom: 10px;
	}
	.about-right{
		float: none;
		width: 100%;
	}
	.about h2{
		margin-bottom: 40px;
	}
	.about p{
		float: none;
	}
	.more-btn{
		width: 100%;
	}
	.top-blog h2{
		text-align: center;
	}
	.blog-contents{
		display: block;
		
	}
	.blog-parts{
		width: 280px;
		margin: 0 auto 40px;
	}
	.blog-pic a,.blog-parts .blog-pic{
		width: 280px;
		height: 280px;
	}
	
}