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

html {
    scroll-behavior: smooth;
}

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

img {
    max-width: 100%;
    height: auto;
    display: block;
}

.pc {
    display: block;
}

.sp {
    display: none;
}

/* メインコンテンツ */
.contents {
    display: flex;
    flex-direction: column;
    align-items: center;
}

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

.section-text {
    font-size: 1.25vw;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0.058vw;
}

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

.hero__text {
   font-size: 2.22vw;
   font-weight: bold;
   line-height: 1.2;
   letter-spacing: 0.1125em;
}

.hero__title {
   font-size: 4.1667vw;
   font-weight: 600;
   line-height: 1.3;
   letter-spacing: 0.06em;
   padding: 1.111vw 1.667vw;
   width: fit-content;
   margin-top: 1.667vw;
   border-radius: 1.111vw;
   background-color: white;
}

/* アバウトセクション */
.about {
    width: 100vw;
    padding: 8.333vw 0;
}

.about-image {
    width: 52.778vw;
    height: 35.16vw;
    margin: 0 auto;
}

.about-text {
    width: fit-content;
    margin: 0 auto;
    text-align: center;
    margin-top: 2.778vw;
    font-size: 1.25vw;
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: 0.047em;
}

.about-text-big {
    font-size: 2.222vw;
    font-weight: 700;
    line-height: 1.8;
    letter-spacing: 0.263em;
}

.about-link {
    display: block;
    width: fit-content;
    margin: 0 auto;
    margin-top: 2.778vw;
    text-decoration: none;
    background-color: #333;
    color: white;
    font-size: 1.667vw;;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.08em;
    padding: 1.597vw 4.514vw 1.597vw 7.292vw;
    position: relative;
    border-radius: 1.111vw;
}

.about-link::before {
    content: '';
    position: absolute;
    top: 1.667vw;
    left: 4.514vw;;
    width: 2.222vw;
    height: 2.222vw;
    background-image: url('../images/cart-icon.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* フレンドシップセクション */
.feature {
    width: 100vw;
    color: black;
    background-color: rgba(249, 218, 210, 0.4);
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.feature-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 100vw;
    padding: 0;
    margin: 0;
    gap: 0;
}

.feature-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100vw;
    position: relative;
}

.feature-row:nth-child(1) {
    height: 33.542vw;
}

.feature-row:nth-child(2) {
    height: 30.764vw;
}

.feature-row:nth-child(3) {
    height: 39.097vw;
}

.feature-image {
    width: 37.847vw;
    height: 25.208vw;
}

.feature-row:nth-child(1) .feature-image {
    position: absolute;
    top: 8.333vw;
    left: 0;
}

.feature-row:nth-child(2) .feature-image {
    position: absolute;
    top: 5.556vw;
    left: 62.153vw;
}

.feature-row:nth-child(3) .feature-image {
    position: absolute;
    top: 5.556vw;
    left: 0;
}

.feature-row:nth-child(1) .feature-text-wrap {
    width: 41.667vw;
    position: absolute;
    top: 12.361vw;
    left: 43.403vw;
}

.feature-row:nth-child(2) .feature-text-wrap {
    width: 37.986vw;
    position: absolute;
    top: 8.194vw;
    left: 18.681vw;
}

.feature-row:nth-child(3) .feature-text-wrap {
    width: 41.667vw;
    position: absolute;
    top: 9.201vw;
    left: 43.403vw;
}

.feature-number {
    font-size: 6.944vw;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.036em;
}

.feature-row:nth-child(1) .feature-number {
    position: absolute;
    top: 7.826vw;
    left: 75.278vw;
}

.feature-row:nth-child(2) .feature-number {
    position: absolute;
    top: 5.534vw;
    left: 41.736vw;
}

.feature-row:nth-child(3) .feature-number {
    position: absolute;
    top: 6.09vw;
    left: 74.861vw;
}

.feature-en {
    font-size: 1.111vw;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.225em;
    padding: 0.278vw 1.111vw;
    border: 1px solid #333;
    border-radius: 0.556vw;
    width: fit-content;
}

.feature-title {
    font-size: 1.667vw;
    font-weight: 700;
    line-height: 1.65;
    letter-spacing: 0.15em;
    margin-top: 0.556vw;
}

.feature-text {
    font-size: 1.25vw;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0.047em;
    margin-top: 1.667vw;
}


/* リストセクション */
.list {
    width: 100vw;
    padding: 8.333vw 0;
}

.list-content {
    width: 52.778vw;
    margin: 0 auto;
}

.list-image {
    width: 52.778vw;
    height: 35.16vw;
}

.list-text-wrap {
    width: 43.958vw;
    margin: 0 auto;
    margin-top: 2.778vw;
}

.list-name {    
    font-size: 2.778vw;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0.08em;
}

.list-price {
    font-size: 4.167vw;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0.08em; 
    margin-top: 0;
}

.list-price-old {
    font-size: 2.778vw;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0.08em; 
    margin-top: 0;
}

.list-box {
    width: 100%;
    padding: 1.667vw 2.778vw;
    border: 2px solid #333;
    border-radius: 1.111vw;
    margin-top: 1.111vw;
}

.list-box-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-direction: column;
    row-gap: 1.111vw;
}

.list-box-row-item-title {
    font-size: 1.25vw;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0.08em;
}

.list-box-row-item-text {
    font-size: 1.25vw;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0.04em;
    margin-top: 1.111vw;
}

.list-box-text {
    font-size: 0.972vw;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0.04em;
    margin-top: 1.111vw;
}

.list-link {
    display: block;
    width: fit-content;
    background-color: #333;
    color: white;
    font-size: 1.667vw;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.08em;
    padding: 1.597vw 4.514vw 1.597vw 7.292vw;
    text-decoration: none;
    margin: 0 auto;
    margin-top: 2.778vw;
    position: relative;
    border-radius: 1.111vw;
}

.list-link::before {
    content: '';
    background-image: url('../images/cart-icon.png');
    position: absolute;
    top: 1.667vw;
    left: 4.514vw;
    width: 2.222vw;
    height: 2.222vw;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* 商品一覧セクション */
.products {
    width: 100vw;
    background-color: rgba(249, 218, 210, 0.4);
    color: #333;
    padding: 8.333vw 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.products-title {
    font-size: 1.667vw;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.08em;
    text-align: center;
}

.products__box {
    width:88.889vw;
    padding: 1.389vw 1.389vw;
    background-color: white;
}

.products__row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    width: 86.111vw;
    margin: 0 auto;
    margin-top: 1.8vw;
}

.product-card {
    width: 19.805vw;
    position: relative;
}

.product-link {
    text-decoration: none;
    color: black;
}

.product-image {
    width: 19.805vw;
    height: 19.805vw;
    overflow: hidden;
    margin-bottom: 0.694vw;
}

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

.product-name {
    color: #333;
    font-size: 1.111vw;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 0;
    padding: 0;
    margin: 0;
    margin-bottom: 0.139vw;
    padding-bottom: 0.694vw;
    border-bottom: 1px solid #333;
}

.product-text {
    color: #333;
    font-size: 1.111vw;
    font-weight: 500;
}


/* レスポンシブデザイン */
@media (max-width: 780px) {
     
    .pc {
        display: none;
    }

    .sp {
        display: block;
    }

    .section-text {
        font-size: 4.8vw;
        font-weight: 400;
        line-height: 1.6;
        letter-spacing: 0.224vw;
    }

    /* ヒーローセクション */
    .hero {
        background-image: url('../images/sp-fv.jpg');
        background-size: cover;
        background-position: center;
        width: 100vw;
        height: 147.733vw;
        padding-top: 21.333vw;
        padding-left: 6.4vw;
    }
   
   .hero__text {
      font-size: 4.8vw;
      font-weight: bold;
      line-height: 1.2;
      letter-spacing: 0.211em;
    }

   .hero__title {
      font-size: 6.4vw;
      font-weight: 600;
      line-height: 1.45;
      letter-spacing: 0.15em;
      padding: 4.267vw 6.4vw;
      width: fit-content;
      margin-top: 2.133vw;
      border-radius: 2.133vw;
   }


    /* アバウトセクション */
    .about {
        width: 100vw;
        padding: 16vw 0;
    }

    .about-image{
        width: 93.333vw;
        height: 62.179vw;
    }

    .about-text {
        width: 93.333vw;
        margin: 0 auto;
        text-align: left;
        margin-top: 10.667vw;
        font-size: 4.8vw;
    }

    .about-text-big {
        font-size: 6.4vw;
        letter-spacing: 0;
    }

    .about-link {
        display: block;
        width: fit-content;
        margin: 0 auto;
        margin-top: 10.667vw;
        font-size: 6.4vw;
        padding: 6.133vw 17.333vw 6.133vw 28vw;
        position: relative;
        border-radius: 4.267vw;
    }

    .about-link::before {
        content: '';
        position: absolute;
        top: 6.133vw;
        left: 17.333vw;
        width: 8.533vw;
        height: 8.533vw;
    }

    /* フレンドシップセクション */
    .feature {
        width: 100vw;
        padding: 16vw 0;
    }

    .feature-content {
        width: 93.333vw;
        padding: 0;
        margin: 0 auto;
        gap: 0;
    }

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


    .feature-row:nth-child(1) {
        height: 210.667vw;
    }

    .feature-row:nth-child(2) {
        height: 218.667vw;
    }

    .feature-row:nth-child(3) {
        height: 186.667vw;
    }

    .feature-image {
        width: 93.333vw;
        height: 62.165vw;
    }

    .feature-row:nth-child(1) .feature-image {
        position: absolute;
        top: 0;
        left: 0;
    }
    
    .feature-row:nth-child(2) .feature-image {
        position: absolute;
        top: 0;
        left: 0;
    }
    
    .feature-row:nth-child(3) .feature-image {
        position: absolute;
        top: 0;
        left: 0;
    }

    .feature-row:nth-child(1) .feature-text-wrap {
        width: 93.333vw;
        position: absolute;
        top: 74vw;
        left: 0;
    }

    .feature-row:nth-child(2) .feature-text-wrap {
        width: 93.333vw;
        position: absolute;
        top: 74vw;
        left: 0;
    }

    .feature-row:nth-child(3) .feature-text-wrap {
        width: 93.333vw;
        position: absolute;
        top: 74vw;
        left: 0;
    }

    .feature-number {
        font-size: 13.333vw;
        font-weight: 400;
        line-height: 1.2;
        letter-spacing: 0.036em;
    }

    .feature-row:nth-child(1) .feature-number {
        position: absolute;
        top: 66.667vw;
        left: 69.333vw;
    }

    .feature-row:nth-child(2) .feature-number {
        position: absolute;
        top: 66.667vw;
        left: 69.333vw;
    }

    .feature-row:nth-child(3) .feature-number {
        position: absolute;
        top: 66.667vw;
        left: 69.333vw;
    }

    .feature-en {
        font-size: 4.267vw;
        padding: 1.067vw 4.267vw;
        border-radius: 2.133vw;
        width: fit-content;
        border-radius: 2.133vw;
    }


    .feature-title {
        font-size: 6vw;
        margin-top: 3.2vw;
    }

    .feature-text {
        font-size: 4.8vw;
        margin-top: 6.4vw;
    }

    /* リストセクション */
    .list {
        width: 100vw;
        padding: 16vw 0;
    }

    .list-content {
        width: 93.333vw;
        margin: 0 auto;
    }

    .list-image {
        width: 93.333vw;
        height: 62.179vw;
    }

    .list-text-wrap {
        width: 93.333vw;
        margin: 0 auto;
        margin-top: 10.667vw;
    }

    .list-name {    
        font-size: 9.333vw;
    }

    .list-price {
        margin-top: 5.333vw;
        font-size: 13.333vw;
        line-height: 1;
    }

    .list-price-old {
        font-size: 8vw;
    }

    .list-box {
        width: 100%;
        padding: 6.4vw 6.4vw;
        border-radius: 4.267vw;
        margin-top: 4.267vw;
    }

    .list-box-row {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        flex-direction: column;
        row-gap: 4.267vw;
    }

    .list-box-row-item-title {
        font-size: 4.8vw;
    }

    .list-box-row-item-text {
        font-size: 4.8vw;
        margin-top: 4.267vw;
    }

    .list-box-text {
        font-size: 4.267vw;
        margin-top: 10.667vw;
    }

    .list-link {
        display: block;
        width: fit-content;
        font-size: 6.4vw;
        padding: 6.4vw 17.333vw 6.4vw 28vw;
        text-decoration: none;
        margin: 0 auto;
        margin-top: 21.333vw;
        position: relative;
        border-radius: 4.267vw;
    }

    .list-link::before {
        content: '';
        position: absolute;
        top: 6.133vw;
        left: 17.333vw;
        width: 8.533vw;
        height: 8.533vw;
    }

    /* 商品一覧セクション */
    .products {
        width: 100vw;
        padding: 16vw 0;
    }

    .products-title {
        font-size: 5.6vw;
    }

    .products__box {
        width: 93.333vw;
        margin: 0 auto;
        padding: 5.333vw 2.667vw;
    }

    .products__row {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        flex-wrap: wrap;
        width: 88vw;
        margin: 0 auto;
        margin-top: 13.867vw;
        margin-bottom: 0;
        row-gap: 5.333vw;
    }

    .product-card {
        width: 42.667vw;
        position: relative;
    }

    .product-image {
        width: 42.667vw;
        height: 42.667vw;
        overflow: hidden;
        margin-bottom: 3.2vw;
    }

    .product-name {
        font-size: 5.6vw;
        margin-bottom: 2.667vw;
    }

    .product-name.sp-small {
        font-size: 4.8vw;
        height: 15.467vw;
    }

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

}