@charset "UTF-8";
/*------------------------------------------------
reset
--------------------------------------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, address , abbr, acronym, aress, article, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp, section,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, nav,
dl, dt, dd , ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
hr, input, textarea{
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size:inherit;
	background: transparent;
	font-weight:normal;  
	text-decoration:none;
	font-family:inherit;
	color:inherit;
	box-sizing:border-box;
	font-style:normal;
	line-height:1;
	text-align:left;
	list-style: none;
}
body{
	font-family: 游明朝, YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "Yu Mincho TT R1215165", HG明朝E, "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	width:100%;
	height:100%;
	color:#595757;
	font-size:16px;
	letter-spacing:0.1em;
	padding: 0;
	background:#FFFFFF;
	overflow-y: scroll;
}


/*------------------------------------------------
common
--------------------------------------------------*/
.container {
　　　width:1040px;
	margin:0 auto;
	overflow:visible;
}
.left{ float:left;}
.right{ float:right;}
.clearfloat{
    overflow: hidden;
    position: relative;
    zoom:1;
}
.flexbox{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
}
.taC {
    text-align: center;
	margin: auto;
}
a.btn_top {
	background-color: #6C7B9D;
    position: relative;
    display: inline-block;
    max-width: 250px;
    width: 100%;
    padding: 15px 0;
    color: #ffffff;
}
.btn_wrap a:hover {
	opacity: 0.7;
  filter: alpha(opacity=70);
  -ms-filter: "alpha(opacity=70)";
}

a.btn_top2 {
	background-image: url(../img/btn_inst.jpg);
    position: relative;
    display: inline-block;
	background-repeat:no-repeat;
    max-width: 250px;
    width: 100%;
    padding: 15px 0;
    color: #595757;
	line-height: 18px;
}

.btn_wrap{
    margin-top: 40px;
	width: 250px;
}
.text {
    margin-top: 20px;
}
.icn_arrow {
	margin-top: 10px;
}

.padding01{
	padding-bottom: 40px;
}

.padding02{
	padding-bottom: 10px;
}


/*-PC時非表示-*/
#sp_btn{
	display: none;
}

.pc { display: block !important; }
.sp { display: none !important; }

.parallax-bg-main { display: block !important; }
.parallax-bg-main-sp { display: none !important; }

.gmapbtn-sp { display: none !important; }

/*------------------------------------------------
header
--------------------------------------------------*/
/*
.header {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	width: 100%;
	height: 110px;
	background-color: #fff;
	position: fixed; 
	z-index: 3;
}



*/

.main {
  background: #fffff;
	background-position: center;
}


/*------------------------------------------------
section
--------------------------------------------------*/
#sec1 {
	width: 1040px;
	padding-top: 60px;
	padding-bottom: 60px;
	margin: auto;
}

#sec1 .point_main_tit,#sec2 .point_main_tit,#sec3 .point_main_tit,#sec4 .point_main_tit,#sec5 .point_main_tit,#sec-thanks .point_main_tit {
	color: #6C7B9D;
	font-size: 26px;
	line-height: 1.6;
	text-align: center;
	padding-bottom: 20px;
}

/*--オンラインショップバナー--*/
.shopbana img {
	width: 100%;
}

.shopbana_sp {
	text-align: center;
	margin-top: 32px;
}

.shopbana_sp img {
	max-width: 90%;
}
/*--オンラインショップバナーおわり--*/

#sec2,#sec5{
	padding-top: 80px;
	padding-bottom: 80px;
	background-color: #F7F7F7;

}

#sec2 p{
	line-height: 1.4;
}
#sec4 p{
		line-height: 1.2;
}

#sec3,#sec4{
	max-width: 1040px;
	padding-top: 80px;
	padding-bottom: 80px;
	margin: auto;
}
.box01 {
    width: 50%;
    height: 323px;
    position: relative;
    overflow: hidden;
	
}
.box01 img{
	width: 323px;
	float: right;
	margin-right: 20px;
	
}

.box02 {
	display:inline-block;
    width: 50%;
    height: 400px;
    position: relative;
    overflow: hidden;
	margin-top: 40px;
	
}

.box02 .r-box {
	position:absolute;
	bottom:0;
}



#gmap {
	margin-right: 20px;

}
/*gmapとInstagramのボタン*/
.access_link {
    width: 770px;
    max-width: 100%;
    margin: 50px auto;
}

/*記事呼び出し*/
#sec3 #news {
	padding-top: 60px;
	display: flex;
  justify-content: space-between;
}
#sec3 #news .news_box {
	display: inline-block;
	width: 240px;
	height: 200px;
    padding: 60px 10px 60px;
	border-top: 1px solid #6C7B9D;
    border-bottom: 1px solid #6C7B9D;
}
#sec3 #news .news_box dt {
    margin-bottom: 10px;
    line-height: 1.2;
}

#sec-thanks {
	width: 100%;
	padding-top: 150px;
	padding-bottom: 0px;
	margin: auto;
}
#sec-thanks p {
	text-align: center;
	line-height: 1.5;
}

/*--Instagramバナー--*/
.inst_bana {
	background-size: 100%;
	zoom:0.5;
}

.inst_bana_sp {
	zoom:0.5;
	text-align: center;
}

.inst_bana_sp img {
	max-width: 90%;
}

/*------------------------------------------------
パララックス
------------------------------------------------*/
/*固定する背景*/
.parallax {
  box-sizing: border-box;
  color: #FFF;
  font-size: 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 5%;
}
.parallax-bg {
	
  background-image: url(../img/parallax_img.jpg);
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
	width: 100%;
	height: 250px;
}
 
.parallax-bg-main {
	
  background-image: url(../img/main_top01.jpg);
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
	background-color: #DBDCDC;
	width: 100%;
	height: 658px;
}

.parallax-bg-main-sp{
	background-image: url(../img/main_sp_top01.jpg);

  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
	background-color: #DBDCDC;
	width: 100%;
	height: 550px;
}

/*スクロールするコンテンツ*/
.scrollbox {
  background-image: url(../img/main_top_line2.png);
	position: relative;
	top: -15px;
	margin: 0 auto;
	z-index: 1;
	height: 30px;
	width: 100%;
}

/*------------------------------------------------
works
--------------------------------------------------*/
.grid{
	
}
.works_container{
	display: grid;
	grid-gap: 20px 10px;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 300px 180px 300px auto;
}

.box-big1 {
  grid-column: 1 / 3;
}

/*新*/
.js-parallax {
		width: 100%;
		height: 250px;
    margin: 0 auto 0px;
		background: url(../img/parallax_img2.jpg) no-repeat center top;
		text-align: center;
		background-attachment: fixed;
}

/*------------------------------------------------
 contact
--------------------------------------------------*/
#sec5 {
  padding-bottom: 100px;
}
#sec5 p{
		line-height: 1.6;
}
.must{
	color: #FF5255;
}

/* 全幅指定 */
.full-width {
    margin: 0 calc(50% - 50vw);
    padding-top: 40px;
}
/* pタグの余白を削除 */
.wpcf7-form p {
    margin-bottom: 0;
}

/*  フォームの幅（自由に変えてOK） */
.contactForm {
    max-width: 700px;
    margin: 0 auto;
}
/* 各項目の下部余白 */
.contact_item {
    margin-bottom: 2.5rem;
}
/* 項目名 */
.label {
    display: block;
    font-size: 16px;
    /*line-height: 1.6;*/
    letter-spacing: 0.05em;
    /*margin-bottom: .6rem;*/
}

/* 必須タグ */
.label_must {
    color: #FF5255;
}
/* 任意タグ */
.label_option {
    background-color: #888988;
}
/* 名前やメールアドレスなどユーザーが入力する箇所 */
.inputs {
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
input[type="text"],input[type="email"] {
    border: solid 1px #ffffff;
    background-color: #ffffff;
    padding: .5rem;
    font-size: 16px;
}

/*お問い合わせ内容*/
textarea {
      width: 97%;
      max-width: 100%;
      margin-top: 6px;
      padding: 3px 3px;
      height: 12em;
	background-color: #ffffff;
	　font-size: 16px; }

/* ボタン */
#sec5 .btnArea p{
	text-align: center;
}
.btnArea {
    text-align: center;
}
input[type="submit"]{
    background: #6C7B9D;
    border: 2px solid #ffffff;
    width: 280px;
    color: #ffffff;
    text-align: center;
    font-size: 16px;
    line-height: 1.3;
    letter-spacing: .5em;
    text-indent: .5em;
    font-weight: bold;
    padding: 1.4rem 0;
    margin-top: 2rem;
    cursor: pointer;
    border-radius: .3rem;
    transition: all .3s;
    
}
/* ボタンにホバーした時 */
input[type="submit"]:hover {
    color: #6C7B9D;
    background-color: #ffffff;
    border-color: #6C7B9D;
}
/* ローダー */
.wpcf7 .ajax-loader {
    display: block;
    margin: 0 auto;
}
/* モバイル版 */
@media screen and (max-width: 480px) {
    .contactForm {
        margin: 20px;
    }
    .contact_item {
        margin-bottom: 1.6rem;
    }
    .label {
        margin-bottom: .4rem;
    }
    .label_tag {
        font-size: 1.1rem;
    }
    input[type="text"],input[type="email"] {
        padding: .4rem;
    }
    textarea {
        padding: .4rem;
    }
    input[type="submit"]{
    }
}

/*------------------------------------------------
footer
--------------------------------------------------*/
#footer {
	margin: 0px;
	padding: 0px; 
}
#footer .f_logo {
	padding: 120px 0 50px;
    text-align: center;
}
#footer .fnav{
	text-align: center;
}
#footer #fnav {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 0 50px;
	line-height: 30px;
	
}
#footer #fnav .fnav li {
    display: inline-block;
	vertical-align: middle;
}
.rmargin{
		margin-right: 40px;
}
#footer .f_btm {
    padding: 20px 0 30px;
    background: #595757;
}
#footer .f_btm .f_copy {
    color: #fff;
    font-size: 0.875em;
    line-height: 1.4;
    text-align: center;
}
/* CSS Document */


.wide_block {
    display: block;
}
/*footer 写真とテキスト横ならび*/
.contents-wrap {
	display: flex;
  flex-wrap: nowrap;
}
.contents-wrap-footer {
	display: flex;
  flex-wrap: nowrap;
	padding-top:40px;
	margin-top: 40px;
}
.contents-text {
	display: flex;
  flex-wrap: wrap;
  flex: 1;
  align-content: center;
  align-items: center;
}
.contents-img {
	width: 50%; 
}
.contents-img img {
	width: 200px; 
	float: right;
	margin-right: 40px;
}
/*footer 写真とテキスト横ならび fin*/

#totop{
	position:fixed;
	bottom:15px;
	width: 50px;
	height:84px;
	right: 80px;
	margin: 0 auto;
	background: url(../img/totopbtn.png)  top center no-repeat;
	z-index: 2;
	
}
/*sec4---------------------------------*/
#sec4 .shopimg img {
	width: 50%;
}

@media screen and (min-width : 320px) and (max-width: 1024px) {/*スマフォ・タブレット用*/
.parallax-bg-main { display: none !important; }
.parallax-bg-main-sp { display: block !important; }
	.gmapbtn-sp { display: none !important; }
	
	.js-parallax{display: none;}
	#sec1 {
		width: 100%;
	}
	.main {
		width: 100%;
	}
	.point_main_tit{
		text-align: center;
	}
	#fnav ul li img{
		padding-top: 20px;
	}
}




@media screen and (max-width:800px){
	.pc { display: none !important; }
	.sp { display: block !important; }
	.works_container{display: none;}
}
@media screen and (max-width:480px){
#sec4 .gmapbtnpc { display: none !important; }
	.gmapbtn-sp { display: block !important; }
	#sec1,#sec2,#sec3,#sec4,#sec5 {
		padding-top: 40px;
		padding-bottom: 40px;
	}
	
	#sec1 {
		width: 100%;
	}
	

	#sec2 .box01{
		overflow: auto;
		height: auto;
		text-align: center;
	}
	
	#sec2 .box01 {
		width: 100%;
	}
	#sec2 .contents-wrap {
		display: block;
	}
	#sec2 .box01 img {
		display: inline-block;
		width: 100%;
		margin-right: 0;
		padding: 0 50px 0 50px;
		text-align: center;
	}
	#sec2 .contents-text {
		display: block;
		float: none;
		padding: 0 20px 0 20px;
	}
	
/*記事呼び出し*/
	#sec3 #news {
	padding-top: 20px;
	/*display: flex;*/
		display: block;
  /*justify-content: space-between;*/
		text-align: center;
}
#sec3 #news .news_box {
	display: inline-block;
	width: 90%;
	height: auto;
    padding: 10px 10px 10px;
	border-top: none;
    border-bottom: 1px solid #6C7B9D;
}
#sec3 #news .news_box dt {
    line-height: 1.2;
}
	#sec3 .btn_wrap {
		margin: 20px auto;
	}
	
/*sec4*/
	#sec4 .box02 {
		width: 100%;
		height: 300px;
		border: none;
	}
	#gmap {
		margin: 0 20px 0 20px;
		padding-bottom: 20px;
		width: 90%;
		overflow: hidden;
	}
	#sec4 .gmapbtn-sp {
		text-align: center;
	}
	#sec4 .gmapbtn-sp .taC {
		margin-top: 30px;
	}
	#sec4 .box02 .r-box {
		padding: 0 10px 0 10px;
	}
	#sec4 .box02 .r-box img {
		width: 45%;
		margin: 0 80px 10px 80px;
	}
	#sec4 .access_link {
		margin: 0 0;
		height: auto;
	}
	#sec4 .btn_wrap {
		margin: 20px auto;
	}
	#sec4 .text{
		padding: 0 20px 0 20px;
	}
	
/*footer*/
	#footer .f_logo {
		margin-bottom: 0;
		padding-top: 40px;
	}
	#fnav li{
		text-align: center;
		line-height: 2.5;
	}
	#fnav .rmarginsp{
		margin-right: 0;
	}
	#fnav li img {
		display: block;
		float: left;
		padding-top: 10px;
		margin: 0 20px 0;
	}
	#footer .contents-img img{
		width: 75%;
		margin-right: 20px;
	}
	#footer .contents-text{
		padding-right: 10px;
	}
	#sec-thanks {
		padding: 10px 10px 10px;
	}
}