/*========================================
   sp 
 ========================================*/



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

#top p {
  line-height: 1.8em;
 /*  margin-top: 5%;*/
}

#top h2 .title1 {
    font-size: 18px;
}


#top h2 .title2 {
  font-size: 18px;
}

#head {
   	margin-top: 0px;
   }

#head h1 img {
  	width: auto;
  }

#head, #bg-wrapper, #wrapper, #top {
    min-width: 100%;
    width: 100%;
    padding: 4px;
 }
 #bg-wrapper {
 	margin-top: 0px;
 }
#bg-wrapper img {
    /*width: 90%;*/
    padding: 0 3%;
    max-width: 100%;
 }

.left {
	width: 49%;
}

 .sec01, .sec02, .sec03, .sec04, .sec05{
 	min-width: 100%;
    width: 100%;
  } 

.sec01 {
  padding-top: 0;
}

.sec03 .sec03-in{
    margin: 0 12px;
    padding: 0px 0px 10px 0px;
}

.sec03 h2 {
	font-size: 17px;
}

.voice img{
	width: auto!important;
}

.floL2 {
    float: left;
    width: 100%;
    
}

.rakuten {
	display: block;
}
.rakuten ul li {
    list-style: none;
    float: none;
     width: 100%; 
}

.rakuten ul li img {
   
    border-top: 5px solid #f2f2f2;
    border-right: 0px;
    border-bottom: 0px;
    border-left: 0px;
}


.pointbox ul li {
    list-style: none;
    float: none;
     width: 100%; 
}
.sec05_spimg img {
  max-width: 100%;
}


/* contents table */


.table table {
    display: block;
    padding: 0px;
    box-sizing: border-box;
}

.table tbody, .table tr, .table th, .table td{
    display: block;
    width: 100%;
}

.eiyoshi .voice-wrap{
	width:60%;
 }

.eiyoshi .photo{
	width:40%;
}

.eiyoshi .photo p{
	padding:10px 0px 0 0px;
}


img.photo-left{
	width:40%;
}




 .voice .voice-wrap{
	width:60%;
	 float:right;
 }
 


.voice .photo{
	float: left;
	width:40%;
}



#section08  {
 	max-width: 100%;
	margin-right:20px;
}

#section08 #customer {
	float: none;
	width: 100%;
	height:auto;
	margin-bottom:10px;
}

#section08 .banner {
	width:100%;
}

#section08 #customer .right{
	float: none;
}

#section08 .sec-wrapper {
	overflow:hidden;
	margin:0px 0 0px 0;
}

.photo p img{
	width: auto;
}

.sec03 .sec-wrapper {
	margin:0px 0 0px 0;
}

.sec03 #nutrient {
	float: none;
	width: 380px;
	height:auto;
	margin: 0 auto 10px auto;
}

.sec03 #nutrient.right{
	float: none;
}

.sec03 dl{
	padding:0 0 20px 0;
}


.sec09 .voice-wrap{
	width:60%;
	float:right;
}

.sec09 .photo{
	float: left;
	width:40%;
	margin-top:20px;
}

.sec09 .comment-wrap{
	width:100%;
	float:none;
}

.sec09 .graph{
	float: none;
	width:100%;
	margin:0 auto;
	text-align:center;
}



}



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

.viewpc{
  display: none;
}
.viewsp{
  display: block;
}


h2 {
  margin-top: 10px!important;
}

#top h2 .title2 {
  font-size: 18px;
}

#top p {
    font-size: 14px;
}

.left {
	width: 100%;
}

.left2 {
    float: none;
    text-align: center;
}

.left2 img {
  width: auto!important;
  height: auto!important;
}

/*.sec02 {
    margin: 40px 0px 40px 0px;
}*/

.tume{
    margin-top: -30px;
}


.txtadd {
  font-size: 18px;
}


.sec05 {
    padding-top: 10px;
    padding-bottom: 10px;
}

.sec04 {
  margin: 0 auto;
}

.sec04 img {
  display: block;
  margin: 0 auto 6% auto;
}
.floL1 {
  float: none;
}
.voice h3 {
  margin-bottom: 10%;
}
}


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


#head h1 img {
    width: 70%;
    height: auto;
}

.buy01 {
    font-size: 27px
}

.cau {
  font-size: 12px!important;
}

}



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



.sec02 {
    font-size: 24px;
}

.buy01 {
    font-size: 27px
}
}