/* リセットCSS */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

div#outer {
    padding-top: 148px !important;
    max-width: unset;
}

html {
    scroll-behavior: smooth;
}

/* 基本設定 */
body {
    font-family: 'Shippori Mincho', serif;
    background-color: white;
    color: black;
    line-height: 1.8;
    overflow-x: hidden;
}

img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.contents {
    width: 100vw;
    overflow-x: hidden;
}

.pc {
    display: block;
}

.sp {
    display: none;
}

/* セクション共通 */
section {
    width: 100%;
    overflow-x: hidden;
}

/* ヒーローセクション */
.hero {
    background-image: url('../images/fv.png');
    background-size: cover;
    background-position: center;
    width: 100vw;
    height: 44.003vw;
    position: relative;
    padding-top: 23.264vw;
    padding-left: 11.319vw;
}

.hero__title {
    color: white;
    font-size: 2.778vw;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0.1em;
    width: fit-content;
    padding: 0;
}


/* アバウトセクション */
.about {
    width: 100vw;
    padding: 8.333vw 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.778vw;
    position: relative;
}

.about__row {
    width: 77.986vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.about__text-wrap {
    width: 40.764vw;
    display: flex;
    flex-direction: column;
    gap: 2.778vw;
}

.about__title {
    font-size: 2.222vw;
    font-weight: 600;
    line-height: 1.8;
    letter-spacing: 0.11em;
}

.about__text {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1.389vw;
    font-weight: 400;
    line-height: 2;
    letter-spacing: 0.05em;
}

.about__image-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.667vw;
}

.about__image {
    width: 29.167vw;
    height: 12.778vw;
}

.about__image:nth-child(2) {
    margin-left: 5.486vw;
}


.o_btn {
    width: 22.222vw;
    height: 5.694vw;
    color: black;
    border: 2px solid black;
    background-color: transparent;
    display: inline-block;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1.667vw;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.08em;
    position: relative;
    text-decoration: none;
    border-radius: 1.111vw;
    padding: 1.667vw 7.431vw 1.667vw 5.556vw;
    position: relative;
    margin: 0 auto;
}

.o_btn::after {
    content: '';
    width: 1.667vw;
    height: 1.667vw;
    position: absolute;
    top: 2.014vw;
    right: 5.556vw;
    background-image: url('../images/arrow.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.feature {
    width: 100vw;
    padding: 8.333vw 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5.556vw;
    position: relative;
    background-color: rgba(240, 240, 242, 0.58);
}

.feature__title {
    font-size: 1.667vw;
    font-weight: 600;
    line-height: 1.8;
    letter-spacing: 0.15em;
    text-align: center;
}

.feature__row {
    width: 77.639vw;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 5.556vw;
}

.feature__item {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2.778vw;
    position: relative;
}

.feature__item-image {
    width: 54.792vw;
    height: 25.903vw;
}

.feature__item:nth-child(even) .feature__item-image {
    margin-left: 22.778vw;
}

.feature__item-text-wrap {
    display: flex;
    flex-direction: column;
    gap: 1.667vw;
}

.feature__item:nth-child(odd) .feature__item-text-wrap {
    width: 52.569vw;
    margin-left: 24.861vw;
}

.feature__item:nth-child(even) .feature__item-text-wrap {
    width: 62.431vw;
}

.feature__item-title {
    padding: 0;
    font-size: 2.5vw;
    font-weight: 600;
    line-height: 1.8;
    letter-spacing: 0.1em;
}

.feature__item-text {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1.389vw;
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: 0.2em;
}

.feature__item-decoration {
    border: 1px solid black;;
   
}

.feature__item:nth-child(1) .feature__item-decoration {
    width: 20vw;
    height: 29.306vw;
    position: absolute;
    top: 5.139vw;
    left: -6.532vw;
}

.feature__item:nth-child(2) .feature__item-decoration {
    width: 14.444vw;
    height: 24.306vw;
    position: absolute;
    top: 5.278vw;
    right: -7.212vw;
}

.feature__item:nth-child(3) .feature__item-decoration {
    width: 11.389vw;
    height: 20.833vw;
    position: absolute;
    top: 12.083vw;
    left: -5.629vw;
}

.product {
    width: 100vw;
    padding: 8.333vw 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5.556vw;
}

.product__title {
    font-size: 1.667vw;
    font-weight: 600;
    line-height: 1.8;
    letter-spacing: 0.15em;
    text-align: center;
}

.product__image {
    width: 77.778vw;
    height: 25.903vw;
    background-image:url('../images/product.png');
    background-size: cover;
}


.order {
    background-color: white;
    width: 100vw;
    padding-bottom: 8.333vw; 
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5.556vw;
}

.order__wrap {
    width: 77.778vw;
    display: flex;
    flex-direction: column;
    gap: 2.778vw;
}

.order__title {
    font-size: 1.667vw;
    font-weight: 600;
    line-height: 1.8;
    letter-spacing: 0.15em;
    text-align: center;
}

.order__content-wrap {
    display: flex;
    flex-direction: column;
    gap: 2.778vw;
}

.order__content {
    display: flex;
    gap: 1.667vw;
}

.order__content--2 {
    padding-left: 3.681vw;
    padding-right: 4.722vw;
}

.order__content-title {
    font-size: 2.222vw;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.11em;

    width: 2.361vw;
}

.order__content-image01 {
    width: 38.264vw;
    height: 27.153vw;
}

.order__content-text-wrap {
    width: 33.403vw;
    display: flex;
    flex-direction: column;
    gap: 1.667vw;
}

.order__content-text-price {
    font-size: 2.222vw;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.11em;
}

.order__content-text {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1.389vw;
    font-weight: 300;
    line-height: 1.4;
    letter-spacing: 0.18em;
}

.order__content-row {
    display: flex;
    gap: 0.278vw;
    align-items: center;
}

.order__content-item {
    display: flex;
    flex-direction: column;
    gap: 1.111vw;
    text-decoration: none;
    color: black;
}

.order__content-image02 {
    width: 21.597vw;
    height: 25.903vw;
    overflow: hidden;
}

.order__content-image02 img {
    transition: all 0.3s ease;
}

.order__content-item:hover .order__content-image02 img {
    transform: scale(1.1);
}

.order__content-item-info {
    display: flex;
    flex-direction: column;
    gap: 0.278vw;
}

.order__content-item-name {
    font-size: 1.667vw;
    font-weight: 300;
    line-height: 1.4;
    letter-spacing: 0.11em;
}

.order__content-item-price {
    font-size: 1.389vw;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.18em;
}

.order__btn {
    background-color: #663300;
    color: white;
}

.order__btn:after {
    background-image: url('../images/arrow-white.png');
}

@media (max-width: 1200px) {
    div#outer {
       padding-top: 75px !important;
    }
}

/* レスポンシブデザイン */
@media (max-width: 780px) {


    .pc {
        display: none;
    }

    .sp {
        display: block;
    }

    .contents {
        width: 100vw;
    }

    /* セクション共通 */
    section {
        width: 100%;
        overflow-x: hidden;
    }

    /* ヒーローセクション */
    .hero {
        background-image: url('../images/sp-fv.png');
        background-size: cover;
        background-position: center;
        width: 100vw;
        height: 162.4vw;
        padding-top: 128.8vw;
        padding-left: 6.4vw;
    }

    .hero__title {
        font-size: 6.4vw;
    }

    /* アバウトセクション */
    .about {
        width: 100vw;
        padding: 16vw 0;
        display: flex;
        flex-direction: column;
        gap: 16vw;
    }

    .about__row {
        width: 93.333vw;
        display: flex;
        flex-direction: column;
        gap: 10.667vw;
        align-items: center;
    }

    .about__text-wrap {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 10.667vw;
    }

    .about__title {
        font-size: 7.467vw;
    }

    .about__text {
        font-size: 4.267vw;
    }

    .about__image-wrap {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 6.4vw;
    }

    .about__image {
        width: 112vw;
        height: 49.067vw;

        width: 93.333vw;
        height: 40.889vw;
    }

    .about__image:nth-child(2) {
        margin-left: 0;
        display: none;
    }

    .o_btn {
        width: 85.333vw;
        height: 21.867vw;
        display: inline-block;
        font-size: 6.4vw;
        position: relative;
        border-radius: 4.267vw;
        padding: 6.4vw 28.533vw 6.4vw 20vw;
        position: relative;
        margin: 0 auto;
    }

    .o_btn::after {
        content: '';
        width: 6.4vw;
        height: 6.4vw;
        position: absolute;
        top: 7.733vw;
        right: 21.333vw;
    }

    .feature {
        width: 100vw;
        padding: 16vw 0;
        display: flex;
        flex-direction: column;
        gap: 16vw;
    }

    .feature__title {
        font-size: 5.333vw;
    }

    .feature__row {
        width: 93.333vw;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        gap: 16vw;
    }

    .feature__item {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 10.667vw;
        position: relative;
    }

    .feature__item-image {
        width: 93.333vw;
        height: 44.123vw;
    }

    .feature__item:nth-child(even) .feature__item-image {
        margin-left: 0;
    }

    .feature__item-text-wrap {
        display: flex;
        flex-direction: column;
        gap: 6.4vw;
    }

    .feature__item:nth-child(odd) .feature__item-text-wrap {
        width: 100%;
        margin-left: 0;
    }

    .feature__item:nth-child(even) .feature__item-text-wrap {
        width: 100%;
    }

    .feature__item-title {
        font-size: 6.933vw;
        font-weight: 600;
        line-height: 1.8;
        letter-spacing: 0.1em;
    }

    .feature__item-text {
        font-family: 'Noto Sans JP', sans-serif;
        font-size: 4.8vw;
        font-weight: 400;
        line-height: 1.8;
        letter-spacing: 0.2em;
    }

    .feature__item-decoration {
        display: none;
    }

    .feature__item:nth-child(1) .feature__item-decoration {
        width: 76.8vw;
        height: 112.533vw;
        position: absolute;
        top: 19.733vw;
        left: -25.083vw;
    }

    .feature__item:nth-child(2) .feature__item-decoration {
        width: 55.467vw;
        height: 93.333vw;
        position: absolute;
        top: 20.267vw;
        right: -27.696vw;
    }

    .feature__item:nth-child(3) .feature__item-decoration {
        width: 43.733vw;
        height: 80vw;
        position: absolute;
        top: 46.4vw;
        left: -21.616vw;
    }

    .product {
        width: 100vw;
        padding: 16vw 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 13.333vw;
    }

    .product__title {
        font-size: 5.333vw;
    }

    .product__image {
        width: 88.267vw;
        height: 88vw;
        background-image:url('../images/sp-product.png');
        background-size: cover;
    }

    .order {
        width: 100vw;
        padding: 16vw 0;
        display: flex;
        flex-direction: column;
        gap: 13.333vw;
    }

    .order__wrap {
        width: 93.333vw;
        display: flex;
        flex-direction: column;
        gap: 10.667vw;
    }

    .order__title {
        font-size: 5.333vw;
    }

    .order__content-wrap {
        display: flex;
        flex-direction: column;
        gap: 10.667vw;
    }

    .order__content {
        display: flex;
        flex-direction: column;
        gap: 6.4vw;
    }

    .order__content--2 {
        padding-left: 0;
        padding-right: 0;
    }

    .order__content-title {
        font-size: 6.933vw;
        width: 100%;
    }

    .order__content-image01 {
        width: 93.333vw;
        height: 66.231vw;
    }

    .order__content-text-wrap {
        width: 93.333vw;
        display: flex;
        flex-direction: column;
        gap: 6vw;
    }

    .order__content-text-price {
        font-size: 6.933vw;
    }

    .order__content-text {
        font-size: 4.8vw;
    }

    .order__content-row {
        display: flex;
        flex-direction: column;
        gap: 5.333vw;
        align-items: center;
    }

    .order__content-item {
        display: flex;
        flex-direction: column;
        gap: 4.267vw;
    }

    .order__content-image02 {
        width: 82.933vw;
        height: 99.467vw;
    }

    .order__content-item-info {
        display: flex;
        flex-direction: column;
        gap: 1.067vw;
    }

    .order__content-item-name {
        font-size: 6.4vw;
    }

    .order__content-item-price {
        font-size: 5.333vw;
    }
}