@charset "utf-8";
/* CSS Document */

/*common*/
body {
  font-family:'BlinkMacSystemFont','Segoe UI','Avenir','Helvetica Neue','Helvetica','Arial',"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
  width: 100%;
  overflow-x: hidden;
}
.container-fluid{
    max-width:1366px;
    margin: 0 auto; 
}
h3{
    font-size: 260%;
    font-family: serif;
    text-align: center;
    letter-spacing: 3px;
}
h4{
    font-size: 150%;
    font-family: serif;
   text-align: center; 
}


/* header menu */
#navi #li-1{display:none;}
#navi {min-height:76px;}
#navi li{list-style: none;}
#navi .navi-title{text-align:center;}
#navi .navi-title img{padding-top: 5px; margin-left: 23.2%; position: relative; z-index: 1000;}
#navi .menu-bar li{font-size: 100.5%; float:right; text-align: right;}
#navi .col-md-1{padding-left:0px;}
#navi .navi-logo img{max-width: 52px;position:absolute;padding-top: 4.5%;margin-left: 1%;}

.l-header {
	position: relative;
	z-index: 100;
	padding: .35em 0 0 0;
}

.l-headerLogo {
	margin: 0 0 0 3.7%;
}

.l-headerLink {
	display: flex;
	align-items:center;
	justify-content: flex-end;
	margin: .6em 0 0 0;
	padding: 0 2.7% 0 0;
}

.l-headerLink_text {
	line-height: 1.5em;
	margin: 0;
	font-size: 105%;
	text-align: right;
}

.l-headerLink_ecLogo {
	width: 52px;
}

/* Header image */
#afterheadimage .concept-mb{display:none;}
#headerimage img{width:100%;font-size: 120%; margin-top: -26px;}
#headerimage .h-image-2{display:none;}
#afterheadimage .span{margin:0px; padding-bottom:0px;}
#afterheadimage{ position: relative;z-index: 1; text-align: center;    font-weight: 400;padding-top: 100px; padding-bottom: 50px; line-height: 2;}
#afterheadimage h3{ margin-bottom: .7em;}
#afterheadimage .afterhead-bg{
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: url(../images/head2.jpg) center center no-repeat;
    opacity: 0.25;
    width: 100%;
    height: 100%;
    background-size: 100%;
    background-size: cover;
/*margin-top:1%; 
padding: 18px;
background: url(../images/head2.jpg)center;
background-repeat: no-repeat;
background-size: cover;
height: auto;
text-align: center;
width:100%;	
line-height: 2;	
opacity:0.5;*/
}

#afterheadimage .inner:not(:first-of-type) {
	margin-top: 80px;
}

#afterheadimage p{
font-size: 24px;
margin-bottom: 3%;
opacity: 0.7;
font-weight:500;
line-height: 2.5;
}
#afterheadimage span{font-weight:400;}

#afterheadimage #paramiddle{
font-size: 2.72vw;
margin-bottom: 2%;
opacity: 0.7;
}

            /*Product*/
/* ************************************************************************ */
#product{	margin-top: 4.75%;}
#product .product_img1{

	text-align: center;
  
}
#product .product_img2{
	text-align: center;

}
#product .product_img2 img{
 width:100%;
}
#product .product_img1 img{
 width:100%;
}
  

.product_btn_main{

	text-align: center;
	margin-top: 80px;
	 padding-bottom: 40px;
}
.product_btn_main  i{
	 font-size:42px;
     color: lightgreen;
     vertical-align: bottom;
     margin-left: 5%;
}

.product_btn,.product_btn:hover, .product_btn:focus{
    font-family: serif;
	border-radius: 15px;
	background-color:#223438; 
	width:80.5%; 
	padding:2%;
	text-align: center; 
 	color: white;
    border: 2px;
    font-size: 220%;
    padding-top: 10px;
    letter-spacing: 3px;
    
}

/*Ingredients*/
/* ************************************************************************ */
#ingredient .c-level3-heading {
	margin-bottom: .8em;
}

#ingredient .ingredients-para-mb{display:none;}
#ingredient {
	padding-top: 3.68%;
	text-align:center;
}
#ingredient .ingredients-mb{display:none;}
#ingredient p{
text-align:left;
}
#ingredient span{font-size:130%;}
.ingradients_img1{
	text-align: center;
   
}

.ingradients_img1 img{
 	 border-radius: 50%;
 	 width: 100%;

 }
#ingredient .ingredient-para{padding-top:3.65%;}

/*womenInbackgroung*/
#ingredientsbottom .ingredientsbottom-back{background-image:url("../images/Baroda_lp_003.jpg");  
background-repeat: no-repeat;
background-position: center;
height: 100%;
margin-bottom:3%;
width:100%;
background-size: 100%;
opacity: 0.5;
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#ingredientcontent{font-size:16px; }
#ingredient-text{padding-top:10px;}
#ingredientcontent .ingredientcontent-left-div img{width:30%;float:left;}
#ingredientcontent .ingredientcontent-right-div{padding-top:7%;}
#afterIngredients #ingredientsbottom .txt{padding-top:30px; padding-bottom: 20px;}
#afterIngredients #ingredientsbottom .txt p{color:black; text-align:center;}
#afterIngredients #ingredientsbottom  .txt h4{font-size: 1.45vw;}
#afterIngredients .txt .txt-mb{display:none;}
#afterIngredients .txt ul{padding-top:1%;}
#afterIngredients .txt li{list-style:none; font-size: 2.18vw;text-align:center;line-height: 1.6cm;}


 /* footer up Image */
#collobaration .collobaration-head-mb{display:none;}
#collobaration .collobaration-head-pc h4{font-size: 1.45vw;}
#collobaration .coll-center{
	text-align:center;
}
#collobaration h3{padding-top: 3%;}
#footerImage .collImage{
	margin-left: 50px;
}
#footerImage .collImage .footerImage-mb{display:none;}
#coll-images  img{width:100%}
#coll-images .art{width: 72.5%;}




#footertext{
    font-size:30px;
    padding-bottom: 20px;
    padding-top: 2.3%;
}
.foot-text-mb{display:none;}

/*footer*/
#foot-images .foot-title-mb{display:none;}
#foot-images{text-align: center;padding-top: 3%;}
#foot-images .footer-image{float: left; width: 100%;padding: 7.5%;padding-bottom: 5%;}
#foot-images .footer-image a div{color:#000;}
#foot-images .footer-image img{width: 56%;cursor: pointer;}
#foot-images .foot-pad{padding-left:8%;padding-right:8%;}
#footercontent ul{padding-left:0px;}
#footercontent li{list-style:none;font-size: 1.45vw;}
#footercontent .footerhead p{font-size: 40px}
#footercontent img{width:20.5%;}
#footercontent li.link a { /* background: #132E19;  */display: block; color: #FFFFFF;/*  padding: 16px 0; margin: 10px 0; */ }
#footercontent li.link a:hover { opacity: 0.7; }

.footer {list-style:none;background-color:	#0d3624; text-align:center;color:white;padding-top:20px; padding-bottom:20px;width:100%; margin-top: 40px;}
.footerlast{text-align:center; padding-bottom:20px;padding-top:23px;}
.footer p{font-size:25px;    font-family: initial;}
.footer img{padding-bottom:20px;}
.foot-text-pc p{font-size: 1.49vw;}
.foot-title-pc h5{font-size: 1.9vw;}

.row {
	margin-left: 0;
	margin-right: 0;
}


@media only screen and (max-width: 992px) {
  .pconly { display: none; }
   #navi #li-1{display:none;}
   #navi .navi-logo img {display:none;}
   #navi .navi-title {text-align: left;}
   #navi .navi-title img{margin-left:0px; max-width: 100%; width: 270px;}
   #footerImage .collImage{	margin-left: 0px;}
  #footercontent li.link a { /* padding: 2vw 0; margin: 1.5vw 0;  */}
	/*#headerimage img {
		transform: translateY(-20px);
	}*/
  .row {
    margin-left: 0;
    margin-right: 0;
  }
}

@media only screen and (max-width: 768px) {
  body {
    line-height: 1.7;
  }
  .row {
    margin-left: 0;
    margin-right: 0;
  }
    #navi {min-height: unset;}
    #afterheadimage .concept-mb{display:block; padding: 0 2%;}
    #afterheadimage .concept-pc{display:none;}
   .col-md-12{padding-right:0px;padding-left: 0px;}
   #navi #li-1{display:inline;position: absolute;font-size: 2.8vw;padding-left: 3%;padding-top: 2%;font-weight: 500;}
   #navi #li-2{display:none;}
   #navi col-md-1{display:none;}
   #navi .navi-logo img {display:none;}
   #navi .navi-title {text-align: left;}
   #navi .navi-title img{margin-left:0px; max-width: 100%; width: 200px;}
   #navi .menu-bar li{font-size: 12px;padding-left: 90px; padding-top:0px;}
   
   #headerimage .h-image-2{display:block;}
   #headerimage .h-image-1{display:none;}
/*	#headerimage img {
		transform: translateY(-15px);
	}
*/
   
   #afterheadimage .afterhead-bg{
    height: 95%;
    background: url(../images/head2.jpg) center center no-repeat;
    background-size: cover;
   }
   
   .ingradients_img1 img {width: 47.5%;}
   
   #foot-images .footer-image img{width: 30%;cursor: pointer;}
   
   #footerImage .collImage{	margin-left: 0px;}
   .ingradients_img1{padding-bottom: 40px;} 
   .product_btn{width: 96.5%}
   #afterIngredients #ingredientsbottom .txt{padding-left: 40px;padding-right: 40px;}
   #afterheadimage p{font-size: 4.88vw;}
   #afterheadimage #paramiddle  {margin-top: 8%;margin-bottom: 8%;font-size: 4.88vw;}
   #footertext {font-size:20px; text-align:center; padding-bottom:20px;}
   #ingredient span {font-size: 3vw;}
   #ingredient p {font-size: 3vw;padding-left: 7%;}
   #ingredient .ingredients-mb{display:block;}
   #ingredient .ingredients-pc{display:none;}
   #ingredient .ingredients-para-mb{display:block;}
   #ingredient .ingredients-para-pc{display:none;}
   
   #afterIngredients .txt .txt-mb{display:block;}
   #afterIngredients .txt .txt-mb h4{font-size: 4vw;}
   #afterIngredients .txt ul{padding-left:0px;padding-top:2.5%;}
   #afterIngredients .txt .txt-pc{display:none;}
   #afterIngredients .txt li {font-size: 4.3vw;line-height: 2;}
   #afterIngredients #ingredientsbottom .txt h4 {font-size: 3.49vw;}
   
   #collobaration .collobaration-head-mb h4{font-size:5vw;}
   #collobaration .collobaration-head-mb{display:block;}
   #collobaration .collobaration-head-pc{display:none;}
   #coll-images #coll-6 {padding-left: 0px;padding-right: 0px;}
   
    .foot-text-mb{display:block;}
    .foot-text-mb p{font-size:3.8vw;padding-left: 6%;}
    .foot-text-pc{display:none;}
    #foot-images .foot-title-mb{display:block;}
    #foot-images .foot-title-pc{display:none;}
    #coll-images .collImage .footerImage-mb{display:block;}
    #coll-images .footerImage-pc{display:none;}
    
    #ingredientcontent .ingredientcontent-left-div img{width:19%; float:unset;vertical-align: bottom;}
    #ingredientcontent .ingredientcontent-left-div{display:inline;}
    #ingredientcontent .ingredientcontent-right-div{display:inline-block;}
    
    #footercontent li{font-size: 2.9vw;}
    #footercontent img{width:41%;}
    #ingredientsbottom .ingredientsbottom-back{
    height: 100%;
    background-size: 1008px;
    background-position-y: 66%;
    background-position-x: 24%;
    }
    
}
@media only screen and (max-width: 360px) {
#afterIngredients .txt li{line-height: 1cm;}
}
@media only screen and (max-width: 360px) {
#ingredient .col-md-10{padding-left:0px;}
#ingredient p {font-size: 3vw;padding-left: 10%;}
#afterheadimage p {font-size:4vw;}
#afterheadimage #paramiddle {font-size:6vw;}
#afterheadimage .afterhead-bg {background-size: 276%;}

}
/*Temp Area*/
#test1 li{list-style:none;}
#test1 .li-1{display:inline;}
#test1 .li-2{display:inline;}
#test1 .li-3{display:inline;}




/* UTILITIES */
.u-flex {
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.u-align-items-top {
	align-items: flex-start;
}

.u-align-items-bottom {
	align-items: flex-end;
}

.u-justify-content-center {
	justify-content: center;
}

.u-justify-content-right {
	justify-content: flex-end;
}

.u-float-left {
	float: left;
}

.u-float-right {
	float: right;
}

.u-color-accent {
	color: #1c4408;
}

.u-text-bold {
	font-weight: bold!important;
}

.u-show-sp {
	display: none;
}

.u-alpha {
	transition: all .5s;
}

.u-alpha:hover {
	opacity: .8;
}

.u-links-underline {
	color: #333;
	text-decoration: underline;
}

.u-links-underline:hover {
}

.u-links-underline:active,
.u-links-underline:focus,
.u-links-underline:hover {
	text-decoration: none;
	color: #333;
}

.u-accent-color {
	color: #1c4408;
}


/* COMPONENTS */
.c-level3-heading {
	color: #1c4408;
	display: flex;
	justify-content: center;
	flex-direction: column;
	margin-bottom: 1.3em;
}

.c-level3-heading_sub {
	display: block;
	text-align: center;
	font-style: normal;
	color: #333;
	margin: .5em 0 0 0;
	font-size: 22px;
	font-family: 'BlinkMacSystemFont','Segoe UI','Avenir','Helvetica Neue','Helvetica','Arial',"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
	letter-spacing: 0;
}

.c-level4-heading {
	color: #1c4408;
	font-size: 24px;
	font-family: 'BlinkMacSystemFont','Segoe UI','Avenir','Helvetica Neue','Helvetica','Arial',"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
}

.c-button {
	border-radius: 20px;
	max-width: 1070px;
	padding: .7em 9em .7em 5.5em;
	padding: 1% 10% 1% 10%;
	display: flex;
	justify-content: center;
	/*justify-content: space-between;*/
	align-items: center;
	margin: auto;
	background: #4e704a;
	font-family: serif;
	font-weight: 600;
	transition: all .5s;
	text-decoration: none;
}

.c-button:hover {
	opacity: .85;
}

.c-button:hover,
.c-button:focus,
.c-button:active,
.c-button:visited {
	text-decoration: none;
}

.c-button:before {
	content: "";
	display: block;
	background: url("../images/img_button_products.png") no-repeat left center;
	background-size: 100%;
	height: 101px;
	width: 86px;
	margin: 0 4em 0 0;
	margin: 0 auto 0 2.5em;
	margin: 0 auto 0 0;
}

.c-button:after {
	content: "▼";
	display: inline-block;
	vertical-align: middle;
	font-size: 19px;
	color: #fff;
	transform: rotate(-90deg);
	position: relative;
	margin: 0 0 0 auto;
}

.c-button_text {
	color: #fff;
	font-size: 28px;
	margin: 0;
}

.c-workWithList {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0;
}

.c-workWithList_item {
	margin: 0 1.8em;
	font-size: 24px;
	letter-spacing: .08em;
}

.c-column {
	border: 1px solid #4e704a;
	border-radius: 25px;
	padding: 25px 95px
}


/* LAYTOUTS */
.l-ingridientsContentWrap {
	margin-top: 4em;
}

.l-collaborationsArea {
	margin: 60px 0 115px 0;
	text-align: center;
}

.l-collaborationsArea_inner {
	max-width: 990px;
	margin: 70px auto 0;
	display: flex;
}

.l-collaborationsArea_photo,
.l-collaborationsArea_logo {
	width: 50%;
	margin: auto;
}

.l-collaborationsArea_photo img {
	max-width: 98.5%;
}

.l-collaborationsArea_logo img {
	max-width: 100%;
	padding: 0 5%;
}

.l-workWithArea {
	margin: 70px 0 0 0;
}

.l-greetingsArea {
	margin: 70px 0 0 0;
}

.l-greetinsTextArea_item {
	font-size: 20px;
	text-align: center;
	line-height: 2;
}

.l-greetinsTextArea_item:not(:first-of-type) {
	margin-top: 1.5em;
}

.l-profileArea {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 37px 0 0 0;
}

.l-profilePhoto {
	width: 180px;
	text-align: center;}

.l-profileTitle {
	font-size: 20px;
	letter-spacing: .1em;
}

.l-profileName {
	font-size: 16px;
}

.l-profilePhoto img {
	width: 100%;
	border-radius: 50%;
	margin: 13px auto;
}

.l-profileText {
	width: 79%;
	font-size: 17px;
	margin-left: 11%;
}

.l-profileText_item {
	line-height: 1.7;
}

.l-profileText_item:not(:first-of-type) {
	margin-top: 35px;
}




@media only screen and (max-width: 992px) {
	#afterheadimage p {
		font-size: 2.6vw;
	}

	#headerimage img {
		margin-top: -20px;
	}

	#ingredient .l-ingridientsContentWrap .col-md-4:not(:last-of-type) {
		margin-bottom: 1.5em;
	}

	.ingradients_img1 img {
		max-width: 260px;
	}

	#ingredientcontent .ingredientcontent-left-div img {
		width: 100%;
		float: unset;
	}

	#ingredientcontent .ingredientcontent-left-div,
	#ingredientcontent .ingredientcontent-right-div {
		display: inline-block;
		vertical-align: middle;
		padding-top: 0;
	}

	#ingredientcontent.ingredientcontent-wzIcon {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: .5em auto 1em;
	}


/* UTILITIES */
	.u-show-pc {
		display: none;
	}

	.u-show-sp {
		display: inherit;
	}


	/* LAYOUTS */
	#headerimage {
		position: relative;
	}

	.l-headerLogo img {
		width: 270px;
	}

	.l-headerLink {
		margin-top: 2px;
		margin-right: 1%;
	}

	.l-headerLink_ecLogo {
		width: 40px;
	}

	.l-headerLink_text-2 {
		position: absolute;
		right: 4.5%;
		top: -10px;
		z-index: 300;
		text-align: right;
		line-height: 1.3;
		font-size: 1.3rem;
	}

	.l-greetinsTextArea_item {
		text-align: left;
	}

	.l-profilePhoto {
	}

	.l-profileText {
		margin-left: 4%;
	}

.l-profileText_item {
	line-height: 1.6;
}


	.l-greetinsTextArea_item {
		font-size: 2.6vw;
	}


/* COMPONENTS */
	.c-level3-heading {
		margin-bottom: 4vw;
	}

	.c-button {
		padding: 1% 5vw 1% 5vw;
	}

	.c-button:before {
		margin: 0 0 0 0;
	}
	
	.c-button_text {
		margin: 0 0 0 0;
		margin: auto;
	}

	.c-workWithList {
		flex-direction: column;
	}
	
	.c-workWithList_item:not(:first-of-type) {
		margin-top: 1em;
	}
	
	.c-column	{
		padding: 3% 3% 3% 3%;
	}

	.c-workWithList_item {
		font-size: 2rem;
	}

	.c-workWithList_item:not(:first-of-type) {
		margin-top: 1vw;
	}
}




@media only screen and (max-width: 767px) {
	#afterheadimage p {
		font-size: 1.8rem;
		line-height: 2;
		text-align: left;
	}

	#afterheadimage {
		padding-top: 7vw;
	}

	#afterheadimage .inner:not(:first-of-type) {
		margin-top: 7vw;
	}

	#ingredient span {
		font-size: 1.6rem;
	}

	#ingredient p {
		font-size: 1.5rem;
		padding-left: 0;
	}

	#ingredient .l-ingridientsContentWrap .col-md-4:not(:last-of-type) {
		margin-bottom: 0;
	}


	/* UTILITIES */
	.u-show-pc {
		display: none;
	}

	.u-show-sp {
		display: inherit;
	}


	/* COMPONENTS */
	.c-level3-heading {
	}

	.c-button {
		border-radius: 10px;
		padding: 1% 4vw;
	}

	.c-button:before {
		width: 12vw;
		height: 16vw;
	}

	.c-button:after {
		font-size: 3.3vw;
	}

	.c-button_text {
		font-size: 4.7vw;
		line-height: 1.5;
		margin-left: 3.5vw;
	}

	.c-level3-heading_sub {
		font-size: 1.6rem;
	}

	.c-column {
		border-radius: 3vw;
	}

	.c-workWithList_item {
		margin: auto;
	}

	/* LAYOUTS */
	.l-headerLogo img {
		width: 200px;
	}

	.l-headerLink_ecLogo {
		width: 30px;
	}
	
	#headerimage img {
		margin-top: -13px;
	}

	.l-headerLink_text-2 {
		font-size: 1.3rem;
	}

	.l-collaborationsArea_inner {
		margin: 40px auto 0;
	}

	.l-collaborationsArea_photo,
	.l-collaborationsArea_logo {
		width: 100%;
		margin: auto;
	}

	.l-collaborationsArea_logo {
		margin-top: 2em;
	}

	.l-greetinsTextArea_item {
		font-size: 1.7rem;
		line-height: 1.7;
		text-align: justify;
	}

	.l-collaborationsArea {
		margin: 8vw 0 13vw 0;
	}

	.l-collaborationsArea_inner {
		flex-direction: column;
		margin-top: 7vw;
	}

	.l-workWithArea {
		margin-top: 12vw;
	}

	.l-greetingsArea {
		margin-top: 12vw;
	}

	.l-greetingsArea .c-level3-heading {
		margin-bottom: 7vw;
	}

	.l-profileArea {
		flex-direction: column;
	}

	.l-profileTitle {
	font-size: 2.4rem;
}

	.l-profileName {
	font-size: 1.7rem;
}

.l-profileText {
		width: 97%;
		margin: auto;
		font-size: 1.6rem;
		text-align: justify;
	}

}




@media only screen and (max-width: 320px) {
	/* LAYOUTS */
	#headerimage img {
		margin-top: -11px;
	}

	.l-headerLogo img {
		width: 175px
	}



}