@charset "utf-8";
*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
html {
	font-size: 62.5%;
	color: #5e5e5e;
	text-align: center;
	font-family: YuMincho, 'Yu Mincho', 'Hiragino Mincho ProN', 'serif';
}

/*ナビゲーションエリアのスタイル*/
.shop {
	width: 12%;
	margin: 10px 0 40px 2%;
	text-align: left;
}

.shop img {
	width: 100%;
}

.shop a:hover {
	opacity: 0.7;
}
.navSP {
	display: none;
}

.navPC ul {
	display:inline-block;
	width: 100%;
}
.navPC li {
	width: 24%;
	display:inline-block;
	margin-bottom: 2%;
}
.navPC li a {
	font-size: 2.0rem;
	padding-bottom: 10px;
	text-decoration: none;
	font-weight: bold;
	color: #5ec146;
	position: relative;
  display: inline-block;
  transition: .3s;
}

.navPC li a::after {
  position: absolute;
  bottom: 0;
  left: 50%;
  content: '';
  width: 0;
  height: 1.2px;
  background-color: #5ec146;
  transition: .3s;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

.navPC li a:hover::after {
  width: 120%;
}

/*メインエリアのスタイル*/

.mainImage {
	position: relative;
	width: 100%;
	background: url("../img/main.png")no-repeat center top;
	background-size: cover;
}

.logo-sp {
		display: none;
	}

.logo {
	display: inline-block;
	margin: 10% 0;
	width: 30%;
}

.logo img {
	width: 100%;
}

.menu {
	display: none;
}

.mainText {
	position: absolute;
	width: 30%;
	top: 50px;
	left: 2%;
	font-size: 4.2rem;
	line-height: 2;
	color: #5bbed8;
}

.mainBottle {
	position: absolute;
	width: 14%;
	top: 300px;
	left: 10%;
}

.mainBottle img {
	width: 100%;
}


/*横幅1110pxメインからはみ出ないように*/
@media(max-width: 1110px) {
	.mainText {
		font-size: 3.2rem;
		line-height: 1.6;
		
	}
	
	.mainBottle {
	top: 200px;
}
	
	}




/*.logo {
	background: url("../img/logo.png") no-repeat;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
}
.logo a {
	display: block;
	width: 100%;
	height: 100%;
}*/


/*共通スタイル*/
.heading {
	font-size: 4.0rem;
	color: #5ec146;
	margin: 6% 0 2%;
	font-weight: bold;
}

.heading::before {
	content: "　";
	display: inline-block;
	background: url("../img/kira1-1.png")no-repeat center top;
	margin-right: 0.5%;
	height: 100px;
}

.heading::after {
	content: "　";
	display: inline-block;
	background: url("../img/kira1-2.png")no-repeat;
	height: 100px;
	margin-left: 1.5%;
}

.clearfix::after {
	content: '';
	display: block;
	clear: both;
}

/*ルイボスティーとはスタイル*/
#whatArea {
	width: 80%;
	margin: 0 auto 4%;
}

.whatHeading {
	color: #f48cae;
}

.whatHeading::before {
	background: url("../img/kira1-1.png")no-repeat;
}

.whatHeading::after {
	background: url("../img/kira1-2.png")no-repeat;
}

.whatImg {
	width: 36%;
	float: left;
	/*border: 1px solid #000;*/
}

.whatImg img {
	width: 100%;
}

.whatText {
	width: 50%;
	float: right;
	/*border: 1px solid #000;*/
	font-size: 1.8rem;
	line-height: 1.8;
	margin-top: 2%;
}

.whatText::before {
	content: "　";
	height: 100px;
	display: block;
	background: url("../img/rooibos1.png")no-repeat;
}

.whatText::after {
	content: "　";
	height: 100px;
	display: block;
	background: url("../img/rooibos2.png")no-repeat center right;
}

/*輝くヒミツのスタイル*/
#secretArea {
	background-color: #d7f2f4;
	overflow: hidden;
}

.secretHeading {
	color: #5bbed8;
}

.secretHeading::before {
	background: url("../img/kira2-1.png")no-repeat;
}

.secretHeading::after {
	background: url("../img/kira2-2.png")no-repeat;
}

.secret-head ul {
	display:inline-block;
	width: 80%;
	margin: 0 10% 60px;
}
.secret-head li {
	font-family: "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS PGothic", "sans-serif";
	width: 33%;
	color: #fff;
	font-size: 3rem;
	padding: 45px 0 90px;
	display:inline-block;
	background: url("../img/secret-s.png")no-repeat center top;
	background-size: contain;
	list-style-type: none;
}

.secret-point{
	display: flex;
	align-items: stretch;/*親要素の高さ、またはコンテンツの一番大きい子要素の高さに合わせて広げて配置（初期値）*/
}

.secret-point:nth-child(even){
	flex-direction: row-reverse;
}

.secret-text{
	width: 40%;
	margin: 5%;
	padding: 5% 10% 0 10%;
	background: url(../img/secret-l.png) no-repeat center center;
	background-size: contain;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
}

.secret-text h3 {
	font-family: "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS PGothic", "sans-serif";
	font-size: 3.2rem;
	padding-bottom: 2rem;
	color: #5bbed8;
}

.secret-text p {
	font-size: 1.6rem;
	line-height: 1.8;
	color: #5bbed8;
}

.secret-text strong {
	font-size: 2rem;
	color: #5ec146;
}

/*横幅1110pxダイヤからはみ出ないように*/
@media(max-width: 1110px) {
	.secret-text{
		padding: 2.8% 8% 0 8%;
	}
	
	.secret-text h3 {
		font-size: 2.4rem;
		padding-bottom: 8px;
		}
	
	.secret-text p {
	font-size: 1.4rem;
	line-height: 1.5;
	}
	
	.secret-text strong {
	font-size: 1.6rem;
	}
	
}

.secret-photo{
	width: 50%;
}


.secret-photo img{
	width: 100%;
	height: auto;
}


/*製品特徴のスタイル*/
#bottleArea {
	overflow: hidden;
	padding-bottom: 80px;
}
.bottleHeading {
	color: #f48cae;
}

.bottleBox {
	position: relative;
	width: 100%;
	background: url("../img/bottle-back.png")no-repeat center center;
	background-size: contain;
}

.bottleImg {
	width: 24%;
	margin: 0 auto;
	padding: 40px 0;
}

	.bottleImg img {
		width: 100%;
	}

.bottleText {
	font-size: 1.6rem;
	line-height: 1.6;
	color: #5ec146;
	width: 20%;
	padding: 3% 1.5%;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9);
	box-shadow: 0px 0px 12px 6px #5bbed8;
}

.bottleText strong{
	font-size: 3rem;
	color: #5bbed8;
}

/*横幅1110pxのときはみでないように*/
@media(max-width: 1110px) {
		
	.bottleText strong{
			font-size: 2.2rem;
		}
	
	.bottleText {
	font-size: 1.4rem;
	}
	
	}

.bBox1 {
	position: absolute;
	top: 10%;
	left: 22%;
}

.bBox2 {
	position: absolute;
	top: 58%;
	left: 24%;
	width: 22%;
}

.bBox3 {
	position: absolute;
	top: 40%;
	right: 20%;
}


/*ラインナップのスタイル*/
#lineupArea {
	background-color: #dff2e7;
	padding-bottom: 120px;
	overflow: hidden;
}

.lineupHeading {
	color: #5ec146;
}

.lineupHeading::before {
	background: url("../img/kira4-1.png")no-repeat;
}

.lineupHeading::after {
	background: url("../img/kira4-2.png")no-repeat;
}

.lineupBox {
	/*background-color: #BBDD00;*/
	width: 60%;
	margin: 40px auto 0;
	display: flex;
	flex-wrap: wrap;/*子要素を折り返し、複数行に上から下へ並べる*/
	align-items: flex-end;
}


.lineupBox .item {
	width: 25%;
}

.lineupBox .item img {
	width: 100%;
}


.lineupText {
	color: #5e5e5e;
	font-size: 1.6rem;
	line-height: 1.6;
}

.lineupText strong {
	color: #5bbed8;
	font-size: 3.6rem;
}


/*フッターのスタイル*/
.footer {
	width: 100%;
	height: 160px;
	background-color: #5ec146;
}

.copy {
	color: #fff;
	font-size: 1.4rem;
	padding-top: 100px;
}

/**********************************横幅768pxの時のスタイル****************************/

@media(max-width: 768px) {
/*	横幅768pxのヘッダー*/
	.navPC {
		display: none;
	}
	
	.navSP {
	display: block;
		width: 100%;
	 position: fixed;
		top: 0;
		padding: 12px 0;
		background-color: #fff;
		border-bottom: 1px solid #5bbed8;
		z-index: 1000;
	}
	.shop {
		width: 18%;
		margin: 25px 0 4px 2%;
		float: left;
	}
	
	.logo {
		display: none;
	}
	
	.logo-sp {
		display: block;
		width: 60%;
		float: left;
		margin-left: 2%;
	}
	
	.logo-sp img {
		width: 100%;
	}
	
	
/*メニュー三本線*/
.menu-icon {
	float: right;
	margin-right: 3%;
	width: 8%;	
	margin-top: 12px;
}
.menu-icon-line {
  background-color: #5ec146;
  width: 100%;
  height: 2px;
  margin: 30% 0 0;
}
/*展開メニュー*/
/*.menu-box {
  width: 100%;
  background-color: #fff;
  z-index: 1010;
}*/
.menu {
　display: none;
  position: fixed;
  width: 100%;
  top: 96px;
  right: 0;
  /*background: rgba(255, 255, 255, 0.7);*/
background-color: #fff;
	z-index: 900;
}
.menu .menu-list {
  list-style-type: none;
  margin: 1.2% 0.8% 1.2% 0;
   height: 50px;
  }
.menu .menu-list a {
  display: block;
  margin: 0 auto;
  padding-top: 10px;
  padding-bottom: 20px;
  color: #5ec146;
  text-decoration: none;
  font-size: 2rem;
  border-bottom: 3px dashed transparent;
}
	
	/*横幅768pxの共通スタイル*/
	.heading {
		font-size: 3.2rem;
		vertical-align: bottom;
		margin: 40px 0 60px;
	}
	
	.heading::before {
	background-size: contain;
	height: auto;
	}

	.heading::after {
		background-size: contain;
		height: auto;
	}
	
	/*横幅768pxのメインスタイル*/
	.mainImage {
		background: url("../img/mainback-sp.png")repeat-y center bottom;
		background-size: cover;
		background-color: #d7f2f4;
		height: 100vh;
		position: relative;
	}
	
	
	.mainText {
		width: 60%;
		top: 20%;
		left: 20%;
		font-size: 2.6rem;
		font-weight: bold;
		line-height: 1.8;
		background-color: rgba(255, 255, 255, 0.8);
		box-shadow: 0px 0px 12px 6px rgba(255, 255, 255, 0.8);
		border-radius: 50%;
		padding: 2%;
	}

	.mainBottle {
		width: 70%;
		top: 42%;
		left: 15%;
	}
	
	/*横幅768pxルイボスとはスタイル*/
	.whatHeading {
		font-size: 2.6rem;
		margin: 10% 0 10%;
	}
	
	.whatImg {
/*	width: 80%;
	float: none;
	margin: 0 auto;*/
		display: none;
	}

	.whatText {
		width: 90%;
		margin: 20px auto 40px;
		float: none;
		/*border: 1px solid #000;*/
		font-size: 1.6rem;
		line-height: 2;
		margin-top: 2%;
	}

	.whatText::before {
		display: none;
	}

	.whatText::after {
		background: url("../img/tea.png")no-repeat center right;
		background-size: contain;
		width: 100%;
		margin: 0 auto;
	}
	
	
	/*横幅768px輝くヒミのスタイル*/
	

	.secret-head ul {
		display:inline-block;
		width: 90%;
		margin: 0 5% 20px;
	}
	.secret-head li {
		width: 32%;
		font-size: 2rem;
		padding: 20px 0 50px;
	}
	
	
	.secret-point{
	display: block;
	}

	.secret-point h3 {
		font-size: 3rem;
	}
	
	.secret-text p {
	font-size: 1.6rem;
	line-height: 1.7;
	}
	
	.secret-text strong {
	font-size: 2rem;
	}
	
	.secret-text{
		width: 80%;
		margin: 10% 10% 6%;
		padding: 0;
		background: none;
	}

	.secret-photo{
		width: 100%;
	}

	
	/*横幅768px製品特徴のメインスタイル*/
	
	#bottleArea {
	overflow: hidden;
	padding-bottom: 80px;
	}

	.bottleBox {
		position: relative;
		width: 100%;
		background: url("../img/bottle-sp.png")no-repeat center top;
		height: 700px;
		background-size: contain;
	}

	.bottleImg {
		width: 80%;
		padding: 40px 0;
	}

	.bottleText {
		font-size: 1.5rem;
		line-height: 1.6;
		width: 48%;
		padding: 40px 1.5%;
	}
	
	.bottleText strong{
		font-size: 2.4rem;
	}

	.bBox1 {
		top: 6%;
		left: 4%;
	}

	.bBox2 {
		top: 74%;
		left: 4%;
		width: 50%;
	}

	.bBox3 {
		top: 46%;
		right: 4%;
	}
	
	/*横幅768pxラインナップのメインスタイル*/
	
	#lineupArea {
		padding-bottom: 80px;
	}

	.lineupBox {
	width: 80%;
	margin: 0 12% 0 8%;
	display: flex;
	flex-wrap: wrap;/*子要素を折り返し、複数行に上から下へ並べる*/
}
	

	.lineupBox .item {
		width: 50%;
	}
	
	.lineupBox .item:nth-of-type(odd){
		float: left;
	}
	
	.lineupBox .item:nth-of-type(even){
		float: right;
	} 


	.lineupText {
		color: #5e5e5e;
		font-size: 1.6rem;
		line-height: 1.6;
	}

	.lineupText strong {
		color: #5bbed8;
		font-size: 3.6rem;
	}
	
	/*横幅768pxのフッターのスタイル*/
	.footer {
		height: 140px;
	}

	.copy {
		padding-top: 80px;
	}

}