@charset "utf-8";
/*
Theme Name: L-style
Theme URI: http://www./
Description: L-style
Version: 1.0
Author: L-style
Author URI: http://www./
Tags: L-style

	L-style
	http://www./

*/

/*
@import url('css/entypo/font/entypo.css' );
@import url('css/fontawesome/css/all.css' );
*/

*{margin:0;padding:0;}

html{
	font-size:62.55%;
	word-break:break-all;
	word-wrap:break-word;
	background:#fff;
}

/* IE用(CSSハック)［IE8～11］https://spyweb.media/2017/12/04/ie-edge-css-hacks/ */
@media screen\0 {
	html{font-size:10px;}
}

body{
	/*font-family:'メイリオ','Meiryo',arial,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',Osaka,'MS Pゴシック','MS PGothic',Sans-Serif;*/
	font-family:'游ゴシック体', YuGothic, '游ゴシック', 'Yu Gothic', 'メイリオ', 'Meiryo', 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'Helvetica', 'Arial', sans-serif;
	font-size:15px;
	font-size:1.5rem;
	font-weight:500;
	line-height:1.66;
	color:#000;
}

/*******************************
/* box-sizing
*******************************/
*{
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-ms-box-sizing:border-box;
	-o-box-sizing:border-box;
	box-sizing:border-box;
}

@media screen and (max-width: 767px){
/* mobile-----------------------------------------------------------------*/
	img{
		max-width: 100%;
	}
}

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

h2, h1, p {
	color: #875217;
}
#header {
	width: 100%;
	 background-color: #fff;
}
.top {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}
.company-logo img {
	margin-left: 10px;
}
.product-name h2 {
	font-size: 30px;
}




/* top-page-----------------------------------------------------------------*/
.top-page{
	background-image: url(images/top6.png);
	background-repeat: no-repeat;
	width: 100%;
	background-position: left center;
	padding: 60px 0 80px 0;
}
.top-message h1 {
	font-size: 60px;
	text-align: center;
	padding-top: 30px;	
}
.top-message h2 {
	text-align: center;
	font-size: 30px;
}
.top-inner {
	display: flex;
	justify-content: center;
	align-items: center;
}
.effect img {
	margin-left: 80px;
}
.product img {
	text-align: center;
	margin-left: 30px;
	margin-right: 30px;
	margin-top: 30px;
	max-width: 100%;
}
.effect {
	padding-right: 20px;
}
.description {
	padding-left: 20px;
}
.description h2  {
	margin-bottom: 0.6em;
	margin-top: 40px;
	font-size: 30px;
}
.description p  {
	margin-bottom: 1.4em;
	font-weight: bold;
}
.message-banner1 img {}
.message-banner2 img {}



/* about-----------------------------------------------------------------*/

.about h2 {
	font-size: 30px;
	text-align: center;
	margin-top: 150px;
	margin-bottom: 60px;
}


.main-description {
	display: flex;
	justify-content: center;
	
}

.center {
	padding: 0 40px;
}



.about p {
	font-size: 16px;
	font-weight: bold;
	padding-top: 10px;
}


	
	
	
	


	
	
	
	
	




/* contents-----------------------------------------------------------------*/

.inner1 {
	width: 100%;

	background-color: #bbeaf4;
	margin-top: 120px;	
	
}

.inner-box {
	display: flex;
	margin: 0 auto;
	max-width: 1100px;
}	


.point1 {
	max-width: 1100px;
	position: relative;
	margin: 0 auto;
	text-align: left;
	margin-top: -30px;
}


.point1 img {
	position: absolute;
	margin-top: -40px;
	
	
}


.inner1-1 {
	flex-basis: 50%;
	margin-top: 70px;
	margin-left: 90px;
}



.photo1 {
	flex-basis: 50%;
	
}

.photo1 img {
	vertical-align: bottom;
}



.inner1-1 h2 {
	font-size: 30px;
	
	font-weight: bold;
	margin-bottom: 10px;
}


.inner1-1 p {
	font-size: 16px;
	font-weight: bold;
}

.inner1-2 {
	width: 50%;
	margin-right: 50%;
	text-align: right;
	position: relative;
}


.inner1-2 img {
	position: absolute;
	right: 0;
	bottom: 10px;
	

}




.inner2 {
	width: 100%;

	background-color: #bbeaf4;
	margin-top: 120px;	
	
}

.inner-box {
	display: flex;
	margin: 0 auto;
	max-width: 1100px;
	
}	


.point2 {
	max-width: 1100px;
	position: relative;
	margin: 0 auto;
	text-align: right;
	

}


.point2 img {
	position: absolute;
	margin-top: -40px;
	
	right: 0;
}	


.inner2-1 {
	flex-basis: 50%;
	margin-top: 70px;
	order: 2;
	margin-left: 90px;
}



.photo2 {
	flex-basis: 50%;
	order: 1;

}


.photo2 img {
	vertical-align: bottom;
}


.inner2-1 h2 {
	font-size: 30px;
	
	font-weight: bold;
	margin-bottom: 10px;
}


.inner2-1 p {
	font-size: 16px;
	font-weight: bold;
}




.inner2-2 {
	max-width: 1100px;
	margin: 0 auto;

	text-align: right;

}






.inner3 {
	width: 100%;

	background-color: #bbeaf4;
	margin-top: 120px;	
	
}

.inner-box {
	display: flex;
	margin: 0 auto;
	max-width: 1100px;
}	


.point3{
	max-width: 1100px;
	position: relative;
	margin: 0 auto;
}


.point3 img {
	position: absolute;
	margin-top: -40px;
	left: 0px;
}


.inner3-1 {
	flex-basis: 50%;
	margin-top: 70px;
}



.photo3 {
	flex-basis: 50%;
	
}

.photo3 img {
	vertical-align: bottom;
}



.inner3-1 h2 {
	font-size: 30px;
	
	font-weight: bold;
	margin-bottom: 10px;
}


.inner3-1 p {
	font-size: 16px;

	font-weight: bold;
}

.inner3-2 {
	width: 50%;
	margin-right: 50%;
	text-align: left;
	position: relative;
}




.inner3-2 img {
	position: absolute;
	right: 60px;
	bottom: 10px;

	

}


.inner4 {
	width: 100%;

	background-color: #bbeaf4;
	margin-top: 120px;	
	
}

.inner-box {
	display: flex;
	margin: 0 auto;
	max-width: 1100px;
}	


.point4 {
	max-width: 1100px;
	position: relative;
	margin: 0 auto;
	text-align: right;
}


.point4 img {
	position: absolute;
	margin-top: -40px;
	
	right: 0;
}


.inner4-1 {
	flex-basis: 50%;
	margin-top: 70px;
	order: 2;
}



.photo4 {
	flex-basis: 50%;
	order: 1;
	text-align: center;
}


.photo4 img {
	vertical-align: bottom;
	text-align: center;
}


.inner4-1 h2 {
	font-size: 30px;
	
	font-weight: bold;
	margin-bottom: 10px;
}


.inner4-1 p {
	font-size: 16px;
	font-weight: bold;
}


.inner4-2{
	position: relative;
	width: 50%;
	margin-left: auto;
	
}



.inner4-2 img {
	position: absolute;
	left: 0;
	bottom: 10px;
	
}






/* trouble-----------------------------------------------------------------*/


.trouble {
	width: 100%;
	height: ;
	background-color: #f7d878;
	margin-top: 120px;	
	padding-bottom: 40px;
}

.trouble h2 {
	font-size: 36px;
	font-weight: bold;
	text-align: center;
	
	padding-top: 60px;
}

.upper {
	display: flex;
	justify-content: center;
}


.upper img {
	margin-right: 30px;
	margin-top: 70px;
}


.upper-title,  .lower-title  {
	font-size: 16px;
	font-weight: bold;
	text-align: center;
	color: #875217;
}



.lower {
	display: flex;
	justify-content: center;
}


.lower img {
	margin-right: 50px;
	margin-top: 30px;
	
}



	
	
	
	
	
	
	
	
	
	


/* effect-----------------------------------------------------------------*/


.effect2  {
	width: 100%;
	height: px;
	background-image: url(images/pattern.png);
	background-repeat: no-repeat;
	background-size: cover;
	padding: 60px 0 80px 0;
}


.effect-inner {
	align-items: center;
	justify-content: center;
}


.effect2 h2 {
	font-size: 36px;
	text-align: center;
	padding-top: 30px;
}


.effect2 p {
	font-size: 16px;
	text-align: center;
	margin-top: 20px;
	font-weight: bold;
	line-height: 2.2;
	
}




/* customer-voice-----------------------------------------------------------------*/

.customer-voice h2 {
	font-size: 36px;
	text-align: center;
	padding-top: 70px;
	padding-bottom: 50px;
	margin-top: 10px;
}



.c-voice-items {
	display: flex;
	justify-content: center;
	
}

.c-voice-item {
	margin-right: 25px;
}


.c-voice-image {
	text-align: center;
	
}



.txt p {
	font-size: 16px;
	font-weight: bold;
	text-align: center;
	align-items: center;
	justify-content: center;
}

.c-voice-item {
    flex-basis: 280px;
	margin-top: 40px;
	margin-bottom: 50px;
	background-color: #f7eac3;
	padding-bottom: 20px;
	padding-top: 10px;
	
}





/* recommend-----------------------------------------------------------------*/

.recommend {
    width: 1060px;
    margin: 0 auto;
}



.recommend h2 {
	font-size: 36px;
	text-align: center;
	padding-top: 50px;
	padding-bottom: 50px;
}


.r-txt {
	text-align: center;
	font-size: 16px;
	font-weight: bold;
	align-items: center;
	justify-content: center;
}


.r-txt span {
	color: #d40e1c;
}



.recommend-items {
	display: flex;
	justify-content: center;
}


.r-item {
	margin-right: 15px;
}


.r-image  {
   text-align: center;

}

.r-item {
    flex-basis: 250px;
	margin-top: 40px;
	margin-bottom: 50px;
	padding-top: 10px;
	border: 4px solid #f7eac3;
	padding: 40px 40px;
}

.r-image2 {
	 text-align: center;
	margin-top: 10px;
}


	
	
	




/* link-----------------------------------------------------------------*/

.link {
	display: block;
	flex-direction: column;
	
	
}

.link img {
	margin: 0 auto;
	display: block;
	margin-bottom: 30px;
	margin-top: 20px;
}


/* effect3-----------------------------------------------------------------*/

.effect3 h2 {
	font-size: 36px;
	text-align: center;
	margin-top: 25px;
	
}


.effect3 p {
	font-size: 16px;
	font-weight: bold;
	text-align: center;
	align-items: center;
	padding-bottom: 30px;
}

.images4 {
	display: flex;
	justify-content: center;
	align-items: center;
}


.iron, .potassium, .vitamin, .amino{
	margin-right: 45px;
	margin-bottom: 60px;
}




	
	

	
	
	
	



/* company-----------------------------------------------------------------*/

.company  {
	width: 100%;
	
	background-image: url(images/pattern2.png);
	background-repeat:  no-repeat;
	background-size: cover;
	padding-bottom: 50px;
}




.company h2 {
	font-size: 36px;
	text-align: center;
	
}




.company p {
	font-size: 16px;
	font-weight: bold;
	text-align: center;
	line-height: 2.2;
	align-items: center;
	margin-bottom: 10px;
	
}



	
	
	








/* contact-----------------------------------------------------------------*/

.contact {
	padding: 70px 0 10px 0;
}



.company-logo {
	text-align: center;
	
}

.contact p {
	text-align: center;
	font-size: 16px;
	font-weight: bold;
	margin-bottom: 10px;
	color: #875217
}

.tel {
	font-size: 30px;
	text-align: center;
	color: #875217
}


.c-banner {
	text-align: center;
	margin-bottom: 30px;
}





/* footer-----------------------------------------------------------------*/


#footer {
	width: 100%;
	
	background-color: #bbeaf4;
}



.copyright {
	text-align: center;
	font-style: bold;
	padding-top: 20px;
	padding-bottom: 20px;
	
}