@charset "UTF-8";
/*============================================================================================================
	module css
============================================================================================================*/
/*------------------------------------------
	枠内にfitするimg
------------------------------------------*/
.imgFitBox {
	overflow: hidden;
}
.imgFitBox img {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
	font-family: 'object-fit: cover; object-position: center;';
}
.imgFitBox.contain {
/* fit = contain */
}
.imgFitBox.contain img {
	-o-object-fit: contain;
	object-fit: contain;
	font-family: 'object-fit: contain; object-position: center;';
}
/*------------------------------------------
	hoverで拡大するimg
------------------------------------------*/
.imgLinkBox {
	display: block;
}

@media screen and (min-width: 701px) {
.imgLinkBox img {
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.imgLinkBox:hover {
	filter: alpha(opacity=100);
	-moz-opacity: 1;
	opacity: 1;
}
.imgLinkBox:hover img {
	-webkit-transform: scale(1.05);
	-ms-transform: scale(1.05);
	transform: scale(1.05);
}
}
/*------------------------------------------
	スクロールされたらフェードイン
------------------------------------------*/
@media screen and (min-width: 701px) {
.fade-in {
	opacity: 0.1;
	-webkit-transform: translate(0, 40px);
	-ms-transform: translate(0, 40px);
	transform: translate(0, 40px);
	-webkit-transition: all 700ms;
	-moz-transition: all 700ms;
	-o-transition: all 700ms;
	transition: all 700ms;
}
.fade-in.fade-in.scrollin {
	opacity: 1;
	-webkit-transform: translate(0, 0);
	-ms-transform: translate(0, 0);
	transform: translate(0, 0);
}
.fade-in2 {
	opacity: 0;
	-webkit-transition: opacity 1000ms;
	-moz-transition: opacity 1000ms;
	-o-transition: opacity 1000ms;
	transition: opacity 1000ms;
}
.fade-in2.scrollin2 {
	opacity: 1;
}
}
@media screen and (max-width: 700px) {
	/*
.fade-in {
	-webkit-transform: translate(0, 80px);
	-ms-transform: translate(0, 80px);
	transform: translate(0, 80px);
}
.fade-in2 {
	-webkit-transform: translate(0, 80px);
	-ms-transform: translate(0, 80px);
	transform: translate(0, 80px);
}*/
}
/*------------------------------------------
	flex set
------------------------------------------*/
.flex00 {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}
/* 両端配置 / 高さ100%揃え */
.flex01 {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}
/* 両端配置 / 水平中央配置 / 高さ要素次第 */
.flex02 {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}
/* 両端配置 / 上寄せ / 高さ要素次第 */
.flex03 {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-box-align: start;
	-ms-flex-align: start;
	align-items: flex-start;
}
/* 左寄せ / 上寄せ / 高さ100%揃え */
.flex04 {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: start;
	-ms-flex-pack: start;
	justify-content: flex-start;
}
/* 左寄せ / 上寄せ / 高さ要素次第 */
.flex05 {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: start;
	-ms-flex-pack: start;
	justify-content: flex-start;
	-webkit-box-align: start;
	-ms-flex-align: start;
	align-items: flex-start;
}
/* 左寄せ / 水平中央配置 / 高さ要素次第 */
.flex06 {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: start;
	-ms-flex-pack: start;
	justify-content: flex-start;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}
/* 中央配置 / 高さ100%揃え */
.flex07 {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}
/* 余白均等配置 / 高さ100%揃え */
.flex08 {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-justify-content: space-around;
	-ms-flex-pack: distribute;
	justify-content: space-around;
}
/* 中央配置 / 水平中央配置 / 高さ要素次第 */
.flex0 {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}
small {
	font-size: 12px;
}
/*------------------------------------------
	pageTopBox
------------------------------------------*/




/*============================================================================================================
	index
============================================================================================================*/
/*------------------------------------------
	loading
------------------------------------------*/
#progress-bar {
	width: 100%;
	height: 0vh;
	background:  #002a59;
	position: fixed;
	left: 0;
	bottom: 0;
	-webkit-transition: 1.5s ease;
	-o-transition: 1.5s ease;
	transition: 1.5s ease;
	z-index: 9999;
}
#loader-bg {
	background:#001e3f;
	display: block;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	z-index: 9999;
}
#loader-bg #loader {
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	text-align: center;
	z-index: 9999;
}
#loader-bg #loader img {
	position: absolute;
	top: 0;
	bottom: 0px;
	left: 0;
	right: 0;
	margin: auto;
	width: 232px;
	height: auto;
	z-index: 9999;
}

@media screen and (max-width: 700px) {
#loader-bg #loader img {
	width: 100%;
	padding: 40px;
	box-sizing: border-box;
}
#loader-bg #loader img {
	max-width: 236px;
}
}
 @keyframes flash {
 0% {
 opacity: .4;
}
 50% {
 opacity: 1;
}
 100% {
 opacity: .4;
}
}
 @-webkit-keyframes flash {
 0% {
 opacity: .4;
}
 50% {
 opacity: 1;
}
 100% {
 opacity: .4;
}
}














/*------------------------------------------
	header
------------------------------------------*/

/*share*/
.ttl { font-weight: normal; font-size:30px; letter-spacing: 4px;}
.txt {}

@media screen and (max-width: 700px) {
	.ttl { font-size:22px; }
.txt { font-size:12px; letter-spacing: 1px;}

}

/*header*/
header { width:100%; height:100vh; position: relative;}
.topNav {text-align: right; padding: 20px 30px;}
.topNav li { display: inline-block;  margin-left: 20px;}
.topNav li a { font-size:18px;}

.imgMv {position:absolute; bottom:30%; left:0px;  z-index: -1;  width:63%; height:auto;
	-webkit-transition: all 1s ease-in-out;
	-moz-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
	transform: translateX(-50px);
	opacity: 0;
}
.imgMv img {}
.imgBottle {position:absolute; bottom:20%; left:0; right:0; margin: auto;height:60vh; width:335px;
	-webkit-transition: all 1s ease-in-out;
	-moz-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
	transform: translateY(50px);
	opacity: 0;
}
.imgBottle img {}
.imgBottle img {}

.intro .imgMv {	transform: translateX(0px);opacity: 1;
}
.intro .imgBottle {	transform: translateY(0px);opacity: 1;}


.logoWrapper { text-align: center; width:50%; position: absolute; right:0px; top:0px; bottom:0px; margin: auto; height:200px; padding-left: 7%; 
-webkit-transition: all 1s ease-in-out;
	-moz-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
	transform: translateX(50px);
	opacity: 0;
}

.intro .logoWrapper {transform: translateX(0px);opacity: 1;}

.logoInner { margin-bottom:20px;}
.logoInner i { width:68px; height:63px; display: block; margin: 0 auto 20px;}
.logoInner i img {}
.logo {}
.logo img { width:273px; height:83px; }
.logoTxt { width:259px; height:15px; margin: auto; }
.logoTxt img  {}




@media screen and (max-width: 700px) {
	header { overflow: hidden;height:auto; min-height: 100vh; }
	.topNav {text-align: center; padding: 10px 0px;}
.topNav li { display: inline-block;  margin:0 10px;}
.topNav li a { font-size:14px;}
.imgMv {position:absolute; top:30%; bottom:auto; left:auto; right:30%; z-index: -1;   width:500px; height:auto;}
.imgBottle {position:relative; bottom:auto; left:auto; right:auto; margin: auto;height:50vh; max-width:335px;}

	
.logoWrapper {
    width: 220px;
    position: relative;
    right: auto;
    top: auto;
    bottom: auto;
    margin:0 auto 20px;
   	height: auto;
    padding-left: 0;
}
	
	.logoInner { margin-bottom:0px;}

	.logoInner i { width:50px; height:auto; margin: 0 auto 0px;}

	.logoTxt {
    width: 100%;
    height:auto;
    margin: auto;
}

}


/*concept*/
.concept {
  position: relative;
  height: 800px;
  padding: 0 0 80px;
  background: url(../img/img_1.jpg) 100% 100% / 55% auto no-repeat ;

}
.concept .inner {}


.concept .txt { /*padding-top: 100px;*/
	text-shadow:white 1px 1px 3px, white -1px 1px 3px,white 1px -1px 3px, white -1px -1px 3px;

}
.interview_banner {max-width:372px; margin-top:20px;}
.interview_banner a {display:block;}

@media screen and (min-width: 1001px) {
.ttlConcept {	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
    width: 1em;
    height: auto;
    line-height: 1em;
}
}

@media screen and (max-width: 700px) {
	.concept {     background: url(../img/img_1.jpg) no-repeat top 300px left -50px;
    background-size: 120% auto;
		position:relative; height:auto; padding: 60px 0px;}

.ttlConcept {	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	font-size: 24px;
	  position: relative;
  top: 0;
  left: 0;
  right: 0;
  margin:0 auto ;
    width: 1em;
    height: max-content;
    line-height: 1em;
	padding-bottom:50px;
}
	.concept .txt { padding-top: 250px; font-size:14px;}

.interview_banner {
    margin: 30px auto 0px;
}

}



/*buy*/
.buy { background-color: #66132a; color:#fff;}
.buy .inner { padding:200px 40px 180px;}

.buyWrapper { margin-bottom: 30px;}

.imgBuyBottle { width:280px; height:100%; background-color:#fff; padding: 20px; text-align: center; float:left; box-sizing: border-box;}
.imgBuyBottle img {}

.buyInner { margin-left: 350px;}
.itemTxt { margin-bottom: 20px;}
.itemTxt dt { font-size:26px; margin-bottom: 10px}
.itemTxt dd {}

.itemName { font-weight:normal; letter-spacing: 7px;}
.nameM { font-size:26px; margin-right: 10px;}
.nameB { font-size:50px; margin-right: 10px;}
.nameS { font-size:16px;}

.itemSpec { margin-bottom:20px;}
.itemSpec dt {}
.itemSpec dd {letter-spacing: 5px;}
.itemUnit { font-size:20px;}
.itemPrice { font-size:32px;}
.itemInfo { font-size:15px;}

.btn {display:none;}
.btn a { display: block; text-align: center; background-color:#fff; color: #66132a; border:#66132a 1px solid; border-radius: 5px; padding: 7px 10px;
max-width: 400px; margin-top:20px;}


.specWrapper {}
.ttlSpec {padding: 7px 20px; font-weight: normal;}
.tbl {}
.tbl1 { float:left; width:50%; box-sizing: border-box;border-top: #fff 1px solid;}
.tbl2 { float:right; width:50%; box-sizing: border-box;border-top: #fff 1px solid; border-right: #fff 1px solid;}
.tbl th { border-bottom: #fff 1px solid; border-left: #fff 1px solid; padding: 7px 20px; width: 100px;}
.tbl td { border-bottom: #fff 1px solid; padding: 7px 20px;}



@media screen and (max-width: 700px) {
.buy .inner { padding:80px 20px 80px;}
.imgBuyBottle {
    width: 120px;
    height: 100%;
    background-color: #fff;
    padding: 10px 0px;
    text-align: center;
    float:none;
    box-sizing: border-box;
	margin:0 auto 30px;
}
	.buyInner { margin-left: 0px;}
	
.itemTxt dt { font-size:18px; margin-bottom: 10px; text-align: center;}
.itemTxt dd { font-size:12px;}
	
	
	.itemName { text-align: center; margin-bottom: 10px;}
.nameM { margin-right: 0px; display: block;}
.nameB {margin-right: 0px;display: block; line-height: 1em; margin-bottom: 5px;}
.nameS { display: block;}
	
	.itemSpec {text-align: center;}
.itemSpec dd {letter-spacing: 5px;}
.itemInfo { display: block;}
	
.btn a {margin:20px auto 0px; font-size:22px;}
	
.ttlSpec { text-align: center;}
.tbl {}
.tbl1 { float:none; width:100%; border-top: #fff 1px solid;}
.tbl2 { float:none; width:100%; border-top: none; border-right:none;}
.tbl th { border-bottom: none; border-left:none; padding: 7px 0px 2px; width:100%; display: block;}
.tbl td { border-bottom: #fff 1px solid; padding: 2px 0px 7px; display: block;}
	.storesjp-button-cart { margin:0 auto; display: block; text-align: center;}

}


/*profile*/

.profile { padding:200px 40px 140px; background-color:#f8f7f7;}
.profile .inner { max-width:900px;}

.profilePhotoWrapper { float: left;}
.profilePhoto { width:296px; height:375px;}
.profilePhoto img {}
.profileSign { width:220px; height:150px;float: right; margin: -50px -50px 0 0;position: relative; z-index: 1;}
.profileSign img {}


.profileWrapper { float: right;}
.ttlProfileName { margin-bottom: 30px;}
.ttlProfileName dl {}
.ttlProfileName dt { margin-bottom: 15px;}
.ttlProfileName dd { font-size:18px;}
.profileNameB { font-size: 30px; margin-right: 20px;}
.profileNameS { font-size:15px;}

.profileWrapper .txt {}

@media screen and (max-width: 700px) {
.profile {
    background-color: rgb(248, 247, 247);
    padding: 80px 0px 80px;
}
.profilePhotoWrapper { float: none;}
.profilePhoto { width:223px; height:auto; margin:0 auto;}
	.profileSign { width:165px; height:auto;float:none; margin: -30px auto 0px;}

	.profileWrapper { float:none;}
	.ttlProfileName dl { text-align: center;}
.profileNameB { margin-right: 0px;}
.profileNameS { display: block; letter-spacing: 2px;}
	
	
	
}





/*farm*/
.farm { background: url(../img/bg_1.jpg) no-repeat center center; background-size: cover;}
.farm .inner { text-align: center; padding: 250px 40px;}

.ttlFarm { margin-bottom: 100px;}

.farm .txt { color:#fff; font-size:18px;}

@media screen and (max-width: 700px) {
	
.farm .inner { text-align: center; padding: 80px 20px;}
	.ttlFarm { margin-bottom: 50px;}

	.farm .txt { font-size:12px; text-align: left;}
}





/*taste*/
.taste { position: relative;}
.tastePhoto { position: absolute; top:0px; right:50%; height:100%; width:auto; z-index: -1;}
.tastePhoto img {}


.tasteWrapper {max-width:1000px; margin: 0 auto; box-sizing: border-box; padding: 200px 0 200px 0px;}
.tastInner { margin-left:50%; padding: 0 20px;}
.ttlTaste { margin-bottom: 40px;}

.tasteWrapper txt {}


@media screen and (max-width: 700px) {
	.taste { padding-bottom: 60px;}
.tastePhoto { position: relative; top:auto; right:auto; height:auto; width:280px; margin: 0 auto ; }
.tasteWrapper { padding: 20px 0 0px 0px;}
.tastInner { margin-left:0; padding: 0 20px;}
	.ttlTaste { margin-bottom: 20px; text-align: center;}
}


/*producer*/
.producer { background-color:#f8f7f7;}
.producer .inner { padding: 200px 40px 180px;}

.producerWrapperF { position: relative; margin-bottom: 100px;}
.producerPhotoF { position: absolute; top:0px; right:0px; width:250px; height:317px;}
.producerPhotoF img {}
.producerTxtF {     padding: 50px 280px 50px 0px; }
.ttlProducerF { margin-bottom: 50px;}
.producerTxtF .txt {}



.producerWrapperS { position: relative;}
.producerPhotoWrapperS {}
.producerPhoto2 { position: absolute; top:0px; left:0px; width: 208px; height:221px;}
.producerPhoto2 img {}
.producerPhoto3 { position: absolute;     top: 170px;
    left: 10%; width: 208px; height:221px;}
.producerPhoto3 img {}

.producerTxtS { text-align: right; margin-left: 45%; padding: 50px 0; }
.ttlProducerS { margin-bottom: 50px;}
.producerTxtS .txt {}




@media screen and (max-width: 700px) {
	.producer .inner { padding: 60px 20px 60px;}
	.producerWrapperF { margin-bottom: 50px;}
.producerPhotoF { position:relative; top:auto; right:auto; margin: 0 auto;}
	.producerTxtF {     padding: 50px 0px 0px 0px; }
.ttlProducerF { margin-bottom: 30px; text-align: center; letter-spacing: 1px;}
	
	.producerPhotoWrapperS { width:100%; position: relative;}
	.producerPhoto2 { position: relative; top:0px; left:0px; width: 55%; height:auto;}
.producerPhoto3 { position: relative; top:0px; left:auto; right:0px; width: 55%; height:auto; float: right; margin-top:-20px; }

	
.producerTxtS { text-align: left; margin-left: 00px; padding: 50px 0px 0px 0px; }
	.ttlProducerS { margin-bottom: 30px; text-align: center; letter-spacing: 1px;}

	
}






/*brand*/
.brand {}
.brand .inner { text-align: center; position: relative; padding: 0 40px 140px}

.brandLogos { margin: 100px 0 60px;}
.brandLogo1 { width:100%; max-width:800px; margin: 0 auto; opacity: 0.1; }
.brandLogo1 img {}
.brandLogo2 { width:335px; heigth:96px; margin: -170px auto 0px;}
.brandLogo2 img {}

.ttlBrand { color:#001e3f; border-bottom: #001e3f 1px solid;display: inline-block; width: auto; margin: 0 auto 80px;}

.brand .txt { text-align: left; margin-bottom: 60px;}


.brand .txtS { font-size:12px; letter-spacing: 0px;}

.brandPhoto {position: absolute; top:-180px; left:-60px; width:32%;}
.brandPhoto img {}




@media screen and (max-width: 700px) {
	
.brand .inner { text-align: center; position: relative; padding: 0 20px 60px}
	.brandLogos {
    margin: 80px 0 60px;
}
	.brandLogo2 {
    width: 170px;
    heigth: auto;
    margin: -110px auto 0px;
}
	
	.ttlBrand {
letter-spacing: 2px;
		margin: 0 auto 30px;
}
	.brandPhoto {
    position: absolute;
    top: -90px;
    left: 0px;
    width: 32%;
}
	
	.brand .txtS { text-align: left;}
	
}








/*footer*/

footer {}
footer .inner {}


.regulation { padding: 100px 40px; border-bottom:#e5e5e5 1px solid;}

.regulationWrapperF { margin-bottom: 60px;}

.regulationIcon { width:171px; height:112px; float: left;}
.regulationIcon img {}

.regulationTxt { margin-left: 250px; letter-spacing: 0px;}
.regulationTxt dt { font-size:24px; margin-bottom: 10px;}
.regulationTxt dd {}



.regulationWrapperS { letter-spacing: 0px;}
.ttlRegulation { float: left;}
.tblRegulation { margin-left: 250px;}
.tblRegulation dl { display: table; margin-bottom:5px;}
.tblRegulation dt { display: table-cell; color:#979797; width:250px;}
.tblRegulation dd { display: table-cell;}





.footerWrapper {text-align: center; padding: 100px 0px 10px;}
.footerLogo { max-width:300px; height:auto; margin: 0 auto 30px;}
.footerLogo img {}


.footerNav { margin-bottom: 40px;}
.footerNav li { display:inline-block; margin: 0 10px;}
.footerNav li a { font-size:18px;}


.footerSubLogo { max-width: 176px;  height:auto; margin: 0 auto 40px;}
.footerSubLogo img {}

.copy {}
.copy small { font-size:12px; letter-spacing: 0px;}




@media screen and (max-width: 700px) {
.regulation { padding: 60px 0px; }
	
	
	.regulationWrapperF { margin-bottom: 60px;}

.regulationIcon { float:none; margin: 0 auto 20px; }

.regulationTxt { margin-left: 0px; letter-spacing: 0px;}
	
	

	.ttlRegulation { float: none;text-align: center; margin-bottom: 30px;}
.tblRegulation { margin-left: 0px;text-align: center;}
	.tblRegulation dl { display: block; margin-bottom:10px;}
.tblRegulation dt { display: block; color:#979797; width:auto;}
.tblRegulation dd { display: block;}

	
	
	.footerWrapper {text-align: center; padding: 60px 0px 10px;}
.footerLogo { max-width:200px; height:auto; margin: 0 auto 30px;}

	.footerNav { margin-bottom: 40px;}
.footerNav li { display:block; margin: 0 10px 20px;}
	

	.footerSubLogo { max-width: 160px;  height:auto; margin: 0 auto 40px;}
	
}






/*------------------------------------------
================================================
	interview
================================================
------------------------------------------*/
#ivTtl1 {
	opacity: 0;
}
#ivTtl1.intro {
	transition: all 1s;
	opacity: 1;
}

#ivTtl2 {
	opacity: 0;
	
}
#ivTtl2.intro {
		transition: all 1s;
	opacity: 1;
}

#interview header {
	background: url("../interview/img/img_mv_iv.jpg") no-repeat center center;
	background-size: cover;
	position: relative;
 }


#interview .topNav {
    color: #fff;
}
.logoW { position: absolute; top:10px; left:10px;}
.logoW img {width:273px; height:63px;}

.mvIvWrapper {text-align: center;
	    position: absolute;
    top: 50%;
    width: 100%;
    transform: translateY(-50%);
}
.mvIvWrapper p { margin-bottom: 40px;}
.mvIvWrapper p img { width:523px; height:94px; }
.mvIvWrapper dl { color: #fff;}
.mvIvWrapper dt { font-size:24px;}
.mvIvWrapper dd {}
.mvIvWrapper h2 { font-size:90px; font-weight: normal;  letter-spacing: 20px;}
.mvIvWrapper dd span { font-size:24px; letter-spacing: 10px;}


.ivContents {color:#1d2b55; background-color: #f6f6f6;}

.ivContents .txt { font-size:16px; letter-spacing: 1px; margin-bottom:60px; }

.ivContents .ttl {
    font-size: 45px;
	 margin-bottom:20px;
}

.imgIv1 { width: 100%; height: auto; max-width: 480px;}
.imgIv2 {width: 100%; height: auto; max-width: 310px;}
.imgIv3 {}
.imgIv4 { width: 100%; height: auto; max-width: 480px;}
.imgIv5 { width: 100%; height: auto; max-width: 480px;}
.imgIv6 { width: 100%; height: auto; max-width: 480px;}

.fLeft { float:left; margin-right: 40px;}
.fRight { float:right; margin-left: 40px;}

.halfGrid { width:48%; }
.halfGrid.fLeft { margin-right: 0px;}
.halfGrid.fRight { margin-left: 0px;}

.fitWidth { position: relative;}
.fitWidth figure { position: absolute; top:0px; left:0px; width:50%; height: 100%;}
.fitWidth figure.imgFitBox img { object-position: top;}
.fitWidth .inner {}
.fitWidth .inner .txt { margin-left: calc(50% + 40px);}

.mb100{ margin-bottom: 100px!important;}
.mb60{ margin-bottom: 60px!important;}
.pt100 { padding-top:100px;}

.autherWrapper { background-color: #fff; padding: 60px 60px 1px 60px; margin-bottom: 100px;}
.autherInfo { margin-bottom: 30px;}
.autherInfo figure {}
.autherInfo figure img { width: 110px; height:110px;}
.autherInfo dl { padding-top: 25px;}
.autherInfo dt {}
.autherInfo dd {}
.autherInfo dd span { margin-right: 20px;}
.autherInfo dd strong { font-size:24px; }

.btnLink { text-align: center; padding-bottom: 100px;}
.btnLink a{ 
	display: inline-block; margin: 0 auto; padding: 10px 100px; 
	background:url("../interview/img/arrow_iv.png")no-repeat left 20px center #fff; 
	background-size:21px 8px;
	border:#1b253f 1px solid;     
	border-radius: 40px;
	font-size:24px;
}


@media screen and (max-width: 700px) {
	.logoW {
    top: 15px;
    left: 0;
    right: 0;
    text-align: center;
}
	.logoW img {
    width:150px;
    height: auto;
}
	#interview .topNav {
    padding-top:50px;
}
	.mvIvWrapper p {
    padding:0px 30px;
}
	.mvIvWrapper p img {
    max-width: 523px;
		width:100%;
    height: auto;
}
	.mvIvWrapper h2 {
    font-size: 12vw;
    letter-spacing: 2px;
}
	
.mvIvWrapper dd span {
    font-size: 4vw;
    letter-spacing: 2px;
}	
	
	
.fLeft { float:none; margin-right: 0px;}
.fRight { float:none; margin-left: 0px;}
	
	.ivContents figure { text-align:center; margin-bottom: 30px;}
	.ivContents .ttl {
    font-size: 28px;
    letter-spacing: 2px;
}
	
	.mb100{ margin-bottom: 20px!important;}
.mb60{ margin-bottom: 20px!important;}
	
	.fitWidth figure {
    position: relative;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 200px;
}
	.fitWidth .inner .txt {
    margin-left: 0px;
}
.halfGrid {
    width: 100%;
}
	.autherWrapper {
    padding: 60px 20px 1px 20px;
    margin-bottom: 40px;
}
	
	.ivContents .autherInfo figure {
    margin-bottom: 0px;
}

	.autherInfo { text-align: center;}
	.autherInfo dd span {
    display: block;
		margin-right: 0px;
}
	
	
	.btnLink a {
    padding: 10px 10px 10px 40px;
    background: url(../interview/img/arrow_iv.png)no-repeat left 10px center #fff;
    background-size: 21px 8px;
    font-size: 4vw;
    letter-spacing: 0px;
}
	
}



@media screen and (width: 768px) {
	.tbl th {
    width: 78px;
    padding: 7px 0 7px 20px;
	}
	.buy .inner {
    padding: 160px 40px 120px;
	}
	.profile {
    padding: 140px 40px 120px;
	}
	.farm .inner {
    padding: 180px 40px;
	}
	.tasteWrapper {
    padding: 160px 0;
	}
	.ttl {
    font-size: 27px;
	}
	.tastePhoto {
		right: 55%;
	}
	.tastInner {
    margin-left: 45%;
	}
	.producer .inner {
    padding: 160px 40px 140px;
	}
	.ttlProducerS br.sp {
    display: block !important;
	}
	.producerTxtF {
    padding: 32px 50% 32px 0px;
	}
	.producerPhotoF {
    width: 45%;
	}
	.producerTxtS {
    margin-left: 50%;
	}
	.producerPhoto2, .producerPhoto3 {
    width: 36%;
	}
	.ttlBrand {
    margin-bottom: 64px;
	}
	.regulation {
    padding: 100px 20px;
	}
	.footerWrapper {
    padding: 80px 0 10px;
	}
	.footerLogo {
    max-width: 240px;
	}
}

.storesjp-button-cart {
  display: block;
  margin: 0 auto 40px;
  border: 1px solid;
  border-radius: 50px;
}
@media screen and (max-width: 767px) {
	.storesjp-button-cart {
    margin-bottom: 28px;
	}
}