/* ============================
   PATENT PRODUCTS
============================ */

.patent-products {
    position: relative;

    width: 100%;

    min-height: 100vh;

    padding:
        90px 6% 100px;

    overflow: hidden;

    background:
        linear-gradient(180deg,
            #06192a 0%,
            #071c2e 100%);

    color: #fff;
    clip-path: polygon(0px 10%, 100% 0px, 100% 100%, 0px 100%);
}


/* ============================
   HEADING
============================ */

.patent-products-heading {
    position: relative;

    width: 100%;

    margin-bottom: 90px;

    text-align: center;
}


.patent-products-label {
    display: block;

    margin-bottom: 10px;

    font-size: 11px;
    font-weight: 600;

    letter-spacing: 0.32em;

    color: #15a9ce;
    margin-top: 2rem;
}


.patent-products-title {
    margin: 0;

    font-size: clamp(24px,
            2.2vw,
            34px);

    font-weight: 400;

    letter-spacing: 0.08em;

    color: #fff;
}


/* ============================
   TAB
============================ */

.patent-tabs {
    position: relative;

    width: 100%;

    max-width: 1400px;

    margin:
        0 auto 90px;

    display: grid;

    grid-template-columns:
        repeat(5,
            1fr);

    border-bottom:
        1px solid rgba(255,
            255,
            255,
            0.18);
}


.patent-tab {
    position: relative;

    min-height: 72px;

    padding:
        0 16px 24px;

    border: none;

    background: transparent;

    color:
        rgba(255,
            255,
            255,
            0.82);

    font: inherit;

    font-size: 14px;
    font-weight: 500;

    line-height: 1.5;

    letter-spacing: 0.04em;

    cursor: pointer;

    transition:
        color 0.35s ease,
        opacity 0.35s ease;
}


.patent-tab::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -1px;

    width: 100%;
    height: 2px;

    background: #10b7dd;

    transform:
        scaleX(0);

    transform-origin: center;

    transition:
        transform 0.4s ease;
}


.patent-tab:hover {
    color: #20c3e6;
}


.patent-tab.active {
    color: #15bada;
}


.patent-tab.active::after {
    transform:
        scaleX(1);
}


/* ============================
   CONTENTS
============================ */

.patent-contents {
    position: relative;

    width: 100%;

    max-width: 1400px;

    margin: 0 auto;
}


.patent-content {
    display: none;

    width: 100%;
}


.patent-content.active {
    display: block;
}


/* ============================
   MAIN
============================ */

.patent-content-main {
    position: relative;

    width: 100%;

    min-height: 560px;

    display: flex;

    align-items: center;
    justify-content: center;
}


/* ============================
   CONTENT NAME
============================ */

.patent-content-name {
    position: absolute;

    left: 50%;
    top: -10px;

    z-index: 4;

    transform:
        translateX(-50%);

    width: 100%;

    text-align: center;

    pointer-events: none;
}


.patent-status {
    display: inline-block;

    margin-bottom: 10px;

    padding:
        5px 10px;

    border:
        1px solid rgba(24,
            191,
            223,
            0.5);

    font-size: 9px;
    font-weight: 600;

    letter-spacing: 0.18em;

    color: #21c6e5;
}


.patent-status-pending {
    color: #8fbbca;

    border-color:
        rgba(150,
            190,
            205,
            0.4);
}


.patent-content-name h3 {
    margin:
        0 0 7px;

    font-size: clamp(25px,
            2.4vw,
            38px);

    font-weight: 400;

    letter-spacing: 0.06em;

    color: #fff;
}


.patent-content-en {
    display: block;

    font-size: 10px;
    font-weight: 500;

    letter-spacing: 0.24em;

    color:
        rgba(95,
            208,
            230,
            0.65);
}


/* ============================
   VISUAL
============================ */

.patent-visual {
    position: relative;

    z-index: 2;

    width:
        min(540px,
            42vw);

    height: 390px;

    display: flex;

    align-items: center;
    justify-content: center;
}


/* 大きな背景文字 */

.patent-visual-bg {
    position: absolute;

    left: 50%;
    top: 50%;

    z-index: -1;

    transform:
        translate(-50%,
            -50%);

    white-space: nowrap;

    font-size: clamp(62px,
            8vw,
            130px);

    font-weight: 400;

    line-height: 1;

    letter-spacing: 0.06em;

    color:
        rgba(23,
            179,
            210,
            0.11);

    pointer-events: none;
}


.patent-visual img {
    position: relative;

    z-index: 2;

    width: 100%;
    height: 100%;

    object-fit: contain;

    filter:
        drop-shadow(0 25px 25px rgba(0,
                0,
                0,
                0.3));
}


/* 下部の薄い光 */

.patent-visual::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: 3%;

    z-index: -1;

    width: 55%;
    height: 40px;

    transform:
        translateX(-50%);

    border-radius: 50%;

    background:
        rgba(15,
            167,
            201,
            0.15);

    filter:
        blur(25px);
}


/* ============================
   POINT
============================ */

.patent-point {
    position: absolute;

    z-index: 4;

    width: 180px;
}


.patent-point span {
    display: block;

    margin-bottom: 5px;

    font-size: 11px;
    font-weight: 500;

    letter-spacing: 0.12em;

    color: #15b8da;
}


.patent-point p {
    margin: 0;

    font-size: 14px;
    font-weight: 500;

    line-height: 1.8;

    letter-spacing: 0.04em;

    color:
        rgba(255,
            255,
            255,
            0.88);
}


/* ============================
   POINT LINE
============================ */

.patent-point::after {
    content: "";

    position: absolute;

    top: 32px;

    height: 1px;

    background:
        rgba(20,
            190,
            220,
            0.8);
}


/* 左上 */

.patent-point-1 {
    left: 3%;
    top: 24%;
}


.patent-point-1::after {
    left: calc(100% + 12px);

    width: 230px;

    transform:
        rotate(10deg);

    transform-origin: left center;
}


/* 左下 */

.patent-point-2 {
    left: 3%;
    bottom: 20%;
}


.patent-point-2::after {
    left: calc(100% + 12px);

    width: 235px;

    transform:
        rotate(-9deg);

    transform-origin: left center;
}


/* 右 */

.patent-point-3 {
    right: 3%;
    top: 38%;
}


.patent-point-3::after {
    right: calc(100% + 12px);

    width: 220px;

    transform:
        rotate(-10deg);

    transform-origin: right center;
}


/* ============================
   DETAIL
============================ */

.patent-detail {
    position: relative;

    width: 100%;

    max-width: 900px;

    margin:
        40px auto 0;

    padding:
        38px 42px;

    border-top:
        1px solid rgba(28,
            184,
            215,
            0.3);

    border-bottom:
        1px solid rgba(255,
            255,
            255,
            0.12);

    background:
        rgba(255,
            255,
            255,
            0.015);
}


.patent-description {
    max-width: 720px;

    margin:
        0 auto 35px;

    font-size: 13px;

    line-height: 2;

    letter-spacing: 0.04em;

    text-align: center;

    color:
        rgba(224,
            238,
            244,
            0.75);
}


/* ============================
   SPEC
============================ */

.patent-spec {
    margin: 0;
}


.patent-spec>div {
    display: grid;

    grid-template-columns:
        130px 1fr;

    align-items: center;

    gap: 25px;

    padding:
        14px 0;

    border-top:
        1px solid rgba(255,
            255,
            255,
            0.08);
}


.patent-spec>div:last-child {
    border-bottom:
        1px solid rgba(255,
            255,
            255,
            0.08);
}


.patent-spec dt {
    font-size: 10px;
    font-weight: 500;

    letter-spacing: 0.12em;

    color: #15afd0;
}


.patent-spec dd {
    margin: 0;

    font-size: 12px;

    line-height: 1.6;

    letter-spacing: 0.04em;

    color:
        rgba(255,
            255,
            255,
            0.8);
}


/* ============================
   TRANSITION用
============================ */
.patent-content.active .patent-point {
    animation:
        patentPointIn 0.6s ease both;
}


@keyframes patentPointIn {
    from {
        opacity: 0;

        transform:
            translateY(15px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}



/* ============================
   TABLET
============================ */

@media (max-width: 1100px) {

    .patent-products {
        padding-left: 4%;
        padding-right: 4%;
    }


    .patent-tabs {
        margin-bottom: 70px;
    }


    .patent-tab {
        padding-left: 8px;
        padding-right: 8px;

        font-size: 12px;
    }


    .patent-content-main {
        min-height: 520px;
    }


    .patent-visual {
        width:
            min(480px,
                46vw);

        height: 350px;
    }


    .patent-point {
        width: 150px;
    }


    .patent-point p {
        font-size: 12px;
    }


    .patent-point-1::after,
    .patent-point-2::after {
        width: 150px;
    }


    .patent-point-3::after {
        width: 145px;
    }
}


/* ============================
   MOBILE
============================ */

@media (max-width: 768px) {

    .patent-products {
        min-height: auto;

        padding:
            70px 5% 80px;
    }


    /* ============================
       HEADING
    ============================ */

    .patent-products-heading {
        margin-bottom: 50px;
    }


    .patent-products-label {
        font-size: 9px;

        letter-spacing: 0.25em;
    }


    .patent-products-title {
        font-size: 26px;
    }

    /* ============================
       TAB
    ============================ */

    .patent-tabs {
        width: calc(100% + 10%);

        margin-left: -5%;

        margin-bottom: 55px;

        display: flex;

        overflow-x: auto;

        scrollbar-width: none;

        scroll-snap-type:
            x mandatory;

        padding-left: 5%;
        padding-right: 5%;
    }


    .patent-tabs::-webkit-scrollbar {
        display: none;
    }


    .patent-tab {
        flex:
            0 0 auto;

        min-width: 175px;
        min-height: 58px;

        padding:
            0 16px 18px;

        font-size: 12px;

        scroll-snap-align: start;
    }


    /* ============================
       MAIN
    ============================ */

    .patent-content-main {
        min-height: auto;

        display: flex;

        flex-direction: column;

        padding-top: 100px;
    }


    /* ============================
       NAME
    ============================ */

    .patent-content-name {
        top: 0;
    }


    .patent-content-name h3 {
        font-size: 25px;
    }


    /* ============================
       VISUAL
    ============================ */

    .patent-visual {
        order: 1;

        width: 100%;
        height: 300px;

        margin-bottom: 30px;
    }


    .patent-visual-bg {
        font-size:
            clamp(48px,
                14vw,
                80px);
    }


    .patent-visual img {
        max-width: 420px;

        margin: 0 auto;
    }


    /* ============================
       POINT
    ============================ */

    .patent-point {
        position: relative;

        left: auto;
        right: auto;
        top: auto;
        bottom: auto;

        width: 100%;

        padding:
            17px 0 17px 22px;

        border-top:
            1px solid rgba(255,
                255,
                255,
                0.08);
    }


    .patent-point:last-of-type {
        border-bottom:
            1px solid rgba(255,
                255,
                255,
                0.08);
    }


    .patent-point::before {
        content: "";

        position: absolute;

        left: 0;
        top: 22px;

        width: 7px;
        height: 7px;

        border-radius: 50%;

        border:
            1px solid #16badb;
    }


    .patent-point::after {
        display: none;
    }


    .patent-point span {
        font-size: 9px;
    }


    .patent-point p {
        font-size: 13px;

        line-height: 1.7;
    }


    .patent-point-1,
    .patent-point-2,
    .patent-point-3 {
        order: 2;
    }


    /* ============================
       DETAIL
    ============================ */

    .patent-detail {
        margin-top: 45px;

        padding:
            30px 0;
    }


    .patent-description {
        margin-bottom: 30px;

        font-size: 12px;

        line-height: 1.9;

        text-align: left;
    }


    .patent-spec>div {
        grid-template-columns:
            90px 1fr;

        gap: 15px;

        padding:
            13px 0;
    }


    .patent-spec dt {
        font-size: 9px;
    }


    .patent-spec dd {
        font-size: 11px;
    }

}


/* ============================
   SMALL MOBILE
============================ */

@media (max-width: 480px) {

    .patent-products {
        padding-left: 20px;
        padding-right: 20px;
    }


    .patent-tabs {
        width: calc(100% + 40px);

        margin-left: -20px;

        padding-left: 20px;
        padding-right: 20px;
    }


    .patent-tab {
        min-width: 155px;

        font-size: 11px;
    }


    .patent-content-main {
        padding-top: 90px;
    }


    .patent-visual {
        height: 240px;
    }


    .patent-visual img {
        max-width: 300px;
    }


    .patent-content-name h3 {
        font-size: 21px;
    }


    .patent-status {
        font-size: 8px;
    }


    .patent-visual-bg {
        font-size: 46px;
    }


    .patent-point {
        padding-left: 20px;
    }


    .patent-point p {
        font-size: 12px;
    }


    .patent-spec>div {
        grid-template-columns: 1fr;

        gap: 5px;
    }

}

.patent-link {
    position: relative;
}

/* TODOサンプル */
.section-bg {
    position: absolute;
    inset: 0;
    background: #f7f8fa;
    color: #17202a;
    clip-path: polygon(0 8%,
            100% 0,
            100% 92%,
            0 100%);
}

.見出し2 {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
.見出しお{
    margin-bottom: 10px;
    font-weight: 600;
    letter-spacing: 0.22em;
    color: #15a9ce;
    margin-top: 2rem;
}
.section-bg1 {
    position: absolute;
}

.section-bg2 {
    position: absolute;
}

.見出しp {
      font-size: clamp(30px, 3vw, 3vw);
      color: black;
      text-align: center;
}

.見出しtext {
    font-size: 48px;
}

@media (max-width: 768px) {
    .見出しtext {
        font-size: 1.5rem;
    }

    .見出しp {}

}

/* カラー上書き↓で調整してほしい */
/* ============================
   WHITE THEME
============================ */
.patent-products {
    background:
        linear-gradient(180deg,
            #ffffff 0%,
            #f5f8fa 100%);
    color: #172330;
}

/* ============================
   HEADING
============================ */
.patent-products-label {
    color: #168ac4;
}

.patent-products-title {
    color: #172330;
}

/* ============================
   TAB
============================ */
.patent-tabs {
    border-bottom:
        1px solid rgba(20, 60, 90, 0.15);
}

.patent-tab {
    color:
        rgba(23, 35, 48, 0.55);
}

.patent-tab:hover {
    color: #168ac4;
}

.patent-tab.active {
    color: #168ac4;
}

.patent-tab::after {
    background: #168ac4;
}


/* ============================
   TITLE
============================ */

.patent-content-name h3 {
    color: #172330;
}

.patent-content-en {
    color:
        rgba(22, 138, 196, 0.65);
}


/* ============================
   STATUS
============================ */

.patent-status {
    color: #168ac4;

    border-color:
        rgba(22, 138, 196, 0.4);

    background:
        rgba(22, 138, 196, 0.04);
}

.patent-status-pending {
    color: #708894;

    border-color:
        rgba(80, 110, 125, 0.3);
}


/* ============================
   VISUAL
============================ */

.patent-visual-bg {
    color:
        rgba(22, 138, 196, 0.07);
}

.patent-visual img {
    filter:
        drop-shadow(0 25px 30px rgba(20, 60, 90, 0.12));
}

.patent-visual::after {
    background:
        rgba(22, 138, 196, 0.10);
}


/* ============================
   POINT
============================ */

.patent-point span {
    color: #168ac4;
}

.patent-point p {
    color:
        rgba(23, 35, 48, 0.85);
}

.patent-point::after {
    background:
        rgba(22, 138, 196, 0.65);
}


/* ============================
   DETAIL
============================ */

.patent-detail {
    border-top:
        1px solid rgba(22, 138, 196, 0.25);

    border-bottom:
        1px solid rgba(20, 60, 90, 0.10);

    background:
        rgba(255, 255, 255, 0.6);
}

.patent-description {
    color:
        rgba(23, 35, 48, 0.70);
}


/* ============================
   SPEC
============================ */

.patent-spec>div {
    border-top:
        1px solid rgba(20, 60, 90, 0.10);
}

.patent-spec>div:last-child {
    border-bottom:
        1px solid rgba(20, 60, 90, 0.10);
}

.patent-spec dt {
    color: #168ac4;
}

.patent-spec dd {
    color:
        rgba(23, 35, 48, 0.78);
}


/* ============================
   MOBILE POINT
============================ */

@media (max-width: 768px) {

    .patent-point {
        border-top:
            1px solid rgba(20, 60, 90, 0.10);
    }

    .patent-point:last-of-type {
        border-bottom:
            1px solid rgba(20, 60, 90, 0.10);
    }

    .patent-point::before {
        border-color: #168ac4;
    }

}