@charset "UTF-8";

@media screen and (min-width:1024px) {
.smp{
display:none;
}
p{
font-size:14px;
line-height:1.5em;
text-align:justify;
}
img.grow{
-webkit-transition:0.2s ease-in-out;
-moz-transition:0.2s ease-in-out;
-ms-transition:0.2s ease-in-out;
-o-transition:0.2s ease-in-out;
transition:0.2s ease-in-out;
}
img.grow:hover{
-webkit-transform:scale(1.1,1.1);
-moz-transform:scale(1.1,1.1);
-ms-transform:scale(1.1,1.1);
-o-transform:scale(1.1,1.1);
transform:scale(1.1,1.1);
}
}
@media only screen and (min-width:768px) and (max-width:1023px) {
.smp{
display:none;
}
.pc{
display:none;
}
.tablet{
display:block;
}
p{
font-size:13px;
line-height:1.5em;
text-align:justify;
}
img.grow{
-webkit-transition:0.2s ease-in-out;
-moz-transition:0.2s ease-in-out;
-ms-transition:0.2s ease-in-out;
-o-transition:0.2s ease-in-out;
transition:0.2s ease-in-out;
}
img.grow:hover{
-webkit-transform:scale(1.1,1.1);
-moz-transform:scale(1.1,1.1);
-ms-transform:scale(1.1,1.1);
-o-transform:scale(1.1,1.1);
transform:scale(1.1,1.1);
}
}
@media only screen and (min-width:320px) and (max-width:767px) {
.pc{
display:none;
}
p{
font-size:14px;
line-height:1.35em;
text-align:justify;
}
}
/*==================================================================

INDEX_AREA

==================================================================*/
@media screen and (min-width:1024px) {
.index_bg{
width:100%;
margin:0;
padding:0;
background:url("../../images/f_view_bg.jpg") no-repeat top center;
background-size:cover;
}
.index_area{
width:1000px;
margin:0 auto;
padding:0px 0 10px 0;
}
.index_area h5{
width:28%;
margin:0 0 auto 72%;
}
.index_area dl{
}
.index_area dl dt{
width:18%;
margin:30px 5% 0 5%;
float:left;
}
.index_area dl dd{
width:70%;
padding:160px 5% 0 3%;
float:right;
}
.index_area dl dd ol{
}
.index_area dl dd ol li{
width:30%;
margin:80px 1.5%;
float:left;
}
.index_area h2{
width:70%;
margin:20px auto 0;
}
.index {
background:#102447;
}
.index h1{
width:500px;
margin:0 auto;
padding:10px 0;
}
}
@media only screen and (min-width:768px) and (max-width:1023px) {
.index_area{
width:100%;
margin:0 auto;
padding:0;
background:url("../../images/f_view_bg.jpg") no-repeat center;
background-size:auto;
}
.index_area{
width:100%;
margin:0 auto;
padding:0px 0 10px 0;
}
.index_area h5{
width:30%;
margin:0 2% auto 68%;
}
.index_area dl{
}
.index_area dl dt{
width:18%;
margin:30px 5% 0 5%;
float:left;
}
.index_area dl dd{
width:70%;
padding:140px 5% 0 3%;
float:right;
}
.index_area dl dd ol{
}
.index_area dl dd ol li{
width:30%;
margin:50px 1.5% 20px;
float:left;
}
.index_area h2{
width:74%;
margin:20px auto 0;
}
.index {
background:#102447;
}
.index h1{
width:50%;
margin:0 auto;
padding:10px 0;
}
}
@media only screen and (min-width:320px) and (max-width:767px) {
.index_area{
width:100%;
margin:0 auto;
padding:0;
background:url("../../images/f_view_bg.jpg") no-repeat center;
background-size:auto;
}
.index_area{
width:100%;
margin:0 auto;
padding:0px 0 10px 0;
}
.index_area h5{
width:50%;
margin:0 1% auto 49%;
}
.index_area dl{
}
.index_area dl dt{
width:30%;
margin:30px auto 0;
}
.index_area dl dd{
width:90%;
padding:40px 0% 0 10%;

}
.index_area dl dd ol{
}
.index_area dl dd ol li:first-child{
width:44%;
margin:20px 28% 5px;
float:left;
}

.index_area dl dd ol li{
width:44%;
margin:10px 3% 20px;
float:left;
}
.index_area h2{
width:94%;
margin:10px auto 0;
}
.index {
background:#102447;
}
.index h1{
width:70%;
margin:0 auto;
padding:5px 0;
}
}
/*==================================================================

INGREDIENT_AREA

==================================================================*/
@media screen and (min-width:1024px) {
.ingredient_area{
width:1000px;
margin:80px auto;
padding:0;
}
.ingredient_area h3{
font-size:35px;
font-weight:500;
text-align:center;
line-height:1.5em;
margin-bottom:1.5em;
}
.ingredient_area ol{
}
.ingredient_area ol li:first-child{
width:20%;
margin:15px 2.3% 15px 15%;
float:left;
}
.ingredient_area ol li{
width:20%;
margin:15px 2.3%;
float:left;
}
.ingredient_area ol li p{
font-family: 'Zen Kaku Gothic New', sans-serif;
font-size:15px;
text-align:center;
line-height:1.35em;
margin-top:0.8em;
}
}
@media only screen and (min-width:768px) and (max-width:1023px) {
.ingredient_area{
width:98%;
margin:60px auto;
padding:0;
}
.ingredient_area h3{
font-size:32px;
font-weight:500;
text-align:center;
line-height:1.5em;
margin-bottom:1.5em;
}
.ingredient_area ol{
}
.ingredient_area ol li:first-child{
width:20%;
margin:15px 2.3% 15px 15%;
float:left;
}
.ingredient_area ol li{
width:20%;
margin:15px 2.3%;
float:left;
}
.ingredient_area ol li p{
font-family: 'Zen Kaku Gothic New', sans-serif;
font-size:13px;
text-align:center;
line-height:1.35em;
margin-top:0.8em;
}
}
@media only screen and (min-width:320px) and (max-width:767px) {
.ingredient_area{
width:98%;
margin:30px auto;
padding:0;
}
.ingredient_area h3{
font-size:20px;
font-weight:500;
text-align:center;
line-height:1.5em;
margin-bottom:1.5em;
}
.ingredient_area ol{
}
.ingredient_area ol li:first-child{
width:42%;
margin:5px 28% 10px;
float:left;
}
.ingredient_area ol li{
width:42%;
margin:5px 4% 15px;
float:left;
}
.ingredient_area ol li p{
font-family: 'Zen Kaku Gothic New', sans-serif;
font-size:12px;
text-align:center;
line-height:1.35em;
margin-top:0.5em;
}
}
/*==================================================================

PERMEATE_AREA

==================================================================*/
@media screen and (min-width:1024px) {
.permeate_area{
width:1000px;
margin:100px auto;
padding:0;
}
.permeate_area h3{
width:80%;
margin:0 auto 30px;
}
.permeate{
background:url("../../images/permeate.jpg") no-repeat top center;
background-size:100%;
padding:130px 0 130px 80px;
}
.permeate p{
font-size:18px;
font-weight:400;
line-height:1.9em;
}
}
@media only screen and (min-width:768px) and (max-width:1023px) {
.permeate_area{
width:100%;
margin:80px auto;
padding:0;
}
.permeate_area h3{
width:80%;
margin:0 auto 20px;
}
.permeate{
background:url("../../images/permeate.jpg") no-repeat top center;
background-size:100%;
padding:70px 0 70px 50px;
}
.permeate p{
font-size:16px;
font-weight:400;
line-height:1.9em;
}
}
@media only screen and (min-width:320px) and (max-width:767px) {
.permeate_area{
width:100%;
margin:60px auto;
padding:0;
}
.permeate_area h3{
width:80%;
margin:0 auto 10px;
}
.permeate{
}
.permeate p{
font-size:15px;
font-weight:400;
line-height:1.65em;
width:86%;
margin:2em auto 0;
}
}
/*==================================================================

USAGE_AREA

==================================================================*/
@media screen and (min-width:1024px) {
.usage_area{
width:100%;
margin:0;
padding:0;
background:#102447;
color:#FFF;
}
.usage{
width:1000px;
margin:0px auto;
padding:50px 0;
font-weight:400;
}
.usage img{
width:18.5%;
float:left;
margin:-96px 50px 0 0;
}
.usage h4{
font-size:16px;
margin-bottom:1em;
}
.usage p{
line-height:1.6em;
}
}
@media only screen and (min-width:768px) and (max-width:1023px) {
.usage_area{
width:100%;
margin:0;
padding:0;
background:#102447;
color:#FFF;
}
.usage_area{
width:100%;
margin:0px auto;
padding:40px 1em 40px 0;
font-weight:400;
}
.usage img{
width:21%;
float:left;
margin:-58px 50px 0 0;
}
.usage h4{
font-size:16px;
margin-bottom:1em;
}
.usage p{
line-height:1.6em;
}
}
@media only screen and (min-width:320px) and (max-width:767px) {
.usage_area{
width:100%;
margin:0;
padding:0;
background:#102447;
color:#FFF;
}
.usage_area{
width:100%;
margin:0px auto;
padding:40px 0;
font-weight:400;
}
.usage img{
width:30%;
margin:-58px 35% 0;
}
.usage h4{
text-align:center;
font-size:16px;
margin:1.5em auto 0.8em;
}
.usage p{
line-height:1.3em;
width:90%;
margin:0 auto;
}
}
/*==================================================================

FREE_AREA

==================================================================*/
@media screen and (min-width:1024px) {
.free_area{
width:1000px;
margin:100px auto;
padding:0;
}
.free_area h3{
width:42%;
margin:0 auto 35px;
}
.free_area ul li:first-child{
width:15%;
margin:10px 0.83% 10px 8.3%;
float:left;
}
.free_area ul li{
width:15%;
margin:10px 0.83%;
float:left;
}
.free_area dl{
width:84%;
margin:70px auto 0;
}
.free_area dl dt{
width:35%;
float:left;
margin-right:10%;
}
.free_area dl dd{
width:55%;
float:left;
font-size:20px;
line-height:1.8em;
padding-top:2em;
}
}
@media only screen and (min-width:768px) and (max-width:1023px) {
.free_area{
width:98%;
margin:60px auto;
padding:0;
}
.free_area h3{
width:42%;
margin:0 auto 35px;
}
.free_area ul li:first-child{
width:15%;
margin:10px 0.83% 10px 8.3%;
float:left;
}
.free_area ul li{
width:15%;
margin:10px 0.83%;
float:left;
}
.free_area dl{
width:96%;
margin:50px auto 0;
}
.free_area dl dt{
width:35%;
float:left;
margin-right:10%;
}
.free_area dl dd{
width:55%;
float:left;
font-size:17px;
line-height:1.8em;
padding-top:2em;
}
}
@media only screen and (min-width:320px) and (max-width:767px) {
.free_area{
width:98%;
margin:50px auto;
padding:0;
}
.free_area h3{
width:70%;
margin:0 auto 35px;
}
.free_area ul li:first-child{
width:31%;
margin:5px 1.1% 5px 18%;
float:left;
}
.free_area ul li{
width:31%;
margin:5px 1.1%;
float:left;
}
.free_area dl dt{
width:60%;
margin:40px 20% 15px;
}
.free_area dl dd{
font-size:15px;
line-height:1.8em;
}
}
/*==================================================================

ITEM_AREA

==================================================================*/
@media screen and (min-width:1024px) {
.item_bg{
width:100%;
margin:0;
padding:0;
background:#102447;
color:#FFF;
}
.item_area{
width:1000px;
margin:60px auto 0;
padding:100px 0;
background:url("../../images/item_lexy-lamour.png") no-repeat bottom center;
background-size:contain;
}
.item_area dl{
}
.item_area dl dt{
width:40%;
float:left;
margin:0 10% auto 0;
}
.item_area dl dd{
width:50%;
margin:0;
float:right;
}
.item_area dl dd h2{
font-size:30px;
font-weight:500;
letter-spacing:0.05em;
margin:2em auto 1em 0; 
}
.item_area dl dd h6{
font-size:26px;
font-weight:500;
letter-spacing:0.05em;
text-align:right;
}
.item_area dl dd h6 span{
font-size:70%;
}
.item_area dl dd a{
text-decoration:none;
}
.item_area dl dd div.button a{
background:#ED6D46;
position:relative;
display:flex;
justify-content:space-around;
align-items:center;
margin:2em auto;
max-width:100%;
padding:1em 0;
color:#FFF;
transition:0.3s ease-in-out;
font-size:20px;
font-weight:500;
letter-spacing:0.03em;
z-index:0;
}
.item_area dl dd div.button a:before{
content:"";
position:absolute;
top:0;
bottom:0;
width:0;
display:block;
background:#F18A6B;
transition:.3s;
left:0;
}
.item_area dl dd div.button a:hover{
color:#FFF;
}
.item_area dl dd div.button a:hover:before{
width:100%;
z-index:-1;
}
.item_area dl dd div.ingredient{
background:#FFF;
color:#102447;
padding:3em;
font-size:11px;
line-height:1.4em;
text-align:justify;
}
.item_area dl dd div.ingredient h3{
margin-bottom:2em;
}
.item_area dl dd div.ingredient h3 span{
font-size:12px;
font-weight:500;
background:#102447;
color:#FFF;
padding:0.2em 0.5em 0.2em 1em;;
letter-spacing:0.5em;
}
.item_area h5{
font-size:12px;
font-weight:500;
text-align:right;
word-spacing:0.3em;
margin:1em 0;
}
.item_area h4{
font-size:11px;
}
.item_area p{
font-size:11px;
margin:1em 0 4em;
}
}
@media only screen and (min-width:768px) and (max-width:1023px) {
.item_bg{
width:100%;
margin:0;
padding:0;
background:#102447;
color:#FFF;
}
.item_area{
width:98%;
margin:40px auto 0;
padding:100px 0;
background:url("../../images/item_lexy-lamour.png") no-repeat bottom center;
background-size:contain;
}
.item_area dl{
}
.item_area dl dt{
width:40%;
float:left;
margin:0 10% auto 0;
}
.item_area dl dd{
width:50%;
margin:0;
float:right;
}
.item_area dl dd h2{
font-size:24px;
font-weight:500;
letter-spacing:0.05em;
margin:0 auto 1em 0; 
}
.item_area dl dd h6{
font-size:20px;
font-weight:500;
letter-spacing:0.05em;
text-align:right;
}
.item_area dl dd h6 span{
font-size:70%;
}
.item_area dl dd a{
text-decoration:none;
}
.item_area dl dd div.button a{
background:#ED6D46;
position:relative;
display:flex;
justify-content:space-around;
align-items:center;
margin:2em auto;
max-width:100%;
padding:1em 0;
color:#FFF;
transition:0.3s ease-in-out;
font-size:16px;
font-weight:500;
letter-spacing:0.03em;
z-index:0;
}
.item_area dl dd div.button a:before{
content:"";
position:absolute;
top:0;
bottom:0;
width:0;
display:block;
background:#F18A6B;
transition:.3s;
left:0;
}
.item_area dl dd div.button a:hover{
color:#FFF;
}
.item_area dl dd div.button a:hover:before{
width:100%;
z-index:-1;
}
.item_area dl dd div.ingredient{
background:#FFF;
color:#102447;
padding:2em;
font-size:10px;
line-height:1.3em;
text-align:justify;
}
.item_area dl dd div.ingredient h3{
margin-bottom:2em;
}
.item_area dl dd div.ingredient h3 span{
font-size:12px;
font-weight:500;
background:#102447;
color:#FFF;
padding:0.2em 0.5em 0.2em 1em;;
letter-spacing:0.5em;
}
.item_area h5{
font-size:12px;
font-weight:500;
text-align:right;
word-spacing:0.3em;
margin:1em 0;
}
.item_area h4{
font-size:10px;
}
.item_area p{
font-size:10px;
margin:1em 0 3em;
}
}
@media only screen and (min-width:320px) and (max-width:767px) {
.item_bg{
width:100%;
margin:0;
padding:0;
background:#102447;
color:#FFF;
}
.item_area{
width:98%;
margin:40px auto 0;
padding:50px 0;
background:url("../../images/item_lexy-lamour.png") no-repeat bottom center;
background-size:contain;
}
.item_area dl{
}
.item_area dl dt{
width:70%;
margin:0 15% 20px;
}
.item_area dl dd{
margin:0;
}
.item_area dl dd h2{
font-size:20px;
font-weight:500;
text-align:center;
letter-spacing:0.05em;
margin:0 auto 1em 0; 
}
.item_area dl dd h6{
font-size:18px;
font-weight:500;
letter-spacing:0.05em;
text-align:center;
}
.item_area dl dd h6 span{
font-size:70%;
}
.item_area dl dd a{
text-decoration:none;
}
.item_area dl dd div.button a{
background:#ED6D46;
position:relative;
display:flex;
justify-content:space-around;
align-items:center;
margin:2em auto;
max-width:90%;
padding:1em 0;
color:#FFF;
transition:0.3s ease-in-out;
font-size:16px;
font-weight:500;
letter-spacing:0.03em;
z-index:0;
}
.item_area dl dd div.button a:before{
content:"";
position:absolute;
top:0;
bottom:0;
width:0;
display:block;
background:#F18A6B;
transition:.3s;
left:0;
}
.item_area dl dd div.button a:hover{
color:#FFF;
}
.item_area dl dd div.button a:hover:before{
width:100%;
z-index:-1;
}
.item_area dl dd div.ingredient{
width:90%;
margin:0 auto;
background:#FFF;
color:#102447;
padding:2em;
font-size:10px;
line-height:1.3em;
text-align:justify;
}
.item_area dl dd div.ingredient h3{
margin-bottom:2em;
}
.item_area dl dd div.ingredient h3 span{
font-size:12px;
font-weight:500;
background:#102447;
color:#FFF;
padding:0.2em 0.5em 0.2em 1em;;
letter-spacing:0.5em;
}
.item_area h5{
font-size:12px;
font-weight:500;
text-align:center;
word-spacing:0.3em;
margin:1em 0;
}
.item_area h4{
font-size:10px;
}
.item_area p{
font-size:10px;
margin:1em 0 3em;
}
}