/*tablet*/
@media screen and (max-width: 768px) {
    .show-pc {display: none !important;}
    .show-sp {display: block !important;}
    /*MyHT*/
    body{
    	font-size: 17px;
    	line-height: 1.5;
    }
    .wrapper{
        min-width: 0;
        background: none;
    }
    .main-brn {
    	position: relative;
    	background: url('../images/sp/brn_main.jpg') no-repeat left top;
    	background-size: 100% auto;
    	padding-top: 290.218%;
    	height: auto;
    }
    .main-brn .btn-brn{
        opacity: 1;
    }
    .butch_affco{
        padding: 0 calc(20/750*100vw);
    }
    .butch_affco img{
        margin: 0 auto calc(50/750*100vw);
    }
    .banner-note {
    	width: 93.75%;
    	margin: 15px auto 22.5px;
        padding: 0;
        font-size: 13px;
    }
    .sns_topic_video {
        position: absolute;
        height: auto;
        border: 4px solid #f5a327;
    }
    .sns_topic h2 {
        position: absolute;
        width: 100%;
        top: 0;
        left: 50%;
        -moz-transform: translate(-50%, 0);
        -webkit-transform: translate(-50%, 0);
        -ms-transform: translate(-50%, 0);
        transform: translate(-50%, 0);
    }
    .sns_topic h2 img{
        margin: 0 auto;
    }
    .sns_topic{
        position: relative;
        padding-top: 230%;
        background: url("../images/sp/sns_bg.png") no-repeat;
        background-size: 100% auto;
        z-index: 99;
    }
    .sns_video_1{
        width: 75%;
        top: 14%; 
        left: 3%;
    }
    .sns_video_2{
        width: 50%;
        bottom: 4%; 
        right: 6%;
    }
    .commitment {
        height: auto;
        background: none;
    }
    .commitment-1,
    .commitment-2,
    .commitment-3,
    .commitment-4 {
        position: relative;
        height: auto;
        background-size: 100% auto;
        background-position: left top;
        background-repeat: no-repeat;   
    }
    .commitment-1 {
        background-image: url(../images/sp/img1_1.jpg);
        padding-top: 29.375%;
    }
    .commitment-2  {
        background-image: url(../images/sp/img1_2.jpg);
        background-repeat: repeat-y; 
        padding: 25px 0 ;
    }
    .commitment-3 {
        background-image: url(../images/sp/img1_3.jpg);
        padding-top: 112.40625%;
    }
    .commitment-4{
        background-image: url("../images/sp/img1_5.jpg");
        padding-top: 72%;
    }
    .commitment-4 img{
        width: 96%;
        position: absolute;
        top: 3%;
        left: 50%;
        -moz-transform: translate(-48%,0);
        -webkit-transform: translate(-48%,0);
        -ms-transform: translate(-48%,0);
        transform: translate(-48%,0);
    }
    .inner-small {
    	width: 85.9375%;
    }
    .inner-small-commitment {
        width: 100%;
        max-width: unset;
    }
    .commitment-txt {
        padding-top: 0;
        text-align: left;
        font-size: 22px;
    }
    .commitment-info {
		width: 45%;
		margin: auto;
    }
    .commitment-title {
    	font-size: 22px;
    	text-align: left;
    }
	.group3 .commitment-title {
		margin-top: -5px;
	}
    .commitment-info li {
		width: 43%;
		position: absolute;
		margin: auto;
		left: 7%;
    }
    .commitment-info li:first-child{
    	top: 0;
    }
    .commitment-info li:last-child{
    	top: 60%;
    }
    .commitment-info-txt {
    	line-height: 1.5;
    	margin: 7px auto auto;
    	font-size: 22px;
    }
	.commitment-title {
        border-bottom: 3px solid #53413f;
        line-height: 1.15em;
	}
	.commitment {
        height: auto;
        margin: 0 auto;
        padding-top: 1%;
	}
	.group2 {
        background: none;
        margin-top: calc(70/750*100vw);
        height: auto;
    }
    .group2-inner{
        max-width: unset;
    }
    .group2-1,
    .group2-2,
    .group2-3,
    .group2-4 {
        position: relative;
        height: auto;
        background-size: 100% auto;
        background-position: left top;
        background-repeat: no-repeat;  
    }
    .group2-1 {
        background-image: url(../images/sp/img2_1.jpg);
        padding-top: 72.375%;
    }
    .group2-2 {
        background-image: url(../images/sp/img_2_2.jpg);
        padding-top: 79%;
    }
    .group2-3 {
        background-image: url(../images/sp/img_2_3.jpg);
        padding-top: 164.4375%;
    }
    .group2-4 {
        background-image: url(../images/sp/img2_5.jpg);
        padding-top: 52.4375%;
    }
    .group2-content1 {
        position: absolute;
        top: 0;
        left: 6%;
        height: 100%;
        width: 42.65625%;
        float: none;
        padding: 0;
    }
	.group2-2 .group2-content1 {
        top: 10%;
        left: 7%;
		width: 88%;
    }
    .group2-content1-table{
        display: table;
        height: 100%;
    }
    .group2-content-cell {
        display: table-cell;
        vertical-align: middle;
        height: 100%
    }
	.group2-content3 {
        position: absolute;
        left: 6%;
        height: 100%;
        width: 42.65625%;
        float: none;
        padding: 0;
		top: 58%;
		margin: auto;
	}
	.group2-content2 {
		float: none;
		width: 45%;
		position: absolute;
		margin: auto;
		left: 6%;
		top:17%;
    }
    .group2-4 img{
        position: absolute;
        top: -12%;
        left: 50%;
        width: 90%;
        -moz-transform: translate(-49%,0);
        -webkit-transform: translate(-49%,0);
        -ms-transform: translate(-49%,0);
        transform: translate(-49%,0);
    }
	.group3 {
        height: auto;
		margin-top: 15px;
        margin-bottom: 20px;
        background: none;
	}
    .group3-top,
    .group3-mid,
    .group3-bottom {
        position: relative;
        height: auto;
        background-size: 100% auto;
        background-position: left top;
        background-repeat: no-repeat;  
    }
    .group3-top {
        background-image: url(../images/sp/img3_1.jpg);
        padding-top: 40.875%;
    }
    .group3-mid {
        background-image: url(../images/sp/img3_2.jpg);
        background-repeat: repeat-y;
        padding: 36px 0 50px;
    }
    .group3-bottom {
        background-image: url(../images/sp/img3_3.jpg);
        padding-top: 343.8125%;
    }
	.group3-ttl-note {
        font-size: 19px;
	}
	.group3-info {
		padding-top: 0;
	}
	.group3-txt {
		margin: auto;
		width: 40.813%;
		position: absolute;
		top: 75%;
		left: 50%;
		font-size: 22px;
	}
	.group3-info li:first-child {
		top: 0;
		padding-left: 5px;
	}
	.group3-info li:last-child {
		top: 24%;
		padding: 0 0 0 5px;
	}
	.group3-info .commitment-title {
		border-bottom: none;
	}
	.group3-info .commitment-info-txt {
		margin: 25px auto auto;
	}
	.group3-info .commitment-info li {
		width: 44%;
	}
	.banner {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        display: block;
        z-index: 9999;
	}
    .banner img { width: 100%;}
	.group3-note {
        position: absolute;
        left: 7.03%;
        bottom: 16px;
        width: 85.96%;
        margin: auto;
        text-align: left;
        font-size: 13px;
    }
    .commitment-title-sp.show-sp  {
        display: inline-block !important;
    }
    .group3-info li {
        width: 70%;
    }
    .commitment-info-txt-group3 {
        width: 60%;
        float: left;
    }
    /*end MyHT*/
    /*Hiennt*/
    .inner-sp {
        padding: 0 20px;
    }
    .special-trial-group {
    	padding-top: 194.43%;
        height: auto;
    	background: url('../images/sp/img8.jpg') no-repeat left top;	    
	    background-size: 100% auto;
    }
    .butch-group { 
        margin-top: calc(30/750*100vw);
        height: auto;
        padding-top: 268.8%;
        background: url('../images/sp/img9.jpg') no-repeat left top;
        background-size: 100% auto;
    } 
    .btn-brn {
        right: 50%;
        bottom: 1.5%;
        margin-right: -194px;
        max-width: 389px;
        opacity: 0;
    }
    .txt-limited {
        position: static;
        padding: 14px 0 37px;
        font-size: 13px;
    }
    .butch-life {
        height: auto;
        padding-top: 221.40%;
        background: url('../images/sp/img11.jpg') no-repeat left top;
        background-size: 100% auto;
    }
    .ingredients-group {
        border: 0;
        padding-top: 10px;
    }
    .ingredients-group {
        border: 0;
        padding-top: 10px;
    }
    .ingredients-group_bottom{
        background: #b19259;
    }
    .form-group, 
    .footer, 
    .butch-life,
    .ingredients-group {
        border: 0;
    }
    .ingredients-group-border {
        border: 0;
        padding-bottom: 1px;
    }
    .special-trial-group-sp {
        height: auto;
        padding-top: 180.4%;
        background: url('../images/sp/img12.jpg') no-repeat left top;
        background-size: 100% auto;
    }
    .btn-special-trial {
        bottom: 2.0%;
    }    
    .btn-special-trial-sp {
        bottom: 3.4%;
    }
    .introducing-group {
        position: relative;
        height: auto;
        padding-top: 183.43%;
        background: url('../images/sp/img13.jpg') no-repeat left top;
        background-size: 100% auto;
    }
    .link-introducing{
        font-size: 13px;
        right: 0;
    }
    .child-group {
        position: relative;
        height: auto;
        padding-top: 289.8%;
        background: url('../images/sp/img14.jpg') no-repeat left top;
        background-size: 100% auto;
    }
    .ingredients-info { 
        margin-bottom: 14px;
        padding: 12px 14px;
        font-size: 15px;
    }
    .ingredients-info-title {
        font-size: 20px;
    }
    .group7-sp-bg {
        background-size: 100% auto;
        padding: 26px 50px 38px;
        line-height: 1.6;
        font-size: 22px;
    }
    .goddess-txt {
        margin-top: 40px;
    }
    .group6_2 {
        position: relative;
        height: auto;
        padding-top: 291.85%;
        background: url('../images/sp/img6_2.jpg') no-repeat left top;
        background-size: 100% auto; 
        font-size: 22px;
    }
    .group6_2 .top_cnt{
        padding-left: 30px;
        position: absolute;
        top: 59%;
        width: 85%;
        left: 48%;
        -moz-transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        text-align: justify;
        font-size: 22px;
        line-height: 1.54em;
    }
    .group6_2 .cnt_w_img{
        position: absolute;
        top: 72.5%;
        width: 44%;
        right: 0;
        padding-right: 38px;
        text-align: justify;
        font-size: 22px;
        line-height: 1.54em;
    }
    .group6_2 .cnt_w_img span{
        display: block;
    }
    .group6-sp-bg { margin-bottom: 18px;}
    .group6_3{
        position: relative;
        height: auto;
        padding-top: 258.85%;
        background: url('../images/sp/img6_3.jpg') no-repeat left top;
        background-size: 100% auto; 
        font-size: 22px;
    }
    .group6_3 .top_cnt{
        position: absolute;
        top: 43%;
        left: 50%;
        transform: translateX(-50%);
        width: 85%;
        text-align: justify;
    }
    .group6_3 .cnt_w_img{
        position: absolute;
        width: 43%;
        right: 2%;
        top: 54%;
        padding-right: 30px;
        text-align: justify;
    }
    .group6-note{
        position: absolute;
        bottom: 5%;
        right: 0;
        font-size: 15px;
        line-height: 2.9em;
    }
    .group7-note-sp { 
        text-align: right;
        padding: 19px 20px 50px;
        font-size: 13px;
    }
    .group6 {
        height: auto;
        padding-top: 99.53%;
        background-size: 100% auto; 
    }
    .group_6_sp,
    .group5,
    .group5-2-sp,
    .group5-3-sp,
    .group5-4-sp,
    .group4 {
        position: relative;
        height: auto;
        background-size: 100% auto;
        background-position: left top;
        background-repeat: no-repeat;       
    }
    .group_6_sp::after{
        content: "";
        background: #2a343b;
        width: 100%;
        height: 40px;
    }
    .group5 {
        padding-top: 51.4%;
        background-image: url('../images/sp/img5_1.jpg');
    }
    .group5-2-sp {
        padding-top: 107.3%;
        background-image: url('../images/sp/img5_2.jpg');
    }
    .txt-raw-material {
        position: absolute;
        top: 0;
        padding: 6% 45px 0;
        font-size: 22px;
        line-height: 1.5;
    }
    .group5-3-sp {
        background-image: url('../images/sp/img5_3.jpg');
        background: url('../images/sp/img5_3.jpg') no-repeat left top,url('../images/sp/img5_3.jpg') no-repeat left bottom ;
        background-size: 100% auto;
    }
	.group5-3-sp .grade-raw-info {
		font-size: 22px;
	}
    .grade-raw {
        padding: 20px 74px 0;     
        line-height: 1.6; 
    }
    .grade-raw-title {
        padding-bottom: 10px;
        margin-bottom: 15px;
        font-size: 28px;
        border-bottom: 5px solid #524141;
        text-align: center; 
        line-height: 1.5;      
        font-weight: 600; 
    }
    .group5-4-sp {
        padding-top: 47.75%;
        background-image: url('../images/sp/img5_4.jpg');
    }
    .group5-5-sp{
        position: relative;
        padding-top: 81.75%;
        background: url('../images/sp/img5_5.png') center center no-repeat;
        background-size: cover;
        z-index: 9;
    }
    .group4 {
        padding-top: 530.34375%;
        background-image: url('../images/sp/img4.jpg');
        margin: calc(20/750*100vw) 0 calc(36/750*100vw);
    }
    .group4-content1 {
        position: absolute;
        top: 25%;
        width: 85.96%;
        margin: 0 auto;
        float: none;
        left: 7.03%;
        padding-top: 0;
    }
    .group4-content2 {
        position: absolute;
        top: 42%;
        width: 85.96%;
        margin: 0 auto;
        float: none;
        left: 7.03%;
        padding-top: 0;
    }
    .group4-content3{
        position: absolute;
        top: 60.5%;
        width: 85.96%;
        margin: 0 auto;
        float: none;
        left: 7.03%;
        padding-top: 0;
        font-size: 22px;
        line-height: 1.5;
    }
    .group4-info {
        position: absolute;
        top: 80%;
        width: 85.96%;
        margin: 0 auto;
        float: none;
        left: 7.03%;
        padding-top: 0;
    }
    .group4-content2 .commitment-info-txt {
        width: 51%;
        float: left;
    }
    .group4-info2 {
        margin-top: 4.5%;
    }
    .group4-info li {
        width: 47%;
    }
    .group4-info li:first-child {
        left: 0;
        float: left;
    }
    .group4-info li:last-child {
        right: 0;
        float: left;
        padding-left: 15px;
    }
    .group4_card img{
        width: 90%;
        position: absolute;
        bottom: 1%;
        left: 50%;
        transform: translateX(-50%);
    }
    .pic-material{
        position: relative;
        padding-top: 0;
    }
    .pic-material img { 
        width: 100%;
    }
    .pic-material img:first-child{ 
        margin-bottom: calc(80/750*100vw);
    }
    .commitment-info-txt-group3-pc.show-pc {
        display: none !important;
    }
    /*End Hiennt*/
    .group_6_sp{
        position: relative;
        padding-top: 205%;
        color: #ffffff;
        font-size: 22px;
        line-height: 1.54em;
        background: url(../images/sp/group6_sp_bg.jpg) center center no-repeat;
        background-size: 100% 100%;
    }
    .group_6_sp .group_6_cnt{
        padding-left: 10px;
    }
    .group_6_sp .group_6_img{
        padding-top: 120%;
        position: relative;
        top: -70px;
        left: 0;
        background: url('../images/sp/img6.jpg')left top no-repeat;
        background-size: contain;
    }
    .txt_w_img p{
        position: absolute;
        top: 63%;
        right: 0;
        width: 45%;
        padding-right: 38px;
        line-height: 1.84em;
        text-align: justify;
        padding-bottom: 34px;
    }
    .group_6_sp .txt_w_img::after{
        clear: both;
    }
    .group_6_sp .top_cnt{
        padding: 0 20px;
        position: absolute;
        top: 41%;
        left: 1%;
        font-size: 22px;
        line-height: 1.54em;
    }
    .butch_recommend{
        padding-top: 120%; 
        padding-bottom: 5%;
        background: url("../images/sp/bg_recommend.jpg") left top no-repeat;
        background-size: 100% auto;
    }
    .butch_recommend_intro{
        margin: 0 5%;
        padding: 5%;
        background: #ffffff;
        border-top: 9px solid #014099;
        border-bottom: 9px solid #014099;
        -webkit-box-shadow: 0px 0px 27px 6px rgba(50, 50, 50, 0.2);
        -moz-box-shadow:    0px 0px 27px 6px rgba(50, 50, 50, 0.2);
        box-shadow:         0px 0px 27px 6px rgba(50, 50, 50, 0.2);
    }
    .butch_recommend_intro h3 img{
        margin: 0 auto;
        width: 100%;
        padding: calc(25/750*100vw) 0 calc(50/750*100vw);
    }
    .butch_recommend_intro .butch_recommend_txt{    
        position: relative;
        padding: 0 20px 12%;
    }
    .butch_recommend_intro p{
        font-size: 22px;
        line-height: 1.54em;
    }
    .butch_recommend_intro .butch_recommend_txt::before{
        content: "";
        background: url("../images/sp/img_dot.jpg") center center no-repeat;
        width: 81%;
        height: 10px;
        display: block;
        position: absolute;
        top: -5%;
        left: 50%;
        -moz-transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }
    .butch_recommend_intro .butch_recommend_txt::after{
        content: "";
        background: url("../images/sp/img_dot.jpg") center center no-repeat;
        width: 81%;
        height: 10px;
        display: block;
        position: absolute;
        bottom: 2%;
        left: 50%;
        -moz-transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }
    .butch_recommend_intro .butch_recommend_txt p{
        margin-top: 45px;
    }
    .butch_recommend_intro .butch_recommend_txt p:first-child{
        padding-top: 20px;
    }
    .butch_profile{
        position: relative;
        padding-top: 100%;
        margin: 0 5%;
        background: url("../images/sp/recommend-profile.gif") center center no-repeat;
        background-size: 100% auto;
    }
    .butch_profile p{
        width: 48%;
        height: 100%;
        padding: 25% 15px 23% 20px;
        position: absolute;
        top: -4%;
        left: 0;
        font-size: 3.33vw;
        line-height: 1.54em;
        text-align: justify;
    }
}
@media screen and (max-width: 680px){
    .txt_w_img p{
        top: 61%;
    }
}

@media screen and (max-width: 630px) {
  .commitment-txt,
  .commitment-info-txt,
  .group3-txt,
  .group4-content3,
  .txt-raw-material,
  .group5-3-sp .grade-raw-info,
  .group7-sp-bg {
    font-size: 19px;
  }
  .group_6_sp  p{
      font-size: 18px;
  }
  .txt_w_img p{
    top: 63%;
}
  .butch_recommend_intro .butch_recommend_txt p {
    margin-top: 30px;
  }
  .group_6_sp .top_cnt,.group_6_sp .txt_w_img{
      font-size: 21px;
  }
  .txt_w_img p{
      width: 41%;
      padding-right: 9%;
  }
}
@media screen and (max-width: 600px) {
  .commitment-txt,
  .commitment-info-txt,
  .group3-ttl-note,
  .group3-txt,
  .group4-content3,
  .txt-raw-material,
  .group5-3-sp .grade-raw-info,
  .group7-sp-bg {
    font-size: 18px;
  }
  .group6_2 .top_cnt, .group6_2 .cnt_w_img{
      font-size: 21px;
  }
}
@media screen and (max-width: 580px) {
	.group6_2 .top_cnt, .group6_2 .cnt_w_img{
        font-size: 20px;
    }
}
@media screen and (max-width: 550px) {
  .commitment-title {
      font-size: 20px;
  }
  .commitment-txt,
  .commitment-info-txt,
  .group3-ttl-note,
  .group3-txt,
  .group4-content3,
  .txt-raw-material,
  .group5-3-sp .grade-raw-info,
  .group7-sp-bg {
    font-size: 17px;
  }
  
    .butch_recommend_intro p{
        font-size: 20px;
    }
    .group6-note{
        font-size: 10px;
    }
    .group6_2 .top_cnt, .group6_2 .cnt_w_img{
        font-size: 19px;
    }
    .group6_3 .cnt_w_img{
        width: 42%;
        top: 55%;
    }
    .group_6_sp  p{
        font-size: 17px;
    }
}
@media screen and (max-width: 520px) {
	.commitment-title {
		font-size: 20px;
	}
  .commitment-txt,
  .commitment-info-txt,
  .group3-ttl-note,
  .group3-txt,
  .group4-content3,
  .txt-raw-material,
  .group5-3-sp .grade-raw-info,
  .group7-sp-bg {
    font-size: 16px;
  }
  .butch_profile p{
      width: 48%;
      padding-left: 15px;
  }
  .butch_recommend_intro p {
    font-size: 18px;
  }
  .group6_2 .top_cnt, .group6_2 .cnt_w_img{
    font-size: 17px;
    }
    .group_6_sp  p{
        font-size: 15px;
    }
}
/*sp*/
@media screen and (max-width: 480px) {
	/*MyHT*/
	 body{
    	/* font-size: 13px; */
    }
    .banner-note {
    	margin: 10px auto 15px;
        font-size: 10px;
    }
    .commitment-title {
    	font-size: 18px;
    }
    .commitment-info-txt {
    	margin: 10px auto auto;
    	/* font-size: 13px; */
    }
	.commitment-title {
		border-bottom: 2px solid #53413f;
	}
	.group3 .commitment-title {
		margin-top: -2px;
	}
    .commitment-txt{
        /* font-size: 15px; */
    }
	.group3-ttl-note {
		font-size: 15px;
	}
  .commitment-txt,
  .commitment-info-txt,
  .group3-ttl-note,
  .group3-txt,
  .group4-content3,
  .txt-raw-material,
  .group5-3-sp .grade-raw-info,
  .group7-sp-bg {
    font-size: 15px;
  }
    /*end MyHT*/
    /*Hiennt*/
    .btn-brn {
        margin-right: -129px;
        max-width: 258px;
    }
    .txt-limited {
        position: static;
        padding: 7px 0 20px;
        font-size: 10px;
    }
    .link-introducing{
        font-size: 10px;
        right: 0;
    }
    .ingredients-info-title {
        padding-bottom: 6px;
        margin-bottom: 5px;
        border-bottom: 1.5px solid #b29259;
        text-align: center;
    }
    .footer-logo img {
        max-width: 50%;
        margin: 0 auto;
    }
    .goddess-txt {
        margin-top: 20px;
    }
    .group6-sp-bg { margin-bottom: 10px;}
    .group7-note-sp { 
        padding: 10px 20px 25px;
        font-size: 10px;
    }
    .txt-raw-material {
        /* font-size: 15px; */
        padding: 3% 28.5px;
    }
    .grade-raw {
        padding: 10px 50px 0;
    }
    .grade-raw-title{
        font-size: 14px;
        border-width: 2px;
        padding-bottom: 5px;
        margin-bottom: 10px;
    }
    .group3-note {
        font-size: 10px;
    }
    .commitment-mid {
        padding: 18px 0 22px;
    }
    .group3-mid {
        padding: 18px 0 25px;
    }
    .ingredients-info{
        font-size: 13px;
    }
    .ingredients-title,
    .ingredients-info-title {
        font-size: 16px;
    }
    /*End Hiennt*/
    .group_6_sp .group_6_img{
        top:-50px
    }
}
@media screen and (max-width: 460px) {
  .commitment-txt,
  .commitment-info-txt,
  .group3-ttl-note,
  .group3-txt,
  .group4-content3,
  .txt-raw-material,
  .group5-3-sp .grade-raw-info,
  .group7-sp-bg {
    font-size: 14px;
  }
  .butch_recommend_intro p {
    font-size: 14px;
    line-height: 1.54em;
  }
  .group6_2{
    padding-top: 246.85%;
  }
  .group6_2 .top_cnt, .group6_2 .cnt_w_img{
    font-size: 16px;
    }
  .group6_2 .cnt_w_img{
    right: -3%;
  }
  .group_6_sp  p{
    font-size: 13px;
  }
}
@media screen and (max-width: 420px) {
  .commitment-title {
    font-size: 16px;
  }
  .butch_recommend_intro p {
    font-size: 16px;
  }
  .butch_recommend_intro .butch_recommend_txt p {
    margin-top: 20px;
  }
  .group6_2{
    padding-top: 289.85%;
  }
  .group_6_sp  p{
    font-size: 12px;
    line-height: 1.84em;
  }
}
@media screen and (max-width: 430px) {
	.group3-info .commitment-info-txt{
		margin: 12px auto auto;
    }	
    .group6_2 .top_cnt, .group6_2 .cnt_w_img{
        font-size: 15px;
    }
  .group6_3 .cnt_w_img{
    width: 43%;
  }
}
@media screen and (max-width: 400px) {
	 body{
    	/*font-size: 11px;*/
    }   
    .grade-raw { padding: 10px 40px 0;}
    .commitment-info-txt {
        /* font-size: 11px; */
    }
    .commitment-title{
        /* font-size: 12px; */
    }
  .commitment-txt,
  .commitment-info-txt,
  .group3-ttl-note,
  .group3-txt,
  .group4-content3,
  .txt-raw-material,
  .group5-3-sp .grade-raw-info,
  .group7-sp-bg {
    font-size: 13px;
  }
  .group6_3 .cnt_w_img{
    width: 42%;
    right: 0;
  }
  .group6_2 .top_cnt, .group6_2 .cnt_w_img{
    font-size: 14px;
    }
  .group6_2 .cnt_w_img{
      right: 0;
    padding-right: 23px;
  }
}
@media screen and (max-width:390px){
	.butch_profile p{
		font-size: 3.26vw;
	}
}
@media screen and (max-width: 380px) {
	 body{
    	/*font-size: 10px;*/
    }
  .commitment-title {
      font-size: 15px;
  }
  .commitment-txt,
  .commitment-info-txt,
  .group3-ttl-note,
  .group3-txt,
  .group4-content3,
  .txt-raw-material,
  .group5-3-sp .grade-raw-info,
  .group7-sp-bg {
    font-size: 12px;
  }
  .group_6_sp .group_6_img{
      top: -40px;
  }
  .butch_profile p{
        padding: 26% 10px 26% 15px;
		font-size: 3.3vw;
  }
  .group6-note{
      font-size: 8px;
  }
  .group6_2{
    padding-top: 287.85%;
  }
  .group6_2 .top_cnt, .group6_2 .cnt_w_img{
    font-size: 13px;
    }
    .group_6_sp  p{
        font-size: 11px;
    }
    .txt_w_img p{
        width: 40%;
    }
    .group6_3 .top_cnt{
        top: 42%;
    }
}
@media screen and (max-width: 355px) {
  .commitment-title {
    font-size: 14px;
  }
  .grade-raw-title {
    font-size: 13px;
  }
  .commitment-txt,
  .commitment-info-txt,
  .group3-ttl-note,
  .group3-txt,
  .group4-content3,
  .txt-raw-material,
  .group5-3-sp .grade-raw-info,
  .group7-sp-bg {
    font-size: 11px;
  }
  .grade-raw-info {
    margin-top: -8px;
  }
  .group6_2 .top_cnt, .group6_2 .cnt_w_img{
    font-size: 12px;
    }
}
@media screen and (max-width: 340px) {
  .commitment-title {
    font-size: 13px;
  }
  .grade-raw {
    margin-top: -3px;
  }
  .group6_2{
    padding-top: 286.85%;
  }
  .group_6_sp  p{
    font-size: 10px;
    }
}
@media screen and (max-width: 330px) {
    .grade-raw-title{
        font-size: 12px;
    }    
    .group4-info {
        top: 78.8%
    }
    .commitment-info-txt{
        margin-top: 5px;
    }
    .butch_profile p{
        padding: 27% 10px;
		font-size: 3.23vw;
    }
    .group6_2 .top_cnt, .group6_2 .cnt_w_img{
        font-size: 11px;
    }
    .group6_2 .cnt_w_img{
        width: 44%;
    }
}


@media screen and  (min-width:480px) and (max-width:590px) { 
    .grade-raw { 
        padding: 10px 55px 0; 
    }
    .grade-raw-title {
        font-size: 18px;
        border-width: 3px;
    }
    .grade-raw-info {
        font-size: 14px;
    }
}

@media screen and (max-width: 319px){
    .commitment-txt, .commitment-info-txt, .group3-ttl-note, .group3-txt, .group4-content3, .txt-raw-material, .group5-3-sp .grade-raw-info, .group7-sp-bg,.group6_2 .top_cnt, .group6_2 .cnt_w_img{
        font-size: 10px;
    }
    .commitment-title {
        font-size: 11px;
    }
    .group2-content3{
        top: 56%;
    }
    .group4-info li:last-child{
        padding-left: 13px;
    }
    .group3-note {
        font-size: 8px;
    }
    .link-introducing {
        font-size: 8px;
        right: 0;
    }
    .butch_recommend_intro p {
        font-size: 13px;
    }
    
}