/* css pc */

main {
    overflow: hidden;
}

a,
a:hover {
    text-decoration: none !important;
}

.ico-leaf_s {
    width: 60px;
}

.ico-leaf_l {
    width: 280px;
}

.sec-mv {
    width: 100%;
    background-color: #fdf4e3;

    & img {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    }
}

.sec-lead {
    width: 100%;
    border-bottom: solid 1px #ccc;
    margin-bottom: 80px;

    & .lead-box {
      width: 900px;
      margin: 80px auto;
      text-align: center;
      font: 600 16px / 1.7em "Noto Sans JP", sans-serif;
    }
}
.sec-lineup {
    width: 700px;
    margin: 0 auto 100px;
    text-align: center;

    & .lineup-box {
        position: relative;
        margin: 28px 0 60px;
        padding: 40px 60px 0;
        border: solid 1px #333;
    }

    & h2 {
        position: absolute;
        display: inline-block;
        top: -13px;
        left: 50%;
        transform: translateX(-50%);
        padding: 0 9px;
        line-height: 1;
        background: #FFF;
        font-size: 20px;
    }

    & ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    & li {
        flex: 0 0 calc(100% / 3 - 20px);
        font: 500 12px / 1.4em "Noto Sans JP", sans-serif;
        margin-bottom: 40px;
    }

    & .link-btn {
        font: 700 14px / 1.4em "Noto Sans JP", sans-serif;
        border: 1px solid #000;
        padding: 10px 0px;
        margin: 8px auto 100px;
        text-align: center;
        width: 300px;
        background: #fff;
    }
}

.sec-styling {
    border-bottom: 1px solid #ccc;
    margin-bottom: 100px;
}

.styling-cont {
    width: 1200px;
    margin: 0 auto 200px;
    position: relative;
    z-index: 0;

    & .styling-inner {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 40px;
    }
    
    & .styling-inner-left {
        margin: 0 40px 0 100px;
    }

    & .styling-inner-right {
        width: 700px;
    }

    & .styling-txtbox {
        width: 500px;
        margin-bottom: 40px;
    }

    & .styling-name {
        font: 700 22px / 1.4em "Noto Sans JP", sans-serif;
        margin-bottom: 10px;
        padding: 0;
    }

    & .styling-no {
        font: 400 12px / 1.4em "Noto Sans JP", sans-serif;
    }

    & .styling-price {
        font: 700 24px / 1.4em "Noto Sans JP", sans-serif;
        margin-bottom: 20px;
    }

    & .ico-subttl {
        width: 300px;
    }

    & .styling-subttl {
        font: 600 16px / 1.4em "Noto Sans JP", sans-serif;
        color: #3e3894;
        margin-bottom: 16px;
    }

    & .styling-txt {
        line-height: 1.8em;
    }

    & .styling-slider {
        width: 700px;
    }

    & .styling-btn {
        font: 700 14px / 1.4em "Noto Sans JP", sans-serif;
        border: 1px solid #000;
        padding: 10px 0px;
        margin: 8px auto 80px;
        text-align: center;
        width: 300px;
        background: #fff;
    }

    &:after {
        content: '';
        position: absolute;
        left: 200px;
        bottom: -40px;
        width: 1000px;
        height: 520px;
        background: #efebf8;
        z-index: -1;
    }

}

#styling02,
#styling04,
#styling06 {
    & .styling-inner {
        flex-direction:row-reverse;
    }

    & .styling-inner-left {
        margin: 0 100px 0 40px;
    }

    & .styling-txtbox {
        margin-left: 200px;
    }

    & .styling-subttl {
        color: #904f0f;
    }

    &:after {
        background: #FDF5E3;
        left: 0;
        right: 400px;
    }
}

#styling05 .styling-slider {
        width: 1100px;
        margin: 0 auto 0 100px;
}

#styling05:after {
        height: 840px;
}
.sec-ttl {
    margin: 0 auto 80px;
    text-align: center;
}

.sec-itemlist {
    margin: 0 auto 80px;
    text-align: center;
}
.itemlist {
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
    text-align: left;

    & ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    & li {
        flex: 0 0 calc(100% / 3 - 20px);
    }

    & img {
        margin-bottom: 10px;
    }
    & .item-no {
        text-align: right;
        font: 400 12px / 1.4em "Noto Sans JP", sans-serif;
    }
    & .item-price {
        text-align: right;
        font: 700 20px / 1.4em "Noto Sans JP", sans-serif;
    }
    & .item-btn {
        text-align: center;
        font: 700 14px / 1.4em "Noto Sans JP", sans-serif;
        border: 1px solid #000;
        padding: 10px 0px;
        margin: 8px auto 80px;
    }
    & a:hover {
        text-decoration: none;
    }
}
.sec-bottom {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;

    & .btn-3col ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
    }

    & .btn-3col li {
        flex: 0 0 calc(100% / 3 - 20px);
    }

    & .btn-3col div {
        font: 700 16px / 1.4em "Noto Sans JP", sans-serif;
        border: 1px solid #241754;
        margin: 8px auto 40px;
        text-align: center;
        width: 290px;
        height: 60px;
        background: #fff;
        color: #241754;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
    }

    & .btn-3col div img {
        width: 60px;
        margin: 0 10px 0 -20px;
    }


    & .btn-1col p {
        font: 600 16px / 1.4em "Noto Sans JP", sans-serif;
        padding: 14px 0px;
        margin: 0 auto 100px;
        text-align: center;
        width: 400px;
        background: #241754;
        color: #fff;
    }
}

.fadeIn {
    opacity: 0;
    transform: translate(0, 2.5rem);
    transition: all 1s ease-out;
 }

.fadeView {
    opacity: 0;
    transition: 2s;
}

.fadeView.is-show {
    opacity: 1;
}

/*css tb*/

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

    .sec-lead {
        width: 100%;
        border-bottom: solid 1px #ccc;
        margin-bottom: 80px;
    
        & .lead-box {
          max-width: 900px;
          width: 100%;
          margin: 80px auto;
          text-align: center;
          font: 600 16px / 1.7em "Noto Sans JP", sans-serif;
        }
    }


    .sec-styling {
        border-bottom: 1px solid #ccc;
        margin-bottom: 100px;
    }

    .styling-cont {
        width: 100%;
        margin: 0 auto 200px;
        position: relative;
        z-index: 0;

        & .styling-inner {
            display: block;
            margin-bottom: 40px;
        }
        
        & .styling-inner-left {
            margin: 0 auto;

            & img {
            margin: 0 auto 40px;
            width: 80%;
            max-width: 400px;
            }

        }

        & .styling-inner-right {
            margin: 0 auto;
            width: 100%;
        }

        & .styling-txtbox {
            width: 90%;
            margin: 0 auto 20px;
        }

        & .styling-name {
            font: 700 22px / 1.4em "Noto Sans JP", sans-serif;
            margin-bottom: 10px;
            padding: 0;
        }

        & .styling-no {
            font: 400 12px / 1.4em "Noto Sans JP", sans-serif;
        }

        & .styling-price {
            font: 700 24px / 1.4em "Noto Sans JP", sans-serif;
            margin-bottom: 20px;
        }

        & .ico-subttl {
            width: 300px;
        }

        & .styling-subttl {
            font: 600 16px / 1.4em "Noto Sans JP", sans-serif;
            margin-bottom: 16px;
            color: #3e3894;
        }

        & .styling-txt {
            line-height: 1.8em;
            font-size: 16px;
        }

        & .styling-slider {
            width: 100%;
        }

        & .styling-btn {
            font: 700 14px / 1.4em "Noto Sans JP", sans-serif;
            border: 1px solid #000;
            padding: 10px 0;
            margin: 8px auto 80px;
            text-align: center;
            width: 300px;
            background: #fff;
        }

        &:after {
            content: '';
            position: absolute;
            left: 0;
            bottom: -40px;
            width: 100%;
            height: calc(400 * (100vw / 375));
            background: #efebf8;
            z-index: -1;
        }

    }

    #styling02,
    #styling04,
    #styling06 {
        & .styling-inner {
            flex-direction:row-reverse;
        }

        & .styling-inner-left {
            margin: 0 auto;
        }

        & .styling-txtbox {
            margin: 0 auto calc(20 * (100vw / 375));
        }

        & .styling-subttl {
            color: #904f0f;
        }

        &:after {
            background: #FDF5E3;
            left: 0;
            right: 0;
        }
    }

    #styling05 .styling-slider {
            width: 100%;
            margin: 0 auto;
    }

    #styling05:after {
            height: calc(560 * (100vw / 375));
    }

    .sec-itemlist {
            padding: 0 30px;
    }

    .sec-bottom {

        & .btn-3col ul {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 0 20px;
            margin-bottom: 30px;
        }
    
        & .btn-3col li {
            flex: 0 0 calc(100% / 3 - 20px);
        }

        & .btn-3col div {
                    margin: 8px auto 10px;
        }
    }
}

/*css sp*/

@media screen and (min-width: 768px) {
    .sp {
        display: none;
    }
}
@media screen and (max-width: 767px) {

    .pc {
        display: none;
    }

    main {
        overflow: hidden;
    }

    .ico-leaf_s {
        width: calc(40 * (100vw / 375));
    }

    .ico-leaf_l {
        width: calc(200 * (100vw / 375));
    }

    .sec-mv {
        width: 100%;
        background-color: #fdf4e3;

        & img {
        max-width: 100%;
        margin: 0 auto;
        }
    }

    .sec-lead {
        width: 100%;
        border-bottom: solid 1px #ccc;
        margin-bottom: calc(80 * (100vw / 375));

        & .lead-box {
        width: 90%;
        margin: calc(40 * (100vw / 375)) auto;
        text-align: center;
        line-height: 1.7em;
        font: 600 calc(14 * (100vw / 375)) / 1.4em "Noto Sans JP", sans-serif;
        }
    }

    .sec-lineup {
        width: 90%;
        margin: 0 auto calc(100 * (100vw / 375));
        text-align: center;

        & .lineup-box {
            position: relative;
            margin: calc(28 * (100vw / 375)) 0 calc(50 * (100vw / 375));
            padding: calc(20 * (100vw / 375)) calc(10 * (100vw / 375)) 0;
            border: solid 1px #333;
        }

        & h2 {
            position: absolute;
            display: inline-block;
            top: -13px;
            left: 50%;
            transform: translateX(-50%);
            padding: 0 calc(9 * (100vw / 375));
            line-height: 1;
            background: #FFF;
            font-size: calc(20 * (100vw / 375));
        }

        & ul {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        & li {
            flex: 0 0 calc(100% / 3 - calc(20 * (100vw / 375)));
            font-size: calc(12 * (100vw / 375));
            margin: 0 auto calc(40 * (100vw / 375));
        }

        & .link-btn {
            font: 700 calc(14 * (100vw / 375)) / 1.4em "Noto Sans JP", sans-serif;
            border: 1px solid #000;
            padding: calc(10 * (100vw / 375)) 0px;
            margin: 8px auto calc(80 * (100vw / 375));
            text-align: center;
            width: calc(300 * (100vw / 375));
            background: #fff;
        }
    }

    .sec-styling {
        border-bottom: 1px solid #ccc;
        margin-bottom: calc(60 * (100vw / 375));
    }

    .styling-cont {
        width: 100%;
        margin: 0 auto calc(120 * (100vw / 375));
        position: relative;
        z-index: 0;

        & .styling-inner {
            display: block;
            margin-bottom: calc(40 * (100vw / 375));
        }
        
        & .styling-inner-left {
            margin: 0 auto;

            & img {
            margin: 0 auto calc(20 * (100vw / 375));
            width: 80%;
            }

        }

        & .styling-inner-right {
            margin: 0 auto;
            width: 100%;
        }

        & .styling-txtbox {
            width: 90%;
            margin: 0 auto calc(20 * (100vw / 375));
        }

        & .styling-name {
            font: 700 calc(22 * (100vw / 375)) / 1.4em "Noto Sans JP", sans-serif;
            margin-bottom: calc(10 * (100vw / 375));
            padding: 0;
        }

        & .styling-no {
            font-size: calc(12 * (100vw / 375));
        }

        & .styling-price {
            font: 700 calc(24 * (100vw / 375)) / 1.4em "Noto Sans JP", sans-serif;
            margin-bottom: calc(20 * (100vw / 375));
        }

        & .ico-subttl {
            width: calc(300 * (100vw / 375));
        }

        & .styling-subttl {
            font: 600 calc(16 * (100vw / 375)) / 1.4em "Noto Sans JP", sans-serif;
            margin-bottom: calc(20 * (100vw / 375));
            color: #3e3894;
        }

        & .styling-txt {
            line-height: 1.8em;
        }

        & .styling-slider {
            width: 100%;
        }

        & .styling-btn {
            font: 700 calc(14 * (100vw / 375)) / 1.4em "Noto Sans JP", sans-serif;
            border: 1px solid #000;
            padding: calc(10 * (100vw / 375)) 0px;
            margin: 8px auto calc(80 * (100vw / 375));
            text-align: center;
            width: calc(300 * (100vw / 375));
            background: #fff;
        }

        &:after {
            content: '';
            position: absolute;
            left: 0;
            bottom: -40px;
            width: 100%;
            height: calc(770 * (100vw / 375));
            background: #efebf8;
            z-index: -1;
        }

    }

    #styling02,
    #styling04,
    #styling06 {
        & .styling-inner {
            flex-direction:row-reverse;
        }

        & .styling-inner-left {
            margin: 0 auto;
        }

        & .styling-txtbox {
            margin: 0 auto calc(20 * (100vw / 375));
        }

        & .styling-subttl {
            color: #904f0f;
        }

        &:after {
            background: #FDF5E3;
            left: 0;
            right: 0;
        }
    }

    #styling05 .styling-slider {
            width: 100%;
            margin: 0 auto;
    }

    #styling05:after {
            height: calc(1250 * (100vw / 375));
    }

    .sec-ttl {
        margin: 0 auto calc(40 * (100vw / 375));
        text-align: center;
    }

    .sec-itemlist {
        margin: 0 auto calc(80 * (100vw / 375));
        text-align: center;
    }

    .itemlist {
        width: 90%;
        margin: 0 auto;
        text-align: left;

        & ul {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        & li {
            flex: 0 0 calc(100% / 3 - calc(4 * (100vw / 375)));
            height: calc(330 * (100vw / 375));
            position: relative;
        }

        & img {
            margin-bottom: calc(10 * (100vw / 375));
        }
        & .item-no {
            text-align: right;
            font-size: calc(10 * (100vw / 375));
        }
        & .item-price {
            text-align: right;
            font: 700 calc(14 * (100vw / 375)) / 1.4em "Noto Sans JP", sans-serif;
        }
        & .item-btn {
            text-align: center;
            font: 700 calc(12 * (100vw / 375)) / 1.4em "Noto Sans JP", sans-serif;
            border: 1px solid #000;
            padding: calc(8 * (100vw / 375)) 0px;
            margin: calc(8 * (100vw / 375)) auto calc(40 * (100vw / 375));
            position: absolute;
            width: 100%;
            bottom: 0;
        }
        & a:hover {
            text-decoration: none;
        }
    }

    .sec-bottom {
        width: 70%;
        margin: 0 auto;
        text-align: center;

        & .btn-3col ul {
            display: block;
        }

        & .btn-3col li {
            flex: 0 0 calc(100% / 3 - calc(20 * (100vw / 375)));
        }

        & .btn-3col div {
            font: 700 calc(14 * (100vw / 375)) / 1.4em "Noto Sans JP", sans-serif;
            border: 1px solid #241754;
            margin: calc(8 * (100vw / 375)) auto calc(10 * (100vw / 375));
            text-align: center;
            width: 100%;
            background: #fff;
            color: #241754;
        }

        & .btn-3col div img {
            width: calc(50 * (100vw / 375));
            margin: 0 calc(10 * (100vw / 375)) 0 calc(-20 * (100vw / 375));
        }

        & .btn-1col p {
            font: 600 calc(14 * (100vw / 375)) / 1.4em "Noto Sans JP", sans-serif;
            padding: calc(14 * (100vw / 375)) 0;
            margin: 0 auto calc(100 * (100vw / 375));
            text-align: center;
            width: 100%;
            background: #241754;
            color: #fff;
        }
    }

    .fadeIn {
        opacity: 0;
        transform: translate(0, 2.5rem);
        transition: all 1s ease-out;
    }

    .fadeView {
        opacity: 0;
        transition: 2s;
    }

    .fadeView.is-show {
        opacity: 1;
    }

}