.wrapper {
    width: 100vw;
    margin: 0;
    padding: 0
}

.container {
    width: 100%;
    max-width: none;
    padding-left: 0;
    padding-right: 0
}

@media(max-width: 768px) {
    .wrapper {
        width: initial;
        margin: initial
    }

    .container {
        width: initial;
        max-width: initial
    }
}

#knit-365 {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: #1a1a1a;
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "MS PGothic", sans-serif;
    font-size: 16px;
    margin: 0;
    padding: 0
}

#knit-365 p {
    margin: 0
}

#knit-365 a {
    text-decoration: none;
    display: block;
}

#knit-365 em {
    font-style: normal;
    margin: 0
}

#knit-365 img {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0
}

#knit-365 ul {
    margin: 0
}

#knit-365 ul li {
    list-style: none;
}

#knit-365 .pc {
    display: block
}

#knit-365 .sp {
    display: none
}

#knit-365 .ttl-area {
    text-align: center;
    margin-bottom: 46px
}

#knit-365 .ttl-area span {
    display: block;
    margin-bottom: 16px
}

#knit-365 .ttl-area h2 {
    font-weight: 600;
    font-size: 40px
}

#knit-365 .kv-area {
    width: 100%;
    margin: 0 auto
}

#knit-365 .nav-area {
    width: 772px;
    margin: 62px auto 156px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 52px
}

#knit-365 .nav-area div {
    width: calc((100% - 52px)/2);
    position: relative
}

#knit-365 .nav-area div::before {
    position: absolute;
    content: "";
    background-image: url(../_img/250905/nav-arrow.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 56px;
    height: 26px;
    left: 50%;
    transform: translateX(-50%);
    bottom: -30%;
    transition: all .4s
}

#knit-365 .nav-area div a {
    padding: 39px 10px;
    background-color: #6a5d50;
    transition: all .4s
}

#knit-365 .nav-area div a p {
    text-align: center;
    font-weight: 600;
    font-size: 24px;
    color: #fff
}

#knit-365 .nav-area div:hover::before {
    bottom: -40%
}

#knit-365 .nav-area div:hover a {
    background-color: #e0ddd9
}

#knit-365 .nav-area div:hover a p {
    color: #6a5d50
}

#knit-365 .lead-area {
    width: 1200px;
    margin: 0 auto;
    text-align: center
}

#knit-365 .lead-area h1 {
    font-weight: 600;
    font-size: 40px;
    line-height: 171%;
    margin-bottom: 52px
}

#knit-365 .lead-area p {
    font-size: 17px;
    line-height: 235%
}

#knit-365 .about-knit365-area {
    margin-top: 118px;
    background-color: #e0ddd9;
    position: relative
}

#knit-365 .about-knit365-area::before {
    position: absolute;
    content: "";
    background-image: url(../_img/250905/text-365knit.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 593px;
    height: 137px;
    right: 0;
    top: -128px
}

#knit-365 .about-knit365-area .about-knit365-area__wrap {
    width: 1000px;
    margin: 0 auto;
    padding: 86px 0
}

#knit-365 .about-knit365-area .about-knit365-area__wrap .ttl-area span {
    margin: 0 auto 16px;
    width: 211px;
    height: auto
}

#knit-365 .about-knit365-area .about-knit365-area__wrap .content .content__wrap .point {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 35px;
    margin-bottom: 45px
}

#knit-365 .about-knit365-area .about-knit365-area__wrap .content .content__wrap .point.point__reverse {
    flex-direction: row-reverse
}

#knit-365 .about-knit365-area .about-knit365-area__wrap .content .content__wrap .point .point-img {
    width: calc((100% - 35px)/2);
    height: auto
}

#knit-365 .about-knit365-area .about-knit365-area__wrap .content .content__wrap .point .point-text {
    width: calc((100% - 35px)/2)
}

#knit-365 .about-knit365-area .about-knit365-area__wrap .content .point:not(:last-of-type) {
    margin-bottom: 45px
}

#knit-365 .about-knit365-area .about-knit365-area__wrap .content .point .point-text img {
    height: min(100%, 16px);
    width: auto;
    margin-bottom: 18px
}

#knit-365 .about-knit365-area .about-knit365-area__wrap .content .point .point-text p:first-of-type {
    line-height: 100%;
    font-weight: 600;
    font-size: 22px;
    color: #6a5d50;
    padding-bottom: 16px;
    margin-bottom: 14px;
    border-bottom: 1px solid #6a5d50
}

#knit-365 .about-knit365-area .about-knit365-area__wrap .content .point .point-text p:nth-of-type(2) {
    line-height: 150%;
    font-size: 14px;
    margin-top: 6px
}

#knit-365 .about-knit365-area .about-knit365-area__wrap .content .point .point-text p.point-att {
    font-size: 12px;
    margin-top: 6px
}

#knit-365 .lineup-area {
    width: 1000px;
    margin: 86px auto 127px
}

#knit-365 .lineup-area .lineup-area__wrap .ttl-area span {
    width: 69px;
    margin: 0 auto 13px
}

#knit-365 .lineup-area .lineup-area__wrap .lineup-area__inner {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 26px
}

#knit-365 .lineup-area .lineup-area__wrap .lineup-area__inner div {
    width: calc((100% - 52px)/3)
}

#knit-365 .lineup-area .lineup-area__wrap .lineup-area__inner .new {
    position: relative;
}

#knit-365 .lineup-area .lineup-area__wrap .lineup-area__inner .new::before {
    position: absolute;
    content: "";
    background: url(../_img/260904/icon_new.svg) center / contain no-repeat;
    aspect-ratio: 1;
    width: 62px;
    inset: -12px auto auto -12px;
}

#knit-365 .lineup-area .lineup-area__wrap .lineup-area__inner div a {
    padding: 20px 10px;
    border: 2px solid #6a5d50;
    background-color: #fff;
    transition: all .4s
}

#knit-365 .lineup-area .lineup-area__wrap .lineup-area__inner div a p {
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    color: #6a5d50;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative
}

#knit-365 .lineup-area .lineup-area__wrap .lineup-area__inner div a p::before {
    position: absolute;
    content: "";
    background-image: url(../_img/250905/lineup-nav-arrow.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 24px;
    height: 24px;
    right: 10px
}

#knit-365 .lineup-area .lineup-area__wrap .lineup-area__inner div:hover a {
    background-color: #e0ddd9
}

#knit-365 .detail-area {
    width: 1200px;
    margin: 0 auto 120px
}

#knit-365 .detail-area .content:not(:first-of-type) {
    margin-top: 130px
}

#knit-365 .detail-area .content .content__wrap {
    position: relative;
    margin-bottom: 80px
}

#knit-365 .detail-area .content .content__wrap::before {
    position: absolute;
    content: "";
    background-color: #e0ddd9;
    width: 320px;
    height: 288px
}

#knit-365 .detail-area .content .content__wrap .content__main-img {
    width: min(100%, 696px);
    height: auto;
    position: absolute
}

#knit-365 .detail-area .content .content__wrap .content__text {
    width: min(100%, 465px);
    position: absolute
}

#knit-365 .detail-area .content .content__wrap .content__text p:first-of-type {
    font-weight: 600;
    font-size: 30px;
    line-height: 100%;
    margin-bottom: 18px;
    color: #6a5d50
}

#knit-365 .detail-area .content .content__wrap .content__text p:last-of-type {
    font-size: 15px;
    line-height: 173%
}

#knit-365 .detail-area .content .content__wrap .content__sub-img {
    position: absolute
}

/* ラインナップレイアウトパターン */
/* パターン1 */
#knit-365 .detail-area .content.layout-pattern01 .content__wrap {
    aspect-ratio: 1200/778
}

#knit-365 .detail-area .content.layout-pattern01 .content__wrap::before {
    right: 272px;
    bottom: 162px
}

#knit-365 .detail-area .content.layout-pattern01 .content__wrap .content__main-img {
    left: 0;
    top: 0
}

#knit-365 .detail-area .content.layout-pattern01 .content__wrap .content__text {
    right: 0;
    top: 88px
}

#knit-365 .detail-area .content.layout-pattern01 .content__wrap .content__sub-img {
    width: min(100%, 317px);
    right: 100px;
    bottom: 0
}

/* パターン2 */
#knit-365 .detail-area .content.layout-pattern02 .content__wrap {
    aspect-ratio: 1200/707
}

#knit-365 .detail-area .content.layout-pattern02 .content__wrap::before {
    left: 252px;
    top: 123px
}

#knit-365 .detail-area .content.layout-pattern02 .content__wrap .content__main-img {
    right: 0;
    bottom: 0
}

#knit-365 .detail-area .content.layout-pattern02 .content__wrap .content__text {
    left: 0;
    bottom: 80px
}

#knit-365 .detail-area .content.layout-pattern02 .content__wrap .content__sub-img {
    width: min(100%, 317px);
    left: 0;
    top: 0
}

/* パターン3 */
#knit-365 .detail-area .content.layout-pattern03 .content__wrap {
    aspect-ratio: 1200/767
}

#knit-365 .detail-area .content.layout-pattern03 .content__wrap::before {
    right: 277px;
    bottom: 166px
}

#knit-365 .detail-area .content.layout-pattern03 .content__wrap .content__main-img {
    left: 0;
    top: 0
}

#knit-365 .detail-area .content.layout-pattern03 .content__wrap .content__text {
    right: 0;
    top: 66px
}

#knit-365 .detail-area .content.layout-pattern03 .content__wrap .content__sub-img {
    width: min(100%, 317px);
    right: 0;
    bottom: 0
}

#knit-365 .topicModuleCredit {
    padding: 0 15px
}

#knit-365 .recommend-area {
    width: 1200px;
    margin: 146px auto 0
}

#knit-365 .recommend-area p {
    text-align: center;
    font-weight: 600;
    font-size: 25px;
    margin-bottom: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative
}

#knit-365 .recommend-area p::before,
#knit-365 .recommend-area p::after {
    display: block;
    content: "";
    background-color: #1a1a1a;
    width: 120px;
    height: 2px;
    margin: 0 20px
}

#knit-365 .recommend-area ul {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 0
}

#knit-365 .recommend-area ul li {
    width: min(100%, 282px);
    transition: all .3s
}

#knit-365 .recommend-area ul li:hover {
    opacity: .7
}

#knit-365 .recommend-area ul li a {
    display: block
}

#knit-365 #bottom_recommend_area {
    padding-left: 15px;
    padding-right: 15px
}

#knit-365 #bottom_recommend_area .bottom_bnrBox a img {
    width: auto
}

#knit-365 .link-btn {
    color: #fff;
    background-color: #6a5d50;
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "MS PGothic", sans-serif;
    text-align: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    transition: .4s ease-in-out;
    border: 1px solid #6a5d50;
    border-radius: 100vmax;
    font-size: 18px;
    width: 464px;
    padding: 25px 0;
    margin: 0 auto;
}

#knit-365 .link-btn::after {
    position: absolute;
    content: "";
    border-left: 1px solid #fff;
    border-bottom: 1px solid #fff;
    width: 8px;
    height: 8px;
    right: 20px;
    top: 50%;
    transform: translateY(-50%) rotate(-135deg);
    transition: .4s ease-in-out;
}

#knit-365 .att-area {
    color: #1a1a1a;
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "MS PGothic", sans-serif;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
    margin-bottom: 20px;
}

#knit-365 .att-area .att {
    font-size: 14px;
}

#knit-365 .att-area .att-bold {
    font-weight: bold;
}

#knit-365 .att-area .price {
    font-weight: bold;
    font-size: 22px;
}

#knit-365 .att-area .price span {
    font-size: 12px;
}

#knit-365 #crew-neck .topicModuleCredit .topicModuleItem__priceCol {
    display: none;
}

@media (hover: hover) {
    #knit-365 .link-btn:hover {
        background-color: #fff;
        color: #6a5d50;
    }

    #knit-365 .link-btn:hover::after {
        border-left: 1px solid #6a5d50;
        border-bottom: 1px solid #6a5d50;
    }
}

@media(max-width: 768px) {
    #knit-365 .pc {
        display: none
    }

    #knit-365 .sp {
        display: block
    }

    #knit-365 .ttl-area {
        margin-bottom: 10%
    }

    #knit-365 .ttl-area span {
        margin-bottom: 4%
    }

    #knit-365 .ttl-area h2 {
        font-size: 7.7vw
    }

    #knit-365 .kv-area {
        width: 100%;
    }

    #knit-365 .nav-area {
        width: 100%;
        padding: 0 15px;
        margin: 16px auto 69px;
        gap: 5%
    }

    #knit-365 .nav-area div {
        width: 47.5%
    }

    #knit-365 .nav-area div::before {
        width: 8vw;
        height: 26px;
        bottom: -30%
    }

    #knit-365 .nav-area div a {
        padding: 10% 10px
    }

    #knit-365 .nav-area div a p {
        font-size: 5vw;
        height: 15vw;
        display: flex;
        align-items: center;
        justify-content: center
    }

    #knit-365 .nav-area div:hover::before {
        bottom: -40%
    }

    #knit-365 .lead-area {
        width: 100%;
        padding: 0 15px
    }

    #knit-365 .lead-area h1 {
        font-size: 7.7vw;
        margin-bottom: 6%
    }

    #knit-365 .lead-area p {
        font-size: 3.6vw;
        line-height: 220%
    }

    #knit-365 .about-knit365-area {
        margin-top: 25%
    }

    #knit-365 .about-knit365-area::before {
        width: 80%;
        height: 3%;
        top: -3%
    }

    #knit-365 .about-knit365-area .about-knit365-area__wrap {
        width: 100%;
        padding: 20% 15px
    }

    #knit-365 .about-knit365-area .about-knit365-area__wrap .ttl-area span {
        margin: 0 auto 3%;
        width: 42vw
    }

    #knit-365 .about-knit365-area .about-knit365-area__wrap .content .content__wrap .point {
        display: block;
        margin-bottom: 12%
    }

    #knit-365 .about-knit365-area .about-knit365-area__wrap .content .content__wrap .point .point-img {
        width: 100%;
        height: auto;
        margin-bottom: 4%
    }

    #knit-365 .about-knit365-area .about-knit365-area__wrap .content .content__wrap .point .point-text {
        width: 100%
    }

    #knit-365 .about-knit365-area .about-knit365-area__wrap .content .point:not(:last-of-type) {
        margin-bottom: 12%
    }

    #knit-365 .about-knit365-area .about-knit365-area__wrap .content .point .point-text img {
        height: 4.6vw;
        margin-bottom: 4%
    }

    #knit-365 .about-knit365-area .about-knit365-area__wrap .content .point .point-text p:first-of-type {
        font-size: 4.8vw;
        padding-bottom: 3%;
        margin-bottom: 3%
    }

    #knit-365 .about-knit365-area .about-knit365-area__wrap .content .point .point-text p:nth-of-type(2) {
        line-height: 146%;
        font-size: 3.2vw
    }

    #knit-365 .about-knit365-area .about-knit365-area__wrap .content .point .point-text p.point-att {
        font-size: 3vw;
        margin-top: 4px
    }

    #knit-365 .lineup-area {
        width: 100%;
        padding: 0 15px;
        margin: 12% auto 8%
    }

    #knit-365 .lineup-area .lineup-area__wrap .ttl-area span {
        width: 69px;
        margin: 0 auto 13px
    }

    #knit-365 .lineup-area .lineup-area__wrap .lineup-area__inner {
        flex-wrap: wrap;
        gap: 4%
    }

    #knit-365 .lineup-area .lineup-area__wrap .lineup-area__inner div {
        width: 48%
    }

    #knit-365 .lineup-area .lineup-area__wrap .lineup-area__inner .new::before {
        width: 12vw;
        inset: -8% auto auto -8%;
    }


    #knit-365 .lineup-area .lineup-area__wrap .lineup-area__inner div:not(:last-of-type) {
        margin-bottom: 4%
    }

    #knit-365 .lineup-area .lineup-area__wrap .lineup-area__inner div a {
        padding: 10% 0
    }

    #knit-365 .lineup-area .lineup-area__wrap .lineup-area__inner div a p {
        font-size: 4.5vw
    }

    #knit-365 .lineup-area .lineup-area__wrap .lineup-area__inner div a p::before {
        width: 6vw;
        height: 6vw;
        right: 2%
    }

    #knit-365 .detail-area {
        width: 100%;
        margin: 0 auto 10%
    }

    #knit-365 .detail-area .content:not(:first-of-type) {
        margin-top: 12%
    }

    #knit-365 .detail-area .content .content__wrap {
        position: relative;
        margin-bottom: 5%
    }

    #knit-365 .detail-area .content .content__wrap::before {
        position: static;
        content: "";
        background-color: #e0ddd9;
        width: 0;
        height: 0
    }

    #knit-365 .detail-area .content .content__wrap .content__main-img {
        width: 100%;
        position: static
    }

    #knit-365 .detail-area .content .content__wrap .content__text {
        width: 100%;
        padding: 0 15px;
        margin: 5% auto 7%;
        position: static
    }

    #knit-365 .detail-area .content .content__wrap .content__text p:first-of-type {
        font-size: 5.2vw;
        margin-bottom: 4%;
        color: #6a5d50
    }

    #knit-365 .detail-area .content .content__wrap .content__text p:last-of-type {
        font-size: 3.4vw;
        line-height: 164%
    }

    #knit-365 .detail-area .content .content__wrap .content__sub-img {
        position: static
    }

    /* ラインナップレイアウトパターン */
    /* パターン1 */
    #knit-365 .detail-area .content.layout-pattern01 .content__wrap {
        aspect-ratio: auto
    }

    #knit-365 .detail-area .content.layout-pattern01 .content__wrap::before {
        right: auto;
        bottom: auto
    }

    #knit-365 .detail-area .content.layout-pattern01 .content__wrap .content__sub-img {
        width: 100%;
        padding: 0 15px;
        right: auto;
        bottom: auto
    }

    /* パターン2 */
    #knit-365 .detail-area .content.layout-pattern02 .content__wrap {
        aspect-ratio: auto
    }

    #knit-365 .detail-area .content.layout-pattern02 .content__wrap::before {
        left: auto;
        top: auto
    }

    #knit-365 .detail-area .content.layout-pattern02 .content__wrap .content__sub-img {
        width: 100%;
        padding: 0 15px;
        left: auto;
        top: auto
    }

    /* パターン3 */
    #knit-365 .detail-area .content.layout-pattern03 .content__wrap {
        aspect-ratio: auto
    }

    #knit-365 .detail-area .content.layout-pattern03 .content__wrap::before {
        right: auto;
        bottom: auto
    }

    #knit-365 .detail-area .content.layout-pattern03 .content__wrap .content__sub-img {
        width: 100%;
        padding: 0 15px;
        right: auto;
        bottom: auto
    }

    #knit-365 .recommend-area {
        width: min(100%, 768px);
        padding: 0 15px;
        margin: 0 auto
    }

    #knit-365 .recommend-area p {
        font-size: 6vw;
        margin-bottom: 5%
    }

    #knit-365 .recommend-area p::before,
    #knit-365 .recommend-area p::after {
        display: none
    }

    #knit-365 .recommend-area ul {
        justify-content: center;
        gap: 3%;
        flex-wrap: wrap
    }

    #knit-365 .recommend-area ul li {
        width: 48.5%;
        margin-bottom: 3%
    }

    #knit-365 .recommend-area ul li:hover {
        opacity: .7
    }

    #knit-365 .link-btn-area {
        padding: 0 15px;
        margin-bottom: 15%;
    }

    #knit-365 .link-btn {
        font-size: 3.58vw;
        width: 100%;
        padding: 4.61vw 0;
    }

    #knit-365 .link-btn::after {
        width: 2.05vw;
        height: 2.05vw;
        right: 5.12vw;
    }

    #knit-365 .att-area {
        gap: 2vw;
    }

    #knit-365 .att-area .att {
        font-size: 3vw;
        line-height: 160%;
    }

    #knit-365 .att-area .price {
        font-size: 5vw;
    }

    #knit-365 .att-area .price span {
        font-size: 2.6vw;
    }
}