:root {
    --mediaQuery: calc((100vw - 767px)*1000);
    /* --length-width: var(--length); */
}

/* .keyvisual-titl {
    width: min(100%, 1200px);
    margin-inline: auto;
} */

.keyvisual-title img {
    width: 100%;
    height: auto;
}

.kv {
    position: relative;

    & .ky-wrapper {
        position: absolute;
        top: 50%;
        left: 50%;
        display: flex;
        align-items: center;
        width: min(100%, 1210px);
        height: 101%;
        padding-inline-start: 10px;
        transform: translate(-50%, -50%);
        z-index: 1;

        &::before {
            content: "";
            position: absolute;
            top: 0;
            width: min(100%, 830px);
            height: 100%;
            background-image: url("../../assets/img/selling_point/transparent-image.png");
            z-index: -1;
        }

        & .outside-frame {
            width: 100%;
            height: 101%;
            background: linear-gradient(90deg, rgb(255 255 255) 90%, rgba(255, 255, 255, 0.98) 100%);
            left: 0;
            position: absolute;
            transform: translateX(calc(-100% + 10px));
        }

        & .kv-inner-content {
            --length-width: var(--length);
            width: min(60%, var(--length-width));
        }
    }
}

.yellow-line {
    text-decoration: underline #fad737;
    text-decoration-thickness: 3px;
} 
.tagitem {
    width: fit-content;
    color: #000;
}
.article-wrap-center { justify-content: center; }
.main-content * { border-radius: var(--radius); }
.main-content {
    padding-block: 3.8em;

    & .content-taitle {
        font-size: 30px;
    }
}
section:nth-child(1 of section) .main-content{
    background-image: url("../img/selling_point/background-image-01.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position-x: center;

    & .article-item-textarea {
        background-color: transparent;
    }
}
section:nth-child(2 of section) .main-content{
    & .article-item-textarea {
        background-color: transparent;
    }
}
section:nth-child(3 of section) .main-content{
    background-image: url("../img/selling_point/background-image-02.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position-x: center;

    & .article-item {
        & .claassification-item{
            background-color: white;
        }
    }
}
.article-item {
    & .item-title {
        padding-block: .82em;
        background-image: linear-gradient(90deg, #0064d2, #64afe1);
        border-radius: 9999px;
        text-align: center;
        color: #fff;
    }

    & .link-btn {
        width: min(100%, 167px);
        padding-block: .7em;
        margin-inline: auto;
        border: 1px solid var(--tos-blue);
        text-align: center;

    }
    /* & .link-icon-arrow--right {
        &::after {
            right: 1rem;
            color: var(--tos-blue);
        }   
    } */
    
    & .article-item-textarea:has(.link-btn) {
        background-color: transparent;
    }

        & .article-item-title {
            margin-block-end: 0;
        }
    & .article-item-title:has(+ .tagrow),
    & .tagrow:has(+ .article-item-title) {
        margin-block-end: 10px;
    }
}
.item-detail {
    position: relative;
    width: min(100%, 1000px);
    padding: 3rem 2rem;
    margin-block-start: 6em;
    margin-inline: auto;
    background-color: #DDF1FF;
    opacity: .85;

    &::before {
        content: "";
        position: absolute;
        top: -74px;
        right: 50%;
        transform: translateX(50%);
        display: inline-block;
        width: 85px;
        height: 74px;
        background: #ddf1ff;
        clip-path: polygon(0 100%, 50% 0, 100% 100%);
        opacity: .85;

        @media all and (min-width: 769px) {
            right: 90px;
        }
    }
    
    & .area-title {
        font-size: clamp(2.4rem, var(--mediaQuery), 3rem);
        font-weight: bold;
    }

    & .box-wrap {
        display: flex;
        flex-direction: column;
        gap: 15px;

        @media all and (min-width: 769px) {
            flex-direction: row;
        }

        & > div {
            width: 100%;
            padding: 2em;
            background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 1) 100%);
            background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 1) 100%);
            background-image: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 1) 100%);

            & .list-title {
                color: blue;
                font-weight: bold;
            }
        }
    }
}
.contact-area {
    margin-block-start: 0;
}


/* 英語版 */

.eng {
    & .kv {
      & .kv-inner-content {
            width: min(80%, var(--length-width));
        }  
    }
}