@charset "utf-8";
html {
	font-size: 62.5%;
}
body {
	font-size: 1.3em;
	font-family:"游ゴシック Medium",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Pro",メイリオ,Meiryo,sans-serif;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	background: linear-gradient(180deg,#fff 0%,#fff 1400px,#f0f1f3 1980px,#f0f1f3 4270px,#fff 366px,#fff 100%)
}
h1, h2 {
	margin: 0;
}
img {
	vertical-align: bottom;
}
ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
/*------------------------------------------------------------
	トップページ
------------------------------------------------------------*/
header {
	/* position: relative;
	max-width: 1200px; */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
	margin: 0 auto;
  z-index: 10;
}
header .inner {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
	max-width: 1200px;
  margin: 0 auto;
}
header h1 {
	position: absolute;
	top: 32px;
    left: 48px;
	z-index: 1;
	margin: 5px 0 0 0
}

header.fix {
  background: rgba(255,255,255,0.8);
}
header.fix .inner {
  height: 80px;
}
header.fix h1 {
	top: 0;
    -webkit-transition: top 0.30s;
       -moz-transition: top 0.30s;
        -ms-transition: top 0.30s;
         -o-transition: top 0.30s;
            transition: top 0.30s;
}
header.fix .zdo_drawer_menu .zdo_drawer_button {
	top: 15px;
    -webkit-transition: top 0.30s;
       -moz-transition: top 0.30s;
        -ms-transition: top 0.30s;
         -o-transition: top 0.30s;
            transition: top 0.30s;
}

.mv {
	max-width: 1200px;
	margin: 0 auto;
	text-align: center;
}
section {
	width: 1200px;
	margin: 0 auto;
}
.sec01 {
	max-width: 1100px;
	margin: 152px auto 0;
}
.sec01 .useImage {
	width: 100%;
}
.aboutBox {
	display: flex;
	align-items: center;
	width: 850px;
	margin: 50px auto 0;
}
.aboutBox .pic {
	border-right: 1px solid #f2f2f2;
	width: 306px;
	padding: 50px 0;
	margin-right: 77px;
	text-align: left;
}
.aboutBox .txt {
	text-align: left;
	line-height: 2;
	text-align: justify;
}
.sec02 {
	padding-bottom: 50px;
}
.sec02inner {
	width: 850px;
	margin: 100px auto 0;
}
.productBox{
	margin-top: 80px;
	display: flex;
	justify-content: space-between;
}
.productBox2{
	margin-top: 80px;
    display: flex;
}
.productBox > div {
	width: 266px;
}
.productBox2 > div {
    width: 266px;
    margin-right: 30px;
}
.productBox h3,
.productBox2 h3,
 {
	font-size: 1.6rem;
}
.productBox h3 span,
.productBox2 h3 span,
.infoBox ul span {
	font-size: 1.1rem;
	display: block;
	margin-bottom: 5px;
	color: #b1b2b4;
	font-family: Futura, 'Century Gothic', 游ゴシック体, YuGothic, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 游ゴシック, 'Yu Gothic', メイリオ, Meiryo, sans-serif;
	font-weight: normal;
}
.productBox p,
.productBox2 p {
	line-height: 2;
}
.productBox2 {
	margin-top: 80px;
}
.btn {
	text-align: center;
	margin: 40px auto 0;
	width: 403px;
	background: url("../img/index/shop_h.jpg") center top no-repeat;
	background-size: 100%;
}
.btn a img {
	width: 100%;
	transition: .3s all;
}
.btn a img:hover {
	opacity: 0;
}
.sec03 {
	margin: 140px auto;
	position: relative;
}
.totop {
	position: absolute;
	right: 24px;
}
.infoBox {
	display: flex;
	align-items: center;
	width: 850px;
	margin: 50px auto 0;
}
.infoBox .pic {
	border-right: 1px solid #f2f2f2;
	width: 306px;
	padding: 50px 0;
	margin-right: 77px;
	text-align: left;
}
.infoBox .txt {
	text-align: left;
	line-height: 2;
}
.infoBox ul, .footInLeft ul, .footInRight ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.infoBox ul span {
	display: inline-block;
	letter-spacing: 2px;
	margin-right: 40px;
}
.infoBox ul li {
	margin-bottom: .2em;
}.bendel{
	padding:0 0 0 20px;
	margin-top: -20px;
}
footer {
	width: 100%;
	border-top: 2px solid #f2f2f2;
	margin: 0 auto 70px;
}
.footInnerWrap {
	width: 1200px;
	margin: -2px auto 0;
	padding: 15px 0;
	border-top: 2px solid #f2f2f2;
}
.footInner {
	width: 850px;
	margin: 0 auto;
}
.footInner, .footInLeft, .footInLeft ul, .footInRight ul {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.footInLeft {
	width: 206px;
}
.footInLeft ul li {
	width: 32px;
}
.footInLeft ul li a {
	color: #b3b3b3;
}
.footInLeft ul li img {
	width: 60%;
	vertical-align: 2px;
}
.footInRight {
	font-family: Futura, 'Century Gothic', 游ゴシック体, YuGothic, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 游ゴシック, 'Yu Gothic', メイリオ, Meiryo, sans-serif;
	width: 552px;
}
.footInRight ul li a {
	text-decoration: none;
	color: #000;
}
.footInRight ul li a i {
	color: #b3b3b3;
	margin-left: 1em;
	font-size: .8em;
	display: none;
}
.copy {
	text-align: center;
    margin-bottom: 70px;
    color: #b3b3b3;
    font-family: Futura, 'Century Gothic', 游ゴシック体, YuGothic, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 游ゴシック, 'Yu Gothic', メイリオ, Meiryo, sans-serif;
}

.bnr{
    text-align: center;
}
.bnr a{
	text-decoration: none;
	color:#000;
}    
.bnr img{
    width:150px;
}
.small{
	display:inline !important;
	color:#000  !important;
}

.cart{
	display:block;
    background:#000;
    width:100%;
    text-align: center;
        padding: 10px 0;   
        color: #fff;
    text-decoration: none;
}
.cart:hover{
    opacity: 0.7;
}


/*------------------------------------------------------------
	slider
------------------------------------------------------------*/
#slick {
	width: 1200px;
	height: auto;
}
#slick img {
	width: 100%;
}
#slick, #slick_sp {
	margin: 0;
	padding: 0;
}
.carousel-cell {
	outline: none;
}
.slick-dots {
	height: 60px;
    width: 10px;
    top: 640px;
    right: 60px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.slick-dots li.slick-active button:before {
	content: '●';
	text-shadow:1px 1px 0 #000, -1px -1px 0 #000,
              -1px 1px 0 #000, 1px -1px 0 #000,
              0px 1px 0 #000,  0-1px 0 #000,
              -1px 0 0 #000, 1px 0 0 #000;
}
.slick-dots li button:before {
	color: #000 !important;
	content: '○';
	opacity: 1;
}
.sp {
	display: none;
}
.footlink{
	text-align: center;
}
.footlink li{
	color: #b3b3b3;
   display: contents; 
}
.footlink li a{
	padding: 0 10px;
	text-decoration: none;
	color: #b3b3b3;
}

@media screen and (max-width: 749px) {
	.pc {
		display: none;
	}
	.sp {
		display: inherit;
	}
	body {
		background: none;
	}
	header, header h1 img, .fixedWrap, section, section img, .productBox > div,.productBox2 > div, .aboutBox, .aboutBox .txt,
	footer, .footInner, .footInRight, .footInRight ul, .footInRight ul li, .copy {
		width: 100%;
	}
	.sec01, .aboutBox .pic, .sec02inner, .btn, .infoBox, .footInnerWrap {
		width: 90%;
	}
	header h1 {
		width: 30vw;
		top: 4vw;
    	left: 24px;
	}
  header.fix .inner {
    height: 14vw;
  }
  header.fix h1 {
    top: 1vw;
  }
  header.fix .zdo_drawer_menu .zdo_drawer_button {
    top: 2.5vw;
  }

	h2 {
		text-align: center;
	}
	p, li {
		font-size: 4vw;
	}
	.sec01 {
		margin: 30% auto 0;
	}
	.sec01 h2 img {
		width: 50%;
	}
	.aboutBox {
		flex-direction: column;
		margin: 50px auto 0;
	}
	.aboutBox .pic {
		border-right: none;
		padding: 0;
		margin: 0 0 1em 0;
	}
	.sec02inner {
		margin: 24% auto 0;
	}
	.productBox h3,
	.productBox2 h3 {
		margin: 10vw 0 8vw;
		font-size: 5.4vw;
	}
	.productBox h3 span,
	.productBox2 h3 span,
	.infoBox ul span {
		font-size: 4vw;
		display: block;
		color: #b1b2b4;
		font-family: Futura, 'Century Gothic', 游ゴシック体, YuGothic, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 游ゴシック, 'Yu Gothic', メイリオ, Meiryo, sans-serif;
		font-weight: normal;
	}
	.productBox, .productBox2 {
		flex-direction: column;
		margin-top: 16%;
	}
	.sec02 {
		/*background: linear-gradient(
			180deg,#fff 0%,
			#fff 9.5%,#f0f1f3 9.5%,
			#f0f1f3 25%,#fff 25%,
			#fff 34%,#f0f1f3 34%,
			#f0f1f3 49.8%,#fff 49.8%,
			#fff 59%,#f0f1f3 59%,
			#f0f1f3 100%
		);*/
		padding-bottom: 20vw;
	}
	_:-ms-lang(x)::-ms-backdrop, .sec02 {/* IE */
		background: linear-gradient(
			180deg,#fff 0%,
			#fff 9.5%,#f0f1f3 9.5%,
			#f0f1f3 27%,#fff 27%,
			#fff 37%,#f0f1f3 37%,
			#f0f1f3 54.5%,#fff 54.5%,
			#fff 64.5%,#f0f1f3 64.5%,
			#f0f1f3 100%
		);
	}
	.productBox div,.productBox2 div {
		margin-bottom: 40vw;
	}
	.productBox div:last-child,
	.productBox2 div:last-child {
		margin-bottom: 7vw;
	}
	.btn {
		background: url("../img/index/sp/shop_h.jpg") center top no-repeat;
		background-size: contain;
		margin: 0 auto;
	}
	.sec03 {
		margin: 16vw auto 24vw;
	}
	.infoBox {
		flex-direction: column;
		margin-top: 0;
	}
	.infoBox .pic {
		border-right: 0;
		width: 100%;
		padding: 0;
		margin-right: 0;
	}
	.infoBox .txt {
		width: 100%;
		margin-top: 10vw;
	}
	.infoBox ul li {
		display: flex;
		align-items: center;
		padding: 0 1em 1em 1em;
		margin-bottom: 1em;
		border-bottom: 1px solid #e8e8e8;
	}
	.infoBox ul li:last-child {
		margin-bottom: 0;
	}
	footer {
		margin-bottom: 0;
	}
	.footInner, .footInRight ul {
		flex-direction: column;
		justify-content: space-between;
	}
	.footInLeft {
		width: 62.2%;
		margin: 16vw 0 8vw;
	}
	.footInLeft ul {
		width: 100%;
		    margin-right: -25%;
	}
	.footInLeft ul li:first-child {
		width: 60%;
		margin-right: 10px;
	}
	.footInLeft ul li img {
		width: 100%;
		vertical-align: -webkit-baseline-middle;
	}
	.footInLeft .footLogo {
		width: 100%;
	}
	.footInLeft .sns {
		width: 10%;
		margin-left: 10px;
	}
	.totop {
		top: 168vw;
		right: 5vw;
	}
	.totop img {
		width: 4.3vw;
	}
	.footInRight ul li a {
		text-align: left;
		height: 5vw;
		display: block;
		font-size: 4.8vw;
		padding: 4vw 0 6vw .8vw;
		border-bottom: 2px solid #f3f3f3;
		background-image: url(../img/bg/sp/foot_menu.png);
		background-size: cover;
		background-position: 0 -5px;
	}
	.footInRight ul li:last-child a {
		border-bottom: 0;
	}
	.footInRight i {
		display: none;
	}
	.copy {
		display: inherit;
		color: #b1b2b4;
		text-align: center;
		/*border-top: 1px solid #e8e8e8;*/
		color: #b3b3b3;
	}
	.copy p {
		margin: 12vw 0;
		font-size: 1em;
		font-family: Futura, 'Century Gothic', 游ゴシック体, YuGothic, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 游ゴシック, 'Yu Gothic', メイリオ, Meiryo, sans-serif;
	}
	/*------------------------------------------------------------
		slider
	------------------------------------------------------------*/
	#slick_sp {
		width: 100%;
		height: auto;
	}
	.slick-dots {
		height: 60px;
		width: 10px;
		top: 84%;
		right: 24px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.mv_sub {
		width: 92%;
		margin: 10% auto 0;
	}
	.mv_sub > p, .mv_sub > img {
		margin-bottom: 6%;
	}
	.mv_subBox {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
	}
	.mv_subBox .txt {
		width: 48%;
	}
	.mv_subBox .more {
		width: 38%;
	}
	.footlink li a{
	 font-size: 3vw !important;
	 }
}