@charset "UTF-8";
/* CSS Document */

*,*::before,*::after{
margin:0;
padding:0;
box-sizing: border-box;
}

img{
max-width: 100%;
height: auto;
vertical-align: top;
}

body{
background-image: url("../images/body-bg.jpg");
background-size: 100%;
background-repeat: repeat-y;
background-position: center;
background-attachment: fixed;
background-color: #C3D5C7;
color:#5D4E72;
font-family: sans-serif;
width:100%;
}

@media(min-width:768px){
body{
min-width:900px;
}
}


a:hover{
opacity: 0.7;
}

.bottum-flow{
position:fixed;
right:10px;
bottom: 10px;
width:35%;
height: auto;
max-width: 350px;
}

.container{
width:360px;
height:auto;
margin: 0 auto;
background-color:#C3D5C7;
/*box-shadow: 10px 10px 5px 5px rgba(0,0,0,0.5)*/
}

/*=====ファーストビュー=====*/

.fv-contents .container{
background-image: url("../images/mv-bg.png");
background-repeat: no-repeat;
background-position:top;
background-size:cover;

}

.header-wrapper{
width:100%;
display:block;
display: flex;
flex-direction: row-reverse;
}

.header-wrapper h1{
width:135px;
height:auto;
}

.fv-txt1{
width:90%;
height: auto;
display: block;
margin: 20px auto;
}


.fv-txt2{
width:70%;
height: auto;
display: block;
margin: 0 auto;
margin-bottom: 20px;
}

.product-img img{
width:300px;
height:auto;
display: block;
margin: 20px auto;
}


/*=====problem=====*/
.problem .container{
background-image: url("../images/problem-bg.png");
background-size:cover;
padding-bottom:30px;
}

.problem h3{
width: 80%;
padding-top:30px;
display: block;
margin:0 auto;
}

.problem-card{
display: flex;
justify-content: space-between;
margin: 40px 0;
}

.problem-card__txt{
color: #4D4D4D;
width:50%;
height: auto;
padding:5%;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background-size:90%;
background-position: center;
background-repeat: no-repeat;
}

.frame1{
background-image: url("../images/problem-frame1.png");
/*background-size:90%;
background-position: center;
background-repeat: no-repeat;*/
}

.frame2{
background-image: url("../images/problem-frame2.png");
/*background-size:90%;
background-position: center;
background-repeat: no-repeat;*/
}

.frame3{
background-image: url("../images/problem-frame3.png");
/*background-size:90%;
background-position: center;
background-repeat: no-repeat;*/
}

.problem-card__txt p{
display: block;
justify-content: center;
text-align: center;
font-size: 16px;
}

.problem-card__img{
width: 50%;
height:auto;
overflow: hidden;
}

.img-right{
border-radius: 30px 0 0 30px;
}

.img-left{
border-radius: 0 30px 30px 0;
}

/*=====recomend=====*/

recommend .container{
padding: 30px 0;
}

.frame-circle{
background-color: #33bab1;
width:110px;
height: 110px;
border-radius: 50%;
margin: 0 auto;
color:#fff;
text-align: center;
padding:25px 10px;
margin-bottom: 30px;
}

.recommend__img img{
display: block;
margin: 0 auto;
}

/*
.recommend__flex-wrapper{
display: flex;
flex-wrap: wrap;
align-items: center;
align-content: space-between;
padding:30px auto;
margin:0 auto;
}

.recommend__flex-wrapper .item{
width:50%;
height: 50%;
margin:30px 0;
display: flex;
align-items: center;
}


.recommend__flex-wrapper p{
color: #fff;
text-align: center;
margin: 0 auto;
height:8em;
}

.recommend-frame1{
background-image: url("../images/recommend-frame1.svg");
background-repeat: no-repeat;
background-position: center;
background-size:100% 8em;
}

.recommend-frame2{
background-image: url("../images/recommend-frame2.svg");
background-repeat: no-repeat;
background-position: center;
background-size:contain;
}

.recommend-frame3{
background-image: url("../images/recommend-frame3.svg");
background-repeat: no-repeat;
background-position: center;
background-size:contain;
}

.recommend-frame4{
background-image: url("../images/recommend-frame4.svg");
background-repeat: no-repeat;
background-position: center;
background-size:contain;
}
*/

.features .container{
padding: 30px 0;
}

.features img{
display: block;
margin: 0 auto;
margin: 30px 0;
}


.purchase .container{
padding: 20px 0;
}

.purchase img{
display: block;
margin: 0 auto;
}

/*=====レビュー=====*/

.review h3{
width:100%;
padding-bottom: 15px;
}

.review .user-voice{
width: 80%;
display:block;
margin:0 auto;
padding:15px 0;
}


footer{
display: block;
text-align: center;
}

footer .container{
padding:20px;
}

.site-map ul{
height: 30px;
list-style: none;
display: flex;
justify-content: center;
align-items:center;
padding-bottom: 30px;
}



.site-map a{
padding: 0 20px;
color: #666;
font-size: 14px;
text-decoration: none;
font-weight: bold;
}