@charset "UTF-8";
/*ver01*/
.wrapper {
    margin: 0 auto;
    max-width: 1440px;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, tbody, tfoot, thead { border: 0; font-family: inherit; font-size: 100%; font-style: inherit; font-weight: inherit; margin: 0; outline: 0; padding: 0; word-break: break-all; word-wrap: break-word;}
:focus { outline: 0;}
ol, ul { list-style: none;}
caption { font-weight: normal; text-align: left;}
blockquote:before, blockquote:after,q:before, q:after { content: "";}
blockquote, q { quotes: "" "";}
a { text-decoration: none; color: #fff;}
img { border: 0; display: block; max-width: 100%;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block;}
input, button, textarea, select, optgroup, option { font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit;}
table { border-collapse:collapse; border-spacing:0;}
html { font-size: 100% }
body {
    font-size: 1.4rem;
    line-height: 1.3;
    background-color: #fff;
    color: #000000;
    font-family: ArialMT,'Hiragino Kaku Gothic Pro','Hiragino Kaku Gothic ProN',Meiryo,'MS PGothic',sans-serif;   
}

@media (min-width: 769px) and (max-width: 1440px){
    html{
        font-size: 1.1111vw
    }
}
strong{
    font-weight: 600;
}
.yellow_text{
    color: #fff100;
}
.yellow_line {
	background: rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #fff100 0%) repeat scroll 0 0;
}
a.banner img:hover{
    opacity: 1;
}
.txt_red{
	color:#ff0000;
	font-size:12px;
	padding:10px 0;
}
.clear:after {
    content: '';
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
}
.show-pc {display: block !important;}
.show-sp {display: none !important;}

.inner,
.inner-small,
.inner-mid {
    width: 100%;
    height: auto;
    margin: 0 auto;
    background: #fff;
}
.inner-small {
    max-width: 660px;
}
.banner_middle img{
    margin: 0 auto;
}
.banner_middle{
    margin: 40px auto 0;
}
.banner-note {
    font-size: 10.5px;
    background: #fff;
}

.btn-brn,
.btn-faq {
    display: inline-block;
    position: absolute;
    right: 13%;
    bottom: 75px;
    transition: 0.4s linear all;
    -moz-transition: 0.4s linear all;
    -webkit-transition: 0.4s linear all;
}
.btn-brn {
    bottom: 2.8125rem;
}
.btn-brn .show-pc{
    width: 66.4375rem;
    height: auto;
}
.main-brn .btn-brn {
    right: auto;
    left: 50%;
    transform: translate(-50%, -50%);
    bottom: -7.18rem;
}
.bg_overlay{
    content: "";
    width: 97.75%;
    height: 78%;
    display: none;
    background: #000;
    opacity: 0.2;
    position: absolute;
    top: 12px;
    left: 0.9%;
}

.btn-brn:hover .bg_overlay, 
.btn-faq:hover .bg_overlay{
    display: block;
}

.commitment {
    height: 837px;
    background: url(../images/img_value_1.jpg) no-repeat left top;
    background-size: cover;
}
.commitment-txt {
    padding-top: 17%;
    text-align: center;
    font-size: 25px;
    line-height: 1.4em;
}
.commitment-info {
    width: 100%;
    margin: 355px auto auto;
}
.commitment-info li {
    float: left;
    margin: auto 100px auto auto;
    width: 280px;
}
.commitment-title {
    border-bottom: 5px solid #53413f;
    padding-bottom: 5px;
    font-size: 2.4rem;
    text-align: center;
    font-weight: bold;
}
.commitment-info li:last-child {
    margin-right: 0;
}
.txt-red {
    color: #e2000b;
}
.commitment-info-txt {
    margin: 15px auto auto;
    line-height: 1.7;
    text-align: justify;
}
.group2 {
    background: #ecebe7 url(../images/img_value_2.jpg) no-repeat left top;
    height: 1157px;
    background-size: 100% auto;
}
.group2-inner {
    max-width: 670px;
    margin: 0 auto;
}
.group2-content1 {
    width: 270px;
    float: right;
    padding-top: 400px;
}
.group2-content2 {
    width: 350px;
    float: left;
    margin: 60px auto auto;
}
.title-left {
    text-align: left;
}
.group2-content3 {
    padding-top: 0;
    margin: 55px auto auto;
}
.group3 {
    background: url('../images/img_value_3.jpg') no-repeat left top;
    height: 1586px;
    position: relative;
    background-size: cover;
}
.group3-txt {
    line-height: 1.7;
    position: absolute;
    bottom: 275px;
    left: 382px;
}
.group3-note {
    position: absolute;
    bottom: 1%;
    right: 11%;
    text-align: right;
    font-size: 12px;
}
.group3-ttl-note-pc {
    position: absolute;
    top: 240px;
    left: 349px;
    text-align: center;
}
.group4 {
    background: url('../images/img_value_4.jpg') no-repeat left top;
    height: 146.9375rem;
    background-size: cover;
}
.group4-content1 {
    width: 290px;
    float: left;
    padding-top: 345px;
    margin: auto auto auto 5px;
}
.group4-content2 {
    float: right;
    width: 365px;
    margin: 170px 5px auto auto;
}
.group4-info2 {
    margin: 25px auto auto;
}
.group4-content3 {
    margin: 14% auto auto;
    line-height: 1.7;
    width: 55%;
}
.group4-info {
    margin: 390px auto auto;
}
.group5 {
    background: url('../images/img_value_5.jpg') no-repeat left top;
    height: 79rem;
    background-size: 100% auto;
}
.group5-content1 {
    /* width: 500px; */
    margin: auto;
    padding-top: 370px;
    color: #fff;
    line-height: 1.7;
    text-align: justify;
}
.group3-note a {
    color: #000;
    text-decoration: underline;
}
.group5-bottom-title {
    margin:90px auto auto;
    text-align: center;
    font-size: 24px;
}
.group5-bottom-content {
    width: 27%;
    margin: 2% auto auto 46%;
    line-height: 1.7;
    font-size: 1.03125rem;
}

/*@-moz-document url-prefix() {
    .group3-txt {
        margin: 470px auto auto 205px;
    }
    .group2-content2 {
        margin: 85px auto auto;
    }
    .group4-content2 {
        margin: 160px auto auto;
    }
}*/
.banner {
    display: none;
}
/*Hiennt-----------------------------------------*/
.inner-mid {
    max-width: 900px;
}
/*butch-group*/
.butch-group {
    background: url(../images/img9re.jpg) no-repeat left top;
    position: relative;
    height: 2073px;
    background-size: cover;
}
/*butch-life-group*/
.butch-life-inner {
    max-width: 970px;
    margin: 0 auto;
}
.butch-life-top {
    background: url('../images/life_bg_top.jpg') no-repeat left top;    
}
.butch-life-mid {
    background: url('../images/life_bg_mid.jpg') repeat-y left top;
}
.butch-life-bottom {
     background: url('../images/life_bg_bottom.jpg') no-repeat left top;
}
.butch-life-bottom,
.butch-life-top {
    padding-top: 3.092%;
}
.inner-life {
    padding: 20px 30px;
}
/*special-trial-group*/
.special-trial-group {
    background: url('../images/img8-tadaima.png') no-repeat left top;
    position: relative;
    height: 573px;
}
.btn-special-trial {
    bottom: -0.375rem;
    right: auto;
    left: 50%;
    transform: translate(-50%, -50%);;
}
.special-trial-group.stg1 .btn-special-trial{
    bottom: 0.8rem;
}
/*faq-group*/
.faq-group {
    background: url('../images/img11.jpg') no-repeat left top;
    position: relative;
    height: 115.875rem;
    background-size: cover;
}
.btn-faq {
    right: 46px;
    bottom: 133px;
}
.txt-faq {
    bottom: 70px !important;
}
/*introducing-group */

.link-introducing {
    position: absolute;
    right: 20px;
    bottom: 10px;
    color: #fff;
    font-size: 12px;
}
.link-introducing a {
    border-bottom: 1px solid #fff;
}
/*child-group*/

.btn-brn-child {
    right: 76px;
    bottom: 75px;
}
.txt-limited {
    position: absolute;
    bottom: 48px;
    left: 20px;
    font-size: 10.5px;
    line-height: 1.35em;
}
.ingredients-group {
    padding-top: 20px;
}
.ingredients-group-inner {
    max-width: 63.25rem;
    margin: 0 auto;
}
.ingredients-title {
    margin-bottom: 12px;
    font-size: 20px;
    line-height: 2;
    background: #000;
    color: #fff;
    text-align: center;
}
.ingredients-info {
    padding: 12px 20px;
    background: #fff;
    margin-bottom: 16px;
    font-size: 14.7px;
    line-height: 1.43em;
}
.ingredients-group-border {
    padding-bottom: 30px;
}
.ingredients-info-title {
    padding-bottom: 12px;
    margin-bottom: 10px;
    border-bottom: 3px solid #b29259;
    text-align: center;
}
/*footer*/
.form-group,
.footer,
.butch-life {
    background: #fff;    
}
.form-group-inner {
    max-width: 800px;
    margin: 0 auto;
}
iframe#egg_form {
    padding: 0 0 0 0;
    border: 0;
    width: 100%;
    height: 800px;
    overflow: hidden!important;
    overflow-x: hidden!important;
    overflow-y: hidden!important;
}
.footer {
    padding-bottom: 20px;
}
.footer-menu {
    margin: 0 auto 5px;
    text-align: center;
    font-size: 14px;
}
.footer-menu li { 
    display: inline-block;
    margin: 0 5px;
}
.footer-menu li a {
    display: block;
    color: #000;
}
.copy-right {
    text-align: center;
    font-size: 12px;
}
.footer-logo {
    display: block;
    margin: 0 auto 20px;
    padding-top: 50px;
    text-align: center;
}
.footer-logo a {
    display: inline-block;
}
.footer-logo img { max-width: 100%;}
.txt-limited-bg {
    background: #fff;
    text-align: left;
    padding: 7px 10px 0;
    font-size: 10.5px;
}
.pb50 { padding-bottom: 50px;}
.commitment-info-txt-group3-pc.show-pc {
    display: inline-block !important;
}


.txt-emergensy1 {
    bottom: 40px !important;
}                    

.txt-emergensy3 {
    bottom: 20px !important;
}
.txt-emergensy4 {
    bottom: -18px !important;
}
/*Linh Fix*/
.fix_color{
	background:#fff;
	font-size: 10.5px;
}
.txt-emergensy2{
	background: #b29259;
	margin: 0 7px;
	/* bottom: 20px; */
	left: 0;
	max-width: 1012px;
	padding-left: 20px;
	padding-right: 20px;
}
.txt-emergensy4{right:15px;}
.faq-group:after{
	/* content:""; */
	/* width:98.7%; */
	/* height:20px; */
	/* background: #b29259; */
	/* position:absolute; */
	/* left:7px; */
	/* bottom:0; */
}
/*Hiennt-----------------------------------------*/

/*Hongttv    */
@media (min-width: 769px){
    .butch_calendar img{
        margin: auto;
    }
    .butch_calendar{
        margin-top: 80px;
    }
    .btn_check{
        width: 25%;
        margin: auto;
        display: block;
    }
    .btn-brn-child img.show-pc{
        width: 64.4375rem;
    }
    .main-brn {
        position: relative;
        height: 62.125rem;
        max-width: 1440px;
        margin: 0 auto;
        background: url(../images/brn_main2.jpg) no-repeat center center;
        background-size: cover;
    }
    .main-brn .btn-brn img.show-pc {
        width: 45.4375rem;
    }
    .commitment{
        max-height: 965px;
        height: 67vw;
    }
    .commitment-txt {
        font-size: 1.40625vw;
    }
    .commitment-info {
        width: 100%;
        margin: 5% auto auto;
    }
    .commitment-info li {
        float: left;
        margin: auto -5% auto 30%;
        width: 10.875em;
        display: block;
    }
    .commitment-title {
        font-size: 1.45rem;
    }
    .commitment-info-txt{
        font-size: 1.03125rem;
    }
    .sns_topic{
        padding-top: 90%;
        background: url("../images/sns_bg.jpg") no-repeat;
        background-size: 100% auto;
    }
    .sns_topic h2 img{
        width: 46%;
        margin: 0 auto;
    }
    .sns_video_1{
        width: 36%;
        top: 15%;
        left: 14%;
    }
    .sns_video_2{
        width: 31%;
        bottom: 16%;
        right: 18%;
    }
    .pic-material img{
        width: 100%;
    }
    .group2-content1 {
        width: 21%;
        padding-top: 55%;
        padding-left: 13%;
        float: left;
    }
    .group2-content2 {
        float: right;
        width: 25%;
        margin: 3% auto auto;
        margin-right: 25%;
    }
    .group2{
        height: 131.03vw;
        max-height: 1887.26px;
    }
    
    .group3{
        height: 86.125rem;
    }
    .group3-ttl-note-pc{
        position: static;
        padding-top: 17.126rem;
        font-size: 1.40625rem;
        line-height: 1.4em;
    }
    .group3 .commitment-info {
        width: 100%;
        margin: 3.15rem auto auto;
    }
    .group3 .commitment-title {
    }
    .group2-content3{
        width: 22%;
        float: left;
        padding-left: 14%;
        margin-top: 3.4375rem;
    }
    .group4-content1 {
        width: 28%;
        float: left;
        padding-top: 33%;
        margin: auto auto auto 5px;
        padding-left: 19%;
    }
    .group4-content2 {
        float: right;
        width: 29.375rem;
        margin: 17rem 10.78rem auto auto;
    }
    .group4-content3{
        font-size: 1.40625rem;
        width: 100%;
        margin-top: 14.5625rem;
        line-height: 1.4em;
    }
    .group4-content3 p{
        text-align: center;
    }
    .group4-info {
        margin: 3.5rem 0 auto;
        width: 19.875rem;
        margin-left: 13%;
    }
    .group4-info li{
        margin-bottom: 3.625rem;
    }
    .group5-content1{
        padding-top: 30.6rem;
        font-size: 1.40625rem;
        text-align: center;
        line-height: 1.4em;
    }
    .group5-bottom-title{
        margin: 7.625rem auto auto;
        font-size: 1.5rem;
    }
    .group6 {
        height: 91.9375rem;
        background: url('../images/img_6.jpg') no-repeat left top;
        background-size: cover;
    }
    .group6-content1 {
        margin: auto auto auto 25.5rem;
        line-height: 1.55;
        padding-top: 59rem;
        color: #fff;
        width: 22.125rem;
        font-size: 1.03125rem;
    }
    .group6-content2 {
        margin: 1.25rem auto auto 0;
        color: #fff;
        line-height: 1.55;
        width: 22.5625rem;
        font-size: 1.03125rem;
        padding-left: 43rem;
    }
    .group6_2{
        height: 90.0625rem;
        background: url('../images/img_7.jpg') no-repeat left top;
        background-size: cover;
        font-size: 1.03125rem;
        color: #fff;
        line-height: 1.63em;
    }
    .group7 {
        height: 67.9375rem;
        background: url('../images/img_8.jpg') no-repeat left top;
        background-size: cover;
        font-size: 1.03125rem;
        line-height: 1.6875em;
    }
    .group7-content1 {
        margin: auto auto auto 65px;
        padding-top: 170px;
        line-height: 2.3;
    }
    .group7-note {
        float: right;
        margin: 10.375rem 13rem auto auto;
        font-size: 0.75rem;
    }
    .sns_topic{
        position: relative;
        z-index: 99;
        margin-top: 5%;
    }
    .sns_topic_video{
        position: absolute;
        height: auto;
        border: 8px 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);
    }
    .special-trial-group {
        background-size: cover;
        height: 35.875rem;
        margin-top: 2.6875rem;
        margin-right: 10.5625rem;
        margin-left: 12.3125rem;
    }
    .ingredients-group{
        margin: 0 10.3125rem 0 12.9375rem;
    }
    .ingredients-group.ingredients-group_bottom{
        margin: 0;
    }
    .butch-group{
        height: 130.25rem;
        margin-top: 3rem;
    }
    .btn-faq {
        right: 50%;
        bottom: 4.2rem;
        width: 36%;
        left: 50%;
        transform: translate(-50%);
    }
    .group6_2 .top_cnt{
        width: 24.5625rem;
        padding-top: 51.5rem;
        padding-left: 21.5625rem;
    }
    .group6_2 .cnt_w_img{
        width: 22.875rem;
        padding-left: 37.0625rem;
        padding-top: 02rem;
    }
    .group7 .top_cnt{
        padding-top: 36.5rem;
        width: 23.875rem;
        padding-left: 42.1875rem;
        line-height: 1.63em;
    }
    .group7 .cnt_w_img{
        width: 25.5625rem;
        padding-left: 27.125rem;
        padding-top: 2.8125rem;
    }
    .butch_recommend{
        position: relative;
        background: url("../images/recommend_profile.jpg") center center no-repeat;
        background-size: cover;
        height: 68.3rem;
        margin-top: 3.875rem;
    }
    .butch_profile{
        font-size: 0.9275rem;
        width: 27.125rem;
        padding-left: 13.3125rem;
        padding-top: 48.2rem;
        line-height: 1.63em;
    }
    .butch_recommend_intro{
        position: absolute;
        width: 30.625rem;
        background: #fff;
        border-top: 0.6875rem solid #014099;
        border-bottom: 0.6875rem solid #014099;
        top: 21rem;
        left: 43rem;
        padding: 0 2.75rem;
        /* font-weight: 600; */
        height: 40.1rem;
        -webkit-box-shadow: 0px -1px 5px 4px rgba(209,209,209,1);
        -moz-box-shadow: 0px -1px 5px 4px rgba(209,209,209,1);
        box-shadow: 0px -1px 5px 4px rgba(209,209,209,1);
    }
    .butch_recommend_intro::before{
        content: "";
        background: url("../images/profile_img.jpg") no-repeat;
        width: 31.5rem;
        height: 6.75rem;
        display: block;
        position: absolute;
        top: -5.0625rem;
        left: 50%;
        -moz-transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        background-size: cover;
    }
    .butch_recommend_intro h2{
        font-size: 1.8375rem;
        font-weight: 600;
        text-align: center;
        padding-top: 2.5rem;
        line-height: 1.42em;
    }
    .butch_recommend_txt{
        position: relative;
        font-size: 1.05rem;
        line-height: 1.7em;
        margin-top: 1.6875rem;
        margin-bottom: 2.4375rem;
        padding: 1.875rem 0;
    }
    .butch_recommend_txt::before{
        position: absolute;
        top: 0;
        left: 50%;
        content: '';
        background: url("../images/sp/img_dot.jpg") no-repeat;
        background-size: cover;
        width: 25rem;
        height: 0.625rem;
        transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
    }
    .butch_recommend_txt::after{
        position: absolute;
        bottom: 0;
        left: 50%;
        content: '';
        background: url("../images/sp/img_dot.jpg") no-repeat;
        background-size: cover;
        width: 25rem;
        height: 0.625rem;
        transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
    }
    .btn-faq .show-pc{
        width: 64rem;
        height: auto;
    }
    .faq_bottom{
        position: relative;
    }
    .txt-emergensy2{
        background: #fff;
        max-width: unset;
        padding: 0px 10.3125rem 0 12.9375rem;
        margin: 0;
        bottom: 3rem;
        top: 0.625rem;
        line-height: 1.5em;
        font-size: 10.5px;
        padding-bottom: 30px;
        padding-top: 10px;
    }
    .introducing-group {
        background: url('../images/img12.jpg') no-repeat left top;
        position: relative;
        height: 59.9375rem;
        background-size: cover;
    }
    .link-introducing{
        padding-right: 12.875rem;
        font-size: 0.7875rem;
    }
    .child-group {
        background: url('../images/img13.jpg') no-repeat left top;
        position: relative;
        height: 88.1875rem;
        background-size: cover;
        margin-top: 4.0625rem;
    }
    .btn-brn-child {
        right: 50%;
        left: 50%;
        transform: translate(-50%);
        bottom: 3.45rem;
        width: 36%;
    }
    .txt-emergensy4{
        bottom: -4rem!important;
        padding: 0 10.3125rem 0 12.9375rem;
        font-size: 10.5px;
    }
    .child_group_bottom{
        position: relative;
        height: 60px;
        background: #b29259;
        padding-top: 10px;
    }
	.child_group_bottom .red_note{
		padding: 0px 165px 0 207px;
	}
    .ingredients-group_bottom{
        padding-top: 5.125rem;
        background: #b29259;
    }
    .group4-info li p{
        text-align: left;
    }
    .group6-content2 span{
        display: block;
        margin-top: 15px;
    }
    .txt-limited-bg{
        padding: 0;
    }
}
@media (min-width: 1441px){
    .group2 .commitment-info-txt,
    .commitment-info-txt{
        font-size: 16.5px;
    }
    .commitment-txt{
        font-size: 22.5px;
    }
    .commitment-info li{
        margin-left: 446.391px;
        width: 216px;
    }
    .commitment-title {
        font-size: 24px;
    }
    .group2-content3{
        margin-top: 55px
    }
    .group4-content3{
        font-size: 22.5px;
        margin-top: 250px;
    }
    .group5-content1{
        padding-top: 490px
    }
    .group5-bottom-title{
        margin-top: 90px;
        font-size: 24px;
    }
    .group7,.group6-content1,.group5-bottom-content{
        font-size: 16.5px;
    }
    .group6-content2{
        margin-top: 20px;
        padding-left: 688px;
        width: 361px;
    }
    .group6_2{
        height: 1441px;
        font-size: 16.5px;
    }
    .group6_2 .top_cnt{
        padding-top: 824px;
        padding-left: 345px;
        width: 393px;
    }
    .group6_2 .cnt_w_img{
        width: 366px;
        padding-left: 593px;
        padding-top: 32px;
    }
    .group7{
        height: 1087px;
    }
    .group7 .top_cnt{
        width: 382px;
        padding-top: 590px;
        padding-left: 675px;
    }
    .group7-note {
        margin: 166px 208px auto auto;
        font-size: 12px;
    }
    .special-trial-group{
        height: 542px;
        margin-top: 43px;
        margin-left: 217px;
        margin-right: 197px;
    }
    .btn-special-trial{
        bottom: -9px;
        right: auto;
        left: 50%;
        transform: translate(-50%, -50%);;
    }
    .butch_recommend{
        height: 1092px;
        margin-top: 62px;
    }
    .butch_profile{
        width: 434px;
        font-size: 14.7px;
        padding-top: 778px;
        padding-left: 213px;
    }
    .butch_recommend_intro{
        width: 506px;
        height: 642px;
        left: 688px;
        top: 336px;
        padding: 0 44px;
        border-top: 11px solid #014099;
        border-bottom: 11px solid #014099;
    }
    .butch_recommend_intro::before{
        width: 504px;
        height: 108px;
        top: -81px;
    }
    .butch_recommend_intro h2{
        font-size: 29.4px;
        padding-top: 40px;
    }
    .butch_recommend_txt{
        margin-top: 27px;
        padding: 30px 0;
        margin-bottom: 39px;
        font-size: 16.8px;
    }
    .butch_recommend_txt::before,.butch_recommend_txt::after{
        width: 400px;
        height: 10px;
    }
    .butch-group{
        height: 2084px;
    }
    .btn-faq{
        bottom: 66.52px;
        right: 12.9rem;
    }
    .faq_bottom .red_note{
		padding: 0px 165px 0 207px;
    }
    .txt-emergensy2{
        padding: 0px 165px 0 207px;
        bottom: 48px;
        top: 10px;
        font-size: 10.5px;
        padding-bottom: 30px;
        padding-top: 10px;
    }
    .introducing-group{
        height: 959px;
    }
    .link-introducing{
        padding-right: 206px;
        font-size: 12.6px;
    }
    .child-group{
        height: 1411px;
        margin-top: 65px;
    }
    .btn-brn-child{
        right: 203px;
        bottom: 60px;
    }
    
    .txt-emergensy4 {
        bottom: -47px!important;
        padding: 0px 165px 0 207px;
        font-size: 10.5px;
    }
    .commitment-info li{
        width: 240px;
    }
    .group3-ttl-note-pc{
        padding-top: 274px;
        font-size: 22.5px;
    }
    .group3 .commitment-info{
        margin-top: 50.4px;
    }
    .group4-info{
        width: 318px;
        margin-top: 44px;
    }
    .group4-info li{
        margin-bottom: 58px;
    }
    .group5-content1{
        font-size: 22.5px;
    }
    .group4-content2{
        margin-top: 274px;
        margin-right: 172.797px;
        width: 470px;
    }
    .group5-bottom-title{
        margin-top: 122px;
    }
    .ingredients-group_bottom{
        padding-top: 80px;
    }
    .fix_color{
        margin: 0px 165px 0 207px;
    }
}



/* ========== 選べる3本トライアルセット ========== */
#select-set {
    background-color: #fff;
    /* padding-top は削除または調整（タイトル画像上部の余白に依存するため） */
    font-family: 'Hiragino Kaku Gothic ProN', 'メイリオ', sans-serif;
}

.select-set-bg {
    background-color: #faf9f6; /* ここで背景色を設定 */
    padding-bottom: 80px;

    /* * 【補足】
     * もし画像の上半分（「選べる〜」の文字の裏）も透過になっており、
     * 上半分を白、下半分を #faf9f6 にしたい場合は、上記を消して
     * 以下のグラデーション指定を有効にしてください。
     * background: linear-gradient(to bottom, #ffffff 50%, #faf9f6 50%);
     */
}

.select-set-title {
    position: relative; /* テキスト絶対配置の基準点 */
    text-align: center;
}

.select-set-title img {
    margin: 0 auto;
    width: 100%;
    max-width: 1440px;
    display: block; /* 画像下の不要な隙間を消す */
}

/* 画像の上に重ねるテキスト */
.select-set-lead {
    position: absolute;
    width: 100%;
    /* 画像の高さに対するパーセントで位置を指定するとレスポンシブで崩れません */
    bottom: 25%; /* ※実際の画像の余白に合わせて数値を調整してください */
    left: 50%;
    transform: translateX(-50%);
    font-size: 16px;
    font-weight: bold;
    color: #555; /* デザインに合わせて色を調整 */
    margin: 0;
    line-height: 1;
}

.select-set-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 15px;
}
.subtitle {
    text-align: center;
    padding: 60px 0 30px;
}
.subtitle img {
    margin: 0 auto;
    max-width: 300px; /* 画像サイズに合わせて調整 */
}

/* おすすめセットのリスト */
.recommend-list {
    display: flex;
    justify-content: space-between; /* 変更：center から space-between にして両端揃えに */
    /* gap: 40px; ← これは削除またはコメントアウトします */
    margin-bottom: 60px;
    margin-top: 40px;
}

/* 枠全体は画像より広くする */
.recommend-list li {
    width: 31%; /* 変更：固定値(380px)から％にすることで、コンテナ内で均等に伸び縮みします */
    max-width: 380px; /* 380px以上には広がらないように制限 */
    position: relative;
    box-sizing: border-box;
}

/* 画像エリアのみ305pxにして中央寄せ */
.item-img {
    width: 100%;
    max-width: 305px; /* 画像は305pxで固定 */
    margin: 0 auto;
    position: relative; /* バッジの基準位置にするため追加 */
}
.item-img img {
    width: 100%;
    display: block;
}

/* バッジの位置微調整 */
.badge-popular {
    position: absolute;
    top: -5px; /* お好みで微調整 */
    left: -10px;
    background-color: #4c8a3c;
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* テキストとラベルは左寄せに（ご提示いただいた画像合わせ） */
.item-name {
    font-weight: bold;
    font-size: 18px;
    margin: 25px 0 10px;
    padding: 0 12px;
    text-align: left; /* centerからleftに変更 */
}
.item-labels {
    display: flex;
    justify-content: flex-start; /* centerからflex-startに変更 */
    align-items: center;
    margin-bottom: 20px;
    padding: 0 12px;
}
.item-labels span {
    display: inline-block;
    padding: 0.5em 1.2em;
    border-radius: 1em;
    font-size: 12px;
    font-weight: normal;
    line-height: 1;
}
.label-black { background-color: #333; color: #fff; border: 1px solid #333; }
.label-white { background-color: #fff; color: #b29259; border: 1px solid #b29259; }
.label-blue { background-color: #4eb7d5; color: #fff; border: 1px solid #4eb7d5; }
.icon-plus {
    width: 12px;
    margin: 0 5px;
}
.btn-cart-set {
    display: block;
    text-align: center;
    transition: opacity 0.3s ease;
}
.btn-cart-set:hover {
    opacity: 0.8;
}
.btn-cart-set img {
    margin: 0 auto;
    width: 100%;
}

/* ========== 自分で選ぶ リストスタイル ========== */
.custom-product-list {
    max-width: 1200px;
    margin: 0 auto 60px;
}
.custom-product-row {
    display: flex;
    align-items: center;
    padding: 30px 0;
    border-bottom: 1px solid #e0e0e0;
}
.custom-product-img {
    width: 270px; /* お好みで305pxに広げてもOKです */
    flex-shrink: 0;
    margin-right: 40px;
}
.custom-product-img img {
    width: 100%;
}
.custom-product-info {
    flex-grow: 1;
}
.custom-product-name {
    font-weight: bold;
    font-size: 20px;
    color: #333;
    margin-bottom: 8px;
}
.custom-product-desc {
    font-size: 15px;
    color: #666;
    margin: 0;
}

/* 数量増減ステッパー */
.custom-qty-control {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-left: 30px;
    flex-shrink: 0;
}
.custom-qty-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #fff;
    color: #c5bba3;
    border: 2px solid #c5bba3;
    font-size: 26px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    line-height: 1;
    transition: all 0.3s ease;
}
/* ＋ボタン、または選択時の－ボタンのスタイル */
.custom-qty-btn.is-active {
    background-color: #a69876;
    border-color: #a69876;
    color: #fff;
}
.custom-qty-value {
    font-size: 24px;
    font-weight: bold;
    width: 30px;
    text-align: center;
}

/* カートボタン・吹き出しエリア */
.custom-cart-area {
    text-align: center;
    margin-top: 50px;
}
.custom-fukidashi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 54px;
    background-size: contain;
    background-position: center bottom;
    background-repeat: no-repeat;
    color: #fff;
    font-size: 18px;
    font-weight: normal;
    margin-bottom: -10px; /* ボタン画像に少し被せるためのマイナス値 */
    position: relative;
    z-index: 2;
    padding-bottom: 4px; /* 吹き出しの尻尾分、文字を上にずらす */
}
/* 吹き出し画像の切り替え */
.custom-fukidashi.type-red {
    background-image: url('../images/fukidashi_red.png');
}
.custom-fukidashi.type-brown {
    background-image: url('../images/fukidashi_brown.png');
}

.custom-cart-link {
    display: block;
    max-width: 420px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    transition: opacity 0.3s;
}
.custom-cart-link:hover {
    opacity: 0.8;
}
.custom-cart-link.disable {
    pointer-events: none; /* 非アクティブ時はクリックできないようにする */
}
.custom-cart-link img {
    width: 100%;
    display: block;
}

/* ========== 価格・注意書きバナー ========== */
.price-banner-box {
    position: relative;
    max-width: 650px; /* 画像の実際の幅に合わせて調整してください */
    margin: 50px auto 30px;
    text-align: center;
}
.price-banner-box img {
    width: 100%;
    display: block;
}

/* 画像の上に重ねるテキスト */
.notice-notes {
    position: absolute;
    width: 80%; /* 幅を絞ってテキストを中央に寄せる */
    bottom: 12%; /* 画像の下からの位置。余白に合わせて％を微調整してください */
    left: 50%;
    transform: translateX(-50%);
    font-size: 13px;
    color: #555;
    line-height: 1.6;
    text-align: left; /* 「※」を縦に揃えるために左揃え */
}
.notice-notes p {
    margin: 0;
}