/*------------------------------------------------------------
	LALA Leafy
------------------------------------------------------------*/

.spOnly {
    display: none;
}

.mainVisual {
    overflow: hidden;
    /*margin-bottom: 1%;*/
}

.mainVisual h2 {
    width: 50%;
    background: url(../img/leafy/leafy01_01_2607.jpg)no-repeat;
    height: 0;
    padding-top: 46.852%;
    background-size: contain;
    position: relative;
    float: left;
}

.mainVisualTxt {
text-align: center;
    position: absolute;
    top: 51%;
    width: 70%;
    font-weight: normal;
    line-height: 1.8;
    left: 19%;
    font-size: 2vw;
    font-family: serif;
    font-weight: bold;
}

.mainVisualTxt span {
    display: block;
    font-size: 1vw;
}

.mainVisual .topImage {
    width: 50%;
    background: url(../img/leafy/leafy01_02_2607.jpg)no-repeat;
    height: 0;
    padding-top: 46.978%;
    background-size: contain;
    float: left;
    text-indent: -9999px;
}

.mainVisual .topImage img {
    width: 100%;
}


/*proCare*/

.proCare {
    overflow: hidden;
    margin-bottom: 3%;
}

.proCare .leftSide {
    width: 50%;
    background: url(../img/leafy/leafy02.jpg)no-repeat;
    height: 0;
    padding-top: 62.978%;
    background-size: contain;
    float: left;
    text-indent: -9999px;
    box-sizing: border-box;
}

.proCare .rightSide {
    width: 46%;
    float: left;
    box-sizing: border-box;
    padding-top: 9%;
}

.rightSide>img {
    width: 100%;
}

.proCare .rightSide li {
    background: #edf4fa;
    display: block;
    margin-bottom: 3%;
    padding: 1% 2%;
    font-size: 1rem;
}

.proCare .rightSide li img {
    display: block;
    margin-bottom: 1%;
}

.proCare .rightSide p {
    font-size: 1.2rem;
    margin: 2% 0;
}


/*steps*/

.steps {
    padding: 0 2%;
    overflow: hidden;
    display:-webkit-box;
    display:-moz-box;
    display:-ms-box;
    display:-webkit-flexbox;
    display:-moz-flexbox;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:-ms-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
}

.step01,
.step02 {
    width: 48%;
    float: left;
    box-sizing: border-box;
    background: #2b2b2b;
    color: #fff;
    padding: 2%;
    margin: 0 1%;
}

.step01 p,
.step02 p {
    font-size: 1.6rem;
}

.step01 p .colorBlue,
.step02 p .colorBlue {
    color: #9ffBF3;
    margin-left: 4%;
}

.step01 .stepTxt,
.step02 .stepTxt {
    display: block;
    font-size: 1.2rem;
}

.step02 .stepImg img {
        padding-bottom: 9%;
    }



/*stepFlow*/

.stepFlow {
    overflow: hidden;
    clear: both;
    width: 95%;
    margin: 0 auto;
}

.stepFlowTxt {
    margin: 3% 0 1%;
    font-size: 1.5rem;
}

.stepFlow ul {
    width: 100%;
    display: table;
}

.stepFlow li {
    display: table-cell;
    vertical-align: middle;
    padding-left: 1%;
    text-align: center;
    padding: 0.5% 0;
}

.triangleBlack {
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 7px 0 7px 14px;
    border-color: transparent transparent transparent #231815;
}

.bgColorB {
    background: #edf4fa;
}


/*leafyGoods*/

.leafyGoods {
    margin-top: 5%;
}

.leafyLine {
    overflow: hidden;
    border: 1px solid #d6d6d6;
    padding: 3%;
}

.leafyGoods .leftSide {
    width: 15%;
    box-sizing: border-box;
    float: left;
}

.leafyGoods .leftSide img {
    width: 50%;
}

.leafyGoods .rightSide {
    width: 80%;
    box-sizing: border-box;
    float: left;
    padding-top: 2.5%;
}

.leafyGoods .rightSide h3 {
    font-size: 1.5rem;
}
.leafyGoods .rightSide .greenColor {
display: block;
    font-size: 1.3rem;
    color: #70890d;
    margin: 1% 0;
}
.leafyGoods .rightSide p {
font-size: 1rem;
    line-height: 1.7;
    }
.leafyGoods .triangleImg {
    display: block;
    clear: both;
    margin: 0 auto;
    width: 7%;
    padding: 5% 0;
}


/*ラインナップカルーセル*/

#main .arrivalBox {
    padding: 100px 0 96px;
    margin: 0 auto;
    width: 68%;
}

#main .arrivalBox .infoBox {
    margin: 0 auto;
    position: relative;
    width: 100%;
}

#main .arrivalBox .infoBox .prev {
    cursor: pointer;
    position: absolute;
    left: -30px;
    top: 31%;
}

#main .arrivalBox .infoBox .next {
    cursor: pointer;
    position: absolute;
    right: -30px;
    top: 31%;
}

#main .arrivalBox .infoBox .prev:hover,
#main .arrivalBox .infoBox .next:hover {
    filter: alpha(opacity=70);
    opacity: 0.7;
}

#main .arrivalBox h2 {
    margin-bottom: 41px;
    text-align: center;
}

#main .arrivalBox .listUl {
    overflow: hidden;
    text-align: center;
}

#main .arrivalBox .listUl li {
    padding: 0 0 5% 0;
    width: 24%;
    display: inline-block;
    box-sizing: border-box;
}

#main .arrivalBox .listUl li img {
    width: 80%;
    margin: 3% auto;
}

#main .arrivalBox .listUl li .title {
    margin-bottom: 7px;
    display: block;
    color: #ef7a00;
    font-size: 16px;
}

#main .arrivalBox .listUl li .color01 {
    color: #ed6c67;
}

#main .arrivalBox .listUl li .color02 {
    color: #daaa7e;
}

#main .arrivalBox .listUl li .color03 {
    color: #000;
}

#main .arrivalBox .listUl li .color04 {
    color: #de0017;
}

#main .arrivalBox .listUl li .color05 {
    color: #a9caf2;
}

#main .arrivalBox .listUl li .color06 {
    color: #7d782e;
}

.arrivalBox h3 {
    text-align: center;
    margin-bottom: 6%;
}


/*moreボタン*/

.infoBox li a {
    display: block;
}

#main .infoBox .listUl a:hover img {
    filter: alpha(opacity=70);
    opacity: 0.7;
}

@media all and (max-width:1260px) {
    .mainVisualTxt {
        font-size: 0.8rem;
    }
    .step01 .stepImg img,
    .step02 .stepImg img {
        width: 100%;
    }
    
    .step01 p, .step02 p {
    font-size: 1.4rem;
}
    .step01 .stepTxt, .step02 .stepTxt {
    font-size: 1rem;
}
    .step01 .stepTxt {
     margin-top: 11%;
    }
}
@media all and (max-width:767px) {
    .pcOnly {
        display: none;
    }
    .spOnly {
        display: block;
    }
    /*メインビジュアル*/
    .mainVisual h2 {
        width: 73%;
    padding-top: 62%;
    float: none;
    background-size: contain;
    margin: 0 auto;
    }
    .mainVisualTxt {
        width: 100%;
        font-size: 4vw;
        top: 60%;
        left: 0;
    }
    .mainVisualTxt span {
    font-size: 2vw;
}
    .mainVisual .topImage {
        width: 100%;
        padding-top: 84%;
    }
    
    /*proCare*/
    
    .proCare .leftSide {
        width: 100%;
        background-position: 50%;
    }
    .proCare .rightSide {
    width: 95%;
    float: none;
    margin: 0 auto;
}
    .proCare .rightSide li {
        font-size: 0.8rem;
    }
    .proCare .rightSide li img.pcOnly {
        display: none;
    }
    .proCare .rightSide li .spOnly {
        font-size: 1.3rem;
    }
   /*steps*/
    .step01, .step02 {
        width: 95%;
    float: none;
    margin: 0 auto 2%;
    }
    .step01 .stepImg img,
.step02 .stepImg img {
    width: 100%;
}
    .step01 p, .step02 p {
        font-size: 1.2rem;
    }
    /*stepFlow*/
    
    .stepFlow li {
        display: block;
        font-size: 1rem;
    }
    .triangleBlack {
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 5px 0 5px;
    border-color: #231815 transparent transparent transparent;
}
    .bgColorB {
    padding: 16px 0!important;
}
    
    /*leafyGoods*/
    
    .leafyGoods .leftSide {
    width: 47%;
    float: none;
    margin: 0 auto;
    text-align: center;
}
    .leafyGoods .rightSide {
    width: 94%;
    float: none;
    margin: 0 auto;
}
    .leafyGoods .rightSide .greenColor {
        font-size: 1rem;
    }
   
    .leafyGoods .rightSide h3 {
    font-size: 1.3rem;
}
    
    /*ラインナップカルーセル*/
    #main .arrivalBox {
        padding: 8.5% 0;
        width: 85%;
    }
    #main .arrivalBox h2 {
        margin-bottom: 12px;
    }
    #main .arrivalBox h2 img {
        margin: 0 auto;
        width: 70px;
    }
    #main .arrivalBox .listUl li {
        padding: 0 5px;
        width: 46%;
    }
    #main .arrivalBox .listUl li img {
        margin-bottom: 6px;
    }
    #main .arrivalBox .listUl li span {
        display: inline-block;
        font-size: 10px;
        line-height: 1.3;
    }
    #main .arrivalBox .listUl li .title {
        margin-bottom: 4px;
        font-size: 12px;
        line-height: 1.3;
    }
    #main .arrivalBox .infoBox .prev {
        left: -15px;
    }
    #main .arrivalBox .infoBox .prev img {
        width: 10px;
    }
    #main .arrivalBox .infoBox .next {
        right: -15px;
    }
    #main .arrivalBox .infoBox .next img {
        width: 10px;
    }
    #main .arrivalBox .infoBox .prev:hover,
    #main .arrivalBox .infoBox .next:hover {
        filter: alpha(opacity=100);
        opacity: 1;
    }
    #main .arrivalBox h3 img {
        width: 100%;
    }
    #main .arrivalBox h3 img {
        width: 35%;
    }
    /*moreボタン*/
    #main .arrivalBox .listUl li .moreBtn {
        width: 80%;
        display: block;
        margin: 0 auto;
    }
}

@media all and (max-width:420px) {
    .mainVisualTxt {
        font-size: 11px;
        line-height: 1.5;
    }
}

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