@charset "utf-8";
/*Reset*/
html,body,h1,h2,h3,h4,p,ul,ol,li,dl,dt,dd{
margin: 0;
padding: 0;
line-height: 1;
font-family: "Hiragino Kaku Gothic ProN",Meiryo, sans-serif;
color: #333;
}
ul{
list-style: none;
}
a{
text-decoration: none;
color: inherit;
}
img{
border: none;
vertical-align: bottom;
max-width: 100%;
height: auto;
}

/*共通css*/
.container{
max-width:960px;
margin:0 auto;
padding: 0 10px;
}

/*Header*/
header.container{
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 10px;
}
header.container>div:first-child{
width:360px;
}
h1{
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
.title{
margin-top: -30px;
font-size: 300%;
font-family: 'Roboto Condensed', sans-serif;
letter-spacing: 4px;
}
.title span{
color:  #0082e7
}
.co{
font-weight: bold;
font-size: 18px;
letter-spacing: 26px;
margin-bottom: 5px;
}
header div:first-child p:last-of-type{
line-height: 1.3;
}
header div:last-child{
text-align: right;
}
.tel{
display: inline;
font-size: 300%;
font-family: 'Roboto Condensed', sans-serif;
letter-spacing: 1px;
font-weight: bold;
border:2px solid #03d77a;
border-radius: 10px;
background:url(../img/meta-phone.png) no-repeat left 10px center/50px;
padding: 10px 10px 10px 65px;
}
.add{
font-size: 18px;
margin-top: 20px;
}

/*------Navigation------*/
/*------Navigation------*/
/*Top*/
.pcnav ul{
display: flex;
justify-content: center;
background:#03d77a;
}
.pcnav li{
color:#fff;
text-align: center;
font-weight: bold;
}
.pcnav a{
display: block;
font-size: 14px;
padding: 1em 5px;
}
.pcnav a:hover{
background:#f5a;
}
.pcnav img{
vertical-align:sub;
}
/* hover img */
.pcnav li{
position: relative;
}
.pcnav span{
position:absolute;
width: 130%;
top: 100%;
left: 0;
color: #7c0101;
background:rgba(255, 255, 255, 1);
text-align: left;
line-height: 1.3;
padding: 10px;
opacity: 0;
transition: 300ms;
}
.pcnav span img{
width:80px;
display: block;
margin: 0 auto 10px;
}
.pcnav a:hover span{
opacity: 1;
}

/* .pcnav ul{
display: flex;
justify-content: center;
background:#03d77a;
}
#about .pcnav ul{
background:#ff743d;
}
.pcnav li{
color:#fff;
text-align: center;
font-weight: bold;
}
.pcnav a{
display: block;
font-size: 0.9em;
padding: 1em;
}
.pcnav a:hover{
background:#f5a;
}
.pcnav img{
vertical-align:sub;
} */

/*Sp nav*/
.spnav{
position: fixed;
width: 100%;
top:57px;
height: calc(60vh - 57px);
display: none;
}
.spnav ul{
display: flex;
flex-wrap: wrap;
}
.spnav li{
text-align: center;
width:50%;
font-size: 100%;
line-height: calc((150vh - 57px)/9);
font-weight: bold;
color: #fff;
border-bottom: 1px solid #fff;
}
.spnav img{
vertical-align: middle
}
.spnav a{
display: block;
background: rgba(100,150,255,0.8)
}

/*Topへ戻る*/
.top{
color: #fff;
background:#f5a;
font-weight: bold;
box-sizing: border-box;
width:50px;
height: 50px;
padding-top: 17px;
text-align: center;
border-radius: 50%;
position: fixed;
right:5px;
bottom: 5px;
cursor: pointer;
}
/*Sp Btn*/
.btn{
width:50px;
height: 50px;
background:rgba(255,255,255,0.8);
border:1px solid #0082e7;
border-radius: 5px;
position: fixed;
top:5px;
right: 5px;
display: none;
}
.btn span{
display: block;
width:35px;
height: 3px;
background:#0082e7;
border-radius: 3px;
position: absolute;
top:0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
.btn span::before, .btn span::after{
content: "";
display: block;
width:35px;
height: 3px;
background:#0082e7;
border-radius: 3px;
}
.btn span::before{
margin-top: -10px;
}
.btn span::after{
margin-top: 17px;
}

/* Key Visual */
.keyVis{
background: url(../img/meta-keyVis.jpg) no-repeat center top/cover;
padding: 2em 0;
margin-bottom: 5px;
}
.keyVis h2{
width:500px;
height:120px;
background: url(../img/meta-title.png) no-repeat left top/contain;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
margin-bottom: 0.5em;
}
.keyVis .world{
color: #03d77a;
font-size: 2.3em;
letter-spacing: 4px;
font-weight: bold;
text-shadow: 0 0 6px #fff,0 0 6px #fff,0 0 6px #fff,0 0 6px #fff,0 0 6px #fff;
margin-bottom: 0.3em;
}
.keyVis .diet{
color: #fff;
background: #03d77a;
font-size: 2em;
font-weight: bold;
padding: 0.3em;
display: inline-block;
width: 12em;
}
.keyVis p.syohin{
width: 40%;
}

/* METABOLAIDとは？ */
.what>h2, .jelly>h2{
text-align:center;
font-size: 2em;
color: #777;
padding: 1em 0;
background:url(../img/major-top.gif) repeat-x,url(../img/major-bottom.gif) left bottom repeat-x;
margin-top: 1em;
}
.joriku{
background: #d8fded;
padding: 4em 0;
}
.joriku>.container{
background: url(../img/girf1.png) no-repeat right center/contain;
}
.what .jisedai{
font-size: 3em;
line-height: 1.2;
font-weight: bold;
color: #03d77a;
letter-spacing: 5px;
text-shadow: 0 0 6px #fff,0 0 6px #fff,0 0 6px #fff,0 0 6px #fff,0 0 6px #fff,0 0 6px #fff,0 0 6px #fff,0 0 6px #fff,0 0 6px #fff;
margin-bottom: 1em;
}
.four-topic{
padding: 4em 10px;
display: flex;
justify-content: space-between;
align-items: center;
}
.four-topic ul{
width: 70%;
}
.four-topic li{
font-size: 1.7em;
line-height: 1.2;
background: url(../img/four-check.gif) no-repeat left top;
padding-left: 3em;
color: #555;
margin-bottom: 1em;
}
.four-topic ul li:nth-child(3){
line-height: 2em;
}
.hy-lemon p:first-of-type{
margin-bottom: 1em;
}
.hy-lemon img{
margin-bottom: 0.3em;
}

/* メタボレイドの作用 */
.sayo{
background: #d8fded;
padding: 4em 0;
}
.sayo .container{
background:url(../img/sayo-icon.gif) no-repeat right center;
}
.sayo h2, .yurai h2, .jisseki h2{
font-size: 2em;
border-left: 15px solid #eb6100;
border-top: 1px solid #eb6100;
padding-left: 5px;
line-height: 1.5;
display: inline-block;
width: 9em;
position: relative;
margin-bottom: 0.8em;
}
.sayo h2::before, .yurai h2::before, .jisseki h2::before{
content:"Metabolaid Efffect";
color:#aaa;
font-size: 0.4em;
position: absolute;
right: 0;
top: -1.2em;
}
.sayo p{
font-size: 1.5em;
margin-bottom: 1em;
line-height: 1.3;
width: 80%;
}

/* 試すボタン */
 .try{
display: block;
margin:50px auto;
}

/* 植物由来 */
.yurai{
padding: 4em 0;
}
.yurai h2{
width: 6.6em;
letter-spacing: 3px;
}
.yurai h2::before{
content: "Plant-derived ingredients";
letter-spacing: 0;
}
.yurai p{
font-size: 1.5em;
margin-bottom: 1em;
line-height: 1.3;
}
.yurai a{
color: #00f;
text-decoration: underline;
}

/* ハイビスカスエキス */
.hybiscus{
padding: 3em 0;
}
.hybiscus h3{
color: #ff743d;
font-size: 1.5em;
background:url(../img/flower-icon.png) no-repeat left center;
padding-left: 1.2em;
margin-bottom: 1em;
}
.hybiscusBox{
display: flex;
justify-content: space-between;
margin-bottom: 1em;
}
.hybiscusBox>div{
width:63%;
}
.hybiscusBox>div>p{
font-size: 1em;
margin-bottom: 0.5em;
}
.hybiscusBox>div>img{
margin:0 0 1em 2em;
}
.hybiscusBox>p{
width:35%;
}

/* メタボレイド受賞歴・その他 */
.jisseki{
background: #d8fded;
padding: 4em 0;
}
.jisseki h2{
width: 10em;
}
.jisseki h2::before{
content: "Award history";
}
.jisseki p{
font-size: 1.5em;
line-height: 1.5;
}
.jusyo{
font-weight: bold;
}
.jisseki .country::before{
content: "Sales record country";
}
.jisseki .country{
width: 12em;
margin-top: 2em;
white-space: nowrap;
}
.jisseki .country span{
font-size: 0.5em;
color: #777;
}
.jisseki .pat{
width: 3.4em;
margin-top: 2em;
letter-spacing: 20px;
}
.jisseki .pat::before{
content: "Patent";
letter-spacing: 0;
}

/* METABOLAID配合 ダイエットゼリー
 */
.jelly>.container{
padding: 4em 0;
text-align: center;
}
.jelly table{
width: 80%;
margin: 4em auto;
border-collapse: collapse;
font-size: 1.3em;
line-height: 2;
}
.jelly th, .jelly td{
border: 1px solid #03d77a;
text-align: left;
padding-left: 2em;
}
.jelly th{
background: #d8fded;
}


/*共通おすすめ商品*/
.reco>section{
padding: 50px 0;
}
.reco>p:first-of-type{
line-height: 1.4;
margin:5px 0 ;
}
.reco>p:first-of-type a{
color: #00f;
text-decoration: underline;
}
.reco h2{
width: 6em;
margin: 0 auto 4em;
position: relative;
}
.reco h2::before{
content: "";
display: block;
width: 60%;
height: 2px;
background:#af0094;
position: absolute;
left: -0.3em;
top:-0.3em;
}
.reco h2::after{
content: "";
display: block;
width: 60%;
height: 2px;
background:#af0094;
position: absolute;
bottom: -0.3em;
right: -0.3em;
}
.reco h3{
text-align: center;
margin-bottom: 10px;
font-size: 130%;
color: #0082e7;
}
.recoBox{
display: flex;
justify-content: left;
flex-wrap: wrap;
}
.recoBox>section{
box-sizing: border-box;
width: 25%;
padding: 0 0.8em;
margin-bottom: 1em;
}
.reco img{
object-fit: contain;
height: 210px;
display: block;
margin:0 auto  20px;
}
.recoBox p:last-of-type{
line-height: 1.3;
}
/*チェックボタン*/
.check{
width:80%;
text-align: center;
margin:20px auto;
color: #fff;
background:#0082e7;
padding: 15px  0;
border-radius: 5px;
font-weight: bold;
box-shadow: 1px 1px 1px #000;
}

/*共通Footer*/
footer{
border-top: 1px solid #aaa;
padding: 30px 0;
text-align: center;
}
footer p:first-child{
font-family: 'Roboto Condensed', sans-serif;
font-size: 150%;
letter-spacing: 1px;
margin-bottom: 10px;
}
footer span{
color:  #0082e7;
}

@media screen  and (max-width:767px){

/*共通Header*/
header.container{
display: block;
text-align: center;
padding:20px 0 0;
}
header.container>div:first-child{
width:auto;
}
.co{
margin-bottom: 10px;
}
header div:first-child p:last-of-type{
display: none;
}
header div:last-child{
background:#03d77a;
}
.tel{
display: block;
color: #fff;
width:7em;
margin:0 auto;
padding-left:45px;
background: url(../img/phone-white.svg) no-repeat left 10px center/50px;
}
.add{
display: none;
}
.pcnav{
display: none;
}
.btn{
display: block;
}

/* jisseki */
.jisseki .country span{
display: block;
}

/* METABOLAIDとは？ */
.four-topic{
padding: 2em 10px;
}

/* メタボレイドの作用 */
.sayo{
padding: 2em 0;
}
.sayo .container{
background:none;
}
.sayo p{
width: auto;
}

/* 植物由来 */
.yurai{
padding: 2em 10px;
}

/* ハイビスカスエキス */
.hybiscus{
padding: 2em 0;
}
.hybiscusBox{
display: block;
}
.hybiscusBox>div{
width:auto;
}
.hybiscusBox>p{
width:auto;
text-align: center;
}

/* 試すボタン */
 .try{
margin:20px auto;
}


/* 共通おすすめ */
.recoBox>section{
width: 50%;
}

}

@media screen and (max-width:550px) {

/*共通Header*/
h1{
font-size: 170%;
}
.co{
letter-spacing: 9px;
}
.tel{
font-size: 32px;
width:7em;
margin:0 auto;
padding-left:45px;
background: url(../img/phone-white.svg) no-repeat left 10px center/40px;
}

/* KeyVis */
.keyVis{
text-align: center;
}
.keyVis h2{
max-width: 400px;
height: 80px;
background-position: center;
margin: 0 auto;
}
.keyVis .world{
/*text-align: center;*/
font-size: 1.5em;
}
.keyVis .diet{
font-size: 1.3em;
width: auto;
}

/* METABOLAIDとは？ */
.joriku{
padding: 2em 0;
}
.what .jisedai{
font-size: 1.2em;
}
.four-topic{
display: block;
}
.four-topic ul{
width: auto;
}.four-topic li{
font-size: 1.2em;
}
.hy-lemon{
display: flex;
justify-content: space-around;
}


/* 実績 */
.jisseki .country{
white-space:normal;
width:auto;
}
.hybiscusBox>div>img{
margin:0 0 1em 0;
}

/* METABOLAID配合 ダイエットゼリー
 */
.jelly table{
width: auto;
line-height: 1.5;
}
.jelly th, .jelly td{
padding-left: 1em;
}

/*共通おすすめ商品*/
.reco>section{
padding: 30px 0;
}
.reco h2{
margin-bottom: 20px;
}
.reco h3{
font-size: 100%;
}
    
}

@media screen and (max-width:450px){

/* Key Visual */
.keyVis{
background-position:; 
padding: 1em 0;
}

.keyVis h2{
width: 300px;
height: 80px;
}

.sayo p,.yurai p, .jisseki p{
font-size: 1.2em;
}


/* METABOLAIDとは？ */
.what>h2{
font-size: 1.5em;
}
 .jelly>h2{
font-size: 1.1em;
}

.jisseki h2{
font-size: 1.4em;
}
.jisseki .pat{
width: auto;
}



}