@charset "UTF-8";


.commingsoon{
border:#999 solid 1px;
padding: 1.5rem;
font-size:1.6rem;
line-height: 1;
display: inline-block;
margin-top: 1.5rem;
font-family: 'Montserrat', "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
}
.material.ingredient,
.material.peptide{
display: inline-flex;
flex-wrap: wrap;
justify-content: space-around;
}
.material.peptide section:first-child{
margin-top: 0;
}
.material section{
position: relative;
display: flex;
align-items: center;
width: 100%;
}
.material section.text_only{
display: block;
margin-top: 2.5rem;
}
.material.ingredient section div{
width: 60%;
margin-bottom: 2rem;
}
.material.ingredient section figure{
width: 40%;
margin:0 2rem 1rem;
}
.material .text_only{
padding-left: 6rem;
box-sizing: border-box;
}
.material .text_only .tag{
top: 0;
left: 0;
}
.material .tag{
position: absolute;
top: -.5rem;
left: -.5rem;
width: 50px;
height: 50px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 60px;
background-color:#7da3b6;
color: #fff;
text-align: center;
font-size: 1.2rem;
line-height: 1.2;
font-weight: 600;
}
.tag.orange{
background-color:#c0947c;
}
.tag.purple{
background-color:#b89dbd;
}
.material .material_header{
font-weight: 600;
margin-bottom: .5rem;
font-size: 1.5rem;
}
.material .material_header + p{
font-size: 1.3rem;
}
.material_free{
display: inline-flex!important;
flex-wrap: wrap;
justify-content:center;
}
.material_free figure{
display: inline-block;
width: 25%;
text-align: center;
margin: 0.5rem;
}




@media(min-width:641px) {

.material section{
display: inline-block;
}
.material.ingredient section{
width: 30%;
}
.material.ingredient section div{
width: 100%;
}
.material.ingredient section figure{
width: 100%;
margin:0 0 1.5rem;
text-align: center
}
.material.ingredient section figure img{
width: 80%;
}
.material.peptide section{
width: 40%;
}
.material section.text_only{
margin-top: 0;
margin-bottom: 2rem;
}
.material .tag{
top:2rem;
left:2rem;
width: 60px;
height: 60px;
font-size: 1.4rem;
line-height: 1.4;
}
.material .text_only .tag{
top:0rem;
left:0rem;
}
.material .material_header{
font-size: 1.9rem;
margin-top: 0;
}
.material .material_header + p{
font-size: 1.5rem;
}
.material .text_only{
padding-left: 7.5rem;
padding-top: .3rem;
}
.material.ingredient .text_only{
margin-top: 6rem;
}
.material_free{
flex-wrap: nowrap;
justify-content: space-between;
}
.material_free figure{
width: 14%;
margin: 0;
}




}



.text_marker{
text-decoration: none;
font-weight: 600;
background: linear-gradient(transparent 50%, #fdfaa6 50%);
line-height: 1;
}
.fs20 {
font-size: min(4vw, 20px) !important;
}
.ls100 {
letter-spacing: .1em !important;
}