/* Color Variables */
:root {
  --color-light-gray: #EAEAEA;
  --color-cream: #F2EFE9;
  --color-brown-gray: #AFA083;
  --color-dark-brown: #5c4f37;
  --color-dark-gray: #333;
  --color-gray: #707070;
  --color-light-blue: #cce6eb;
  --color-black: #000;
  --color-white: #fff;
  --color-green: #008c4f;
  --color-blue: #0084a1;
}

/* Guide Kv */
.guide-kv {
    position: relative;
    width: 100%;
    height: calc(100vh - 10.676875vw);
}

.guide-kv:lang(en) {
    font-family: 'DIN Alternate', sans-serif;
}


.guide-kv__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.6);
}

.guide-kv__content {
    position: absolute;
    width: 19.6875vw;
    color: var(--color-white);
    z-index: 1;
    bottom: 5.0625vw;
    right: 5vw;
}

.guide-kv__title {
    font-size: 3vw;
    margin-bottom: 1.5vw;
    font-family: 'DIN Alternate', sans-serif;

}

.guide-kv__content p {
    font-size: 0.9375vw;
   
}

.guide-kv__content p:lang(en) {
    line-height: 1.5;
}

/* Guide Section */
.guide-section {
    background-color: var(--color-cream);
    padding: 5vw;
    
}

.guide-section:lang(en) {
    font-family: 'DIN Alternate', sans-serif;
}

.guide-section__card {
    background-color: var(--color-white);
     padding: 3.75vw;
     display: flex;
     gap: 4.125vw;
     align-items: start;
     border-bottom: 2px solid var(--color-cream);
}

.guide-section__card:last-child {
    border-bottom: none;
}


.guide-section__img-wrapper {
    width: 28.75vw;
    height: 18.75vw;
    overflow: hidden;
}

.guide-section__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.guide-section__content {
    width: 53.9375vw;
}

.guide-section__title {
    display: flex;
    align-items: start;
    gap: 1.5vw;
    font-size: 2vw;
    line-height: 1.5;
    margin-bottom: -0.5em;
} 

.guide-section__title a {
    color: var(--color-black);
    text-decoration: none;
}

.guide-section__title a:lang(en) {
    margin-top: -0.125em;

}

.guide-section__title img {
    width: 2.25vw;
    height: 2.25vw;
}


.guide-section__description-box {
    padding-top: 2.5vw;
    display: flex;
    align-items: start;
    gap: 4vw;
    justify-content: space-between;
}

.guide-section__description-box-inner {
    width: 25.625vw;
}

.guide-section__description-box-inner p:first-child {
    font-size: 1.0625vw;
    line-height: 1.75;
    color: var(--color-brown-gray);
    margin-bottom: 0.5vw;
}

.guide-section__description-box-inner p:last-child {
    font-size: 0.9375vw;
    line-height: 1.875;
    
    color: var(--color-dark-gray);
    /* font-family: 'A P-OTF A1Gothic Std'; */
}

.guide-section__data {
    width: 21.25vw;
}

.guide-section__data-item {
    display: flex;
    align-items: start;
    padding: 1.140625vw 0;
    border-bottom: 1px solid var(--color-brown-gray);
    
}

.guide-section__data-item:first-child {
    border-top: 1px solid var(--color-brown-gray);
}


.guide-section__data-title {
   width: 10.625vw;
    font-size: 0.9375vw;
    line-height: 1.5;
    color: var(--color-dark-gray);
}


.guide-section__data-value-level {
    display: flex;
    align-items: center;
    gap: 0.5vw;
    height: 1.40625vw;
}

.guide-section__data-value-level img {  
    width: 1.4125vw;
    height: auto;
    object-fit: cover;
}

.guide-section__data-value {
    font-size: 0.9375vw;
    line-height: 1.5;
    color: var(--color-dark-gray); 
    width: 10.5vw;
    
}


@media (max-width: 768px) {
    /* Guide Kv  */

    .guide-kv {
        height: calc(100vh - 14.125vw);
    }

    .guide-kv__content {
        width: 80vw;
        bottom: 22.5vw;
        right: 10vw;
    }

    .guide-kv__title {
        font-size: 6vw;
        margin-bottom: 5vw;
    }

    .guide-kv__content p {
        font-size: 3vw;
    }


    /* Guide Section */

    .guide-section {
        padding: 10vw 10vw 20vw 10vw;
    }

    .guide-section__card {
        flex-direction: column;
        gap: 5vw;
        padding: 2.5vw 2.5vw 12.5vw 2.5vw;
    }

    .guide-section__img-wrapper {
        width: 100%;
        height: 48.75vw;
    }

    .guide-section__title {
        font-size: 4.25vw;
        margin-bottom: 1vw;
        gap: 3vw;
    }

    .guide-section__content {
         padding: 0 1.5vw 0 3.5vw;
         width: 100%;
    }

    
    .guide-section__title img {
        width: 5.75vw;
        height: 5.75vw;
    }
    
    .guide-section__data {
        width: 100%;
    
    }

   
    .guide-section__description-box {
        flex-direction: column;
        gap:0;
    }

    .guide-section__description-box-inner {
        width: 100%;
        margin-bottom: 6vw;
    }

    .guide-section__description-box-inner p:first-child {
        font-size: 3vw;
        margin-bottom: 1vw;
    }

    .guide-section__description-box-inner p:last-child {
        font-size: 3vw;
    }

    .guide-section__data-item {
          padding: 4.375vw 0;
    }

    .guide-section__data-title {
        font-size: 3vw;
        width: 20vw;
    }

    .guide-section__data-value {
        font-size: 3vw;
        width: 50vw
    }

    .guide-section__data-value-level {
        gap: 2vw;
        height: 4.5vw;
    }

    .guide-section__data-value-level img {
        width: 5.365vw;
    }







    
    
    
    
}